@seakoi/native-ui 1.0.0

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

@@ -0,0 +1,68 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+import { useMemo, useRef, useState } from 'react';
+import { Button, DateTimePicker, Flex, ModalHeader } from "./../index.js";
+import { useDatePickerStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DatePickerView = ({
+  mode = 'Y-D',
+  onChange,
+  onClose,
+  title,
+  confirmText = '确定',
+  ...restProps
+}) => {
+  const styles = useDatePickerStyles();
+
+  // 内部状态用于管理滚动时的临时值
+  const [localValue, setLocalValue] = useState(restProps.value ?? restProps.defaultValue ?? new Date());
+  const lastValueRef = useRef(restProps.value);
+  if (restProps.value !== undefined && restProps.value !== lastValueRef.current) {
+    lastValueRef.current = restProps.value;
+    setLocalValue(restProps.value);
+  }
+  const _title = useMemo(() => {
+    if (title) {
+      return title;
+    }
+    switch (mode) {
+      case 'Y':
+        return '请选择年';
+      case 'Y-M':
+        return '请选择年月';
+      case 'Y-D':
+        return '请选择年月日';
+      default:
+        return '请选择日期';
+    }
+  }, [mode, title]);
+
+  // 滚动时只更新内部状态，不触发外部 onChange
+  const onChangePicker = useMemoizedFn(value => {
+    setLocalValue(value);
+  });
+
+  // 只在点击确定按钮时才调用外部 onChange
+  const onConfirm = useMemoizedFn(() => {
+    onChange?.(localValue);
+  });
+  return /*#__PURE__*/_jsxs(Flex, {
+    vertical: true,
+    align: "stretch",
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(ModalHeader, {
+      title: _title,
+      onClose: onClose
+    }), /*#__PURE__*/_jsx(DateTimePicker, {
+      ...restProps,
+      mode: mode,
+      value: localValue,
+      onChange: onChangePicker
+    }), /*#__PURE__*/_jsx(Button, {
+      text: confirmText,
+      size: "large",
+      onPress: onConfirm
+    })]
+  });
+};

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

@@ -0,0 +1,138 @@
+"use strict";
+
+import dayjs from 'dayjs';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button, DateTimePicker, Flex, ModalHeader, Text } from "./../index.js";
+import { useDateRangePickerStyles } from "./style/index.js";
+import { sortRange } from "./utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DateRangePickerView = ({
+  onClose,
+  min,
+  max,
+  value,
+  defaultValue,
+  onChange,
+  title = '自定义日期',
+  startText = '请选择开始时间',
+  endText = '请选择结束时间',
+  confirmText = '确定',
+  resetText = '重置',
+  formatter
+}) => {
+  const styles = useDateRangePickerStyles();
+
+  /** 当前编辑的是 start 还是 end */
+  const [selected, setSelected] = useState('start');
+
+  /** 初始化 draft */
+  const [draft, setDraft] = useState(() => {
+    if (value) return sortRange(value);
+    if (defaultValue) return sortRange(defaultValue);
+    return [new Date(), undefined];
+  });
+  const _startText = draft[0] && (typeof formatter === 'string' ? dayjs(draft[0]).format(formatter) : formatter(draft[0])) || startText;
+  const _endText = draft[1] && (typeof formatter === 'string' ? dayjs(draft[1]).format(formatter) : formatter(draft[1])) || endText;
+
+  /** Picker 当前值 */
+  const pickerValue = (selected === 'start' ? draft[0] : draft[1]) ?? new Date();
+
+  /** Picker 可选范围 - 优化依赖 */
+  const minDate = useMemo(() => {
+    return selected === 'end' ? draft[0] ?? min : min;
+  }, [selected, draft, min]);
+  const maxDate = useMemo(() => {
+    return selected === 'start' ? draft[1] ?? max : max;
+  }, [selected, draft, max]);
+
+  /** Picker 改 draft */
+  const onChangePicker = useCallback(date => {
+    setDraft(prev => {
+      const index = selected === 'start' ? 0 : 1;
+      // 如果日期相同，不更新
+      if (prev[index]?.getTime() === date.getTime()) {
+        return prev;
+      }
+      const next = [prev[0], prev[1]];
+      next[index] = date;
+      return next;
+    });
+  }, [selected]);
+  const changeSelected = useCallback(nextSelected => {
+    setSelected(nextSelected);
+    setDraft(prev => {
+      const next = [prev[0], prev[1]];
+      const index = nextSelected === 'start' ? 0 : 1;
+      next[index] ??= new Date();
+      return next;
+    });
+  }, []);
+
+  /** 重置 */
+  const onReset = useCallback(() => {
+    setDraft([new Date(), undefined]);
+    setSelected('start');
+  }, []);
+
+  /** 是否可以确定 */
+  const canConfirm = Boolean(draft[0] && draft[1]);
+
+  /** 确定：唯一对外出口 */
+  const onConfirm = useCallback(() => {
+    if (!draft[0] || !draft[1]) return;
+
+    // start > end 自动修正
+    onChange?.(sortRange([draft[0], draft[1]]));
+  }, [draft, onChange]);
+
+  // 受控模式：检测外部 value 变化
+  useEffect(() => {
+    if (value) {
+      const sorted = sortRange(value);
+      setDraft(sorted);
+    }
+  }, [value]);
+  return /*#__PURE__*/_jsxs(Flex, {
+    vertical: true,
+    align: "stretch",
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(ModalHeader, {
+      title: title,
+      onClose: onClose
+    }), /*#__PURE__*/_jsxs(Flex, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "outline",
+        theme: selected === 'start' ? 'primary' : 'default',
+        block: true,
+        text: _startText,
+        onPress: () => changeSelected('start')
+      }), /*#__PURE__*/_jsx(Text, {
+        children: "\u2014"
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "outline",
+        theme: selected === 'end' ? 'primary' : 'default',
+        block: true,
+        text: _endText,
+        onPress: () => changeSelected('end')
+      })]
+    }), /*#__PURE__*/_jsx(DateTimePicker, {
+      value: pickerValue,
+      min: minDate,
+      max: maxDate,
+      onChange: onChangePicker
+    }), /*#__PURE__*/_jsxs(Button.Group, {
+      block: true,
+      children: [/*#__PURE__*/_jsx(Button, {
+        size: "large",
+        text: resetText,
+        theme: "secondary",
+        onPress: onReset
+      }), /*#__PURE__*/_jsx(Button, {
+        size: "large",
+        text: confirmText,
+        onPress: onConfirm,
+        disabled: !canConfirm
+      })]
+    })]
+  });
+};

package/dist/module/components/base/date-picker-view/date-time-picker.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { useControllableValue } from 'ahooks';
+import { useMemo } from 'react';
+import { PickerView } from "./../index.js";
+import { useDateTimePicker } from "./hooks/use-date-time-picker.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DateTimePicker = ({
+  mode = 'Y-D',
+  min,
+  max,
+  ...restProps
+}) => {
+  // 确保有一个稳定的默认日期值
+  const defaultDate = useMemo(() => new Date(), []);
+  const [value, onChange] = useControllableValue(restProps, {
+    defaultValue: defaultDate
+  });
+
+  // 确保 value 始终有值，避免 undefined 传递给 hook
+  const safeValue = value ?? defaultDate;
+  const [values, columns, onChangePicker] = useDateTimePicker({
+    mode,
+    value: safeValue,
+    onChange,
+    min,
+    max
+  });
+  return /*#__PURE__*/_jsx(PickerView, {
+    columns: columns,
+    value: values,
+    onChange: onChangePicker
+  });
+};

package/dist/module/components/base/date-picker-view/hooks/use-date-min-max.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import { isDate } from 'lodash-es';
+import { useMemo } from 'react';
+import { getMonthDays, serializeMode } from "../utils.js";
+export const useDateMinMax = (mode, min, max) => {
+  const modes = useMemo(() => serializeMode(mode.split('-')), [mode]);
+  const [defaultMinDate, defaultMaxDate] = useMemo(() => {
+    const day = new Date();
+    const currentYear = day.getFullYear();
+    const _defaultMinDate = new Date(day.setFullYear(currentYear - 10));
+    const _defaultMaxDate = new Date(day.setFullYear(currentYear + 10));
+    if (!modes.includes('D')) {
+      _defaultMinDate.setDate(1);
+      _defaultMaxDate.setDate(getMonthDays(_defaultMaxDate.getFullYear(), _defaultMaxDate.getMonth() + 1));
+    }
+    if (!modes.includes('M')) {
+      _defaultMinDate.setMonth(0);
+      _defaultMaxDate.setMonth(11);
+    }
+    return [_defaultMinDate, _defaultMaxDate];
+  }, [modes]);
+  return [isDate(min) ? min : defaultMinDate, isDate(max) ? max : defaultMaxDate];
+};

package/dist/module/components/base/date-picker-view/hooks/use-date-time-picker.js

@@ -0,0 +1,94 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+import { useMemo } from 'react';
+import { COLUMN_SERIALIZE_TYPES, getDateBoundary, getMonthDays, serializeMode, toDateObject } from "../utils.js";
+import { useDateMinMax } from "./use-date-min-max.js";
+const buildColumnData = (mode, start, end, renderLabel) => {
+  const items = [];
+  for (let index = start; index <= end; index++) {
+    items.push({
+      value: index,
+      label: renderLabel(mode, index)
+    });
+  }
+  return items;
+};
+export const useDateTimePicker = ({
+  mode,
+  value,
+  onChange,
+  min,
+  max
+}) => {
+  const modes = useMemo(() => serializeMode(mode.split('-')), [mode]);
+  const [minDate, maxDate] = useDateMinMax(mode, min, max);
+  const renderLabelPersistFn = useMemoizedFn((t, n) => {
+    switch (t) {
+      case 'Y':
+        return `${n}年`;
+      case 'M':
+        return `${n}月`;
+      case 'D':
+        return `${n}日`;
+      default:
+        return `${n}`;
+    }
+  });
+  const boundary = useMemo(() => getDateBoundary(value, modes, {
+    defaultMin: minDate,
+    defaultMax: maxDate,
+    min,
+    max
+  }), [value, modes, minDate, maxDate, min, max]);
+
+  // 仅当日期边界实际发生变化时（例如从 1月 滑动到 2月，天数从 31 变 28），才会重新计算 Day 列的数据。在同月内滑动日期，**不会** 触发任何列数据的重算。
+  const boundaryKey = JSON.stringify(boundary);
+  const pickerColumns = useMemo(() => {
+    const _columnsMap = {};
+    COLUMN_SERIALIZE_TYPES.forEach(key => {
+      const ab = boundary[key];
+      if (!ab) return;
+      const a = key === 'M' ? ab[0] + 1 : ab[0];
+      const b = key === 'M' ? ab[1] + 1 : ab[1];
+      _columnsMap[key] = buildColumnData(key, a, b, renderLabelPersistFn);
+    });
+    return modes.map(key => _columnsMap[key]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [boundaryKey, modes, renderLabelPersistFn]);
+  const pickerValues = useMemo(() => {
+    const valueDateObject = toDateObject(value);
+    return modes.map(key => key === 'M' ? valueDateObject[key] + 1 : valueDateObject[key]);
+  }, [value, modes]);
+  const onChangePicker = useMemoizedFn(v => {
+    const newValue = new Date(value);
+    modes.forEach((key, index) => {
+      const num = v[index];
+      switch (key) {
+        case 'Y':
+          newValue.setFullYear(num);
+          break;
+        case 'M':
+          {
+            // 对 D 进行修正
+            const days = getMonthDays(newValue.getFullYear(), num);
+            const valueDays = newValue.getDate();
+            newValue.setMonth(num - 1, valueDays > days ? days : valueDays);
+            break;
+          }
+        case 'D':
+          {
+            // 对 D 进行修正
+            const days = getMonthDays(newValue.getFullYear(), newValue.getMonth() + 1);
+            newValue.setDate(num > days ? days : num);
+            break;
+          }
+        default:
+          break;
+      }
+    });
+    const finallyValue = newValue.getTime() >= minDate.getTime() && newValue.getTime() <= maxDate.getTime() ? newValue : newValue.getTime() < minDate.getTime() ? minDate : maxDate;
+    onChange(finallyValue);
+  });
+  return [pickerValues, pickerColumns, onChangePicker, minDate, maxDate];
+};

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

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

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

@@ -0,0 +1,27 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useDatePickerStyles = createThemedStyles(theme => ({
+  container: {
+    backgroundColor: theme.palette.white,
+    padding: 16,
+    rowGap: 16,
+    flex: 1
+  }
+}));
+export const useDateRangePickerStyles = createThemedStyles(theme => ({
+  container: {
+    backgroundColor: theme.palette.white,
+    padding: 16,
+    rowGap: 16,
+    flex: 1
+  },
+  dateValue: {
+    flex: 1,
+    justifyContent: 'center',
+    borderWidth: 1,
+    paddingVertical: 6,
+    borderRadius: 4,
+    borderColor: theme.palette.fontGray5
+  }
+}));

package/dist/module/components/base/date-picker-view/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};

package/dist/module/components/base/date-picker-view/utils.js

@@ -0,0 +1,99 @@
+"use strict";
+
+import { isDate } from 'lodash-es';
+/**
+ * 可选项序列数组
+ */
+export const COLUMN_SERIALIZE_TYPES = ['Y', 'M', 'D'];
+export const serializeMode = modes => {
+  if (modes.length === 1) {
+    return modes;
+  }
+
+  // 起点终点
+  const startIndex = COLUMN_SERIALIZE_TYPES.findIndex(k => k === modes[0]);
+  const endIndex = COLUMN_SERIALIZE_TYPES.findIndex(k => k === modes[1]);
+  const serializeModes = [];
+  for (let index = startIndex; index <= endIndex; index++) {
+    serializeModes.push(COLUMN_SERIALIZE_TYPES[index]);
+  }
+  return serializeModes;
+};
+
+/**
+ * 获取某年的某个月有多少天
+ * @param year 年
+ * @param month 月 1~12
+ * @returns 天数
+ */
+export const getMonthDays = (year, month) => {
+  const day = new Date();
+  day.setFullYear(year);
+  day.setDate(1);
+  day.setMonth(month, 0);
+  return day.getDate();
+};
+export const toDateObject = d => ({
+  Y: d.getFullYear(),
+  M: d.getMonth(),
+  D: d.getDate()
+});
+export const getDateBoundary = (value, modes, {
+  defaultMin,
+  defaultMax,
+  min,
+  max
+}) => {
+  const minDefined = isDate(min);
+  const maxDefined = isDate(max);
+  const minDateObject = toDateObject(minDefined ? min : defaultMin);
+  const maxDateObject = toDateObject(maxDefined ? max : defaultMax);
+  const valueDateObject = toDateObject(value);
+
+  // 边界值
+  const isInMinYear = valueDateObject.Y === minDateObject.Y;
+  const isInMaxYear = valueDateObject.Y === maxDateObject.Y;
+  const isInMinMonth = isInMinYear && valueDateObject.M <= minDateObject.M;
+  const isInMaxMonth = isInMaxYear && valueDateObject.M >= maxDateObject.M;
+  const boundary = {
+    Y: [minDateObject.Y, maxDateObject.Y],
+    M: (() => {
+      if (modes[0] === 'M') {
+        // 从月开始选
+        // 有限制时间根据限制时间选择，没有默认所有月份都可以
+        const a = minDefined ? minDateObject.M : 0;
+        const b = maxDefined ? maxDateObject.M : 11;
+
+        // a < b
+        if (a >= b) {
+          return [0, 11];
+        }
+        return [a, b];
+      }
+      const a = isInMinYear ? minDateObject.M : 0;
+      const b = isInMaxYear ? maxDateObject.M : 11;
+      return [a, b];
+    })(),
+    D: (() => {
+      if (modes[0] === 'D') {
+        const a = minDefined ? minDateObject.D : 1;
+        const b = maxDefined ? maxDateObject.D : getMonthDays(valueDateObject.Y, valueDateObject.M + 1);
+
+        // a < b
+        if (a >= b) {
+          return [1, getMonthDays(valueDateObject.Y, valueDateObject.M + 1)];
+        }
+        return [a, b];
+      }
+      const a = isInMinMonth ? minDateObject.D : 1;
+      const b = isInMaxMonth ? maxDateObject.D : getMonthDays(valueDateObject.Y, valueDateObject.M + 1);
+      return [a, b];
+    })()
+  };
+  return boundary;
+};
+
+/** 排序日期范围，确保 start <= end */
+export const sortRange = range => {
+  return range[0] > range[1] ? [range[1], range[0]] : range;
+};

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

@@ -0,0 +1,78 @@
+"use strict";
+
+import { isValidElement, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { useDividerStyles } from "./style/index.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Divider 分割线 */
+export const Divider = ({
+  children,
+  style,
+  direction = 'horizontal',
+  variant = 'solid',
+  color,
+  thickness = 1,
+  contentPosition = 'center',
+  contentGap = 8,
+  margin,
+  textStyle,
+  ...restProps
+}) => {
+  const theme = useTheme();
+  const styles = useDividerStyles({
+    margin
+  });
+  const isVertical = direction === 'vertical';
+  const hasContent = Boolean(children) && !isVertical;
+  const lineColor = color ?? theme.palette.blueGray3;
+
+  /** 生成线条样式 */
+  const getLineStyle = useMemo(() => {
+    return (position, adaptive) => {
+      const base = {
+        flex: 1,
+        borderStyle: variant,
+        borderColor: lineColor
+      };
+
+      // 垂直线条
+      if (isVertical) {
+        base.borderLeftWidth = thickness;
+        return base;
+      }
+
+      // 水平线条
+      base.borderTopWidth = thickness;
+      if (position === 'left') base.marginRight = contentGap;
+      if (position === 'right') base.marginLeft = contentGap;
+      if (!adaptive) {
+        base.flex = undefined;
+        base.width = 40;
+      }
+      return base;
+    };
+  }, [isVertical, thickness, lineColor, variant, contentGap]);
+  return /*#__PURE__*/_jsx(View, {
+    ...restProps,
+    style: StyleSheet.flatten([styles.container, isVertical ? styles.vertical : styles.horizontal, style]),
+    children: isVertical ? /*#__PURE__*/_jsx(View, {
+      style: getLineStyle('center', true)
+    }) : hasContent ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: getLineStyle('left', contentPosition !== 'left')
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.content,
+        children: /*#__PURE__*/isValidElement(children) ? children : /*#__PURE__*/_jsx(Text, {
+          style: StyleSheet.flatten([styles.contentText, textStyle]),
+          children: children
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: getLineStyle('right', contentPosition !== 'right')
+      })]
+    }) : /*#__PURE__*/_jsx(View, {
+      style: getLineStyle('center', true)
+    })
+  });
+};

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

@@ -0,0 +1,3 @@
+"use strict";
+
+export { Divider } from "./divider.js";

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

@@ -0,0 +1,31 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useDividerStyles = createThemedStyles((theme, {
+  margin
+} = {}) => {
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    horizontal: {
+      flexDirection: 'row',
+      width: '100%',
+      marginVertical: margin
+    },
+    vertical: {
+      flexDirection: 'column',
+      alignSelf: 'stretch',
+      marginHorizontal: margin
+    },
+    content: {
+      flexShrink: 0
+    },
+    contentText: {
+      color: theme.palette.fontGray3,
+      fontSize: 14
+    }
+  });
+});

package/dist/module/components/base/divider/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};

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

@@ -0,0 +1,22 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { useFlexStyles } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Flex = props => {
+  const styles = useFlexStyles(props);
+  return /*#__PURE__*/_jsx(View, {
+    ref: props.ref,
+    onLayout: props.onLayout,
+    onPointerDown: props.onPointerDown,
+    style: [styles.container, props.wrap && styles.contentWrap, props.vertical && styles.verticalContainer, props.align && {
+      alignItems: props.align
+    }, props.justify && {
+      justifyContent: props.justify
+    }, typeof props.gap === 'number' && {
+      gap: props.gap
+    }, props.style],
+    children: props.children
+  });
+};

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

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

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

@@ -0,0 +1,21 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useFlexStyles = createThemedStyles((theme, props) => ({
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: theme.spacing.sm,
+    flexDirection: !props.reverse ? 'row' : 'row-reverse'
+  },
+  contentWrap: {
+    flexWrap: 'wrap'
+  },
+  reverseContainer: {
+    flexDirection: 'row-reverse'
+  },
+  verticalContainer: {
+    flexDirection: !props.reverse ? 'column' : 'column-reverse'
+  }
+}));