fix(list): fix list value separator (#1724)

src/cascader/Cascader.tsx

@@ -30,6 +30,7 @@ export const Cascader: React.FC<CascaderProps> = ({
   overlayStyle,
   contentStyle,
   separator = '',
+  valueSeparator = '.',
   placement = 'bottomLeft',
   children,
   strategy = 'fixed',
@@ -56,16 +57,16 @@ export const Cascader: React.FC<CascaderProps> = ({
   const setOptions = (opts: OptionProps[]) => cache.setOptions(opts);
 
   useEffect(() => {
-    setTitle(cache.getLabelByValue(value, separator));
-  }, [cache, separator, value]);
+    setTitle(cache.getLabelByValue(value, separator, valueSeparator, 'cascader'));
+  }, [cache, separator, value, valueSeparator]);
 
   const handVisibleChange = (vis: boolean) => {
     setVisible(vis);
     onVisibleChange?.(vis);
   };
 
   const handleChange = (val?: string) => {
-    onChange?.(val, cache?.getOptionTreeByValue(val));
+    onChange?.(val, cache?.getOptionTreeByValue(val, valueSeparator, 'cascader'));
     setValue(val as string);
     setVisible(false);
   };

src/cascader/interfance.ts

@@ -51,6 +51,10 @@ export interface CascaderProps extends Omit<ListProps, 'options' | 'onChange' |
    * cascader 级联文本连接符
    */
   separator?: string;
+  /**
+   * value解析连接符 默认为'.'
+   */
+  valueSeparator?: string;
   /**
    * 是否允许clear
    */

src/list-picker/Trigger.tsx

@@ -16,6 +16,9 @@ const Trigger: React.ForwardRefRenderFunction<HTMLInputElement, TriggerProps> =
     prefix: propPrefix,
     suffix: propSuffix,
     visible,
+    separator = '',
+    valueSeparator = '.',
+    model = 'single',
     ...rest
   } = props;
   const { options, setOptions, getOptionByValue, getLabelByValue } = useContext(ListContext);
@@ -47,7 +50,7 @@ const Trigger: React.ForwardRefRenderFunction<HTMLInputElement, TriggerProps> =
       suffix={suffix}
       active={visible}
       placeholder={placeholder}
-      value={title ?? getLabelByValue?.(value as React.ReactText)}
+      value={title ?? getLabelByValue?.(value as React.ReactText, separator, valueSeparator, model)}
       onClear={handleClear}
       {...rest}
     />

src/list-picker/interfance.ts

@@ -67,6 +67,10 @@ export interface ListPickerProps extends Pick<ListProps, 'model' | 'empty' | 'ne
    * cascader 级联文本连接符
    */
   separator?: string;
+  /**
+   * value解析连接符 默认为 '.'
+   */
+  valueSeparator?: string;
   /**
    * 是否允许clear
    */

src/list-picker/listPicker.tsx

@@ -37,6 +37,7 @@ export const ListPicker: React.FC<ListPickerProps> = (props) => {
     onConfim,
     confimText = localeTextObject?.confirm,
     separator = '',
+    valueSeparator = '.',
     style,
     overlayStyle,
     contentStyle,
@@ -115,6 +116,7 @@ export const ListPicker: React.FC<ListPickerProps> = (props) => {
     }
     return (
       <Trigger
+        model={model}
         size={size}
         value={controlledValue}
         style={style}
@@ -128,6 +130,7 @@ export const ListPicker: React.FC<ListPickerProps> = (props) => {
         allowClear={allowClear}
         onClear={clearInput}
         separator={separator}
+        valueSeparator={valueSeparator}
         onClick={triggerClick}
         title={title}
         visible={visible}

src/list/context.tsx

@@ -1,7 +1,7 @@
 import { noop } from 'lodash';
 import React from 'react';
 import List from './List';
-import { OptionProps, ListProps, MaybeArray } from './interfance';
+import { OptionProps, ListProps, MaybeArray, ModelType } from './interfance';
 
 export interface ListContextProps {
   value?: string | (string | number)[] | number;
@@ -22,7 +22,12 @@ export interface ListContextProps {
   setOptions?: (options?: OptionProps[]) => void;
   getOptionByValue?: (optValue?: string | number) => OptionProps | undefined;
   getOptionsByValue?: (optValue?: MaybeArray<string | number>) => OptionProps | OptionProps[] | undefined;
-  getLabelByValue?: (val?: MaybeArray<string | number>, separator?: string) => any;
+  getLabelByValue?: (
+    val?: MaybeArray<string | number>,
+    separator?: string,
+    valueSeparator?: string,
+    model?: ModelType
+  ) => any;
 }
 const defaultList: ListContextProps = {
   value: '',

src/list/hooks/useCacheOptions.ts

@@ -33,13 +33,18 @@ const useCacheOptions = () => {
         }, [] as any)
       : getOptionByValue(optValue);
 
-  const getLabelByValue = (val?: MaybeArray<string | number>, separator = '') => {
+  const getLabelByValue = (
+    val?: MaybeArray<string | number>,
+    separator = '',
+    valueSeparator = '.',
+    model = 'single'
+  ) => {
     if (val === '' || typeof val === 'undefined') {
       return '';
     }
-    if (isString(val) && val?.includes('.')) {
+    if (isString(val) && val?.includes(valueSeparator) && model === 'cascader') {
       return (val as any)
-        ?.split('.')
+        ?.split(valueSeparator)
         ?.reduce((prev: string[], curr: string | number) => [...prev, getOptionByValue?.(curr)?.label], [])
         ?.join(separator);
     }
@@ -48,12 +53,12 @@ const useCacheOptions = () => {
     }
     return getOptionByValue(val)?.label ?? '';
   };
-  const getOptionTreeByValue = (val?: string | number) => {
+  const getOptionTreeByValue = (val?: string | number, valueSeparator = '.', model = 'single') => {
     if (val === '' || typeof val === 'undefined') {
       return '';
     }
-    if (isString(val) && val?.includes('.')) {
-      return (val as any)?.split('.')?.reduceRight((prev: { key: string; value: string }, curr: string) => {
+    if (isString(val) && val?.includes(valueSeparator) && model === 'cascader') {
+      return (val as any)?.split(valueSeparator)?.reduceRight((prev: { key: string; value: string }, curr: string) => {
         if (isEmpty(prev)) {
           return { ...getOptionByValue?.(curr) };
         }

src/list/index.tsx

@@ -6,6 +6,7 @@ import {
   DragItemProps,
   BaseItemProps,
   CascaderItemProps,
+  ModelType,
 } from './interfance';
 import List from './List';
 import Item from './Item';
@@ -18,8 +19,16 @@ import WithSubComponent from '../utils/withSubComponent';
 type ItemProps = Omit<InnerItemProps, 'selected' | 'selectValue'>;
 type ListProps = Omit<InnerListProps, 'selectParent'>;
 
-export type { ItemProps, ListProps, OptionProps, DragProps, DragItemProps, BaseItemProps, CascaderItemProps };
-
+export type {
+  ItemProps,
+  ListProps,
+  OptionProps,
+  DragProps,
+  DragItemProps,
+  BaseItemProps,
+  CascaderItemProps,
+  ModelType,
+};
 export { List, Item, Drag, DragItem, Selection, BaseItem };
 
 export default WithSubComponent(List, { Item, Drag, DragItem, Selection });