@hi-ui/input 4.0.0-alpha.6 → 4.0.0-beta.1

package/lib/esm/use-input.js

@@ -0,0 +1,119 @@
+/** @LICENSE
+ * @hi-ui/input
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useCallback, useState, useMemo } from 'react';
+import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
+import { useLatestCallback } from '@hi-ui/use-latest';
+import { setAttrStatus } from '@hi-ui/dom-utils';
+import { pure, format, formatAmount } from './utils/index.js';
+
+var useInput = function useInput(_ref) {
+  var name = _ref.name,
+      _ref$autoFocus = _ref.autoFocus,
+      autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      maxLength = _ref.maxLength,
+      placeholder = _ref.placeholder,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+      valueProp = _ref.value,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
+      _ref$trimValueOnBlur = _ref.trimValueOnBlur,
+      trimValueOnBlur = _ref$trimValueOnBlur === void 0 ? false : _ref$trimValueOnBlur,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      clearElementRef = _ref.clearElementRef; // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
+
+  var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange, Object.is),
+      value = _useUncontrolledState[0],
+      tryChangeValue = _useUncontrolledState[1];
+
+  var handleChange = useCallback(function (evt, trim) {
+    if (trim === void 0) {
+      trim = false;
+    }
+
+    evt.persist();
+    var nextValue = evt.target.value;
+    var valueTrue = pure(nextValue, type); // 防溢出，保证 onChange 拿到的是值是最新的 formatted value
+
+    var value = format(nextValue, type);
+
+    if (trim) {
+      valueTrue = valueTrue.trim();
+      value = value.trim();
+    }
+
+    var event = Object.create(evt);
+    event.target = Object.assign(Object.assign({}, evt.target), {
+      value: value
+    });
+    tryChangeValue(valueTrue, event);
+  }, [tryChangeValue, type]);
+
+  var _useState = useState(autoFocus),
+      focused = _useState[0],
+      setFocused = _useState[1];
+
+  var handleFocus = useLatestCallback(function (evt) {
+    setFocused(true);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(evt);
+  });
+  var handleBlur = useLatestCallback(function (event) {
+    var relatedTarget = event.relatedTarget; // 拦截 clearIcon 点击清空，阻止其触发 input 失焦
+
+    if (clearElementRef && clearElementRef.current && clearElementRef.current === relatedTarget) {
+      return;
+    }
+
+    setFocused(false); // amount 自动添加小数
+
+    if (type === 'amount') {
+      event.target.value = formatAmount(value, true);
+      handleChange(event, trimValueOnBlur);
+    } else if (trimValueOnBlur) {
+      handleChange(event, true);
+    }
+
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+  });
+  var nativeInputProps = useMemo(function () {
+    return {
+      name: name,
+      disabled: disabled,
+      readOnly: readOnly,
+      autoFocus: autoFocus,
+      placeholder: placeholder,
+      maxLength: maxLength,
+      'data-focused': setAttrStatus(focused)
+    };
+  }, [disabled, readOnly, autoFocus, placeholder, maxLength, name, focused]);
+  var getInputProps = useCallback(function () {
+    return Object.assign(Object.assign({}, nativeInputProps), {
+      value: format(value, type),
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    });
+  }, [value, type, handleChange, handleFocus, handleBlur, nativeInputProps]);
+  return {
+    focused: focused,
+    value: value,
+    tryChangeValue: tryChangeValue,
+    getInputProps: getInputProps
+  };
+};
+
+export { useInput };
+//# sourceMappingURL=use-input.js.map

package/lib/esm/use-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input.js","sources":["../../src/use-input.ts"],"sourcesContent":[null],"names":["useInput","name","autoFocus","disabled","readOnly","maxLength","placeholder","defaultValue","valueProp","value","onChange","onFocus","onBlur","trimValueOnBlur","type","clearElementRef","useUncontrolledState","Object","is","tryChangeValue","handleChange","useCallback","evt","trim","persist","nextValue","target","valueTrue","pure","format","event","create","useState","focused","setFocused","handleFocus","useLatestCallback","handleBlur","relatedTarget","current","formatAmount","nativeInputProps","useMemo","setAttrStatus","getInputProps"],"mappings":"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"}

package/lib/esm/utils/index.js

@@ -0,0 +1,176 @@
+/** @LICENSE
+ * @hi-ui/input
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * 格式化身份证
+ */
+var formatId = function formatId(val) {
+  val = val.replace(/[^a-zA-Z0-9]/g, '');
+  var len = val.length;
+
+  if (val === '' || len < 7) {
+    return val;
+  }
+
+  if (len < 11) {
+    return val.slice(0, 6) + ' ' + val.slice(6, 10);
+  } else if (len < 15) {
+    return val.slice(0, 6) + ' ' + val.slice(6, 10) + ' ' + val.slice(10, 14);
+  } else {
+    return val.slice(0, 6) + ' ' + val.slice(6, 10) + ' ' + val.slice(10, 14) + ' ' + val.slice(14, 18);
+  }
+};
+
+var pureId = function pureId(val) {
+  var tmp = val.replace(/[^\d|.]/g, '');
+  return tmp.slice(0, 18);
+};
+/**
+ * 格式化手机号
+ */
+
+
+var formatTel = function formatTel(val) {
+  val = val.replace(/\D/g, '');
+  var len = val.length;
+
+  if (val === '' || len < 4) {
+    return val;
+  }
+
+  if (len < 8) {
+    return val.slice(0, 3) + ' ' + val.slice(3, 7);
+  } else {
+    return val.slice(0, 3) + ' ' + val.slice(3, 7) + ' ' + val.slice(7, 11);
+  }
+};
+
+var pureTel = function pureTel(val) {
+  var tmp = val.replace(/[^\d|.]/g, '');
+  return tmp.slice(0, 11);
+};
+/**
+ * 格式化银行卡号
+ */
+
+
+var formatCard = function formatCard(val) {
+  val = val.replace(/\D/g, '');
+  var len = val.length;
+
+  if (val === '' || val.length < 5) {
+    return val;
+  }
+
+  if (len < 9) {
+    return val.slice(0, 4) + ' ' + val.slice(4, 8);
+  } else if (len < 13) {
+    return val.slice(0, 4) + ' ' + val.slice(4, 8) + ' ' + val.slice(8, 12);
+  } else if (len < 17) {
+    return val.slice(0, 4) + ' ' + val.slice(4, 8) + ' ' + val.slice(8, 12) + ' ' + val.slice(12, 16);
+  } else {
+    return val.slice(0, 4) + ' ' + val.slice(4, 8) + ' ' + val.slice(8, 12) + ' ' + val.slice(12, 16) + ' ' + val.slice(16, 19);
+  }
+};
+
+var pureCard = function pureCard(val) {
+  var tmp = val.replace(/[^\d|.]/g, '');
+  return tmp.slice(0, 19);
+};
+/**
+ * 金额自动生成小数
+ * @param {string} val  需要处理的值
+ */
+
+
+var formatAmount = function formatAmount(val, fill) {
+  if (fill === void 0) {
+    fill = false;
+  }
+
+  val = val.replace(/[^\d|.|,]/g, '').replace(/(\.\d*?)(\.|,).*/, function (_, $1) {
+    return $1;
+  });
+
+  if (fill) {
+    if (!val) return val;
+    return val.indexOf('.') > -1 ? val : val + '.00';
+  }
+
+  return val;
+};
+
+var pureAmount = function pureAmount(val) {
+  var tmp = val.replace(/[^\d|.]/g, '');
+  return tmp;
+};
+
+var formatEmail = function formatEmail(val) {
+  return val.replace(/\W/g, '');
+};
+
+var pureEmail = function pureEmail(val) {
+  return val;
+};
+/**
+ * 输入规则
+ */
+
+
+var format = function format(val, type) {
+  switch (type) {
+    case 'id':
+      return formatId(val);
+
+    case 'tel':
+      return formatTel(val);
+
+    case 'card':
+      return formatCard(val);
+
+    case 'email':
+      return formatEmail(val);
+
+    case 'amount':
+      return formatAmount(val);
+
+    default:
+      return val;
+  }
+};
+/**
+ * 净化规则
+ */
+
+
+var pure = function pure(val, type) {
+  switch (type) {
+    case 'id':
+      return pureId(val);
+
+    case 'tel':
+      return pureTel(val);
+
+    case 'card':
+      return pureCard(val);
+
+    case 'email':
+      return pureEmail(val);
+
+    case 'amount':
+      return pureAmount(val);
+
+    default:
+      return val;
+  }
+};
+
+export { format, formatAmount, formatCard, formatEmail, formatId, formatTel, pure, pureAmount, pureCard, pureEmail, pureId, pureTel };
+//# sourceMappingURL=index.js.map

package/lib/esm/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":[null],"names":["formatId","val","replace","len","length","slice","pureId","tmp","formatTel","pureTel","formatCard","pureCard","formatAmount","fill","_","$1","indexOf","pureAmount","formatEmail","pureEmail","format","type","pure"],"mappings":"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"}

package/lib/types/Input.d.ts

@@ -1,25 +1,17 @@
 import React from 'react';
+import { HiBaseAppearanceEnum, HiBaseHTMLFieldProps } from '@hi-ui/core';
 /**
- * TODO: What is Input
+ * 输入框
+ *
+ * @TODO:
+ * 1. size api 确认
+ * 2. 修改类名结构
+ * 3. 支持带数字展示
+ * 4. InputGroup 模式支持
+ * 5. 手动聚焦支持额外配置
  */
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | null>>;
-export interface InputProps {
-    /**
-     * 组件默认的选择器类
-     */
-    prefixCls?: string;
-    /**
-     * 组件的语义化 Role 属性
-     */
-    role?: string;
-    /**
-     * 组件的注入选择器类
-     */
-    className?: string;
-    /**
-     * 组件的注入样式
-     */
-    style?: React.CSSProperties;
+export interface InputProps extends HiBaseHTMLFieldProps<'input'> {
     /**
      * 开启输入框只读
      */
@@ -32,10 +24,6 @@ export interface InputProps {
      * 开启输入框自动聚焦
      */
     autoFocus?: boolean;
-    /**
-     * 输入框字段名称
-     */
-    name?: string;
     /**
      * 设置输入框的值
      */
@@ -47,17 +35,17 @@ export interface InputProps {
     /**
      * 设置输入框类型，支持原生 input 的 type 属性所有值
      */
-    type?: 'text' | 'number';
+    type?: 'text' | 'id' | 'tel' | 'card' | 'amount' | 'email' | string;
     /**
      * 输入最大长度
      */
     maxLength?: number;
     /**
-     * 输入框前置外部标签
+     * 输入框前置外部内容
      */
     prepend?: React.ReactNode;
     /**
-     * 输入框后置外部标签
+     * 输入框后置外部内容
      */
     append?: React.ReactNode;
     /**
@@ -73,40 +61,33 @@ export interface InputProps {
      */
     clearable?: boolean;
     /**
-     * 清除按钮展示的触发形态
+     * 开启失焦时触发对值的 trim，将触发 onChange 给用户
      */
-    clearableTrigger?: 'always' | 'hover';
+    trimValueOnBlur?: boolean;
     /**
-     * 开启动画浮动提示
+     * 清除按钮展示的触发形态
      */
-    floatLabel?: React.ReactNode;
+    clearableTrigger?: 'always' | 'hover';
     /**
      * 输入框占位符
      */
     placeholder?: string;
     /**
      * 设置展现形式
+     * 其中 `underline` 内部使用，不对外提供支持（风格去线型化：由线性过渡到面性）
      */
-    appearance?: 'outline' | 'unset' | 'filled' | 'underline';
+    appearance?: HiBaseAppearanceEnum | 'underline';
     /**
-     * 设置输入框尺寸
+     * 设置尺寸
      */
     size?: 'sm' | 'md' | 'lg';
     /**
      * 值改变时的回调
      */
-    onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * 获得焦点时的回调
-     */
-    onFocus?: (evt: React.FocusEvent<HTMLInputElement>) => void;
-    /**
-     * 失去焦点时的回调
-     */
-    onBlur?: (evt: React.FocusEvent<HTMLInputElement>) => void;
+    onChange?: (evt: React.ChangeEvent<HTMLInputElement>, value: string) => void;
 }
 /**
- * 伪造目标事件 target
+ * 模拟伪装目标事件 target
  *
  * @param target
  * @param evt
@@ -114,4 +95,4 @@ export interface InputProps {
  * @param targetValue
  * @returns
  */
-export declare function onChangeMock(onChange: (event: React.ChangeEvent<HTMLInputElement>) => void, evt: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>, target: HTMLInputElement | null, targetValue: string): void;
+export declare function onChangeMock(onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void, evt: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>, target: HTMLInputElement | null, targetValue: string): void;

package/lib/types/MockInput.d.ts

@@ -0,0 +1,134 @@
+import React from 'react';
+import type { HiBaseAppearanceEnum, HiBaseDataItem, HiBaseHTMLFieldProps } from '@hi-ui/core';
+/**
+ * 支持自定义渲染输入框内容，暂时仅供内部 Picker 类组件使用，不对外提供
+ */
+export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "readOnly" | "placeholder" | "defaultValue" | "value" | "onChange" | "type" | "focused" | "onSelect" | "title" | "size" | "prefix" | "data" | "onClick" | "appearance" | "suffix" | "clearableTrigger" | "clearable" | "displayRender"> & {
+    prefixCls?: string | undefined;
+    role?: string | undefined;
+} & {
+    /**
+     * 设置当前多选值
+     */
+    value?: React.ReactText | undefined;
+    /**
+     * 设置当前多选值默认值
+     */
+    defaultValue?: React.ReactText | undefined;
+    /**
+     * 多选值改变时的回调
+     */
+    onChange?: ((value: React.ReactText, item: any) => void) | undefined;
+    /**
+     * 是否可清空
+     */
+    clearable?: boolean | undefined;
+    /**
+     * 清除按钮展示的触发形态
+     */
+    clearableTrigger?: "always" | "hover" | undefined;
+    /**
+     * 是否禁止使用
+     */
+    disabled?: boolean | undefined;
+    /**
+     * 自定义选择后触发器所展示的内容
+     */
+    displayRender?: ((item: HiBaseDataItem) => React.ReactNode) | undefined;
+    /**
+     * 输入框占位符
+     */
+    placeholder?: string | undefined;
+    /**
+     * 输入框后置内容
+     */
+    suffix?: React.ReactNode;
+    /**
+     * 点击 Input 时触发回调
+     */
+    onClick?: ((event: React.MouseEvent<HTMLDivElement>) => void) | undefined;
+    /**
+     * 展示数据源
+     */
+    data?: HiBaseDataItem[] | undefined;
+    /**
+     * 是否聚焦
+     */
+    focused?: boolean | undefined;
+    /**
+     * 开启输入框只读
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * 设置展现形式
+     */
+    appearance?: HiBaseAppearanceEnum | undefined;
+    /**
+     * 设置输入框尺寸
+     */
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    invalid?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement | null>>;
+export declare type MockInputProps = HiBaseHTMLFieldProps<'div', {
+    /**
+     * 设置当前多选值
+     */
+    value?: React.ReactText;
+    /**
+     * 设置当前多选值默认值
+     */
+    defaultValue?: React.ReactText;
+    /**
+     * 多选值改变时的回调
+     */
+    onChange?: (value: React.ReactText, item: any) => void;
+    /**
+     * 是否可清空
+     */
+    clearable?: boolean;
+    /**
+     * 清除按钮展示的触发形态
+     */
+    clearableTrigger?: 'always' | 'hover';
+    /**
+     * 是否禁止使用
+     */
+    disabled?: boolean;
+    /**
+     * 自定义选择后触发器所展示的内容
+     */
+    displayRender?: (item: HiBaseDataItem) => React.ReactNode;
+    /**
+     * 输入框占位符
+     */
+    placeholder?: string;
+    /**
+     * 输入框后置内容
+     */
+    suffix?: React.ReactNode;
+    /**
+     * 点击 Input 时触发回调
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * 展示数据源
+     */
+    data?: HiBaseDataItem[];
+    /**
+     * 是否聚焦
+     */
+    focused?: boolean;
+    /**
+     * 开启输入框只读
+     */
+    readOnly?: boolean;
+    /**
+     * 设置展现形式
+     */
+    appearance?: HiBaseAppearanceEnum;
+    /**
+     * 设置输入框尺寸
+     */
+    size?: 'sm' | 'md' | 'lg';
+}>;

package/lib/types/index.d.ts

@@ -1,3 +1,5 @@
 import './styles/index.scss';
 export * from './Input';
 export { Input as default } from './Input';
+export * from './use-input';
+export * from './MockInput';

package/lib/types/use-input.d.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+export declare const useInput: ({ name, autoFocus, disabled, readOnly, maxLength, placeholder, defaultValue, value: valueProp, onChange, onFocus, onBlur, trimValueOnBlur, type, clearElementRef, }: UseInputProps) => {
+    focused: boolean;
+    value: string;
+    tryChangeValue: (stateOrFunction: React.SetStateAction<string>, ...args: any[]) => void;
+    getInputProps: () => {
+        value: string;
+        onChange: (evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, trim?: any) => void;
+        onFocus: (evt: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+        onBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+        name: string | undefined;
+        disabled: boolean;
+        readOnly: boolean;
+        autoFocus: boolean;
+        placeholder: string | undefined;
+        maxLength: number | undefined;
+        'data-focused': "" | undefined;
+    };
+};
+export interface UseInputProps {
+    /**
+     * 开启输入框只读
+     */
+    readOnly?: boolean;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 开启输入框自动聚焦
+     */
+    autoFocus?: boolean;
+    /**
+     * 输入框字段名称
+     */
+    name?: string;
+    /**
+     * 设置输入框的值
+     */
+    value?: string;
+    /**
+     * 设置输入框的默认值
+     */
+    defaultValue?: string;
+    /**
+     * 输入最大长度
+     */
+    maxLength?: number;
+    /**
+     * 再失焦时触发对值的 trim onChange 给用户
+     */
+    trimValueOnBlur?: boolean;
+    /**
+     * 输入框占位符
+     */
+    placeholder?: string;
+    /**
+     * 值改变时的回调
+     */
+    onChange?: (value: string, evt: React.ChangeEvent<any>) => void;
+    /**
+     * 输入框聚焦时的回调
+     */
+    onFocus?: (evt: React.FocusEvent<any>) => void;
+    /**
+     * 输入框失焦时的回调
+     */
+    onBlur?: (evt: React.FocusEvent<any>) => void;
+    /**
+     * 设置输入框类型，支持原生 input 的 type 属性所有值
+     */
+    type?: 'text' | 'id' | 'tel' | 'card' | 'amount' | 'email' | string;
+    /** 。暂不对外暴露
+     * @private
+     */
+    clearElementRef?: any;
+}
+export declare type useInputReturn = ReturnType<typeof useInput>;

package/lib/types/utils/index.d.ts

@@ -17,7 +17,15 @@ export declare const pureCard: (val: string) => string;
  * 金额自动生成小数
  * @param {string} val  需要处理的值
  */
-export declare const formatAmount: (val: string) => string;
+export declare const formatAmount: (val: string, fill?: boolean) => string;
 export declare const pureAmount: (val: string) => string;
 export declare const formatEmail: (val: string) => string;
 export declare const pureEmail: (val: string) => string;
+/**
+ * 输入规则
+ */
+export declare const format: (val: string, type: string) => string;
+/**
+ * 净化规则
+ */
+export declare const pure: (val: string, type: string) => string;