@lemon-fe/components 0.0.32 → 0.1.0

package/es/BaseTable/typings.d.ts

@@ -7,6 +7,13 @@ export type ColumnGroupType<T> = TableColumnGroupType<T>;
 
 export type ColumnsType<T> = TableColumnsType<T>;
 
+export interface RowAction<T> {
+  text: string;
+  onClick?: (row: T, index: number) => void;
+  disabled?: boolean;
+  dropDown?: (RowAction<T> | null)[];
+}
+
 export interface BaseTableProps<T> extends Omit<TableProps<T>, 'columns' | 'scroll'> {
   defaultColumnProps?: Partial<ColumnType<T>>;
   /**
@@ -29,4 +36,8 @@ export interface BaseTableProps<T> extends Omit<TableProps<T>, 'columns' | 'scro
     x?: number | string | true;
     y?: number | string | true;
   };
+  /**
+   * @description 行操作按钮组
+   */
+  rowActions?: (RowAction<T> | null)[];
 }

package/es/DurationPicker/index.js

@@ -205,11 +205,7 @@ export default function DurationPicker(props) {
     }))
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-duration-type")
-  }, (_result$type = result.type) === null || _result$type === void 0 ? void 0 : _result$type.label, /*#__PURE__*/React.createElement(Down, {
-    style: {
-      color: '#BFBFBF'
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
+  }, (_result$type = result.type) === null || _result$type === void 0 ? void 0 : _result$type.label, /*#__PURE__*/React.createElement(Down, null))), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-duration-picker")
   }, /*#__PURE__*/React.createElement(Dropdown, {
     overlay: /*#__PURE__*/React.createElement(Menu, null, options.map(function (item) {
@@ -222,11 +218,7 @@ export default function DurationPicker(props) {
     }))
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-duration-option")
-  }, (_result$option = result.option) === null || _result$option === void 0 ? void 0 : _result$option.label, /*#__PURE__*/React.createElement(Down, {
-    style: {
-      color: '#BFBFBF'
-    }
-  }))), /*#__PURE__*/React.createElement(DatePicker.RangePicker, {
+  }, (_result$option = result.option) === null || _result$option === void 0 ? void 0 : _result$option.label, /*#__PURE__*/React.createElement(Down, null))), /*#__PURE__*/React.createElement(DatePicker.RangePicker, {
     value: result.dates,
     onChange: handleChangeDates,
     disabled: ((_result$option2 = result.option) === null || _result$option2 === void 0 ? void 0 : _result$option2.value) !== null

package/es/DurationPicker/index.less

@@ -10,8 +10,8 @@
     align-items: center;
     justify-content: space-between;
     height: 100%;
-    padding: 0 12px 0 16px;
-    color: #686868;
+    padding: 0 8px;
+    color: rgba(51, 51, 51, 0.7);
     font-size: 14px;
     text-align: center;
     cursor: pointer;
@@ -23,7 +23,7 @@
   }
 
   &-type.ant-dropdown-trigger {
-    flex: 0 0 138px;
+    flex: 0 0 124px;
     margin-right: 8px;
     border: 1px solid @select-border-color;
     border-radius: @border-radius-base;
@@ -31,7 +31,7 @@
 
   &-option.ant-dropdown-trigger {
     position: relative;
-    flex: 0 0 122px;
+    flex: 0 0 110px;
 
     &::after {
       position: absolute;

package/es/Filter/index.js

@@ -29,18 +29,27 @@ 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 { Button, Col, Checkbox, Form, Input, Popover, Row, Space, Dropdown, Menu, Modal, message, Select, Empty } from 'antd';
-import { EllipsisOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { Button, Checkbox, Form, Input, Popover, Space, Dropdown, Menu, Modal, message, Select, Empty, InputNumber } from 'antd';
 import { useDebounce, useRequest } from '@lemon-fe/hooks';
-import Search from '../Icons/Search';
+import Icons from '../Icons';
 import DurationPicker from '../DurationPicker';
 import FormLayout from '../FormLayout';
 import { PREFIX_CLS } from '../constants';
+import TabBar from '../TabBar';
 var components = [{
   type: 'input',
   render: function render(item) {
     return /*#__PURE__*/React.createElement(Input, _objectSpread({}, item.extraProps));
   }
+}, {
+  type: 'input-number',
+  render: function render(item) {
+    return /*#__PURE__*/React.createElement(InputNumber, _objectSpread({
+      style: {
+        width: '100%'
+      }
+    }, item.extraProps));
+  }
 }, {
   type: 'select',
   render: function render(item) {
@@ -77,7 +86,8 @@ function Filter(props) {
       value = props.value,
       defaultActiveKeys = props.defaultActiveKeys,
       storageKey = props.storageKey,
-      onValuesChange = props.onValuesChange;
+      onValuesChange = props.onValuesChange,
+      style = props.style;
   var prefixCls = PREFIX_CLS;
   var defaultValue = useMemo(function () {
     return defaultValueProp || value;
@@ -337,6 +347,15 @@ function Filter(props) {
 
     return data;
   }, [keywords, data]);
+
+  var getColStyle = function getColStyle() {
+    var colSpan = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    return {
+      width: colSpan * 348,
+      padding: '0 8px'
+    };
+  };
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
     destroyOnClose: true,
     visible: showModal,
@@ -364,29 +383,16 @@ function Filter(props) {
     onFinish: handleFinish,
     form: form,
     className: "".concat(prefixCls, "-filter"),
-    onValuesChange: handleValuesChange
-  }, /*#__PURE__*/React.createElement(Row, {
-    align: "bottom",
-    justify: "space-between",
-    wrap: false,
-    gutter: [16, 16]
-  }, /*#__PURE__*/React.createElement(Col, {
-    flex: 1
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      maxWidth: '1334px'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
+    onValuesChange: handleValuesChange,
+    style: style
+  }, /*#__PURE__*/React.createElement(TabBar, {
+    tabs: tabs,
+    activeKey: tabs[active].title,
+    onTabClick: function onTabClick(_, index) {
+      return handleTabChange(index);
+    },
     className: "".concat(prefixCls, "-filter-tab-bar")
-  }, tabs.map(function (item, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-filter-tab").concat(active === index ? '-active' : ''),
-      key: item.title,
-      onClick: function onClick() {
-        return handleTabChange(index);
-      }
-    }, item.title);
-  })), /*#__PURE__*/React.createElement(FormLayout, {
+  }), /*#__PURE__*/React.createElement(FormLayout, {
     direction: "row"
   }, data.map(function (item) {
     var visible = activeKeys.has(item.key);
@@ -396,18 +402,22 @@ function Filter(props) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(FormLayout.Col, {
-      span: (item.colSpan || target.colSpan || 1) * 6,
+    return /*#__PURE__*/React.createElement("div", {
+      style: getColStyle(item.colSpan || target.colSpan),
       key: item.key
     }, /*#__PURE__*/React.createElement(Form.Item, {
       key: item.key,
       name: item.key,
       label: item.hideLabel ? undefined : item.label
     }, target.render(item)));
-  })))), /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    htmlType: "submit"
-  }, "\u67E5\u8BE2"), /*#__PURE__*/React.createElement(Dropdown, {
+  }), /*#__PURE__*/React.createElement("div", {
+    style: getColStyle()
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    label: /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      htmlType: "submit"
+    }, "\u67E5\u8BE2")
+  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Dropdown, {
     placement: "bottomRight",
     overlay: /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Item, {
       key: "reset",
@@ -420,10 +430,8 @@ function Filter(props) {
       onClick: handleDelete
     }, "\u5220\u9664\u65B9\u6848"))
   }, /*#__PURE__*/React.createElement(Button, {
-    style: {
-      padding: '4px 8px'
-    }
-  }, /*#__PURE__*/React.createElement(EllipsisOutlined, null))), /*#__PURE__*/React.createElement(Popover, {
+    icon: /*#__PURE__*/React.createElement(Icons.More, null)
+  })), /*#__PURE__*/React.createElement(Popover, {
     trigger: "click",
     overlayClassName: "".concat(prefixCls, "-filter-popover"),
     destroyTooltipOnHide: true,
@@ -431,7 +439,7 @@ function Filter(props) {
       placeholder: "\u641C\u7D22\u9009\u9879",
       allowClear: true,
       className: "".concat(prefixCls, "-filter-items-search"),
-      suffix: /*#__PURE__*/React.createElement(Search, {
+      suffix: /*#__PURE__*/React.createElement(Icons.Search, {
         style: {
           color: '#686868'
         }
@@ -456,13 +464,64 @@ function Filter(props) {
     }))),
     placement: "bottomRight"
   }, /*#__PURE__*/React.createElement(Button, {
-    style: {
-      padding: '4px 8px'
-    },
+    className: "".concat(prefixCls, "-filter-btn"),
     onClick: function onClick() {
       setKeywords('');
     }
-  }, /*#__PURE__*/React.createElement(UnorderedListOutlined, null))))))));
+  }, /*#__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"
+  }))))))))))));
 }
 
 Filter.setComponents = setComponents;

package/es/Filter/index.less

@@ -6,14 +6,7 @@
     cursor: pointer;
 
     &-bar {
-      display: flex;
-      height: 25px;
       margin-bottom: 16px;
-      line-height: 1;
-
-      & > div + div {
-        margin-left: 32px;
-      }
     }
 
     &-active {
@@ -34,8 +27,19 @@
     }
   }
 
+  &-btn {
+    padding: 6px;
+
+    & > svg {
+      display: block;
+      width: 18px;
+      height: 18px;
+    }
+  }
+
   &-popover {
     width: 227px;
+    padding-top: 0;
 
     .ant-popover-arrow {
       display: none;

package/es/Filter/typings.d.ts

@@ -1,5 +1,5 @@
-import { FormInstance } from 'antd';
-import { ReactNode } from 'react';
+import type { FormInstance } from 'antd';
+import type { CSSProperties, ReactNode } from 'react';
 
 export interface FilterItemType {
   key: string;
@@ -18,6 +18,7 @@ export interface FilterProps<T extends Record<string, any> = Record<string, any>
   onValuesChange?: (changedValues: Partial<T>, allValues: T, form: FormInstance<T>) => void;
   defaultActiveKeys?: string[];
   storageKey?: string;
+  style?: CSSProperties;
 }
 
 export interface ComponentOption {

package/es/FormLayout/index.less

@@ -35,7 +35,7 @@
       }
 
       &-label > label::after {
-        margin: 0 @spaceX / 2 0 0;
+        margin: 0 8px 0 0;
         content: '';
       }
 

package/es/Icons/Calendar.d.ts

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

package/es/Icons/Calendar.js

@@ -0,0 +1,47 @@
+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 CalendarSvg = function CalendarSvg(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread({
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5.25 1a.75.75 0 0 1 .75.75V4H4.5V1.75A.75.75 0 0 1 5.25 1ZM10.75 1a.75.75 0 0 1 .75.75V4H10V1.75a.75.75 0 0 1 .75-.75Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("rect", {
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    x: "1.75",
+    y: "3.75",
+    width: "12.5",
+    height: "10.5",
+    rx: "2"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "currentColor",
+    x: "6",
+    y: "8",
+    width: "4",
+    height: "1.5",
+    rx: ".75"
+  })));
+};
+
+export default function Down(props) {
+  return /*#__PURE__*/React.createElement(Icon, _objectSpread({
+    style: {
+      pointerEvents: 'none'
+    },
+    component: CalendarSvg
+  }, props));
+}

package/es/Icons/Down.js

@@ -9,14 +9,19 @@ import Icon from '@ant-design/icons';
 
 var DownSvg = function DownSvg(props) {
   return /*#__PURE__*/React.createElement("svg", _objectSpread({
-    width: "1em",
-    height: "1em",
+    width: "16",
+    height: "16",
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M4.707 5.293L3.293 6.707 8 11.414l4.707-4.707-1.414-1.414L8 8.586z",
-    fill: "currentColor",
-    fillRule: "nonzero"
+    d: "M3.757 5.757 8 10l4.243-4.243",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeDasharray: "0,0",
+    fill: "none",
+    fillRule: "evenodd"
   }));
 };
 

package/es/Icons/More.d.ts

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

package/es/Icons/More.js

@@ -0,0 +1,44 @@
+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 MoreSvg = function MoreSvg(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", {
+    fill: "currentColor",
+    "fill-rule": "evenodd"
+  }, /*#__PURE__*/React.createElement("circle", {
+    opacity: ".7",
+    cx: "15",
+    cy: "9",
+    r: "1.5"
+  }), /*#__PURE__*/React.createElement("circle", {
+    opacity: ".7",
+    cx: "9",
+    cy: "9",
+    r: "1.5"
+  }), /*#__PURE__*/React.createElement("circle", {
+    opacity: ".7",
+    cx: "3",
+    cy: "9",
+    r: "1.5"
+  })));
+};
+
+export default function More(props) {
+  return /*#__PURE__*/React.createElement(Icon, _objectSpread({
+    style: {
+      pointerEvents: 'none'
+    },
+    component: MoreSvg
+  }, props));
+}

package/es/Icons/Search.js

@@ -11,21 +11,17 @@ var Svg = function Svg(props) {
   return /*#__PURE__*/React.createElement("svg", _objectSpread({
     width: "16",
     height: "16",
+    viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("circle", {
-    strokeOpacity: ".25",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    cx: "7",
-    cy: "7",
-    r: "5"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillOpacity: ".15",
     fill: "currentColor",
-    d: "m10.878 12.293 1.414-1.414L14.414 13l-1.415 1.414z"
+    fillRule: "evenodd",
+    opacity: ".7"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7.5.5a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm0 1.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12.03 12.03a.75.75 0 0 1 1.061 0l1.768 1.768a.75.75 0 1 1-1.06 1.06l-1.769-1.767a.75.75 0 0 1 0-1.06Z"
   })));
 };
 

package/es/Icons/index.d.ts

@@ -2,11 +2,15 @@ import Down from './Down';
 import Search from './Search';
 import Tip from './Tip';
 import DarkSearch from './DarkSearch';
+import More from './More';
+import Calendar from './Calendar';
 declare const Icons: {
     Search: typeof Search;
     Down: typeof Down;
     Tip: typeof Tip;
     Empty: () => JSX.Element;
     DarkSearch: typeof DarkSearch;
+    More: typeof More;
+    Calendar: typeof Calendar;
 };
 export default Icons;

package/es/Icons/index.js

@@ -3,11 +3,15 @@ import Search from './Search';
 import Tip from './Tip';
 import Empty from './Empty';
 import DarkSearch from './DarkSearch';
+import More from './More';
+import Calendar from './Calendar';
 var Icons = {
   Search: Search,
   Down: Down,
   Tip: Tip,
   Empty: Empty,
-  DarkSearch: DarkSearch
+  DarkSearch: DarkSearch,
+  More: More,
+  Calendar: Calendar
 };
 export default Icons;

package/es/Layout/index.js

@@ -1,9 +1,86 @@
 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';
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import { Spin } from 'antd';
 import { PREFIX_CLS } from '../constants';
+
+function Sider(props) {
+  var prefixCls = props.prefixCls,
+      children = props.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      collapsed = _useState2[0],
+      setCollapsed = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-left"), _defineProperty({}, "".concat(prefixCls, "-left-collapsed"), collapsed))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-left-body")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-left-content")
+  }, children)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-left-collapse"),
+    onClick: function onClick() {
+      return setCollapsed(!collapsed);
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "12",
+    height: "12",
+    version: "1.1",
+    viewBox: "0 0 12 12"
+  }, /*#__PURE__*/React.createElement("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd",
+    opacity: "1"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(-463.000000, -140.000000)"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(463.000000, 140.000000)"
+  }, /*#__PURE__*/React.createElement("g", {
+    opacity: "0.699999988",
+    transform: "translate(2.000000, 2.000000)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9,0.75 C9,1.16421356 8.66421356,1.5 8.25,1.5 L5.75,1.5 C5.33578644,1.5 5,1.16421356 5,0.75 C5,0.335786438 5.33578644,7.6089797e-17 5.75,0 L8.25,0 C8.66421356,-7.6089797e-17 9,0.335786438 9,0.75 Z",
+    id: "Rectangle-393",
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9,4 C9,4.41421356 8.66421356,4.75 8.25,4.75 L5.75,4.75 C5.33578644,4.75 5,4.41421356 5,4 C5,3.58578644 5.33578644,3.25 5.75,3.25 L8.25,3.25 C8.66421356,3.25 9,3.58578644 9,4 Z",
+    id: "Rectangle-394",
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9,7.75 C9,8.16421356 8.66421356,8.5 8.25,8.5 L0.75,8.5 C0.335786438,8.5 5.07265313e-17,8.16421356 0,7.75 C-5.07265313e-17,7.33578644 0.335786438,7 0.75,7 L8.25,7 C8.66421356,7 9,7.33578644 9,7.75 Z",
+    id: "Rectangle-395",
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4.32842712,0.621320344 L1.32842712,0.621320344 L1.32842712,3.62132034",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeDasharray: "0,0",
+    transform: "translate(2.828427, 2.121320) rotate(-45.000000) translate(-2.828427, -2.121320) "
+  }))))))));
+}
+
 export default function Layout(props) {
   var className = props.className,
       style = props.style,
@@ -23,8 +100,8 @@ export default function Layout(props) {
     className: "".concat(prefixCls, "-header")
   }, header) : null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-content")
-  }, left ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-left")
+  }, left ? /*#__PURE__*/React.createElement(Sider, {
+    prefixCls: prefixCls
   }, left) : null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-main")
   }, children)), footer ? /*#__PURE__*/React.createElement("div", {