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

package/src/packages/components/Input/useSuggestionInput.tsx

@@ -1,218 +1,218 @@
-import {iInputCompositionData, inputScrollEnd} from "./input.utils";
-import {createEffectsOfReaction, iKeyboardEvent, reactive, useRefs} from "@peryl/react-compose";
-import {SelectPanel} from "../Select/SelectPanel";
-import {SelectOption} from "../SelectOption";
-import {Scroll} from "../Scroll";
-import {createSelectHover, iSelectOptionProps} from "../Select/select.utils";
-import {decodeSelectRenderNode} from '../Select/decodeSelectRenderNode';
-import {delay} from '@peryl/utils/delay';
-import {handleKeyboard} from "@peryl/utils/keyboard";
-import {createPopupEditor} from "../usePopupEditor";
-
-export function useSuggestionInput({ props, hooks, editComputed, styleComputed, refs, model, parentPopupId }: iInputCompositionData) {
-
-  /*记录副作用函数*/
-  const { effects, effectComputed } = createEffectsOfReaction();
-
-  const { refs: innerRefs, onRef: innerOnRef } = useRefs({
-    /*需要scroll引用，当有scroll的时候，每次关闭都需要滚动回顶部*/
-    scroll: Scroll,
-  }, { effects });
-
-  const state = reactive({
-    searchText: null as any,          // 搜索关键字
-    isShow: false,                    // 当前是否显示
-    watchData: 0,                     // 给popper传递的watchData数据，当修改这个值的时候令popper更新定位
-  });
-
-  /*保留matchOptionPropsList，hover需要用到这个数组的长度*/
-  let matchOptionPropsList: iSelectOptionProps[] = [];
-
-  /*自动补全的数据*/
-  const suggestion = effectComputed((): string[] | undefined => typeof props.suggestion === "function" ? props.suggestion(state.searchText) : props.suggestion!);
-
-  /*管理select panel的hover状态*/
-  const hover = createSelectHover({
-    defaultCurrent: undefined,
-    scrollHeight: () => 150,
-    refs: innerRefs,
-    getMatchOptionsLength: () => matchOptionPropsList.length,
-  });
-
-  const handler = {
-    onSelectOption: (optionProps: iSelectOptionProps) => {
-
-      if (!optionProps.label) {return;}
-
-      hooks.onSuggestion.exec({ val: optionProps.label, optionProps });
-      if (props.textarea) {
-        /*如果是多行文本，则将选中的推荐文本拼接到已有绑定文本的末尾*/
-        if (model.value == null || !model.value.trim()) {
-          model.value = optionProps.label;
-        } else {
-          model.value = model.value + '，' + optionProps.label;
-        }
-      } else if (props.multiple) {
-        /*如果是多值输入，则将选中的推荐文本添加到绑定文本数组中*/
-        model.value = [...model.value || [], optionProps.label];
-        delay(23).then(() => inputScrollEnd(() => refs.el));
-      } else {
-        /*如果是普通文本，则将选中的推荐文本更新绑定值*/
-        model.value = optionProps.label;
-      }
-
-      if (props.multiple || props.textarea) {
-        /*值变化之后刷新popper的定位*/
-        delay().then(() => {state.watchData++;});
-      } else {
-        /*如果不是多行文本或者多值输入，则关闭popper*/
-        popper.methods.hide();
-      }
-
-    },
-    onMousedownPanel: () => {delay().then(() => refs.input?.focus());},
-    onInputKeydown: handleKeyboard<iKeyboardEvent | KeyboardEvent>({
-      up: (e) => {
-        e.preventDefault();
-        if (!state.isShow) {return;}
-        hover.prev();
-      },
-      down: (e) => {
-        e.preventDefault();
-        if (!state.isShow) {return;}
-        hover.next();
-      },
-      enter: (e): void => {
-        if (state.isShow) {
-          e.preventDefault();
-          const i = hover.state.current == null ? null : matchOptionPropsList?.[hover.state.current];
-          !!i && handler.onSelectOption(i);
-        } else {
-          if (!props.suggestionDisabledOpenOnEnter) {
-            popper.methods.show();
-          }
-        }
-      },
-      esc: () => popper.methods.hide(),
-      space: (e): void => {
-        e.preventDefault();
-        e.stopPropagation();
-        const i = hover.state.current == null ? null : matchOptionPropsList?.[hover.state.current];
-        !!i && handler.onSelectOption(i);
-      },
-    }),
-  };
-
-  const popper = createPopupEditor({
-    option: {
-      alwaysShowOnClickReference: () => false,
-      popperAttrs: () => ({
-        offset: 2,
-        noArrow: true,
-        sizeEqual: true,
-        noPadding: true,
-        watchData: state.watchData,
-        externalClass: "select-popper",
-        popperSize: styleComputed.value.size,
-        parentId: parentPopupId,
-      }),
-      reference: () => !editComputed.value.editable ? null : refs.el,
-      onShow: () => {state.isShow = true;},
-      onHide: () => {state.isShow = false;},
-      onClose: () => {
-        /*清空搜索关键字*/
-        state.searchText = null;
-        /*重置当前hover*/
-        hover.resetCurrent();
-        /*滚动回最开始的位置*/
-        !!innerRefs.scroll && innerRefs.scroll.methods.scrollTop(0);
-      },
-      popper: () => {
-
-        const searchText = props.suggestionIgnoreSearchText ? undefined : state.searchText;
-
-        const { optionPropsList, matchOptionPropsList: _matchOptionPropsList, render } = decodeSelectRenderNode({
-          renderNode: suggestion.value?.map(val => (<SelectOption label={val} val={val} key={val}/>)),
-          searchText,
-          props: {
-            scrollNum: 6,
-            scrollHeight: 200,
-          },
-          onRefScroll: innerOnRef.scroll,
-          scrollHeight: { value: 200 }
-        });
-        matchOptionPropsList = _matchOptionPropsList;
-        return (
-          <SelectPanel
-            onSelect={handler.onSelectOption}
-            onMouseDown={handler.onMousedownPanel}
-            onEnterOption={hover.onEnterOption}
-            size={props.size}
-            searchText={searchText}
-            current={hover.state.current}
-            dataLength={optionPropsList.length}
-            matchLength={matchOptionPropsList.length}
-            loading={!!editComputed.value.loading}
-          >
-            {render()}
-          </SelectPanel>
-        );
-      },
-    },
-  });
-
-  /*当输入文本的时候，更新搜索关键字*/
-  effects.push(hooks.onInput.use((val) => {
-    /*如果是多行文本，并且没有固定高度，或者；是多值输入，但是显示值换行显示。则在输入的时候每次都刷新popper的定位*/
-    if ((!!props.textarea && !props.height) || (!!props.multiple && !!props.tagsWrap)) {
-      delay().then(() => {state.watchData++;});
-    }
-    /*如果不是多行文本，则令搜索关键字为输入的文本*/
-    if (props.textarea) {return;}
-
-    state.searchText = val?.trim();
-    hover.resetCurrent();
-
-    if (!!props.suggestion?.length) {
-      popper.methods.show();
-    }
-  }));
-
-  effects.push(() => popper.methods.dispose());
-
-  effects.push((() => {
-    let inputEl: HTMLInputElement | null = null;
-    return hooks.onRefInput.use((el) => {
-      if (inputEl === el) {return;}
-      if (!!inputEl) {inputEl.removeEventListener('keydown', handler.onInputKeydown);}
-      inputEl = el;
-      // console.log('ref input');
-      inputEl?.addEventListener('keydown', handler.onInputKeydown);
-    });
-  })());
-
-  effects.push(hooks.onTagChange.use(() => {
-    state.searchText = null;
-    hover.resetCurrent();
-  }));
-
-  effects.push(
-    hooks.onTriggerOpenSuggestion.use(() => {
-      popper.methods.show();
-    })
-  );
-  effects.push(
-    hooks.onTriggerCloseSuggestion.use(() => {
-      popper.methods.hide();
-    })
-  );
-  effects.push(
-    hooks.onGetSuggestionIsShow.use(() => {
-      return popper.methods.isShow();
-    })
-  );
-
-  effects.push(() => {popper.methods.dispose();});
-
-  return effects.clear;
-}
+import {iInputCompositionData, inputScrollEnd} from "./input.utils";
+import {createEffectsOfReaction, iKeyboardEvent, reactive, useRefs} from "@peryl/react-compose";
+import {SelectPanel} from "../Select/SelectPanel";
+import {SelectOption} from "../SelectOption";
+import {Scroll} from "../Scroll";
+import {createSelectHover, iSelectOptionProps} from "../Select/select.utils";
+import {decodeSelectRenderNode} from '../Select/decodeSelectRenderNode';
+import {delay} from '@peryl/utils/delay';
+import {handleKeyboard} from "@peryl/utils/keyboard";
+import {createPopupEditor} from "../usePopupEditor";
+
+export function useSuggestionInput({ props, hooks, editComputed, styleComputed, refs, model, parentPopupId }: iInputCompositionData) {
+
+  /*记录副作用函数*/
+  const { effects, effectComputed } = createEffectsOfReaction();
+
+  const { refs: innerRefs, onRef: innerOnRef } = useRefs({
+    /*需要scroll引用，当有scroll的时候，每次关闭都需要滚动回顶部*/
+    scroll: Scroll,
+  }, { effects });
+
+  const state = reactive({
+    searchText: null as any,          // 搜索关键字
+    isShow: false,                    // 当前是否显示
+    watchData: 0,                     // 给popper传递的watchData数据，当修改这个值的时候令popper更新定位
+  });
+
+  /*保留matchOptionPropsList，hover需要用到这个数组的长度*/
+  let matchOptionPropsList: iSelectOptionProps[] = [];
+
+  /*自动补全的数据*/
+  const suggestion = effectComputed((): string[] | undefined => typeof props.suggestion === "function" ? props.suggestion(state.searchText) : props.suggestion!);
+
+  /*管理select panel的hover状态*/
+  const hover = createSelectHover({
+    defaultCurrent: undefined,
+    scrollHeight: () => 150,
+    refs: innerRefs,
+    getMatchOptionsLength: () => matchOptionPropsList.length,
+  });
+
+  const handler = {
+    onSelectOption: (optionProps: iSelectOptionProps) => {
+
+      if (!optionProps.label) {return;}
+
+      hooks.onSuggestion.exec({ val: optionProps.label, optionProps });
+      if (props.textarea) {
+        /*如果是多行文本，则将选中的推荐文本拼接到已有绑定文本的末尾*/
+        if (model.value == null || !model.value.trim()) {
+          model.value = optionProps.label;
+        } else {
+          model.value = model.value + '，' + optionProps.label;
+        }
+      } else if (props.multiple) {
+        /*如果是多值输入，则将选中的推荐文本添加到绑定文本数组中*/
+        model.value = [...model.value || [], optionProps.label];
+        delay(23).then(() => inputScrollEnd(() => refs.el));
+      } else {
+        /*如果是普通文本，则将选中的推荐文本更新绑定值*/
+        model.value = optionProps.label;
+      }
+
+      if (props.multiple || props.textarea) {
+        /*值变化之后刷新popper的定位*/
+        delay().then(() => {state.watchData++;});
+      } else {
+        /*如果不是多行文本或者多值输入，则关闭popper*/
+        popper.methods.hide();
+      }
+
+    },
+    onMousedownPanel: () => {delay().then(() => refs.input?.focus());},
+    onInputKeydown: handleKeyboard<iKeyboardEvent | KeyboardEvent>({
+      up: (e) => {
+        e.preventDefault();
+        if (!state.isShow) {return;}
+        hover.prev();
+      },
+      down: (e) => {
+        e.preventDefault();
+        if (!state.isShow) {return;}
+        hover.next();
+      },
+      enter: (e): void => {
+        if (state.isShow) {
+          e.preventDefault();
+          const i = hover.state.current == null ? null : matchOptionPropsList?.[hover.state.current];
+          !!i && handler.onSelectOption(i);
+        } else {
+          if (!props.suggestionDisabledOpenOnEnter) {
+            popper.methods.show();
+          }
+        }
+      },
+      esc: () => popper.methods.hide(),
+      space: (e): void => {
+        e.preventDefault();
+        e.stopPropagation();
+        const i = hover.state.current == null ? null : matchOptionPropsList?.[hover.state.current];
+        !!i && handler.onSelectOption(i);
+      },
+    }),
+  };
+
+  const popper = createPopupEditor({
+    option: {
+      alwaysShowOnClickReference: () => false,
+      popperAttrs: () => ({
+        offset: 2,
+        noArrow: true,
+        sizeEqual: true,
+        noPadding: true,
+        watchData: state.watchData,
+        externalClass: "select-popper",
+        popperSize: styleComputed.value.size,
+        parentId: parentPopupId,
+      }),
+      reference: () => !editComputed.value.editable ? null : refs.el,
+      onShow: () => {state.isShow = true;},
+      onHide: () => {state.isShow = false;},
+      onClose: () => {
+        /*清空搜索关键字*/
+        state.searchText = null;
+        /*重置当前hover*/
+        hover.resetCurrent();
+        /*滚动回最开始的位置*/
+        !!innerRefs.scroll && innerRefs.scroll.methods.scrollTop(0);
+      },
+      popper: () => {
+
+        const searchText = props.suggestionIgnoreSearchText ? undefined : state.searchText;
+
+        const { optionPropsList, matchOptionPropsList: _matchOptionPropsList, render } = decodeSelectRenderNode({
+          renderNode: suggestion.value?.map(val => (<SelectOption label={val} val={val} key={val}/>)),
+          searchText,
+          props: {
+            scrollNum: 6,
+            scrollHeight: 200,
+          },
+          onRefScroll: innerOnRef.scroll,
+          scrollHeight: { value: 200 }
+        });
+        matchOptionPropsList = _matchOptionPropsList;
+        return (
+          <SelectPanel
+            onSelect={handler.onSelectOption}
+            onMouseDown={handler.onMousedownPanel}
+            onEnterOption={hover.onEnterOption}
+            size={props.size}
+            searchText={searchText}
+            current={hover.state.current}
+            dataLength={optionPropsList.length}
+            matchLength={matchOptionPropsList.length}
+            loading={!!editComputed.value.loading}
+          >
+            {render()}
+          </SelectPanel>
+        );
+      },
+    },
+  });
+
+  /*当输入文本的时候，更新搜索关键字*/
+  effects.push(hooks.onInput.use((val) => {
+    /*如果是多行文本，并且没有固定高度，或者；是多值输入，但是显示值换行显示。则在输入的时候每次都刷新popper的定位*/
+    if ((!!props.textarea && !props.height) || (!!props.multiple && !!props.tagsWrap)) {
+      delay().then(() => {state.watchData++;});
+    }
+    /*如果不是多行文本，则令搜索关键字为输入的文本*/
+    if (props.textarea) {return;}
+
+    state.searchText = val?.trim();
+    hover.resetCurrent();
+
+    if (!!props.suggestion?.length) {
+      popper.methods.show();
+    }
+  }));
+
+  effects.push(() => popper.methods.dispose());
+
+  effects.push((() => {
+    let inputEl: HTMLInputElement | null = null;
+    return hooks.onRefInput.use((el) => {
+      if (inputEl === el) {return;}
+      if (!!inputEl) {inputEl.removeEventListener('keydown', handler.onInputKeydown);}
+      inputEl = el;
+      // console.log('ref input');
+      inputEl?.addEventListener('keydown', handler.onInputKeydown);
+    });
+  })());
+
+  effects.push(hooks.onTagChange.use(() => {
+    state.searchText = null;
+    hover.resetCurrent();
+  }));
+
+  effects.push(
+    hooks.onTriggerOpenSuggestion.use(() => {
+      popper.methods.show();
+    })
+  );
+  effects.push(
+    hooks.onTriggerCloseSuggestion.use(() => {
+      popper.methods.hide();
+    })
+  );
+  effects.push(
+    hooks.onGetSuggestionIsShow.use(() => {
+      return popper.methods.isShow();
+    })
+  );
+
+  effects.push(() => {popper.methods.dispose();});
+
+  return effects.clear;
+}