Merge pull request #840 from thundersdata-frontend/rn-issue

feat: picker组件支持自定义连接符（默认是,）
thundersdata-frontend · Mar 6, 2024 · 9c2bd6d · 9c2bd6d
2 parents a9c6eb7 + cfad6ff
commit 9c2bd6d
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 8 deletions.
diff --git a/.changeset/warm-eyes-kiss.md b/.changeset/warm-eyes-kiss.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-picker': patch
+---
+
+feat: picker组件支持自定义连接符（默认是,）
diff --git a/packages/react-native-picker/src/picker-input/index.md b/packages/react-native-picker/src/picker-input/index.md
@@ -36,6 +36,7 @@ group:
 | data | `true` | 选择项数据 | `CascadePickerItemProps[]` \| `Array<CascadePickerItemProps[]>` | `[]` |
 | cascade | `false` | 是否级联选择 | `boolean` | `false` |
 | cols | `false` | 选择列数量 | `number` | `3` |
+| hyphen | `false` | 连接符 | `number` | `,` |
 | value | `false` | 选中的值 | `ItemValue[]` |  |
 | onChange | `false` | 选择回调 | `(value?: ItemValue[]) => void` |  |
 | title | `false` | 选择器标题 | `string` |  |

diff --git a/packages/react-native-picker/src/picker-input/index.tsx b/packages/react-native-picker/src/picker-input/index.tsx
@@ -27,7 +27,10 @@ interface PickerInputProps extends PickerProps, Omit<ModalPickerProps, 'visible'
   brief?: ReactNode;
   /** 自定义样式 */
   style?: StyleProp<ViewStyle>;
+  /** 自定义高度 */
   itemHeight?: number;
+  /** 连接符 */
+  hyphen?: string;
 }
 
 const { ONE_PIXEL } = helpers;
@@ -48,6 +51,7 @@ const PickerInput = forwardRef<PickerRef, PickerInputProps>(
       allowClear = true,
       disabled = false,
       itemHeight,
+      hyphen = ',',
       activeOpacity = 0.6,
       ...restProps
     },
@@ -60,6 +64,7 @@ const PickerInput = forwardRef<PickerRef, PickerInputProps>(
       value,
       onChange,
       placeholder,
+      hyphen,
       ref,
     });
 

diff --git a/packages/react-native-picker/src/picker-item/index.md b/packages/react-native-picker/src/picker-item/index.md
@@ -57,6 +57,7 @@ group:
 | data | `true` | 选择项数据 | `CascadePickerItemProps[]` \| `Array<CascadePickerItemProps[]>` | `[]` |
 | cascade | `false` | 是否级联选择 | `boolean` | `false` |
 | cols | `false` | 选择列数量 | `number` | `3` |
+| hyphen | `false` | 连接符 | `number` | `,` |
 | value | `false` | 选中的值 | `ItemValue[]` |  |
 | onChange | `false` | 选择回调 | `(value?: ItemValue[]) => void` |  |
 | title | `false` | 选择器标题 | `string` |  |

diff --git a/packages/react-native-picker/src/picker-item/index.tsx b/packages/react-native-picker/src/picker-item/index.tsx
@@ -17,7 +17,10 @@ interface PickerItemProps extends PickerProps, Omit<ModalPickerProps, 'visible'
   disabled?: boolean;
   /** 自定义样式 */
   style?: StyleProp<ViewStyle>;
+  /** 是否在表单里 */
   inForm?: boolean;
+  /** 连接符 */
+  hyphen?: string;
 }
 
 const PickerItem = forwardRef<PickerRef, PickerItemProps>(
@@ -31,6 +34,7 @@ const PickerItem = forwardRef<PickerRef, PickerItemProps>(
       onChange,
       style,
       allowClear = true,
+      hyphen = ',',
       activeOpacity = 0.6,
       inForm,
       ...restProps
@@ -44,6 +48,7 @@ const PickerItem = forwardRef<PickerRef, PickerItemProps>(
       value,
       onChange,
       placeholder,
+      hyphen,
       ref,
     });
 

diff --git a/packages/react-native-picker/src/usePicker.ts b/packages/react-native-picker/src/usePicker.ts
@@ -12,10 +12,11 @@ function getText(
   data: CascadePickerItemProps[] | CascadePickerItemProps[][],
   value?: ItemValue[],
   cascade?: boolean,
-  placeholder?: string
+  placeholder?: string,
+  hyphen?: string
 ) {
   if (value) {
-    return transformValueToLabel(data, value, cascade) || placeholder;
+    return transformValueToLabel(data, value, cascade, hyphen) || placeholder;
   }
   return placeholder;
 }
@@ -26,13 +27,15 @@ export default function usePicker({
   value,
   onChange,
   placeholder = '请选择',
+  hyphen,
   ref,
 }: Pick<PickerProps, 'value' | 'onChange' | 'data' | 'cascade'> & {
   placeholder?: string;
+  hyphen?: string;
   ref: ForwardedRef<PickerRef>;
 }) {
   const [state, setState] = useSafeState<ItemValue[] | undefined>(value);
-  const [currentText, setCurrentText] = useSafeState(getText(data, value, cascade, placeholder));
+  const [currentText, setCurrentText] = useSafeState(getText(data, value, cascade, placeholder, hyphen));
   const [visible, { setTrue, setFalse }] = useBoolean(false);
 
   useImperativeHandle(ref, () => {
@@ -44,7 +47,7 @@ export default function usePicker({
   });
 
   useEffect(() => {
-    const text = getText(data, value, cascade, placeholder);
+    const text = getText(data, value, cascade, placeholder, hyphen);
     setCurrentText(text);
     setState(value);
   }, [value]);
@@ -55,7 +58,7 @@ export default function usePicker({
   };
 
   const handleChange = (value?: ItemValue[]) => {
-    const text = getText(data, value, cascade, placeholder);
+    const text = getText(data, value, cascade, placeholder, hyphen);
     setCurrentText(text);
     setState(value);
 

diff --git a/packages/react-native-picker/src/utils.ts b/packages/react-native-picker/src/utils.ts
@@ -10,7 +10,8 @@ import { CascadePickerItemProps, ItemValue } from './components/WheelPicker/type
 export function transformValueToLabel(
   data: CascadePickerItemProps[] | Array<CascadePickerItemProps[]>,
   value?: ItemValue[],
-  cascade?: boolean
+  cascade?: boolean,
+  hyphen?: string
 ) {
   if (!value || value.length === 0) return undefined;
   if (!cascade) {
@@ -19,14 +20,14 @@ export function transformValueToLabel(
       value.forEach((val, index) => {
         const label = (data[index] as CascadePickerItemProps[]).find(item => item.value + '' === val + '')?.label;
         if (label) {
-          text += label + ',';
+          text += label + hyphen;
         }
       });
       return text.substring(0, text.length - 1);
     }
     return (data as CascadePickerItemProps[]).find(item => item.value + '' === value[0] + '')?.label;
   }
-  return value.map(val => findByValue(data as CascadePickerItemProps[], val)?.label).join(',');
+  return value.map(val => findByValue(data as CascadePickerItemProps[], val)?.label).join(hyphen);
 }
 
 /**