@lemon-fe/components 0.1.9 → 0.1.10

package/es/Filter/index.js

@@ -29,6 +29,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React, { useEffect, useMemo, useState } from 'react';
+import ResizeObserver from 'rc-resize-observer';
 import { Button, Checkbox, Form, Input, Popover, Space, Modal, message, Select, Empty, InputNumber } from 'antd';
 import { useDebounce, useRequest } from '@lemon-fe/hooks';
 import classNames from 'classnames';
@@ -111,7 +112,7 @@ function Filter(props) {
       onValuesChange = props.onValuesChange,
       style = props.style,
       simple = props.simple;
-  var prefixCls = PREFIX_CLS;
+  var prefixCls = "".concat(PREFIX_CLS, "-filter");
   var defaultValue = useMemo(function () {
     return defaultValueProp || value;
   }, []);
@@ -166,6 +167,16 @@ function Filter(props) {
       _Form$useForm4 = _slicedToArray(_Form$useForm3, 1),
       form = _Form$useForm4[0];
 
+  var _useState11 = useState(0),
+      _useState12 = _slicedToArray(_useState11, 2),
+      width = _useState12[0],
+      setWidth = _useState12[1];
+
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      collapsed = _useState14[0],
+      setCollapsed = _useState14[1];
+
   var _useRequest = useRequest( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
     var tabsData;
     return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -384,7 +395,48 @@ function Filter(props) {
     };
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
+  var cols = useMemo(function () {
+    if (!width || !collapsed) {
+      return data;
+    }
+
+    var rows = [];
+    var currRow = [];
+    var value = 0;
+    data.forEach(function (item) {
+      var _compMap$get;
+
+      var itemWidth = getColStyle(item.colSpan || ((_compMap$get = compMap.get(item.type)) === null || _compMap$get === void 0 ? void 0 : _compMap$get.colSpan)).width;
+
+      if (value + itemWidth > width) {
+        if (currRow.length > 0) {
+          rows.push(currRow);
+        }
+
+        currRow = [item];
+        value = itemWidth;
+      } else {
+        currRow.push(item);
+        value += itemWidth;
+      }
+    });
+
+    if (currRow.length > 0) {
+      rows.push(currRow);
+    }
+
+    console.log(rows);
+
+    if (rows.length <= 2) {
+      return data;
+    }
+
+    return [rows[0], rows[rows.length - 1]].flat();
+  }, [data, width, collapsed]);
+  var content = /*#__PURE__*/React.createElement("div", {
+    className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-simple"), simple)),
+    style: style
+  }, /*#__PURE__*/React.createElement(Modal, {
     destroyOnClose: true,
     visible: showModal,
     onCancel: toggleModal,
@@ -410,19 +462,17 @@ function Filter(props) {
     initialValues: defaultValue,
     onFinish: handleFinish,
     form: form,
-    className: classNames("".concat(prefixCls, "-filter"), _defineProperty({}, "".concat(prefixCls, "-simple-filter"), simple)),
-    onValuesChange: handleValuesChange,
-    style: style
+    onValuesChange: handleValuesChange
   }, !simple && /*#__PURE__*/React.createElement(TabBar, {
     tabs: tabs,
     activeKey: tabs[active].title,
     onTabClick: function onTabClick(_, index) {
       return handleTabChange(index);
     },
-    className: "".concat(prefixCls, "-filter-tab-bar")
+    className: "".concat(prefixCls, "-tab-bar")
   }), /*#__PURE__*/React.createElement(FormLayout, {
     direction: "row"
-  }, data.map(function (item) {
+  }, cols.map(function (item) {
     var visible = activeKeys.has(item.key);
     var target = compMap.get(item.type);
 
@@ -439,14 +489,14 @@ function Filter(props) {
       label: item.hideLabel ? undefined : item.label
     }, target.render(item)));
   }), /*#__PURE__*/React.createElement("div", {
-    style: getColStyle()
-  }, /*#__PURE__*/React.createElement(Form.Item, {
-    label: /*#__PURE__*/React.createElement(Button, {
-      type: "primary",
-      htmlType: "submit"
-    }, "\u67E5\u8BE2")
-  }, simple ? /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
-    className: "".concat(prefixCls, "-filter-btn"),
+    className: "".concat(prefixCls, "-btns")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-submit")
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit"
+  }, "\u67E5\u8BE2")), simple ? /*#__PURE__*/React.createElement(Button, {
+    className: "".concat(prefixCls, "-btn"),
     onClick: handleReset
   }, /*#__PURE__*/React.createElement("svg", {
     width: "20",
@@ -461,7 +511,7 @@ function Filter(props) {
     strokeLinejoin: "round",
     fill: "none",
     fillRule: "evenodd"
-  })))) : /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Dropdown, {
+  }))) : /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Dropdown, {
     actions: [{
       text: '重置',
       onClick: handleReset
@@ -476,22 +526,22 @@ function Filter(props) {
     icon: /*#__PURE__*/React.createElement(Icons.More, null)
   })), /*#__PURE__*/React.createElement(Popover, {
     trigger: "click",
-    overlayClassName: "".concat(prefixCls, "-filter-popover"),
+    overlayClassName: "".concat(prefixCls, "-popover"),
     destroyTooltipOnHide: true,
     content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
       placeholder: "\u641C\u7D22\u9009\u9879",
       allowClear: true,
-      className: "".concat(prefixCls, "-filter-items-search"),
+      className: "".concat(prefixCls, "-items-search"),
       prefix: /*#__PURE__*/React.createElement(Icons.Search, null),
       onChange: function onChange(e) {
         return handleChangeKeywords(e.currentTarget.value);
       }
     }), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-filter-items")
+      className: "".concat(prefixCls, "-items")
     }, items.length > 0 ? items.map(function (item) {
       return /*#__PURE__*/React.createElement("div", {
         key: item.key,
-        className: "".concat(prefixCls, "-filter-item")
+        className: "".concat(prefixCls, "-item")
       }, /*#__PURE__*/React.createElement(Checkbox, {
         checked: activeKeys.has(item.key),
         onChange: function onChange(e) {
@@ -503,64 +553,34 @@ function Filter(props) {
     }))),
     placement: "bottomRight"
   }, /*#__PURE__*/React.createElement(Button, {
-    className: "".concat(prefixCls, "-filter-btn"),
+    className: "".concat(prefixCls, "-btn"),
     onClick: function onClick() {
       setKeywords('');
+    },
+    icon: /*#__PURE__*/React.createElement(Icons.LookUp, null)
+  })), /*#__PURE__*/React.createElement(Button, {
+    className: "".concat(prefixCls, "-btn"),
+    onClick: function onClick() {
+      return setCollapsed(function (prev) {
+        return !prev;
+      });
+    },
+    icon: /*#__PURE__*/React.createElement(Icons.CollapseUp, {
+      style: {
+        transform: collapsed ? 'rotateX(180deg)' : undefined
+      }
+    })
+  }))))));
+
+  if (simple) {
+    return content;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: function onResize(size) {
+      return setWidth(size.width + 16);
     }
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "18",
-    height: "18",
-    viewBox: "0 0 18 18",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: "translate(2 2)",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("rect", {
-    fillOpacity: ".65",
-    fill: "currentColor",
-    y: "4",
-    width: "14",
-    height: "1.5",
-    rx: ".75"
-  }), /*#__PURE__*/React.createElement("rect", {
-    fillOpacity: ".65",
-    fill: "currentColor",
-    y: "8",
-    width: "6",
-    height: "1.5",
-    rx: ".75"
-  }), /*#__PURE__*/React.createElement("rect", {
-    fillOpacity: ".65",
-    fill: "currentColor",
-    y: "12",
-    width: "6",
-    height: "1.5",
-    rx: ".75"
-  }), /*#__PURE__*/React.createElement("rect", {
-    fillOpacity: ".65",
-    fill: "currentColor",
-    width: "14",
-    height: "1.5",
-    rx: ".75"
-  }), /*#__PURE__*/React.createElement("g", {
-    transform: "rotate(-45 15.45 -2.157)"
-  }, /*#__PURE__*/React.createElement("circle", {
-    strokeOpacity: ".65",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    cx: "3",
-    cy: "3",
-    r: "2.25"
-  }), /*#__PURE__*/React.createElement("rect", {
-    strokeOpacity: ".65",
-    stroke: "currentColor",
-    x: "2.75",
-    y: "5.5",
-    width: "1",
-    height: "2",
-    rx: ".5"
-  }))))))))))));
+  }, content));
 }
 
 Filter.setComponents = setComponents;

package/es/Filter/index.less

@@ -1,28 +1,6 @@
 .@{prefixCls}-filter {
-  &-tab {
-    height: 100%;
-    cursor: pointer;
-
-    &-bar {
-      margin-bottom: 16px;
-    }
-
-    &-active {
-      position: relative;
-      color: .primary(1) [];
-      cursor: pointer;
-
-      &::after {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        display: block;
-        width: 100%;
-        height: 2px;
-        background-color: .primary(1) [];
-        content: '';
-      }
-    }
+  &-tab-bar {
+    margin-bottom: 16px;
   }
 
   &-btn {
@@ -35,6 +13,19 @@
     }
   }
 
+  &-btns {
+    display: flex;
+    margin-bottom: 16px;
+    padding: 0 8px;
+  }
+
+  &-submit {
+    box-sizing: border-box;
+    width: 92px;
+    padding-right: 8px;
+    text-align: right;
+  }
+
   &-popover {
     .popover(220px);
 
@@ -60,6 +51,6 @@
   }
 }
 
-.@{prefixCls}-section-body > .@{prefixCls}-filter:not(.@{prefixCls}-simple-filter):first-child {
+.@{prefixCls}-section-body > .@{prefixCls}-filter:not(.@{prefixCls}-filter-simple):first-child {
   margin-top: -16px;
 }

package/es/Icons/CollapseUp.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+export default function CollapseUp(props: {
+    className?: string;
+    style?: CSSProperties;
+}): JSX.Element;

package/es/Icons/CollapseUp.js

@@ -0,0 +1,31 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from 'react';
+import Icon from '@ant-design/icons';
+
+var Svg = function Svg(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread({
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M2.47 4.22a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 1 1-1.06 1.065l-.97-.976v5.693a.751.751 0 0 1-1.5 0V6.559l-.97.975A.75.75 0 1 1 .22 6.47l2.25-2.25Zm14.78 1.282h-9a.751.751 0 0 1 0-1.5h9a.751.751 0 0 1 0 1.5Zm-9.75 3c0-.413.336-.75.75-.75h6a.751.751 0 0 1 0 1.5h-6a.751.751 0 0 1-.75-.75Zm0 3.75c0-.413.336-.75.75-.75h6a.751.751 0 0 1 0 1.5h-6a.751.751 0 0 1-.75-.75Z",
+    fillOpacity: ".65",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+};
+
+export default function CollapseUp(props) {
+  return /*#__PURE__*/React.createElement(Icon, _objectSpread({
+    style: {
+      pointerEvents: 'none'
+    },
+    component: Svg
+  }, props));
+}

package/es/Icons/LookUp.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+export default function LookUp(props: {
+    className?: string;
+    style?: CSSProperties;
+}): JSX.Element;

package/es/Icons/LookUp.js

@@ -0,0 +1,74 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from 'react';
+import Icon from '@ant-design/icons';
+
+var Svg = function Svg(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread({
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(2 2)",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fillOpacity: ".65",
+    fill: "currentColor",
+    y: "4",
+    width: "14",
+    height: "1.5",
+    rx: ".75"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fillOpacity: ".65",
+    fill: "currentColor",
+    y: "8",
+    width: "6",
+    height: "1.5",
+    rx: ".75"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fillOpacity: ".65",
+    fill: "currentColor",
+    y: "12",
+    width: "6",
+    height: "1.5",
+    rx: ".75"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fillOpacity: ".65",
+    fill: "currentColor",
+    width: "14",
+    height: "1.5",
+    rx: ".75"
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "rotate(-45 15.45 -2.157)"
+  }, /*#__PURE__*/React.createElement("circle", {
+    strokeOpacity: ".65",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    cx: "3",
+    cy: "3",
+    r: "2.25"
+  }), /*#__PURE__*/React.createElement("rect", {
+    strokeOpacity: ".65",
+    stroke: "currentColor",
+    x: "2.75",
+    y: "5.5",
+    width: "1",
+    height: "2",
+    rx: ".5"
+  }))));
+};
+
+export default function LookUp(props) {
+  return /*#__PURE__*/React.createElement(Icon, _objectSpread({
+    style: {
+      pointerEvents: 'none'
+    },
+    component: Svg
+  }, props));
+}

package/es/Icons/index.d.ts

@@ -5,6 +5,8 @@ import DarkSearch from './DarkSearch';
 import More from './More';
 import Calendar from './Calendar';
 import BigTip from './BigTip';
+import LookUp from './LookUp';
+import CollapseUp from './CollapseUp';
 declare const Icons: {
     Search: typeof Search;
     Down: typeof Down;
@@ -14,5 +16,7 @@ declare const Icons: {
     More: typeof More;
     Calendar: typeof Calendar;
     BigTip: typeof BigTip;
+    LookUp: typeof LookUp;
+    CollapseUp: typeof CollapseUp;
 };
 export default Icons;

package/es/Icons/index.js

@@ -6,6 +6,8 @@ import DarkSearch from './DarkSearch';
 import More from './More';
 import Calendar from './Calendar';
 import BigTip from './BigTip';
+import LookUp from './LookUp';
+import CollapseUp from './CollapseUp';
 var Icons = {
   Search: Search,
   Down: Down,
@@ -14,6 +16,8 @@ var Icons = {
   DarkSearch: DarkSearch,
   More: More,
   Calendar: Calendar,
-  BigTip: BigTip
+  BigTip: BigTip,
+  LookUp: LookUp,
+  CollapseUp: CollapseUp
 };
 export default Icons;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -41,5 +41,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "f43d8d68fe859bd2d30478c18b85fafc2310595d"
+  "gitHead": "58dc15b111e2965a940be72535debd94635b8914"
 }