plain-design 1.0.0-beta.3 → 1.0.0-beta.5

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

@@ -1,147 +1,150 @@
-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;
-}
+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";
+import {ClientZoom} from "../ClientZoom";
+
+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 } = ClientZoom.getClientPosition(e);
+      let { offsetWidth, offsetHeight } = e.target as any;
+      const dragSize = 12
+      if (!(offsetWidth - offsetX < dragSize && offsetHeight - offsetY < dragSize)) {
+        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 } = ClientZoom.getClientPosition(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

@@ -1,72 +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);
-  });
-}
+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

@@ -1,21 +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>
+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

@@ -1,35 +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}
-  </>);
-
-}
+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}
+  </>);
+
+}