linkmore-design 1.0.58 → 1.0.59

package/es/Form/container.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface IContainerProps {
+    className?: string;
+    style?: React.CSSProperties;
+    responsive?: Boolean;
+}
+declare const LMContainer: React.FC<IContainerProps>;
+export default LMContainer;

package/es/Form/container.js

@@ -0,0 +1,97 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+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, { useCallback, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { throttle } from 'lodash';
+var prefixCls = 'lm_container';
+
+var LMContainer = function LMContainer(props) {
+  var children = props.children,
+      className = props.className,
+      responsive = props.responsive,
+      others = __rest(props, ["children", "className", "responsive"]);
+
+  var _useState = useState({
+    width: '100%',
+    height: '100%'
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      containerSize = _useState2[0],
+      setContainerSize = _useState2[1];
+
+  var containerWrapRef = useRef(null);
+  var throttleSize = useCallback(function () {
+    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);
+    return /*#__PURE__*/React.createElement("div", Object.assign({
+      ref: containerWrapRef,
+      className: classes
+    }, others, {
+      style: {
+        width: width,
+        height: height
+      }
+    }), children);
+  }, [containerSize, props]);
+
+  var changeSize = function changeSize() {
+    var _a;
+
+    var _ref = ((_a = containerWrapRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {},
+        _ref$width = _ref.width,
+        width = _ref$width === void 0 ? '100%' : _ref$width;
+
+    setContainerSize({
+      width: width,
+      height: '100%'
+    });
+  };
+
+  var handResize = throttle(changeSize, 600);
+  useEffect(function () {
+    setTimeout(function () {
+      changeSize();
+    }, 100);
+    window.addEventListener('resize', handResize);
+    return function () {
+      window.removeEventListener('resize', handResize);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "lm_container_wrapper",
+    ref: containerWrapRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, throttleSize());
+};
+
+export default LMContainer;

package/es/Form/index.d.ts

@@ -3,6 +3,9 @@ import { Form as AntdForm, FormInstance, FormProps, List } from 'antd';
 import useFormInstance from 'antd/lib/form/hooks/useFormInstance';
 import { FormProvider } from 'antd/lib/form/context';
 import { useForm, useWatch } from 'antd/lib/form/Form';
+export interface LmFormProps extends FormProps {
+    responsive?: Boolean;
+}
 declare const Reform: <Values = any>(props: FormProps<Values> & {
     children?: React.ReactNode;
 } & {

package/es/Form/index.js

@@ -21,12 +21,24 @@ import classnames from 'classnames';
 import useFormInstance from 'antd/lib/form/hooks/useFormInstance';
 import { FormProvider } from 'antd/lib/form/context';
 import { useForm, useWatch } from 'antd/lib/form/Form';
+import Container from './container';
 var classNamePrefix = 'lm_form';
 
 var LMForm = function LMForm(props, ref) {
   var children = props.children,
       className = props.className,
-      restProps = __rest(props, ["children", "className"]);
+      responsive = props.responsive,
+      restProps = __rest(props, ["children", "className", "responsive"]);
+
+  if (responsive) {
+    return /*#__PURE__*/React.createElement(Container, {
+      responsive: true
+    }, /*#__PURE__*/React.createElement(_Form, Object.assign({
+      ref: ref,
+      className: classnames(classNamePrefix, className),
+      colon: false
+    }, restProps), children));
+  }
 
   return /*#__PURE__*/React.createElement(_Form, Object.assign({
     ref: ref,

package/es/Form/style/index.css

@@ -506,6 +506,9 @@ html {
 .lm_form .ant-form-item {
   margin-bottom: 16px;
 }
+.lm_form .ant-form-item .ant-form-item-explain {
+  line-height: 24px;
+}
 .lm_form .ant-form-item-label {
   display: flex !important;
   align-items: center;
@@ -529,3 +532,35 @@ html {
 .lm_form .ant-form-item-control {
   width: 240px;
 }
+.lm_container_wrapper {
+  overflow: auto;
+}
+.lm_container_wrapper .lm_container.responsive {
+  min-width: 990px;
+}
+.lm_container_wrapper .lm_container.responsive .lm_form {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.lm_container_wrapper .lm_container.responsive .lm_form .ant-form-item {
+  margin-right: 24px;
+}
+.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item {
+  width: calc(33.3333% - 16px);
+}
+.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item:nth-of-type(3n) {
+  margin-right: 0;
+}
+.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item {
+  width: calc(25% - 18px);
+}
+.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item:nth-of-type(4n) {
+  margin-right: 0;
+}
+.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item {
+  width: calc(20% - 96px / 5);
+}
+.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item:nth-of-type(5n) {
+  margin-right: 0;
+}

package/es/LmFilter/baseFilter/index.js

@@ -22,7 +22,8 @@ var LmFilterBase = /*#__PURE__*/_react.default.memo(function (_ref) {
   }, /*#__PURE__*/_react.default.createElement(_fuzzySearch.default, {
     instance: instance
   }), dataSource.map(function (v, index) {
-    return /*#__PURE__*/_react.default.createElement(_components.default, {
+    var isHidden = !v.show && typeof v.show === 'boolean';
+    return isHidden ? null : /*#__PURE__*/_react.default.createElement(_components.default, {
       key: (v === null || v === void 0 ? void 0 : v.field) || index,
       instance: instance,
       item: v

package/es/LmFilter/complexFilter/drawer.js

@@ -70,7 +70,9 @@ var ListItemChecked = function ListItemChecked(_ref) {
       }
 
       if (getItem.type === 'cascader') {
-        return (0, _utils.getFlatItem)(checkedValue, getItem.data, 'parent');
+        var _getItem$props;
+
+        return (0, _utils.getFlatItem)((getItem === null || getItem === void 0 ? void 0 : (_getItem$props = getItem.props) === null || _getItem$props === void 0 ? void 0 : _getItem$props.multiple) ? checkedValue : [checkedValue], getItem.data, 'parent');
       }
 
       return (_getItem$data = getItem.data) === null || _getItem$data === void 0 ? void 0 : _getItem$data.filter(function (v) {
@@ -119,9 +121,22 @@ var ListItemChecked = function ListItemChecked(_ref) {
 
   var onTagClose = function onTagClose(val) {
     var originData = (0, _objectSpread3.default)({}, complexDrawer.data);
-    var nValue = Array.isArray(originData[field].value) ? originData[field].value.filter(function (v) {
-      return !v.includes(val);
-    }) : '';
+    var nValue = '';
+
+    if (['select', 'checkbox'].includes(getItem.type)) {
+      nValue = originData[field].value.filter(function (v) {
+        return !v.includes(val);
+      });
+    }
+
+    if (['input'].includes(getItem.type)) {
+      nValue = '';
+    }
+
+    if (['cascader'].includes(getItem.type)) {
+      nValue = [];
+    }
+
     var filterValues = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, originData), {}, (0, _defineProperty2.default)({}, field, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, originData[field]), {}, {
       value: nValue
     })));

package/es/LmFilter/components/CascaderFilter.js

@@ -13,6 +13,8 @@ require("antd/es/cascader/style");
 
 var _cascader = _interopRequireDefault(require("antd/es/cascader"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -39,6 +41,11 @@ var DropdownRender = function DropdownRender(_ref) {
       filters = _item$data === void 0 ? [] : _item$data;
   var inputRef = (0, _react.useRef)(null);
   var delayedFn = (0, _hooks.useDelayedFn)();
+  var isShowFoot = (0, _react.useMemo)(function () {
+    var _item$props;
+
+    return item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.multiple;
+  }, [item]);
 
   var handleFilter = function handleFilter(val) {
     var serachValues = filters.filter(function (v) {
@@ -77,7 +84,7 @@ var DropdownRender = function DropdownRender(_ref) {
     ref: inputRef,
     onSearch: handleFilter,
     onChange: handleFilter
-  })), dom, /*#__PURE__*/_react.default.createElement("div", {
+  })), dom, isShowFoot && /*#__PURE__*/_react.default.createElement("div", {
     className: "filter_footer"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "footer_clear",
@@ -117,11 +124,17 @@ var CascaderFilter = function CascaderFilter(_ref2) {
   }, [filterValue]);
 
   var onChange = function onChange(item, selectedOptions) {
+    var _itemProps$props;
+
+    console.log('item', item);
     setCheckedValues(item);
+
+    if (!(itemProps === null || itemProps === void 0 ? void 0 : (_itemProps$props = itemProps.props) === null || _itemProps$props === void 0 ? void 0 : _itemProps$props.multiple)) {
+      setFilterValue(item);
+    }
   };
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_cascader.default, {
-    multiple: true,
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_cascader.default, (0, _extends2.default)({}, itemProps.props, {
     options: options,
     onChange: onChange,
     defaultValue: defaultValue,
@@ -139,7 +152,7 @@ var CascaderFilter = function CascaderFilter(_ref2) {
         setOptions: setOptions
       });
     }
-  }, children));
+  }), children));
 };
 
 var _default = CascaderFilter;

package/es/LmFilter/components/DateFilter.js

@@ -9,10 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-require("antd/es/date-picker/style");
-
-var _datePicker = _interopRequireDefault(require("antd/es/date-picker"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -73,7 +69,7 @@ var RangePicker = function RangePicker(_ref) {
       className: "filter_picker_header"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "filter_picker_header_tip"
-    }, filterValue && "".concat(filterValue[0], " - ").concat(filterValue[1])), /*#__PURE__*/_react.default.createElement("div", {
+    }, defaultValue && "".concat(filterValue[0], " - ").concat(filterValue[1])), /*#__PURE__*/_react.default.createElement("div", {
       className: "filter_picker_header_operate"
     }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Radio.Group, {
       value: activeValue,
@@ -87,7 +83,7 @@ var RangePicker = function RangePicker(_ref) {
     })))), panelNode));
   };
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_datePicker.default.RangePicker, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.DatePicker.RangePicker, (0, _extends2.default)({
     picker: "date",
     separator: /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
       type: "lmweb-swap-right",
@@ -148,7 +144,7 @@ var DatePickerFilter = function DatePickerFilter(_ref2) {
     });
   }
 
-  return /*#__PURE__*/_react.default.createElement(_datePicker.default, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.DatePicker, (0, _extends2.default)({
     placeholder: "\u9009\u62E9\u65F6\u95F4"
   }, props, {
     defaultValue: defaultValue,

package/es/LmFilter/components/DropdownFIlter.js

@@ -112,7 +112,9 @@ var getLabel = function getLabel(filterValue, item) {
 
 
   if (['cascader'].includes(type)) {
-    var nArr = (0, _utils.getFlatItem)(filterValue, data);
+    var _item$props;
+
+    var nArr = (0, _utils.getFlatItem)((item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.multiple) ? filterValue : [filterValue], data);
     var labels = nArr.map(function (v) {
       return v.label;
     });
@@ -150,6 +152,12 @@ var getLabel = function getLabel(filterValue, item) {
       return v.label;
     });
 
+    if (!_labels.length) {
+      _labels = filterValue;
+    }
+
+    ; // 受控模式未查找到显示的内容时展示
+
     switch (_labels.length) {
       case 1:
         return _labels[0];
@@ -165,12 +173,12 @@ var getLabel = function getLabel(filterValue, item) {
 
   if (['input', 'date'].includes(type)) {
     return filterValue;
-  } // 单选框
+  } // 单选框 受控模式未查找到显示的内容时展示filterValue
 
 
-  var label = (_data$find = data.find(function (v) {
+  var label = ((_data$find = data.find(function (v) {
     return v.value === filterValue;
-  })) === null || _data$find === void 0 ? void 0 : _data$find.label;
+  })) === null || _data$find === void 0 ? void 0 : _data$find.label) || filterValue;
   return label;
 };
 /*

package/es/LmFilter/customFilter/index.js

@@ -9,8 +9,9 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var LmFilterCustom = function LmFilterCustom(e) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "LmFilterCustom");
+var LmFilterCustom = function LmFilterCustom(_ref) {
+  var instance = _ref.instance;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
 };
 
 var _default = LmFilterCustom;

package/es/LmFilter/filterFns/index.js

@@ -18,7 +18,16 @@ var CoreOptions = function CoreOptions(_ref) {
   var state = _ref.state,
       dispatch = _ref.dispatch,
       props = _ref.props;
-  var onChange = props.onChange; // 设置筛选的值 item => Object || Array => [{label: '',  value: ''}, ...]
+  var onChange = props.onChange,
+      dataSource = props.dataSource; // 根据字段查找过滤的数据, 不存在时返回默认值
+
+  var getFilterValue = function getFilterValue(_ref2) {
+    var field = _ref2.field,
+        type = _ref2.type;
+    var defaultValue = (0, _utils.getValueForType)(type);
+    return state.basicFilter[field] || defaultValue;
+  }; // 设置筛选的值 item => String || Array => ['', '', ...]
+
 
   var setFilterValue = function setFilterValue(item, field) {
     var _Object$entries;
@@ -44,7 +53,7 @@ var CoreOptions = function CoreOptions(_ref) {
       return {
         fieldName: v[0],
         value: v[1],
-        operator: 0
+        operator: 'contains'
       };
     }); // 触发外部事件
 
@@ -53,19 +62,50 @@ var CoreOptions = function CoreOptions(_ref) {
       filterQuery: filterQuery,
       type: 'basic'
     });
-  }; // 根据字段查找过滤的数据, 不存在时返回默认值
-
-
-  var getFilterValue = function getFilterValue(_ref2) {
-    var field = _ref2.field,
-        type = _ref2.type;
-    var defaultValue = (0, _utils.getValueForType)(type);
-    return state.basicFilter[field] || defaultValue;
+  }; // 读取缓存
+
+
+  var setLocalization = function setLocalization() {
+    var localization = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.localization;
+    var globalQuery = localization.globalQuery,
+        filterQuery = localization.filterQuery;
+
+    if (filterQuery === null || filterQuery === void 0 ? void 0 : filterQuery.filter) {
+      // 初始化基础查询缓存
+      var basicFilter = filterQuery === null || filterQuery === void 0 ? void 0 : filterQuery.filter.reduce(function (pre, cur) {
+        // 查找改数据是否展示
+        var someData = dataSource.some(function (v) {
+          if (cur.fieldName === v.field) {
+            var isHidden = !v.show && typeof v.show === 'boolean';
+            return !isHidden;
+          }
+
+          return false;
+        });
+
+        if ((0, _utils.getIsHas)(cur.value) && someData) {
+          pre[cur.fieldName] = cur.value;
+        }
+
+        return pre;
+      }, {});
+      dispatch({
+        type: 'changeBasicFilter',
+        basicFilter: basicFilter
+      });
+    }
   };
 
   return {
+    getState: function getState() {
+      return state;
+    },
+    getBasicFilter: function getBasicFilter() {
+      return state.basicFilter;
+    },
+    getFilterValue: getFilterValue,
     setFilterValue: setFilterValue,
-    getFilterValue: getFilterValue
+    setLocalization: setLocalization
   };
 };
 

package/es/LmFilter/wrapper/Filter.js

@@ -18,13 +18,16 @@ var _complexFilter = _interopRequireDefault(require("../complexFilter"));
 // 筛选组合
 var LmFilter = /*#__PURE__*/_react.default.memo(function (_ref) {
   var instance = _ref.instance;
+  var enableBaisc = instance.enableBaisc,
+      enableComplex = instance.enableComplex,
+      enableCustom = instance.enableCustom;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "lm_filter"
-  }, /*#__PURE__*/_react.default.createElement(_customFilter.default, {
+  }, enableCustom && /*#__PURE__*/_react.default.createElement(_customFilter.default, {
     instance: instance
-  }), /*#__PURE__*/_react.default.createElement(_baseFilter.default, {
+  }), enableBaisc && /*#__PURE__*/_react.default.createElement(_baseFilter.default, {
     instance: instance
-  }), /*#__PURE__*/_react.default.createElement(_complexFilter.default, {
+  }), enableComplex && /*#__PURE__*/_react.default.createElement(_complexFilter.default, {
     instance: instance
   }));
 });

package/es/LmFilter/wrapper/FilterRoot.js

@@ -21,6 +21,8 @@ var _FilterWrapper = _interopRequireDefault(require("./FilterWrapper"));
 
 var _filterFns = _interopRequireDefault(require("../filterFns"));
 
+var _utils = require("../utils");
+
 // 根文件 => 参数聚合
 var reducer = function reducer(state, action) {
   var basicFilter = action.basicFilter,
@@ -66,7 +68,8 @@ var reducer = function reducer(state, action) {
     case 'reset':
       // 一键清空
       return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-        basicFilter: {}
+        basicFilter: {},
+        complexFilter: {}
       });
 
     default:
@@ -76,15 +79,32 @@ var reducer = function reducer(state, action) {
 
 
 var getInitialState = function getInitialState(_ref) {
-  var _filterQuery$filter;
-
-  var localization = _ref.localization;
+  var localization = _ref.localization,
+      dataSource = _ref.dataSource;
   var globalQuery = localization.globalQuery,
       filterQuery = localization.filterQuery;
-  var basicFilter = {};
-  filterQuery === null || filterQuery === void 0 ? void 0 : (_filterQuery$filter = filterQuery.filter) === null || _filterQuery$filter === void 0 ? void 0 : _filterQuery$filter.forEach(function (item) {
-    basicFilter[item.fieldName] = item.value;
-  });
+  var basicFilter = {}; // 初始化基础查询缓存
+
+  if (filterQuery === null || filterQuery === void 0 ? void 0 : filterQuery.filter) {
+    basicFilter = filterQuery === null || filterQuery === void 0 ? void 0 : filterQuery.filter.reduce(function (pre, cur) {
+      // 查找改数据是否展示
+      var someData = dataSource.some(function (v) {
+        if (cur.fieldName === v.field) {
+          var isHidden = !v.show && typeof v.show === 'boolean';
+          return !isHidden;
+        }
+
+        return false;
+      });
+
+      if ((0, _utils.getIsHas)(cur.value) && someData) {
+        pre[cur.fieldName] = cur.value;
+      }
+
+      return pre;
+    }, {});
+  }
+
   return {
     basicFilter: basicFilter,
     complexFilter: {},

package/lib/Form/container.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface IContainerProps {
+    className?: string;
+    style?: React.CSSProperties;
+    responsive?: Boolean;
+}
+declare const LMContainer: React.FC<IContainerProps>;
+export default LMContainer;

package/lib/Form/container.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _lodash = require("lodash");
+
+var __rest = void 0 && (void 0).__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;
+};
+
+var prefixCls = 'lm_container';
+
+var LMContainer = function LMContainer(props) {
+  var children = props.children,
+      className = props.className,
+      responsive = props.responsive,
+      others = __rest(props, ["children", "className", "responsive"]);
+
+  var _useState = (0, _react.useState)({
+    width: '100%',
+    height: '100%'
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      containerSize = _useState2[0],
+      setContainerSize = _useState2[1];
+
+  var containerWrapRef = (0, _react.useRef)(null);
+  var throttleSize = (0, _react.useCallback)(function () {
+    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 = (0, _classnames.default)(className, prefixCls, responsiveCls, lm_col);
+    return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+      ref: containerWrapRef,
+      className: classes
+    }, others, {
+      style: {
+        width: width,
+        height: height
+      }
+    }), children);
+  }, [containerSize, props]);
+
+  var changeSize = function changeSize() {
+    var _a;
+
+    var _ref = ((_a = containerWrapRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {},
+        _ref$width = _ref.width,
+        width = _ref$width === void 0 ? '100%' : _ref$width;
+
+    setContainerSize({
+      width: width,
+      height: '100%'
+    });
+  };
+
+  var handResize = (0, _lodash.throttle)(changeSize, 600);
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      changeSize();
+    }, 100);
+    window.addEventListener('resize', handResize);
+    return function () {
+      window.removeEventListener('resize', handResize);
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_container_wrapper",
+    ref: containerWrapRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, throttleSize());
+};
+
+var _default = LMContainer;
+exports.default = _default;