@hi-ui/input 4.0.0-alpha.3 → 4.0.0-alpha.30

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/TextArea.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { HiBaseAppearanceEnum, HiBaseHTMLFieldProps } from '@hi-ui/core';
+import { UseInputProps } from './use-input';
+/**
+ * 动态文本域输入框
+ *
+ *  @TODO:
+ * 1. 支持带数字展示
+ * 2. 支持自适应行高大小
+ * 3. 支持清空按钮
+ * 4. 支持最大最小行支持
+ * 5. 手动聚焦支持额外配置
+ */
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement | null>>;
+export interface TextAreaProps extends HiBaseHTMLFieldProps<'textarea'>, Omit<UseInputProps, 'onFocus' | 'onBlur' | 'onChange' | 'type'> {
+    /**
+     * 设置输入框尺寸
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * 设置展现形式
+     * 其中 `underline` 内部使用，不对外提供支持（风格去线型化：由线性过渡到面性）
+     */
+    appearance?: HiBaseAppearanceEnum | 'underline';
+    /**
+     * 值改变时回调
+     */
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}

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 './TextArea';
+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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/input",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.30",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -43,21 +43,24 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/classname": "^4.0.0-alpha.1",
-    "@hi-ui/core-css": "^4.0.0-alpha.0",
-    "@hi-ui/env": "^4.0.0-alpha.1",
-    "@hi-ui/icons": "^4.0.0-alpha.3",
-    "@hi-ui/use-merge-refs": "^4.0.0-alpha.1",
-    "@hi-ui/use-uncontrolled-state": "^4.0.0-alpha.1"
+    "@hi-ui/classname": "^4.0.0-alpha.3",
+    "@hi-ui/core": "^4.0.0-alpha.18",
+    "@hi-ui/core-css": "^4.0.0-alpha.13",
+    "@hi-ui/dom-utils": "^4.0.0-alpha.7",
+    "@hi-ui/env": "^4.0.0-alpha.5",
+    "@hi-ui/icons": "^4.0.0-alpha.26",
+    "@hi-ui/use-latest": "^4.0.0-alpha.5",
+    "@hi-ui/use-merge-refs": "^4.0.0-alpha.5",
+    "@hi-ui/use-uncontrolled-state": "^4.0.0-alpha.13"
   },
   "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": ">=16.8.6",
+    "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/hi-build": "^4.0.0-alpha.1",
+    "@hi-ui/hi-build": "^4.0.0-alpha.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "2a7c4aae2b19819b9391b6a2b6a19d332e067353"
+  "gitHead": "f001a9fe152b0f84d1a88b8782c38e1527020070"
 }