react-native-system-ui 0.0.7 → 1.0.1

package/dist/cjs/components/config-provider/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "enUS", {
     return _enUS.enUS;
   }
 });
+Object.defineProperty(exports, "useDirection", {
+  enumerable: true,
+  get: function () {
+    return _useDirection.useDirection;
+  }
+});
 Object.defineProperty(exports, "useLocale", {
   enumerable: true,
   get: function () {
@@ -29,5 +35,6 @@ Object.defineProperty(exports, "zhCN", {
 });
 var _ConfigProvider = require("./ConfigProvider");
 var _useLocale = require("./useLocale");
+var _useDirection = require("./useDirection");
 var _zhCN = require("./locale/zh-CN");
 var _enUS = require("./locale/en-US");

package/dist/cjs/components/config-provider/locale/en-US.js

@@ -76,5 +76,37 @@ const enUS = exports.enUS = {
   },
   vanAddressList: {
     add: 'Add address'
+  },
+  vanForm: {
+    validationFailed: 'Validation failed'
+  },
+  vanPopup: {
+    closeOverlay: 'Close overlay',
+    closeHint: 'Double-tap to close'
+  },
+  vanToast: {
+    closeHint: 'Double-tap to dismiss'
+  },
+  vanShareSheet: {
+    cancel: 'Cancel'
+  },
+  vanNumberKeyboard: {
+    close: 'Done'
+  },
+  vanNoticeBar: {
+    close: 'Close'
+  },
+  vanNavBar: {
+    back: 'Back',
+    action: 'Actions'
+  },
+  vanImage: {
+    loading: 'Loading...',
+    error: 'Failed to load'
+  },
+  vanCascader: {
+    placeholder: 'Select',
+    loading: 'Loading...',
+    close: 'Close'
   }
 };

package/dist/cjs/components/config-provider/locale/zh-CN.js

@@ -76,5 +76,37 @@ const zhCN = exports.zhCN = {
   },
   vanAddressList: {
     add: '新增地址'
+  },
+  vanForm: {
+    validationFailed: '表单验证未通过'
+  },
+  vanPopup: {
+    closeOverlay: '关闭弹层',
+    closeHint: '双击即可关闭弹层'
+  },
+  vanToast: {
+    closeHint: '双击关闭提示'
+  },
+  vanShareSheet: {
+    cancel: '取消'
+  },
+  vanNumberKeyboard: {
+    close: '完成'
+  },
+  vanNoticeBar: {
+    close: '关闭'
+  },
+  vanNavBar: {
+    back: '返回',
+    action: '操作'
+  },
+  vanImage: {
+    loading: '加载中…',
+    error: '加载失败'
+  },
+  vanCascader: {
+    placeholder: '请选择',
+    loading: '加载中...',
+    close: '关闭'
   }
 };

package/dist/cjs/components/config-provider/useDirection.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDirection = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _DirectionContext = require("./DirectionContext");
+const useDirection = () => (0, _react().useContext)(_DirectionContext.DirectionContext);
+exports.useDirection = useDirection;

package/dist/cjs/components/count-down/CountDown.js

@@ -20,16 +20,17 @@ function _reactNative() {
 }
 var _hooks = require("../../hooks");
 var _utils = require("../../utils");
+var _validate = require("../../utils/validate");
 var _tokens = require("./tokens");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const CountDown = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+const CountDownImpl = (props, ref) => {
   const {
     tokensOverride,
-    autoStart: autoStartProp,
-    millisecond: millisecondProp,
-    time: timeProp,
-    format: formatProp,
+    autoStart: autoStartP,
+    millisecond: msP,
+    time: timeP,
+    format: fmtP,
     children,
     onChange,
     onFinish,
@@ -37,47 +38,51 @@ const CountDown = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     ...rest
   } = props;
   const tokens = (0, _tokens.useCountDownTokens)(tokensOverride);
-  const autoStart = autoStartProp ?? tokens.defaults.autoStart;
-  const millisecond = millisecondProp ?? tokens.defaults.millisecond;
-  const time = timeProp ?? tokens.defaults.time;
-  const format = formatProp ?? tokens.defaults.format;
-  const normalizedTime = (0, _react().useMemo)(() => Math.max(0, Number(time) || 0), [time]);
+  const autoStart = autoStartP ?? tokens.defaults.autoStart;
+  const millisecond = msP ?? tokens.defaults.millisecond;
+  const time = timeP ?? tokens.defaults.time;
+  const format = fmtP ?? tokens.defaults.format;
+  const normTime = Math.max(0, Number(time) || 0);
   const {
     start,
     pause,
     reset,
     current
   } = (0, _hooks.useCountDown)({
-    time: normalizedTime,
+    time: normTime,
     millisecond,
     onChange,
     onFinish
   });
-  const resetTime = (0, _react().useCallback)(() => {
-    reset(normalizedTime);
-    if (autoStart && normalizedTime > 0) {
-      start();
-    }
-  }, [autoStart, normalizedTime, reset, start]);
+  const resetTimer = (0, _react().useCallback)(() => {
+    reset(normTime);
+    if (autoStart && normTime > 0) start();
+  }, [autoStart, normTime, reset, start]);
   (0, _react().useEffect)(() => {
-    resetTime();
+    resetTimer();
     return () => {
       pause();
     };
-  }, [autoStart, normalizedTime, pause, reset, start]);
+  }, [autoStart, normTime, pause, reset, start]);
   (0, _react().useImperativeHandle)(ref, () => ({
     start,
     pause,
-    reset: resetTime
+    reset: resetTimer
   }));
-  const defaultTextStyle = tokens.layout.text;
-  const content = (0, _react().useMemo)(() => (0, _utils.isFunction)(children) ? children(current) : (0, _utils.formatDuration)(format, current), [children, current, format]);
-  const contentNode = (0, _react().useMemo)(() => (0, _utils.isText)(content) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: defaultTextStyle
-  }, content) : content, [content, defaultTextStyle]);
+  const content = (0, _utils.isFunction)(children) ? children(current) : (0, _utils.formatDuration)(format, current);
+  const contentNode = (0, _utils.renderTextOrNode)(content, tokens.layout.text);
+  const accLabel = (0, _validate.isText)(content) ? String(content) : `${current.hours}h ${current.minutes}m ${current.seconds}s`;
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    accessibilityRole: "timer",
+    accessibilityLiveRegion: "polite",
+    accessibilityLabel: accLabel,
+    accessibilityValue: {
+      text: accLabel
+    },
     style: style
   }, rest), contentNode);
-});
-CountDown.displayName = 'CountDown';
+};
+const CountDownForwardRef = /*#__PURE__*/_react().default.forwardRef(CountDownImpl);
+CountDownForwardRef.displayName = 'CountDown';
+const CountDown = /*#__PURE__*/_react().default.memo(CountDownForwardRef);
 var _default = exports.default = CountDown;

package/dist/cjs/components/datetime-picker/DatetimePicker.js

@@ -15,55 +15,30 @@ var _picker = _interopRequireDefault(require("../picker"));
 var _Popup = require("../popup/Popup");
 var _hooks = require("../../hooks");
 var _utils = require("../../utils");
+var _tokens = require("./tokens");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const currentYear = new Date().getFullYear();
-const DEFAULT_MIN_DATE = new Date(currentYear - 10, 0, 1);
-const DEFAULT_MAX_DATE = new Date(currentYear + 10, 11, 31);
-const DatetimePicker = props => {
+const DEFAULT_YEAR_RANGE_OFFSET = 10;
+const DEFAULT_MIN_DATE = new Date(currentYear - DEFAULT_YEAR_RANGE_OFFSET, 0, 1);
+const DEFAULT_MAX_DATE = new Date(currentYear + DEFAULT_YEAR_RANGE_OFFSET, 11, 31);
+const DatetimePickerImpl = props => {
+  const tokens = (0, _tokens.useDatetimePickerTokens)();
   const [popupVisible, setPopupVisible] = (0, _hooks.useControllableValue)(props, {
     defaultValue: false,
     valuePropName: 'popupVisible',
     defaultValuePropName: 'defaultPopupVisible',
     trigger: 'onPopupVisibleChange'
   });
-  const close = (0, _react().useCallback)(() => setPopupVisible(false), [setPopupVisible]);
-  const renderPopup = (0, _react().useCallback)((node, popup, popupProps) => {
-    if (!popup) return node;
-    return /*#__PURE__*/_react().default.createElement(_Popup.Popup, _extends({
-      visible: popupVisible,
-      onClose: close,
-      placement: "bottom",
-      round: true,
-      safeAreaInsetBottom: true
-    }, popupProps), node);
-  }, [close, popupVisible]);
-  if (props.type === 'time') {
-    const {
-      popup,
-      popupVisible: _popupVisible,
-      defaultPopupVisible: _defaultPopupVisible,
-      popupProps,
-      onPopupVisibleChange: _onPopupVisibleChange,
-      onConfirm,
-      onCancel,
-      ...pickerProps
-    } = props;
-    const handleConfirm = (0, _react().useCallback)(value => {
-      onConfirm?.(value);
-      if (popup) close();
-    }, [close, onConfirm, popup]);
-    const handleCancel = (0, _react().useCallback)(() => {
-      onCancel?.();
-      if (popup) close();
-    }, [close, onCancel, popup]);
-    const pickerNode = /*#__PURE__*/_react().default.createElement(TimePicker, _extends({}, pickerProps, {
-      onConfirm: handleConfirm,
-      onCancel: handleCancel
-    }));
-    return renderPopup(pickerNode, popup, popupProps);
-  }
+  const handleClose = (0, _react().useCallback)(() => setPopupVisible(false), [setPopupVisible]);
+  const renderPopup = (0, _react().useCallback)((node, popup, popupProps) => !popup ? node : /*#__PURE__*/_react().default.createElement(_Popup.Popup, _extends({
+    visible: popupVisible,
+    onClose: handleClose,
+    placement: tokens.defaults.popupPlacement,
+    round: tokens.defaults.popupRound,
+    safeAreaInsetBottom: tokens.defaults.popupSafeAreaInsetBottom
+  }, popupProps), node), [handleClose, popupVisible, tokens.defaults.popupPlacement, tokens.defaults.popupRound, tokens.defaults.popupSafeAreaInsetBottom]);
   const {
     popup,
     popupVisible: _popupVisible,
@@ -74,15 +49,22 @@ const DatetimePicker = props => {
     onCancel,
     ...pickerProps
   } = props;
+  const onConfirmRef = (0, _react().useRef)(onConfirm);
+  const onCancelRef = (0, _react().useRef)(onCancel);
+  onConfirmRef.current = onConfirm;
+  onCancelRef.current = onCancel;
   const handleConfirm = (0, _react().useCallback)(value => {
-    onConfirm?.(value);
-    if (popup) close();
-  }, [close, onConfirm, popup]);
+    onConfirmRef.current?.(value);
+    if (popup) handleClose();
+  }, [handleClose, popup]);
   const handleCancel = (0, _react().useCallback)(() => {
-    onCancel?.();
-    if (popup) close();
-  }, [close, onCancel, popup]);
-  const pickerNode = /*#__PURE__*/_react().default.createElement(DatePicker, _extends({}, pickerProps, {
+    onCancelRef.current?.();
+    if (popup) handleClose();
+  }, [handleClose, popup]);
+  const pickerNode = props.type === 'time' ? /*#__PURE__*/_react().default.createElement(TimePicker, _extends({}, pickerProps, {
+    onConfirm: handleConfirm,
+    onCancel: handleCancel
+  })) : /*#__PURE__*/_react().default.createElement(DatePicker, _extends({}, pickerProps, {
     onConfirm: handleConfirm,
     onCancel: handleCancel
   }));
@@ -104,9 +86,8 @@ const DatePicker = props => {
     ...pickerProps
   } = props;
   const formatValue = (0, _react().useCallback)(dateValue => {
-    const fallback = (0, _utils.isValidDate)(dateValue) ? dateValue : new Date();
-    const time = (0, _utils.clamp)(fallback.getTime(), minDate.getTime(), maxDate.getTime());
-    const date = new Date(time);
+    const fb = (0, _utils.isValidDate)(dateValue) ? dateValue : new Date();
+    const date = new Date((0, _utils.clamp)(fb.getTime(), minDate.getTime(), maxDate.getTime()));
     if (type === 'year-month') {
       date.setDate(1);
       date.setHours(0, 0, 0, 0);
@@ -115,6 +96,7 @@ const DatePicker = props => {
     } else if (type === 'datehour') {
       date.setMinutes(0, 0, 0);
     }
+    ;
     return date;
   }, [maxDate, minDate, type]);
   const [currentDate, setCurrentDate] = (0, _react().useState)(() => formatValue(value ?? defaultValue));
@@ -141,16 +123,14 @@ const DatePicker = props => {
           boundary.day = boundaryDate.getDate();
           if (date.getDate() === boundary.day) {
             boundary.hour = boundaryDate.getHours();
-            if (date.getHours() === boundary.hour) {
-              boundary.minute = boundaryDate.getMinutes();
-            }
+            if (date.getHours() === boundary.hour) boundary.minute = boundaryDate.getMinutes();
           }
         }
       }
       return boundary;
     };
-    const maxBoundary = getBoundary('max', currentDate);
-    const minBoundary = getBoundary('min', currentDate);
+    const maxBoundary = getBoundary('max', currentDate),
+      minBoundary = getBoundary('min', currentDate);
     const baseColumns = [{
       type: 'year',
       range: [minBoundary.year, maxBoundary.year]
@@ -189,13 +169,8 @@ const DatePicker = props => {
       result = [...result].sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type));
     }
     const originColumns = result.map(column => {
-      let values = (0, _utils.times)(column.range[1] - column.range[0] + 1, index => {
-        const value = column.range[0] + index;
-        return column.type === 'year' ? String(value) : (0, _utils.padZero)(value);
-      });
-      if (filter) {
-        values = filter(column.type, values);
-      }
+      let values = (0, _utils.times)(column.range[1] - column.range[0] + 1, index => column.type === 'year' ? String(column.range[0] + index) : (0, _utils.padZero)(column.range[0] + index));
+      if (filter) values = filter(column.type, values);
       return {
         type: column.type,
         values
@@ -230,12 +205,11 @@ const DatePicker = props => {
   const buildDateFromValues = (0, _react().useCallback)(values => {
     const getValue = columnType => {
       const index = originColumns.findIndex(column => column.type === columnType);
-      if (index === -1) return undefined;
-      return (0, _utils.getTrueValue)(values[index] ?? originColumns[index].values[0]);
+      return index === -1 ? undefined : (0, _utils.getTrueValue)(values[index] ?? originColumns[index].values[0]);
     };
-    let year = currentDate.getFullYear();
-    let month = currentDate.getMonth() + 1;
-    let day = currentDate.getDate();
+    let year = currentDate.getFullYear(),
+      month = currentDate.getMonth() + 1,
+      day = currentDate.getDate();
     if (type === 'month-day') {
       month = getValue('month') || month;
       day = getValue('day') || day;
@@ -244,24 +218,25 @@ const DatePicker = props => {
       month = getValue('month') || month;
       day = type === 'year-month' ? 1 : getValue('day') || day;
     }
-    const maxDay = (0, _utils.getMonthEndDay)(year, month);
-    day = Math.min(day, maxDay);
-    let hour = 0;
-    let minute = 0;
-    if (type === 'datehour' || type === 'datetime') {
-      hour = getValue('hour') || 0;
-    }
-    if (type === 'datetime') {
-      minute = getValue('minute') || 0;
-    }
+    day = Math.min(day, (0, _utils.getMonthEndDay)(year, month));
+    let hour = 0,
+      minute = 0;
+    if (type === 'datehour' || type === 'datetime') hour = getValue('hour') || 0;
+    if (type === 'datetime') minute = getValue('minute') || 0;
     return formatValue(new Date(year, month - 1, day, hour, minute));
   }, [currentDate, formatValue, originColumns, type]);
+  const onChangeRef = (0, _react().useRef)(onChange);
+  const onConfirmRef = (0, _react().useRef)(onConfirm);
+  onChangeRef.current = onChange;
+  onConfirmRef.current = onConfirm;
   const handleChange = (0, _react().useCallback)(values => {
     const next = buildDateFromValues(values.map(String));
     setCurrentDate(next);
-    onChange?.(next);
-  }, [buildDateFromValues, onChange]);
-  const handleConfirm = (0, _react().useCallback)(() => onConfirm?.(currentDate), [currentDate, onConfirm]);
+    onChangeRef.current?.(next);
+  }, [buildDateFromValues]);
+  const curDateRef = (0, _react().useRef)(currentDate);
+  curDateRef.current = currentDate;
+  const handleConfirm = (0, _react().useCallback)(() => onConfirmRef.current?.(curDateRef.current), []);
   return /*#__PURE__*/_react().default.createElement(_picker.default, _extends({}, pickerProps, {
     columns: columns,
     interactionMode: interactionMode,
@@ -290,14 +265,12 @@ const TimePicker = props => {
   const timeRef = (0, _react().useRef)('');
   const formatTime = (0, _react().useCallback)(timeValue => {
     const [hour = 0, minute = 0] = (timeValue ?? '').split(':').map(num => parseInt(num, 10));
-    const nextHour = (0, _utils.clamp)(Number.isNaN(hour) ? minHour : hour, minHour, maxHour);
-    const nextMinute = (0, _utils.clamp)(Number.isNaN(minute) ? minMinute : minute, minMinute, maxMinute);
-    return `${(0, _utils.padZero)(nextHour)}:${(0, _utils.padZero)(nextMinute)}`;
+    return `${(0, _utils.padZero)((0, _utils.clamp)(Number.isNaN(hour) ? minHour : hour, minHour, maxHour))}:${(0, _utils.padZero)((0, _utils.clamp)(Number.isNaN(minute) ? minMinute : minute, minMinute, maxMinute))}`;
   }, [maxHour, maxMinute, minHour, minMinute]);
   const [currentTime, setCurrentTime] = (0, _react().useState)(() => {
-    const initial = formatTime(value ?? defaultValue);
-    timeRef.current = initial;
-    return initial;
+    const init = formatTime(value ?? defaultValue);
+    timeRef.current = init;
+    return init;
   });
   (0, _react().useEffect)(() => {
     const next = (0, _utils.isString)(value) ? formatTime(value) : formatTime(timeRef.current);
@@ -307,37 +280,40 @@ const TimePicker = props => {
     }
   }, [formatTime, value]);
   const [hourValues, minuteValues] = (0, _react().useMemo)(() => {
-    let hours = (0, _utils.times)(maxHour - minHour + 1, index => (0, _utils.padZero)(minHour + index));
-    let minutes = (0, _utils.times)(maxMinute - minMinute + 1, index => (0, _utils.padZero)(minMinute + index));
+    let h = (0, _utils.times)(maxHour - minHour + 1, i => (0, _utils.padZero)(minHour + i));
+    let m = (0, _utils.times)(maxMinute - minMinute + 1, i => (0, _utils.padZero)(minMinute + i));
     if (filter) {
-      hours = filter('hour', hours);
-      minutes = filter('minute', minutes);
+      h = filter('hour', h);
+      m = filter('minute', m);
     }
-    return [hours, minutes];
+    ;
+    return [h, m];
   }, [filter, maxHour, maxMinute, minHour, minMinute]);
-  const columns = (0, _react().useMemo)(() => [hourValues.map(value => ({
-    label: formatter('hour', value),
-    value
-  })), minuteValues.map(value => ({
-    label: formatter('minute', value),
-    value
+  const columns = (0, _react().useMemo)(() => [hourValues.map(v => ({
+    label: formatter('hour', v),
+    value: v
+  })), minuteValues.map(v => ({
+    label: formatter('minute', v),
+    value: v
   }))], [formatter, hourValues, minuteValues]);
+  const onChangeRef = (0, _react().useRef)(onChange);
+  const onConfirmRef = (0, _react().useRef)(onConfirm);
+  onChangeRef.current = onChange;
+  onConfirmRef.current = onConfirm;
   const handleChange = (0, _react().useCallback)(values => {
-    const nextHour = values[0] ?? hourValues[0];
-    const nextMinute = values[1] ?? minuteValues[0];
-    const next = `${String(nextHour)}:${String(nextMinute)}`;
+    const next = `${String(values[0] ?? hourValues[0])}:${String(values[1] ?? minuteValues[0])}`;
     timeRef.current = next;
     setCurrentTime(next);
-    onChange?.(next);
-  }, [hourValues, minuteValues, onChange]);
-  const handleConfirm = (0, _react().useCallback)(() => onConfirm?.(timeRef.current), [onConfirm]);
-  const pickerValue = currentTime.split(':');
+    onChangeRef.current?.(next);
+  }, [hourValues, minuteValues]);
+  const handleConfirm = (0, _react().useCallback)(() => onConfirmRef.current?.(timeRef.current), []);
   return /*#__PURE__*/_react().default.createElement(_picker.default, _extends({}, pickerProps, {
     columns: columns,
     interactionMode: interactionMode,
-    value: pickerValue,
+    value: currentTime.split(':'),
     onChange: handleChange,
     onConfirm: handleConfirm
   }));
 };
+const DatetimePicker = /*#__PURE__*/_react().default.memo(DatetimePickerImpl);
 var _default = exports.default = DatetimePicker;

package/dist/cjs/components/datetime-picker/tokens.js

@@ -5,7 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDatetimePickerTokens = void 0;
 var _designSystem = require("../../design-system");
-const createDatetimePickerTokens = _foundations => {
-  return {};
-};
+const createDatetimePickerTokens = _foundations => ({
+  defaults: {
+    yearRangeOffset: 10,
+    dateInteractionMode: 'freeze',
+    timeInteractionMode: 'freeze',
+    minHour: 0,
+    maxHour: 23,
+    minMinute: 0,
+    maxMinute: 59,
+    popupPlacement: 'bottom',
+    popupRound: true,
+    popupSafeAreaInsetBottom: true
+  }
+});
 const useDatetimePickerTokens = exports.useDatetimePickerTokens = (0, _designSystem.createComponentTokensHook)('datetimePicker', createDatetimePickerTokens);