@sooloer/pages 0.0.1
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.
- package/LICENSE +21 -0
- package/README.md +40 -0
- package/dist/button-group/demo/authcode.d.ts +3 -0
- package/dist/button-group/demo/authcode.js +78 -0
- package/dist/button-group/demo/basic.d.ts +3 -0
- package/dist/button-group/demo/basic.js +67 -0
- package/dist/button-group/demo/custom.d.ts +3 -0
- package/dist/button-group/demo/custom.js +50 -0
- package/dist/button-group/demo/link.d.ts +3 -0
- package/dist/button-group/demo/link.js +65 -0
- package/dist/button-group/index.d.ts +4 -0
- package/dist/button-group/index.js +59 -0
- package/dist/button-group/style.d.ts +5 -0
- package/dist/button-group/style.js +11 -0
- package/dist/button-group/typing.d.ts +35 -0
- package/dist/button-group/typing.js +1 -0
- package/dist/filter/components/checkbox/index.d.ts +3 -0
- package/dist/filter/components/checkbox/index.js +32 -0
- package/dist/filter/components/ellipsis-text/index.d.ts +6 -0
- package/dist/filter/components/ellipsis-text/index.js +78 -0
- package/dist/filter/components/field/index.d.ts +7 -0
- package/dist/filter/components/field/index.js +143 -0
- package/dist/filter/components/input-range/index.d.ts +4 -0
- package/dist/filter/components/input-range/index.js +44 -0
- package/dist/filter/components/input-range/type.d.ts +22 -0
- package/dist/filter/components/input-range/type.js +1 -0
- package/dist/filter/components/text-area/index.d.ts +3 -0
- package/dist/filter/components/text-area/index.js +72 -0
- package/dist/filter/components/text-area/index.less +0 -0
- package/dist/filter/demo/basic.d.ts +3 -0
- package/dist/filter/demo/basic.js +35 -0
- package/dist/filter/demo/change-label-width.d.ts +3 -0
- package/dist/filter/demo/change-label-width.js +59 -0
- package/dist/filter/demo/checkbox.d.ts +3 -0
- package/dist/filter/demo/checkbox.js +69 -0
- package/dist/filter/demo/col-span.d.ts +3 -0
- package/dist/filter/demo/col-span.js +52 -0
- package/dist/filter/demo/custom.d.ts +3 -0
- package/dist/filter/demo/custom.js +53 -0
- package/dist/filter/demo/datePicker.d.ts +3 -0
- package/dist/filter/demo/datePicker.js +72 -0
- package/dist/filter/demo/ellipsis.d.ts +3 -0
- package/dist/filter/demo/ellipsis.js +58 -0
- package/dist/filter/demo/expand.d.ts +3 -0
- package/dist/filter/demo/expand.js +79 -0
- package/dist/filter/demo/form-controlled.d.ts +3 -0
- package/dist/filter/demo/form-controlled.js +63 -0
- package/dist/filter/demo/grid-columns.d.ts +3 -0
- package/dist/filter/demo/grid-columns.js +59 -0
- package/dist/filter/demo/hide-action.d.ts +3 -0
- package/dist/filter/demo/hide-action.js +41 -0
- package/dist/filter/demo/initial-value.d.ts +3 -0
- package/dist/filter/demo/initial-value.js +56 -0
- package/dist/filter/demo/input-range.d.ts +3 -0
- package/dist/filter/demo/input-range.js +24 -0
- package/dist/filter/demo/mask.d.ts +3 -0
- package/dist/filter/demo/mask.js +77 -0
- package/dist/filter/demo/radio.d.ts +3 -0
- package/dist/filter/demo/radio.js +69 -0
- package/dist/filter/demo/rangePicker.d.ts +3 -0
- package/dist/filter/demo/rangePicker.js +80 -0
- package/dist/filter/demo/required.d.ts +3 -0
- package/dist/filter/demo/required.js +36 -0
- package/dist/filter/demo/search-advanced.d.ts +3 -0
- package/dist/filter/demo/search-advanced.js +45 -0
- package/dist/filter/demo/search.d.ts +3 -0
- package/dist/filter/demo/search.js +45 -0
- package/dist/filter/demo/set-field.d.ts +3 -0
- package/dist/filter/demo/set-field.js +64 -0
- package/dist/filter/demo/textarea.d.ts +3 -0
- package/dist/filter/demo/textarea.js +42 -0
- package/dist/filter/demo/tooltip.d.ts +3 -0
- package/dist/filter/demo/tooltip.js +36 -0
- package/dist/filter/index.d.ts +5 -0
- package/dist/filter/index.js +406 -0
- package/dist/filter/index.less +84 -0
- package/dist/filter/typing.d.ts +148 -0
- package/dist/filter/typing.js +1 -0
- package/dist/footer/demo/basic.d.ts +3 -0
- package/dist/footer/demo/basic.js +44 -0
- package/dist/footer/demo/right-render.d.ts +3 -0
- package/dist/footer/demo/right-render.js +8 -0
- package/dist/footer/index.d.ts +6 -0
- package/dist/footer/index.js +26 -0
- package/dist/footer/index.less +11 -0
- package/dist/footer/typing.d.ts +17 -0
- package/dist/footer/typing.js +1 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.js +9 -0
- package/dist/page/demo/basic.d.ts +3 -0
- package/dist/page/demo/basic.js +215 -0
- package/dist/page/demo/data.d.ts +16 -0
- package/dist/page/demo/data.js +121 -0
- package/dist/page/demo/renderTable.d.ts +3 -0
- package/dist/page/demo/renderTable.js +209 -0
- package/dist/page/demo/selection.d.ts +3 -0
- package/dist/page/demo/selection.js +229 -0
- package/dist/page/index.d.ts +5 -0
- package/dist/page/index.js +120 -0
- package/dist/page/index.less +35 -0
- package/dist/page/typing.d.ts +68 -0
- package/dist/page/typing.js +1 -0
- package/dist/search-condition/demo/basic.d.ts +3 -0
- package/dist/search-condition/demo/basic.js +35 -0
- package/dist/search-condition/demo/custom.d.ts +3 -0
- package/dist/search-condition/demo/custom.js +35 -0
- package/dist/search-condition/demo/ellipsis.d.ts +3 -0
- package/dist/search-condition/demo/ellipsis.js +30 -0
- package/dist/search-condition/demo/expand.d.ts +3 -0
- package/dist/search-condition/demo/expand.js +46 -0
- package/dist/search-condition/demo/removeable.d.ts +3 -0
- package/dist/search-condition/demo/removeable.js +39 -0
- package/dist/search-condition/index.d.ts +5 -0
- package/dist/search-condition/index.js +226 -0
- package/dist/search-condition/index.less +65 -0
- package/dist/search-condition/typing.d.ts +39 -0
- package/dist/search-condition/typing.js +1 -0
- package/dist/tab/demo/basic.d.ts +3 -0
- package/dist/tab/demo/basic.js +36 -0
- package/dist/tab/demo/count.d.ts +3 -0
- package/dist/tab/demo/count.js +63 -0
- package/dist/tab/demo/extra.d.ts +3 -0
- package/dist/tab/demo/extra.js +70 -0
- package/dist/tab/demo/icon.d.ts +3 -0
- package/dist/tab/demo/icon.js +36 -0
- package/dist/tab/demo/overflowCount.d.ts +3 -0
- package/dist/tab/demo/overflowCount.js +50 -0
- package/dist/tab/demo/settingRef.d.ts +3 -0
- package/dist/tab/demo/settingRef.js +77 -0
- package/dist/tab/demo/slide.d.ts +3 -0
- package/dist/tab/demo/slide.js +98 -0
- package/dist/tab/index.d.ts +5 -0
- package/dist/tab/index.js +51 -0
- package/dist/tab/index.less +11 -0
- package/dist/tab/typing.d.ts +51 -0
- package/dist/tab/typing.js +1 -0
- package/dist/table/demo/basic.d.ts +3 -0
- package/dist/table/demo/basic.js +65 -0
- package/dist/table/demo/checkbox.d.ts +3 -0
- package/dist/table/demo/checkbox.js +75 -0
- package/dist/table/demo/data.d.ts +16 -0
- package/dist/table/demo/data.js +120 -0
- package/dist/table/demo/global-checkbox.d.ts +3 -0
- package/dist/table/demo/global-checkbox.js +83 -0
- package/dist/table/demo/setting.d.ts +3 -0
- package/dist/table/demo/setting.js +78 -0
- package/dist/table/index.d.ts +4 -0
- package/dist/table/index.js +173 -0
- package/dist/table/setting/components/height.d.ts +8 -0
- package/dist/table/setting/components/height.js +45 -0
- package/dist/table/setting/components/reload.d.ts +7 -0
- package/dist/table/setting/components/reload.js +19 -0
- package/dist/table/setting/components/sort-group.d.ts +10 -0
- package/dist/table/setting/components/sort-group.js +103 -0
- package/dist/table/setting/components/sort-item.d.ts +3 -0
- package/dist/table/setting/components/sort-item.js +20 -0
- package/dist/table/setting/components/sort.d.ts +9 -0
- package/dist/table/setting/components/sort.js +105 -0
- package/dist/table/setting/index.d.ts +18 -0
- package/dist/table/setting/index.js +41 -0
- package/dist/table/setting/index.less +33 -0
- package/dist/table/table/index.d.ts +5 -0
- package/dist/table/table/index.js +170 -0
- package/dist/table/table/index.less +35 -0
- package/dist/table/typing.d.ts +92 -0
- package/dist/table/typing.js +1 -0
- package/dist/title/demo/basic.d.ts +3 -0
- package/dist/title/demo/basic.js +35 -0
- package/dist/title/demo/custom.d.ts +3 -0
- package/dist/title/demo/custom.js +15 -0
- package/dist/title/index.d.ts +5 -0
- package/dist/title/index.js +32 -0
- package/dist/title/index.less +39 -0
- package/dist/title/typing.d.ts +22 -0
- package/dist/title/typing.js +10 -0
- package/package.json +86 -0
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
8
|
+
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."); }
|
|
9
|
+
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); }
|
|
10
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
11
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
12
|
+
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; }
|
|
13
|
+
import { SettingOutlined } from '@ant-design/icons';
|
|
14
|
+
import { Checkbox, Col, Popover, Row, Tooltip } from 'antd';
|
|
15
|
+
import React, { useMemo } from 'react';
|
|
16
|
+
import ProTitle from "../../../title";
|
|
17
|
+
import ColumnSortGroup from "./sort-group";
|
|
18
|
+
var ColumnSort = function ColumnSort(_ref) {
|
|
19
|
+
var checkable = _ref.checkable,
|
|
20
|
+
sortable = _ref.sortable,
|
|
21
|
+
_ref$columns = _ref.columns,
|
|
22
|
+
columns = _ref$columns === void 0 ? [] : _ref$columns,
|
|
23
|
+
onChange = _ref.onChange;
|
|
24
|
+
var _useMemo = useMemo(function () {
|
|
25
|
+
// 左侧固定列
|
|
26
|
+
var fiexdLeftColumns = columns.filter(function (column) {
|
|
27
|
+
return (column === null || column === void 0 ? void 0 : column.fixed) === 'left' || (column === null || column === void 0 ? void 0 : column.fixed) === true;
|
|
28
|
+
});
|
|
29
|
+
// 右侧固定列
|
|
30
|
+
var fixedRightColumns = columns.filter(function (column) {
|
|
31
|
+
return (column === null || column === void 0 ? void 0 : column.fixed) === 'right';
|
|
32
|
+
});
|
|
33
|
+
// 可自由排序列
|
|
34
|
+
var sortColumns = columns.filter(function (column) {
|
|
35
|
+
return !(column !== null && column !== void 0 && column.fixed);
|
|
36
|
+
});
|
|
37
|
+
return {
|
|
38
|
+
sortColumns: sortColumns,
|
|
39
|
+
fiexdLeftColumns: fiexdLeftColumns,
|
|
40
|
+
fixedRightColumns: fixedRightColumns
|
|
41
|
+
};
|
|
42
|
+
}, [columns]),
|
|
43
|
+
sortColumns = _useMemo.sortColumns,
|
|
44
|
+
fiexdLeftColumns = _useMemo.fiexdLeftColumns,
|
|
45
|
+
fixedRightColumns = _useMemo.fixedRightColumns;
|
|
46
|
+
|
|
47
|
+
// 展示字段集合
|
|
48
|
+
var selectedKeys = useMemo(function () {
|
|
49
|
+
return sortColumns.filter(function (_ref2) {
|
|
50
|
+
var _ref2$hideInTable = _ref2.hideInTable,
|
|
51
|
+
hideInTable = _ref2$hideInTable === void 0 ? false : _ref2$hideInTable;
|
|
52
|
+
return !hideInTable;
|
|
53
|
+
}).map(function (item) {
|
|
54
|
+
return item.dataIndex;
|
|
55
|
+
});
|
|
56
|
+
}, [sortColumns]);
|
|
57
|
+
var handleGroupChange = function handleGroupChange(newColumns) {
|
|
58
|
+
console.log('handleGroupChange', newColumns);
|
|
59
|
+
|
|
60
|
+
// const keys = newColumns.filter((item) => !(item.hideInTable || false));
|
|
61
|
+
onChange === null || onChange === void 0 || onChange([].concat(_toConsumableArray(fiexdLeftColumns), _toConsumableArray(newColumns), _toConsumableArray(fixedRightColumns)));
|
|
62
|
+
};
|
|
63
|
+
var handleChange = function handleChange(e) {
|
|
64
|
+
var checked = e.target.checked;
|
|
65
|
+
onChange === null || onChange === void 0 || onChange(_toConsumableArray(columns.map(function (item) {
|
|
66
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
67
|
+
hideInTable: !checked
|
|
68
|
+
});
|
|
69
|
+
})));
|
|
70
|
+
};
|
|
71
|
+
return /*#__PURE__*/React.createElement(Popover, {
|
|
72
|
+
trigger: "click",
|
|
73
|
+
arrow: {
|
|
74
|
+
pointAtCenter: true
|
|
75
|
+
},
|
|
76
|
+
placement: "bottomRight",
|
|
77
|
+
content: /*#__PURE__*/React.createElement("div", {
|
|
78
|
+
className: "sooloer-table-setting-column-sort"
|
|
79
|
+
}, /*#__PURE__*/React.createElement(Row, {
|
|
80
|
+
align: "middle",
|
|
81
|
+
className: "sooloer-table-setting-column-sort-title"
|
|
82
|
+
}, /*#__PURE__*/React.createElement(Col, {
|
|
83
|
+
flex: 1
|
|
84
|
+
}, /*#__PURE__*/React.createElement(ProTitle, {
|
|
85
|
+
title: "\u5B57\u6BB5\u9009\u62E9\u4E0E\u6392\u5E8F"
|
|
86
|
+
})), /*#__PURE__*/React.createElement(Col, {
|
|
87
|
+
flex: "none"
|
|
88
|
+
}, checkable && /*#__PURE__*/React.createElement(Checkbox, {
|
|
89
|
+
onChange: handleChange,
|
|
90
|
+
checked: selectedKeys.length === sortColumns.length,
|
|
91
|
+
indeterminate: !!selectedKeys.length && selectedKeys.length !== sortColumns.length
|
|
92
|
+
}, "\u5168\u9009"))), /*#__PURE__*/React.createElement("div", {
|
|
93
|
+
className: "sooloer-table-setting-column-sort-container"
|
|
94
|
+
}, /*#__PURE__*/React.createElement(ColumnSortGroup, {
|
|
95
|
+
data: sortColumns,
|
|
96
|
+
sortable: sortable,
|
|
97
|
+
checkable: checkable,
|
|
98
|
+
selectedKeys: selectedKeys,
|
|
99
|
+
onChange: handleGroupChange
|
|
100
|
+
})))
|
|
101
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
102
|
+
title: "\u5217\u8BBE\u7F6E"
|
|
103
|
+
}, /*#__PURE__*/React.createElement(SettingOutlined, null)));
|
|
104
|
+
};
|
|
105
|
+
export default ColumnSort;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { SizeProps } from '../typing';
|
|
3
|
+
import './index.less';
|
|
4
|
+
type SettingProps = {
|
|
5
|
+
size: SizeProps;
|
|
6
|
+
columns?: any[];
|
|
7
|
+
loading?: boolean;
|
|
8
|
+
sizeable?: boolean;
|
|
9
|
+
checkable?: boolean;
|
|
10
|
+
sortable?: boolean;
|
|
11
|
+
reload?: boolean;
|
|
12
|
+
prefixCls?: string;
|
|
13
|
+
onReload?: () => void;
|
|
14
|
+
onSizeChange?: (size: SizeProps) => void;
|
|
15
|
+
onColumnSortChange?: (columns: any[]) => void;
|
|
16
|
+
};
|
|
17
|
+
declare const Setting: React.FC<SettingProps>;
|
|
18
|
+
export default Setting;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { ConfigProvider, Space } from 'antd';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import Height from "./components/height";
|
|
4
|
+
import Reload from "./components/reload";
|
|
5
|
+
import Sort from "./components/sort";
|
|
6
|
+
import "./index.less";
|
|
7
|
+
var Setting = function Setting(_ref) {
|
|
8
|
+
var size = _ref.size,
|
|
9
|
+
_ref$sizeable = _ref.sizeable,
|
|
10
|
+
sizeable = _ref$sizeable === void 0 ? true : _ref$sizeable,
|
|
11
|
+
_ref$checkable = _ref.checkable,
|
|
12
|
+
checkable = _ref$checkable === void 0 ? true : _ref$checkable,
|
|
13
|
+
_ref$sortable = _ref.sortable,
|
|
14
|
+
sortable = _ref$sortable === void 0 ? true : _ref$sortable,
|
|
15
|
+
_ref$reload = _ref.reload,
|
|
16
|
+
reload = _ref$reload === void 0 ? true : _ref$reload,
|
|
17
|
+
loading = _ref.loading,
|
|
18
|
+
columns = _ref.columns,
|
|
19
|
+
prefixCls = _ref.prefixCls,
|
|
20
|
+
onReload = _ref.onReload,
|
|
21
|
+
onSizeChange = _ref.onSizeChange,
|
|
22
|
+
onColumnSortChange = _ref.onColumnSortChange;
|
|
23
|
+
return /*#__PURE__*/React.createElement(ConfigProvider, {
|
|
24
|
+
prefixCls: prefixCls
|
|
25
|
+
}, /*#__PURE__*/React.createElement(Space, {
|
|
26
|
+
className: "sooloer-table-setting",
|
|
27
|
+
size: 16
|
|
28
|
+
}, reload && /*#__PURE__*/React.createElement(Reload, {
|
|
29
|
+
loading: loading,
|
|
30
|
+
onReload: onReload
|
|
31
|
+
}), sizeable && /*#__PURE__*/React.createElement(Height, {
|
|
32
|
+
size: size,
|
|
33
|
+
onChange: onSizeChange
|
|
34
|
+
}), /*#__PURE__*/React.createElement(Sort, {
|
|
35
|
+
checkable: checkable,
|
|
36
|
+
sortable: sortable,
|
|
37
|
+
columns: columns,
|
|
38
|
+
onChange: onColumnSortChange
|
|
39
|
+
})));
|
|
40
|
+
};
|
|
41
|
+
export default Setting;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
.sooloer-table-setting {
|
|
2
|
+
font-size: 16px;
|
|
3
|
+
line-height: 1;
|
|
4
|
+
div[class$='-space-item'] {
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
&:hover {
|
|
7
|
+
color: var(--ant-primary-color-hover);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
&-column-sort {
|
|
11
|
+
max-width: 960px;
|
|
12
|
+
&-title {
|
|
13
|
+
height: 36px;
|
|
14
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.sooloer-sortable {
|
|
20
|
+
&-item {
|
|
21
|
+
// z-index受.ant-popover样式影响,
|
|
22
|
+
// 在popover中使用时需要不低于.ant-popover的z-index
|
|
23
|
+
// 否则拖拽时会被popover遮盖
|
|
24
|
+
z-index: 9999;
|
|
25
|
+
margin: 8px 2px;
|
|
26
|
+
padding: 4px 8px 4px 4px;
|
|
27
|
+
border: 1px solid rgb(230, 247, 255);
|
|
28
|
+
border-radius: 2px;
|
|
29
|
+
cursor: move;
|
|
30
|
+
// user-select: none;
|
|
31
|
+
// display: inline-block;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
var _excluded = ["loading", "height", "columns", "pagination", "setting", "rowKey", "dataSource", "globalCheckable", "globalCheckboxText", "expandable", "onGlobalCheckboxChange"],
|
|
3
|
+
_excluded2 = ["getContainer"];
|
|
4
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
11
|
+
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."); }
|
|
12
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
13
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
14
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
15
|
+
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."); }
|
|
16
|
+
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); }
|
|
17
|
+
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; }
|
|
18
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
19
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
20
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
21
|
+
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; }
|
|
22
|
+
import { sum } from '@tmaito/utils';
|
|
23
|
+
import { Checkbox, Col, ConfigProvider, Row, Table } from 'antd';
|
|
24
|
+
import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
|
|
25
|
+
import { render } from 'react-dom';
|
|
26
|
+
import Setting from "../setting";
|
|
27
|
+
import "./index.less";
|
|
28
|
+
var ElTable = function ElTable(_ref) {
|
|
29
|
+
var _ref$loading = _ref.loading,
|
|
30
|
+
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
31
|
+
_ref$height = _ref.height,
|
|
32
|
+
height = _ref$height === void 0 ? 0 : _ref$height,
|
|
33
|
+
_ref$columns = _ref.columns,
|
|
34
|
+
columns = _ref$columns === void 0 ? [] : _ref$columns,
|
|
35
|
+
pagination = _ref.pagination,
|
|
36
|
+
setting = _ref.setting,
|
|
37
|
+
_ref$rowKey = _ref.rowKey,
|
|
38
|
+
rowKey = _ref$rowKey === void 0 ? 'id' : _ref$rowKey,
|
|
39
|
+
_ref$dataSource = _ref.dataSource,
|
|
40
|
+
dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
|
|
41
|
+
_ref$globalCheckable = _ref.globalCheckable,
|
|
42
|
+
globalCheckable = _ref$globalCheckable === void 0 ? false : _ref$globalCheckable,
|
|
43
|
+
_ref$globalCheckboxTe = _ref.globalCheckboxText,
|
|
44
|
+
globalCheckboxText = _ref$globalCheckboxTe === void 0 ? '全选所有数据' : _ref$globalCheckboxTe,
|
|
45
|
+
expandable = _ref.expandable,
|
|
46
|
+
onGlobalCheckboxChange = _ref.onGlobalCheckboxChange,
|
|
47
|
+
args = _objectWithoutProperties(_ref, _excluded);
|
|
48
|
+
var _useState = useState('small'),
|
|
49
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
50
|
+
size = _useState2[0],
|
|
51
|
+
setSize = _useState2[1];
|
|
52
|
+
var _useState3 = useState(false),
|
|
53
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
54
|
+
globalChecked = _useState4[0],
|
|
55
|
+
setGlobalChecked = _useState4[1];
|
|
56
|
+
var _useState5 = useState(_toConsumableArray(columns)),
|
|
57
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
58
|
+
sortColumns = _useState6[0],
|
|
59
|
+
setSortColumns = _useState6[1];
|
|
60
|
+
var _useContext = useContext(ConfigProvider.ConfigContext),
|
|
61
|
+
getPrefixCls = _useContext.getPrefixCls;
|
|
62
|
+
|
|
63
|
+
// 全局勾选
|
|
64
|
+
var handleGlobalChange = function handleGlobalChange(e) {
|
|
65
|
+
var checked = e.target.checked;
|
|
66
|
+
setGlobalChecked(checked);
|
|
67
|
+
onGlobalCheckboxChange === null || onGlobalCheckboxChange === void 0 || onGlobalCheckboxChange(checked);
|
|
68
|
+
};
|
|
69
|
+
var showColumns = useMemo(function () {
|
|
70
|
+
return sortColumns.filter(function (item) {
|
|
71
|
+
return !(item !== null && item !== void 0 && item.hideInTable || false);
|
|
72
|
+
});
|
|
73
|
+
}, [sortColumns]);
|
|
74
|
+
var tableHeaderHeight = useMemo(function () {
|
|
75
|
+
if (size === 'large') {
|
|
76
|
+
return 56;
|
|
77
|
+
}
|
|
78
|
+
if (size === 'middle') {
|
|
79
|
+
return 48;
|
|
80
|
+
}
|
|
81
|
+
return 40;
|
|
82
|
+
}, [size]);
|
|
83
|
+
var paginationConfig = useMemo(function () {
|
|
84
|
+
if (pagination !== false) {
|
|
85
|
+
return _objectSpread({
|
|
86
|
+
total: 0,
|
|
87
|
+
current: 1,
|
|
88
|
+
pageSize: 20,
|
|
89
|
+
className: 'sooloer-table-pagination',
|
|
90
|
+
pageSizeOptions: [20, 50, 100, 200],
|
|
91
|
+
showTotal: function showTotal(total, range) {
|
|
92
|
+
return /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
|
|
93
|
+
flex: "auto"
|
|
94
|
+
}, globalCheckable && (args === null || args === void 0 ? void 0 : args.rowSelection) && /*#__PURE__*/React.createElement(Checkbox, {
|
|
95
|
+
checked: globalChecked,
|
|
96
|
+
onChange: handleGlobalChange,
|
|
97
|
+
className: "sooloer-table-global-checkbox"
|
|
98
|
+
}, globalCheckboxText)), /*#__PURE__*/React.createElement(Col, {
|
|
99
|
+
flex: "none"
|
|
100
|
+
}, "\u7B2C ".concat(range[0], " - ").concat(range[1], " \u6761\uFF0C\u5171 ").concat(total, " \u6761\u8BB0\u5F55")));
|
|
101
|
+
},
|
|
102
|
+
showQuickJumper: true,
|
|
103
|
+
showSizeChanger: true,
|
|
104
|
+
size: 'small'
|
|
105
|
+
}, pagination);
|
|
106
|
+
}
|
|
107
|
+
return pagination;
|
|
108
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
109
|
+
}, [pagination, globalChecked, args === null || args === void 0 ? void 0 : args.rowSelection, globalCheckable, globalCheckboxText]);
|
|
110
|
+
var handleColumnSortChange = function handleColumnSortChange(values) {
|
|
111
|
+
setSortColumns(_toConsumableArray(values));
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
// table config 初始化挂载
|
|
115
|
+
useLayoutEffect(function () {
|
|
116
|
+
if (setting) {
|
|
117
|
+
var getContainer = setting.getContainer,
|
|
118
|
+
_args = _objectWithoutProperties(setting, _excluded2);
|
|
119
|
+
var prefixCls = getPrefixCls();
|
|
120
|
+
var node = typeof getContainer === 'string' ? document.querySelector(getContainer) : getContainer;
|
|
121
|
+
if (getContainer) {
|
|
122
|
+
render(
|
|
123
|
+
/*#__PURE__*/
|
|
124
|
+
// @ts-ignore
|
|
125
|
+
React.createElement(Setting, _extends({}, _args, {
|
|
126
|
+
size: size,
|
|
127
|
+
loading: typeof loading === 'boolean' ? loading : loading === null || loading === void 0 ? void 0 : loading.spinning,
|
|
128
|
+
prefixCls: prefixCls,
|
|
129
|
+
columns: sortColumns,
|
|
130
|
+
onReload: function onReload() {
|
|
131
|
+
var _setting$onReload;
|
|
132
|
+
return setting === null || setting === void 0 || (_setting$onReload = setting.onReload) === null || _setting$onReload === void 0 ? void 0 : _setting$onReload.call(setting);
|
|
133
|
+
},
|
|
134
|
+
onSizeChange: setSize,
|
|
135
|
+
onColumnSortChange: handleColumnSortChange
|
|
136
|
+
})), node);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}, [size, sortColumns, setting, getPrefixCls]);
|
|
140
|
+
|
|
141
|
+
// scroll 滚动
|
|
142
|
+
var resetScrollProps = function resetScrollProps() {
|
|
143
|
+
var scrollProps = {
|
|
144
|
+
x: sum(showColumns, 'width', 120),
|
|
145
|
+
scrollToFirstRowOnChange: true
|
|
146
|
+
};
|
|
147
|
+
if (height) {
|
|
148
|
+
scrollProps = _objectSpread(_objectSpread({}, scrollProps), {}, {
|
|
149
|
+
y: height - tableHeaderHeight - 48
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
return scrollProps;
|
|
153
|
+
};
|
|
154
|
+
return /*#__PURE__*/React.createElement(Table, _extends({}, args, {
|
|
155
|
+
size: size,
|
|
156
|
+
rowKey: rowKey,
|
|
157
|
+
className: "sooloer-table",
|
|
158
|
+
columns: showColumns,
|
|
159
|
+
dataSource: dataSource,
|
|
160
|
+
style: {
|
|
161
|
+
height: height
|
|
162
|
+
},
|
|
163
|
+
loading: loading
|
|
164
|
+
// @ts-ignore
|
|
165
|
+
,
|
|
166
|
+
pagination: paginationConfig,
|
|
167
|
+
scroll: resetScrollProps()
|
|
168
|
+
}));
|
|
169
|
+
};
|
|
170
|
+
export default ElTable;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
.sooloer-table {
|
|
2
|
+
height: 100%;
|
|
3
|
+
// transition: all 0.3s cubic-bezier(0.9, 0, 0.3, 0.7);
|
|
4
|
+
> div[class$='-loading'] {
|
|
5
|
+
height: 100%;
|
|
6
|
+
> div {
|
|
7
|
+
&:last-child {
|
|
8
|
+
height: 100%;
|
|
9
|
+
> div {
|
|
10
|
+
height: calc(100% - 48px);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
div[class$='-table-container'] {
|
|
16
|
+
height: 100%;
|
|
17
|
+
}
|
|
18
|
+
div[class$='-table-body'] {
|
|
19
|
+
height: 100%;
|
|
20
|
+
}
|
|
21
|
+
tr[class$='-table-placeholder'] {
|
|
22
|
+
> td {
|
|
23
|
+
border-bottom: none;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
li[class$='-pagination-total-text'] {
|
|
27
|
+
flex: 1;
|
|
28
|
+
}
|
|
29
|
+
&-global-checkbox {
|
|
30
|
+
margin-left: 12px;
|
|
31
|
+
}
|
|
32
|
+
.sooloer-table-pagination {
|
|
33
|
+
margin: 12px 0;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import type { TableProps } from 'antd/es/table';
|
|
2
|
+
import type { ExpandableConfig } from 'antd/es/table/interface';
|
|
3
|
+
import type React from 'react';
|
|
4
|
+
export type SizeProps = 'large' | 'middle' | 'small';
|
|
5
|
+
export interface SelectedRowProps {
|
|
6
|
+
/**
|
|
7
|
+
* @description 取表格 roeKey 字段,必传
|
|
8
|
+
*/
|
|
9
|
+
id?: string;
|
|
10
|
+
/**
|
|
11
|
+
* @description 当前勾选行信息
|
|
12
|
+
*/
|
|
13
|
+
record?: any;
|
|
14
|
+
}
|
|
15
|
+
export interface SelectedRowKeyProps {
|
|
16
|
+
/**
|
|
17
|
+
* @description 取表格 roeKey 字段,必传
|
|
18
|
+
*/
|
|
19
|
+
id?: string;
|
|
20
|
+
/**
|
|
21
|
+
* @description 当前勾选行信息
|
|
22
|
+
*/
|
|
23
|
+
record?: any;
|
|
24
|
+
/**
|
|
25
|
+
* @description 子表格指定选中项的 record 数组
|
|
26
|
+
*/
|
|
27
|
+
expandSelectedRowKeys?: SelectedRowProps[];
|
|
28
|
+
/**
|
|
29
|
+
* @description 子表格未选中项的 record 集合
|
|
30
|
+
*/
|
|
31
|
+
expandUnselectedRowKeys?: SelectedRowProps[];
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* table props
|
|
35
|
+
*/
|
|
36
|
+
export type ProTableProps = TableProps<any> & {
|
|
37
|
+
/**
|
|
38
|
+
* @description 取表格 roeKey 字段,默认 id
|
|
39
|
+
*/
|
|
40
|
+
rowKey?: string;
|
|
41
|
+
/**
|
|
42
|
+
* @description 是否可跨页勾选
|
|
43
|
+
* @default false
|
|
44
|
+
*/
|
|
45
|
+
multipleable?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* @description 是否可全局勾选
|
|
48
|
+
* @default false
|
|
49
|
+
*/
|
|
50
|
+
globalCheckable?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* 全局勾选框文案
|
|
53
|
+
*/
|
|
54
|
+
globalCheckboxText?: '全选所有数据';
|
|
55
|
+
/**
|
|
56
|
+
* @description 表格行是否可选择,配置项参考 antd.Table
|
|
57
|
+
*/
|
|
58
|
+
rowSelection?: {
|
|
59
|
+
selectedRowKeys?: SelectedRowKeyProps[];
|
|
60
|
+
onChange?: (selectedRowKeys: SelectedRowKeyProps[], globalChecked: boolean) => void;
|
|
61
|
+
};
|
|
62
|
+
/**
|
|
63
|
+
* @description 子表格展开配置
|
|
64
|
+
*/
|
|
65
|
+
expandable?: {
|
|
66
|
+
/**
|
|
67
|
+
* @description 子表格是否可勾选
|
|
68
|
+
*/
|
|
69
|
+
selectionable?: boolean;
|
|
70
|
+
} & ExpandableConfig<any>;
|
|
71
|
+
setting?: false | {
|
|
72
|
+
getContainer: string | React.ReactNode;
|
|
73
|
+
sizeable?: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* 可勾选展示列
|
|
76
|
+
*/
|
|
77
|
+
checkable?: boolean;
|
|
78
|
+
/**
|
|
79
|
+
* 可对 table 列进行排序
|
|
80
|
+
*/
|
|
81
|
+
sortable?: boolean;
|
|
82
|
+
/**
|
|
83
|
+
* 可对 table 列进行刷新
|
|
84
|
+
*/
|
|
85
|
+
reloadable?: boolean;
|
|
86
|
+
/**
|
|
87
|
+
* @description 触发刷新事件
|
|
88
|
+
*/
|
|
89
|
+
onReload?: () => void;
|
|
90
|
+
};
|
|
91
|
+
[propName: string]: any;
|
|
92
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ProTitle } from "../..";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export default (function () {
|
|
4
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProTitle, {
|
|
5
|
+
title: "\u6807\u9898"
|
|
6
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
7
|
+
style: {
|
|
8
|
+
marginTop: '24px'
|
|
9
|
+
}
|
|
10
|
+
}), /*#__PURE__*/React.createElement(ProTitle, {
|
|
11
|
+
title: "\u6807\u9898",
|
|
12
|
+
color: "primary"
|
|
13
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
14
|
+
style: {
|
|
15
|
+
marginTop: '24px'
|
|
16
|
+
}
|
|
17
|
+
}), /*#__PURE__*/React.createElement(ProTitle, {
|
|
18
|
+
title: "\u6807\u9898",
|
|
19
|
+
color: "error"
|
|
20
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
21
|
+
style: {
|
|
22
|
+
marginTop: '24px'
|
|
23
|
+
}
|
|
24
|
+
}), /*#__PURE__*/React.createElement(ProTitle, {
|
|
25
|
+
title: "\u6807\u9898",
|
|
26
|
+
color: "success"
|
|
27
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
28
|
+
style: {
|
|
29
|
+
marginTop: '24px'
|
|
30
|
+
}
|
|
31
|
+
}), /*#__PURE__*/React.createElement(ProTitle, {
|
|
32
|
+
title: "\u6807\u9898",
|
|
33
|
+
color: "warning"
|
|
34
|
+
}));
|
|
35
|
+
});
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ProTitle } from "../..";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export default (function () {
|
|
4
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProTitle, {
|
|
5
|
+
title: "\u591A\u5F69\u5FBD\u6807",
|
|
6
|
+
color: "#2db7f5"
|
|
7
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
8
|
+
style: {
|
|
9
|
+
marginTop: '24px'
|
|
10
|
+
}
|
|
11
|
+
}), /*#__PURE__*/React.createElement(ProTitle, {
|
|
12
|
+
title: /*#__PURE__*/React.createElement("div", null, "\u591A\u5F69\u5FBD\u6807"),
|
|
13
|
+
color: "#87d068"
|
|
14
|
+
}));
|
|
15
|
+
});
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
var _excluded = ["color", "title", "className"];
|
|
3
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
8
|
+
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; }
|
|
9
|
+
import classnames from 'classnames';
|
|
10
|
+
import React from 'react';
|
|
11
|
+
import "./index.less";
|
|
12
|
+
import { isPresetColor } from "./typing";
|
|
13
|
+
var ProTitle = function ProTitle(_ref) {
|
|
14
|
+
var _ref$color = _ref.color,
|
|
15
|
+
color = _ref$color === void 0 ? 'default' : _ref$color,
|
|
16
|
+
title = _ref.title,
|
|
17
|
+
className = _ref.className,
|
|
18
|
+
args = _objectWithoutProperties(_ref, _excluded);
|
|
19
|
+
var statusStyle = {};
|
|
20
|
+
if (color && !isPresetColor(color)) {
|
|
21
|
+
statusStyle.background = color;
|
|
22
|
+
}
|
|
23
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
24
|
+
className: classnames('sooloer-title', className)
|
|
25
|
+
}, args), /*#__PURE__*/React.createElement("div", {
|
|
26
|
+
className: classnames('sooloer-title-line', _defineProperty({}, "sooloer-title-status-".concat(color), isPresetColor(color))),
|
|
27
|
+
style: statusStyle
|
|
28
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
29
|
+
className: "sooloer-title-inner"
|
|
30
|
+
}, title));
|
|
31
|
+
};
|
|
32
|
+
export default ProTitle;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
.sooloer-title {
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
|
|
5
|
+
&-line {
|
|
6
|
+
display: inline-block;
|
|
7
|
+
width: 4px;
|
|
8
|
+
height: 16px;
|
|
9
|
+
margin-right: 6px;
|
|
10
|
+
vertical-align: text-bottom;
|
|
11
|
+
border-radius: 2px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&-inner {
|
|
15
|
+
font-size: 14px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&-status {
|
|
19
|
+
&-primary {
|
|
20
|
+
background-color: #006cd2;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&-error {
|
|
24
|
+
background-color: #ff2233;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&-default {
|
|
28
|
+
background-color: #897c59;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&-warning {
|
|
32
|
+
background-color: #ff8607;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&-success {
|
|
36
|
+
background-color: #14c437;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|