plain-design 0.0.97 → 1.0.0-beta.2

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

@@ -0,0 +1,218 @@
+import {iInputCompositionData, inputScrollEnd} from "./input.utils";
+import {computed, reactive, useRefs} from "plain-design-composition";
+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 'plain-utils/utils/delay';
+import {handleKeyboard} from "../KeyboardService";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {createPopupEditor} from "../usePopupEditor";
+
+export function useSuggestionInput({ props, hooks, editComputed, styleComputed, refs, model, parentPopupId }: iInputCompositionData) {
+
+  /*记录副作用函数*/
+  const { effects } = createEffects();
+
+  const { refs: innerRefs, onRef: innerOnRef } = useRefs({
+    /*需要scroll引用，当有scroll的时候，每次关闭都需要滚动回顶部*/
+    scroll: Scroll,
+  });
+
+  const state = reactive({
+    searchText: null as any,          // 搜索关键字
+    isShow: false,                    // 当前是否显示
+    watchData: 0,                     // 给popper传递的watchData数据，当修改这个值的时候令popper更新定位
+  });
+
+  /*保留matchOptionPropsList，hover需要用到这个数组的长度*/
+  let matchOptionPropsList: iSelectOptionProps[] = [];
+
+  /*自动补全的数据*/
+  const suggestion = computed((): 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({
+      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: 150,
+          },
+          onRefScroll: innerOnRef.scroll,
+        });
+        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;
+}

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

@@ -0,0 +1,147 @@
+import {iInputCompositionData} from "./input.utils";
+import {iKeyboardEvent, reactive, useClasses, useStyles} from "plain-design-composition";
+import {unit} from "plain-utils/string/unit";
+import {createEffects} from "plain-utils/utils/createEffects";
+
+export function useTextareaInput(data: iInputCompositionData) {
+
+  const { props, hooks, model, editComputed } = data;
+
+  const state = reactive({ height: null as null | number });
+
+  const { effects } = createEffects();
+
+  const handler = {
+    onRef: (el: any) => hooks.onRefInput.exec(el),
+    onInput: (e: any) => {
+      const val = e.target.value as string;
+      if (!!props.maxLength && val.length > props.maxLength) {
+        e.target.value = model.value;
+        return;
+      }
+      model.value = val;
+      hooks.onInput.exec(model.value);
+    },
+    onKeydown: (e: iKeyboardEvent) => hooks.onInputKeydown.exec(e),
+  };
+
+  effects.push(hooks.onClasses.use(prev => [
+    ...prev || [],
+    { 'input-textarea': true, }
+  ]));
+
+  const classes = useClasses(() => [
+    'input-box input-fill input-textarea-container',
+    {
+      'input-textarea-has-height': !!state.height || !!props.height || !!props.maxHeight,
+    }
+  ]);
+
+  const takeoverStyles = useStyles(style => {
+    if (!!props.height || !!state.height) {
+      style.height = unit(props.height || state.height);
+    }
+    if (!!props.minHeight) {
+      style.minHeight = unit(props.minHeight);
+    }
+    if (!!props.maxHeight) {
+      style.maxHeight = unit(props.maxHeight);
+    }
+  });
+
+  effects.push(useTextareaResize({ ...data, onResize: (val) => state.height = val }));
+
+  effects.push(hooks.onRenderDefault.use(() => (
+    <span className={classes.value}>
+      <span style={takeoverStyles.value}>
+        {(model.value?.split('\n') as string[] | undefined)?.map((item, index) => (
+          <div key={index}>
+            {item}
+          </div>
+        ))}
+        {!model.value && <>&nbsp;</>}
+      </span>
+      <textarea
+        ref={handler.onRef}
+        value={model.value}
+        onInput={handler.onInput}
+        onKeyDown={handler.onKeydown}
+        placeholder={editComputed.value.placeholder!}
+        disabled={!!editComputed.value.disabled}
+        readOnly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
+        {...props.nativeAttrs}
+      />
+    </span>
+  )));
+
+  return effects.clear;
+}
+
+function useTextareaResize({ hooks, onResize }: iInputCompositionData & { onResize: (height: number) => void }) {
+
+  const { effects } = createEffects();
+
+  const staticState = {
+    isDragging: false,
+    start: {
+      height: 0,
+      y: 0,
+    },
+    move: {
+      y: 0,
+    }
+  };
+
+  const handler = {
+    textarea: null as null | HTMLInputElement,
+    mousedown: (e: MouseEvent) => {
+      const { offsetX, offsetY, clientY, target: { offsetWidth, offsetHeight } } = e as any;
+      if (!(offsetWidth - offsetX < 12 && offsetHeight - offsetY < 12)) {
+        return;
+      }
+      staticState.isDragging = false;
+      staticState.start = {
+        height: offsetHeight,
+        y: clientY,
+      };
+      document.documentElement.addEventListener('mousemove', handler.mousemove);
+      document.documentElement.addEventListener('mouseup', handler.mouseup);
+    },
+    mousemove: (e: MouseEvent) => {
+      const { clientY } = e;
+      staticState.move = { y: clientY };
+      const durY = staticState.move.y - staticState.start.y;
+      if (!staticState.isDragging) {
+        if (Math.abs(durY) > 5) {
+          staticState.isDragging = true;
+        }
+      }
+      if (!staticState.isDragging) {
+        return;
+      }
+      const newHeight = staticState.start.height + durY;
+      onResize(newHeight);
+    },
+    mouseup: () => {
+      document.documentElement.removeEventListener('mousemove', handler.mousemove);
+      document.documentElement.removeEventListener('mouseup', handler.mouseup);
+    },
+  };
+
+  effects.push(hooks.onRefInput.use(input => {
+    if (!!handler.textarea) {
+      handler.textarea.removeEventListener('mousedown', handler.mousedown);
+    }
+    handler.textarea = input;
+    if (!handler.textarea) {return;}
+    handler.textarea.addEventListener('mousedown', handler.mousedown);
+  }));
+
+  effects.push(() => {
+    if (!!handler.textarea) {
+      handler.textarea.removeEventListener('mousedown', handler.mousedown);
+    }
+  });
+
+  return effects.clear;
+}

package/src/packages/components/Input/uses/useInputEnterHandler.tsx

@@ -0,0 +1,72 @@
+import {reactive, watch} from "plain-design-composition";
+import {doNothing} from "../../../utils/doNothing";
+import {throttle} from "plain-utils/utils/throttle";
+import {iInputCompositionData} from "../input.utils";
+import {getKey, KEY} from "../../KeyboardService";
+
+/**
+ * 自动监听input ref动作
+ * 监听input的按键事件
+ * 支持设置input enter按键事件节流
+ * 自动派发enter，esc以及其他keyboard按键事件
+ * @author  韦胜健
+ * @date    2022.5.21 0:51
+ */
+export function useInputEnterHandler(
+  {
+    editComputed,
+    editState,
+    props,
+    emit,
+    hooks,
+  }: iInputCompositionData) {
+
+  const innerHandler = async (e: KeyboardEvent) => {
+    if (editComputed.value.editable) {
+      if (!!props.asyncHandler) {
+        editState.loading = true;
+        try {
+          await props.asyncHandler();
+        } catch (e) {
+          console.error(e);
+        } finally {
+          editState.loading = null;
+        }
+      } else {
+        emit.onEnter(e);
+      }
+    }
+  };
+
+  const enterHandler = reactive({ value: doNothing, });
+
+  watch(() => props.throttleEnter, (val) => {
+    if (!val) {
+      enterHandler.value = innerHandler;
+    }
+    if (val === true) {
+      val = 1000;
+    }
+    enterHandler.value = throttle(innerHandler, val as number, { trailing: true });
+  }, { immediate: true });
+
+  const handler = {
+    input: null as null | HTMLInputElement,
+    onKeydown: (e: KeyboardEvent) => {
+      emit.onKeydown(e);
+      switch (getKey(e)) {
+        case KEY.enter:
+          return enterHandler.value(e);
+        case KEY.esc:
+          return emit.onEsc(e);
+      }
+    },
+  };
+
+  hooks.onRefInput.use(input => {
+    if (!!input) {input.removeEventListener('keydown', handler.onKeydown);}
+    handler.input = input;
+    if (!handler.input) {return;}
+    handler.input.addEventListener('keydown', handler.onKeydown);
+  });
+}

package/src/packages/components/Input/uses/useInputHooks.tsx

@@ -0,0 +1,21 @@
+import {createHooks, createSyncHooks, iKeyboardEvent, RenderNode} from 'plain-design-composition';
+import {iSelectOptionProps} from "../../Select/select.utils";
+
+export function useInputHooks() {
+  return {
+    onRenderDefault: createSyncHooks<(content: RenderNode) => void>(),              // 渲染默认插槽
+    onRenderSuffix: createSyncHooks<(content: RenderNode) => void>(),               // 渲染suffix插槽
+    onRefInput: createHooks<(el: HTMLInputElement | null) => void>(),               // input dom对象引用
+    onRefWrapper: createHooks<(el: HTMLElement | null) => void>(),                  // 容器节点dom对象引用
+    onInputKeydown: createHooks<(e: iKeyboardEvent) => void>(),                   // input触发按键事件
+    onInput: createHooks<(val: any) => void>(),                                     // input的输入动作
+    onClasses: createSyncHooks<(val: any[]) => void>(),                             // 计算根节点classes
+    onSuggestion: createHooks<(data: { val: string, optionProps: iSelectOptionProps }) => void>(),// 点击了某个推荐选项
+    onTagChange: createHooks<() => void>(),                                         // 多值输入的时候的变化动作
+    onTriggerOpenSuggestion: createHooks<() => void>(),                             // 触发打开suggestion的动作
+    onTriggerCloseSuggestion: createHooks<() => void>(),                            // 触发打开suggestion的动作
+    onGetSuggestionIsShow: createSyncHooks<(flag: boolean) => void>(),              // suggestion 面板是否已经打开
+  };
+}
+
+export type tInputHooks = ReturnType<typeof useInputHooks>

package/src/packages/components/Input/uses/useInputMaxLength.tsx

@@ -0,0 +1,35 @@
+import {iInputCompositionData, showInputError} from "../input.utils";
+import {computed, watch} from "plain-design-composition";
+
+/**
+ * 渲染最大文本长度提示suffix
+ * @author  韦胜健
+ * @date    2022.5.22 10:03
+ */
+export function useInputMaxLength({ hooks, props, model }: iInputCompositionData) {
+
+  watch(() => props.maxLength, () => {
+    showInputError('You should modify the key props of the Input to reinitialize it. Changing props [maxLength] are not supported');
+  });
+  watch(() => props.noMaxLengthSuffix, () => {
+    showInputError('You should modify the key props of the Input to reinitialize it. Changing props [noMaxLengthSuffix] are not supported');
+  });
+
+  if (!props.maxLength || !!props.noMaxLengthSuffix) {
+    return;
+  }
+
+  const currentLength = computed(() => {
+    if (model.value == null) {return 0;}
+    if (typeof model.value === "number") {return String(model.value).length;}
+    return model.value.length;
+  });
+
+  hooks.onRenderSuffix.use(prev => <>
+    <span className="input-suffix-max-length">
+      {currentLength.value}/{props.maxLength}
+    </span>
+    {prev}
+  </>);
+
+}

package/src/packages/components/Input/uses/useInputSuffixIcon.tsx

@@ -0,0 +1,63 @@
+import {iInputCompositionData} from "../input.utils";
+import {computed, iMouseEvent} from "plain-design-composition";
+import Icon from "../../Icon";
+import Loading from "../../Loading";
+import {delay} from "plain-utils/utils/delay";
+
+export function useInputSuffixIcon({ slots, hooks, props, editComputed, model, emit, methods, isEmpty }: iInputCompositionData) {
+
+  const hasSuffixClear = computed(() => !props.textarea && !props.noClear && (!editComputed.value.disabled && !editComputed.value.readonly));
+  const hasSuffixIcon = computed(() => !props.textarea && (slots.suffixIconContent.isExist() || !!props.suffixIcon));
+
+  const handler = {
+    /**
+     * 点击后缀图标
+     * @author  韦胜健
+     * @date    2022.5.18 8:31
+     */
+    onMousedownSuffixIcon: async (e: iMouseEvent) => {emit.onClickSuffixIcon(e);},
+    /**
+     * 点击清空按钮
+     * @author  韦胜健
+     * @date    2022.5.18 8:31
+     */
+    onMousedownClearIcon: async (e: iMouseEvent) => {
+      if (!editComputed.value.editable) {return;}
+      if (!!props.clearHandler) {
+        await props.clearHandler(e);
+      } else {
+        model.value = null;
+        emit.onClear(e);
+      }
+    },
+    onMousedownSuffix: async (e: iMouseEvent) => {
+      if (!props.disabledFocusOnClickSuffixIcon) {
+        delay().then(() => {methods.focus();});
+      }
+      if (!isEmpty.value && !props.noClear) {
+        await handler.onMousedownClearIcon(e);
+      } else {
+        await handler.onMousedownSuffixIcon(e);
+      }
+    },
+  };
+
+  hooks.onClasses.use(prev => [
+    ...prev,
+    {
+      'input-has-suffix-clear': hasSuffixClear.value,
+      'input-has-suffix-icon': hasSuffixIcon.value,
+      'input-empty': isEmpty.value,
+    }
+  ]);
+
+  const render = () => (hasSuffixIcon.value || hasSuffixClear.value || editComputed.value.loading) && !props.textarea && (
+    <span className="input-suffix-icon-wrapper" onMouseDown={handler.onMousedownSuffix}>
+      {hasSuffixIcon.value && slots.suffixIconContent(<Icon icon={props.suffixIcon} className="input-suffix-icon"/>)}
+      {hasSuffixClear.value && (<Icon icon="pi-close-circle-fill" className="input-suffix-clear"/>)}
+      {editComputed.value.loading && <Loading/>}
+    </span>
+  );
+
+  return { render };
+}

package/src/packages/components/InputGroup/index.tsx

@@ -0,0 +1,31 @@
+import {designComponent, getComponentCls, iHTMLDivElement, useClasses} from "plain-design-composition";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import './input-group.scss';
+
+export const InputGroup = designComponent({
+  name: 'input-group',
+  inheritPropsType: iHTMLDivElement,
+  props: {
+    ...EditProps,
+    ...StyleProps,
+  },
+  slots: ['default'],
+  setup({ slots }) {
+
+    useEdit();
+    useStyle();
+
+    const classes = useClasses(() => [
+      getComponentCls('input-group')
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default()}
+      </div>
+    );
+  },
+});
+
+export default InputGroup;

package/src/packages/components/InputGroup/input-group.scss

@@ -0,0 +1,37 @@
+@include prefix(input-group) {
+  display: flex;
+  align-items: stretch;
+
+  & > * {
+    &:not(:first-child) {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
+
+    &:not(:last-child) {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
+
+    &.#{componentName(input)} {
+      .input-fixed {
+        overflow: hidden;
+      }
+
+      &:not(.input-fixed) {
+        flex: 1;
+        flex-shrink: 0;
+        flex-grow: 1;
+        overflow: hidden;
+      }
+
+      &:not(:first-child) {
+        border-left: solid 1px plv(border-color);
+      }
+
+      & + .#{componentName(input)}:not(:hover):not(.input-focus) {
+        border-left-color: transparent;
+      }
+    }
+  }
+}