react-native-system-ui 0.0.1 → 0.0.2

package/dist/cjs/collapse/tokens.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCollapseTokens = exports.createCollapseTokens = void 0;
+var _designSystem = require("../../design-system");
+const createCollapseTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize,
+    typography,
+    radii
+  } = foundations;
+  return {
+    defaults: {
+      accordion: false,
+      border: true,
+      iconPosition: 'right',
+      panelBorder: true,
+      panelIsLink: true,
+      panelSize: 'normal',
+      animationDuration: 200
+    },
+    layout: {
+      container: {
+        position: 'relative'
+      },
+      panel: {
+        position: 'relative'
+      },
+      hairline: {
+        position: 'absolute'
+      },
+      headerWrapper: {
+        position: 'relative'
+      },
+      bodyWrapper: {
+        position: 'relative',
+        overflow: 'hidden'
+      },
+      headerIconRow: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      bodyContent: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0
+      }
+    },
+    colors: {
+      border: palette.default[200],
+      title: palette.default[800],
+      description: palette.default[500],
+      background: '#ffffff',
+      active: palette.default[50],
+      arrow: palette.default[400],
+      disabled: palette.default[400]
+    },
+    typography: {
+      titleSize: fontSize.md,
+      descriptionSize: fontSize.sm,
+      fontFamily: typography.fontFamily,
+      titleWeight: typography.weight.medium
+    },
+    panel: {
+      borderRadius: radii.sm
+    },
+    spacing: {
+      paddingVertical: spacing.md,
+      paddingHorizontal: spacing.lg,
+      descriptionTop: spacing.xs,
+      iconGap: 8
+    }
+  };
+};
+exports.createCollapseTokens = createCollapseTokens;
+const useCollapseTokens = exports.useCollapseTokens = (0, _designSystem.createComponentTokensHook)('collapse', createCollapseTokens);

package/dist/cjs/config-provider/ConfigProvider.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConfigProvider = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _ThemeProvider = require("../../design-system/ThemeProvider");
+var _portal = require("../portal");
+var _LocaleContext = require("./LocaleContext");
+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); }
+const ConfigProviderBase = ({
+  theme,
+  locale,
+  children
+}) => {
+  const parentLocale = (0, _react().useContext)(_LocaleContext.LocaleContext);
+  const resolvedLocale = (0, _react().useMemo)(() => locale ?? parentLocale, [locale, parentLocale]);
+  return /*#__PURE__*/_react().default.createElement(_ThemeProvider.ThemeProvider, {
+    value: theme
+  }, /*#__PURE__*/_react().default.createElement(_LocaleContext.LocaleContext.Provider, {
+    value: resolvedLocale
+  }, /*#__PURE__*/_react().default.createElement(_portal.PortalHost, null, children)));
+};
+const ConfigProvider = exports.ConfigProvider = /*#__PURE__*/_react().default.memo(ConfigProviderBase);

package/dist/cjs/config-provider/useLocale.js

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

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

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _hooks = require("../../hooks");
+var _utils = require("../../utils");
+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 {
+    tokensOverride,
+    autoStart: autoStartProp,
+    millisecond: millisecondProp,
+    time: timeProp,
+    format: formatProp,
+    children,
+    onChange,
+    onFinish,
+    style,
+    ...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 = Math.max(0, Number(time) || 0);
+  const {
+    start,
+    pause,
+    reset,
+    current
+  } = (0, _hooks.useCountDown)({
+    time: normalizedTime,
+    millisecond,
+    onChange,
+    onFinish
+  });
+  const resetTime = () => {
+    reset(normalizedTime);
+    if (autoStart && normalizedTime > 0) {
+      start();
+    }
+  };
+  (0, _react().useEffect)(() => {
+    resetTime();
+    return () => {
+      pause();
+    };
+  }, [autoStart, normalizedTime, pause, reset, start]);
+  (0, _react().useImperativeHandle)(ref, () => ({
+    start,
+    pause,
+    reset: resetTime
+  }));
+  const defaultTextStyle = tokens.layout.text;
+  const content = (0, _utils.isFunction)(children) ? children(current) : (0, _utils.formatDuration)(format, current);
+  const contentNode = (0, _utils.isText)(content) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: defaultTextStyle
+  }, content) : content;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    style: style
+  }, rest), contentNode);
+});
+CountDown.displayName = 'CountDown';
+var _default = exports.default = CountDown;

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

@@ -0,0 +1,343 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _picker = _interopRequireDefault(require("../picker"));
+var _Popup = require("../popup/Popup");
+var _hooks = require("../../hooks");
+var _utils = require("../../utils");
+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 [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 {
+    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(DatePicker, _extends({}, pickerProps, {
+    onConfirm: handleConfirm,
+    onCancel: handleCancel
+  }));
+  return renderPopup(pickerNode, popup, popupProps);
+};
+const DatePicker = props => {
+  const {
+    type = 'datetime',
+    minDate = DEFAULT_MIN_DATE,
+    maxDate = DEFAULT_MAX_DATE,
+    formatter = (_type, value) => value,
+    filter,
+    columnsOrder,
+    interactionMode = 'freeze',
+    value,
+    defaultValue,
+    onChange,
+    onConfirm,
+    ...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);
+    if (type === 'year-month') {
+      date.setDate(1);
+      date.setHours(0, 0, 0, 0);
+    } else if (type === 'date' || type === 'month-day') {
+      date.setHours(0, 0, 0, 0);
+    } else if (type === 'datehour') {
+      date.setMinutes(0, 0, 0);
+    }
+    return date;
+  }, [maxDate, minDate, type]);
+  const [currentDate, setCurrentDate] = (0, _react().useState)(() => formatValue(value ?? defaultValue));
+  (0, _react().useEffect)(() => {
+    setCurrentDate(prev => value && (0, _utils.isValidDate)(value) ? formatValue(value) : formatValue(prev));
+  }, [formatValue, value]);
+  const {
+    originColumns,
+    columns,
+    pickerValue
+  } = (0, _react().useMemo)(() => {
+    const getBoundary = (boundaryType, date) => {
+      const boundaryDate = boundaryType === 'min' ? minDate : maxDate;
+      const boundary = {
+        year: boundaryDate.getFullYear(),
+        month: boundaryType === 'min' ? 1 : 12,
+        day: boundaryType === 'min' ? 1 : (0, _utils.getMonthEndDay)(date.getFullYear(), date.getMonth() + 1),
+        hour: boundaryType === 'min' ? 0 : 23,
+        minute: boundaryType === 'min' ? 0 : 59
+      };
+      if (date.getFullYear() === boundary.year) {
+        boundary.month = boundaryDate.getMonth() + 1;
+        if (date.getMonth() + 1 === boundary.month) {
+          boundary.day = boundaryDate.getDate();
+          if (date.getDate() === boundary.day) {
+            boundary.hour = boundaryDate.getHours();
+            if (date.getHours() === boundary.hour) {
+              boundary.minute = boundaryDate.getMinutes();
+            }
+          }
+        }
+      }
+      return boundary;
+    };
+    const maxBoundary = getBoundary('max', currentDate);
+    const minBoundary = getBoundary('min', currentDate);
+    const baseColumns = [{
+      type: 'year',
+      range: [minBoundary.year, maxBoundary.year]
+    }, {
+      type: 'month',
+      range: [minBoundary.month, maxBoundary.month]
+    }, {
+      type: 'day',
+      range: [minBoundary.day, maxBoundary.day]
+    }, {
+      type: 'hour',
+      range: [minBoundary.hour, maxBoundary.hour]
+    }, {
+      type: 'minute',
+      range: [minBoundary.minute, maxBoundary.minute]
+    }];
+    let result = baseColumns;
+    switch (type) {
+      case 'date':
+        result = baseColumns.slice(0, 3);
+        break;
+      case 'year-month':
+        result = baseColumns.slice(0, 2);
+        break;
+      case 'month-day':
+        result = baseColumns.slice(1, 3);
+        break;
+      case 'datehour':
+        result = baseColumns.slice(0, 4);
+        break;
+      default:
+        break;
+    }
+    if (columnsOrder?.length) {
+      const order = columnsOrder.concat(result.map(col => col.type));
+      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);
+      }
+      return {
+        type: column.type,
+        values
+      };
+    });
+    const columns = originColumns.map(column => column.values.map(value => ({
+      label: formatter(column.type, value),
+      value
+    })));
+    const pickerValue = originColumns.map(column => {
+      switch (column.type) {
+        case 'year':
+          return String(currentDate.getFullYear());
+        case 'month':
+          return (0, _utils.padZero)(currentDate.getMonth() + 1);
+        case 'day':
+          return (0, _utils.padZero)(currentDate.getDate());
+        case 'hour':
+          return (0, _utils.padZero)(currentDate.getHours());
+        case 'minute':
+          return (0, _utils.padZero)(currentDate.getMinutes());
+        default:
+          return column.values[0] ?? '';
+      }
+    });
+    return {
+      originColumns,
+      columns,
+      pickerValue
+    };
+  }, [columnsOrder, currentDate, filter, formatter, maxDate, minDate, type]);
+  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]);
+    };
+    let year = currentDate.getFullYear();
+    let month = currentDate.getMonth() + 1;
+    let day = currentDate.getDate();
+    if (type === 'month-day') {
+      month = getValue('month') || month;
+      day = getValue('day') || day;
+    } else {
+      year = getValue('year') || year;
+      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;
+    }
+    return formatValue(new Date(year, month - 1, day, hour, minute));
+  }, [currentDate, formatValue, originColumns, type]);
+  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]);
+  return /*#__PURE__*/_react().default.createElement(_picker.default, _extends({}, pickerProps, {
+    columns: columns,
+    interactionMode: interactionMode,
+    value: pickerValue,
+    onChange: handleChange,
+    onConfirm: handleConfirm
+  }));
+};
+const TimePicker = props => {
+  const {
+    type: _type,
+    formatter = (_type, value) => value,
+    filter,
+    columnsOrder: _columnsOrder,
+    minHour = 0,
+    maxHour = 23,
+    minMinute = 0,
+    maxMinute = 59,
+    interactionMode = 'freeze',
+    value,
+    defaultValue,
+    onChange,
+    onConfirm,
+    ...pickerProps
+  } = 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)}`;
+  }, [maxHour, maxMinute, minHour, minMinute]);
+  const [currentTime, setCurrentTime] = (0, _react().useState)(() => {
+    const initial = formatTime(value ?? defaultValue);
+    timeRef.current = initial;
+    return initial;
+  });
+  (0, _react().useEffect)(() => {
+    const next = (0, _utils.isString)(value) ? formatTime(value) : formatTime(timeRef.current);
+    if (next !== timeRef.current) {
+      timeRef.current = next;
+      setCurrentTime(next);
+    }
+  }, [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));
+    if (filter) {
+      hours = filter('hour', hours);
+      minutes = filter('minute', minutes);
+    }
+    return [hours, minutes];
+  }, [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
+  }))], [formatter, hourValues, minuteValues]);
+  const handleChange = (0, _react().useCallback)(values => {
+    const nextHour = values[0] ?? hourValues[0];
+    const nextMinute = values[1] ?? minuteValues[0];
+    const next = `${String(nextHour)}:${String(nextMinute)}`;
+    timeRef.current = next;
+    setCurrentTime(next);
+    onChange?.(next);
+  }, [hourValues, minuteValues, onChange]);
+  const handleConfirm = (0, _react().useCallback)(() => onConfirm?.(timeRef.current), [onConfirm]);
+  const pickerValue = (0, _react().useMemo)(() => currentTime.split(':'), [currentTime]);
+  return /*#__PURE__*/_react().default.createElement(_picker.default, _extends({}, pickerProps, {
+    columns: columns,
+    interactionMode: interactionMode,
+    value: pickerValue,
+    onChange: handleChange,
+    onConfirm: handleConfirm
+  }));
+};
+var _default = exports.default = DatetimePicker;