Function TabLine

packages/dev/s2-docs/src/Tabs.tsx:136–175

(props: TabLineProps)

});

function TabLine(props: TabLineProps) {
  let {selectedTab} = props;
  let {direction} = useLocale();
  let state = useContext(TabListStateContext);

  let [style, setStyle] = useState<{
    transform: string | undefined;
    width: string | undefined;
    height: string | undefined;
  }>({
    transform: undefined,
    width: undefined,
    height: undefined
  });

  let onResize = useCallback(() => {
    if (selectedTab) {
      let styleObj: {
        transform: string | undefined;
        width: string | undefined;
        height: string | undefined;
      } = {
        transform: undefined,
        width: undefined,
        height: undefined
      };

      styleObj.transform = `translateY(${selectedTab.offsetTop}px)`;

      styleObj.height = `${selectedTab.offsetHeight}px`;
      setStyle(styleObj);
    }
  }, [setStyle, selectedTab]);

  useLayoutEffect(() => {
    onResize();
  }, [onResize, state?.selectedItem?.key, direction]);

  return <div style={{...style}} className={selectedIndicator} />;
}

const tab = style<
  TabRenderProps & {