react-native-system-ui 0.0.1 → 0.0.3

package/dist/es/components/picker/Picker.js

@@ -1,20 +1,76 @@
 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); }
-import React from 'react';
-import { Pressable, Text, View, Platform } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, Text, View, Platform, StyleSheet } from 'react-native';
 import Loading from '../loading';
 import { withAlpha } from '../../utils/color';
-import { isFiniteNumber, isText } from '../../utils/validate';
+import { isFiniteNumber, isObject, isText } from '../../utils/validate';
 import { usePickerTokens } from './tokens';
 import WheelPicker from './WheelPicker';
-import styles from './styles';
-import { usePickerValue } from './usePickerValue';
-import { findEnabledIndex } from './utils';
+import { findEnabledIndex, normalizePicker, prepareColumns, shallowEqualArray, toArrayValue } from './utils';
+export function usePickerValue({
+  columns,
+  valueProp,
+  defaultValue,
+  emitConfirmOnAutoSelect = true,
+  onChange,
+  onConfirm
+}) {
+  const preparedColumns = useMemo(() => prepareColumns(columns), [columns]);
+  const isControlled = valueProp !== undefined;
+  const [innerValue, setInnerValue] = useState(() => {
+    const initial = toArrayValue(valueProp ?? defaultValue);
+    return normalizePicker(preparedColumns, initial).values;
+  });
+  const innerValueRef = useRef(innerValue);
+  const commitValue = useCallback(next => {
+    innerValueRef.current = next;
+    setInnerValue(next);
+  }, []);
+  useEffect(() => {
+    if (!isControlled) return;
+    const next = toArrayValue(valueProp);
+    if (!shallowEqualArray(innerValueRef.current, next)) {
+      commitValue(next);
+    }
+  }, [commitValue, isControlled, valueProp]);
+  const normalized = useMemo(() => normalizePicker(preparedColumns, innerValue), [preparedColumns, innerValue]);
+  useEffect(() => {
+    if (isControlled) return;
+    if (!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 = useCallback((option, columnIndex) => {
+    const next = [...innerValueRef.current];
+    next[columnIndex] = option.value;
+    if (preparedColumns.type === 'cascade') {
+      next.length = columnIndex + 1;
+    }
+    const final = normalizePicker(preparedColumns, next);
+    if (shallowEqualArray(innerValueRef.current, final.values)) return;
+    commitValue(final.values);
+    onChange?.(final.values, final.options);
+  }, [commitValue, onChange, preparedColumns]);
+  const handleConfirm = useCallback(() => {
+    onConfirm?.(normalized.values, normalized.options);
+  }, [normalized, onConfirm]);
+  return {
+    normalized,
+    handleSelect,
+    handleConfirm
+  };
+}
 const getVisibleCount = count => {
   const normalized = 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,
@@ -50,7 +106,7 @@ const GradientMask = ({
       }]
     });
   }
-  const steps = position === 'top' ? GRADIENT_STEPS : [...GRADIENT_STEPS].reverse();
+  const steps = position === 'top' ? GRADIENT_STEPS : GRADIENT_STEPS_REVERSED;
   return /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     style: [...baseStyle, {
@@ -64,6 +120,17 @@ const GradientMask = ({
     }
   })));
 };
+const isCascadeColumns = columns => {
+  if (!Array.isArray(columns) || columns.length === 0) return false;
+  const first = columns[0];
+  if (Array.isArray(first)) return false;
+  if (isObject(first) && 'options' in first) return false;
+  return columns.some(option => {
+    if (!isObject(option)) return false;
+    const children = option.children;
+    return Array.isArray(children) && children.length > 0;
+  });
+};
 const PickerColumn = /*#__PURE__*/React.memo(props => {
   const {
     columnIndex,
@@ -82,12 +149,12 @@ const PickerColumn = /*#__PURE__*/React.memo(props => {
     swipeDuration
   } = props;
   const restVisible = Math.max(1, Math.floor((visibleItemCount - 1) / 2));
-  const selectedIndex = React.useMemo(() => {
+  const selectedIndex = useMemo(() => {
     if (!options.length) return 0;
     const idx = options.findIndex(option => option.value === value);
     return findEnabledIndex(options, idx >= 0 ? idx : 0);
   }, [options, value]);
-  const handleChange = React.useCallback(index => {
+  const handleChange = useCallback(index => {
     const target = findEnabledIndex(options, index);
     const option = options[target];
     if (!option || option.disabled) return;
@@ -163,7 +230,11 @@ const Picker = props => {
     visibleItemCount: visibleItemCountProp = tokens.defaults.visibleItemCount,
     loading = false,
     readOnly = false,
-    decelerationRate = 'fast',
+    decelerationRate = Platform.select({
+      ios: 0.9975,
+      android: 0.989,
+      default: 0.989
+    }) ?? 'normal',
     swipeDuration = tokens.defaults.swipeDuration,
     scrollEventThrottle = 16,
     columnsTop,
@@ -174,6 +245,7 @@ const Picker = props => {
     emitConfirmOnAutoSelect = true,
     maskColor,
     maskType = tokens.defaults.maskType,
+    interactionMode = 'auto',
     onChange,
     onConfirm,
     onCancel,
@@ -181,7 +253,8 @@ const Picker = props => {
     testID,
     ...rest
   } = props;
-  const visibleItemCount = React.useMemo(() => getVisibleCount(visibleItemCountProp ?? tokens.defaults.visibleItemCount), [tokens.defaults.visibleItemCount, visibleItemCountProp]);
+  const visibleItemCount = getVisibleCount(visibleItemCountProp ?? tokens.defaults.visibleItemCount);
+  const isCascade = isCascadeColumns(columns);
   const {
     normalized,
     handleSelect,
@@ -195,26 +268,22 @@ const Picker = props => {
     onConfirm
   });
   const renderActionContent = (content, color) => {
-    if (/*#__PURE__*/React.isValidElement(content)) {
-      return /*#__PURE__*/React.createElement(View, {
-        style: {
-          minWidth: 44,
-          alignItems: 'center',
-          justifyContent: 'center'
-        }
-      }, content);
-    }
-    if (isText(content)) {
-      return /*#__PURE__*/React.createElement(Text, {
-        numberOfLines: 1,
-        style: [styles.actionText, {
-          color,
-          fontSize: tokens.typography.toolbarSize,
-          fontFamily: tokens.typography.fontFamily,
-          fontWeight: tokens.typography.toolbarWeight
-        }]
-      }, content);
-    }
+    if (/*#__PURE__*/React.isValidElement(content)) return /*#__PURE__*/React.createElement(View, {
+      style: {
+        minWidth: 44,
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }, content);
+    if (isText(content)) return /*#__PURE__*/React.createElement(Text, {
+      numberOfLines: 1,
+      style: [styles.actionText, {
+        color,
+        fontSize: tokens.typography.toolbarSize,
+        fontFamily: tokens.typography.fontFamily,
+        fontWeight: tokens.typography.toolbarWeight
+      }]
+    }, content);
     return /*#__PURE__*/React.createElement(View, {
       style: {
         minWidth: 44
@@ -222,17 +291,13 @@ const Picker = props => {
     });
   };
   const renderTitleContent = content => {
-    if (content == null) {
-      return /*#__PURE__*/React.createElement(View, null);
-    }
-    if (/*#__PURE__*/React.isValidElement(content)) {
-      return /*#__PURE__*/React.createElement(View, {
-        style: [styles.title, {
-          alignItems: 'center',
-          justifyContent: 'center'
-        }]
-      }, content);
-    }
+    if (content == null) return /*#__PURE__*/React.createElement(View, null);
+    if (/*#__PURE__*/React.isValidElement(content)) return /*#__PURE__*/React.createElement(View, {
+      style: [styles.title, {
+        alignItems: 'center',
+        justifyContent: 'center'
+      }]
+    }, content);
     return /*#__PURE__*/React.createElement(Text, {
       style: [styles.title, {
         fontSize: tokens.typography.toolbarSize,
@@ -243,56 +308,58 @@ const Picker = props => {
       numberOfLines: 1
     }, content);
   };
-  const renderToolbar = () => {
-    if (!showToolbar) return null;
-    return /*#__PURE__*/React.createElement(View, {
-      style: [styles.toolbar, {
-        height: tokens.spacing.toolbarHeight,
-        borderColor: tokens.colors.indicator,
-        paddingHorizontal: tokens.spacing.actionPadding
-      }]
-    }, /*#__PURE__*/React.createElement(Pressable, {
-      onPress: onCancel,
-      accessibilityRole: "button"
-    }, renderActionContent(cancelButtonText, tokens.colors.cancel)), renderTitleContent(title), /*#__PURE__*/React.createElement(Pressable, {
-      onPress: handleConfirm,
-      accessibilityRole: "button"
-    }, renderActionContent(confirmButtonText, tokens.colors.confirm)));
-  };
+  const toolbar = showToolbar ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.toolbar, {
+      height: tokens.spacing.toolbarHeight,
+      borderColor: tokens.colors.indicator,
+      paddingHorizontal: tokens.spacing.actionPadding
+    }]
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onCancel,
+    accessibilityRole: "button"
+  }, renderActionContent(cancelButtonText, tokens.colors.cancel)), renderTitleContent(title), /*#__PURE__*/React.createElement(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 = Math.max(itemHeight * 2, indicatorOffset);
+  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.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.createElement(View, _extends({}, rest, {
     style: [styles.container, {
       backgroundColor: tokens.colors.background
     }, style],
     testID: testID
-  }), toolbarPosition === 'top' ? renderToolbar() : null, /*#__PURE__*/React.createElement(View, {
+  }), toolbarPosition === 'top' && toolbar, /*#__PURE__*/React.createElement(View, {
     style: [styles.body, {
       height: wrapperHeight
     }]
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.columns,
     pointerEvents: loading ? 'none' : 'auto'
-  }, columnsTop, hasColumns ? normalized.columns.map((column, columnIndex) => /*#__PURE__*/React.createElement(PickerColumn, {
-    key: columnIndex,
-    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, columnsBottom, hasColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+  }, columnsTop, columnsContent, columnsBottom, hasColumns && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     style: [styles.indicator, {
       top: indicatorOffset,
@@ -302,16 +369,77 @@ const Picker = props => {
   }), /*#__PURE__*/React.createElement(GradientMask, {
     position: "top",
     height: maskHeight,
-    color: maskColor ?? tokens.colors.mask,
+    color: effectiveMaskColor,
     maskType: maskType
   }), /*#__PURE__*/React.createElement(GradientMask, {
     position: "bottom",
     height: maskHeight,
-    color: maskColor ?? tokens.colors.mask,
+    color: effectiveMaskColor,
     maskType: maskType
-  })) : null), loading ? /*#__PURE__*/React.createElement(View, {
+  }))), loading && /*#__PURE__*/React.createElement(View, {
     style: styles.loading
-  }, /*#__PURE__*/React.createElement(Loading, null)) : null), toolbarPosition === 'bottom' ? renderToolbar() : null);
+  }, /*#__PURE__*/React.createElement(Loading, null))), toolbarPosition === 'bottom' && toolbar);
 };
+const styles = 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: StyleSheet.hairlineWidth,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    zIndex: 3
+  },
+  gradientMask: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 2
+  },
+  toolbar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottomWidth: 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';
 export default Picker;