linkmore-design 1.1.13-alpha.1 → 1.1.13-alpha.10

package/es/Form/WrapperItem.js

@@ -0,0 +1,217 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import { throttle } from 'lodash';
+import Row from '../Row';
+import Col from '../Col';
+
+var icon = require('./images/icon_collapse.svg'); // 行个数 => 在24份中占用的分数
+
+
+var rowMap = new Map([[5, [4, 1]], [4, [5, 1]], [3, [7, 1]]]);
+
+var Title = function Title(props) {
+  var title = props.title,
+      onToggle = props.onToggle;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "form_responsive_group_title",
+    onClick: function onClick() {
+      setVisible(!visible);
+      onToggle && onToggle(!visible);
+    }
+  }, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement("img", {
+    src: icon,
+    className: !visible ? 'open' : '',
+    alt: ""
+  }));
+};
+
+var List = function List(props) {
+  var customizeChildren = props.children,
+      countPerRow = props.countPerRow,
+      title = props.title,
+      user = props.user;
+
+  var _rowMap$get = rowMap.get(countPerRow),
+      _rowMap$get2 = _slicedToArray(_rowMap$get, 2),
+      colSpan = _rowMap$get2[0],
+      colSpace = _rowMap$get2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      visible = _useState4[0],
+      setVisible = _useState4[1]; // 最终的结果
+
+
+  var rowlist = useMemo(function () {
+    var _a;
+
+    var children = []; // 收集(满了就重置)
+
+    var collection = [];
+    var result = [];
+
+    if (!Array.isArray(customizeChildren)) {
+      children = [customizeChildren];
+    }
+
+    children = Array.prototype.slice.call(customizeChildren).flat();
+
+    if (user) {
+      result.push( /*#__PURE__*/React.createElement(Title, {
+        title: title,
+        onToggle: function onToggle(value) {
+          setVisible(value);
+        }
+      }));
+    } // 一行
+
+
+    function generatorRow() {
+      var node = /*#__PURE__*/React.createElement(Row, null, collection.map(function (child, index) {
+        if (index !== collection.length - 1) {
+          return /*#__PURE__*/React.createElement(React.Fragment, {
+            key: index
+          }, /*#__PURE__*/React.createElement(Col, {
+            span: colSpan
+          }, child), /*#__PURE__*/React.createElement(Col, {
+            span: colSpace
+          }));
+        }
+
+        return /*#__PURE__*/React.createElement(Col, {
+          span: colSpan,
+          key: index
+        }, child);
+      }));
+      result.push(node);
+      collection.length = 0;
+    }
+
+    for (var i = 0; i < children.length; i += 1) {
+      var child = children[i]; // 过滤掉React.Fragment
+
+      while (child.type === Symbol.for('react.fragment')) {
+        if (Array.isArray(child.props.children)) {
+          var _children;
+
+          (_children = children).splice.apply(_children, [i, 1].concat(_toConsumableArray(child.props.children)));
+
+          child = children[i];
+        } else {
+          child = child.props.children;
+        }
+      }
+
+      if (child) {
+        if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.responsive) {
+          collection.push(child);
+
+          if (collection.length && collection.length === countPerRow) {
+            generatorRow();
+          }
+        } else if (collection.length) {
+          generatorRow();
+          result.push(child);
+        } else {
+          result.push(child);
+        }
+      }
+    }
+
+    if (collection.length) {
+      generatorRow();
+    }
+
+    return result;
+  }, [customizeChildren, countPerRow, user, title]);
+  var needRenderList = rowlist;
+
+  if (!visible && needRenderList.length) {
+    needRenderList = [needRenderList[0]];
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, needRenderList.map(function (child, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, child);
+  }));
+};
+
+var WrapperItem = function WrapperItem(props) {
+  var user = props.user;
+  var targetRef = useRef(null);
+
+  var _useState5 = useState({
+    width: '100%',
+    height: '100%'
+  }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      containerSize = _useState6[0],
+      setContainerSize = _useState6[1]; // 每行的个数
+
+
+  var _useState7 = useState(5),
+      _useState8 = _slicedToArray(_useState7, 2),
+      countPerRow = _useState8[0],
+      setCountPerRow = _useState8[1];
+
+  var changeSize = function changeSize() {
+    var _a;
+
+    var maxWidth = 1824;
+
+    var _ref = ((_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {},
+        _ref$width = _ref.width,
+        width = _ref$width === void 0 ? '100%' : _ref$width;
+
+    if (width < 990) {
+      setCountPerRow(3);
+    } else if (width < 1390) {
+      setCountPerRow(4);
+    } else {
+      setCountPerRow(5);
+    }
+
+    if (width !== '100%') {
+      width -= 32;
+
+      if (width > maxWidth) {
+        if (user) {
+          width = maxWidth - 64;
+        }
+      }
+    }
+
+    setContainerSize({
+      width: width
+    });
+  };
+
+  var handResize = throttle(changeSize, 600);
+  useEffect(function () {
+    changeSize();
+    window.addEventListener('resize', handResize);
+    return function () {
+      window.removeEventListener('resize', handResize);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "lm_container_wrapper",
+    ref: targetRef
+  }, /*#__PURE__*/React.createElement("div", {
+    style: Object.assign(Object.assign({}, containerSize), {
+      margin: '0 auto'
+    })
+  }, /*#__PURE__*/React.createElement(List, Object.assign({}, props, {
+    countPerRow: countPerRow
+  })))));
+};
+
+export default WrapperItem;

package/es/Form/container.js

@@ -38,19 +38,7 @@ var LMContainer = function LMContainer(props) {
     var width = containerSize.width,
         height = containerSize.height;
     var responsiveCls = responsive && width !== '100%' ? 'responsive' : '';
-    var lm_col = '';
-
-    if (responsiveCls) {
-      if (parseInt(width) < 990) {
-        lm_col = 'lm_col_3';
-      } else if (parseInt(width) < 1390) {
-        lm_col = 'lm_col_4';
-      } else {
-        lm_col = 'lm_col_5';
-      }
-    }
-
-    var classes = classNames(className, prefixCls, responsiveCls, lm_col);
+    var classes = classNames(className, prefixCls, responsiveCls);
     return /*#__PURE__*/React.createElement("div", Object.assign({
       className: classes
     }, others, {

package/es/Form/images/icon_collapse.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='none' version='1.1' width='16' height='16' viewBox='0 0 16 16'><defs><clipPath id='master_svg0_sa1497_9860'><rect x='0' y='0' width='16' height='16' rx='0'/></clipPath></defs><g clipPath='url(#master_svg0_sa1497_9860)'><g style='mix-blend-mode:passthrough'><path d='M13.4609,5.384111L9.22915,10.462240000000001Q8.7494,11.03795,8,11.03795Q7.2506,11.03795,6.770849999999999,10.462240000000001L2.539067,5.384111L3.460933,4.615889L7.69271,9.69402Q7.81265,9.83795,8,9.83795Q8.18735,9.83795,8.30729,9.69402L12.53907,4.615889L13.4609,5.384111ZM13.6,5Q13.6,5.0590948000000004,13.5885,5.117054Q13.5769,5.175014,13.5543,5.22961Q13.5317,5.284207,13.4989,5.333342Q13.4661,5.382478,13.4243,5.424264Q13.3825,5.46605,13.3333,5.498882Q13.2842,5.531713,13.2296,5.554328Q13.175,5.576942,13.1171,5.588471Q13.0591,5.6,13,5.6Q12.94091,5.6,12.88295,5.588471Q12.82499,5.576942,12.77039,5.554328Q12.71579,5.531713,12.66666,5.498882Q12.61752,5.46605,12.57573,5.424264Q12.53395,5.382478,12.50112,5.333342Q12.46828,5.284207,12.44567,5.22961Q12.42306,5.175014,12.41153,5.117054Q12.4,5.0590948000000004,12.4,5Q12.4,4.9409051999999996,12.41153,4.882946Q12.42306,4.824986,12.44567,4.77039Q12.46828,4.715793,12.50112,4.666658Q12.53395,4.617522,12.57574,4.575736Q12.61752,4.53395,12.66666,4.501118Q12.71579,4.468287,12.77039,4.445672Q12.82499,4.423058,12.88295,4.411529Q12.94091,4.4,13,4.4Q13.0591,4.4,13.1171,4.411529Q13.175,4.423058,13.2296,4.445672Q13.2842,4.468287,13.3333,4.501118Q13.3825,4.53395,13.4243,4.575736Q13.4661,4.617522,13.4989,4.666658Q13.5317,4.715793,13.5543,4.77039Q13.5769,4.824986,13.5885,4.882946Q13.6,4.9409051999999996,13.6,5ZM3.6,5Q3.6,5.0590948000000004,3.588471,5.117054Q3.576942,5.175014,3.554328,5.22961Q3.531713,5.284207,3.498882,5.333342Q3.46605,5.382478,3.424264,5.424264Q3.382478,5.46605,3.333342,5.498882Q3.284207,5.531713,3.22961,5.554328Q3.175014,5.576942,3.117054,5.588471Q3.0590948,5.6,3,5.6Q2.9409052,5.6,2.882946,5.588471Q2.824986,5.576942,2.77039,5.554328Q2.715793,5.531713,2.666658,5.498882Q2.617522,5.46605,2.575736,5.424264Q2.53395,5.382478,2.501118,5.333342Q2.468287,5.284207,2.445672,5.22961Q2.423058,5.175014,2.411529,5.117054Q2.4,5.0590948000000004,2.4,5Q2.4,4.9409051999999996,2.411529,4.882946Q2.423058,4.824986,2.445672,4.77039Q2.468287,4.715793,2.501118,4.666658Q2.53395,4.617522,2.575736,4.575736Q2.617522,4.53395,2.666658,4.501118Q2.715793,4.468287,2.77039,4.445672Q2.824986,4.423058,2.882946,4.411529Q2.9409052,4.4,3,4.4Q3.0590948,4.4,3.117054,4.411529Q3.175014,4.423058,3.22961,4.445672Q3.284207,4.468287,3.333342,4.501118Q3.382478,4.53395,3.424264,4.575736Q3.46605,4.617522,3.498882,4.666658Q3.531713,4.715793,3.554328,4.77039Q3.576942,4.824986,3.588471,4.882946Q3.6,4.9409051999999996,3.6,5Z' fill='#262626' fillOpacity='1'/></g></g></svg>

package/es/Form/index.d.ts

@@ -9,6 +9,7 @@ import type { FormItemProps } from './FormItem';
 import List from './FormList';
 import type { FormListFieldData, FormListOperation, FormListProps } from './FormList';
 import useFormInstance from './hooks/useFormInstance';
+import Wrapper from './FormWrapper';
 declare type InternalFormType = typeof InternalForm;
 interface FormInterface extends InternalFormType {
     useForm: typeof useForm;
@@ -18,6 +19,7 @@ interface FormInterface extends InternalFormType {
     List: typeof List;
     ErrorList: typeof ErrorList;
     Provider: typeof FormProvider;
+    Wrapper: typeof Wrapper;
     /** @deprecated Only for warning usage. Do not use. */
     create: () => void;
 }

package/es/Form/index.js

@@ -5,6 +5,7 @@ import InternalForm, { useForm, useWatch } from './Form';
 import Item from './FormItem';
 import List from './FormList';
 import useFormInstance from './hooks/useFormInstance';
+import Wrapper from './FormWrapper';
 var Form = InternalForm;
 Form.Item = Item;
 Form.List = List;
@@ -18,4 +19,5 @@ Form.create = function () {
   warning(false, 'Form', 'antd v4 removed `Form.create`. Please remove or use `@ant-design/compatible` instead.');
 };
 
+Form.Wrapper = Wrapper;
 export default Form;

package/es/Form/interface.d.ts

@@ -1,3 +1,15 @@
+import { FormInstance, Store } from 'rc-field-form/lib/interface';
+import React from 'react';
 export { InternalNamePath, NamePath, Store, StoreValue } from 'rc-field-form/lib/interface';
 export { Options as ScrollOptions } from 'scroll-into-view-if-needed';
 export declare type FormLabelAlign = 'left' | 'right';
+export declare type RenderProps = (values: Store, form: FormInstance) => JSX.Element | React.ReactNode;
+export interface ISize {
+    width?: number;
+    height?: number;
+}
+export interface IWrapper {
+    children: React.ReactNode | RenderProps;
+    title?: string;
+    user?: boolean;
+}

package/es/Form/style/index.css

@@ -6613,55 +6613,48 @@ p {
 .lm_form.ant-form.ant-form-inline .ant-form-item-label {
   text-align: left;
 }
-.lm_container_wrapper {
-  overflow: auto;
-}
-.lm_container_wrapper .lm_container.responsive {
-  min-width: 990px;
-}
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item-responsive {
-  margin-right: 24px;
-}
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item-responsive .ant-form-item-control {
-  width: 100%;
+.lm_form_responsive_box .lm_form {
+  background: #f0f0f0;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item {
-  width: 100%;
-  margin-right: 0;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item-responsive {
-  width: calc(33.3333% - 16px);
-  margin-right: 24px;
+.lm_form_responsive_box .lm_form > .lm_container_wrapper {
+  background: #f0f0f0;
+  margin-bottom: 0;
+  border-radius: 0;
+  padding: 16px;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item-responsive.nth-three {
-  margin-right: 0;
+.lm_container_wrapper {
+  overflow: auto;
+  background: #fff;
+  margin-bottom: 16px;
+  border-radius: 2px;
+  padding: 0;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item {
+.lm_container_wrapper .ant-cascader {
   width: 100%;
-  margin-right: 0;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item-responsive {
-  width: calc(25% - 18px);
-  margin-right: 24px;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item-responsive.nth-four {
-  margin-right: 0;
+.form_responsive_group_title {
+  display: flex;
+  font-size: 14px;
+  line-height: 22px;
+  margin: 0;
+  padding-top: 16px;
+  color: var(--color-85);
+  flex-basis: 100%;
+  align-items: center;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item {
-  width: 100%;
-  margin-right: 0;
+.form_responsive_group_title h3 {
+  flex: 1;
+  font-weight: medium;
+  font-size: 14px;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item-responsive {
-  width: calc(20% - 96px / 5);
-  margin-right: 24px;
+.form_responsive_group_title img {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  transition: transform 0.24s;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item-responsive.nth-five {
-  margin-right: 0;
+.form_responsive_group_title img.open {
+  transform: rotate(180deg);
 }
 .lm_form-item-tip-error .ant-form-item-explain {
   width: 100%;

package/es/Form/style/variables.css

@@ -6101,55 +6101,48 @@
 .lm_form.ant-form.ant-form-inline .ant-form-item-label {
   text-align: left;
 }
-.lm_container_wrapper {
-  overflow: auto;
-}
-.lm_container_wrapper .lm_container.responsive {
-  min-width: 990px;
-}
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+.lm_form_responsive_box .lm_form {
+  background: #f0f0f0;
 }
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item-responsive {
-  margin-right: 24px;
-}
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item-responsive .ant-form-item-control {
-  width: 100%;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item {
-  width: 100%;
-  margin-right: 0;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item-responsive {
-  width: calc(33.3333% - 16px);
-  margin-right: 24px;
+.lm_form_responsive_box .lm_form > .lm_container_wrapper {
+  background: #f0f0f0;
+  margin-bottom: 0;
+  border-radius: 0;
+  padding: 16px;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item-responsive.nth-three {
-  margin-right: 0;
+.lm_container_wrapper {
+  overflow: auto;
+  background: #fff;
+  margin-bottom: 16px;
+  border-radius: 2px;
+  padding: 0;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item {
+.lm_container_wrapper .ant-cascader {
   width: 100%;
-  margin-right: 0;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item-responsive {
-  width: calc(25% - 18px);
-  margin-right: 24px;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item-responsive.nth-four {
-  margin-right: 0;
+.form_responsive_group_title {
+  display: flex;
+  font-size: 14px;
+  line-height: 22px;
+  margin: 0;
+  padding-top: 16px;
+  color: var(--color-85);
+  flex-basis: 100%;
+  align-items: center;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item {
-  width: 100%;
-  margin-right: 0;
+.form_responsive_group_title h3 {
+  flex: 1;
+  font-weight: medium;
+  font-size: 14px;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item-responsive {
-  width: calc(20% - 96px / 5);
-  margin-right: 24px;
+.form_responsive_group_title img {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  transition: transform 0.24s;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item-responsive.nth-five {
-  margin-right: 0;
+.form_responsive_group_title img.open {
+  transform: rotate(180deg);
 }
 .lm_form-item-tip-error .ant-form-item-explain {
   width: 100%;

package/es/IconFont/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const IconFont: import("react").FC<import("@ant-design/icons/lib/components/IconFont").IconFontProps<string>>;
+declare const IconFont: (props: any) => JSX.Element;
 export default IconFont;

package/es/IconFont/index.js

@@ -1,7 +1,21 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import React, { useMemo } from 'react';
 import { createFromIconfontCN } from '@ant-design/icons';
-var IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_2966019_neaxovtw4w.js' // 在 iconfont.cn 上生成
-  // scriptUrl: require('./font/iconfont.js'),
+import ConfigProvider from '../ConfigProvider';
+var ConfigContext = ConfigProvider.ConfigContext;
+
+var IconFont = function IconFont(props) {
+  var _React$useContext = React.useContext(ConfigContext),
+      iconUrl = _React$useContext.iconUrl;
+
+  var resetUrl = useMemo(function () {
+    if (!iconUrl) return [];
+    return Array.isArray(iconUrl) ? iconUrl : [iconUrl];
+  }, [iconUrl]);
+  var Component = createFromIconfontCN({
+    scriptUrl: ['//at.alicdn.com/t/c/font_2966019_ac9pzkeuo0e.js'].concat(_toConsumableArray(resetUrl))
+  });
+  return /*#__PURE__*/React.createElement(Component, Object.assign({}, props));
+};
 
-});
 export default IconFont;

package/es/ImageViewer/components/Operate.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { IconFont } from 'linkmore-design';
-import { ZoomOutOutlined } from '@ant-design/icons';
 
 var Operate = function Operate(_ref) {
   var instance = _ref.instance;
@@ -20,20 +19,18 @@ var Operate = function Operate(_ref) {
     onClick: function onClick(e) {
       return handleTranform(e, 'zoomIn');
     }
-  }), /*#__PURE__*/React.createElement(ZoomOutOutlined, {
+  }), /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-icon_m_narrow",
     onClick: function onClick(e) {
       return handleTranform(e, 'zoomOut');
-    },
-    style: {
-      fontSize: 22
     }
   }), /*#__PURE__*/React.createElement(IconFont, {
-    type: "lmweb-undo",
+    type: "lmweb-icon_m_turnleft-01",
     onClick: function onClick(e) {
       return handleTranform(e, 'rotateLeft');
     }
   }), /*#__PURE__*/React.createElement(IconFont, {
-    type: "lmweb-redo",
+    type: "lmweb-reload",
     onClick: function onClick(e) {
       return handleTranform(e, 'rotateRight');
     }

package/es/Input/index.js

@@ -16,17 +16,27 @@ var __rest = this && this.__rest || function (s, e) {
 
 import React, { forwardRef } from 'react';
 import IconFont from '../IconFont';
+import cn from 'classnames';
 import SizeContext from '../ConfigProvider/SizeContext';
+import DisabledContext from '../ConfigProvider/DisabledContext';
 var LmInput = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$allowClear = props.allowClear,
+  var className = props.className,
+      customSize = props.size,
+      customDisabled = props.disabled,
+      _props$allowClear = props.allowClear,
       allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
-      customizeSize = props.size,
-      rest = __rest(props, ["allowClear", "size"]);
+      rest = __rest(props // ===================== Size =====================
+  , ["className", "size", "disabled", "allowClear"]); // ===================== Size =====================
 
-  var size = customizeSize || React.useContext(SizeContext) || 'middle';
+
+  var size = customSize || React.useContext(SizeContext) || 'middle'; // ===================== Disabled =====================
+
+  var disabled = React.useContext(DisabledContext);
+  var mergedDisabled = customDisabled || disabled;
   return /*#__PURE__*/React.createElement(_Input, Object.assign({
     ref: ref,
-    className: "lm_input",
+    className: cn('lm_input', className),
+    disabled: mergedDisabled || undefined,
     size: size
   }, rest, {
     allowClear: allowClear
@@ -36,27 +46,54 @@ LmInput.Group = _Input.Group;
 LmInput.Search = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$allowClear2 = props.allowClear,
       allowClear = _props$allowClear2 === void 0 ? true : _props$allowClear2,
-      rest = __rest(props, ["allowClear"]);
+      className = props.className,
+      customSize = props.size,
+      customDisabled = props.disabled,
+      rest = __rest(props // ===================== Size =====================
+  , ["allowClear", "className", "size", "disabled"]); // ===================== Size =====================
+
+
+  var size = customSize || React.useContext(SizeContext) || 'middle'; // ===================== Disabled =====================
 
+  var disabled = React.useContext(DisabledContext);
+  var mergedDisabled = customDisabled || disabled;
   return /*#__PURE__*/React.createElement(_Input.Search, Object.assign({
     enterButton: /*#__PURE__*/React.createElement(IconFont, {
       type: "lmweb-search"
     })
   }, rest, {
     ref: ref,
+    disabled: mergedDisabled || undefined,
     allowClear: allowClear,
-    className: "lm_input_search"
+    size: size,
+    className: cn('lm_input_search', className)
   }));
 });
-LmInput.TextArea = _Input.TextArea;
+LmInput.TextArea = /*#__PURE__*/forwardRef(function (props, ref) {
+  var customSize = props.size,
+      customDisabled = props.disabled,
+      rest = __rest(props // ===================== Size =====================
+  , ["size", "disabled"]); // ===================== Size =====================
+
+
+  var size = customSize || React.useContext(SizeContext) || 'middle'; // ===================== Disabled =====================
+
+  var disabled = React.useContext(DisabledContext);
+  var mergedDisabled = customDisabled || disabled;
+  return /*#__PURE__*/React.createElement(_Input.TextArea, Object.assign({
+    size: size,
+    disabled: mergedDisabled || undefined
+  }, rest));
+});
 
 LmInput.Password = function (props) {
   var _props$allowClear3 = props.allowClear,
       allowClear = _props$allowClear3 === void 0 ? true : _props$allowClear3,
-      rest = __rest(props, ["allowClear"]);
+      className = props.className,
+      rest = __rest(props, ["allowClear", "className"]);
 
   return /*#__PURE__*/React.createElement(_Input.Password, Object.assign({
-    className: "lm_input_password",
+    className: cn('lm_input_password', className),
     iconRender: function iconRender(visible) {
       return visible ? /*#__PURE__*/React.createElement(IconFont, {
         type: "lmweb-eye"