@lemon-fe/components 0.1.10 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  import type { RowAction } from './typings';
2
2
  interface Props<T> {
3
- actions: (RowAction<T> | null)[];
3
+ actions: (RowAction<T> | null)[] | ((record: T, index: number) => (RowAction<T> | null)[]);
4
4
  row: T;
5
5
  index: number;
6
6
  }
@@ -18,7 +18,7 @@ import { createPortal } from 'react-dom';
18
18
  import { PREFIX_CLS } from '../constants';
19
19
  import Icons from '../Icons';
20
20
  export default function Actions(props) {
21
- var actions = props.actions,
21
+ var actionsProp = props.actions,
22
22
  row = props.row,
23
23
  index = props.index;
24
24
 
@@ -61,6 +61,7 @@ export default function Actions(props) {
61
61
  }
62
62
  };
63
63
 
64
+ var actions = typeof actionsProp === 'function' ? actionsProp(row, index) : actionsProp;
64
65
  return /*#__PURE__*/React.createElement("div", {
65
66
  className: prefixCls,
66
67
  onMouseLeave: closePop
@@ -34,7 +34,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
34
34
  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; }
35
35
 
36
36
  /// <reference path="../../typings.d.ts" />
37
- import React, { useMemo, useState, useEffect, useRef } from 'react';
37
+ import React, { useMemo, useState, useEffect, useRef, useLayoutEffect } from 'react';
38
38
  import { Table as AntdTable } from 'antd';
39
39
  import { get } from 'lodash';
40
40
  import ResizeObserver from 'rc-resize-observer';
@@ -190,9 +190,17 @@ function BaseTable(props) {
190
190
  }
191
191
 
192
192
  memoHeight.current = height;
193
+
194
+ if (memoHeight.current === 0) {
195
+ return;
196
+ }
197
+
193
198
  setScrollY(calcScrollY() || undefined);
194
199
  };
195
200
 
201
+ useLayoutEffect(function () {
202
+ setScrollY(calcScrollY() || undefined);
203
+ }, [paginationProp !== false && !!(paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.total)]);
196
204
  useEffect(function () {
197
205
  if (scrollYProp !== true) {
198
206
  setScrollY(scrollYProp);
@@ -311,7 +319,7 @@ function BaseTable(props) {
311
319
 
312
320
 
313
321
  useMemo(function () {
314
- if (rowActions !== undefined && rowActions.length > 0) {
322
+ if (rowActions !== undefined) {
315
323
  var actionCol = {
316
324
  title: '',
317
325
  className: "".concat(PREFIX_CLS, "-table-operator-column"),
@@ -2,47 +2,6 @@
2
2
  @font-size-base: 14px;
3
3
  @resize-indicator-color: #333;
4
4
 
5
- .ant-table-thead > tr > th {
6
- border-bottom: none;
7
-
8
- &::before {
9
- display: none;
10
- }
11
- }
12
-
13
- .ant-table-body {
14
- &::-webkit-scrollbar {
15
- width: 8px;
16
- height: 8px;
17
- }
18
-
19
- &::-webkit-scrollbar-thumb {
20
- background-color: #ddd;
21
- }
22
-
23
- &::-webkit-scrollbar-track {
24
- background-color: #fff;
25
- }
26
- }
27
-
28
- .ant-table-cell {
29
- .ant-checkbox-checked .ant-checkbox-inner::after {
30
- transition: none !important;
31
- }
32
-
33
- .ant-checkbox-inner {
34
- transition: none !important;
35
- }
36
-
37
- .ant-checkbox-checked::after {
38
- animation: none !important;
39
- }
40
- }
41
-
42
- .ant-table-pagination.ant-pagination {
43
- margin-bottom: 0;
44
- }
45
-
46
5
  .@{tablePrefixCls} {
47
6
  position: relative;
48
7
  box-sizing: border-box;
@@ -39,5 +39,5 @@ export interface BaseTableProps<T> extends Omit<TableProps<T>, 'columns' | 'scro
39
39
  /**
40
40
  * @description 行操作按钮组
41
41
  */
42
- rowActions?: (RowAction<T> | null)[];
42
+ rowActions?: (RowAction<T> | null)[] | ((record: T, index: number) => (RowAction<T> | null)[]);
43
43
  }
@@ -395,9 +395,9 @@ function Filter(props) {
395
395
  };
396
396
  };
397
397
 
398
- var cols = useMemo(function () {
399
- if (!width || !collapsed) {
400
- return data;
398
+ var _useMemo = useMemo(function () {
399
+ if (!width) {
400
+ return [data, false];
401
401
  }
402
402
 
403
403
  var rows = [];
@@ -420,20 +420,32 @@ function Filter(props) {
420
420
  value += itemWidth;
421
421
  }
422
422
  });
423
+ rows.push(currRow);
424
+ value += simple ? 180 : 220;
423
425
 
424
- if (currRow.length > 0) {
425
- rows.push(currRow);
426
+ if (currRow.length > 0 && value > width) {
427
+ rows.push([]);
426
428
  }
427
429
 
428
- console.log(rows);
430
+ var visible = rows.length > 2;
429
431
 
430
- if (rows.length <= 2) {
431
- return data;
432
+ if (!collapsed || !visible) {
433
+ return [data, visible];
432
434
  }
433
435
 
434
- return [rows[0], rows[rows.length - 1]].flat();
435
- }, [data, width, collapsed]);
436
- var content = /*#__PURE__*/React.createElement("div", {
436
+ return [[rows[0], rows[rows.length - 1]].flat(), visible];
437
+ }, [data, width, collapsed, simple]),
438
+ _useMemo2 = _slicedToArray(_useMemo, 2),
439
+ cols = _useMemo2[0],
440
+ showCollapse = _useMemo2[1];
441
+
442
+ return /*#__PURE__*/React.createElement(ResizeObserver, {
443
+ onResize: function onResize(size) {
444
+ if (size.width) {
445
+ setWidth(size.width + 16);
446
+ }
447
+ }
448
+ }, /*#__PURE__*/React.createElement("div", {
437
449
  className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-simple"), simple)),
438
450
  style: style
439
451
  }, /*#__PURE__*/React.createElement(Modal, {
@@ -495,7 +507,7 @@ function Filter(props) {
495
507
  }, /*#__PURE__*/React.createElement(Button, {
496
508
  type: "primary",
497
509
  htmlType: "submit"
498
- }, "\u67E5\u8BE2")), simple ? /*#__PURE__*/React.createElement(Button, {
510
+ }, "\u67E5\u8BE2")), /*#__PURE__*/React.createElement(Space, null, simple ? /*#__PURE__*/React.createElement(Button, {
499
511
  className: "".concat(prefixCls, "-btn"),
500
512
  onClick: handleReset
501
513
  }, /*#__PURE__*/React.createElement("svg", {
@@ -511,7 +523,7 @@ function Filter(props) {
511
523
  strokeLinejoin: "round",
512
524
  fill: "none",
513
525
  fillRule: "evenodd"
514
- }))) : /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Dropdown, {
526
+ }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
515
527
  actions: [{
516
528
  text: '重置',
517
529
  onClick: handleReset
@@ -558,7 +570,10 @@ function Filter(props) {
558
570
  setKeywords('');
559
571
  },
560
572
  icon: /*#__PURE__*/React.createElement(Icons.LookUp, null)
561
- })), /*#__PURE__*/React.createElement(Button, {
573
+ }))), /*#__PURE__*/React.createElement(Button, {
574
+ style: {
575
+ visibility: showCollapse ? 'visible' : 'hidden'
576
+ },
562
577
  className: "".concat(prefixCls, "-btn"),
563
578
  onClick: function onClick() {
564
579
  return setCollapsed(function (prev) {
@@ -570,17 +585,7 @@ function Filter(props) {
570
585
  transform: collapsed ? 'rotateX(180deg)' : undefined
571
586
  }
572
587
  })
573
- }))))));
574
-
575
- if (simple) {
576
- return content;
577
- }
578
-
579
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
580
- onResize: function onResize(size) {
581
- return setWidth(size.width + 16);
582
- }
583
- }, content));
588
+ })))))));
584
589
  }
585
590
 
586
591
  Filter.setComponents = setComponents;
@@ -1,12 +1,12 @@
1
- import { ComponentType, ReactElement } from 'react';
2
- import { ModalProps } from 'antd/lib/modal';
1
+ import { ReactElement } from 'react';
2
+ import type { ModalProps } from 'antd/lib/modal';
3
3
  export interface PopupProps<ValueType> extends ModalProps {
4
4
  value?: ValueType;
5
5
  onChange?: (value?: ValueType) => void;
6
- component: ComponentType<{
6
+ component: (params: {
7
7
  value?: ValueType;
8
8
  onChange: (value: ValueType) => void;
9
- }>;
9
+ }) => ReactElement | null;
10
10
  formatLabel?: (value: ValueType) => string;
11
11
  beforeOk?: (value: ValueType) => ValueType | PromiseLike<ValueType>;
12
12
  children?: ReactElement;
package/es/Popup/index.js CHANGED
@@ -26,7 +26,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
26
26
 
27
27
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
28
28
 
29
- import React, { useState, createElement, cloneElement, useRef } from 'react';
29
+ import React, { useState, cloneElement, useRef } from 'react';
30
30
  import { Modal, Input, message } from 'antd';
31
31
  import { CloseCircleFilled } from '@ant-design/icons';
32
32
  import { PREFIX_CLS } from '../constants';
@@ -176,16 +176,15 @@ function Popup(props) {
176
176
  }, trigger), /*#__PURE__*/React.createElement(Modal, _objectSpread({
177
177
  destroyOnClose: true,
178
178
  visible: visible,
179
- width: 896,
179
+ width: 994,
180
180
  centered: true,
181
181
  onCancel: handleCancel,
182
182
  onOk: handleOk,
183
183
  bodyStyle: {
184
184
  height: '549px',
185
- padding: 0,
186
- backgroundColor: '#f9f9f9'
185
+ padding: 0
187
186
  }
188
- }, restProps), /*#__PURE__*/createElement(component, {
187
+ }, restProps), component({
189
188
  value: value,
190
189
  onChange: setValue
191
190
  })));
@@ -0,0 +1,50 @@
1
+ import { CSSProperties, Key, ReactElement } from 'react';
2
+ import type { FilterItemType } from '../Filter/typings';
3
+ import type { ColumnType } from '../BaseTable/typings';
4
+ interface Props<RecordType, ParamsType> {
5
+ value?: RecordType[];
6
+ onChange?: (value: RecordType[]) => void;
7
+ /**
8
+ * @description 是否多选
9
+ */
10
+ multiple?: boolean;
11
+ /**
12
+ * @description 选择列表列设置
13
+ */
14
+ columns: ColumnType<RecordType>[];
15
+ /**
16
+ * @description 已选择列表列设置
17
+ */
18
+ selectedColumns?: ColumnType<RecordType>[];
19
+ /**
20
+ * @description 请求方法
21
+ */
22
+ fetch?: (query: {
23
+ current: number;
24
+ pageSize: number;
25
+ params: ParamsType;
26
+ }) => Promise<{
27
+ total: number;
28
+ data: RecordType[];
29
+ }>;
30
+ /**
31
+ * @description 数据源
32
+ */
33
+ dataSource?: RecordType[];
34
+ rowKey: string | ((item: RecordType) => Key);
35
+ /**
36
+ * @description 筛选器设置
37
+ */
38
+ filter?: {
39
+ defaultValue?: ParamsType;
40
+ onValuesChange?: (changedValues: Partial<ParamsType>, allValues: ParamsType) => void;
41
+ data: FilterItemType[];
42
+ sider?: (props: {
43
+ value: ParamsType;
44
+ onChange: (value: Partial<ParamsType>) => void;
45
+ style?: CSSProperties;
46
+ }) => ReactElement;
47
+ };
48
+ }
49
+ export default function SelectView<RecordType, ParamsType extends Record<string, any>>(props: Props<RecordType, ParamsType>): JSX.Element;
50
+ export {};
@@ -0,0 +1,252 @@
1
+ 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; }
2
+
3
+ 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; }
4
+
5
+ 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; }
6
+
7
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
8
+
9
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
10
+
11
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
12
+
13
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
14
+
15
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
16
+
17
+ 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."); }
18
+
19
+ 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); }
20
+
21
+ 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; }
22
+
23
+ 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; }
24
+
25
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
26
+
27
+ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
28
+ import { Tabs, Button } from 'antd';
29
+ import { get } from 'lodash';
30
+ import Filter from '../Filter';
31
+ import Table from '../Table';
32
+ import { PREFIX_CLS } from '../constants';
33
+ export default function SelectView(props) {
34
+ var value = props.value,
35
+ onChange = props.onChange,
36
+ columns = props.columns,
37
+ _props$selectedColumn = props.selectedColumns,
38
+ selectedColumns = _props$selectedColumn === void 0 ? columns : _props$selectedColumn,
39
+ fetch = props.fetch,
40
+ _props$multiple = props.multiple,
41
+ multiple = _props$multiple === void 0 ? true : _props$multiple,
42
+ rowKey = props.rowKey,
43
+ filter = props.filter,
44
+ dataSource = props.dataSource;
45
+ var prefixCls = "".concat(PREFIX_CLS, "-select-view");
46
+
47
+ var _useState = useState(value || []),
48
+ _useState2 = _slicedToArray(_useState, 2),
49
+ data = _useState2[0],
50
+ setData = _useState2[1];
51
+
52
+ var _useState3 = useState(data),
53
+ _useState4 = _slicedToArray(_useState3, 2),
54
+ selected = _useState4[0],
55
+ setSelected = _useState4[1];
56
+
57
+ var _useState5 = useState((filter === null || filter === void 0 ? void 0 : filter.defaultValue) || {}),
58
+ _useState6 = _slicedToArray(_useState5, 2),
59
+ params = _useState6[0],
60
+ setParams = _useState6[1];
61
+
62
+ var list = useRef(null);
63
+
64
+ var _useState7 = useState('list'),
65
+ _useState8 = _slicedToArray(_useState7, 2),
66
+ tabFlag = _useState8[0],
67
+ setTabFlag = _useState8[1];
68
+
69
+ useEffect(function () {
70
+ var _list$current;
71
+
72
+ (_list$current = list.current) === null || _list$current === void 0 ? void 0 : _list$current.fetch();
73
+ }, [params]);
74
+ useEffect(function () {
75
+ setData(value || []);
76
+ }, [value]);
77
+
78
+ var getRowKey = function getRowKey(item) {
79
+ if (typeof rowKey === 'function') {
80
+ return rowKey(item);
81
+ }
82
+
83
+ return get(item, rowKey);
84
+ };
85
+
86
+ var request = fetch ? function (_ref) {
87
+ var current = _ref.current,
88
+ pageSize = _ref.pageSize;
89
+ return fetch({
90
+ current: current,
91
+ pageSize: pageSize,
92
+ params: params
93
+ });
94
+ } : undefined;
95
+
96
+ var handleClear = function handleClear() {
97
+ var empty = [];
98
+ setSelected(empty);
99
+ setData(empty);
100
+ onChange === null || onChange === void 0 ? void 0 : onChange(empty);
101
+ };
102
+
103
+ var handleChangeData = function handleChangeData(keys, rows) {
104
+ var keySet = new Set(keys);
105
+ var newRows = [].concat(_toConsumableArray(data), _toConsumableArray(rows)).filter(function (item) {
106
+ var curKey = getRowKey(item);
107
+
108
+ if (keySet.has(curKey)) {
109
+ keySet.delete(curKey);
110
+ return true;
111
+ }
112
+
113
+ return false;
114
+ });
115
+ setSelected(newRows);
116
+ setData(newRows);
117
+ onChange === null || onChange === void 0 ? void 0 : onChange(newRows);
118
+ };
119
+
120
+ var handleChangeParams = useCallback(function (mParams) {
121
+ setParams(function (prev) {
122
+ return _objectSpread(_objectSpread({}, prev), mParams);
123
+ });
124
+ }, []);
125
+
126
+ var handleValuesChange = function handleValuesChange(changedValues, allValues) {
127
+ var _filter$onValuesChang;
128
+
129
+ filter === null || filter === void 0 ? void 0 : (_filter$onValuesChang = filter.onValuesChange) === null || _filter$onValuesChang === void 0 ? void 0 : _filter$onValuesChang.call(filter, changedValues, allValues);
130
+ };
131
+
132
+ var headerNode = null;
133
+ var siderNode = null;
134
+
135
+ if (filter) {
136
+ if (filter.data) {
137
+ headerNode = /*#__PURE__*/React.createElement(Filter, {
138
+ simple: true,
139
+ data: filter.data,
140
+ defaultValue: filter.defaultValue,
141
+ onChange: handleChangeParams,
142
+ onValuesChange: handleValuesChange
143
+ });
144
+ }
145
+
146
+ if (filter.sider) {
147
+ siderNode = filter.sider({
148
+ value: params,
149
+ onChange: handleChangeParams
150
+ });
151
+ }
152
+ }
153
+
154
+ var dataKeys = useMemo(function () {
155
+ return data.map(getRowKey);
156
+ }, [data, rowKey]);
157
+ var selectedKeys = useMemo(function () {
158
+ return selected.map(getRowKey);
159
+ }, [rowKey, selected]);
160
+ var selectTable = /*#__PURE__*/React.createElement("div", {
161
+ className: "".concat(prefixCls, "-layout")
162
+ }, siderNode !== null && /*#__PURE__*/React.createElement("div", {
163
+ className: "".concat(prefixCls, "-sider")
164
+ }, siderNode), /*#__PURE__*/React.createElement("div", {
165
+ className: "".concat(prefixCls, "-main")
166
+ }, headerNode !== null && /*#__PURE__*/React.createElement("div", {
167
+ className: "".concat(prefixCls, "-head")
168
+ }, headerNode), /*#__PURE__*/React.createElement("div", {
169
+ className: "".concat(prefixCls, "-body")
170
+ }, /*#__PURE__*/React.createElement(Table, {
171
+ actionRef: list,
172
+ rowKey: rowKey,
173
+ rowSelection: {
174
+ type: multiple ? 'checkbox' : 'radio',
175
+ preserveSelectedRowKeys: true,
176
+ selectedRowKeys: dataKeys,
177
+ onChange: function onChange(keys, rows) {
178
+ return handleChangeData(keys, rows);
179
+ }
180
+ },
181
+ onRow: function onRow(row) {
182
+ return {
183
+ onClick: function onClick() {
184
+ var key = getRowKey(row);
185
+
186
+ var keys = _toConsumableArray(dataKeys);
187
+
188
+ var index = keys.findIndex(function (item) {
189
+ return item === key;
190
+ });
191
+
192
+ if (index > 0) {
193
+ keys.splice(index, 1);
194
+ } else {
195
+ keys.push(key);
196
+ }
197
+
198
+ handleChangeData(keys, [row]);
199
+ }
200
+ };
201
+ },
202
+ dataSource: dataSource,
203
+ columns: columns,
204
+ fetch: request
205
+ }))));
206
+ var content;
207
+
208
+ if (!multiple) {
209
+ content = selectTable;
210
+ } else {
211
+ content = /*#__PURE__*/React.createElement(Tabs, {
212
+ size: "small",
213
+ tabBarGutter: 20,
214
+ onChange: function onChange(key) {
215
+ setTabFlag(key);
216
+ },
217
+ tabBarExtraContent: {
218
+ right: tabFlag === 'selected' ? /*#__PURE__*/React.createElement(Button, {
219
+ type: "link",
220
+ onClick: handleClear
221
+ }, "\u6E05\u7A7A") : null
222
+ }
223
+ }, /*#__PURE__*/React.createElement(Tabs.TabPane, {
224
+ tab: "\u5217\u8868",
225
+ key: "list"
226
+ }, selectTable), /*#__PURE__*/React.createElement(Tabs.TabPane, {
227
+ tab: "\u5DF2\u9009\u62E9(".concat(data.length, ")"),
228
+ key: "selected"
229
+ }, /*#__PURE__*/React.createElement("div", {
230
+ className: "".concat(prefixCls, "-layout")
231
+ }, /*#__PURE__*/React.createElement("div", {
232
+ className: "".concat(prefixCls, "-main")
233
+ }, /*#__PURE__*/React.createElement("div", {
234
+ className: "".concat(prefixCls, "-body")
235
+ }, /*#__PURE__*/React.createElement(Table, {
236
+ dataSource: data,
237
+ columns: selectedColumns,
238
+ rowSelection: {
239
+ preserveSelectedRowKeys: true,
240
+ selectedRowKeys: selectedKeys,
241
+ onChange: function onChange(_, rows) {
242
+ return setSelected(rows);
243
+ }
244
+ },
245
+ rowKey: rowKey
246
+ }))))));
247
+ }
248
+
249
+ return /*#__PURE__*/React.createElement("div", {
250
+ className: prefixCls
251
+ }, content);
252
+ }
@@ -0,0 +1,59 @@
1
+ .@{prefixCls}-select-view {
2
+ height: 100%;
3
+
4
+ & > .ant-tabs {
5
+ height: 100%;
6
+
7
+ & > .ant-tabs-nav {
8
+ margin-bottom: 0;
9
+
10
+ & > .ant-tabs-nav-wrap {
11
+ padding: 0 16px;
12
+
13
+ .ant-tabs-tab {
14
+ padding: 13px 0;
15
+ }
16
+ }
17
+ }
18
+
19
+ & > .ant-tabs-content-holder {
20
+ flex: 1;
21
+ min-height: 0;
22
+
23
+ & > .ant-tabs-content {
24
+ height: 100%;
25
+
26
+ & > .ant-tabs-tabpane {
27
+ height: 100%;
28
+ }
29
+ }
30
+ }
31
+ }
32
+
33
+ &-layout {
34
+ display: flex;
35
+ height: 100%;
36
+ }
37
+
38
+ &-sider {
39
+ width: 228px;
40
+ overflow: auto;
41
+ border-right: 1px solid #e5e5e5;
42
+ }
43
+
44
+ &-main {
45
+ display: flex;
46
+ flex: 1;
47
+ flex-direction: column;
48
+ padding: 16px;
49
+ }
50
+
51
+ &-head + &-body {
52
+ margin-top: 16px;
53
+ }
54
+
55
+ &-body {
56
+ flex: 1;
57
+ min-height: 0;
58
+ }
59
+ }
@@ -51,7 +51,10 @@ function SiderTreeTabs(props) {
51
51
  return item.key || item.title;
52
52
  };
53
53
 
54
- return /*#__PURE__*/React.createElement(Tabs, _objectSpread(_objectSpread({}, restProps), {}, {
54
+ var prefixCls = "".concat(PREFIX_CLS, "-tree");
55
+ return /*#__PURE__*/React.createElement(Tabs, _objectSpread(_objectSpread({
56
+ className: "".concat(prefixCls, "-tabs")
57
+ }, restProps), {}, {
55
58
  renderTabBar: function renderTabBar(tabProps) {
56
59
  var activeKey = tabProps.activeKey,
57
60
  _onTabClick = tabProps.onTabClick;
@@ -153,7 +156,7 @@ export default function SiderTree(props) {
153
156
 
154
157
  return /*#__PURE__*/React.createElement("div", {
155
158
  className: "".concat(prefixCls, "-wrapper")
156
- }, /*#__PURE__*/React.createElement("div", {
159
+ }, !!mHeader && /*#__PURE__*/React.createElement("div", {
157
160
  className: "".concat(prefixCls, "-header")
158
161
  }, mHeader), /*#__PURE__*/React.createElement("div", {
159
162
  className: "".concat(prefixCls, "-body")
@@ -3,7 +3,11 @@
3
3
 
4
4
  .@{prefixCls}-tree {
5
5
  &-wrapper {
6
- padding: @space;
6
+ display: flex;
7
+ flex-direction: column;
8
+ box-sizing: border-box;
9
+ height: 100%;
10
+ padding: @space 0;
7
11
  }
8
12
 
9
13
  &-menu-popover {
@@ -39,12 +43,35 @@
39
43
  }
40
44
  }
41
45
 
46
+ &-tabs {
47
+ height: 100%;
48
+
49
+ & > .ant-tabs-content-holder {
50
+ flex: 1;
51
+
52
+ & > .ant-tabs-content {
53
+ height: 100%;
54
+
55
+ & > .ant-tabs-tabpane {
56
+ height: 100%;
57
+ }
58
+ }
59
+ }
60
+ }
61
+
42
62
  &-tab-bar {
43
63
  margin: 0 @space;
44
64
  }
45
65
 
66
+ &-header {
67
+ padding: 0 @space;
68
+ }
69
+
46
70
  &-body {
47
- overflow-x: auto;
71
+ flex: 1;
72
+ min-height: 0;
73
+ padding: 0 @space;
74
+ overflow: auto;
48
75
  }
49
76
 
50
77
  &-header + &-body {
@@ -103,6 +130,10 @@
103
130
  width: 13px;
104
131
  height: 13px;
105
132
  }
133
+
134
+ &-noop {
135
+ display: none;
136
+ }
106
137
  }
107
138
 
108
139
  &-node-content-wrapper {
@@ -184,9 +215,9 @@
184
215
  }
185
216
 
186
217
  .@{prefixCls}-layout-left .@{prefixCls}-tree-wrapper:first-child .@{prefixCls}-tree-header {
187
- padding-right: 12px;
218
+ padding-right: 12px + @space;
188
219
  }
189
220
 
190
221
  .ant-tabs-tabpane .@{prefixCls}-tree-wrapper:first-child .@{prefixCls}-tree-header {
191
- padding-right: 0;
222
+ padding-right: @space;
192
223
  }
package/es/index.d.ts CHANGED
@@ -28,3 +28,4 @@ export type { FormTableColumnType, FormTableProps, FormTableRef } from './FormTa
28
28
  export { default as TabBar } from './TabBar';
29
29
  export { default as SymbolIcon } from './SymbolIcon';
30
30
  export { default as Dropdown } from './Dropdown';
31
+ export { default as SelectView } from './SelectView';
package/es/index.js CHANGED
@@ -22,4 +22,5 @@ export { default as FormInline } from './FormInline';
22
22
  export { default as FormTable } from './FormTable';
23
23
  export { default as TabBar } from './TabBar';
24
24
  export { default as SymbolIcon } from './SymbolIcon';
25
- export { default as Dropdown } from './Dropdown';
25
+ export { default as Dropdown } from './Dropdown';
26
+ export { default as SelectView } from './SelectView';
package/es/index.less CHANGED
@@ -23,3 +23,4 @@
23
23
  @import './TabBar/index.less';
24
24
  @import './SymbolIcon/index.less';
25
25
  @import './Dropdown/index.less';
26
+ @import './SelectView/index.less';
package/es/overrides.less CHANGED
@@ -16,8 +16,50 @@ a[title='站长统计'] {
16
16
  @table-header-bg: #f0f0f0;
17
17
  @table-header-color: rgba(51, 51, 51, 0.65);
18
18
  @table-padding-vertical: 14px;
19
- @table-border-color: rgba(0, 0, 0, 0.04);
19
+ @table-border-color: #e1e1e1;
20
20
  @table-border-radius-base: 4px;
21
+ @table-row-hover-bg: #eee;
22
+
23
+ .ant-table-thead > tr > th {
24
+ border-bottom: none;
25
+
26
+ &::before {
27
+ display: none;
28
+ }
29
+ }
30
+
31
+ .ant-table-body {
32
+ &::-webkit-scrollbar {
33
+ width: 8px;
34
+ height: 8px;
35
+ }
36
+
37
+ &::-webkit-scrollbar-thumb {
38
+ background-color: #ddd;
39
+ }
40
+
41
+ &::-webkit-scrollbar-track {
42
+ background-color: #fff;
43
+ }
44
+ }
45
+
46
+ .ant-table-cell {
47
+ .ant-checkbox-checked .ant-checkbox-inner::after {
48
+ transition: none !important;
49
+ }
50
+
51
+ .ant-checkbox-inner {
52
+ transition: none !important;
53
+ }
54
+
55
+ .ant-checkbox-checked::after {
56
+ animation: none !important;
57
+ }
58
+ }
59
+
60
+ .ant-table-pagination.ant-pagination {
61
+ margin-bottom: 0;
62
+ }
21
63
 
22
64
  /** button */
23
65
 
@@ -104,6 +146,10 @@ a[title='站长统计'] {
104
146
  }
105
147
  }
106
148
 
149
+ .ant-pagination-options .ant-select.ant-select-in-form-item {
150
+ width: auto;
151
+ }
152
+
107
153
  /** select */
108
154
 
109
155
  .ant-select-arrow {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lemon-fe/components",
3
- "version": "0.1.10",
3
+ "version": "0.1.13",
4
4
  "description": "> TODO: description",
5
5
  "author": "鲁盛杰 <lusj@cnlemon.net>",
6
6
  "homepage": "",
@@ -41,5 +41,5 @@
41
41
  "react": "^17.0.2",
42
42
  "react-dom": "^17.0.2"
43
43
  },
44
- "gitHead": "58dc15b111e2965a940be72535debd94635b8914"
44
+ "gitHead": "11880998a3dbc05d5385b43a9a3497db75815e4d"
45
45
  }