react-native-system-ui 0.0.5 → 0.0.7

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

@@ -4,15 +4,77 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.enUS = void 0;
-var _base = require("./base");
 const enUS = exports.enUS = {
-  ..._base.localeBase,
   name: 'Name',
-  tel: 'Tel',
+  tel: 'Phone',
   save: 'Save',
   confirm: 'Confirm',
   cancel: 'Cancel',
   delete: 'Delete',
   loading: 'Loading...',
-  noCoupon: 'No coupons'
+  noCoupon: 'No coupons',
+  nameEmpty: 'Please enter a name',
+  telInvalid: 'Please enter a valid phone number',
+  vanCalendar: {
+    end: 'End',
+    start: 'Start',
+    title: 'Select Date',
+    confirm: 'Confirm',
+    startEnd: 'Start/End',
+    weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    monthTitle: (year, month) => `${year}/${month}`,
+    rangePrompt: maxRange => `Select up to ${maxRange} days`
+  },
+  vanPicker: {
+    select: 'Please select'
+  },
+  vanContactCard: {
+    addText: 'Add contact'
+  },
+  vanContactList: {
+    addText: 'New contact'
+  },
+  vanPagination: {
+    prev: 'Previous',
+    next: 'Next'
+  },
+  vanPullRefresh: {
+    pulling: 'Pull to refresh...',
+    loosing: 'Release to refresh...',
+    loading: 'Loading...'
+  },
+  vanSubmitBar: {
+    label: 'Total:'
+  },
+  vanCoupon: {
+    unlimited: 'No minimum spend',
+    discount: discount => `${discount}% off`,
+    condition: condition => `Valid on orders over ${condition}`
+  },
+  vanCouponCell: {
+    title: 'Coupon',
+    count: count => `${count} available`
+  },
+  vanCouponList: {
+    exchange: 'Redeem',
+    close: 'Do not use coupons',
+    enable: 'Available',
+    disabled: 'Unavailable',
+    placeholder: 'Enter coupon code'
+  },
+  vanAddressEdit: {
+    area: 'Area',
+    postal: 'Postal code',
+    areaEmpty: 'Please select an area',
+    addressEmpty: 'Please enter the address',
+    postalEmpty: 'Invalid postal code',
+    defaultAddress: 'Set as default address'
+  },
+  vanAddressEditDetail: {
+    label: 'Address',
+    placeholder: 'Street, building, etc.'
+  },
+  vanAddressList: {
+    add: 'Add address'
+  }
 };

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

@@ -4,5 +4,77 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.zhCN = void 0;
-var _base = require("./base");
-const zhCN = exports.zhCN = _base.localeBase;
+const zhCN = exports.zhCN = {
+  name: '姓名',
+  tel: '电话',
+  save: '保存',
+  confirm: '确认',
+  cancel: '取消',
+  delete: '删除',
+  loading: '加载中...',
+  noCoupon: '暂无优惠券',
+  nameEmpty: '请填写姓名',
+  telInvalid: '请填写正确的电话',
+  vanCalendar: {
+    end: '结束',
+    start: '开始',
+    title: '日期选择',
+    confirm: '确定',
+    startEnd: '开始/结束',
+    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
+    monthTitle: (year, month) => `${year}年${month}月`,
+    rangePrompt: maxRange => `最多选择 ${maxRange} 天`
+  },
+  vanPicker: {
+    select: '请选择'
+  },
+  vanContactCard: {
+    addText: '添加联系人'
+  },
+  vanContactList: {
+    addText: '新建联系人'
+  },
+  vanPagination: {
+    prev: '上一页',
+    next: '下一页'
+  },
+  vanPullRefresh: {
+    pulling: '下拉即可刷新...',
+    loosing: '释放即可刷新...',
+    loading: '加载中...'
+  },
+  vanSubmitBar: {
+    label: '合计：'
+  },
+  vanCoupon: {
+    unlimited: '无使用门槛',
+    discount: discount => `${discount}折`,
+    condition: condition => `满${condition}元可用`
+  },
+  vanCouponCell: {
+    title: '优惠券',
+    count: count => `${count}张可用`
+  },
+  vanCouponList: {
+    exchange: '兑换',
+    close: '不使用优惠券',
+    enable: '可用',
+    disabled: '不可用',
+    placeholder: '请输入优惠码'
+  },
+  vanAddressEdit: {
+    area: '地区',
+    postal: '邮政编码',
+    areaEmpty: '请选择地区',
+    addressEmpty: '请填写详细地址',
+    postalEmpty: '邮政编码不正确',
+    defaultAddress: '设为默认收货地址'
+  },
+  vanAddressEditDetail: {
+    label: '详细地址',
+    placeholder: '街道门牌信息'
+  },
+  vanAddressList: {
+    add: '新增地址'
+  }
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useConfigProviderTokens = void 0;
+var _designSystem = require("../../design-system");
+const createConfigProviderTokens = _foundations => {
+  return {};
+};
+const useConfigProviderTokens = exports.useConfigProviderTokens = (0, _designSystem.createComponentTokensHook)('configProvider', createConfigProviderTokens);

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

@@ -41,7 +41,7 @@ const CountDown = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   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 normalizedTime = (0, _react().useMemo)(() => Math.max(0, Number(time) || 0), [time]);
   const {
     start,
     pause,
@@ -53,12 +53,12 @@ const CountDown = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     onChange,
     onFinish
   });
-  const resetTime = () => {
+  const resetTime = (0, _react().useCallback)(() => {
     reset(normalizedTime);
     if (autoStart && normalizedTime > 0) {
       start();
     }
-  };
+  }, [autoStart, normalizedTime, reset, start]);
   (0, _react().useEffect)(() => {
     resetTime();
     return () => {
@@ -71,10 +71,10 @@ const CountDown = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     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, {
+  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) : content, [content, defaultTextStyle]);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     style: style
   }, rest), contentNode);

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

@@ -125,7 +125,7 @@ const DatePicker = props => {
     originColumns,
     columns,
     pickerValue
-  } = (() => {
+  } = (0, _react().useMemo)(() => {
     const getBoundary = (boundaryType, date) => {
       const boundaryDate = boundaryType === 'min' ? minDate : maxDate;
       const boundary = {
@@ -226,7 +226,7 @@ const DatePicker = props => {
       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);
@@ -306,7 +306,7 @@ const TimePicker = props => {
       setCurrentTime(next);
     }
   }, [formatTime, value]);
-  const [hourValues, minuteValues] = (() => {
+  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) {
@@ -314,14 +314,14 @@ const TimePicker = props => {
       minutes = filter('minute', minutes);
     }
     return [hours, minutes];
-  })();
-  const columns = [hourValues.map(value => ({
+  }, [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];

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDatetimePickerTokens = void 0;
+var _designSystem = require("../../design-system");
+const createDatetimePickerTokens = _foundations => {
+  return {};
+};
+const useDatetimePickerTokens = exports.useDatetimePickerTokens = (0, _designSystem.createComponentTokensHook)('datetimePicker', createDatetimePickerTokens);

package/dist/cjs/components/dialog/Dialog.js

@@ -94,6 +94,8 @@ const Dialog = props => {
     overlay = true,
     overlayStyle,
     overlayTestID = 'dialog-overlay',
+    closeOnBackPress = false,
+    closeOnPopstate = true,
     closeOnOverlayPress = false,
     closeOnClickOverlay = false,
     onClickOverlay,
@@ -158,18 +160,18 @@ const Dialog = props => {
     }
     handler?.();
   };
-  const handleCloseIcon = () => {
+  const handleCloseIcon = (0, _react().useCallback)(() => {
     onClickCloseIcon?.();
     runAction('close', onClose);
-  };
-  const handleCancel = () => {
+  }, [onClickCloseIcon, onClose]);
+  const handleCancel = (0, _react().useCallback)(() => {
     if (cancelLoading) return;
     runAction('cancel', onCancel);
-  };
-  const handleConfirm = () => {
+  }, [cancelLoading, onCancel]);
+  const handleConfirm = (0, _react().useCallback)(() => {
     if (confirmLoading) return;
     runAction('confirm', onConfirm);
-  };
+  }, [confirmLoading, onConfirm]);
   const scaleAnim = (0, _react().useRef)(new (_reactNative().Animated.Value)(0.7)).current;
   (0, _react().useEffect)(() => {
     scaleAnim.setValue(visible ? 0.7 : 1);
@@ -180,59 +182,59 @@ const Dialog = props => {
       useNativeDriver: _platform.nativeDriverEnabled
     }).start();
   }, [scaleAnim, visible]);
-  const widthStyle = width ? (0, _validate.isNumber)(width) ? {
+  const widthStyle = (0, _react().useMemo)(() => width ? (0, _validate.isNumber)(width) ? {
     width
   } : {
     width: String(width)
   } : {
     width: '90%',
     maxWidth: tokens.sizes.maxWidth
-  };
-  const titleWrapperStyle = hasTitle ? [styles.titleWrapper, {
+  }, [tokens.sizes.maxWidth, width]);
+  const titleWrapperStyle = (0, _react().useMemo)(() => hasTitle ? [styles.titleWrapper, {
     paddingTop: hasContent ? tokens.spacing.titlePaddingTop : tokens.spacing.titleIsolatedPadding,
     paddingBottom: hasContent ? 0 : tokens.spacing.titleIsolatedPadding,
     paddingHorizontal: hasContent ? tokens.spacing.paddingHorizontal : 0,
     marginBottom: hasContent ? tokens.spacing.titleGap : 0
-  }] : null;
-  const titleTextStyle = hasTitle ? [styles.title, {
+  }] : null, [hasContent, hasTitle, tokens.spacing.paddingHorizontal, tokens.spacing.titleGap, tokens.spacing.titleIsolatedPadding, tokens.spacing.titlePaddingTop]);
+  const titleTextStyle = (0, _react().useMemo)(() => hasTitle ? [styles.title, {
     color: tokens.colors.title,
     fontSize: tokens.typography.titleSize,
     lineHeight: tokens.typography.titleLineHeight,
     fontWeight: tokens.typography.titleWeight
-  }, titleStyle] : null;
-  const messageTextStyle = [styles.message, {
+  }, titleStyle] : null, [hasTitle, titleStyle, tokens.colors.title, tokens.typography.titleLineHeight, tokens.typography.titleSize, tokens.typography.titleWeight]);
+  const messageTextStyle = (0, _react().useMemo)(() => [styles.message, {
     color: isRoundTheme ? tokens.colors.title : tokens.colors.message,
     fontSize: tokens.typography.messageSize,
     lineHeight: tokens.typography.messageLineHeight,
     textAlign: messageAlign
-  }, messageStyle];
-  const messageContentStyle = !hasChildren ? {
+  }, messageStyle], [isRoundTheme, messageAlign, messageStyle, tokens.colors.message, tokens.colors.title, tokens.typography.messageLineHeight, tokens.typography.messageSize]);
+  const messageContentStyle = (0, _react().useMemo)(() => !hasChildren ? {
     alignItems: messageAlign === 'center' ? 'center' : messageAlign === 'left' ? 'flex-start' : 'flex-end'
-  } : null;
-  const messageWrapperStyle = [styles.messageWrapper, {
+  } : null, [hasChildren, messageAlign]);
+  const messageWrapperStyle = (0, _react().useMemo)(() => [styles.messageWrapper, {
     paddingTop: hasTitle ? tokens.spacing.messagePaddingTop : tokens.spacing.messagePadding,
     paddingBottom: isRoundTheme ? tokens.spacing.roundFooterPadding : tokens.spacing.messagePadding,
     paddingHorizontal: tokens.spacing.messagePaddingHorizontal
-  }];
-  const footerBorderTopStyle = [styles.footerBorderTop, (0, _hairline.createHairlineView)({
+  }], [hasTitle, isRoundTheme, tokens.spacing.messagePadding, tokens.spacing.messagePaddingHorizontal, tokens.spacing.messagePaddingTop, tokens.spacing.roundFooterPadding]);
+  const footerBorderTopStyle = (0, _react().useMemo)(() => [styles.footerBorderTop, (0, _hairline.createHairlineView)({
     position: 'top',
     color: tokens.colors.divider,
     left: 0,
     right: 0,
     top: 0
-  })];
+  })], [tokens.colors.divider]);
   const mergedCloseOnOverlayPress = closeOnOverlayPress || closeOnClickOverlay;
-  const animatedStyle = {
+  const animatedStyle = (0, _react().useMemo)(() => ({
     transform: [{
       scale: scaleAnim
     }]
-  };
-  const roundFooterStyle = [styles.roundFooter, {
+  }), [scaleAnim]);
+  const roundFooterStyle = (0, _react().useMemo)(() => [styles.roundFooter, {
     paddingTop: tokens.spacing.messagePaddingTop,
     paddingHorizontal: tokens.spacing.messagePaddingHorizontal,
     paddingBottom: tokens.spacing.roundFooterPadding
-  }];
-  const roundFooterNode = hasFooterActions ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }], [tokens.spacing.messagePaddingHorizontal, tokens.spacing.messagePaddingTop, tokens.spacing.roundFooterPadding]);
+  const roundFooterNode = (0, _react().useMemo)(() => hasFooterActions ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: roundFooterStyle
   }, showCancelButton ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [styles.roundButtonWrapper, showConfirmButton && {
@@ -266,8 +268,8 @@ const Dialog = props => {
     style: {
       minHeight: tokens.sizes.roundButtonHeight
     }
-  })) : null) : null;
-  const defaultFooterNode = hasFooterActions ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  })) : null) : null, [cancelButtonColor, cancelLoading, cancelProps?.disabled, cancelText, confirmButtonColor, confirmLoading, confirmProps?.disabled, confirmText, handleCancel, handleConfirm, hasFooterActions, roundFooterStyle, showCancelButton, showConfirmButton, tokens.sizes.roundButtonHeight, tokens.spacing.roundFooterGap]);
+  const defaultFooterNode = (0, _react().useMemo)(() => hasFooterActions ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: styles.footer
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: footerBorderTopStyle,
@@ -288,8 +290,13 @@ const Dialog = props => {
     loading: confirmLoading,
     disabled: confirmProps?.disabled,
     onPress: handleConfirm
-  }) : null) : null;
-  const footerNode = footer ?? (isRoundTheme ? roundFooterNode : defaultFooterNode);
+  }) : null) : null, [cancelButtonColor, cancelLoading, cancelProps?.disabled, cancelText, confirmButtonColor, confirmLoading, confirmProps?.disabled, confirmText, footerBorderTopStyle, handleCancel, handleConfirm, hasFooterActions, showCancelButton, showConfirmButton, tokens]);
+  const footerNode = (0, _react().useMemo)(() => footer ?? (isRoundTheme ? roundFooterNode : defaultFooterNode), [defaultFooterNode, footer, isRoundTheme, roundFooterNode]);
+  const popupStyleMemo = (0, _react().useMemo)(() => [{
+    backgroundColor: tokens.colors.background,
+    borderRadius: tokens.sizes.borderRadius,
+    padding: 0
+  }, widthStyle, style], [style, tokens.colors.background, tokens.sizes.borderRadius, widthStyle]);
   return /*#__PURE__*/_react().default.createElement(_popup.default, _extends({
     visible: visible,
     placement: "center",
@@ -297,17 +304,15 @@ const Dialog = props => {
     overlay: overlay,
     overlayStyle: overlayStyle,
     overlayTestID: overlayTestID,
+    closeOnBackPress: closeOnBackPress,
+    closeOnPopstate: closeOnPopstate,
     closeOnClickOverlay: mergedCloseOnOverlayPress,
     onClickOverlay: onClickOverlay,
     beforeClose: () => runBeforeClose('close'),
     onClose: onClose,
     onClosed: onClosed,
     contentAnimationStyle: animatedStyle,
-    style: [{
-      backgroundColor: tokens.colors.background,
-      borderRadius: tokens.sizes.borderRadius,
-      padding: 0
-    }, widthStyle, style]
+    style: popupStyleMemo
   }, rest), closeable ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
     style: [styles.closeIcon, {
       top: tokens.spacing.paddingTop / 2,

package/dist/cjs/components/dialog/tokens.js

@@ -31,12 +31,9 @@ const createDialogTokens = foundations => {
       paddingBottom: spacing.md,
       titlePaddingTop: 22,
       titleIsolatedPadding: spacing.lg,
-      // var(--rv-padding-lg)
       messagePadding: 20,
       messagePaddingTop: spacing.xs,
-      // var(--rv-padding-xs)
       messagePaddingHorizontal: spacing.lg,
-      // var(--rv-padding-lg)
       titleGap: spacing.sm,
       footerGap: spacing.md,
       roundFooterPadding: spacing.md,
@@ -49,7 +46,7 @@ const createDialogTokens = foundations => {
       borderRadius: radii.lg,
       closeSize: 20,
       actionHeight: 48,
-      roundButtonHeight: 40 // var(--rv-dialog-round-button-height)
+      roundButtonHeight: 40
     },
     typography: {
       titleSize: fontSize.md,

package/dist/cjs/components/divider/Divider.js

@@ -26,6 +26,8 @@ const Divider = props => {
   const {
     tokensOverride,
     children,
+    type: typeProp,
+    orientation: orientationProp,
     dashed: dashedProp,
     hairline: hairlineProp,
     contentPosition: contentPositionProp,
@@ -39,9 +41,10 @@ const Divider = props => {
   const dashed = dashedProp ?? tokens.defaults.dashed;
   const hairline = hairlineProp ?? tokens.defaults.hairline;
   const contentPosition = contentPositionProp ?? tokens.defaults.contentPosition;
+  const orientation = typeProp ?? orientationProp ?? 'horizontal';
   const resolvedColor = lineColor ?? tokens.colors.line;
   const borderStyle = dashed ? 'dashed' : 'solid';
-  const hasContent = (0, _utils.isRenderable)(children);
+  const hasContent = orientation === 'horizontal' && (0, _utils.isRenderable)(children);
   const content = !hasContent ? null : (0, _utils.isText)(children) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [tokens.layout.text, {
       color: tokens.colors.text,
@@ -82,6 +85,38 @@ const Divider = props => {
       }
     });
   };
+  if (orientation === 'vertical') {
+    const line = hairline ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [tokens.layout.hairlineWrapper, {
+        width: tokens.borders.thickness,
+        height: '100%'
+      }]
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [(0, _utils.createHairlineView)({
+        position: 'left',
+        color: resolvedColor,
+        top: 0,
+        bottom: 0,
+        left: 0
+      }), {
+        borderStyle
+      }]
+    })) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: {
+        width: tokens.borders.thickness,
+        height: '100%',
+        borderLeftWidth: tokens.borders.thickness,
+        borderLeftColor: resolvedColor,
+        borderStyle
+      }
+    });
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+      style: [tokens.layout.container, {
+        marginVertical: tokens.spacing.vertical,
+        flexDirection: 'column'
+      }, style]
+    }, rest), line);
+  }
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     style: [tokens.layout.container, {
       marginVertical: tokens.spacing.vertical