@seakoi/native-ui 1.0.0

package/src/components/base/checkbox/style/index.ts

@@ -0,0 +1,64 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useCheckboxStyles = createThemedStyles(theme => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing.sm,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  fullContainer: {
+    width: '100%',
+    flexShrink: 1,
+    flexBasis: 'auto',
+  },
+  reverseContainerDirection: {
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-between',
+  },
+  wrapper: {
+    flexShrink: 1,
+    flexBasis: 'auto',
+  },
+  icon: {
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    flexDirection: 'column',
+  },
+  disabledIconBackground: {
+    inset: 2,
+    zIndex: -1,
+    position: 'absolute',
+    backgroundColor: theme.palette.blueGray1,
+  },
+}));
+
+export const useCheckboxCardStyles = createThemedStyles(theme => ({
+  checkbox: {
+    padding: 16,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    position: 'relative',
+    overflow: 'hidden',
+    borderColor: theme.palette.gray3,
+    borderRadius: theme.roundness.lg,
+    backgroundColor: theme.palette.white,
+  },
+  ribbon: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    borderWidth: 14,
+    borderStyle: 'solid',
+  },
+  checkIcon: {
+    position: 'absolute',
+    top: -2,
+    left: -2,
+  },
+}));

package/src/components/base/collapse/collapse-context.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export interface CollapseContextValue {
+  /** 是否显示箭头 */
+  showArrow?: boolean;
+  /** 激活的 key */
+  activeKeys: React.Key[];
+  /** 是否在折叠时销毁内容 */
+  destroyOnHidden?: boolean;
+  /** 设置激活的 key */
+  setActiveKeys: (state: React.SetStateAction<React.Key[]>) => void;
+  /** 自定义箭头图标 */
+  renderArrowIcon?: (collapsed: boolean) => React.ReactElement;
+}
+
+export const CollapseContext = React.createContext<CollapseContextValue | null>(
+  null,
+);

package/src/components/base/collapse/collapse-panel.tsx

@@ -0,0 +1,158 @@
+import { RightOutlined } from '@seakoi/svg-icons';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  LayoutAnimation,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { Cell, type CellProps, Surface, type SurfaceProps } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import { CollapseContext } from './collapse-context';
+import { useCollapsePanelStyles } from './style';
+
+export interface CollapsePanelProps
+  extends Omit<
+    CellProps,
+    | 'prefix'
+    | 'containerStyle'
+    | 'rightContentStyle'
+    | 'contentContainerStyle'
+    | 'renderArrowIcon'
+  > {
+  /** 唯一值 */
+  panelKey: React.Key;
+  /** 是否可折叠 */
+  collapsible?: boolean;
+  /** 隐藏时是否渲染内容 */
+  forceRender?: boolean;
+  /** 阴影等级 */
+  elevation?: SurfaceProps['elevation'];
+  /** 展开图标位置 */
+  expandIconPlacement?: 'left' | 'right';
+  /** 面板容器样式 */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** 面板内容容器样式 */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  /** 面板头部样式 */
+  headerStyle?: StyleProp<ViewStyle>;
+  /** 面板头部内容样式 */
+  headerContentStyle?: StyleProp<ViewStyle>;
+  /** 面板头部右侧内容样式 */
+  headerRightExtraStyle?: StyleProp<ViewStyle>;
+  /** 自定义箭头图标 */
+  renderArrowIcon?: (collapsed: boolean) => React.ReactElement;
+}
+
+export const CollapsePanel: React.FC<
+  React.PropsWithChildren<CollapsePanelProps>
+> = ({
+  containerStyle,
+  contentContainerStyle,
+  headerStyle,
+  headerContentStyle,
+  headerRightExtraStyle,
+  elevation = 1,
+  collapsible = true,
+  expandIconPlacement = 'right',
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useCollapsePanelStyles();
+  const context = useContext(CollapseContext);
+  const [contentHeight, setContentHeight] = useState({ value: 0, measured: false });
+
+  const forceRender = useRef(props.forceRender ?? !context?.destroyOnHidden);
+  const [shouldRender, setShouldRender] = useState(() => {
+    if (!contentHeight.measured) return true;
+    return forceRender.current;
+  });
+
+  const showArrow = !!(props.showArrow ?? context?.showArrow);
+  const expandIconInRight = expandIconPlacement === 'right';
+  const showLeftExpandIcon = showArrow && !expandIconInRight;
+  const isCollapsed = !context?.activeKeys.includes(props.panelKey);
+
+  const animationValue = isCollapsed ? 0 : 1;
+  const { current: animation } = useRef(new Animated.Value(animationValue));
+  const rotateAnimation = animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '90deg'],
+  });
+  const heightAnimation = animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, contentHeight.value],
+  });
+
+  useEffect(() => {
+    Animated.timing(animation, {
+      duration: 150,
+      useNativeDriver: false,
+      toValue: animationValue,
+    }).start(({ finished }) => {
+      if (finished && isCollapsed) {
+        setShouldRender(forceRender.current);
+      }
+    });
+  }, [animation, animationValue, isCollapsed]);
+
+  const renderArrowIcon = () => {
+    if (props.renderArrowIcon) {
+      return props.renderArrowIcon(isCollapsed);
+    }
+    return (
+      <Animated.View style={{ transform: [{ rotate: rotateAnimation }] }}>
+        <RightOutlined size={16} color={theme.palette.fontGray4} />
+      </Animated.View>
+    );
+  };
+
+  return (
+    <Surface elevation={elevation} style={[styles.container, containerStyle]}>
+      <Cell
+        {...props}
+        style={headerStyle}
+        disabledPress={!collapsible}
+        extraStyle={headerRightExtraStyle}
+        contentContainerStyle={headerContentStyle}
+        onPress={event => {
+          props.onPress?.(event);
+          setShouldRender(true);
+          LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+          if (props.panelKey && context) {
+            context.setActiveKeys(prevState => {
+              return !prevState.includes(props.panelKey)
+                ? [...prevState, props.panelKey]
+                : prevState.filter(currentKey => currentKey !== props.panelKey);
+            });
+          }
+        }}
+        renderArrowIcon={renderArrowIcon}
+        showArrow={showArrow && expandIconInRight}
+        prefix={!showLeftExpandIcon ? undefined : renderArrowIcon()}
+      />
+      <Animated.View
+        style={[contentHeight.measured && { height: heightAnimation }]}
+      >
+        {!!shouldRender && (
+          <View
+            style={[styles.contentContainer, contentContainerStyle]}
+            onLayout={({ nativeEvent }) => {
+              if (!contentHeight.measured) {
+                setContentHeight({
+                  measured: true,
+                  value: nativeEvent.layout.height,
+                });
+              }
+            }}
+          >
+            {props.children}
+          </View>
+        )}
+      </Animated.View>
+    </Surface>
+  );
+};

package/src/components/base/collapse/collapse.tsx

@@ -0,0 +1,70 @@
+import { useControllableValue, useLatest } from 'ahooks';
+import React, { useCallback, useMemo } from 'react';
+
+import { CollapseContext, type CollapseContextValue } from './collapse-context';
+
+export interface CollapseProps
+  extends Pick<CollapseContextValue, 'showArrow' | 'renderArrowIcon'> {
+  /** 是否开启手风琴模式 */
+  accordion?: boolean;
+  /** 激活的面板 Key */
+  activeKey?: React.Key | React.Key[];
+  /** 默认激活的面板 Key */
+  defaultActiveKey?: React.Key | React.Key[];
+  /** 是否在折叠时销毁内容 */
+  destroyOnHidden?: boolean;
+  /** 切换面板时的回调 */
+  onChange?: (activeKey?: React.Key | React.Key[]) => void;
+}
+
+export const Collapse: React.FC<React.PropsWithChildren<CollapseProps>> = props => {
+  const renderArrowIcon = useLatest(props.renderArrowIcon);
+  const [activeKey, setActiveKey] = useControllableValue<
+    React.Key | React.Key[] | undefined
+  >(props, {
+    valuePropName: 'activeKey',
+    defaultValuePropName: 'defaultActiveKey',
+    defaultValue: props.accordion ? undefined : [],
+  });
+
+  const activeKeys = useMemo(() => {
+    const nextActiveKeys = (
+      Array.isArray(activeKey) ? activeKey : [activeKey]
+    ).filter(key => !!key && typeof key !== 'number');
+    return nextActiveKeys as React.Key[];
+  }, [activeKey]);
+
+  const latestActiveKeys = useLatest(activeKeys);
+  const setActiveKeys = useCallback(
+    (stateOrSetState: React.SetStateAction<React.Key[]>) => {
+      const nextState =
+        typeof stateOrSetState !== 'function'
+          ? stateOrSetState
+          : stateOrSetState(latestActiveKeys.current);
+      setActiveKey(!props.accordion ? nextState : nextState.pop());
+    },
+    [latestActiveKeys, props.accordion, setActiveKey],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      activeKeys,
+      setActiveKeys,
+      showArrow: props.showArrow,
+      destroyOnHidden: !!props.destroyOnHidden,
+      renderArrowIcon: renderArrowIcon.current,
+    }),
+    [
+      activeKeys,
+      setActiveKeys,
+      props.destroyOnHidden,
+      props.showArrow,
+      renderArrowIcon,
+    ],
+  );
+  return (
+    <CollapseContext.Provider value={contextValue}>
+      {props.children}
+    </CollapseContext.Provider>
+  );
+};

package/src/components/base/collapse/index.ts

@@ -0,0 +1,7 @@
+import { Collapse as _Collapse } from './collapse';
+import { CollapsePanel } from './collapse-panel';
+
+export * from './collapse';
+export * from './collapse-panel';
+
+export const Collapse = Object.assign(_Collapse, { Panel: CollapsePanel });

package/src/components/base/collapse/style/index.ts

@@ -0,0 +1,14 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useCollapsePanelStyles = createThemedStyles(theme => ({
+  container: {
+    width: '100%',
+    overflow: 'hidden',
+    borderRadius: theme.roundness.xl,
+  },
+  contentContainer: {
+    padding: 16,
+    width: '100%',
+    backgroundColor: theme.palette.blueGray1,
+  },
+}));

package/src/components/base/countdown/countdown.tsx

@@ -0,0 +1,89 @@
+import { useLatest, useMemoizedFn, useUpdate } from 'ahooks';
+import React, { useEffect } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+import { Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import { formatTimeString } from './utils';
+
+const UPDATE_INTERVAL = 1000 / 30;
+
+export interface CountdownProps {
+  /** 倒计时时间(毫秒) */
+  deadline: string | number;
+  /** 文本颜色 */
+  color?: string;
+  /** 倒计时格式化 */
+  format?: string;
+  /** 是否分割文本 */
+  separator?: string;
+  /** 容器样式 */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** 文本样式 */
+  textStyle?: StyleProp<TextStyle>;
+  /** 分割符样式 */
+  separatorStyle?: StyleProp<TextStyle>;
+  /** 倒计时完成回调 */
+  onComplete?: () => void;
+}
+export const Countdown: React.FC<CountdownProps> = ({
+  format = 'HH:mm:ss',
+  ...props
+}) => {
+  const theme = useTheme();
+  const forceUpdate = useUpdate();
+  const onComplete = useLatest(props.onComplete);
+
+  const shouldUpdateTick = useMemoizedFn(() => {
+    const now = Date.now();
+    const timestamp = new Date(props.deadline).getTime();
+    forceUpdate();
+    if (timestamp < now) {
+      onComplete.current?.();
+      return false;
+    }
+    return true;
+  });
+
+  useEffect(() => {
+    const timerId = setInterval(() => {
+      if (!shouldUpdateTick()) {
+        clearInterval(timerId);
+      }
+    }, UPDATE_INTERVAL);
+    return () => {
+      clearInterval(timerId);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.deadline]);
+
+  const textColor = props.color ?? theme.palette.fontGray1;
+  const countdownText = formatTimeString(props.deadline, format);
+
+  if (!props.separator) {
+    return (
+      <Text size={15} style={props.textStyle} color={textColor}>
+        {countdownText}
+      </Text>
+    );
+  }
+  return (
+    <Text>
+      {countdownText.split(props.separator).map((text, index) => {
+        const isSeparatorSymbol = Number.isNaN(Number(text));
+        return (
+          <Text
+            key={index}
+            size={13}
+            color={textColor}
+            style={!isSeparatorSymbol ? props.textStyle : props.separatorStyle}
+          >
+            {!!index && props.separator}
+            {text}
+          </Text>
+        );
+      })}
+    </Text>
+  );
+};

package/src/components/base/countdown/index.ts

@@ -0,0 +1 @@
+export * from './countdown';

package/src/components/base/countdown/utils.ts

@@ -0,0 +1,24 @@
+const TIME_UNITS = [
+  /** 年份 */ ['Y', 1000 * 60 * 60 * 24 * 365],
+  /** 月份 */ ['M', 1000 * 60 * 60 * 24 * 30],
+  /** 天数 */ ['D', 1000 * 60 * 60 * 24],
+  /** 小时 */ ['H', 1000 * 60 * 60],
+  /** 分钟 */ ['m', 1000 * 60],
+  /** 秒数 */ ['s', 1000],
+  /** 毫秒 */ ['S', 1],
+] as const;
+
+export const formatTimeString = (deadline: string | number, format: string) => {
+  let leftDuration = Math.max(new Date(deadline).getTime() - Date.now(), 0);
+
+  return TIME_UNITS.reduce((formatText, [time, unit]) => {
+    if (formatText.includes(time)) {
+      const timeValue = Math.floor(leftDuration / unit);
+      leftDuration -= timeValue * unit;
+      return formatText.replace(new RegExp(`${time}+`), matched => {
+        return timeValue.toString().padStart(matched.length, '0');
+      });
+    }
+    return formatText;
+  }, format);
+};

package/src/components/base/date-picker/date-picker.tsx

@@ -0,0 +1,95 @@
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import dayjs from 'dayjs';
+import React, { useMemo, useState } from 'react';
+
+import {
+  DatePickerView,
+  type DatePickerViewProps,
+  Modal,
+  PickerTrigger,
+  type PickerTriggerControlledProps,
+  Portal,
+} from '#components/base';
+
+export interface DatePickerProps
+  extends PickerTriggerControlledProps<Date>,
+    Omit<DatePickerViewProps, 'onClose' | 'onChange' | 'value'> {
+  /**
+   * 自定义格式化函数。
+   * 配置参考 https://day.js.org/docs/zh-CN/display/format
+   */
+  formatter?: string | ((date: Date) => string);
+}
+
+export const DatePicker: React.FC<DatePickerProps> = ({
+  placeholder = '请选择日期',
+  disabled = false,
+  formatter = 'YYYY/MM/DD',
+  style,
+  children,
+  mode = 'Y-D',
+  title,
+  confirmText,
+  ...restProps
+}) => {
+  const [value, setValue] = useControllableValue<Date | undefined>(restProps, {
+    defaultValue: restProps.defaultValue,
+  });
+
+  const [visible, setVisible] = useState(false);
+
+  /** 格式化显示文案 */
+  const displayText = useMemo(() => {
+    if (!value) return '';
+    if (typeof formatter === 'string') {
+      return dayjs(value).format(formatter);
+    }
+    return formatter(value);
+  }, [value, mode, formatter]);
+
+  const handleOpen = useMemoizedFn(() => {
+    setVisible(true);
+  });
+
+  const handleChange = useMemoizedFn((date: Date) => {
+    setValue(date);
+    setVisible(false);
+  });
+
+  const handleClose = useMemoizedFn(() => {
+    setVisible(false);
+  });
+
+  return (
+    <>
+      <PickerTrigger
+        displayText={displayText}
+        placeholder={placeholder}
+        disabled={disabled}
+        style={style}
+        onPress={handleOpen}
+      >
+        {children}
+      </PickerTrigger>
+
+      <Portal>
+        <Modal
+          visible={visible}
+          position="bottom"
+          safeAreaInsetBottom
+          contentHeight={'50%'}
+        >
+          <DatePickerView
+            {...restProps}
+            mode={mode}
+            title={title}
+            confirmText={confirmText}
+            value={value}
+            onChange={handleChange}
+            onClose={handleClose}
+          />
+        </Modal>
+      </Portal>
+    </>
+  );
+};

package/src/components/base/date-picker/date-range-picker.tsx

@@ -0,0 +1,108 @@
+import { useControllableValue } from 'ahooks';
+import dayjs from 'dayjs';
+import React, { useMemo, useState } from 'react';
+
+import {
+  DateRangePickerView,
+  type DateRangePickerViewProps,
+  Modal,
+  PickerTrigger,
+  type PickerTriggerControlledProps,
+  Portal,
+} from '#components/base';
+
+export interface DateRangePickerProps
+  extends PickerTriggerControlledProps<[Date, Date]>,
+    Omit<DateRangePickerViewProps, 'onClose' | 'onChange' | 'value' | 'formatter'> {
+  /**
+   * 自定义格式化函数。
+   * 配置参考 https://day.js.org/docs/zh-CN/display/format
+   */
+  formatter?: string | ((date: [Date, Date] | Date) => string);
+  /** 范围分隔符 */
+  separator?: string;
+}
+
+export const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  placeholder = '请选择日期范围',
+  disabled = false,
+  formatter = 'YYYY/MM/DD',
+  style,
+  separator = ' ~ ',
+  children,
+  title,
+  confirmText,
+  resetText,
+  startText,
+  endText,
+  ...restProps
+}) => {
+  const [value, setValue] = useControllableValue<[Date, Date] | undefined>(
+    restProps,
+    {
+      defaultValue: restProps.defaultValue,
+    },
+  );
+
+  const [visible, setVisible] = useState(false);
+
+  const openModal = () => {
+    setVisible(true);
+  };
+
+  const closeModal = () => {
+    setVisible(false);
+  };
+
+  /** 格式化显示文案 */
+  const displayText = useMemo(() => {
+    if (!value) return '';
+    if (typeof formatter === 'string') {
+      return (
+        dayjs(value[0]).format(formatter) +
+        separator +
+        dayjs(value[1]).format(formatter)
+      );
+    }
+    return formatter(value);
+  }, [value, formatter, separator]);
+
+  return (
+    <>
+      <PickerTrigger
+        displayText={displayText}
+        placeholder={placeholder}
+        disabled={disabled}
+        style={style}
+        onPress={openModal}
+      >
+        {children}
+      </PickerTrigger>
+
+      <Portal>
+        <Modal
+          visible={visible}
+          position="bottom"
+          safeAreaInsetBottom
+          contentHeight={490}
+        >
+          <DateRangePickerView
+            {...restProps}
+            title={title}
+            confirmText={confirmText}
+            resetText={resetText}
+            startText={startText}
+            endText={endText}
+            value={value}
+            onChange={range => {
+              setValue(range);
+              closeModal();
+            }}
+            onClose={closeModal}
+            formatter={formatter}
+          />
+        </Modal>
+      </Portal>
+    </>
+  );
+};

package/src/components/base/date-picker/index.ts

@@ -0,0 +1,2 @@
+export * from './date-picker';
+export * from './date-range-picker';