@ecoding/components.antd 0.3.7 → 0.3.9

package/lib/core/form.list/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { FormListFieldData } from 'antd';
 interface IC {
     title: string;
+    tooltip?: string;
     require?: boolean;
     name: string;
     rules?: any;

package/lib/core/form.list/index.js

@@ -49,7 +49,7 @@ const C = ({ columns, rules, name, hideOperation, hideBottom, operation, i18n })
                         React.createElement("td", { style: tdStyle }, index + 1),
                         columns.map((column, i) => {
                             return (React.createElement("td", { style: tdStyle },
-                                React.createElement(Form.Item, { name: [field.name, column.name], rules: column.rules || [] }, column.render(field, index))));
+                                React.createElement(Form.Item, { tooltip: column.tooltip || undefined, name: [field.name, column.name], rules: column.rules || [] }, column.render(field, index))));
                         }),
                         hideOperation ? null : operation ? (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) }, operation.component)) : (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
                             React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => remove(field.name) }, i18n ? i18n.$t("global.del", '删除') : '删除')))));

package/lib/core/length-input/index.js

@@ -54,12 +54,12 @@ const LengthInput = (props) => {
         props.onChange(e);
     }, []);
     useEffect(() => {
-        setV(props.value || "");
-    }, [props]);
-    useEffect(() => {
-        const vs = props.value || "";
-        const len = getLen(vs);
-        setN(len);
+        if (props.value) {
+            const vs = props.value || "";
+            const len = getLen(vs);
+            setN(len);
+            setV(vs);
+        }
     }, [props]);
     const compositionStartHandler = useCallback(() => {
         isCompositionStart.current = true;

package/lib/core/search.input/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { InputProps } from 'antd';
+interface IItem {
+    key: any;
+    label: string;
+}
+interface IProps extends InputProps {
+    placeholder?: string;
+    value?: string;
+    action: string | (() => string);
+    actionKey?: string;
+    actionParams?: any;
+    transformItems?: (res: any) => IItem[];
+    [props: string]: any;
+}
+declare const C: React.FC<IProps>;
+export default C;

package/lib/core/search.input/index.js

@@ -0,0 +1,80 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import { Input, Dropdown } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+import throttle from '../../helpers/throttle';
+import http from '../../helpers/http';
+const C = (_a) => {
+    var { transformItems, actionKey, actionParams, value, placeholder, onChange } = _a, rest = __rest(_a, ["transformItems", "actionKey", "actionParams", "value", "placeholder", "onChange"]);
+    const isCompositionStart = useRef(false);
+    const [loading, setLoading] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [v, setV] = useState();
+    const [items, setItems] = useState([]);
+    const r = http.getRequest();
+    const action = useMemo(() => {
+        if (typeof rest.action === "string") {
+            return rest.action;
+        }
+        return rest.action();
+    }, [rest.action]);
+    const handleSearch = useCallback(throttle((vs) => {
+        setLoading(true);
+        r.get(action, Object.assign({}, actionParams || {}, { [actionKey]: vs })).then((res) => {
+            setLoading(false);
+            const temp = transformItems ? transformItems(res) : res;
+            if (temp && temp.length > 0) {
+                setOpen(true);
+                setItems(temp);
+            }
+        }).catch(e => {
+            setLoading(false);
+        });
+    }, 500, { leading: false, trailing: true }), []);
+    const keyUpHandler = useCallback((e) => {
+        let vs = e.target.value.trim();
+        setV(vs);
+        // 估计form表单会默认有onChange事件
+        onChange && onChange(vs);
+        if (action) {
+            handleSearch(vs);
+        }
+    }, []);
+    const onClick = ({ key }) => {
+        const temp = items && items.find(item => item.key === key);
+        if (temp) {
+            setV(temp.label);
+            onChange && onChange(temp.label);
+        }
+        setOpen(false);
+    };
+    const compositionStartHandler = useCallback(() => {
+        isCompositionStart.current = true;
+    }, []);
+    const compositionEndHandler = useCallback((e) => {
+        isCompositionStart.current = false;
+        keyUpHandler(e);
+    }, []);
+    useEffect(() => {
+        if (value) {
+            setV(value);
+        }
+    }, [value]);
+    return (React.createElement(Dropdown, { destroyPopupOnHide: true, open: open, menu: { items, onClick }, overlayStyle: { maxHeight: rest.maxHeight, overflowY: "auto", boxShadow: "0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)" } },
+        React.createElement(Input, Object.assign({}, rest, { value: v, placeholder: placeholder, onChange: keyUpHandler, suffix: loading ? React.createElement(LoadingOutlined, { style: { color: "#ccc" } }) : null, onCompositionStart: compositionStartHandler, onCompositionEnd: compositionEndHandler }))));
+};
+C.defaultProps = {
+    actionKey: "searchKey",
+    maxHeight: 220
+};
+export default C;

package/lib/helpers/throttle.d.ts

@@ -4,58 +4,45 @@
  * @param  {function}   func      传入函数
  * @param  {number}     wait      表示时间窗口的间隔
  * @param  {object}     [options] 如果想忽略开始边界上的调用，传入{leading: false}。 绑定的函数先执行，而不是delay后后执行。
- * @param  {boolean}    [options.leading=true] 如果想忽略开始边界上的调用，传入{leading: false}。
- * @param  {boolean}    [options.trailing=true] 如果想忽略结尾边界上的调用，传入{trailing: false}
+ * @param  {boolean}    [options.leading=true] true: 第一次不管延时都会调用一次， false: 第一次受延迟影响不掉用
+ * @param  {boolean}    [options.trailing=true] true: 最后一次一定会调用一次， false: 最后一次受延迟影响不掉用
  *
  * @return {Function}
  *
  * @example
  * const throttleCallback = throttle(callback, 100);
- *
+ */
+export default function throttle(func: Function, wait: number, options?: {
+    leading: boolean;
+    trailing: boolean;
+}): (this: any) => any;
+/**
+const Search = () => {
+    const handleOnChange = (e) => {
+        console.log(e.target.value)
+    }
+    const handleSearch = useCallback(throttle((e) => handleOnChange(e), 500), [])
 
-export default function throttle(func: Function, wait: number, options: any = {}): any {
-    let context: any;
-    let args: any;
-    let result: any;
-    let timeout: any = null;
-    // 上次执行时间点
-    let previous = 0;
-    // 延迟执行函数
-    const later = () => {
-        // 若设定了开始边界不执行选项，上次执行时间始终为0
-        previous = options.leading === false ? 0 : +new Date();
-        timeout = null;
-        result = func.apply(context, args);
-        if (!timeout) {
-            context = args = null;
-        }
-    };
-    return function f(this: any) {
-        const now = +new Date();
-        // 首次执行时，如果设定了开始边界不执行选项，将上次执行时间设定为当前时间。
-        if (!previous && options.leading === false) {
-            previous = now;
-        }
-        // 延迟执行时间间隔
-        const remaining = wait - (now - previous);
-        context = this;
-        args = arguments; // eslint-disable-line
-        // 延迟时间间隔remaining小于等于0，表示上次执行至此所间隔时间已经超过一个时间窗口
-        // remaining大于时间窗口wait，表示客户端系统时间被调整过
-        if (remaining <= 0 || remaining > wait) {
-            clearTimeout(timeout);
-            timeout = null;
-            previous = now;
-            result = func.apply(context, args);
-            if (!timeout) {
-                context = args = null;
-            }
-            // 如果延迟执行不存在，且没有设定结尾边界不执行选项
-        } else if (!timeout && options.trailing !== false) {
-            timeout = setTimeout(later, remaining);
-        }
-        return result;
-    };
+    return (<Input onChange={handleSearch}  placeholder="Basic usage" />)
 }
+
+ReactDOM.render(<Search />, document.getElementById('container'));
+  
+ 
+class Search extends React.Component {
+    constructor(props) {
+      super(props)
+      this.handleSearch = throttle(this.handleOnChange, 200);
+    }
+ 
+    handleOnChange = (e) => {
+      console.log(e.target.value)
+    }
+    render() {
+        return (
+            <Input onChange={this.handleSearch} />
+        )
+    }
+}
+
  */
-export default function throttle(fn: Function, delay: number, immediate: boolean, debounce?: boolean): (this: any) => void;

package/lib/helpers/throttle.js

@@ -4,20 +4,19 @@
  * @param  {function}   func      传入函数
  * @param  {number}     wait      表示时间窗口的间隔
  * @param  {object}     [options] 如果想忽略开始边界上的调用，传入{leading: false}。 绑定的函数先执行，而不是delay后后执行。
- * @param  {boolean}    [options.leading=true] 如果想忽略开始边界上的调用，传入{leading: false}。
- * @param  {boolean}    [options.trailing=true] 如果想忽略结尾边界上的调用，传入{trailing: false}
+ * @param  {boolean}    [options.leading=true] true: 第一次不管延时都会调用一次， false: 第一次受延迟影响不掉用
+ * @param  {boolean}    [options.trailing=true] true: 最后一次一定会调用一次， false: 最后一次受延迟影响不掉用
  *
  * @return {Function}
  *
  * @example
  * const throttleCallback = throttle(callback, 100);
- *
-
-export default function throttle(func: Function, wait: number, options: any = {}): any {
-    let context: any;
-    let args: any;
-    let result: any;
-    let timeout: any = null;
+ */
+export default function throttle(func, wait, options = { leading: false, trailing: false }) {
+    let context;
+    let args;
+    let result;
+    let timeout = null;
     // 上次执行时间点
     let previous = 0;
     // 延迟执行函数
@@ -30,7 +29,7 @@ export default function throttle(func: Function, wait: number, options: any = {}
             context = args = null;
         }
     };
-    return function f(this: any) {
+    return function f() {
         const now = +new Date();
         // 首次执行时，如果设定了开始边界不执行选项，将上次执行时间设定为当前时间。
         if (!previous && options.leading === false) {
@@ -51,50 +50,84 @@ export default function throttle(func: Function, wait: number, options: any = {}
                 context = args = null;
             }
             // 如果延迟执行不存在，且没有设定结尾边界不执行选项
-        } else if (!timeout && options.trailing !== false) {
+        }
+        else if (!timeout && options.trailing !== false) {
             timeout = setTimeout(later, remaining);
         }
         return result;
     };
 }
- */
 /*
  * 频率控制 返回函数连续调用时，fn 执行频率限定为每多少时间执行一次
  * @param fn {function}  需要调用的函数
  * @param delay  {number}    延迟时间，单位毫秒
  * @param immediate  {bool} 给 immediate参数传递false 绑定的函数先执行，而不是delay后后执行。
  * @return {function}	实际调用函数
- */
-export default function throttle(fn, delay, immediate, debounce) {
+
+export default function throttle(fn: Function, delay: number, immediate: boolean, debounce?: boolean) {
     let curr = +new Date(), //当前时间
-    last_call = 0, last_exec = 0, timer = null, diff, //时间差
-    context, //上下文
-    args, exec = function () {
-        last_exec = curr;
-        fn.apply(context, args);
-    };
-    return function () {
+        last_call = 0,
+        last_exec = 0,
+        timer: any = null,
+        diff, //时间差
+        context: any, //上下文
+        args: any,
+        exec = function () {
+            last_exec = curr;
+            fn.apply(context, args);
+        };
+    return function (this: any) {
         curr = +new Date();
         context = this;
         args = arguments;
         diff = curr - (debounce ? last_call : last_exec) - delay;
         clearTimeout(timer);
+
         if (debounce) {
             if (immediate) {
                 timer = setTimeout(exec, delay);
-            }
-            else if (diff >= 0) {
+            } else if (diff >= 0) {
                 exec();
             }
-        }
-        else {
+        } else {
             if (diff >= 0) {
                 exec();
-            }
-            else if (immediate) {
+            } else if (immediate) {
                 timer = setTimeout(exec, -diff);
             }
         }
+
         last_call = curr;
     };
 }
+ */
+/**
+const Search = () => {
+    const handleOnChange = (e) => {
+        console.log(e.target.value)
+    }
+    const handleSearch = useCallback(throttle((e) => handleOnChange(e), 500), [])
+
+    return (<Input onChange={handleSearch}  placeholder="Basic usage" />)
+}
+
+ReactDOM.render(<Search />, document.getElementById('container'));
+  
+ 
+class Search extends React.Component {
+    constructor(props) {
+      super(props)
+      this.handleSearch = throttle(this.handleOnChange, 200);
+    }
+ 
+    handleOnChange = (e) => {
+      console.log(e.target.value)
+    }
+    render() {
+        return (
+            <Input onChange={this.handleSearch} />
+        )
+    }
+}
+
+ */

package/lib/index.d.ts

@@ -6,6 +6,7 @@ export { default as InjectNotification } from "./core/inject-notification";
 export { default as Confirm } from "./core/confirm";
 export { default as AsyncCascader } from "./core/async-cascader";
 export { default as LengthInput } from "./core/length-input";
+export { default as SearchInput } from "./core/search.input";
 export { default as PhoneInput } from "./core/phone-input";
 export { default as RangePicker } from "./core/range-picker";
 export { default as DatePicker } from "./core/date.picker";

package/lib/index.js

@@ -6,6 +6,7 @@ export { default as InjectNotification } from "./core/inject-notification";
 export { default as Confirm } from "./core/confirm";
 export { default as AsyncCascader } from "./core/async-cascader";
 export { default as LengthInput } from "./core/length-input";
+export { default as SearchInput } from "./core/search.input";
 export { default as PhoneInput } from "./core/phone-input";
 export { default as RangePicker } from "./core/range-picker";
 export { default as DatePicker } from "./core/date.picker";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.3.7",
+    "version": "0.3.9",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -43,5 +43,5 @@
         "antd": "^5.8.4",
         "axios": "^1.1.2"
     },
-    "gitHead": "0e0d102dcf4622c6094a3c541885ec4de90215a7"
+    "gitHead": "0566152c2eb2352226def6ca6c57b0760f603886"
 }