diff --git a/demo-ssr/package.json b/demo-ssr/package.json index 4675428..f906a25 100644 --- a/demo-ssr/package.json +++ b/demo-ssr/package.json @@ -9,11 +9,11 @@ "astro": "astro" }, "dependencies": { - "astro": "^1.2.3", + "astro": "^1.2.6", "indicate": "file:.." }, "devDependencies": { - "@astrojs/react": "^1.1.2", + "@astrojs/react": "^1.1.3", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/demo-ssr/public/arrow.png b/demo-ssr/public/arrow.png new file mode 100644 index 0000000..2a184ba Binary files /dev/null and b/demo-ssr/public/arrow.png differ diff --git a/demo-ssr/src/pages/index.astro b/demo-ssr/src/pages/index.astro index b4328b9..46694a6 100644 --- a/demo-ssr/src/pages/index.astro +++ b/demo-ssr/src/pages/index.astro @@ -58,6 +58,29 @@ import { Indicate } from 'indicate'
+ 
{``}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
{``}
@@ -153,6 +176,25 @@ import { Indicate } from 'indicate'
+ 
{`
+`}
+ + + Company + Contact + Country + + + Alfreds Futterkiste + Maria Anders + Germany + + + Centro comercial Moctezuma + Francisco Chang + Mexico + +

Hydrated

{``}
@@ -206,6 +248,29 @@ import { Indicate } from 'indicate'
+ 
{``}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
{``}
@@ -324,6 +389,209 @@ import { Indicate } from 'indicate'
+ 
{``}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 
{``}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 
{``}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 
{``}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 
{`{\`>\`} }} client:load>`}
+ ' }} client:load> +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 
{``}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 
{``}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 
{``}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 
{`
+`}
+ + + Company + Contact + Country + + + Alfreds Futterkiste + Maria Anders + Germany + + + Centro comercial Moctezuma + Francisco Chang + Mexico + + diff --git a/react.tsx b/react.tsx index d02965e..bd8afae 100644 --- a/react.tsx +++ b/react.tsx @@ -44,6 +44,122 @@ const childrenValid = (children: ReactNode, childRef: ForwardedRef) return valid } +const hideScrollbarClass = 'hide-indicate-scrollbar' + +type ArrowIcon = 'arrow-rounded' | 'pointer-rounded' | 'arrow' | 'pointer' +type ArrowPosition = 'center' | 'end' | 'start' + +interface ArrowProps { + // eslint-disable-next-line react/no-unused-prop-types + position: ArrowPosition + icon: ArrowIcon + color: string + image?: string + markup?: JSX.Element +} + +const defaultArrowProps: ArrowProps = { + position: 'center', + icon: 'arrow-rounded', + color: '#000000', +} + +const directionToRotation = { + [Direction.left]: 180, + [Direction.right]: 0, + [Direction.top]: 270, + [Direction.bottom]: 90, +} + +function Arrow({ icon, color, markup, image, direction }: ArrowProps & { direction: Direction }) { + const style = { + width: 12, + height: 12, + display: 'block', + transform: `rotate(${directionToRotation[direction]}deg)`, + } + + if (image) { + return {`indicate + } + + if (markup) { + return {markup} + } + + if (icon === 'arrow-rounded') { + return ( + + + + + + ) + } + + if (icon === 'pointer-rounded') { + return ( + + + + + ) + } + + if (icon === 'arrow') { + return ( + + + + + + ) + } + + return ( + + + + + ) +} + +const getArrowPosition = (position: ArrowPosition) => { + if (position === 'center') { + return position + } + + return `flex-${position}` +} + type ReactHTMLElementProperties = DetailedHTMLProps, HTMLElement> type ReactHTMLDivElementProperties = DetailedHTMLProps< HTMLAttributes, @@ -60,10 +176,13 @@ interface Props { color?: string width?: string style?: CSSProperties + hideScrollbar?: boolean innerStyle?: CSSProperties outerStyle?: CSSProperties outerWrapperProps?: ReactHTMLDivElementProperties innerWrapperProps?: ReactHTMLDivElementProperties + arrow?: false & Partial + theme?: any // TODO } const createDirectionRefsObject = () => @@ -89,6 +208,9 @@ export const Indicate = forwardRef)?.current // const innerWrapper = innerWrapperRef?.current + if (as === 'table') { + console.log(element, element instanceof Element) + } + const disconnectObserver = observe(element) return disconnectObserver @@ -193,16 +319,60 @@ export const Indicate = forwardRef)?.current && options?.inlineStyles?.innerWrapper), }, }) + } else if (as === 'table') { + content = ( +
+ {children}
+ {/* Observers */} + {directions.map((direction) => ( + + ))} +
+ ) } else { // createElement workaround to render "as" element from string. content = createElement( as, - { ref: elementRef, style: { overflow: 'auto', ...style }, ...props }, + { + ref: elementRef, + className: + className || hideScrollbar + ? `${className}${hideScrollbar ? ` ${hideScrollbarClass}` : ''}` + : undefined, + style: { + overflow: 'auto', + ...(hideScrollbar && { + '-ms-overflow-style': 'none', + 'scrollbar-width': 'none', + }), + ...style, + }, + ...props, + },
+ {hideScrollbar && ( + + )} {content} {/* Indicators */} {directions.map((direction, index) => ( @@ -255,8 +428,8 @@ export const Indicate = forwardRef {}} ref={indicatorsRef[index]} onClick={click ? () => handleIndicatorClick(direction) : null} - /> + > + {arrow && } + ))}
)