@seakoi/native-ui 1.0.0

package/dist/module/components/base/checkbox/checkbox-group.js

@@ -0,0 +1,32 @@
+"use strict";
+
+import { useControllableValue, useLatest } from 'ahooks';
+import React, { useMemo } from 'react';
+import { CheckboxContext } from "./checkbox-context.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CheckboxGroup = ({
+  checkboxIconPlacement,
+  checkboxIconShape = 'circle',
+  ...props
+}) => {
+  const iconRender = useLatest(props.iconRender);
+  const [checkedValues, setCheckedValues] = useControllableValue(props, {
+    defaultValue: [],
+    valuePropName: 'value',
+    trigger: 'onChange',
+    defaultValuePropName: 'defaultValue'
+  });
+  const contextValue = useMemo(() => ({
+    checkboxIconShape,
+    checkedValues,
+    checkboxIconPlacement,
+    disabled: props.disabled,
+    block: props.block,
+    iconRender: iconRender.current,
+    onCheckedChange: setCheckedValues
+  }), [checkboxIconShape, checkedValues, checkboxIconPlacement, props.disabled, props.block, iconRender, setCheckedValues]);
+  return /*#__PURE__*/_jsx(CheckboxContext.Provider, {
+    value: contextValue,
+    children: props.children
+  });
+};

package/dist/module/components/base/checkbox/checkbox.js

@@ -0,0 +1,122 @@
+"use strict";
+
+import { CheckCircleFilled, CheckSquareFilled, CircleMinusFilled, CircleOutlined, SquareMinusFilled, SquareOutlined } from '@seakoi/svg-icons';
+import { useControllableValue, useLatest, useMemoizedFn } from 'ahooks';
+import React, { useContext, useEffect, useMemo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { Flex, Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { CheckboxContext } from "./checkbox-context.js";
+import { useCheckboxStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Checkbox = ({
+  align = 'center',
+  titleNumberOfLines = 2,
+  descriptionNumberOfLines = 2,
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useCheckboxStyles();
+  const context = useContext(CheckboxContext);
+  const onCheckboxIconStateChange = useLatest(props.onCheckboxIconStateChange);
+  const [innerChecked, setInnerChecked] = useControllableValue(props, {
+    trigger: 'onChecked',
+    valuePropName: 'checked',
+    defaultValuePropName: 'defaultChecked'
+  });
+  const isBlock = props.block ?? context.block;
+  const isDisabled = props.disabled ?? context.disabled;
+  const iconShape = props.checkboxIconShape ?? context.checkboxIconShape;
+  const iconPlacement = props.checkboxIconPlacement ?? context.checkboxIconPlacement;
+  const isConfigureValue = props.value || typeof props.value === 'number';
+  const isChecked = useMemo(() => {
+    if (props.checked !== undefined) return props.checked;
+    if (context.checkedValues && isConfigureValue) {
+      /** 使用 Checkbox.Group 包裹，且存在 value 值 */
+      return context.checkedValues.includes(props.value);
+    }
+    return innerChecked;
+  }, [props.value, props.checked, innerChecked, isConfigureValue, context.checkedValues]);
+  const getCheckboxSvgIcon = useMemoizedFn((checked, indeterminate) => {
+    const isSquareIcon = iconShape === 'square';
+    if (indeterminate && !checked) {
+      return isSquareIcon ? SquareMinusFilled : CircleMinusFilled;
+    }
+    if (isSquareIcon) {
+      return !checked ? SquareOutlined : CheckSquareFilled;
+    }
+    return !checked ? CircleOutlined : CheckCircleFilled;
+  });
+  const iconRender = useMemoizedFn(iconState => {
+    if (props.iconRender) return props.iconRender(iconState);
+    if (context.iconRender) return context.iconRender(iconState);
+    const isActiveState = iconState.checked || iconState.indeterminate;
+    const CheckboxSvgIcon = getCheckboxSvgIcon(!!iconState.checked, !!iconState.indeterminate);
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.icon,
+      children: [/*#__PURE__*/_jsx(CheckboxSvgIcon, {
+        size: 24,
+        color: !isActiveState ? theme.palette.gray4 : iconState.disabled ? theme.palette.brand4 : theme.palette.brand7
+      }), !!iconState.disabled && !isActiveState && /*#__PURE__*/_jsx(View, {
+        style: [styles.disabledIconBackground, iconShape !== 'square' && {
+          borderRadius: theme.roundness.full
+        }]
+      })]
+    });
+  });
+  useEffect(() => {
+    onCheckboxIconStateChange.current?.({
+      checked: isChecked,
+      disabled: isDisabled,
+      indeterminate: props.indeterminate
+    });
+  }, [isChecked, isDisabled, props.indeterminate, onCheckboxIconStateChange]);
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    ref: props.ref,
+    activeOpacity: 0.8,
+    disabled: isDisabled,
+    hitSlop: props.hitSlop,
+    onLayout: props.onLayout,
+    onLongPress: props.onLongPress,
+    onPress: event => {
+      props.onPress?.(event);
+      setInnerChecked(prevState => !prevState);
+      if (isConfigureValue && context.onCheckedChange) {
+        context.onCheckedChange(prevState => {
+          return !prevState.includes(props.value) ? prevState.concat(props.value) : prevState.filter(currentValue => currentValue !== props.value);
+        });
+      }
+    },
+    style: [styles.container, {
+      alignItems: align
+    }, isBlock && styles.fullContainer, iconPlacement === 'right' && styles.reverseContainerDirection, props.style],
+    children: [iconRender({
+      checked: isChecked,
+      disabled: isDisabled,
+      indeterminate: props.indeterminate
+    }), /*#__PURE__*/_jsx(Flex, {
+      align: "center",
+      style: [styles.wrapper, props.contentContainerStyle],
+      children: /*#__PURE__*/_jsxs(Flex, {
+        vertical: true,
+        align: "flex-start",
+        justify: "flex-start",
+        gap: theme.spacing.xxs,
+        style: [styles.wrapper, props.contentContainerStyle],
+        children: [/*#__PURE__*/_jsx(Text, {
+          size: 16,
+          style: props.titleStyle,
+          color: theme.palette.fontGray1,
+          numberOfLines: titleNumberOfLines,
+          children: props.title
+        }), !!props.description && /*#__PURE__*/_jsx(Text, {
+          size: 14,
+          style: props.descriptionStyle,
+          color: theme.palette.fontGray2,
+          numberOfLines: descriptionNumberOfLines,
+          children: props.description
+        })]
+      })
+    })]
+  });
+};

package/dist/module/components/base/checkbox/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+import { Checkbox as _Checkbox } from "./checkbox.js";
+import { CheckboxCard } from "./checkbox-card.js";
+import { CheckboxGroup } from "./checkbox-group.js";
+export * from "./checkbox.js";
+export * from "./checkbox-card.js";
+export * from "./checkbox-group.js";
+export const Checkbox = Object.assign(_Checkbox, {
+  Card: CheckboxCard,
+  Group: CheckboxGroup
+});

package/dist/module/components/base/checkbox/style/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+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/dist/module/components/base/collapse/collapse-context.js

@@ -0,0 +1,4 @@
+"use strict";
+
+import React from 'react';
+export const CollapseContext = /*#__PURE__*/React.createContext(null);

package/dist/module/components/base/collapse/collapse-panel.js

@@ -0,0 +1,121 @@
+"use strict";
+
+import { RightOutlined } from '@seakoi/svg-icons';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { Animated, LayoutAnimation, View } from 'react-native';
+import { Cell, Surface } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { CollapseContext } from "./collapse-context.js";
+import { useCollapsePanelStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CollapsePanel = ({
+  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 /*#__PURE__*/_jsx(Animated.View, {
+      style: {
+        transform: [{
+          rotate: rotateAnimation
+        }]
+      },
+      children: /*#__PURE__*/_jsx(RightOutlined, {
+        size: 16,
+        color: theme.palette.fontGray4
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(Surface, {
+    elevation: elevation,
+    style: [styles.container, containerStyle],
+    children: [/*#__PURE__*/_jsx(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()
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [contentHeight.measured && {
+        height: heightAnimation
+      }],
+      children: !!shouldRender && /*#__PURE__*/_jsx(View, {
+        style: [styles.contentContainer, contentContainerStyle],
+        onLayout: ({
+          nativeEvent
+        }) => {
+          if (!contentHeight.measured) {
+            setContentHeight({
+              measured: true,
+              value: nativeEvent.layout.height
+            });
+          }
+        },
+        children: props.children
+      })
+    })]
+  });
+};

package/dist/module/components/base/collapse/collapse.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { useControllableValue, useLatest } from 'ahooks';
+import React, { useCallback, useMemo } from 'react';
+import { CollapseContext } from "./collapse-context.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Collapse = props => {
+  const renderArrowIcon = useLatest(props.renderArrowIcon);
+  const [activeKey, setActiveKey] = useControllableValue(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;
+  }, [activeKey]);
+  const latestActiveKeys = useLatest(activeKeys);
+  const setActiveKeys = useCallback(stateOrSetState => {
+    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 /*#__PURE__*/_jsx(CollapseContext.Provider, {
+    value: contextValue,
+    children: props.children
+  });
+};

package/dist/module/components/base/collapse/index.js

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

package/dist/module/components/base/collapse/style/index.js

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

package/dist/module/components/base/countdown/countdown.js

@@ -0,0 +1,59 @@
+"use strict";
+
+import { useLatest, useMemoizedFn, useUpdate } from 'ahooks';
+import React, { useEffect } from 'react';
+import { Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { formatTimeString } from "./utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const UPDATE_INTERVAL = 1000 / 30;
+export const Countdown = ({
+  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 /*#__PURE__*/_jsx(Text, {
+      size: 15,
+      style: props.textStyle,
+      color: textColor,
+      children: countdownText
+    });
+  }
+  return /*#__PURE__*/_jsx(Text, {
+    children: countdownText.split(props.separator).map((text, index) => {
+      const isSeparatorSymbol = Number.isNaN(Number(text));
+      return /*#__PURE__*/_jsxs(Text, {
+        size: 13,
+        color: textColor,
+        style: !isSeparatorSymbol ? props.textStyle : props.separatorStyle,
+        children: [!!index && props.separator, text]
+      }, index);
+    })
+  });
+};

package/dist/module/components/base/countdown/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export * from "./countdown.js";

package/dist/module/components/base/countdown/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+
+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]];
+export const formatTimeString = (deadline, format) => {
+  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/dist/module/components/base/date-picker/date-picker.js

@@ -0,0 +1,68 @@
+"use strict";
+
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import dayjs from 'dayjs';
+import React, { useMemo, useState } from 'react';
+import { DatePickerView, Modal, PickerTrigger, Portal } from "./../index.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const DatePicker = ({
+  placeholder = '请选择日期',
+  disabled = false,
+  formatter = 'YYYY/MM/DD',
+  style,
+  children,
+  mode = 'Y-D',
+  title,
+  confirmText,
+  ...restProps
+}) => {
+  const [value, setValue] = useControllableValue(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 => {
+    setValue(date);
+    setVisible(false);
+  });
+  const handleClose = useMemoizedFn(() => {
+    setVisible(false);
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(PickerTrigger, {
+      displayText: displayText,
+      placeholder: placeholder,
+      disabled: disabled,
+      style: style,
+      onPress: handleOpen,
+      children: children
+    }), /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(Modal, {
+        visible: visible,
+        position: "bottom",
+        safeAreaInsetBottom: true,
+        contentHeight: '50%',
+        children: /*#__PURE__*/_jsx(DatePickerView, {
+          ...restProps,
+          mode: mode,
+          title: title,
+          confirmText: confirmText,
+          value: value,
+          onChange: handleChange,
+          onClose: handleClose
+        })
+      })
+    })]
+  });
+};

package/dist/module/components/base/date-picker/date-range-picker.js

@@ -0,0 +1,73 @@
+"use strict";
+
+import { useControllableValue } from 'ahooks';
+import dayjs from 'dayjs';
+import React, { useMemo, useState } from 'react';
+import { DateRangePickerView, Modal, PickerTrigger, Portal } from "./../index.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const DateRangePicker = ({
+  placeholder = '请选择日期范围',
+  disabled = false,
+  formatter = 'YYYY/MM/DD',
+  style,
+  separator = ' ~ ',
+  children,
+  title,
+  confirmText,
+  resetText,
+  startText,
+  endText,
+  ...restProps
+}) => {
+  const [value, setValue] = useControllableValue(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 /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(PickerTrigger, {
+      displayText: displayText,
+      placeholder: placeholder,
+      disabled: disabled,
+      style: style,
+      onPress: openModal,
+      children: children
+    }), /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(Modal, {
+        visible: visible,
+        position: "bottom",
+        safeAreaInsetBottom: true,
+        contentHeight: 490,
+        children: /*#__PURE__*/_jsx(DateRangePickerView, {
+          ...restProps,
+          title: title,
+          confirmText: confirmText,
+          resetText: resetText,
+          startText: startText,
+          endText: endText,
+          value: value,
+          onChange: range => {
+            setValue(range);
+            closeModal();
+          },
+          onClose: closeModal,
+          formatter: formatter
+        })
+      })
+    })]
+  });
+};

package/dist/module/components/base/date-picker/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./date-picker.js";
+export * from "./date-range-picker.js";