@cleartrip/ct-design-segment 4.0.0 → 5.0.0

package/src/Segment.native.tsx

@@ -0,0 +1,284 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useTheme } from '@cleartrip/ct-design-theme';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import { Container } from '@cleartrip/ct-design-container';
+
+import { getSegmentVariantStyles, segmentStaticStyles, segmentThumbShadowNative } from './style';
+import { ISegmentProps, type SegmentStyleConfigProps } from './type';
+import { SegmentVariant } from './constants';
+import { SegmentButton } from './SegmentButton';
+
+function isEmptyOptions<T>(opts: T[] | undefined): boolean {
+  return !opts || opts.length === 0;
+}
+
+function toStyleArray<T>(value?: T | T[]): T[] {
+  if (value === undefined || value === null) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+const Segment: React.FC<ISegmentProps> = ({
+  block = false,
+  disabled = false,
+  enableTabClick = false,
+  variant = SegmentVariant.DEFAULT,
+  onChange,
+  options = [],
+  activeTabId,
+  animationDuration = 500,
+  styleConfig = {},
+}) => {
+  const {
+    root = [],
+    optionButtonWrapper = [],
+    segmentButton: segmentButtonConfig,
+    animatedContainer = [],
+    animatedBlock = [],
+    optionButtonWrapperActive = [],
+    segmentButtonActive = [],
+  } = styleConfig || {};
+  const baseSegmentButtonConfig = useMemo(() => segmentButtonConfig?.segmentButton ?? {}, [segmentButtonConfig]);
+  const baseSegmentTextConfig = useMemo(() => segmentButtonConfig?.segmentText ?? {}, [segmentButtonConfig]);
+  const baseSegmentButtonRoot = useMemo(
+    () => toStyleArray(baseSegmentButtonConfig.root),
+    [baseSegmentButtonConfig.root],
+  );
+  const baseSegmentTextRoot = useMemo(() => toStyleArray(baseSegmentTextConfig.root), [baseSegmentTextConfig.root]);
+
+  const theme = useTheme();
+  const variantStyles = useMemo(() => getSegmentVariantStyles(variant, theme), [variant, theme]);
+
+  const sanitizedOptions = useMemo(
+    () => options.filter((option) => String(option.tabId ?? '').trim().length > 0),
+    [options],
+  );
+
+  const [activeTabEleId, setActiveTabEleId] = useState<string>(() => {
+    const t = typeof activeTabId === 'string' ? activeTabId.trim() : '';
+    return t.length > 0 ? t : '';
+  });
+  const [trackContentWidth, setTrackContentWidth] = useState<number>(0);
+  const [tabLayouts, setTabLayouts] = useState<Array<{ x: number; width: number }>>([]);
+
+  const findActiveIndex = useCallback(
+    (id: string) => {
+      const idx = sanitizedOptions.findIndex((item) => item.tabId === id.trim());
+      return idx === -1 ? 0 : idx;
+    },
+    [sanitizedOptions],
+  );
+
+  const animation = useSharedValue(0);
+
+  const handleOptionClick = useCallback(
+    (tabId: string, index: number) => {
+      const clickedOption = sanitizedOptions[index];
+      const isDisabled = clickedOption?.disabled ?? false;
+
+      if (isDisabled && !enableTabClick) return;
+      onChange(tabId);
+      if (!isDisabled) {
+        setActiveTabEleId(tabId || '');
+        animation.value = withTiming(index, {
+          duration: animationDuration,
+        });
+      }
+    },
+    [animation, animationDuration, enableTabClick, onChange, sanitizedOptions],
+  );
+
+  const handleTrackContentLayout = useCallback(
+    (event: { nativeEvent?: { layout: { width: number } }; layout?: { width: number } }) => {
+      const width = event.nativeEvent?.layout?.width ?? event.layout?.width ?? 0;
+      setTrackContentWidth(width);
+    },
+    [],
+  );
+  const handleTabLayout = useCallback(
+    (
+      index: number,
+      event: { nativeEvent?: { layout: { x: number; width: number } }; layout?: { x: number; width: number } },
+    ) => {
+      const x = event.nativeEvent?.layout?.x ?? event.layout?.x ?? 0;
+      const width = event.nativeEvent?.layout?.width ?? event.layout?.width ?? 0;
+      setTabLayouts((previousLayouts) => {
+        const existingLayout = previousLayouts[index];
+        if (existingLayout && existingLayout.x === x && existingLayout.width === width) {
+          return previousLayouts;
+        }
+        const nextLayouts = [...previousLayouts];
+        nextLayouts[index] = { x, width };
+        return nextLayouts;
+      });
+    },
+    [],
+  );
+
+  const optionLength = sanitizedOptions.length;
+  const activeIndex = findActiveIndex(activeTabEleId);
+
+  const dynamicStyles = useStyles(
+    (themeArg) => ({
+      root: {
+        width: block ? themeArg?.size['100P'] : 'auto',
+      },
+      animatedBlock: {
+        ...(variantStyles.animatedBlock?.style ?? {}),
+      },
+    }),
+    [block, variantStyles, optionLength],
+  );
+  const tabCountForAnim = sanitizedOptions.length;
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const optionsCount = Math.max(tabCountForAnim, 1);
+    const indices = Array.from({ length: optionsCount }, (_, index) => index);
+    const fallbackSegmentWidth = trackContentWidth / optionsCount;
+    const hasStableMeasurements =
+      tabLayouts.length >= optionsCount &&
+      tabLayouts.slice(0, optionsCount).every((layout) => !!layout && layout.width > 0);
+    const positions = hasStableMeasurements
+      ? indices.map((index) => tabLayouts[index]?.x ?? index * fallbackSegmentWidth)
+      : indices.map((index) => index * fallbackSegmentWidth);
+    const widths = hasStableMeasurements
+      ? indices.map((index) => tabLayouts[index]?.width ?? fallbackSegmentWidth)
+      : indices.map(() => fallbackSegmentWidth);
+    const interpolatedLeft = interpolate(animation.value, indices, positions, Extrapolation.CLAMP);
+    const interpolatedWidth = Math.max(interpolate(animation.value, indices, widths, Extrapolation.CLAMP), 0);
+    const maxLeft = Math.max(trackContentWidth - interpolatedWidth, 0);
+    const boundedLeft = Math.min(Math.max(interpolatedLeft, 0), maxLeft);
+
+    return {
+      left: boundedLeft,
+      width: interpolatedWidth,
+    };
+  }, [trackContentWidth, tabCountForAnim, tabLayouts]);
+
+  const getSegmentButtonStyleConfig = useCallback(
+    (index: number): SegmentStyleConfigProps['segmentButton'] => {
+      const isActive = index === activeIndex;
+      return {
+        segmentButton: {
+          ...baseSegmentButtonConfig,
+          root: [...optionButtonWrapper, ...(isActive ? optionButtonWrapperActive : []), ...baseSegmentButtonRoot],
+        },
+        segmentText: {
+          ...baseSegmentTextConfig,
+          root: [
+            ...(variantStyles.segmentButton?.style ? [variantStyles.segmentButton.style] : []),
+            ...(isActive && variantStyles.segmentButtonActive?.style ? [variantStyles.segmentButtonActive.style] : []),
+            ...(isActive ? segmentButtonActive : []),
+            ...baseSegmentTextRoot,
+          ],
+        },
+      };
+    },
+    [
+      activeIndex,
+      baseSegmentButtonConfig,
+      baseSegmentButtonRoot,
+      baseSegmentTextConfig,
+      baseSegmentTextRoot,
+      optionButtonWrapper,
+      optionButtonWrapperActive,
+      segmentButtonActive,
+      variantStyles.segmentButton?.style,
+      variantStyles.segmentButtonActive?.style,
+    ],
+  );
+
+  useEffect(() => {
+    if (activeTabId === undefined || activeTabId === null) return;
+    const t = `${activeTabId}`.trim();
+    if (!t.length) return;
+    if (sanitizedOptions.some((o) => o.tabId === t)) {
+      setActiveTabEleId(t);
+    }
+  }, [activeTabId, sanitizedOptions]);
+
+  useEffect(() => {
+    setActiveTabEleId((prev) => {
+      const trimmed = prev.trim();
+      if (trimmed.length > 0 && sanitizedOptions.some((option) => option.tabId === trimmed)) {
+        return prev;
+      }
+      return sanitizedOptions[0]?.tabId ?? '';
+    });
+  }, [sanitizedOptions]);
+
+  useEffect(() => {
+    setTabLayouts([]);
+  }, [sanitizedOptions]);
+
+  useEffect(() => {
+    if (!sanitizedOptions.length) return;
+    const idx = Math.min(Math.max(findActiveIndex(activeTabEleId), 0), sanitizedOptions.length - 1);
+    animation.value = withTiming(idx, { duration: animationDuration });
+  }, [activeTabEleId, animation, animationDuration, findActiveIndex, sanitizedOptions]);
+
+  if (!sanitizedOptions?.length) return null;
+
+  return (
+    <Container
+      styleConfig={{
+        root: [
+          segmentStaticStyles.root,
+          dynamicStyles.root,
+          ...(variantStyles.root?.style ? [variantStyles.root.style] : []),
+          ...root,
+        ],
+      }}
+    >
+      <Container
+        onLayout={handleTrackContentLayout}
+        styleConfig={{
+          root: [segmentStaticStyles.animatedContainer, ...animatedContainer],
+        }}
+      >
+        <Animated.View
+          pointerEvents='none'
+          style={[
+            segmentStaticStyles.animatedBlock,
+            animatedStyle,
+            dynamicStyles.animatedBlock,
+            ...(variantStyles.animatedBlock?.style ? [variantStyles.animatedBlock.style] : []),
+            segmentThumbShadowNative,
+            ...animatedBlock,
+          ]}
+        />
+        {!isEmptyOptions(sanitizedOptions) &&
+          sanitizedOptions.map((option, index) => (
+            <Container
+              key={option.tabId}
+              onLayout={(event) => {
+                handleTabLayout(index, event);
+              }}
+              styleConfig={{
+                root: [segmentStaticStyles.tabMeasureCell],
+              }}
+            >
+              <SegmentButton
+                option={option}
+                index={index}
+                activeIndex={activeIndex}
+                disabled={disabled}
+                onOptionClick={handleOptionClick}
+                optionLength={optionLength}
+                variant={variant}
+                styleConfig={getSegmentButtonStyleConfig(index)}
+              />
+            </Container>
+          ))}
+      </Container>
+    </Container>
+  );
+};
+
+export default Segment;

package/src/Segment.tsx

@@ -0,0 +1,277 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useTheme } from '@cleartrip/ct-design-theme';
+import { useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { Container } from '@cleartrip/ct-design-container';
+
+import { getSegmentVariantStyles, segmentStaticStyles, segmentWebThumbStyles } from './style';
+import { ISegmentProps } from './type';
+import { SegmentVariant } from './constants';
+import { SegmentButton } from './SegmentButton';
+import { css } from '@emotion/css';
+import useIsomorphicEffect from '@cleartrip/ct-design-use-isomorphic-effect';
+
+function isEmptyOptions<T>(opts: T[] | undefined): boolean {
+  return !opts || opts.length === 0;
+}
+
+function toStyleArray<T>(value?: T | T[]): T[] {
+  if (value === undefined || value === null) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+const Segment: React.FC<ISegmentProps> = ({
+  block = false,
+  disabled = false,
+  enableTabClick = false,
+  variant = SegmentVariant.DEFAULT,
+  onChange,
+  options = [],
+  activeTabId,
+  animationDuration = 500,
+  styleConfig = {},
+}) => {
+  const {
+    root = [],
+    optionButtonWrapper = [],
+    segmentButton: segmentButtonConfig,
+    animatedContainer = [],
+    animatedBlock = [],
+    optionButtonWrapperActive = [],
+    segmentButtonActive = [],
+  } = styleConfig || {};
+  const theme = useTheme();
+  const variantStyles = useMemo(() => getSegmentVariantStyles(variant, theme), [variant, theme]);
+
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const tabRefs = useRef<Array<HTMLDivElement | null>>([]);
+
+  const sanitizedOptions = useMemo(
+    () => options.filter((option) => String(option.tabId ?? '').trim().length > 0),
+    [options],
+  );
+
+  const [activeTabEleId, setActiveTabEleId] = useState<string>(() => {
+    const t = typeof activeTabId === 'string' ? activeTabId.trim() : '';
+    return t.length > 0 ? t : '';
+  });
+  const [trackWidth, setTrackWidth] = useState<number>(0);
+  const [tabLayouts, setTabLayouts] = useState<Array<{ x: number; width: number }>>([]);
+
+  const baseSegmentButtonConfig = useMemo(() => segmentButtonConfig?.segmentButton ?? {}, [segmentButtonConfig]);
+  const baseSegmentTextConfig = useMemo(() => segmentButtonConfig?.segmentText ?? {}, [segmentButtonConfig]);
+  const baseSegmentButtonRoot = useMemo(
+    () => toStyleArray(baseSegmentButtonConfig.root),
+    [baseSegmentButtonConfig.root],
+  );
+  const baseSegmentTextRoot = useMemo(() => toStyleArray(baseSegmentTextConfig.root), [baseSegmentTextConfig.root]);
+
+  const measureTabs = useCallback(() => {
+    const rootNode = rootRef.current;
+    if (!rootNode) return;
+    const rootRect = rootNode.getBoundingClientRect();
+    setTrackWidth(rootRect.width);
+    const layouts = sanitizedOptions.map((_, index) => {
+      const tabNode = tabRefs.current[index];
+      if (!tabNode) return { x: 0, width: 0 };
+      const rect = tabNode.getBoundingClientRect();
+      return { x: rect.left - rootRect.left, width: rect.width };
+    });
+    setTabLayouts(layouts);
+  }, [sanitizedOptions]);
+
+  useEffect(() => {
+    tabRefs.current = tabRefs.current.slice(0, sanitizedOptions.length);
+  }, [sanitizedOptions.length]);
+
+  useEffect(() => {
+    measureTabs();
+  }, [measureTabs]);
+
+  useEffect(() => {
+    if (typeof ResizeObserver === 'undefined' || !rootRef.current) return;
+    const observer = new ResizeObserver(() => {
+      measureTabs();
+    });
+    observer.observe(rootRef.current);
+    tabRefs.current.forEach((tabNode) => {
+      if (tabNode) observer.observe(tabNode);
+    });
+    return () => observer.disconnect();
+  }, [measureTabs, sanitizedOptions.length]);
+
+  const findActiveIndex = useCallback(
+    (id: string) => {
+      const idx = sanitizedOptions.findIndex((item) => item.tabId === id.trim());
+      return idx === -1 ? 0 : idx;
+    },
+    [sanitizedOptions],
+  );
+
+  const handleOptionClick = useCallback(
+    (tabId: string, index: number) => {
+      const clickedOption = sanitizedOptions[index];
+      const isDisabled = clickedOption?.disabled ?? false;
+
+      if (isDisabled && !enableTabClick) return;
+      onChange(tabId);
+      if (!isDisabled) {
+        setActiveTabEleId(tabId || '');
+      }
+    },
+    [enableTabClick, onChange, sanitizedOptions],
+  );
+
+  const optionLength = sanitizedOptions.length;
+  const activeIndex = findActiveIndex(activeTabEleId);
+
+  const dynamicStyles = useStyles(
+    () => ({
+      root: {
+        width: block ? theme?.size['100P'] : 'auto',
+      },
+    }),
+    [block, theme],
+  );
+
+  const getSegmentButtonStyleConfig = useCallback(
+    (index: number) => {
+      const isActive = index === activeIndex;
+      return {
+        segmentButton: {
+          ...baseSegmentButtonConfig,
+          root: [...optionButtonWrapper, ...(isActive ? optionButtonWrapperActive : []), ...baseSegmentButtonRoot],
+        },
+        segmentText: {
+          ...baseSegmentTextConfig,
+          root: [
+            ...(variantStyles.segmentButton?.style ? [variantStyles.segmentButton.style] : []),
+            ...(isActive && variantStyles.segmentButtonActive?.style ? [variantStyles.segmentButtonActive.style] : []),
+            ...(isActive ? segmentButtonActive : []),
+            ...baseSegmentTextRoot,
+          ],
+        },
+      };
+    },
+    [
+      activeIndex,
+      baseSegmentButtonConfig,
+      baseSegmentButtonRoot,
+      baseSegmentTextConfig,
+      baseSegmentTextRoot,
+      optionButtonWrapper,
+      optionButtonWrapperActive,
+      segmentButtonActive,
+      variantStyles.segmentButton?.style,
+      variantStyles.segmentButtonActive?.style,
+    ],
+  );
+
+  useIsomorphicEffect(() => {
+    if (activeTabId === undefined || activeTabId === null) return;
+    const t = `${activeTabId}`.trim();
+    if (!t.length) return;
+    if (sanitizedOptions.some((option) => option.tabId === t)) {
+      setActiveTabEleId(t);
+      return;
+    }
+  }, [activeTabId, sanitizedOptions]);
+
+  useIsomorphicEffect(() => {
+    setActiveTabEleId((prev) => {
+      const trimmed = prev.trim();
+      if (trimmed.length > 0 && sanitizedOptions.some((option) => option.tabId === trimmed)) {
+        return prev;
+      }
+      return sanitizedOptions[0]?.tabId ?? '';
+    });
+  }, [sanitizedOptions]);
+
+  const rootClassName = useWebMergeStyles(
+    [
+      segmentStaticStyles.root,
+      dynamicStyles.root,
+      ...(variantStyles.root?.style ? [variantStyles.root.style] : []),
+      ...root,
+    ],
+    [segmentStaticStyles.root, dynamicStyles.root, variantStyles.root?.style, root],
+  );
+  const tabMeasureCellClassName = useWebMergeStyles(
+    [segmentStaticStyles.tabMeasureCell],
+    [segmentStaticStyles.tabMeasureCell],
+  );
+  const webThumbBaseClassName = useWebMergeStyles(
+    [
+      segmentWebThumbStyles.root,
+      ...(variantStyles.animatedBlock?.style ? [variantStyles.animatedBlock.style] : []),
+      ...animatedBlock,
+    ],
+    [segmentWebThumbStyles.root, variantStyles.animatedBlock?.style, animatedBlock],
+  );
+
+  const hasStableMeasurements =
+    tabLayouts.length >= optionLength &&
+    tabLayouts.slice(0, optionLength).every((layout) => !!layout && layout.width > 0);
+  const segmentPercent = optionLength > 0 ? 100 / optionLength : 100;
+
+  const dynamicWebStyles = useMemo(() => {
+    const transition = `left ${animationDuration}ms ease, width ${animationDuration}ms ease`;
+    if (hasStableMeasurements && optionLength > 0) {
+      const safeIndex = Math.max(0, Math.min(activeIndex, optionLength - 1));
+      const activeLayout = tabLayouts[safeIndex];
+      const width = Math.max(activeLayout?.width ?? trackWidth / Math.max(optionLength, 1), 0);
+      const maxLeft = Math.max(trackWidth - width, 0);
+      const left = Math.min(Math.max(activeLayout?.x ?? 0, 0), maxLeft);
+      return css({
+        left: `${left}px`,
+        width: `${width}px`,
+        transition,
+      });
+    }
+
+    return css({
+      left: `calc(${activeIndex * segmentPercent}%)`,
+      width: `${segmentPercent}%`,
+      transition,
+      animationDuration: `${animationDuration}ms`,
+      animationFillMode: 'forwards',
+    });
+  }, [activeIndex, animationDuration, hasStableMeasurements, optionLength, segmentPercent, tabLayouts, trackWidth]);
+
+  if (!sanitizedOptions?.length) return null;
+
+  return (
+    <div className={rootClassName} ref={rootRef}>
+      <Container
+        styleConfig={{
+          root: [segmentStaticStyles.animatedContainer, ...animatedContainer],
+        }}
+      >
+        {!isEmptyOptions(sanitizedOptions) &&
+          sanitizedOptions.map((option, index) => (
+            <div
+              key={option.tabId}
+              ref={(element) => {
+                tabRefs.current[index] = element;
+              }}
+              className={tabMeasureCellClassName}
+            >
+              <SegmentButton
+                option={option}
+                index={index}
+                activeIndex={activeIndex}
+                disabled={disabled}
+                onOptionClick={handleOptionClick}
+                optionLength={optionLength}
+                variant={variant}
+                styleConfig={getSegmentButtonStyleConfig(index)}
+              />
+            </div>
+          ))}
+      </Container>
+      <div className={`${webThumbBaseClassName} ${dynamicWebStyles}`} />
+    </div>
+  );
+};
+
+export default Segment;

package/src/SegmentButton.native.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from '@cleartrip/ct-design-button';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import { useTheme } from '@cleartrip/ct-design-theme';
+
+import { ISegmentButtonProps } from './type';
+import { SegmentVariant } from './constants';
+import { getStyledSegmentButtonStyles, segmentStaticStyles } from './style';
+
+export const SegmentButton: React.FC<ISegmentButtonProps> = ({
+  option,
+  index,
+  activeIndex,
+  disabled,
+  onOptionClick,
+  styleConfig,
+  variant,
+  optionLength: _optionLength,
+}) => {
+  const theme = useTheme();
+  const isActive = index === activeIndex;
+
+  const { segmentButton = {}, segmentText = {} } = styleConfig || {};
+
+  const shell = useStyles(
+    (t) => ({
+      rowCell: {
+        flexGrow: 1,
+        flexBasis: 0,
+        flexShrink: 1,
+        minWidth: 0,
+        minHeight: 0,
+        width: undefined,
+        alignSelf: 'stretch',
+        height: t.size[10],
+        maxHeight: t.size[10],
+        paddingHorizontal: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingVertical: 0,
+        marginHorizontal: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+    }),
+    [],
+  );
+
+  const dynamicStyles = useStyles(
+    (innerTheme) => {
+      if (variant === SegmentVariant.DARK) {
+        return {
+          typography: {
+            fontSize: innerTheme.typography.size[14],
+            fontWeight: innerTheme.typography.weight.medium,
+            lineHeight: innerTheme.size[5],
+            textAlign: 'center' as const,
+            textAlignVertical: 'center' as const,
+            includeFontPadding: false,
+            paddingVertical: 0,
+            marginVertical: 0,
+            color: isActive ? theme.color.text.neutral : innerTheme.color.text.primary,
+          },
+        };
+      }
+      return {
+        typography: {
+          ...getStyledSegmentButtonStyles({ theme: innerTheme, isActive }),
+          textAlign: 'center' as const,
+          textAlignVertical: 'center' as const,
+          includeFontPadding: false,
+          paddingVertical: 0,
+          marginVertical: 0,
+        },
+      };
+    },
+    [isActive, variant, theme],
+  );
+
+  const segmentTextRoot =
+    segmentText.root === undefined ? [] : Array.isArray(segmentText.root) ? segmentText.root : [segmentText.root];
+
+  return (
+    <Button
+      variant={ButtonVariant.BARE}
+      color={ButtonColor.TERTIARY}
+      size={ButtonSize.SMALL}
+      isFullWidth={false}
+      prefixIcon={option?.icon}
+      onClick={() => {
+        if (disabled) return;
+        onOptionClick(option.tabId, index);
+      }}
+      disabled={disabled}
+      styleConfig={{
+        ...segmentButton,
+        root: [segmentStaticStyles.button, ...(segmentButton.root ?? []), shell.rowCell],
+        typography: {
+          ...segmentText,
+          root: [dynamicStyles.typography, ...segmentTextRoot],
+        },
+      }}
+    >
+      {option?.text ?? ''}
+    </Button>
+  );
+};
+
+export default SegmentButton;