plain-design 0.0.97 → 1.0.0-beta.10

package/src/packages/components/InputNumber/useInputNumber.public.tsx

@@ -0,0 +1,458 @@
+import {iInputNumberCompositionParam, iInputNumberEffectiveValueInfo, iInputNumberValueInfo} from "./input-number.utils";
+import {computed, getComponentCls, iHTMLElement, iMouseEvent, reactive, RenderNode, useClasses, useNumber, useRefs} from "plain-design-composition";
+import {useStyle} from "../../uses/useStyle";
+import {useEdit} from "../../uses/useEdit";
+import {roundFixed} from "plain-utils/utils/roundFixed";
+import {getKey, KEY} from "../KeyboardService";
+import {useClickWave} from "../../directives/ClickWave";
+import {NumberResize} from "./NumberResize";
+import {NumberButtonTypes} from "./number.utils";
+import {Input} from "../Input";
+import Icon from "../Icon";
+import {delay} from "plain-utils/utils/delay";
+
+const NAN = 'NAN';
+const numberPattern = /([\d.-]+)([a-zA-Z%]*)/;
+
+export function useInputNumberPublic(param: iInputNumberCompositionParam) {
+
+  const { props, slots, hooks, event: { emit } } = param;
+
+  const { refs, onRef } = useRefs({ add: iHTMLElement, sub: iHTMLElement, input: Input, });
+
+  const { styleComputed } = useStyle({ status: undefined });
+
+  const { editComputed } = useEdit();
+
+  const state = reactive({
+    interval: null as null | number,                        // 进步器长摁定时器
+    timer: null as null | number,
+  });
+
+  const { numberState } = useNumber(props, ['step', 'max', 'min', 'precision']);
+
+  /*---------------------------------------utils-------------------------------------------*/
+
+  const utils = {
+    /**
+     * 将任意值格式化为{val:undefined|number|'NAN',unit?:string}
+     * @author  韦胜健
+     * @date    2022.5.24 12:30
+     */
+    getValueInfo: (val: any): iInputNumberValueInfo => {
+      if (!props.availableUnits || props.availableUnits.length === 0) {
+        /*不允许带单位*/
+        if (val == null) return { val: undefined };
+        val = String(val).trim();
+        if (val === '') return { val: undefined };
+        val = Number(val);
+        if (isNaN(val)) {
+          return { val: NAN };
+        } else {
+          return { val: val };
+        }
+      } else {
+        /*允许带单位*/
+        if (val == null) return { val: undefined, unit: props.defaultUnit };
+        if (typeof val === "string") {
+          val = val.trim();
+          if (val === '') return { val: undefined, unit: props.defaultUnit };
+          const match = numberPattern.exec(val);
+          if (!match) {
+            return { val: NAN };
+          } else {
+            let num = Number(match[1]);
+            let unit: string | null | undefined = match[2];
+            if (props.availableUnits.indexOf(unit) === -1) {
+              unit = undefined;
+            }
+
+            if (isNaN(num)) {
+              return { val: NAN, unit };
+            } else {
+              return { val: num, unit: !!unit ? unit : undefined };
+            }
+          }
+        }
+      }
+
+      return { val };
+    },
+    /**
+     * 检查值的有效性
+     * @author  韦胜健
+     * @date    2023.2.10 0:01
+     */
+    checkValue: ({ val, unit }: { val: number | undefined, unit?: string }): string | number | undefined => {
+      if (val != null) {
+        // min
+        if (numberState.min != null && val < numberState.min) {
+          val = numberState.min;
+        }
+        // max
+        if (numberState.max != null && val! > numberState.max) {
+          val = numberState.max;
+        }
+        // stepStrictly
+        if (props.stepStrictly && val! % numberState.step! !== 0) {
+          // console.log('props.value', props.modelValue)
+          val = props.modelValue == undefined ? undefined : Number(props.modelValue);
+        }
+        // precision
+        if (numberState.precision != null) {
+          val = roundFixed(val, numberState.precision)!;
+        }
+      }
+
+      return !!unit && val != null ? (val + unit) : val;
+    },
+    /**
+     * 获取有效值,从formatModelValue以及formatValue 中去一个有效值
+     * @author  韦胜健
+     * @date    2022.5.24 12:32
+     * @param   inputValue  正在输入的值
+     * @param   modelValue  已经绑定的有效值
+     */
+    getEffectiveValue: (inputValue: any, modelValue: any): iInputNumberEffectiveValueInfo => {
+      let { val, unit } = utils.getValueInfo(inputValue);
+      const modelValueInfo = utils.getValueInfo(modelValue);
+      if (val === NAN) {
+        val = modelValueInfo.val;
+        unit = modelValueInfo.unit;
+        if (val === NAN) {
+          if (numberState.min != null) return { val: numberState.min, unit };
+          else if (numberState.max != null) return { val: numberState.max, unit };
+          else if (props.stepStrictly) return { val: numberState.step, unit };
+          else return { val: 0, unit };
+        }
+      }
+      return { val, unit };
+    },
+  };
+
+  /*---------------------------------------computer-------------------------------------------*/
+
+  const classes = useClasses(() => ([
+    getComponentCls('number'),
+    {
+      'number-disabled': editComputed.value.disabled,
+      [`number-button-type-${props.button}`]: !!props.button,
+    }
+  ]));
+
+  /**
+   * 当前可用的有效值
+   * @author  韦胜健
+   * @date    2023/2/10 11:35
+   */
+  const effectiveInputValue = computed(() => hooks.onGetEffectiveInputValue.exec({ val: undefined }));
+
+  /*---------------------------------------methods-------------------------------------------*/
+
+  const methods = {
+    /**
+     * 添加值或者减少值之间的检查动作
+     * 如果是up或者down快捷点触发的，如果当前suggestion面板已经打开，则不做值加减处理
+     * 如果是点击加减按钮触发的，就一定做值加减处理
+     * @author  韦胜健
+     * @date    2023/2/10 14:51
+     */
+    beforeAddSub: (param?: { ignoreSuggestion: boolean }): iInputNumberEffectiveValueInfo | void => {
+      if (!editComputed.value.editable) {return;}
+      if (!param?.ignoreSuggestion && !!unitSuggestion.value?.length && refs.input?.isSuggestionOpen()) {return;}
+      let value = { ...effectiveInputValue.value };
+      if (value.val == null) {value.val = 0;}
+      return value;
+    },
+    /**
+     * 加值动作
+     * @author  韦胜健
+     * @date    2023/2/10 14:53
+     */
+    add: (param?: { ignoreSuggestion: boolean }) => {
+      const value = methods.beforeAddSub(param);
+      if (!value) {return;}
+      value.val! += numberState.step;
+      const checkValue = utils.checkValue(value);
+      hooks.onAdd.exec(checkValue);
+    },
+    /**
+     * 减值动作
+     * @author  韦胜健
+     * @date    2023/2/10 14:53
+     */
+    minus: (param?: { ignoreSuggestion: boolean }) => {
+      const value = methods.beforeAddSub(param);
+      if (!value) {return;}
+      value.val! -= numberState.step;
+      const checkValue = utils.checkValue(value);
+      hooks.onSub.exec(checkValue);
+    },
+    /**
+     * 清空定时器
+     * @author  韦胜健
+     * @date    2023/2/10 14:53
+     */
+    clearInterval: () => {              // 清除定时器
+      if (state.interval != null) {clearInterval(state.interval);}
+      if (state.timer != null) {clearTimeout(state.timer);}
+      window.removeEventListener('mouseup', methods.clearInterval);
+    },
+    focus: () => {refs.input!.focus();},
+    blur: () => {refs.input!.blur();},
+  };
+
+  /*---------------------------------------handler-------------------------------------------*/
+
+  const handler = {
+    /**
+     * 定时器加值
+     * @author  韦胜健
+     * @date    2023/2/10 14:53
+     */
+    intervalAdd: () => {
+      props.multiple && delay().then(() => {refs.input?.focus();});
+      methods.add({ ignoreSuggestion: true });
+      state.timer = setTimeout(() => {
+        state.interval = setInterval(methods.add, 100) as any as number;
+      }, 500) as any as number;
+      window.addEventListener('mouseup', methods.clearInterval);
+    },
+    /**
+     * 定时器减值
+     * @author  韦胜健
+     * @date    2023/2/10 14:54
+     */
+    intervalMinus: () => {
+      props.multiple && delay().then(() => {refs.input?.focus();});
+      methods.minus({ ignoreSuggestion: true });
+      state.timer = setTimeout(() => {
+        state.interval = setInterval(methods.minus, 100) as any as number;
+      }, 500) as any as number;
+      window.addEventListener('mouseup', methods.clearInterval);
+    },
+    onResize: (val: number) => {hooks.onResize.exec(val);},
+    onFocus: (e: FocusEvent) => {hooks.onFocus.exec(e);},
+    onBlur: (e: FocusEvent) => {hooks.onBlur.exec(e);},
+    onMousedownResize: (e: iMouseEvent) => {hooks.onMousedownResize.exec(e);},
+    /**
+     * keyup 以及 keydown处理值加减动作
+     * @author  韦胜健
+     * @date    2023/2/10 14:55
+     */
+    onKeydown: (e: KeyboardEvent) => {
+      const key = getKey(e);
+      switch (key) {
+        case KEY.up:
+          e.preventDefault();
+          e.stopPropagation();
+          methods.add();
+          break;
+        case KEY.down:
+          e.preventDefault();
+          e.stopPropagation();
+          methods.minus();
+          break;
+      }
+    },
+    onInput: (val: any) => {hooks.onInput.exec(val);},
+  };
+
+  useClickWave({ elGetter: () => refs.add, optionsGetter: () => ({ disabled: !editComputed.value.editable }) });
+  useClickWave({ elGetter: () => refs.sub, optionsGetter: () => ({ disabled: !editComputed.value.editable }) });
+
+  /**
+   * 点击加减按钮的时候阻止事件冒泡，避免触发打开suggestion面板
+   * @author  韦胜健
+   * @date    2023/2/10 14:55
+   */
+  const stopClickPropagation = (e: iMouseEvent) => {e.stopPropagation();};
+
+  /**
+   * 支持的按钮类型
+   * @author  韦胜健
+   * @date    2023/2/10 14:55
+   */
+  const buttonTypes = {
+    /**
+     * 左右加减按钮
+     * @author  韦胜健
+     * @date    2023/2/10 11:36
+     */
+    button: {
+      prefix: () => (
+        <span
+          className="number-prepend-button plain-click-node"
+          onMouseDown={handler.intervalMinus}
+          onClick={stopClickPropagation}
+          ref={onRef.sub}>
+            <Icon icon={props.subIcon || 'pi-minus'}/>
+          </span>
+      ),
+      suffix: () => (
+        <span
+          className="number-append-button plain-click-node"
+          onMouseDown={handler.intervalAdd}
+          onClick={stopClickPropagation}
+          ref={onRef.add}>
+            <Icon icon={props.addIcon || 'pi-plus'}/>
+          </span>
+      ),
+    },
+    /**
+     * 右侧上下加减按钮
+     * @author  韦胜健
+     * @date    2023/2/10 11:36
+     */
+    right: {
+      suffix: () => (
+        <span className="number-button-container">
+            <span
+              className="number-append-button plain-click-node"
+              onMouseDown={handler.intervalAdd}
+              onClick={stopClickPropagation}
+              ref={onRef.add}>
+              <Icon icon={props.addIcon || 'pi-up'}/>
+            </span>
+            <span
+              className="number-prepend-button plain-click-node"
+              onMouseDown={handler.intervalMinus}
+              onClick={stopClickPropagation}
+              ref={onRef.sub}>
+              <Icon icon={props.subIcon || 'pi-down'}/>
+            </span>
+          </span>
+      )
+    },
+    /**
+     * 拖拽按钮
+     * @author  韦胜健
+     * @date    2023/2/10 11:36
+     */
+    resize: {
+      suffix: () => (
+        <NumberResize
+          value={effectiveInputValue.value?.val || 0}
+          step={numberState.step}
+          onChange={handler.onResize}
+          onMouseDown={handler.onMousedownResize}
+        />
+      )
+    },
+  } as const;
+
+  /**
+   * 传递给input的插槽
+   * @author  韦胜健
+   * @date    2023/2/10 11:37
+   */
+  const inputSlots = computed<{ prefix?: () => RenderNode, suffix?: () => RenderNode }>(() => {
+    if (!props.button || editComputed.value.disabled) {
+      return {};
+    }
+    return buttonTypes[typeof props.button !== "string" ? NumberButtonTypes.right : props.button];
+  });
+
+  /**
+   * 推荐输入，如果有可用的单位的话，自动补全单位作为推荐文本
+   * @author  韦胜健
+   * @date    2023/2/10 11:37
+   */
+  const unitSuggestion = computed(() => {
+    if (props.suggestion !== undefined) {
+      return props.suggestion;
+    }
+    if (!props.availableUnits) {
+      return undefined;
+    }
+    const valInfo = effectiveInputValue.value;
+    if (typeof valInfo.val === "number") {
+      return props.availableUnits.map(i => `${valInfo.val}${i}`);
+    }
+  });
+
+  /**
+   * 传递给input的属性
+   * @author  韦胜健
+   * @date    2023/2/10 11:37
+   */
+  const inputAttrs = computed(() => {
+    return {
+      class: classes.value,
+      ref: onRef.input,
+      suggestionIgnoreSearchText: true,
+      suggestion: unitSuggestion.value,
+      noClear: true,
+      onFocus: handler.onFocus,
+      onBlur: handler.onBlur,
+      onKeydown: handler.onKeydown,
+      onInput: handler.onInput,
+      ...props.inputAttrs,
+      ...hooks.onGetInputEditAttrs.exec({}),
+    };
+  });
+
+  /**
+   * 输入文本的时候，如果有推荐输入文本，则自动打开推荐输入文本
+   * @author  韦胜健
+   * @date    2023/2/10 11:38
+   */
+  hooks.onInput.use(() => {
+    if (!!unitSuggestion.value?.length) {
+      delay().then(() => {refs.input?.openSuggestion();});
+    }
+  });
+
+  hooks.onFocus.use(e => emit.onFocus(e));
+
+  hooks.onBlur.use(e => emit.onBlur(e));
+
+  /**
+   * 渲染Input
+   * @author  韦胜健
+   * @date    2023/2/10 11:38
+   */
+  hooks.onRender.use({
+    processor: ({ list, render }) => {list.push({ render, seq: 1, key: 'single' });},
+    render: () => (
+      <Input
+        noClear
+        {...inputAttrs.value}
+      >
+        {/*直接返回inputSlots.value会有运行时错误*/}
+        {(() => {
+          const { prefix, suffix } = inputSlots.value;
+          const result = {} as any;
+          if (!!prefix || slots.prefix.isExist()) {result.prefix = () => <>{slots.prefix()}{prefix?.()}</>;}
+          if (!!suffix || slots.suffix.isExist()) {result.suffix = () => <>{slots.suffix()}{suffix?.()}</>;}
+          return result;
+        })()}
+      </Input>
+    )
+  });
+
+  /**
+   * 点击resize按钮的时候，令input重新获取焦点
+   * @author  韦胜健
+   * @date    2023/2/10 14:56
+   */
+  hooks.onMousedownResize.use(() => {
+    delay().then(() => {refs.input?.focus();});
+  });
+
+  return {
+    utils,
+    styleComputed,
+    editComputed,
+    refs,
+    onRef,
+    inputAttrs,
+    inputSlots,
+    effectiveInputValue,
+    unitSuggestion,
+    ...param,
+  };
+}
+
+export type iInputNumberPublic = ReturnType<typeof useInputNumberPublic>
+

package/src/packages/components/InputNumber/useInputNumber.single.tsx

@@ -0,0 +1,137 @@
+import {iInputNumberPublic} from "./useInputNumber.public";
+import {reactive, useModel} from "plain-design-composition";
+import {createEffects} from "plain-utils/utils/createEffects";
+
+export function useInputNumberSingle(
+  { hooks, props, event, utils }: iInputNumberPublic
+) {
+
+  const { effects } = createEffects();
+
+  /**
+   * 绑定值变化时更新文本框的绑定值
+   * @author  韦胜健
+   * @date    2023/2/10 11:28
+   */
+  const model = useModel(() => props.modelValue as string | number | undefined, event.emit.onUpdateModelValue, {
+    onChange: val => {
+      state.inputValue = val;
+    }
+  });
+
+  const state = reactive({
+    /*文本框绑定值*/
+    inputValue: model.value
+  });
+
+  const handler = {
+    /**
+     * 处理文本框值变化动作，实时检测输入的值是否正确，是则立即派发绑定值更新事件
+     * @author  韦胜健
+     * @date    2023/2/10 11:28
+     */
+    onUpdateModelValue: (val: any) => {
+      /*没有值，直接派发新值undefined*/
+      if (typeof val === "string") {
+        if (val.trim().length === 0) {
+          state.inputValue = undefined;
+          model.value = state.inputValue;
+          return;
+        }
+      }
+
+      /*更新绑定文本*/
+      state.inputValue = val;
+      const strVal = String(val);
+
+      /*绑定文本有效，直接派发更新值事件*/
+      if (
+        strVal.trim().length === 0 ||
+        (
+          val == utils.checkValue(utils.getEffectiveValue(state.inputValue, model.value)) &&
+          strVal.charAt(strVal.length - 1) !== '.'
+        )
+      ) {
+        model.value = state.inputValue;
+      }
+    },
+  };
+
+  /**
+   * 计算当前有效的输入值
+   * @author  韦胜健
+   * @date    2023/2/10 11:31
+   */
+  effects.push(
+    hooks.onGetEffectiveInputValue.use(() => {
+      return utils.getEffectiveValue(state.inputValue, model.value);
+    })
+  );
+
+  /**
+   * 绑定输入文本的属性
+   * @author  韦胜健
+   * @date    2023/2/10 11:31
+   */
+  effects.push(
+    hooks.onGetInputEditAttrs.use(() => ({
+      modelValue: state.inputValue,
+      onUpdateModelValue: handler.onUpdateModelValue,
+    }))
+  );
+
+  /**
+   * 失去焦点的时候重置输入的本文
+   * @author  韦胜健
+   * @date    2023/2/10 11:34
+   */
+  effects.push(
+    hooks.onBlur.use(() => {
+      if (state.inputValue !== model.value) {
+        state.inputValue = model.value;
+      }
+    })
+  );
+
+  /**
+   * 处理点击加号动作
+   * @author  韦胜健
+   * @date    2023/2/10 11:34
+   */
+  effects.push(
+    hooks.onAdd.use(val => {
+      state.inputValue = val;
+      model.value = val;
+    })
+  );
+
+  /**
+   * 处理点击减号动作
+   * @author  韦胜健
+   * @date    2023/2/10 11:34
+   */
+  effects.push(
+    hooks.onSub.use(val => {
+      state.inputValue = val;
+      model.value = val;
+    })
+  );
+
+  /**
+   * 处理拖拽值变化动作
+   * @author  韦胜健
+   * @date    2023/2/10 11:35
+   */
+  effects.push(
+    hooks.onResize.use(val => {
+      if (!props.availableUnits || !props.availableUnits.length) {
+        return handler.onUpdateModelValue(val);
+      }
+      const { unit: _unit } = utils.getValueInfo(model.value);
+      const unit = _unit || props.defaultUnit;
+      handler.onUpdateModelValue(!unit ? val : `${val}${unit}`);
+    })
+  );
+
+  return effects.clear;
+}

package/src/packages/components/KeepAlive/KeepAliveCacheItemWrapper.tsx

@@ -0,0 +1,114 @@
+import React, {useCallback, useLayoutEffect, useRef} from "react";
+import {findDOMNode} from "react-dom";
+
+export interface iKeepAliveCacheItemWrapperProps {
+  children: any,
+  active: boolean
+}
+
+export const KeepAliveCacheItemWrapper: React.FC<iKeepAliveCacheItemWrapperProps> = (props) => {
+
+  /**
+   * 销毁前将dom放回去，避免react-dom渲染异常
+   * 这里要比 startText.domRef更新前执行，不然当前组件销毁的时候拿不到startText.domRef.current
+   * startText.domRef在useLayoutEffect清除副作用的时候清理掉了startText.domRef.current
+   * 放回去之前，先把display设置为none，避免放回去的一瞬间出现还原内容的现象
+   * @author  韦胜健
+   * @date    2023.6.3 18:31
+   */
+  useLayoutEffect(() => {
+    return () => {
+      isDestroy.current = true;
+      removeElements.current.forEach(el => {
+        if ('style' in el) {
+          ;(el.style as any).display = 'none';
+        }
+      });
+      show();
+    };
+  }, []);
+
+  /*对start text节点的引用*/
+  const startText = useTextRef();
+  /*对end text节点的引用*/
+  const endText = useTextRef();
+  /*目前移除的dom*/
+  const removeElements = useRef([] as Element[]);
+  /*当前是否已经激活*/
+  const currentActive = useRef(true);
+  /*当前组件是否已经销毁*/
+  const isDestroy = useRef(false);
+
+  /**
+   * 还原显示dom节点
+   * @author  韦胜健
+   * @date    2023.6.3 18:30
+   */
+  const show = useCallback(() => {
+    try {
+      currentActive.current = true;
+      const parentNode = startText.domRef.current!.parentNode!;
+      removeElements.current.forEach(el => {
+        parentNode.insertBefore(el, endText.domRef.current!);
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  }, []);
+
+  /**
+   * 隐藏dom节点
+   * @author  韦胜健
+   * @date    2023.6.3 18:30
+   */
+  const hide = useCallback(() => {
+    currentActive.current = false;
+
+    let elementList = [] as Element[];
+    const startTextDom = startText.domRef.current;
+    const endTextDom = endText.domRef.current;
+
+    let temp: ChildNode | null = startTextDom;
+    while (!!temp && temp !== endTextDom) {
+      temp = temp.nextSibling;
+      if (!!temp && temp !== endTextDom) {
+        elementList.push(temp as any);
+      }
+    }
+
+    elementList.forEach(el => {el.parentNode!.removeChild(el);});
+    removeElements.current = elementList;
+  }, []);
+
+  useLayoutEffect(() => {
+    if (isDestroy.current) {return;}
+    if (currentActive.current && !props.active) {
+      hide();
+    } else if (!currentActive.current && props.active) {
+      show();
+    }
+  });
+
+  return <>
+    <EmptyText ref={startText.componentRef}/>
+    {props.children}
+    <EmptyText ref={endText.componentRef}/>
+  </>;
+};
+
+class EmptyText extends React.Component<any, any> {
+  render() {
+    /*这个空格失是必须得*/
+    return (' ');
+  }
+}
+
+function useTextRef() {
+  const componentRef = useRef(null as any);
+  const domRef = useRef(null as null | Text);
+  useLayoutEffect(() => {
+    domRef.current = findDOMNode(componentRef.current) as Text;
+    return () => {domRef.current = null;};
+  }, []);
+  return { componentRef, domRef };
+}