linkmore-design 1.1.16 → 1.1.17

package/es/Form/WrapperItem.js

@@ -1,102 +1,166 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 import { throttle } from 'lodash';
 import Row from '../Row';
-import Col from '../Col'; // 行个数 => 在24份中占用的分数
+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]]]);
 
-function getResult(children, countPerRow) {
-  var _a;
+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]; // 收集(满了就重置)
+      colSpace = _rowMap$get2[1];
 
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      visible = _useState4[0],
+      setVisible = _useState4[1]; // 最终的结果
 
-  var collection = []; // 最终的结果
 
-  var result = [];
-  children = Array.prototype.slice.call(children).flat();
+  var rowlist = useMemo(function () {
+    var _a;
 
-  function handle() {
-    var node = /*#__PURE__*/React.createElement(Row, null, collection.map(function (child, index) {
-      if (index !== collection.length - 1) {
-        return /*#__PURE__*/React.createElement(React.Fragment, {
+    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
-        }, /*#__PURE__*/React.createElement(Col, {
-          span: colSpan
-        }, child), /*#__PURE__*/React.createElement(Col, {
-          span: colSpace
-        }));
-      }
+        }, child);
+      }));
+      result.push(node);
+      collection.length = 0;
+    }
 
-      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
 
-  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;
 
-    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)));
 
-        (_children = children).splice.apply(_children, [i, 1].concat(_toConsumableArray(child.props.children)));
+          child = children[i];
+        } else {
+          child = 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 ((_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) {
-        handle();
-      }
-    } else if (collection.length) {
-      handle();
-      result.push(child);
-    } else {
-      result.push(child);
+    if (collection.length) {
+      generatorRow();
     }
-  }
 
-  if (collection.length) {
-    handle();
+    return result;
+  }, [customizeChildren, countPerRow, user, title]);
+  var needRenderList = rowlist;
+
+  if (!visible && needRenderList.length) {
+    needRenderList = [needRenderList[0]];
   }
 
-  return result;
-}
+  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 children = props.children;
+  var user = props.user;
   var targetRef = useRef(null);
 
-  var _useState = useState({
+  var _useState5 = useState({
     width: '100%',
     height: '100%'
   }),
-      _useState2 = _slicedToArray(_useState, 2),
-      containerSize = _useState2[0],
-      setContainerSize = _useState2[1]; // 每行的个数
-
+      _useState6 = _slicedToArray(_useState5, 2),
+      containerSize = _useState6[0],
+      setContainerSize = _useState6[1]; // 每行的个数
 
-  var _useState3 = useState(5),
-      _useState4 = _slicedToArray(_useState3, 2),
-      countPerRow = _useState4[0],
-      setCountPerRow = _useState4[1];
 
-  var result = getResult(children, countPerRow);
+  var _useState7 = useState(5),
+      _useState8 = _slicedToArray(_useState7, 2),
+      countPerRow = _useState8[0],
+      setCountPerRow = _useState8[1];
 
   var changeSize = function changeSize() {
     var _a;
@@ -115,12 +179,18 @@ var WrapperItem = function WrapperItem(props) {
       setCountPerRow(5);
     }
 
-    if (width !== '100%' && width > maxWidth) {
-      width = maxWidth;
+    if (width !== '100%') {
+      width -= 32;
+
+      if (width > maxWidth) {
+        if (user) {
+          width = maxWidth - 64;
+        }
+      }
     }
 
     setContainerSize({
-      width: width - 32
+      width: width
     });
   };
 
@@ -139,11 +209,9 @@ var WrapperItem = function WrapperItem(props) {
     style: Object.assign(Object.assign({}, containerSize), {
       margin: '0 auto'
     })
-  }, result.map(function (child, index) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: index
-    }, child);
-  }))));
+  }, /*#__PURE__*/React.createElement(List, Object.assign({}, props, {
+    countPerRow: countPerRow
+  })))));
 };
 
 export default WrapperItem;

package/es/Form/interface.d.ts

@@ -10,4 +10,6 @@ export interface ISize {
 }
 export interface IWrapper {
     children: React.ReactNode | RenderProps;
+    title?: string;
+    user?: boolean;
 }

package/es/Form/style/index.css

@@ -6617,20 +6617,45 @@ p {
   background: #f0f0f0;
 }
 .lm_form_responsive_box .lm_form > .lm_container_wrapper {
-  padding: 16px;
   background: #f0f0f0;
   margin-bottom: 0;
   border-radius: 0;
+  padding: 16px;
 }
 .lm_container_wrapper {
   overflow: auto;
   background: #fff;
   margin-bottom: 16px;
   border-radius: 2px;
+  padding: 0;
 }
 .lm_container_wrapper .ant-cascader {
   width: 100%;
 }
+.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;
+}
+.form_responsive_group_title h3 {
+  flex: 1;
+  font-weight: medium;
+  font-size: 14px;
+}
+.form_responsive_group_title img {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  transition: transform 0.24s;
+}
+.form_responsive_group_title img.open {
+  transform: rotate(180deg);
+}
 .lm_form-item-tip-error .ant-form-item-explain {
   width: 100%;
   position: absolute;

package/es/Form/style/variables.css

@@ -6105,20 +6105,45 @@
   background: #f0f0f0;
 }
 .lm_form_responsive_box .lm_form > .lm_container_wrapper {
-  padding: 16px;
   background: #f0f0f0;
   margin-bottom: 0;
   border-radius: 0;
+  padding: 16px;
 }
 .lm_container_wrapper {
   overflow: auto;
   background: #fff;
   margin-bottom: 16px;
   border-radius: 2px;
+  padding: 0;
 }
 .lm_container_wrapper .ant-cascader {
   width: 100%;
 }
+.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;
+}
+.form_responsive_group_title h3 {
+  flex: 1;
+  font-weight: medium;
+  font-size: 14px;
+}
+.form_responsive_group_title img {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  transition: transform 0.24s;
+}
+.form_responsive_group_title img.open {
+  transform: rotate(180deg);
+}
 .lm_form-item-tip-error .ant-form-item-explain {
   width: 100%;
   position: absolute;

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_totaqlvhjak.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');
     }