@kep-platform/basic-component 0.0.2 → 0.0.5
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/dist/@types/index.d.ts +60 -0
- package/dist/@types/styled-components.d.ts +9 -0
- package/dist/@types/theme.d.ts +38 -0
- package/dist/BoxShadowBox/BoxShadowBox.d.ts +8 -0
- package/dist/BoxShadowBox/BoxShadowBox.js +14 -0
- package/dist/BoxShadowBox/index.d.ts +1 -0
- package/dist/BoxShadowBox/index.js +1 -0
- package/dist/Button/Button.d.ts +12 -0
- package/dist/Button/Button.js +86 -0
- package/dist/Button/index.d.ts +1 -0
- package/dist/Button/index.js +1 -0
- package/dist/Columns/Columns.d.ts +24 -0
- package/dist/Columns/Columns.js +126 -0
- package/dist/Columns/index.d.ts +1 -0
- package/dist/Columns/index.js +1 -0
- package/dist/Flex/flex.d.ts +14 -0
- package/dist/Flex/flex.js +29 -0
- package/dist/Flex/index.d.ts +1 -0
- package/dist/Flex/index.js +1 -0
- package/dist/Grid/Col.d.ts +8 -0
- package/dist/Grid/Col.js +12 -0
- package/dist/Grid/Row.d.ts +6 -0
- package/dist/Grid/Row.js +55 -0
- package/dist/Grid/index.d.ts +2 -0
- package/dist/Grid/index.js +2 -0
- package/dist/Indent/Indent.d.ts +7 -0
- package/dist/Indent/Indent.js +25 -0
- package/dist/Indent/index.d.ts +1 -0
- package/dist/Indent/index.js +1 -0
- package/dist/List/List.d.ts +19 -0
- package/dist/List/List.js +41 -0
- package/dist/List/index.d.ts +1 -0
- package/dist/List/index.js +1 -0
- package/dist/Menu/Menu.d.ts +14 -0
- package/dist/Menu/Menu.js +107 -0
- package/dist/Menu/index.d.ts +3 -0
- package/dist/Menu/index.js +2 -0
- package/dist/PopupBox/PopupBox.d.ts +12 -0
- package/dist/PopupBox/PopupBox.js +12 -0
- package/dist/PopupBox/index.d.ts +1 -0
- package/dist/PopupBox/index.js +1 -0
- package/dist/Space/Space.d.ts +11 -0
- package/dist/Space/Space.js +39 -0
- package/dist/Space/index.d.ts +1 -0
- package/dist/Space/index.js +1 -0
- package/dist/Table/Table.d.ts +16 -0
- package/dist/Table/Table.js +230 -0
- package/dist/Table/index.d.ts +1 -0
- package/dist/Table/index.js +1 -0
- package/dist/Tag/Tag.d.ts +7 -0
- package/dist/Tag/Tag.js +16 -0
- package/dist/Tree/BOMTree.d.ts +3 -0
- package/dist/Tree/BOMTree.js +111 -0
- package/dist/Tree/MainProperties.d.ts +12 -0
- package/dist/Tree/MainProperties.js +23 -0
- package/dist/Tree/Tree.d.ts +20 -0
- package/dist/Tree/Tree.js +253 -0
- package/dist/Tree/TreeNode.d.ts +20 -0
- package/dist/Tree/TreeNode.js +147 -0
- package/dist/Tree/index.d.ts +3 -0
- package/dist/Tree/index.js +3 -0
- package/dist/__consts/theme.d.ts +81 -0
- package/dist/__consts/theme.js +88 -0
- package/dist/__consts/unit.d.ts +1 -0
- package/dist/__consts/unit.js +1 -0
- package/dist/__styles/GlobalStyles.d.ts +6 -0
- package/dist/__styles/GlobalStyles.js +6 -0
- package/dist/__styles/index.d.ts +1 -0
- package/dist/__styles/index.js +1 -0
- package/dist/index.d.ts +11 -1
- package/dist/index.js +11 -1
- package/package.json +10 -2
- package/dist/Foo/index.d.ts +0 -5
- package/dist/Foo/index.js +0 -5
@@ -0,0 +1,41 @@
|
|
1
|
+
var _excluded = ["items", "direction", "itemRender", "children"],
|
2
|
+
_excluded2 = ["key", "title"];
|
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 _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; }
|
5
|
+
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; }
|
6
|
+
import React from 'react';
|
7
|
+
import styled from 'styled-components';
|
8
|
+
|
9
|
+
//因为UL自带有title属性
|
10
|
+
|
11
|
+
var StyledUL = styled.ul.withConfig({
|
12
|
+
displayName: "StyledUL",
|
13
|
+
componentId: "basic-component-347b__sc-1ombcxm-0"
|
14
|
+
})(["display:flex;flex-direction:", ";"], function (props) {
|
15
|
+
return props.direction || 'row';
|
16
|
+
});
|
17
|
+
export var ListItem = styled.li.withConfig({
|
18
|
+
displayName: "ListItem",
|
19
|
+
componentId: "basic-component-347b__sc-1ombcxm-1"
|
20
|
+
})(["flex:0 0 auto;"]);
|
21
|
+
|
22
|
+
/* 理论上来说所有list相关的数据结构都应该交给List组件来完成,但是List组件只处理List结构不处理任何其他样式问题 */
|
23
|
+
var List = function List(_ref) {
|
24
|
+
var items = _ref.items,
|
25
|
+
_ref$direction = _ref.direction,
|
26
|
+
direction = _ref$direction === void 0 ? 'row' : _ref$direction,
|
27
|
+
itemRender = _ref.itemRender,
|
28
|
+
children = _ref.children,
|
29
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
30
|
+
return /*#__PURE__*/React.createElement(StyledUL, _extends({
|
31
|
+
direction: direction
|
32
|
+
}, rest), items && Array.isArray(items) ? items.map(function (item, index) {
|
33
|
+
var key = item.key,
|
34
|
+
title = item.title,
|
35
|
+
rest = _objectWithoutProperties(item, _excluded2);
|
36
|
+
return /*#__PURE__*/React.createElement(ListItem, _extends({
|
37
|
+
key: key
|
38
|
+
}, rest), itemRender ? itemRender(item, index) : title);
|
39
|
+
}) : children);
|
40
|
+
};
|
41
|
+
export default List;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as List, ListItem, type ListProps } from './List';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as List, ListItem } from "./List";
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import React, { ReactNode } from 'react';
|
2
|
+
export type MenuProps = {
|
3
|
+
items: MenuItem[];
|
4
|
+
direction?: Direction;
|
5
|
+
};
|
6
|
+
declare function Menu({ items, direction }: MenuProps): React.JSX.Element;
|
7
|
+
declare namespace Menu {
|
8
|
+
var Popup: typeof PopupMenu;
|
9
|
+
}
|
10
|
+
export declare function PopupMenu(props: MenuProps & {
|
11
|
+
children: ReactNode;
|
12
|
+
trigger?: TriggerType;
|
13
|
+
}): React.JSX.Element | undefined;
|
14
|
+
export default Menu;
|
@@ -0,0 +1,107 @@
|
|
1
|
+
var _excluded = ["children", "trigger"];
|
2
|
+
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); }
|
3
|
+
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; }
|
4
|
+
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; }
|
5
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
6
|
+
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."); }
|
7
|
+
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); }
|
8
|
+
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; }
|
9
|
+
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; } }
|
10
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
11
|
+
import { useClickOutsize } from '@kep-platform/hooks';
|
12
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
13
|
+
import styled, { css } from 'styled-components';
|
14
|
+
import { List, ListItem } from "../List";
|
15
|
+
import { PopupBox } from "../PopupBox";
|
16
|
+
var MenuList = styled(List).withConfig({
|
17
|
+
displayName: "MenuList",
|
18
|
+
componentId: "basic-component-347b__sc-d665dh-0"
|
19
|
+
})([""]);
|
20
|
+
var MenuListItem = styled(ListItem).withConfig({
|
21
|
+
displayName: "MenuListItem",
|
22
|
+
componentId: "basic-component-347b__sc-d665dh-1"
|
23
|
+
})(["background-color:var(--kep-platform-color-bg-base);border-radius:var(--kep-platform-border-radius-sm);margin:var(--kep-platform-margin-xxxs);padding:0 var(--kep-platform-padding-xs);height:var(--kep-platform-menu-item-height);line-height:var(--kep-platform-menu-item-line-height);&:hover{background-color:var(--kep-platform-color-bg-hover);}", ""], function (props) {
|
24
|
+
if (props.active) {
|
25
|
+
return css(["background-color:var(--kep-platform-color-bg-active) !important;color:var(--kep-platform-color-text-active) !important;"]);
|
26
|
+
}
|
27
|
+
});
|
28
|
+
function Menu(_ref) {
|
29
|
+
var items = _ref.items,
|
30
|
+
_ref$direction = _ref.direction,
|
31
|
+
direction = _ref$direction === void 0 ? 'row' : _ref$direction;
|
32
|
+
var _useState = useState(null),
|
33
|
+
_useState2 = _slicedToArray(_useState, 2),
|
34
|
+
activeKey = _useState2[0],
|
35
|
+
setActiveKey = _useState2[1];
|
36
|
+
var menuClickHandler = useCallback(function (e) {
|
37
|
+
var dataKey = e.target.getAttribute('data-key');
|
38
|
+
setActiveKey(dataKey);
|
39
|
+
}, []);
|
40
|
+
return /*#__PURE__*/React.createElement(MenuList, {
|
41
|
+
direction: direction
|
42
|
+
}, items.map(function (item) {
|
43
|
+
return /*#__PURE__*/React.createElement(MenuListItem, {
|
44
|
+
key: item.key,
|
45
|
+
active: activeKey === item.key,
|
46
|
+
onClick: menuClickHandler,
|
47
|
+
"data-key": item.key
|
48
|
+
}, item.label);
|
49
|
+
}));
|
50
|
+
}
|
51
|
+
export function PopupMenu(props) {
|
52
|
+
var children = props.children,
|
53
|
+
_props$trigger = props.trigger,
|
54
|
+
trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
|
55
|
+
rest = _objectWithoutProperties(props, _excluded);
|
56
|
+
var _useState3 = useState({
|
57
|
+
left: 0,
|
58
|
+
top: 0
|
59
|
+
}),
|
60
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
61
|
+
pos = _useState4[0],
|
62
|
+
setPos = _useState4[1];
|
63
|
+
var triggerController = useRef(null);
|
64
|
+
var popupBox = useRef(null);
|
65
|
+
var mergeProps = useMemo(function () {
|
66
|
+
return {
|
67
|
+
ref: triggerController
|
68
|
+
};
|
69
|
+
}, []);
|
70
|
+
var showPopupMenu = useCallback(function (e) {
|
71
|
+
e.stopPropagation();
|
72
|
+
e.preventDefault();
|
73
|
+
var _ref2 = e,
|
74
|
+
clientX = _ref2.clientX,
|
75
|
+
clientY = _ref2.clientY;
|
76
|
+
setPos({
|
77
|
+
left: clientX,
|
78
|
+
top: clientY
|
79
|
+
});
|
80
|
+
}, []);
|
81
|
+
var hidePopupMenu = useCallback(function () {
|
82
|
+
setPos({
|
83
|
+
left: -999,
|
84
|
+
top: -999
|
85
|
+
});
|
86
|
+
}, []);
|
87
|
+
useClickOutsize('mousedown', popupBox, hidePopupMenu);
|
88
|
+
useClickOutsize('scroll', popupBox, hidePopupMenu);
|
89
|
+
useEffect(function () {
|
90
|
+
var triggerTarget = triggerController.current;
|
91
|
+
if (trigger) triggerTarget === null || triggerTarget === void 0 || triggerTarget.addEventListener(trigger, showPopupMenu);
|
92
|
+
return function () {
|
93
|
+
triggerTarget === null || triggerTarget === void 0 || triggerTarget.removeEventListener(trigger, showPopupMenu);
|
94
|
+
};
|
95
|
+
}, [trigger, showPopupMenu]);
|
96
|
+
if ( /*#__PURE__*/React.isValidElement(children)) {
|
97
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopupBox, {
|
98
|
+
left: pos.left,
|
99
|
+
top: pos.top,
|
100
|
+
ref: popupBox
|
101
|
+
}, /*#__PURE__*/React.createElement(Menu, _extends({}, rest, {
|
102
|
+
direction: "column"
|
103
|
+
}))), /*#__PURE__*/React.cloneElement(children, mergeProps));
|
104
|
+
} else console.warn('PopupMenu需要一个触发元素!');
|
105
|
+
}
|
106
|
+
Menu.Popup = PopupMenu;
|
107
|
+
export default Menu;
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import { HtmlHTMLAttributes, type ReactNode } from 'react';
|
2
|
+
export type PopupBoxProps = {
|
3
|
+
children?: ReactNode;
|
4
|
+
left?: number;
|
5
|
+
top?: number;
|
6
|
+
right?: number;
|
7
|
+
bottom?: number;
|
8
|
+
} & HtmlHTMLAttributes<HTMLDivElement>;
|
9
|
+
declare const PopupBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
10
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
11
|
+
}, Omit<PopupBoxProps, "children">>> & string;
|
12
|
+
export default PopupBox;
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import styled, { css } from 'styled-components';
|
2
|
+
var PopupBox = styled('div').withConfig({
|
3
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
4
|
+
return !['left', 'right', 'top', 'bottom'].includes(prop);
|
5
|
+
}
|
6
|
+
}).withConfig({
|
7
|
+
displayName: "PopupBox",
|
8
|
+
componentId: "basic-component-347b__sc-80rdwc-0"
|
9
|
+
})(["background-color:var(--kep-platform-color-bg-base);padding:var(--kep-platform-padding-xs);border-radius:var(--kep-platform-border-radius-sm);position:fixed;box-shadow:var(--kep-platform-box-shadow);z-index:var(--kep-platform-z-index-popup-base);", ";"], function (props) {
|
10
|
+
return css(["left:", "px;top:", "px;"], props.left || -999, props.top || -999);
|
11
|
+
});
|
12
|
+
export default PopupBox;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as PopupBox } from './PopupBox';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as PopupBox } from "./PopupBox";
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import React, { CSSProperties, HtmlHTMLAttributes, ReactNode } from 'react';
|
2
|
+
export type SpaceProps = {
|
3
|
+
children?: ReactNode;
|
4
|
+
className?: string;
|
5
|
+
style?: CSSProperties;
|
6
|
+
size?: SizeType;
|
7
|
+
direction?: Direction;
|
8
|
+
} & HtmlHTMLAttributes<HTMLUListElement>;
|
9
|
+
export declare const SpaceItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
|
10
|
+
declare const Space: React.FC<SpaceProps>;
|
11
|
+
export default Space;
|
@@ -0,0 +1,39 @@
|
|
1
|
+
var _excluded = ["size"];
|
2
|
+
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); }
|
3
|
+
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; }
|
4
|
+
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; }
|
5
|
+
import React from 'react';
|
6
|
+
import styled from 'styled-components';
|
7
|
+
var StyledSpace = styled.ul.withConfig({
|
8
|
+
displayName: "StyledSpace",
|
9
|
+
componentId: "basic-component-347b__sc-90tegf-0"
|
10
|
+
})(["list-style:none;display:inline-flex;align-items:center;flex-direction:", ";gap:", ";"], function (props) {
|
11
|
+
return props.direction;
|
12
|
+
}, function (props) {
|
13
|
+
switch (props.size) {
|
14
|
+
case 'small':
|
15
|
+
return 'var(--kep-platform-padding-xxs)';
|
16
|
+
case 'large':
|
17
|
+
return 'var(--kep-platform-padding-s)';
|
18
|
+
case 'middle':
|
19
|
+
default:
|
20
|
+
return 'var(--kep-platform-padding-xs)';
|
21
|
+
}
|
22
|
+
});
|
23
|
+
export var SpaceItem = styled.li.withConfig({
|
24
|
+
displayName: "SpaceItem",
|
25
|
+
componentId: "basic-component-347b__sc-90tegf-1"
|
26
|
+
})(["margin:0;padding:0;"]);
|
27
|
+
var Space = function Space(_ref) {
|
28
|
+
var _ref$size = _ref.size,
|
29
|
+
size = _ref$size === void 0 ? 'middle' : _ref$size,
|
30
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
31
|
+
return /*#__PURE__*/React.createElement(StyledSpace, _extends({}, rest, {
|
32
|
+
size: size
|
33
|
+
}), React.Children.map(rest.children, function (child, index) {
|
34
|
+
return /*#__PURE__*/React.createElement(SpaceItem, {
|
35
|
+
key: index
|
36
|
+
}, child);
|
37
|
+
}));
|
38
|
+
};
|
39
|
+
export default Space;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as Space, SpaceItem, type SpaceProps } from './Space';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as Space, SpaceItem } from "./Space";
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import React, { ReactNode } from 'react';
|
2
|
+
type SorterDesc = Record<string, Sorter>;
|
3
|
+
type FilterDesc = Record<string, string>;
|
4
|
+
export type TableProps = {
|
5
|
+
dataSource: Record<string, any>[];
|
6
|
+
columns: ColumnType[];
|
7
|
+
rowKey: string;
|
8
|
+
actions?: ReactNode[];
|
9
|
+
title?: ReactNode;
|
10
|
+
scroll?: boolean;
|
11
|
+
onChange?: (pagination?: Pagination, sorter?: SorterDesc, fitler?: FilterDesc) => void;
|
12
|
+
headerRender?: (column: ColumnType) => ReactNode;
|
13
|
+
groupBy?: string;
|
14
|
+
};
|
15
|
+
export default function Table({ columns, dataSource, rowKey, actions, title, scroll, onChange, headerRender, }: TableProps): React.JSX.Element;
|
16
|
+
export {};
|
@@ -0,0 +1,230 @@
|
|
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 = ["render"];
|
3
|
+
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; }
|
4
|
+
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; }
|
5
|
+
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; }
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
7
|
+
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); }
|
8
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
9
|
+
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."); }
|
10
|
+
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); }
|
11
|
+
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; }
|
12
|
+
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; } }
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
14
|
+
import CaretDownOutlined from '@ant-design/icons/CaretDownOutlined';
|
15
|
+
import CaretUpOutlined from '@ant-design/icons/CaretUpOutlined';
|
16
|
+
import React, { useCallback, useMemo, useRef, useState } from 'react';
|
17
|
+
import styled from 'styled-components';
|
18
|
+
import { BoxShadowBox } from "../BoxShadowBox";
|
19
|
+
import { Column, Columns } from "../Columns";
|
20
|
+
import { DefaultColumnWidth } from "../Columns/Columns";
|
21
|
+
import { Col, Row } from "../Grid";
|
22
|
+
import { List, ListItem } from "../List";
|
23
|
+
import { Space } from "../Space";
|
24
|
+
var TableContainer = styled.div.withConfig({
|
25
|
+
displayName: "TableContainer",
|
26
|
+
componentId: "basic-component-347b__sc-12r61fm-0"
|
27
|
+
})([""]);
|
28
|
+
var TableTitle = styled.h5.withConfig({
|
29
|
+
displayName: "TableTitle",
|
30
|
+
componentId: "basic-component-347b__sc-12r61fm-1"
|
31
|
+
})(["font-weight:600;padding:var(--kep-platform-padding-sm);"]);
|
32
|
+
var TableToolbar = styled.div.withConfig({
|
33
|
+
displayName: "TableToolbar",
|
34
|
+
componentId: "basic-component-347b__sc-12r61fm-2"
|
35
|
+
})(["text-align:right;padding:var(--kep-platform-padding-sm);"]);
|
36
|
+
var TableHeaderRow = styled(Columns).withConfig({
|
37
|
+
displayName: "TableHeaderRow",
|
38
|
+
componentId: "basic-component-347b__sc-12r61fm-3"
|
39
|
+
})(["border-bottom:var(--kep-platform-line-width) solid var(--kep-platform-color-table-border);& ", "{background-color:var(--kep-platform-header-bg);font-weight:600;position:sticky;&:not(:last-child):after{content:'';width:1px;height:calc(100% - 2 * var(--kep-platform-padding-xs));position:absolute;top:var(--kep-platform-padding-xs);right:0;background-color:var(--kep-platform-color-border-secondary);}}"], Column);
|
40
|
+
var TableBody = styled(List).withConfig({
|
41
|
+
displayName: "TableBody",
|
42
|
+
componentId: "basic-component-347b__sc-12r61fm-4"
|
43
|
+
})([""]);
|
44
|
+
var TableBodyRow = styled(ListItem).withConfig({
|
45
|
+
displayName: "TableBodyRow",
|
46
|
+
componentId: "basic-component-347b__sc-12r61fm-5"
|
47
|
+
})([""]);
|
48
|
+
var TableContent = styled.div.withConfig({
|
49
|
+
displayName: "TableContent",
|
50
|
+
componentId: "basic-component-347b__sc-12r61fm-6"
|
51
|
+
})(["position:relative;overflow:auto;border-radius:var(--kep-platform-border-radius);box-shadow:var(--kep-platform-box-shadow-tertiary);"]);
|
52
|
+
var SortIconList = styled(List).withConfig({
|
53
|
+
displayName: "SortIconList",
|
54
|
+
componentId: "basic-component-347b__sc-12r61fm-7"
|
55
|
+
})([""]);
|
56
|
+
var SortIconListItem = styled(ListItem).withConfig({
|
57
|
+
displayName: "SortIconListItem",
|
58
|
+
componentId: "basic-component-347b__sc-12r61fm-8"
|
59
|
+
})(["height:10px;line-height:10px;font-size:10px;cursor:pointer;user-select:none;color:", ";"], function (props) {
|
60
|
+
return props.active ? 'var(--kep-platform-color-primary)' : 'currentColor';
|
61
|
+
});
|
62
|
+
var SortIconGroup = function SortIconGroup(_ref) {
|
63
|
+
var sorter = _ref.sorter,
|
64
|
+
onSorterChange = _ref.onSorterChange,
|
65
|
+
hidden = _ref.hidden;
|
66
|
+
var onSortIconGroupClickHandler = useCallback(function () {
|
67
|
+
switch (sorter) {
|
68
|
+
case 'desc':
|
69
|
+
onSorterChange === null || onSorterChange === void 0 || onSorterChange();
|
70
|
+
break;
|
71
|
+
case 'asc':
|
72
|
+
onSorterChange === null || onSorterChange === void 0 || onSorterChange('desc');
|
73
|
+
break;
|
74
|
+
default:
|
75
|
+
onSorterChange === null || onSorterChange === void 0 || onSorterChange('asc');
|
76
|
+
}
|
77
|
+
}, [sorter, onSorterChange]);
|
78
|
+
return /*#__PURE__*/React.createElement(SortIconList, {
|
79
|
+
direction: "column",
|
80
|
+
onClick: onSortIconGroupClickHandler,
|
81
|
+
hidden: hidden
|
82
|
+
}, /*#__PURE__*/React.createElement(SortIconListItem, {
|
83
|
+
active: sorter === 'asc'
|
84
|
+
}, /*#__PURE__*/React.createElement(CaretUpOutlined, null)), /*#__PURE__*/React.createElement(SortIconListItem, {
|
85
|
+
active: sorter === 'desc'
|
86
|
+
}, /*#__PURE__*/React.createElement(CaretDownOutlined, null)));
|
87
|
+
};
|
88
|
+
var ColumnTitle = styled.div.withConfig({
|
89
|
+
displayName: "ColumnTitle",
|
90
|
+
componentId: "basic-component-347b__sc-12r61fm-9"
|
91
|
+
})([""]);
|
92
|
+
var ColumnTitleController = function ColumnTitleController(_ref2) {
|
93
|
+
var onSorterChange = _ref2.onSorterChange,
|
94
|
+
title = _ref2.title,
|
95
|
+
sorterType = _ref2.sorterType,
|
96
|
+
hasSorter = _ref2.hasSorter;
|
97
|
+
return /*#__PURE__*/React.createElement(ColumnTitle, null, /*#__PURE__*/React.createElement(Space, {
|
98
|
+
size: "small"
|
99
|
+
}, title, /*#__PURE__*/React.createElement(SortIconGroup, {
|
100
|
+
sorter: sorterType,
|
101
|
+
onSorterChange: onSorterChange,
|
102
|
+
hidden: !hasSorter
|
103
|
+
})));
|
104
|
+
};
|
105
|
+
function sortObjectsByProperty(objects, property, sorterType, func) {
|
106
|
+
var sorterOffset = sorterType === 'asc' ? 1 : sorterType === 'desc' ? -1 : 0;
|
107
|
+
if (sorterOffset === 0) return objects;
|
108
|
+
var sorterFunc = func || function (a, b) {
|
109
|
+
if (typeof a[property] === 'number' && typeof b[property] === 'number') {
|
110
|
+
return a[property] - b[property];
|
111
|
+
} else if (typeof a[property] === 'string' && typeof b[property] === 'string') {
|
112
|
+
return a[property].localeCompare(b[property]);
|
113
|
+
} else {
|
114
|
+
return 0;
|
115
|
+
}
|
116
|
+
};
|
117
|
+
switch (sorterOffset) {
|
118
|
+
case 1:
|
119
|
+
return objects.slice().sort(sorterFunc);
|
120
|
+
case -1:
|
121
|
+
return objects.slice().sort(sorterFunc).reverse();
|
122
|
+
}
|
123
|
+
}
|
124
|
+
export default function Table(_ref3) {
|
125
|
+
var columns = _ref3.columns,
|
126
|
+
dataSource = _ref3.dataSource,
|
127
|
+
rowKey = _ref3.rowKey,
|
128
|
+
actions = _ref3.actions,
|
129
|
+
title = _ref3.title,
|
130
|
+
scroll = _ref3.scroll,
|
131
|
+
onChange = _ref3.onChange,
|
132
|
+
headerRender = _ref3.headerRender;
|
133
|
+
var _useState = useState(null),
|
134
|
+
_useState2 = _slicedToArray(_useState, 2),
|
135
|
+
sorterController = _useState2[0],
|
136
|
+
setSorterController = _useState2[1];
|
137
|
+
var titleRowData = useMemo(function () {
|
138
|
+
var data = {};
|
139
|
+
columns.forEach(function (column) {
|
140
|
+
var dataIndex = column.dataIndex;
|
141
|
+
data[dataIndex] = /*#__PURE__*/React.createElement(ColumnTitleController, {
|
142
|
+
column: column,
|
143
|
+
onSorterChange: function onSorterChange(sorter) {
|
144
|
+
var key = column.key;
|
145
|
+
if (onChange) {
|
146
|
+
onChange === null || onChange === void 0 || onChange(undefined, _defineProperty({}, key, sorter), undefined);
|
147
|
+
} else {
|
148
|
+
setSorterController({
|
149
|
+
columnKey: column.key,
|
150
|
+
sorterType: sorter
|
151
|
+
});
|
152
|
+
}
|
153
|
+
},
|
154
|
+
title: (headerRender === null || headerRender === void 0 ? void 0 : headerRender(column)) || column.title,
|
155
|
+
sorterType: (sorterController === null || sorterController === void 0 ? void 0 : sorterController.columnKey) === column.key ? sorterController.sorterType : undefined,
|
156
|
+
hasSorter: !!column.sorter
|
157
|
+
});
|
158
|
+
});
|
159
|
+
return data;
|
160
|
+
}, [columns, onChange, sorterController, setSorterController]);
|
161
|
+
var boxShadowBox = useRef(null);
|
162
|
+
var headerColumns = useMemo(function () {
|
163
|
+
return columns.map(function (column) {
|
164
|
+
var render = column.render,
|
165
|
+
rest = _objectWithoutProperties(column, _excluded);
|
166
|
+
console.log('exclude render', render);
|
167
|
+
return rest;
|
168
|
+
});
|
169
|
+
}, [columns]);
|
170
|
+
var scrollLeftOffset = useMemo(function () {
|
171
|
+
return columns.reduce(function (pre, current) {
|
172
|
+
return pre + (current.hideInTable ? 0 : current.fixed === 'left' ? current.width || DefaultColumnWidth : 0);
|
173
|
+
}, 0);
|
174
|
+
}, [columns]);
|
175
|
+
var formatedDataSource = useMemo(function () {
|
176
|
+
if (sorterController && sorterController.sorterType !== undefined) {
|
177
|
+
var sortedColumn = columns.find(function (column) {
|
178
|
+
return column.key === sorterController.columnKey;
|
179
|
+
});
|
180
|
+
var sorterFunc = typeof (sortedColumn === null || sortedColumn === void 0 ? void 0 : sortedColumn.sorter) === 'function' ? sortedColumn.sorter : undefined;
|
181
|
+
return sortObjectsByProperty(dataSource, sorterController.columnKey, sorterController.sorterType, sorterFunc);
|
182
|
+
}
|
183
|
+
return dataSource;
|
184
|
+
}, [sorterController, dataSource, columns]);
|
185
|
+
return /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
|
186
|
+
span: 8
|
187
|
+
}, /*#__PURE__*/React.createElement(TableTitle, null, title)), /*#__PURE__*/React.createElement(Col, {
|
188
|
+
span: 16
|
189
|
+
}, /*#__PURE__*/React.createElement(TableToolbar, null, /*#__PURE__*/React.createElement(Space, null, actions === null || actions === void 0 ? void 0 : actions.map(function (element) {
|
190
|
+
if ( /*#__PURE__*/React.isValidElement(element)) {
|
191
|
+
var action = element;
|
192
|
+
return /*#__PURE__*/React.cloneElement(action, {
|
193
|
+
size: 'default'
|
194
|
+
});
|
195
|
+
} else {
|
196
|
+
return element;
|
197
|
+
}
|
198
|
+
}))))), /*#__PURE__*/React.createElement(TableContent, {
|
199
|
+
onScroll: function onScroll(e) {
|
200
|
+
var tableContainer = e.target;
|
201
|
+
if (boxShadowBox.current) {
|
202
|
+
if (tableContainer.scrollLeft === 0) {
|
203
|
+
boxShadowBox.current.style.opacity = '0';
|
204
|
+
} else {
|
205
|
+
boxShadowBox.current.style.opacity = '1';
|
206
|
+
}
|
207
|
+
boxShadowBox.current.style.left = tableContainer.scrollLeft + scrollLeftOffset + 'px';
|
208
|
+
}
|
209
|
+
}
|
210
|
+
}, scroll && /*#__PURE__*/React.createElement(BoxShadowBox, {
|
211
|
+
ref: boxShadowBox,
|
212
|
+
width: "10px",
|
213
|
+
height: "100%",
|
214
|
+
offsetLeft: "-999px"
|
215
|
+
}), /*#__PURE__*/React.createElement(TableHeaderRow, {
|
216
|
+
columns: headerColumns,
|
217
|
+
rowData: titleRowData,
|
218
|
+
isFlex: !scroll
|
219
|
+
}), /*#__PURE__*/React.createElement(TableBody, {
|
220
|
+
direction: "column"
|
221
|
+
}, formatedDataSource.map(function (rowData) {
|
222
|
+
return /*#__PURE__*/React.createElement(TableBodyRow, {
|
223
|
+
key: rowData[rowKey]
|
224
|
+
}, /*#__PURE__*/React.createElement(Columns, {
|
225
|
+
rowData: rowData,
|
226
|
+
columns: columns,
|
227
|
+
isFlex: !scroll
|
228
|
+
}));
|
229
|
+
}))));
|
230
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as Table, type TableProps } from './Table';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as Table } from "./Table";
|
package/dist/Tag/Tag.js
ADDED
@@ -0,0 +1,16 @@
|
|
1
|
+
var _excluded = ["children"];
|
2
|
+
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; }
|
3
|
+
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; }
|
4
|
+
import React from 'react';
|
5
|
+
import styled from 'styled-components';
|
6
|
+
import theme from "../__consts/theme";
|
7
|
+
var StyledTag = styled.span.withConfig({
|
8
|
+
displayName: "StyledTag",
|
9
|
+
componentId: "basic-component-347b__sc-14fuyeq-0"
|
10
|
+
})(["background-color:", ";color:1px soild ", ";"], theme.defaultTagBackgroundColor, theme.defaultTagColor);
|
11
|
+
var Tag = function Tag(_ref) {
|
12
|
+
var children = _ref.children,
|
13
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
14
|
+
return /*#__PURE__*/React.createElement(StyledTag, rest, children);
|
15
|
+
};
|
16
|
+
export default Tag;
|