plain-design 0.0.97 → 1.0.0-beta.10

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

@@ -0,0 +1,405 @@
+import {reactive, RenderNode, useRefs} from "plain-design-composition";
+import {createSelectHover, iSelectCompositionParams, iSelectOptionProps, SelectDefaultVirtualRowSize, SelectUtils} from "./select.utils";
+import {decodeSelectRenderNode} from './decodeSelectRenderNode';
+import {Input} from "../Input";
+import {Scroll} from "../Scroll";
+import {SelectPanel} from "./SelectPanel";
+import {unit} from "plain-utils/string/unit";
+import {SelectOption} from "../SelectOption";
+import {VirtualList} from "../VirtualList";
+import {delay} from "plain-utils/utils/delay";
+import {handleKeyboard} from "../KeyboardService";
+import {useRenderReference} from "../../uses/useRenderReference";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {createPopupEditor} from "../usePopupEditor";
+
+export function createPublicSelectRender(
+  {
+    props,
+    emit,
+    hooks,
+    getPublicPopperAttrs,
+    slots,
+    editComputed,
+    styleComputed,
+  }: iSelectCompositionParams,
+  {
+    isActivated,
+    model,
+    handlePrevWhenNotShow,
+    handleNextWhenNotShow,
+    onSelectOption,
+    alwaysShowOnClickReference,
+    defaultCurrent,
+    multiple,
+    processRenderPanel,
+  }: {
+    /**
+     * 判断选项是否已经选中，用来provide给option组件判断自身是否已经选中
+     * @author  韦胜健
+     * @date    2022.8.1 22:25
+     */
+    isActivated: (optionProps: iSelectOptionProps) => boolean,
+    /**
+     * 非受控组件绑定值
+     * @author  韦胜健
+     * @date    2022/8/23 10:52
+     */
+    model: { value: any },
+    /**
+     * 处理没有打开popper的时候，input中上快捷键的点击动作，单选时直接切换值
+     * @author  韦胜健
+     * @date    2022/8/8 20:53
+     */
+    handlePrevWhenNotShow?: (e: KeyboardEvent) => void,
+    /**
+     * 吹了没有打开popper的时候，input中下快捷键的点击动作，单选时直接切换值
+     * @author  韦胜健
+     * @date    2022/8/8 20:53
+     */
+    handleNextWhenNotShow?: (e: KeyboardEvent) => void,
+    /**
+     * 处理选中某个选项的动作
+     * @author  韦胜健
+     * @date    2022/8/8 20:54
+     */
+    onSelectOption: (optionProps: iSelectOptionProps) => void,
+    /**
+     * 是否再点击reference的时候一直开启popper
+     * @author  韦胜健
+     * @date    2022/8/9 11:14
+     */
+    alwaysShowOnClickReference?: () => boolean,
+    /**
+     * 重置hover current的时候，current的默认值
+     * @author  韦胜健
+     * @date    2022/8/11 17:25
+     */
+    defaultCurrent: number | undefined,
+    /**
+     * 是否为多选
+     * @author  韦胜健
+     * @date    2022/8/12 10:04
+     */
+    multiple?: boolean,
+    /**
+     * 处理panel的render内容
+     * @author  韦胜健
+     * @date    2022/8/16 8:40
+     */
+    processRenderPanel?: (defaultRender: () => RenderNode) => RenderNode,
+  }) {
+  /*记录副作用函数*/
+  const { effects } = createEffects();
+
+  const { refs, onRef } = useRefs({
+    /*用来创建popper的reference对象*/
+    input: Input,
+    /*用来上移下移hover元素的时候滚动到目标位置，如果用的是虚拟列表，则不会有这个对象，暂定虚拟列表不支持滚动*/
+    scroll: Scroll,
+  });
+
+  const reference = useRenderReference();
+
+  const state = reactive({
+    /*给Panel用的搜索关键字，只有在输入change的时候这里才会有值*/
+    searchText: null as any,
+    /*当前是否focus*/
+    isFocus: false,
+    /*当前是否show*/
+    isShow: false,
+  });
+
+  /**
+   * 管理select option的hover状态
+   * @author  韦胜健
+   * @date    2022.7.23 19:49
+   */
+  const hover = createSelectHover({
+    defaultCurrent,
+    refs,
+    scrollHeight: () => props.scrollHeight,
+    getMatchOptionsLength: () => optionListHandler.getMatchOptionPropsList().length
+  });
+
+  const popper = createPopupEditor({
+    option: {
+      alwaysShowOnClickReference,
+      popperAttrs: getPublicPopperAttrs,
+      reference: () => (editComputed.value.disabled || editComputed.value.readonly) ? null : (reference.getReference() || refs.input?.refs.el),
+      // reference: () => refs.input?.refs.el,
+      onShow: () => {
+        state.isShow = true;
+        hooks.onPopperShow.exec(undefined);
+      },
+      onHide: () => {
+        state.isShow = false;
+        hooks.onPopperHide.exec(undefined);
+      },
+      onClose: () => {
+        hooks.onPopperClose.exec(undefined);
+        /*清空搜索关键字*/
+        state.searchText = null;
+        /*重置当前hover*/
+        hover.resetCurrent();
+        /*滚动回最开始的位置*/
+        !!refs.scroll && refs.scroll.methods.scrollTop(0);
+      },
+      popper: () => {
+        const { render, optionPropsList, matchOptionPropsList } = optionListHandler.decode();
+        return (
+          <SelectPanel
+            multiple={multiple}
+            onSelect={onSelectOption}
+            onMouseDown={handler.onMousedownPanel}
+            onEnterOption={hover.onEnterOption}
+            size={styleComputed.value.size}
+            optionAlign={props.optionAlign}
+            searchText={state.searchText}
+            isMatchSearch={props.isMatchSearch}
+            current={hover.state.current}
+            isActivated={isActivated}
+            dataLength={optionPropsList.length}
+            matchLength={matchOptionPropsList.length}
+            noMatchLabel={props.noMatchLabel}
+            noDataLabel={props.noDataLabel}
+            loading={!!editComputed.value.loading}
+          >
+            {(() => {
+              const passSlot: any = {};
+              passSlot.default = () => (processRenderPanel ? processRenderPanel(render) : render());
+              (['noMatch', 'noData', 'loadingContent'] as const).forEach((slotName) => {
+                if (slots[slotName].isExist()) {passSlot[slotName] = slots[slotName];}
+              });
+              return passSlot;
+            })()}
+          </SelectPanel>
+        );
+      },
+    },
+  });
+
+  effects.push(
+    hooks.onTriggerShow.use(() => {popper.methods.show();})
+  );
+
+  effects.push(
+    hooks.onTriggerHide.use(() => {popper.methods.hide();})
+  );
+
+  effects.push(() => popper.methods.dispose());
+
+  /**
+   * 从插槽内容中解析出来option信息
+   * @author  韦胜健
+   * @date    2022.7.23 20:07
+   */
+  const optionListHandler = (() => {
+    const innerState = reactive({ renderKey: '', });
+    /*所有的option的props数组，每次render的时候更新，是一个非响应式的静态数组*/
+    let optionPropsList: iSelectOptionProps[] = [];
+    /*匹配到搜搜关键字的option的props数组，每次render的时候更新，是一个非响应式的静态数组*/
+    let matchOptionPropsList: iSelectOptionProps[] = [];
+
+    function getMatchLabel(): any
+    function getMatchLabel(isMultiple: true): any[]
+    function getMatchLabel(isMultiple?: true): any {
+      if (model.value == null) {return null;}
+      if (!isMultiple) {
+        return optionPropsList.find(isActivated)?.label || model.value;
+      } else {
+        return optionPropsList.filter(isActivated).map(i => i.label || i.val);
+      }
+    }
+
+    function getActivated(): iSelectOptionProps[] {return optionPropsList.filter(isActivated);}
+
+    return {
+      decode: (): {
+        optionPropsList: iSelectOptionProps[],
+        matchOptionPropsList: iSelectOptionProps[],
+        render: (() => RenderNode),
+      } => {
+        if (!!props.virtualData) {
+          /**
+           * 虚拟滚动
+           * @author  韦胜健
+           * @date    2022/7/25 10:53
+           */
+          optionPropsList = [...props.virtualData];
+          matchOptionPropsList = optionPropsList.filter(i => SelectUtils.isMatchSearch(state.searchText, i, props));
+          const render = () => {
+            /*如果显示的选项大于6个，则使用虚拟滚动显示，否则直接显示*/
+            return (matchOptionPropsList.length > props.scrollNum ?
+              (<div style={{ height: unit(props.scrollHeight)! }}>
+                <VirtualList data={matchOptionPropsList} size={(() => {
+                  const { virtualRowSize } = props;
+                  return virtualRowSize == null ? SelectDefaultVirtualRowSize[styleComputed.value.size] : virtualRowSize;
+                })()}>
+                  {{ default: ({ item, index }: { item: iSelectOptionProps, index: number }) => <SelectOption {...item} index={index} key={index}/> }}
+                </VirtualList>
+              </div>) : (
+                matchOptionPropsList.map((i, index) => (<SelectOption {...i} index={index}/>))
+              ));
+          };
+          return { optionPropsList, matchOptionPropsList, render };
+        } else {
+          /**
+           * 非虚拟滚动，从node中解析select option props
+           * @author  韦胜健
+           * @date    2022/7/25 10:54
+           */
+          const ret = decodeSelectRenderNode({
+            renderNode: slots.default(),
+            searchText: state.searchText,
+            props,
+            onRefScroll: onRef.scroll,
+            innerState,
+          });
+          optionPropsList = ret.optionPropsList;
+          matchOptionPropsList = ret.matchOptionPropsList;
+          const currentRenderKey = optionPropsList.map(i => `${i.label}${i.val}`).join('');
+          if (innerState.renderKey !== currentRenderKey) {innerState.renderKey = currentRenderKey;}
+          return ret;
+        }
+      },
+      getOptionPropsList: () => optionPropsList,
+      getMatchOptionPropsList: () => matchOptionPropsList,
+      getMatchLabel,
+      getActivated,
+    };
+  })();
+
+  const methods = {
+    ...(() => {
+      /*如果已经打开，则hover上一个option，(否则选中上一个option, 单选)*/
+      const handlePrev = (e: KeyboardEvent) => {
+        e.preventDefault();
+        if (state.isShow) {
+          /*当前已经打开，则移动panel中的高亮元素，enter或者space的时候再确定选中*/
+          hover.prev();
+        } else {
+          handlePrevWhenNotShow?.(e);
+        }
+      };
+      /*如果已经打开，则hover下一个option，(否则选中下一个option, 单选)*/
+      const handleNext = (e: KeyboardEvent) => {
+        e.preventDefault();
+        if (state.isShow) {
+          /*当前已经打开，则移动panel中的高亮元素，enter或者space的时候再确定选中*/
+          hover.next();
+        } else {
+          handleNextWhenNotShow?.(e);
+        }
+      };
+      return { handlePrev, handleNext };
+    })()
+  };
+
+  const handler = {
+    /**
+     * input中的快捷键
+     * @author  韦胜健
+     * @date    2022/8/8 20:16
+     */
+    onInputKeydown: handleKeyboard({
+      up: methods.handlePrev,
+      down: methods.handleNext,
+      enter: (): void => handler.onInputEnter(),
+      esc: () => popper.methods.hide(),
+      space: (e): void => {
+        e.preventDefault();
+        e.stopPropagation();
+        handler.onInputEnter();
+      },
+    }),
+    /**
+     * 鼠标点下面板的动作，立即让input重新获取焦点
+     * @author  韦胜健
+     * @date    2022/8/8 20:15
+     */
+    onMousedownPanel: () => {delay().then(() => refs.input?.refs.input?.focus());},
+    /**
+     * 记录input focus
+     * @author  韦胜健
+     * @date    2022/8/8 20:16
+     */
+    onInputFocus: (e: FocusEvent) => {
+      state.isFocus = true;
+      emit.onFocus(e);
+    },
+    /**
+     * 记录input focus
+     * @author  韦胜健
+     * @date    2022/8/8 20:16
+     */
+    onInputBlur: (e: FocusEvent) => {
+      state.isFocus = false;
+      emit.onBlur(e);
+    },
+    /**
+     * change的时候应用搜索关键字
+     * @author  韦胜健
+     * @date    2022/8/8 20:16
+     */
+    onInputChange: (val: any) => {
+      if (!!props.handleFilterChange) {
+        props.handleFilterChange(val);
+      } else {
+        if (!props.disableFilter) {
+          hover.resetCurrent();
+          hooks.onInputTextChange.exec(val);
+          /*应用搜索关键字*/
+          state.searchText = val;
+        }
+      }
+      /*没有不打开popper的话就打开popper*/
+      if (!state.isShow) {
+        popper.methods.show();
+      }
+    },
+    /**
+     * input回车动作
+     * @author  韦胜健
+     * @date    2022/8/8 20:16
+     */
+    onInputEnter: () => {
+      /*enter按键的时候，如果已经打开则应用当前hover的值，没有则打开popper*/
+      if (state.isShow) {
+        const matchOptionPropsList = optionListHandler.getMatchOptionPropsList();
+        if (hover.state.current == null || matchOptionPropsList[hover.state.current] == null) {
+          popper.methods.toggle();
+        } else {
+          onSelectOption(matchOptionPropsList[hover.state.current]);
+        }
+      } else {
+        popper.methods.show();
+      }
+    },
+    /**
+     * 清空绑定值
+     * @author  韦胜健
+     * @date    2022.7.23 19:54
+     */
+    onInputClear: () => {
+      model.value = null;
+      state.searchText = null;
+      hooks.onInputClear.exec(undefined);
+    },
+    onSelectOption,
+    isActivated,
+  };
+
+  return {
+    effects,
+    refs,
+    onRef,
+    state,
+    hover,
+    popper,
+    optionListHandler,
+    methods,
+    handler,
+    reference,
+  };
+}

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

@@ -0,0 +1,43 @@
+import {iSelectOptionProps} from "./select.utils";
+import {findReactElement} from "../../utils/findReactElement";
+import {SelectOption} from "../SelectOption";
+import {reactive} from "plain-design-composition";
+
+export interface iSelectOptionDecodeMeta {
+  props: iSelectOptionProps;
+  node: any,
+}
+
+/**
+ * 解析虚拟dom中的SelectOption信息
+ * @author  韦胜健
+ * @date    2022.12.4 11:30
+ */
+export function createSelectOptionDecoder() {
+  const state = reactive({ renderKey: '@@renderKey' });
+  const staticState = { renderCount: 0 };
+
+  const options: iSelectOptionDecodeMeta[] = [];
+  const decode = (renderNode: any) => {
+    const optionNodes: any[] = findReactElement(renderNode, (node: any) => node?.type?.use?.name === SelectOption.use.name) || [];
+    options.splice(0, options.length);
+    options.push(...optionNodes.map(node => ({
+      props: node.props,
+      node,
+    })));
+    if (!staticState.renderCount) {
+      /*第一次render的时候不更新state.renderKey*/
+      staticState.renderCount++;
+    } else {
+      const newRenderKey = options.map(i => `${i.props.label}_${i.props.val}`).join(',');
+      // console.log({ newRenderKey, renderKey: state.renderKey, });
+      if (state.renderKey !== newRenderKey) {state.renderKey = newRenderKey;}
+    }
+  };
+
+  const isRender = () => {return !!state.renderKey;};
+
+  return { options, decode, isRender };
+}
+
+export type iSelectOptionDecoder = ReturnType<typeof createSelectOptionDecoder>

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

@@ -0,0 +1,129 @@
+import {iSelectCompositionParams} from "./select.utils";
+import {Input} from "../Input";
+import {createPublicSelectRender} from "./createPublicSelectRender";
+import {reactive, useModel} from "plain-design-composition";
+import {delay} from "plain-utils/utils/delay";
+
+/**
+ * 单选组合函数，支持普通单选以及虚拟列表的方式
+ * @author  韦胜健
+ * @date    2022/8/8 20:06
+ */
+export function createSingleSelectRender(params: iSelectCompositionParams) {
+
+  const { props, hooks, editComputed, scopeSlots, classes, isMatch } = params;
+
+  const state = reactive({
+    /*input输入绑定值*/
+    inputValue: null as null | string
+  });
+
+  const model = useModel(() => props.modelValue, params.emit.onUpdateModelValue, {
+    onChange: async () => {
+      await delay();
+      state.inputValue = selector.optionListHandler.getMatchLabel();
+    }
+  });
+
+  const selector = createPublicSelectRender(params, {
+    isActivated: props => isMatch({ option: props.val, value: model.value }),
+    model,
+    ...(() => {
+      /**
+       * 处理选中上一个值或者下一个值得时候的一些公共逻辑
+       * @author  韦胜健
+       * @date    2022.7.23 20:08
+       */
+      const handlePublic = (e: KeyboardEvent, getValueIndex: (index: number, length: number) => number) => {
+        if (!model.value) {
+          /*如果当前没有值，则直接设置为第一个值*/
+          model.value = selector.optionListHandler.getOptionPropsList()[0]?.val;
+        } else {
+          const optionPropsList = selector.optionListHandler.getOptionPropsList();
+          let index = optionPropsList.findIndex(i => i.val === model.value);
+          model.value = optionPropsList[getValueIndex(index, optionPropsList.length)]?.val;
+          state.inputValue = selector.optionListHandler.getMatchLabel();
+        }
+      };
+      return {
+        /*否则直接切换选中值*/
+        handlePrevWhenNotShow: (e: KeyboardEvent) => {handlePublic(e, (index, length) => index === 0 ? length - 1 : (index - 1));},
+        /*否则直接切换选中值*/
+        handleNextWhenNotShow: (e: KeyboardEvent) => {handlePublic(e, (index, length) => index === length - 1 ? 0 : index + 1);},
+      };
+    })(),
+    /**
+     * 选中某个选项的处理动作
+     * @author  韦胜健
+     * @date    2022/8/8 20:15
+     */
+    onSelectOption: (optionProps) => {
+      if (optionProps.disabled || !editComputed.value.editable) {return;}
+      /*应用绑定值*/
+      model.value = optionProps.val;
+      /*立即应用 inputValue，等close的时候再应用有点慢了*/
+      state.inputValue = selector.optionListHandler.getMatchLabel();
+      /*关闭 popper*/
+      selector.popper.methods.hide();
+    },
+    defaultCurrent: undefined,
+  });
+
+  selector.effects.push(hooks.renderInput.use(() => {
+
+    selector.optionListHandler.decode();
+    /*显示文本*/
+    const label: string = selector.optionListHandler.getMatchLabel();
+    /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
+    const placeholder = (selector.state.isFocus ? label : props.placeholder) || props.placeholder;
+    /*input绑定值，focus的时候显示具体绑定值，没有focus的时候显示匹配option的label*/
+    const inputValue = selector.state.isFocus && !props.disableFilter ? state.inputValue : label;
+
+    return selector.reference.renderReference({
+      slotExist: scopeSlots.reference.isExist,
+      slotRender: () => scopeSlots.reference({ checked: selector.optionListHandler.getActivated()[0] }),
+      defaultRender: () => (
+        <Input
+          {...{
+            noClear: props.noClear,
+            class: classes.value,
+            ref: selector.onRef.input,
+            customReadonly: props.disableFilter,
+            placeholder: placeholder,
+            modelValue: inputValue,
+            clearHandler: selector.handler.onInputClear,
+            suffixIcon: props.suffixIcon,
+            size: props.size,
+            onChange: selector.handler.onInputChange,
+            onFocus: selector.handler.onInputFocus,
+            onBlur: selector.handler.onInputBlur,
+            onKeydown: selector.handler.onInputKeydown,
+            ...props.inputAttrs,
+          }}
+          v-slots={props.inputSlots}
+        />
+      )
+    });
+  }));
+
+  selector.effects.push(hooks.onPopperClose.use(() => {
+    /*重置input绑定值，防止输入一半取消选择时显示不正确的文本*/
+    state.inputValue = selector.optionListHandler.getMatchLabel();
+  }));
+
+  selector.effects.push(hooks.onPopperShow.use(() => {
+    state.inputValue = null;
+  }));
+
+  selector.effects.push(hooks.onInputTextChange.use((val) => {
+    /*应用绑定值*/
+    state.inputValue = val;
+  }));
+
+  selector.effects.push(hooks.onInputClear.use(() => {
+    /*点击clear的时候，应用输入绑定值*/
+    state.inputValue = null;
+  }));
+
+  return () => selector.effects.clear();
+}

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

@@ -0,0 +1,50 @@
+import {RenderNode} from "plain-design-composition";
+import {unit} from "plain-utils/string/unit";
+import {Scroll} from "../Scroll";
+import {iIsMatchSearch, SelectUtils} from "./select.utils";
+import {createSelectOptionDecoder} from "./createSelectOptionDecoder";
+import {deepCloneRenderNode} from "../../utils/deepCloneRenderNode";
+
+export function decodeSelectRenderNode(
+  {
+    renderNode,
+    searchText,
+    props,
+    onRefScroll,
+    innerState,
+  }: {
+    renderNode: RenderNode,
+    searchText: string,
+    props: {
+      isMatchSearch?: iIsMatchSearch,
+      disableAutoSetOptionIndex?: boolean,
+      scrollNum: number,
+      scrollHeight: number,
+    },
+    onRefScroll: (scroll: any) => void,
+    innerState?: { renderKey: string }
+  }) {
+  const selectOptionDecoder = createSelectOptionDecoder();
+  renderNode = deepCloneRenderNode(renderNode);
+  selectOptionDecoder.decode(renderNode);
+  let optionPropsList = [...selectOptionDecoder.options.map(i => i.props)];
+  let matchOptionPropsList = optionPropsList.filter(i => SelectUtils.isMatchSearch(searchText, i, props));
+  const render = () => {
+    if (!!innerState && !innerState.renderKey) {return null;}
+    let count = 0;
+    /*设置optionProps.index，以便于option能够知道自己的index位置，方便移动hover的选项*/
+    /*当开发者给SelectOption包装了几层组件之后，自动设置index会出现异常，此时需要开发者手动给option设置index*/
+    if (!props.disableAutoSetOptionIndex) {
+      optionPropsList.forEach(optionProps => {optionProps.index = undefined;});
+      matchOptionPropsList.forEach((optionProps) => {optionProps.index = count++;});
+    }
+    /*如果显示的选项大于6个，则使用Scroll滚动显示，否则直接显示*/
+    return (matchOptionPropsList.length > props.scrollNum ?
+      (<div style={{ height: unit(props.scrollHeight)! }}>
+        <Scroll ref={onRefScroll}>
+          {renderNode}
+        </Scroll>
+      </div>) : renderNode);
+  };
+  return { optionPropsList, matchOptionPropsList, render };
+}