react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/cjs/picker/Picker.js

@@ -0,0 +1,466 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.usePickerValue = usePickerValue;
+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 _loading = _interopRequireDefault(require("../loading"));
+var _color = require("../../utils/color");
+var _validate = require("../../utils/validate");
+var _tokens = require("./tokens");
+var _WheelPicker = _interopRequireDefault(require("./WheelPicker"));
+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); }
+function usePickerValue({
+  columns,
+  valueProp,
+  defaultValue,
+  emitConfirmOnAutoSelect = true,
+  onChange,
+  onConfirm
+}) {
+  const preparedColumns = (0, _react().useMemo)(() => (0, _utils.prepareColumns)(columns), [columns]);
+  const isControlled = valueProp !== undefined;
+  const [innerValue, setInnerValue] = (0, _react().useState)(() => {
+    const initial = (0, _utils.toArrayValue)(valueProp ?? defaultValue);
+    return (0, _utils.normalizePicker)(preparedColumns, initial).values;
+  });
+  const innerValueRef = (0, _react().useRef)(innerValue);
+  const commitValue = (0, _react().useCallback)(next => {
+    innerValueRef.current = next;
+    setInnerValue(next);
+  }, []);
+  (0, _react().useEffect)(() => {
+    if (!isControlled) return;
+    const next = (0, _utils.toArrayValue)(valueProp);
+    if (!(0, _utils.shallowEqualArray)(innerValueRef.current, next)) {
+      commitValue(next);
+    }
+  }, [commitValue, isControlled, valueProp]);
+  const normalized = (0, _react().useMemo)(() => (0, _utils.normalizePicker)(preparedColumns, innerValue), [preparedColumns, innerValue]);
+  (0, _react().useEffect)(() => {
+    if (isControlled) return;
+    if (!(0, _utils.shallowEqualArray)(innerValue, normalized.values)) {
+      commitValue(normalized.values);
+      onChange?.(normalized.values, normalized.options);
+      if (emitConfirmOnAutoSelect) {
+        onConfirm?.(normalized.values, normalized.options);
+      }
+    }
+  }, [commitValue, emitConfirmOnAutoSelect, innerValue, isControlled, normalized, onChange, onConfirm]);
+  const handleSelect = (0, _react().useCallback)((option, columnIndex) => {
+    const next = [...innerValueRef.current];
+    next[columnIndex] = option.value;
+    if (preparedColumns.type === 'cascade') {
+      next.length = columnIndex + 1;
+    }
+    const final = (0, _utils.normalizePicker)(preparedColumns, next);
+    if ((0, _utils.shallowEqualArray)(innerValueRef.current, final.values)) return;
+    commitValue(final.values);
+    onChange?.(final.values, final.options);
+  }, [commitValue, onChange, preparedColumns]);
+  const handleConfirm = (0, _react().useCallback)(() => {
+    onConfirm?.(normalized.values, normalized.options);
+  }, [normalized, onConfirm]);
+  return {
+    normalized,
+    handleSelect,
+    handleConfirm
+  };
+}
+const getVisibleCount = count => {
+  const normalized = (0, _validate.isFiniteNumber)(count) ? Math.max(3, Math.floor(count)) : 5;
+  return normalized % 2 === 0 ? normalized + 1 : normalized;
+};
+const GRADIENT_OVERLAY_ALPHA = 0.25;
+const GRADIENT_STEPS = [0.98, 0.9075, 0.835, 0.7625, 0.69, 0.6175, 0.545, 0.4725, 0.4];
+const GRADIENT_STEPS_REVERSED = [...GRADIENT_STEPS].reverse();
+const GradientMask = ({
+  height,
+  color,
+  position,
+  maskType
+}) => {
+  const isWeb = _reactNative().Platform.OS === 'web';
+  const baseStyle = [styles.gradientMask, {
+    height
+  }, position === 'top' ? {
+    top: 0
+  } : {
+    bottom: 0
+  }];
+  const overlayColor = (0, _color.withAlpha)(color, GRADIENT_OVERLAY_ALPHA);
+  if (maskType === 'solid') {
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      pointerEvents: "none",
+      style: [...baseStyle, {
+        backgroundColor: (0, _color.withAlpha)(color, 0.9)
+      }]
+    });
+  }
+  if (isWeb) {
+    const angle = position === 'top' ? '180deg' : '0deg';
+    const gradientStart = (0, _color.withAlpha)(color, 0.98);
+    const gradientEnd = (0, _color.withAlpha)(color, 0.4);
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      pointerEvents: "none",
+      style: [...baseStyle, {
+        backgroundColor: overlayColor,
+        backgroundImage: `linear-gradient(${angle}, ${gradientStart}, ${gradientEnd})`
+      }]
+    });
+  }
+  const steps = position === 'top' ? GRADIENT_STEPS : GRADIENT_STEPS_REVERSED;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    pointerEvents: "none",
+    style: [...baseStyle, {
+      backgroundColor: overlayColor
+    }]
+  }, steps.map((opacity, idx) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    key: idx,
+    style: {
+      flex: 1,
+      backgroundColor: (0, _color.withAlpha)(color, opacity)
+    }
+  })));
+};
+const isCascadeColumns = columns => {
+  if (!Array.isArray(columns) || columns.length === 0) return false;
+  const first = columns[0];
+  if (Array.isArray(first)) return false;
+  if ((0, _validate.isObject)(first) && 'options' in first) return false;
+  return columns.some(option => {
+    if (!(0, _validate.isObject)(option)) return false;
+    const children = option.children;
+    return Array.isArray(children) && children.length > 0;
+  });
+};
+const PickerColumn = /*#__PURE__*/_react().default.memo(props => {
+  const {
+    columnIndex,
+    options,
+    value,
+    itemHeight,
+    visibleItemCount,
+    optionRender,
+    getOptionTestID,
+    getOptionA11yLabel,
+    onSelect,
+    tokens,
+    readOnly,
+    decelerationRate,
+    scrollEventThrottle,
+    swipeDuration
+  } = props;
+  const restVisible = Math.max(1, Math.floor((visibleItemCount - 1) / 2));
+  const selectedIndex = (0, _react().useMemo)(() => {
+    if (!options.length) return 0;
+    const idx = options.findIndex(option => option.value === value);
+    return (0, _utils.findEnabledIndex)(options, idx >= 0 ? idx : 0);
+  }, [options, value]);
+  const handleChange = (0, _react().useCallback)(index => {
+    const target = (0, _utils.findEnabledIndex)(options, index);
+    const option = options[target];
+    if (!option || option.disabled) return;
+    onSelect(option, columnIndex, target);
+  }, [columnIndex, onSelect, options]);
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.column, {
+      height: itemHeight * visibleItemCount
+    }]
+  }, /*#__PURE__*/_react().default.createElement(_WheelPicker.default, {
+    data: options,
+    itemHeight: itemHeight,
+    visibleRest: restVisible,
+    selectedIndex: Math.max(0, selectedIndex),
+    onChange: handleChange,
+    readOnly: readOnly,
+    indicatorColor: tokens.colors.indicator,
+    decelerationRate: decelerationRate,
+    scrollEventThrottle: scrollEventThrottle,
+    swipeDuration: swipeDuration,
+    renderItem: item => {
+      if (!item) return null;
+      const active = item.value === value;
+      const disabled = !!item.disabled;
+      const textColor = disabled ? tokens.colors.textDisabled : active ? tokens.colors.text : tokens.colors.textMuted;
+      const content = optionRender ? optionRender(item, {
+        columnIndex,
+        active
+      }) : item.label ?? item.value;
+      const testID = getOptionTestID?.(item, {
+        columnIndex,
+        active
+      });
+      const a11yLabel = getOptionA11yLabel?.(item, {
+        columnIndex,
+        active
+      });
+      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+        style: [styles.option, {
+          opacity: disabled ? 0.5 : 1,
+          minHeight: itemHeight
+        }],
+        testID: testID,
+        accessible: !!a11yLabel,
+        accessibilityLabel: a11yLabel
+      }, (0, _validate.isText)(content) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+        numberOfLines: 1,
+        style: [styles.optionText, {
+          color: textColor,
+          fontSize: tokens.typography.optionSize,
+          fontFamily: tokens.typography.fontFamily,
+          fontWeight: tokens.typography.optionWeight
+        }]
+      }, content) : content);
+    }
+  }));
+});
+const Picker = props => {
+  const {
+    tokensOverride
+  } = props;
+  const tokens = (0, _tokens.usePickerTokens)(tokensOverride);
+  const {
+    columns = [],
+    value: valueProp,
+    defaultValue,
+    title,
+    showToolbar = tokens.defaults.showToolbar,
+    toolbarPosition = tokens.defaults.toolbarPosition,
+    confirmButtonText = '确定',
+    cancelButtonText = '取消',
+    itemHeight = tokens.defaults.itemHeight,
+    visibleItemCount: visibleItemCountProp = tokens.defaults.visibleItemCount,
+    loading = false,
+    readOnly = false,
+    decelerationRate = _reactNative().Platform.select({
+      ios: 0.9975,
+      android: 0.989,
+      default: 0.989
+    }) ?? 'normal',
+    swipeDuration = tokens.defaults.swipeDuration,
+    scrollEventThrottle = 16,
+    columnsTop,
+    columnsBottom,
+    optionRender,
+    getOptionTestID,
+    getOptionA11yLabel,
+    emitConfirmOnAutoSelect = true,
+    maskColor,
+    maskType = tokens.defaults.maskType,
+    interactionMode = 'auto',
+    onChange,
+    onConfirm,
+    onCancel,
+    style,
+    testID,
+    ...rest
+  } = props;
+  const visibleItemCount = getVisibleCount(visibleItemCountProp ?? tokens.defaults.visibleItemCount);
+  const isCascade = isCascadeColumns(columns);
+  const {
+    normalized,
+    handleSelect,
+    handleConfirm
+  } = usePickerValue({
+    columns,
+    valueProp,
+    defaultValue,
+    emitConfirmOnAutoSelect,
+    onChange,
+    onConfirm
+  });
+  const renderActionContent = (content, color) => {
+    if (/*#__PURE__*/_react().default.isValidElement(content)) return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: {
+        minWidth: 44,
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }, content);
+    if ((0, _validate.isText)(content)) return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      numberOfLines: 1,
+      style: [styles.actionText, {
+        color,
+        fontSize: tokens.typography.toolbarSize,
+        fontFamily: tokens.typography.fontFamily,
+        fontWeight: tokens.typography.toolbarWeight
+      }]
+    }, content);
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: {
+        minWidth: 44
+      }
+    });
+  };
+  const renderTitleContent = content => {
+    if (content == null) return /*#__PURE__*/_react().default.createElement(_reactNative().View, null);
+    if (/*#__PURE__*/_react().default.isValidElement(content)) return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [styles.title, {
+        alignItems: 'center',
+        justifyContent: 'center'
+      }]
+    }, content);
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: [styles.title, {
+        fontSize: tokens.typography.toolbarSize,
+        fontFamily: tokens.typography.fontFamily,
+        color: tokens.colors.text,
+        fontWeight: tokens.typography.toolbarWeight
+      }],
+      numberOfLines: 1
+    }, content);
+  };
+  const toolbar = showToolbar ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.toolbar, {
+      height: tokens.spacing.toolbarHeight,
+      borderColor: tokens.colors.indicator,
+      paddingHorizontal: tokens.spacing.actionPadding
+    }]
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+    onPress: onCancel,
+    accessibilityRole: "button"
+  }, renderActionContent(cancelButtonText, tokens.colors.cancel)), renderTitleContent(title), /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+    onPress: handleConfirm,
+    accessibilityRole: "button"
+  }, renderActionContent(confirmButtonText, tokens.colors.confirm))) : null;
+  const wrapperHeight = itemHeight * visibleItemCount;
+  const maskVisibleCount = Math.max(1, Math.floor((visibleItemCount - 1) / 2));
+  const indicatorOffset = itemHeight * maskVisibleCount;
+  const maskHeight = indicatorOffset;
+  const hasColumns = normalized.columns.length > 0;
+  const effectiveMaskColor = maskColor ?? tokens.colors.mask;
+  const columnsContent = hasColumns ? normalized.columns.map((column, columnIndex) => {
+    const key = isCascade ? `${columnIndex}-${normalized.values.slice(0, columnIndex).map(String).join('|')}` : String(columnIndex);
+    return /*#__PURE__*/_react().default.createElement(PickerColumn, {
+      key: key,
+      columnIndex: columnIndex,
+      options: column,
+      value: normalized.values[columnIndex],
+      itemHeight: itemHeight,
+      visibleItemCount: visibleItemCount,
+      decelerationRate: decelerationRate,
+      scrollEventThrottle: scrollEventThrottle,
+      optionRender: optionRender,
+      getOptionTestID: getOptionTestID,
+      getOptionA11yLabel: getOptionA11yLabel,
+      readOnly: readOnly,
+      swipeDuration: swipeDuration,
+      onSelect: handleSelect,
+      tokens: tokens
+    });
+  }) : null;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
+    style: [styles.container, {
+      backgroundColor: tokens.colors.background
+    }, style],
+    testID: testID
+  }), toolbarPosition === 'top' && toolbar, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.body, {
+      height: wrapperHeight
+    }]
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: styles.columns,
+    pointerEvents: loading ? 'none' : 'auto'
+  }, columnsTop, columnsContent, columnsBottom, hasColumns && /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    pointerEvents: "none",
+    style: [styles.indicator, {
+      top: indicatorOffset,
+      height: itemHeight,
+      borderColor: tokens.colors.indicator
+    }]
+  }), /*#__PURE__*/_react().default.createElement(GradientMask, {
+    position: "top",
+    height: maskHeight,
+    color: effectiveMaskColor,
+    maskType: maskType
+  }), /*#__PURE__*/_react().default.createElement(GradientMask, {
+    position: "bottom",
+    height: maskHeight,
+    color: effectiveMaskColor,
+    maskType: maskType
+  }))), loading && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: styles.loading
+  }, /*#__PURE__*/_react().default.createElement(_loading.default, null))), toolbarPosition === 'bottom' && toolbar);
+};
+const styles = _reactNative().StyleSheet.create({
+  container: {
+    borderRadius: 4
+  },
+  body: {
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  columns: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  column: {
+    flex: 1
+  },
+  option: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  optionText: {
+    includeFontPadding: false
+  },
+  indicator: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    borderTopWidth: _reactNative().StyleSheet.hairlineWidth,
+    borderBottomWidth: _reactNative().StyleSheet.hairlineWidth,
+    zIndex: 3
+  },
+  gradientMask: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 2
+  },
+  toolbar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottomWidth: _reactNative().StyleSheet.hairlineWidth
+  },
+  title: {
+    flex: 1,
+    textAlign: 'center'
+  },
+  actionText: {
+    minWidth: 44,
+    textAlign: 'center'
+  },
+  loading: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255,255,255,0.65)'
+  }
+});
+Picker.displayName = 'Picker';
+var _default = exports.default = Picker;