plain-design 1.0.0-beta.146 → 1.0.0-beta.147

package/src/packages/components/Select/createMultipleSelectRender.tsx

@@ -1,248 +1,248 @@
-import {reactive} from "@peryl/react-compose";
-import {iSelectCompositionParams, iSelectOptionProps} from "./select.utils";
-import Input from "../Input";
-import {createPublicSelectRender} from "./createPublicSelectRender";
-import {delay} from "@peryl/utils/delay";
-import {inputScrollEnd} from "../Input/input.utils";
-import {useMultipleModel} from "../../uses/useMultipleModel";
-import i18n from "../i18n";
-import {Checkbox} from "../Checkbox";
-import {CheckboxStatus} from "../../utils/constant";
-import {createEffects} from "@peryl/utils/createEffects";
-
-export function createMultipleSelectRender(params: iSelectCompositionParams) {
-
-  const state = reactive({
-    /*多值输入的时候，输入框的实时输入文本，用来绑定主要是为了能够主动清空多值输入框的输入内容*/
-    multipleText: null as null | string,
-  });
-
-  const { props, hooks, editComputed, scopeSlots, emit, classes, isMatch } = params;
-
-  /**
-   * 判断option是否已经选中
-   * @author  韦胜健
-   * @date    2022/8/16 9:11
-   */
-  const isActivated = (optionProps: iSelectOptionProps): boolean => !!model.value && model.value.findIndex((i: any) => isMatch({ option: optionProps.val, value: i })) > -1;
-
-  /**
-   * input滚动到末尾
-   * @author  韦胜健
-   * @date    2022/8/16 9:11
-   */
-  const scrollEnd = () => {delay().then(() => inputScrollEnd(() => selector.refs.input?.refs.el));};
-
-  const { effects } = createEffects();
-
-  const model = useMultipleModel<any[] | null | undefined>(() => props.modelValue as any, emit.onUpdateModelValue, props, undefined, effects);
-
-  const selector = createPublicSelectRender(params, {
-    isActivated,
-    model,
-    /**
-     * 选中某个选项的处理动作
-     * @author  韦胜健
-     * @date    2022/8/8 20:15
-     */
-    onSelectOption: (optionProps) => {
-      if (!editComputed.value.editable) {return;}
-      if (!model.value) {
-        /*（选项非禁用可以选中）*/
-        !optionProps.disabled && (model.value = [optionProps.val]);
-      } else {
-        if (!isActivated(optionProps)) {
-          /*如果没有选中则添加为选中（选项非禁用可以选中）*/
-          !optionProps.disabled && (model.value = [...model.value, optionProps.val]);
-        } else {
-          /*否则取消选中（无论选项是否禁用都可以取消选中）*/
-          model.value = model.value.filter((i: any) => !isMatch({ option: optionProps.val, value: i }));
-        }
-      }
-      scrollEnd();
-    },
-    /*点击reference的时候一直显示popper*/
-    alwaysShowOnClickReference: () => true,
-    /*默认重置的时候hover第一个option*/
-    defaultCurrent: 0,
-    /*给select panel设置multiple属性，使其显示多选标识*/
-    multiple: true,
-    /*在渲染panel内容的时候，额外显示多选辅助内容*/
-    processRenderPanel: (defaultRender) => {
-
-      const optionPropsList = selector.optionListHandler.getOptionPropsList();
-      let hasActivated = false;
-      let hasInactivated = false;
-      optionPropsList.forEach(i => {
-        if (isActivated(i)) {
-          hasActivated = true;
-        } else {
-          hasInactivated = true;
-        }
-      });
-      const checkStatus: typeof CheckboxStatus.TYPE = (hasActivated && !hasInactivated) ? CheckboxStatus.check : (hasInactivated && !hasActivated ? CheckboxStatus.uncheck : CheckboxStatus.minus);
-
-      return (
-        <>
-          {editComputed.value.editable && (
-            <div className="select-panel-header">
-              {/*<Button onClick={handler.handleCheckAll} size="mini">{i18n.$it('base.select.all').d('全选')}</Button>
-              <Button onClick={handler.handleUncheckALl} size="mini">{i18n.$it('base.clear').d('清空')}</Button>
-              <Button onClick={handler.handleCheckReverse} size="mini">{i18n.$it('base.select.reverse').d('反选')}</Button>*/}
-              <Checkbox checkStatus={checkStatus} customReadonly label={
-                checkStatus !== CheckboxStatus.check ? i18n.$it('base.select.all').d('全选') : i18n.$it('base.clear').d('清空')
-              } onClick={() => {
-                checkStatus !== CheckboxStatus.check ? handler.handleCheckAll() : handler.handleUncheckALl();
-              }}/>
-            </div>
-          )}
-          {defaultRender()}
-        </>
-      );
-    },
-    effects,
-  });
-
-  const handler = {
-    /**
-     * 当多选输入框输入的文本变化的时候，派发input change动作，使得能够应用为筛选关键字
-     * @author  韦胜健
-     * @date    2022/8/16 9:14
-     */
-    onMultipleTextChange: (val?: any) => {
-      if (props.disableFilter) {return;}
-      selector.handler.onInputChange(val);
-    },
-    /**
-     * 处理回车添加标签的动作，这里不做任何处理
-     * 在回车事件中处理选中/取消选中当前元素
-     * @author  韦胜健
-     * @date    2022/8/16 9:14
-     */
-    handleAddTag: () => {return new Promise<void>(() => null);},
-    /**
-     * 处理移除标签动作
-     * @author  韦胜健
-     * @date    2022/8/16 9:15
-     */
-    handleRemoveTag: async (data: { index: number }) => {
-      /**
-       * 这里之所以要await delay；原因是因为如果直接删除这个option的话，会导致这个option所对应的multiple input tag消失
-       * 导致useClickOutside在判断的时候检测到  点击的close icon不是reference的子节点从而关闭popper。
-       * 这样做的原因就是避免在delete元素的时候关闭popper
-       * @author  韦胜健
-       * @date    2022/8/9 11:29
-       */
-      await delay();
-      const activeOption = selector.optionListHandler.getOptionPropsList().filter(selector.handler.isActivated)[data.index];
-      selector.handler.onSelectOption(activeOption);
-    },
-    /**
-     * 处理选中所有动作
-     * @author  韦胜健
-     * @date    2022/8/16 9:15
-     */
-    handleCheckAll: () => {
-      const optionPropsList = selector.optionListHandler.getOptionPropsList();
-      if (!!props.handleCheckAll) {
-        props.handleCheckAll(optionPropsList);
-      } else {
-        model.value = optionPropsList.filter(i => !i.disabled).map(i => i.val);
-      }
-      scrollEnd();
-    },
-    /**
-     * 处理取消选中所有动作
-     * @author  韦胜健
-     * @date    2022/8/16 9:15
-     */
-    handleUncheckALl: () => {
-      const optionPropsList = selector.optionListHandler.getOptionPropsList();
-      if (!!props.handleUncheckAll) {
-        props.handleUncheckAll(optionPropsList);
-      } else {
-        model.value = [];
-      }
-    },
-    /**
-     * 处理反选动作
-     * @author  韦胜健
-     * @date    2022/8/16 9:15
-     */
-    handleCheckReverse: () => {
-      const optionPropsList = selector.optionListHandler.getOptionPropsList();
-      if (!!props.handleCheckReverse) {
-        props.handleCheckReverse(optionPropsList);
-      } else {
-        model.value = optionPropsList.filter(i => !isActivated(i) && !i.disabled).map(i => i.val);
-      }
-      scrollEnd();
-    },
-  };
-
-  /**
-   * 渲染多选输入框
-   * @author  韦胜健
-   * @date    2022/8/16 9:16
-   */
-  effects.push(hooks.renderInput.use(() => {
-
-    /*每次render input的时候解析内容*/
-    selector.optionListHandler.decode();
-    /*显示文本*/
-    const label: string[] = selector.optionListHandler.getMatchLabel(true);
-
-    return selector.reference.renderReference({
-      slotExist: scopeSlots.reference.isExist,
-      slotRender: () => scopeSlots.reference({ checked: selector.optionListHandler.getActivated() }),
-      defaultRender: () => (
-        <Input
-          {...{
-            multiple: true,
-            noClear: props.noClear,
-            class: classes.value,
-            ref: selector.onRef.input,
-            placeholder: props.placeholder,
-            modelValue: label,
-            multipleText: state.multipleText,
-            clearHandler: selector.handler.onInputClear,
-            suffixIcon: props.suffixIcon,
-            size: props.size,
-            customReadonly: props.disableFilter,
-            onUpdateMultipleText: handler.onMultipleTextChange,
-            handleAddTag: handler.handleAddTag,
-            handleRemoveTag: handler.handleRemoveTag,
-            onFocus: selector.handler.onInputFocus,
-            onBlur: selector.handler.onInputBlur,
-            nativeAttrs: { onKeyDown: selector.handler.onInputKeydown },
-            ...props.inputAttrs,
-          }}
-          v-slots={props.inputSlots}
-        />
-      )
-    });
-  }));
-
-  /**
-   * popper关闭的时候清空搜索关键字
-   * @author  韦胜健
-   * @date    2022/8/16 9:17
-   */
-  effects.push(hooks.onPopperClose.use(() => {state.multipleText = null;}));
-
-  /**
-   * input多值输入文本的时候保留这个文本
-   * @author  韦胜健
-   * @date    2022/8/16 9:17
-   */
-  effects.push(hooks.onInputTextChange.use((val) => {state.multipleText = val;}));
-
-  /**
-   * input清空动作
-   * @author  韦胜健
-   * @date    2022/8/16 9:17
-   */
-  effects.push(hooks.onInputClear.use(() => {state.multipleText = null;}));
-
-  return effects.clear;
-}
+import {reactive} from "@peryl/react-compose";
+import {iSelectCompositionParams, iSelectOptionProps} from "./select.utils";
+import Input from "../Input";
+import {createPublicSelectRender} from "./createPublicSelectRender";
+import {delay} from "@peryl/utils/delay";
+import {inputScrollEnd} from "../Input/input.utils";
+import {useMultipleModel} from "../../uses/useMultipleModel";
+import i18n from "../i18n";
+import {Checkbox} from "../Checkbox";
+import {CheckboxStatus} from "../../utils/constant";
+import {createEffects} from "@peryl/utils/createEffects";
+
+export function createMultipleSelectRender(params: iSelectCompositionParams) {
+
+  const state = reactive({
+    /*多值输入的时候，输入框的实时输入文本，用来绑定主要是为了能够主动清空多值输入框的输入内容*/
+    multipleText: null as null | string,
+  });
+
+  const { props, hooks, editComputed, scopeSlots, emit, classes, isMatch } = params;
+
+  /**
+   * 判断option是否已经选中
+   * @author  韦胜健
+   * @date    2022/8/16 9:11
+   */
+  const isActivated = (optionProps: iSelectOptionProps): boolean => !!model.value && model.value.findIndex((i: any) => isMatch({ option: optionProps.val, value: i })) > -1;
+
+  /**
+   * input滚动到末尾
+   * @author  韦胜健
+   * @date    2022/8/16 9:11
+   */
+  const scrollEnd = () => {delay().then(() => inputScrollEnd(() => selector.refs.input?.refs.el));};
+
+  const { effects } = createEffects();
+
+  const model = useMultipleModel<any[] | null | undefined>(() => props.modelValue as any, emit.onUpdateModelValue, props, undefined, effects);
+
+  const selector = createPublicSelectRender(params, {
+    isActivated,
+    model,
+    /**
+     * 选中某个选项的处理动作
+     * @author  韦胜健
+     * @date    2022/8/8 20:15
+     */
+    onSelectOption: (optionProps) => {
+      if (!editComputed.value.editable) {return;}
+      if (!model.value) {
+        /*（选项非禁用可以选中）*/
+        !optionProps.disabled && (model.value = [optionProps.val]);
+      } else {
+        if (!isActivated(optionProps)) {
+          /*如果没有选中则添加为选中（选项非禁用可以选中）*/
+          !optionProps.disabled && (model.value = [...model.value, optionProps.val]);
+        } else {
+          /*否则取消选中（无论选项是否禁用都可以取消选中）*/
+          model.value = model.value.filter((i: any) => !isMatch({ option: optionProps.val, value: i }));
+        }
+      }
+      scrollEnd();
+    },
+    /*点击reference的时候一直显示popper*/
+    alwaysShowOnClickReference: () => true,
+    /*默认重置的时候hover第一个option*/
+    defaultCurrent: 0,
+    /*给select panel设置multiple属性，使其显示多选标识*/
+    multiple: true,
+    /*在渲染panel内容的时候，额外显示多选辅助内容*/
+    processRenderPanel: (defaultRender) => {
+
+      const optionPropsList = selector.optionListHandler.getOptionPropsList();
+      let hasActivated = false;
+      let hasInactivated = false;
+      optionPropsList.forEach(i => {
+        if (isActivated(i)) {
+          hasActivated = true;
+        } else {
+          hasInactivated = true;
+        }
+      });
+      const checkStatus: typeof CheckboxStatus.TYPE = (hasActivated && !hasInactivated) ? CheckboxStatus.check : (hasInactivated && !hasActivated ? CheckboxStatus.uncheck : CheckboxStatus.minus);
+
+      return (
+        <>
+          {editComputed.value.editable && (
+            <div className="select-panel-header">
+              {/*<Button onClick={handler.handleCheckAll} size="mini">{i18n.$it('base.select.all').d('全选')}</Button>
+              <Button onClick={handler.handleUncheckALl} size="mini">{i18n.$it('base.clear').d('清空')}</Button>
+              <Button onClick={handler.handleCheckReverse} size="mini">{i18n.$it('base.select.reverse').d('反选')}</Button>*/}
+              <Checkbox checkStatus={checkStatus} customReadonly label={
+                checkStatus !== CheckboxStatus.check ? i18n.$it('base.select.all').d('全选') : i18n.$it('base.clear').d('清空')
+              } onClick={() => {
+                checkStatus !== CheckboxStatus.check ? handler.handleCheckAll() : handler.handleUncheckALl();
+              }}/>
+            </div>
+          )}
+          {defaultRender()}
+        </>
+      );
+    },
+    effects,
+  });
+
+  const handler = {
+    /**
+     * 当多选输入框输入的文本变化的时候，派发input change动作，使得能够应用为筛选关键字
+     * @author  韦胜健
+     * @date    2022/8/16 9:14
+     */
+    onMultipleTextChange: (val?: any) => {
+      if (props.disableFilter) {return;}
+      selector.handler.onInputChange(val);
+    },
+    /**
+     * 处理回车添加标签的动作，这里不做任何处理
+     * 在回车事件中处理选中/取消选中当前元素
+     * @author  韦胜健
+     * @date    2022/8/16 9:14
+     */
+    handleAddTag: () => {return new Promise<void>(() => null);},
+    /**
+     * 处理移除标签动作
+     * @author  韦胜健
+     * @date    2022/8/16 9:15
+     */
+    handleRemoveTag: async (data: { index: number }) => {
+      /**
+       * 这里之所以要await delay；原因是因为如果直接删除这个option的话，会导致这个option所对应的multiple input tag消失
+       * 导致useClickOutside在判断的时候检测到  点击的close icon不是reference的子节点从而关闭popper。
+       * 这样做的原因就是避免在delete元素的时候关闭popper
+       * @author  韦胜健
+       * @date    2022/8/9 11:29
+       */
+      await delay();
+      const activeOption = selector.optionListHandler.getOptionPropsList().filter(selector.handler.isActivated)[data.index];
+      selector.handler.onSelectOption(activeOption);
+    },
+    /**
+     * 处理选中所有动作
+     * @author  韦胜健
+     * @date    2022/8/16 9:15
+     */
+    handleCheckAll: () => {
+      const optionPropsList = selector.optionListHandler.getOptionPropsList();
+      if (!!props.handleCheckAll) {
+        props.handleCheckAll(optionPropsList);
+      } else {
+        model.value = optionPropsList.filter(i => !i.disabled).map(i => i.val);
+      }
+      scrollEnd();
+    },
+    /**
+     * 处理取消选中所有动作
+     * @author  韦胜健
+     * @date    2022/8/16 9:15
+     */
+    handleUncheckALl: () => {
+      const optionPropsList = selector.optionListHandler.getOptionPropsList();
+      if (!!props.handleUncheckAll) {
+        props.handleUncheckAll(optionPropsList);
+      } else {
+        model.value = [];
+      }
+    },
+    /**
+     * 处理反选动作
+     * @author  韦胜健
+     * @date    2022/8/16 9:15
+     */
+    handleCheckReverse: () => {
+      const optionPropsList = selector.optionListHandler.getOptionPropsList();
+      if (!!props.handleCheckReverse) {
+        props.handleCheckReverse(optionPropsList);
+      } else {
+        model.value = optionPropsList.filter(i => !isActivated(i) && !i.disabled).map(i => i.val);
+      }
+      scrollEnd();
+    },
+  };
+
+  /**
+   * 渲染多选输入框
+   * @author  韦胜健
+   * @date    2022/8/16 9:16
+   */
+  effects.push(hooks.renderInput.use(() => {
+
+    /*每次render input的时候解析内容*/
+    selector.optionListHandler.decode();
+    /*显示文本*/
+    const label: string[] = selector.optionListHandler.getMatchLabel(true);
+
+    return selector.reference.renderReference({
+      slotExist: scopeSlots.reference.isExist,
+      slotRender: () => scopeSlots.reference({ checked: selector.optionListHandler.getActivated() }),
+      defaultRender: () => (
+        <Input
+          {...{
+            multiple: true,
+            noClear: props.noClear,
+            class: classes.value,
+            ref: selector.onRef.input,
+            placeholder: props.placeholder,
+            modelValue: label,
+            multipleText: state.multipleText,
+            clearHandler: selector.handler.onInputClear,
+            suffixIcon: props.suffixIcon,
+            size: props.size,
+            customReadonly: props.disableFilter,
+            onUpdateMultipleText: handler.onMultipleTextChange,
+            handleAddTag: handler.handleAddTag,
+            handleRemoveTag: handler.handleRemoveTag,
+            onFocus: selector.handler.onInputFocus,
+            onBlur: selector.handler.onInputBlur,
+            nativeAttrs: { onKeyDown: selector.handler.onInputKeydown },
+            ...props.inputAttrs,
+          }}
+          v-slots={props.inputSlots}
+        />
+      )
+    });
+  }));
+
+  /**
+   * popper关闭的时候清空搜索关键字
+   * @author  韦胜健
+   * @date    2022/8/16 9:17
+   */
+  effects.push(hooks.onPopperClose.use(() => {state.multipleText = null;}));
+
+  /**
+   * input多值输入文本的时候保留这个文本
+   * @author  韦胜健
+   * @date    2022/8/16 9:17
+   */
+  effects.push(hooks.onInputTextChange.use((val) => {state.multipleText = val;}));
+
+  /**
+   * input清空动作
+   * @author  韦胜健
+   * @date    2022/8/16 9:17
+   */
+  effects.push(hooks.onInputClear.use(() => {state.multipleText = null;}));
+
+  return effects.clear;
+}