bhd-components 0.9.23 → 0.9.25

package/es2017/bhdEnterInput/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const Component: {
+    (props: any): React.JSX.Element;
+    Search(props: any): React.JSX.Element;
+    TextArea(props: any): React.JSX.Element;
+    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
+    Group: React.FC<import("antd/es/input").GroupProps>;
+};
+export default Component;

package/es2017/bhdEnterInput/index.js

@@ -0,0 +1,74 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { Input } from 'antd';
+import React from 'react';
+function BaseHOC(key) {
+    return function(props) {
+        const { defaultValue, value, onChange, onPressEnter } = props;
+        const hasValue = props.hasOwnProperty('value');
+        // 用户切换到底是显示 value 还是 input
+        // 不能直接用 isOnComposition 原因是，这个值发生变化不会触发重新渲染
+        // 不能只使用 flag 原因是，setFlag 是异步的
+        const [flag, setFlag] = useState(false);
+        // 非中文输入时候显示 value。中文输入的时候显示 input
+        const [input, setInput] = useState(hasValue ? value : defaultValue);
+        useEffect(function() {
+            if (hasValue && input !== value) {
+                setInput(value);
+            }
+        }, [
+            value
+        ]);
+        const isOnCompositionRef = useRef(false);
+        function handleChange(e) {
+            setInput(e.target.value);
+            if (isOnCompositionRef.current) return;
+            onChange && onChange(e);
+        }
+        function handleComposition(e) {
+            console.log("e.type", e.type);
+            if ('compositionend' === e.type) {
+                isOnCompositionRef.current = false;
+                handleChange(e);
+            } else {
+                isOnCompositionRef.current = true;
+            }
+            if (flag !== isOnCompositionRef.current) {
+                setFlag(isOnCompositionRef.current);
+            }
+        }
+        let Component = Input;
+        if (key) {
+            //@ts-ignore
+            Component = Input[key];
+        }
+        function handlePressEnter(e) {
+            console.log("isOnCompositionisOnComposition", isOnCompositionRef.current);
+            setInput(e.target.value);
+            if (isOnCompositionRef.current) return;
+            onPressEnter && onPressEnter(e);
+        }
+        return /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({}, props), {
+            value: hasValue && !flag ? value : input,
+            onCompositionStart: handleComposition,
+            onCompositionUpdate: handleComposition,
+            onCompositionEnd: handleComposition,
+            onChange: handleChange,
+            onPressEnter: handlePressEnter
+        }));
+    };
+}
+const Component = function(props) {
+    return BaseHOC()(props);
+};
+Component.Search = function(props) {
+    return BaseHOC('Search')(props);
+};
+Component.TextArea = function(props) {
+    return BaseHOC('TextArea')(props);
+};
+Component.Password = Input.Password;
+Component.Group = Input.Group;
+export default Component;

package/es2017/bhdSelect/index.js

@@ -49,7 +49,7 @@ const BhdSelect = (props)=>{
             let list = [];
             list = children.filter((item)=>{
                 if (props.filterOption == undefined) {
-                    return item.props[search_label].includes(filterValue);
+                    return item.props[search_label] ? String(item.props[search_label]).includes(filterValue) : false;
                 } else {
                     if (typeof props.filterOption === "function") {
                         return props.filterOption(filterValue, item);

package/es2017/customerService/index.js

@@ -2,12 +2,13 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ice/jsx-runtime/jsx-runtime";
 import React, { useEffect, useState, useRef } from "react";
-import { Modal, Drawer, Input, Tooltip } from "antd";
+import { Modal, Drawer, Tooltip } from "antd";
 import message from '../message';
 import ViewImage from "../viewImage";
 // import html2canvas from "html2canvas";
 import cssStyle from "./index.module.less";
 import cssStyleOnline from "./index2.module.less";
+import Input from "../bhdEnterInput";
 let styles = cssStyle;
 if (false) {
     styles = cssStyleOnline;

package/es2017/index.d.ts

@@ -81,3 +81,4 @@ export { default as BhdSelect } from "./bhdSelect";
 export { default as BhdAppLayout } from "./bhdAppLayout";
 export { default as CustomerService } from "./customerService";
 export { default as BhdDatePicker } from "./bhdDatePicker";
+export { default as BhdEnterInput } from "./bhdEnterInput";

package/es2017/index.js

@@ -86,3 +86,4 @@ export { default as BhdSelect } from "./bhdSelect"; //封装 bhdSelect
 export { default as BhdAppLayout } from "./bhdAppLayout"; //封装 BhdAppLayout
 export { default as CustomerService } from "./customerService"; //封装 智能客服
 export { default as BhdDatePicker } from "./bhdDatePicker"; //封装 日历组件
+export { default as BhdEnterInput } from "./bhdEnterInput"; //封装 Input

package/es2017/message/index.d.ts

@@ -3,6 +3,7 @@ declare const BhdMessage: {
     customSuccess: (config: ArgsProps | string) => any;
     customWarning: (config: ArgsProps | string) => any;
     customError: (config: ArgsProps | string) => any;
+    customInfo: (config: ArgsProps | string) => any;
     open: (...arg: any) => any;
     destroy: (...arg: any) => any;
     error: (...arg: any) => any;

package/es2017/message/index.js

@@ -1,11 +1,9 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
-import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
 import * as React from "react";
 import styles from "./index.module.less";
 import { message as AntdMessage } from "antd";
 import { message } from "../bhdTipModal/modal";
-import { ExclamationCircleFilled } from "../icons/index";
 const BhdMessage = _object_spread_props(_object_spread({}, AntdMessage), {
     customSuccess: (config)=>{
         let className = styles.customSuccess;
@@ -36,13 +34,23 @@ const BhdMessage = _object_spread_props(_object_spread({}, AntdMessage), {
         if (typeof config === "string") {
             return message.error({
                 content: config,
-                className,
-                icon: /*#__PURE__*/ _jsx(ExclamationCircleFilled, {})
+                className
             });
         }
         return message.error(_object_spread_props(_object_spread({}, config), {
-            className: `${className} ${config.className || ""}`,
-            icon: config.icon || /*#__PURE__*/ _jsx(ExclamationCircleFilled, {})
+            className: `${className} ${config.className || ""}`
+        }));
+    },
+    customInfo: (config)=>{
+        let className = styles.customInfo;
+        if (typeof config === "string") {
+            return message.info({
+                content: config,
+                className
+            });
+        }
+        return message.info(_object_spread_props(_object_spread({}, config), {
+            className: `${className} ${config.className || ""}`
         }));
     },
     open: (...arg)=>message.open(...arg),

package/es2017/message/index.module.less

@@ -3,10 +3,15 @@
   :local(.customSuccess) {
     &.bhd-message-notice {
       .bhd-message-notice-content {
-        background: #5991ef !important;
+        background: #23d9c3 !important;
         color: #ffffff;
-        font-weight: 500;
+        font-weight: 600;
         font-size: 14px;
+        padding: 9.5px 16px !important;
+        border-radius: 4px !important;
+        box-shadow: 0 6px 16px 0 rgba(32, 32, 32, 0.08),
+          0 3px 6px -4px rgba(49, 49, 49, 0.12),
+          0 9px 28px 8px rgba(35, 35, 35, 0.05) !important;
         & > .bhd-message-success {
           & > .anticon {
             color: #ffffff;
@@ -18,9 +23,10 @@
             line-height: 0;
             text-align: center;
             text-transform: none;
-            vertical-align: -0.125em;
+            vertical-align: middle;
             text-rendering: optimizeLegibility;
             -webkit-font-smoothing: antialiased;
+            transform: translateY(-1.25px);
           }
         }
       }
@@ -30,10 +36,15 @@
   :local(.customWarning) {
     &.bhd-message-notice {
       .bhd-message-notice-content {
-        background-color: #fadb14 !important;
+        background-color: #ffc107 !important;
         color: #ffffff;
-        font-weight: 500;
+        font-weight: 600;
         font-size: 14px;
+        padding: 9.5px 16px !important;
+        border-radius: 4px !important;
+        box-shadow: 0 6px 16px 0 rgba(32, 32, 32, 0.08),
+          0 3px 6px -4px rgba(49, 49, 49, 0.12),
+          0 9px 28px 8px rgba(35, 35, 35, 0.05) !important;
         .bhd-message-warning {
           & > .anticon {
             color: #ffffff;
@@ -45,23 +56,28 @@
             line-height: 0;
             text-align: center;
             text-transform: none;
-            vertical-align: -0.125em;
+            vertical-align: middle;
             text-rendering: optimizeLegibility;
             -webkit-font-smoothing: antialiased;
+            transform: translateY(-1.25px);
           }
         }
       }
     }
   }
 
-
   :local(.customError) {
     &.bhd-message-notice {
       .bhd-message-notice-content {
         background-color: #f8700c !important;
         color: #ffffff;
-        font-weight: 500;
+        font-weight: 600;
         font-size: 14px;
+        padding: 9.5px 16px !important;
+        border-radius: 4px !important;
+        box-shadow: 0 6px 16px 0 rgba(32, 32, 32, 0.08),
+          0 3px 6px -4px rgba(49, 49, 49, 0.12),
+          0 9px 28px 8px rgba(35, 35, 35, 0.05) !important;
         .bhd-message-error {
           & > .anticon {
             color: #ffffff;
@@ -73,9 +89,43 @@
             line-height: 0;
             text-align: center;
             text-transform: none;
-            vertical-align: -0.125em;
+            vertical-align: middle;
+            text-rendering: optimizeLegibility;
+            -webkit-font-smoothing: antialiased;
+            transform: translateY(-1.25px);
+          }
+        }
+      }
+    }
+  }
+
+  :local(.customInfo) {
+    &.bhd-message-notice {
+      .bhd-message-notice-content {
+        background: #5991ef !important;
+        color: #ffffff;
+        font-weight: 600;
+        font-size: 14px;
+        padding: 9.5px 16px !important;
+        border-radius: 4px !important;
+        box-shadow: 0 6px 16px 0 rgba(32, 32, 32, 0.08),
+          0 3px 6px -4px rgba(49, 49, 49, 0.12),
+          0 9px 28px 8px rgba(35, 35, 35, 0.05) !important;
+        & > .bhd-message-info {
+          & > .anticon {
+            color: #ffffff;
+            font-size: 14px;
+            display: inline-flex;
+            align-items: center;
+            color: inherit;
+            font-style: normal;
+            line-height: 0;
+            text-align: center;
+            text-transform: none;
+            vertical-align: middle;
             text-rendering: optimizeLegibility;
             -webkit-font-smoothing: antialiased;
+            transform: translateY(-1.25px);
           }
         }
       }

package/esm/bhdEnterInput/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const Component: {
+    (props: any): React.JSX.Element;
+    Search(props: any): React.JSX.Element;
+    TextArea(props: any): React.JSX.Element;
+    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
+    Group: React.FC<import("antd/es/input").GroupProps>;
+};
+export default Component;

package/esm/bhdEnterInput/index.js

@@ -0,0 +1,75 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { Input } from "antd";
+import React from "react";
+function BaseHOC(key) {
+    return function(props) {
+        var handleChange = function handleChange(e) {
+            setInput(e.target.value);
+            if (isOnCompositionRef.current) return;
+            onChange && onChange(e);
+        };
+        var handleComposition = function handleComposition(e) {
+            console.log("e.type", e.type);
+            if ("compositionend" === e.type) {
+                isOnCompositionRef.current = false;
+                handleChange(e);
+            } else {
+                isOnCompositionRef.current = true;
+            }
+            if (flag !== isOnCompositionRef.current) {
+                setFlag(isOnCompositionRef.current);
+            }
+        };
+        var handlePressEnter = function handlePressEnter(e) {
+            console.log("isOnCompositionisOnComposition", isOnCompositionRef.current);
+            setInput(e.target.value);
+            if (isOnCompositionRef.current) return;
+            onPressEnter && onPressEnter(e);
+        };
+        var defaultValue = props.defaultValue, value = props.value, onChange = props.onChange, onPressEnter = props.onPressEnter;
+        var hasValue = props.hasOwnProperty("value");
+        // 用户切换到底是显示 value 还是 input
+        // 不能直接用 isOnComposition 原因是，这个值发生变化不会触发重新渲染
+        // 不能只使用 flag 原因是，setFlag 是异步的
+        var _useState = _sliced_to_array(useState(false), 2), flag = _useState[0], setFlag = _useState[1];
+        // 非中文输入时候显示 value。中文输入的时候显示 input
+        var _useState1 = _sliced_to_array(useState(hasValue ? value : defaultValue), 2), input = _useState1[0], setInput = _useState1[1];
+        useEffect(function() {
+            if (hasValue && input !== value) {
+                setInput(value);
+            }
+        }, [
+            value
+        ]);
+        var isOnCompositionRef = useRef(false);
+        var Component = Input;
+        if (key) {
+            //@ts-ignore
+            Component = Input[key];
+        }
+        return /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({}, props), {
+            value: hasValue && !flag ? value : input,
+            onCompositionStart: handleComposition,
+            onCompositionUpdate: handleComposition,
+            onCompositionEnd: handleComposition,
+            onChange: handleChange,
+            onPressEnter: handlePressEnter
+        }));
+    };
+}
+var Component = function Component(props) {
+    return BaseHOC()(props);
+};
+Component.Search = function(props) {
+    return BaseHOC("Search")(props);
+};
+Component.TextArea = function(props) {
+    return BaseHOC("TextArea")(props);
+};
+Component.Password = Input.Password;
+Component.Group = Input.Group;
+export default Component;

package/esm/bhdSelect/index.js

@@ -52,7 +52,7 @@ var BhdSelect = function(props) {
             var list = [];
             list = children.filter(function(item) {
                 if (props.filterOption == undefined) {
-                    return item.props[search_label].includes(filterValue);
+                    return item.props[search_label] ? String(item.props[search_label]).includes(filterValue) : false;
                 } else {
                     if (typeof props.filterOption === "function") {
                         return props.filterOption(filterValue, item);

package/esm/customerService/index.js

@@ -6,12 +6,13 @@ import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ice/jsx-runtime/jsx-runtime";
 import React, { useEffect, useState, useRef } from "react";
-import { Modal, Drawer, Input, Tooltip } from "antd";
+import { Modal, Drawer, Tooltip } from "antd";
 import message from "../message";
 import ViewImage from "../viewImage";
 // import html2canvas from "html2canvas";
 import cssStyle from "./index.module.less";
 import cssStyleOnline from "./index2.module.less";
+import Input from "../bhdEnterInput";
 var styles = cssStyle;
 if (false) {
     styles = cssStyleOnline;

package/esm/index.d.ts

@@ -81,3 +81,4 @@ export { default as BhdSelect } from "./bhdSelect";
 export { default as BhdAppLayout } from "./bhdAppLayout";
 export { default as CustomerService } from "./customerService";
 export { default as BhdDatePicker } from "./bhdDatePicker";
+export { default as BhdEnterInput } from "./bhdEnterInput";

package/esm/index.js

@@ -86,3 +86,4 @@ export { default as BhdSelect } from "./bhdSelect"; //封装 bhdSelect
 export { default as BhdAppLayout } from "./bhdAppLayout"; //封装 BhdAppLayout
 export { default as CustomerService } from "./customerService"; //封装 智能客服
 export { default as BhdDatePicker } from "./bhdDatePicker"; //封装 日历组件
+export { default as BhdEnterInput } from "./bhdEnterInput"; //封装 Input

package/esm/message/index.d.ts

@@ -3,6 +3,7 @@ declare const BhdMessage: {
     customSuccess: (config: ArgsProps | string) => any;
     customWarning: (config: ArgsProps | string) => any;
     customError: (config: ArgsProps | string) => any;
+    customInfo: (config: ArgsProps | string) => any;
     open: (...arg: any) => any;
     destroy: (...arg: any) => any;
     error: (...arg: any) => any;

package/esm/message/index.js

@@ -2,12 +2,10 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 var _message, _message1, _message2, _message3, _message4, _message5, _message6, _message7, _message8;
-import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
 import * as React from "react";
 import styles from "./index.module.less";
 import { message as AntdMessage } from "antd";
 import { message } from "../bhdTipModal/modal";
-import { ExclamationCircleFilled } from "../icons/index";
 var BhdMessage = _object_spread_props(_object_spread({}, AntdMessage), {
     customSuccess: function(config) {
         var className = styles.customSuccess;
@@ -38,13 +36,23 @@ var BhdMessage = _object_spread_props(_object_spread({}, AntdMessage), {
         if (typeof config === "string") {
             return message.error({
                 content: config,
-                className: className,
-                icon: /*#__PURE__*/ _jsx(ExclamationCircleFilled, {})
+                className: className
             });
         }
         return message.error(_object_spread_props(_object_spread({}, config), {
-            className: "".concat(className, " ").concat(config.className || ""),
-            icon: config.icon || /*#__PURE__*/ _jsx(ExclamationCircleFilled, {})
+            className: "".concat(className, " ").concat(config.className || "")
+        }));
+    },
+    customInfo: function(config) {
+        var className = styles.customInfo;
+        if (typeof config === "string") {
+            return message.info({
+                content: config,
+                className: className
+            });
+        }
+        return message.info(_object_spread_props(_object_spread({}, config), {
+            className: "".concat(className, " ").concat(config.className || "")
         }));
     },
     open: function() {

package/esm/message/index.module.less

@@ -3,10 +3,15 @@
   :local(.customSuccess) {
     &.bhd-message-notice {
       .bhd-message-notice-content {
-        background: #5991ef !important;
+        background: #23d9c3 !important;
         color: #ffffff;
-        font-weight: 500;
+        font-weight: 600;
         font-size: 14px;
+        padding: 9.5px 16px !important;
+        border-radius: 4px !important;
+        box-shadow: 0 6px 16px 0 rgba(32, 32, 32, 0.08),
+          0 3px 6px -4px rgba(49, 49, 49, 0.12),
+          0 9px 28px 8px rgba(35, 35, 35, 0.05) !important;
         & > .bhd-message-success {
           & > .anticon {
             color: #ffffff;
@@ -18,9 +23,10 @@
             line-height: 0;
             text-align: center;
             text-transform: none;
-            vertical-align: -0.125em;
+            vertical-align: middle;
             text-rendering: optimizeLegibility;
             -webkit-font-smoothing: antialiased;
+            transform: translateY(-1.25px);
           }
         }
       }
@@ -30,10 +36,15 @@
   :local(.customWarning) {
     &.bhd-message-notice {
       .bhd-message-notice-content {
-        background-color: #fadb14 !important;
+        background-color: #ffc107 !important;
         color: #ffffff;
-        font-weight: 500;
+        font-weight: 600;
         font-size: 14px;
+        padding: 9.5px 16px !important;
+        border-radius: 4px !important;
+        box-shadow: 0 6px 16px 0 rgba(32, 32, 32, 0.08),
+          0 3px 6px -4px rgba(49, 49, 49, 0.12),
+          0 9px 28px 8px rgba(35, 35, 35, 0.05) !important;
         .bhd-message-warning {
           & > .anticon {
             color: #ffffff;
@@ -45,23 +56,28 @@
             line-height: 0;
             text-align: center;
             text-transform: none;
-            vertical-align: -0.125em;
+            vertical-align: middle;
             text-rendering: optimizeLegibility;
             -webkit-font-smoothing: antialiased;
+            transform: translateY(-1.25px);
           }
         }
       }
     }
   }
 
-
   :local(.customError) {
     &.bhd-message-notice {
       .bhd-message-notice-content {
         background-color: #f8700c !important;
         color: #ffffff;
-        font-weight: 500;
+        font-weight: 600;
         font-size: 14px;
+        padding: 9.5px 16px !important;
+        border-radius: 4px !important;
+        box-shadow: 0 6px 16px 0 rgba(32, 32, 32, 0.08),
+          0 3px 6px -4px rgba(49, 49, 49, 0.12),
+          0 9px 28px 8px rgba(35, 35, 35, 0.05) !important;
         .bhd-message-error {
           & > .anticon {
             color: #ffffff;
@@ -73,9 +89,43 @@
             line-height: 0;
             text-align: center;
             text-transform: none;
-            vertical-align: -0.125em;
+            vertical-align: middle;
+            text-rendering: optimizeLegibility;
+            -webkit-font-smoothing: antialiased;
+            transform: translateY(-1.25px);
+          }
+        }
+      }
+    }
+  }
+
+  :local(.customInfo) {
+    &.bhd-message-notice {
+      .bhd-message-notice-content {
+        background: #5991ef !important;
+        color: #ffffff;
+        font-weight: 600;
+        font-size: 14px;
+        padding: 9.5px 16px !important;
+        border-radius: 4px !important;
+        box-shadow: 0 6px 16px 0 rgba(32, 32, 32, 0.08),
+          0 3px 6px -4px rgba(49, 49, 49, 0.12),
+          0 9px 28px 8px rgba(35, 35, 35, 0.05) !important;
+        & > .bhd-message-info {
+          & > .anticon {
+            color: #ffffff;
+            font-size: 14px;
+            display: inline-flex;
+            align-items: center;
+            color: inherit;
+            font-style: normal;
+            line-height: 0;
+            text-align: center;
+            text-transform: none;
+            vertical-align: middle;
             text-rendering: optimizeLegibility;
             -webkit-font-smoothing: antialiased;
+            transform: translateY(-1.25px);
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bhd-components",
-  "version": "0.9.23",
+  "version": "0.9.25",
   "description": "组件功能描述",
   "config": {
     "commitizen": {