@cleartrip/ct-design-segment 4.0.0-TEST.1 → 5.0.0

package/src/SegmentButton.tsx

@@ -0,0 +1,115 @@
+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,
+        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,
+            display: 'flex' as const,
+            justifyContent: 'center' as const,
+            alignItems: 'center' as const,
+            paddingTop: 0,
+            paddingBottom: 0,
+            marginTop: 0,
+            marginBottom: 0,
+            color: isActive ? theme.color.text.neutral : innerTheme.color.text.primary,
+          },
+        };
+      }
+      return {
+        typography: {
+          ...getStyledSegmentButtonStyles({ theme: innerTheme, isActive }),
+          textAlign: 'center' as const,
+          display: 'flex' as const,
+          justifyContent: 'center' as const,
+          alignItems: 'center' as const,
+          paddingTop: 0,
+          paddingBottom: 0,
+          marginTop: 0,
+          marginBottom: 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;

package/src/constants.ts

@@ -0,0 +1,4 @@
+export enum SegmentVariant {
+  DEFAULT = 'default',
+  DARK = 'dark',
+}

package/src/index.native.ts

@@ -0,0 +1,3 @@
+export { default as Segment } from './Segment.native';
+export type * from './type';
+export * from './constants';

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as Segment } from './Segment';
+export type * from './type';
+export * from './constants';

package/src/style.ts

@@ -0,0 +1,132 @@
+import type { Theme } from '@cleartrip/ct-design-theme';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+import type { TextStyle } from '@cleartrip/ct-design-types';
+
+import { SegmentVariantType } from './type';
+import { SegmentVariant } from './constants';
+
+export const SEGMENT_THUMB_BOX_SHADOW = '0px 0px 4px rgba(0, 0, 0, 0.12)' as const;
+
+export const segmentThumbShadowNative = {
+  shadowColor: '#000000',
+  shadowOffset: { width: 0, height: 0 },
+  shadowOpacity: 0.12,
+  shadowRadius: 4,
+  elevation: 3,
+} as const;
+
+export const segmentStaticStyles = makeStyles((theme) => {
+  const trackHeight = theme.size[10];
+  const borderWidth = theme.border.width.sm;
+  const trackInnerHeight = Math.max(trackHeight - borderWidth * 2, 0);
+  const thumbInset = Math.max(theme.spacing[0.25], 0);
+  const trackRadius = Math.max(0, trackHeight / 2);
+  const trackInnerRadius = Math.max(0, trackInnerHeight / 2);
+  const thumbRadius = Math.max(0, trackInnerRadius - thumbInset);
+
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'row',
+      borderWidth,
+      borderColor: 'transparent',
+      borderRadius: trackRadius,
+      overflow: 'hidden',
+      backgroundColor: theme.color.background.disabled,
+      position: 'relative',
+      height: trackHeight,
+      alignItems: 'stretch',
+      padding: theme.spacing[1],
+    },
+    button: {
+      backgroundColor: 'transparent',
+      fontSize: theme.typography.size[14],
+      fontWeight: theme.typography.weight.medium,
+      lineHeight: theme.size[5],
+      borderColor: theme.color.border.default,
+      borderRadius: thumbRadius,
+      textAlign: 'center',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    animatedBlock: {
+      position: 'absolute',
+      top: 0,
+      height: '100%',
+      borderRadius: thumbRadius,
+      backgroundColor: theme.color.background.neutral,
+    },
+    animatedContainer: {
+      flexDirection: 'row',
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      position: 'relative',
+      height: '100%',
+      width: '100%',
+    },
+    tabMeasureCell: {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: 0,
+      minWidth: 0,
+    },
+    animatedBlockWidth: {
+      width: theme.size['100P'],
+    },
+  };
+});
+
+export const segmentWebThumbStyles = makeStyles((theme) => {
+  const trackHeight = theme.size[10];
+  const borderWidth = theme.border.width.sm;
+  const trackInnerHeight = Math.max(trackHeight - borderWidth * 2, 0);
+  const thumbInset = Math.max(theme.spacing[0.25], 0);
+  const thumbHeight = Math.max(trackInnerHeight - thumbInset * 2, 0);
+  const trackInnerRadius = Math.max(0, trackInnerHeight / 2);
+  const thumbRadius = Math.max(0, trackInnerRadius - thumbInset);
+
+  return {
+    root: {
+      position: 'absolute',
+      height: thumbHeight,
+      borderRadius: thumbRadius,
+      backgroundColor: theme.color.background.neutral,
+      top: thumbInset,
+      boxShadow: SEGMENT_THUMB_BOX_SHADOW,
+    },
+  };
+});
+
+export const getStyledSegmentButtonStyles = ({ theme, isActive }: { isActive: boolean; theme: Theme }): TextStyle => {
+  const color = isActive ? theme.color.tab.selectedPrimaryLabel : theme.color.tab.nonSelectedPrimaryLabel;
+  return {
+    color,
+    fontSize: theme.typography.size[14],
+    fontWeight: theme.typography.weight.medium,
+    lineHeight: theme.size[5],
+  };
+};
+
+export const getSegmentVariantStyles = (variant: SegmentVariantType, theme: Theme) => {
+  switch (variant) {
+    case SegmentVariant.DARK:
+      return {
+        animatedBlock: { style: { backgroundColor: theme.color.background.defaultDarkest } },
+        segmentButton: { style: { color: theme.color.text.primary } },
+        segmentButtonActive: { style: { color: theme.color.text.neutral } },
+        root: {
+          style: {
+            backgroundColor: theme.color.background.neutral,
+            borderColor: theme.color.border.disabledDark,
+          },
+        },
+      };
+    case SegmentVariant.DEFAULT:
+    default:
+      return {
+        animatedBlock: {},
+        segmentButton: {},
+        segmentButtonActive: {},
+      };
+  }
+};

package/src/type.ts

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react';
+
+import type { TextStyle, Styles } from '@cleartrip/ct-design-types';
+import { TypographyStyleConfigProps } from '@cleartrip/ct-design-typography';
+import type { IButtonProps } from '@cleartrip/ct-design-button';
+import { SegmentVariant } from './constants';
+export interface IOption {
+  tabId: string;
+  text: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+export type SegmentVariantType = `${SegmentVariant}`;
+
+export interface SegmentStyleConfigProps {
+  root?: Styles[];
+  optionButtonWrapper?: Styles[];
+  segmentButton?: ISegmentButtonProps['styleConfig'];
+  animatedContainer?: Styles[];
+  animatedBlock?: Styles[];
+  optionButtonWrapperActive?: Styles[];
+  segmentButtonActive?: TextStyle[];
+}
+
+export interface ISegmentProps {
+  /**
+   * If true, the segment takes the full width of its parent.
+   */
+  block?: boolean;
+
+  /**
+   * Disables all segment options.
+   */
+  disabled?: boolean;
+
+  /**
+   * Visual variant for the segment.
+   */
+  variant?: SegmentVariantType;
+
+  /**
+   * Allow `onChange` to fire even when an option is disabled.
+   */
+  enableTabClick?: boolean;
+
+  /**
+   * Fired when the active tab changes.
+   */
+  onChange: (value: string | number) => void;
+
+  /**
+   * Options rendered inside the segment.
+   */
+  options: IOption[];
+
+  /**
+   * Controlled active tab id.
+   */
+  activeTabId?: string;
+
+  /**
+   * Duration (ms) of the indicator slide animation.
+   */
+  animationDuration?: number;
+
+  /**
+   * Per-slot style overrides.
+   */
+  styleConfig?: SegmentStyleConfigProps;
+}
+
+export interface ISegmentButtonProps {
+  option: IOption;
+  index: number;
+  activeIndex: number;
+  disabled: boolean;
+  onOptionClick: (tabId: string, index: number) => void;
+  optionLength: number;
+  styleConfig?: {
+    segmentButton?: IButtonProps['styleConfig'];
+    segmentText?: TypographyStyleConfigProps;
+  };
+  variant: SegmentVariantType;
+}