@kep-platform/basic-component 0.0.2 → 0.0.6
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 +61 -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/Pagination/Pagination.d.ts +7 -0
- package/dist/Pagination/Pagination.js +44 -0
- package/dist/Pagination/index.d.ts +1 -0
- package/dist/Pagination/index.js +1 -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/Select/Select.d.ts +13 -0
- package/dist/Select/Select.js +121 -0
- package/dist/Select/index.d.ts +1 -0
- package/dist/Select/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/Spin/Spin.d.ts +6 -0
- package/dist/Spin/Spin.js +16 -0
- package/dist/Spin/index.d.ts +1 -0
- package/dist/Spin/index.js +1 -0
- package/dist/Table/Table.d.ts +17 -0
- package/dist/Table/Table.js +243 -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 +14 -1
- package/dist/index.js +14 -1
- package/package.json +11 -2
- package/dist/Foo/index.d.ts +0 -5
- package/dist/Foo/index.js +0 -5
@@ -0,0 +1,61 @@
|
|
1
|
+
import { keyframes } from 'styled-components';
|
2
|
+
import { PaginationProps } from '../Pagination';
|
3
|
+
declare global {
|
4
|
+
type SizeType = 'small' | 'large' | 'middle';
|
5
|
+
type Keyframes = ReturnType<typeof keyframes>;
|
6
|
+
type Direction = 'row' | 'column' | 'row-reverse' | 'column-reverse';
|
7
|
+
type ListItemRender = (record: any, index: number) => ReactNode;
|
8
|
+
type Align = 'left' | 'right' | 'center';
|
9
|
+
type Pagination = PaginationProps;
|
10
|
+
type ColumnRender = (value: any, record: Record<string, any>, index: number) => ReactNode;
|
11
|
+
type ColumnType = {
|
12
|
+
key: string;
|
13
|
+
dataIndex: string;
|
14
|
+
width?: number;
|
15
|
+
title?: ReactNode;
|
16
|
+
render?: ColumnRender;
|
17
|
+
align?: Align;
|
18
|
+
hideInTable?: boolean;
|
19
|
+
fixed?: 'left' | 'right';
|
20
|
+
left?: string;
|
21
|
+
right?: string;
|
22
|
+
bordered?: boolean;
|
23
|
+
sorter?: boolean | SorterFunc;
|
24
|
+
};
|
25
|
+
type SorterFunc = (a: any, b: any) => number;
|
26
|
+
type Sorter = 'desc' | 'asc' | undefined;
|
27
|
+
type TriggerType = 'click' | 'mouseover' | 'contextmenu' | 'doubleClick';
|
28
|
+
type MenuItem = {
|
29
|
+
key: Key;
|
30
|
+
title?: string;
|
31
|
+
label: ReactNode;
|
32
|
+
onSelect?(item: MenuItem): void;
|
33
|
+
};
|
34
|
+
type RequiredTreeNodeKeys = 'key' | 'title' | 'children';
|
35
|
+
|
36
|
+
type TreeFieldNames = {
|
37
|
+
[key in RequiredTreeNodeKeys]: string;
|
38
|
+
};
|
39
|
+
|
40
|
+
type TreeNodeType = {
|
41
|
+
[key: string]: any;
|
42
|
+
};
|
43
|
+
|
44
|
+
type onExpandHandler = (
|
45
|
+
keys: Key[],
|
46
|
+
info: {
|
47
|
+
node: TreeNodeType;
|
48
|
+
expanded: boolean;
|
49
|
+
nativeEvent: React.MouseEvent;
|
50
|
+
},
|
51
|
+
) => void;
|
52
|
+
|
53
|
+
type onSelectHandler = (
|
54
|
+
keys: Key[],
|
55
|
+
info: {
|
56
|
+
node: TreeNodeType;
|
57
|
+
selected: boolean;
|
58
|
+
nativeEvent: React.MouseEvent;
|
59
|
+
},
|
60
|
+
) => void;
|
61
|
+
}
|
@@ -0,0 +1,38 @@
|
|
1
|
+
export type ButtonTheme = {
|
2
|
+
/* all */
|
3
|
+
fontWeight?: string;
|
4
|
+
borderRadius?: string;
|
5
|
+
borderWidth?: string;
|
6
|
+
shadowAnimation?: Keyframes;
|
7
|
+
/* Default */
|
8
|
+
defaultTextColor?: string;
|
9
|
+
defaultBorderColor?: string;
|
10
|
+
defaultBackgroundColor?: string;
|
11
|
+
defaultHoverBackgroundColor?: string;
|
12
|
+
defaultHoverBorderColor: string;
|
13
|
+
defaultHoverTextColor?: string;
|
14
|
+
/* Danger */
|
15
|
+
dangerTextColor?: string;
|
16
|
+
dangerBorderColor?: string;
|
17
|
+
dangerBackgroundColor?: string;
|
18
|
+
dangerHoverBackgroundColor: string;
|
19
|
+
dangerHoverTextColor?: string;
|
20
|
+
dangerShadowAnimation?: Keyframes;
|
21
|
+
/* Primary */
|
22
|
+
primaryTextColor?: string;
|
23
|
+
primaryBorderColor?: string;
|
24
|
+
primaryBackgroundColor?: string;
|
25
|
+
primaryHoverBackgroundColor: string;
|
26
|
+
primaryHoverTextColor?: string;
|
27
|
+
primaryShadowAnimation?: Keyframes;
|
28
|
+
/* Small */
|
29
|
+
smallPaddingTop?: string;
|
30
|
+
smallPaddingLeft?: string;
|
31
|
+
smallFontSize?: string;
|
32
|
+
smallBorderRadius?: string;
|
33
|
+
/* Large */
|
34
|
+
bargePaddingTop?: string;
|
35
|
+
bargePaddingLeft?: string;
|
36
|
+
bargeFontSize?: string;
|
37
|
+
bargeBorderRadius?: string;
|
38
|
+
};
|
@@ -0,0 +1,8 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
export type BoxShadowBoxProps = {
|
3
|
+
width: string;
|
4
|
+
offsetLeft?: string;
|
5
|
+
height: string;
|
6
|
+
};
|
7
|
+
declare const BoxShadowBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxShadowBoxProps>> & string;
|
8
|
+
export default BoxShadowBox;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
var BoxShadowBox = styled.div.withConfig({
|
3
|
+
displayName: "BoxShadowBox",
|
4
|
+
componentId: "basic-component-347b__sc-18cvhyx-0"
|
5
|
+
})(["z-index:", ";width:", ";box-shadow:var(--kep-platform-box-shadow-inset);background-color:transparent;position:absolute;top:0;left:", ";height:", ";transition:opacity 0.5s;"], function (props) {
|
6
|
+
return props.width ? 999 : -1;
|
7
|
+
}, function (props) {
|
8
|
+
return props.width;
|
9
|
+
}, function (props) {
|
10
|
+
return props.offsetLeft;
|
11
|
+
}, function (props) {
|
12
|
+
return props.height;
|
13
|
+
});
|
14
|
+
export default BoxShadowBox;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as BoxShadowBox, type BoxShadowBoxProps } from './BoxShadowBox';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as BoxShadowBox } from "./BoxShadowBox";
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import React, { HtmlHTMLAttributes, ReactNode } from 'react';
|
2
|
+
export type ButtonProps = {
|
3
|
+
type?: 'default' | 'primary' | 'danger';
|
4
|
+
size?: SizeType;
|
5
|
+
children: ReactNode;
|
6
|
+
} & HtmlHTMLAttributes<HTMLButtonElement>;
|
7
|
+
declare const Button: React.ForwardRefExoticComponent<{
|
8
|
+
type?: "default" | "primary" | "danger" | undefined;
|
9
|
+
size?: SizeType | undefined;
|
10
|
+
children: ReactNode;
|
11
|
+
} & React.HtmlHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
|
12
|
+
export default Button;
|
@@ -0,0 +1,86 @@
|
|
1
|
+
var _excluded = ["type", "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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
|
+
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."); }
|
5
|
+
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); }
|
6
|
+
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; }
|
7
|
+
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; } }
|
8
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
9
|
+
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; }
|
10
|
+
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; }
|
11
|
+
import React, { forwardRef, useEffect, useState } from 'react';
|
12
|
+
import styled, { css, keyframes } from 'styled-components';
|
13
|
+
import theme from "../__consts/theme";
|
14
|
+
// 定义关键帧动画
|
15
|
+
|
16
|
+
var defaultShadowAnimation = keyframes(["0%{box-shadow:0 0 0 0 ", ";;}50%{box-shadow:0 0 0 4px ", ";;}100%{box-shadow:0 0 0 0 ", ";;}"], theme.lightenPrimaryColor, theme.lightenPrimaryColor, theme.lightenPrimaryColor);
|
17
|
+
var dangerShadowAnimation = keyframes(["0%{box-shadow:0 0 0 0 ", ";;}50%{box-shadow:0 0 0 4px ", ";;}100%{box-shadow:0 0 0 0 ", ";;}"], theme.lightenDangerColor, theme.lightenDangerColor, theme.lightenDangerColor);
|
18
|
+
var StyledButton = styled('button').withConfig({
|
19
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
20
|
+
return !['isActive'].includes(prop);
|
21
|
+
}
|
22
|
+
}).withConfig({
|
23
|
+
displayName: "StyledButton",
|
24
|
+
componentId: "basic-component-347b__sc-nyef9a-0"
|
25
|
+
})(["font-weight:", ";outline:none;border-width:", ";border-style:solid;padding:var(--kep-platform-padding-block) var(--kep-platform-padding-inline);font-size:var(--kep-platform-font-size);", ";", " ", " ", " &:hover{opacity:0.7;}"], function (props) {
|
26
|
+
return props.theme.buttonFontWeight || theme.fontWeight;
|
27
|
+
}, function (props) {
|
28
|
+
return props.theme.background || theme.borderWidth;
|
29
|
+
}, function (props) {
|
30
|
+
if (props.theme.buttonBorderRadius) return css(["border-radius:", ";"], props.theme.buttonBorderRadius);else return css(["border-radius:var(--kep-platform-border-radius);"]);
|
31
|
+
}, function (props) {
|
32
|
+
switch (props.type) {
|
33
|
+
case 'danger':
|
34
|
+
return css(["color:var(--kep-platform-color-white);border-color:transparent;background-color:var(--kep-platform-red);"]);
|
35
|
+
case 'default':
|
36
|
+
return css(["color:", ";border-color:var(--kep-platform-color-border);background-color:", ";&:hover{border-color:var(--kep-platform-color-primary);color:var(--kep-platform-color-primary);}"], theme.color, theme.backgroundColor);
|
37
|
+
case 'primary':
|
38
|
+
return css(["color:", ";border-color:transparent;background-color:", ";"], theme.backgroundColor, theme.primaryColor);
|
39
|
+
}
|
40
|
+
}, function (props) {
|
41
|
+
if (props.isActive) {
|
42
|
+
if (props.type === 'danger') return css(["animation:", " 0.5s linear;"], dangerShadowAnimation);else {
|
43
|
+
return css(["animation:", " 0.5s linear;"], defaultShadowAnimation);
|
44
|
+
}
|
45
|
+
}
|
46
|
+
}, function (props) {
|
47
|
+
switch (props.size) {
|
48
|
+
case 'small':
|
49
|
+
return css(["padding:var(--kep-platform-padding-block-sm) var(--kep-platform-padding-inline-sm);font-size:var(--kep-platform-font-size-sm);border-radius:var(--kep-platform-border-radius-sm);"]);
|
50
|
+
case 'large':
|
51
|
+
return css(["padding:var(--kep-platform-padding-block-lg) var(--kep-platform-padding-inline-lg);font-size:var(--kep-platform-font-size-lg);border-radius:var(--kep-platform-border-radius-lg);"]);
|
52
|
+
}
|
53
|
+
});
|
54
|
+
var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
55
|
+
var _ref$type = _ref.type,
|
56
|
+
type = _ref$type === void 0 ? 'default' : _ref$type,
|
57
|
+
_ref$size = _ref.size,
|
58
|
+
size = _ref$size === void 0 ? 'middle' : _ref$size,
|
59
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
60
|
+
var _useState = useState(false),
|
61
|
+
_useState2 = _slicedToArray(_useState, 2),
|
62
|
+
isActive = _useState2[0],
|
63
|
+
setIsActive = _useState2[1];
|
64
|
+
useEffect(function () {
|
65
|
+
var timer = null;
|
66
|
+
if (isActive) {
|
67
|
+
timer = setTimeout(function () {
|
68
|
+
return setIsActive(false);
|
69
|
+
}, 500);
|
70
|
+
} else {
|
71
|
+
if (timer) clearTimeout(timer);
|
72
|
+
}
|
73
|
+
}, [isActive]);
|
74
|
+
return /*#__PURE__*/React.createElement(StyledButton, _extends({}, rest, {
|
75
|
+
type: type,
|
76
|
+
size: size,
|
77
|
+
isActive: isActive,
|
78
|
+
ref: ref,
|
79
|
+
onClick: function onClick(e) {
|
80
|
+
var _rest$onClick;
|
81
|
+
(_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 || _rest$onClick.call(rest, e);
|
82
|
+
setIsActive(true);
|
83
|
+
}
|
84
|
+
}));
|
85
|
+
});
|
86
|
+
export default Button;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as Button, type ButtonProps } from './Button';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as Button } from "./Button";
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import React, { HtmlHTMLAttributes } from 'react';
|
2
|
+
export declare const DefaultColumnWidth = 200;
|
3
|
+
export type ColumnsProps = {
|
4
|
+
columns: ColumnType[];
|
5
|
+
rowData: Record<string, any>;
|
6
|
+
isFlex?: boolean;
|
7
|
+
leftBase?: number;
|
8
|
+
columnsKey?: string;
|
9
|
+
} & HtmlHTMLAttributes<HTMLUListElement>;
|
10
|
+
export declare const Column: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>, "ref"> & {
|
11
|
+
ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
|
12
|
+
}, Omit<ColumnType, "render" | "dataIndex"> & {
|
13
|
+
key: React.Key;
|
14
|
+
title?: React.ReactNode;
|
15
|
+
index?: number | undefined;
|
16
|
+
itemRender?: ListItemRender | undefined;
|
17
|
+
} & Omit<React.HtmlHTMLAttributes<HTMLLIElement>, "title"> & {
|
18
|
+
isFlex: boolean;
|
19
|
+
bordered?: boolean | undefined;
|
20
|
+
} & {
|
21
|
+
left?: string | undefined;
|
22
|
+
right?: string | undefined;
|
23
|
+
}>> & string;
|
24
|
+
export default function Columns({ columns, rowData, isFlex, leftBase, columnsKey, ...columnsRestProps }: ColumnsProps): React.JSX.Element;
|
@@ -0,0 +1,126 @@
|
|
1
|
+
var _excluded = ["columns", "rowData", "isFlex", "leftBase", "columnsKey"],
|
2
|
+
_excluded2 = ["dataIndex", "render", "key"];
|
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, { useMemo } from 'react';
|
7
|
+
import styled, { css } from 'styled-components';
|
8
|
+
import { List, ListItem } from "../List";
|
9
|
+
export var DefaultColumnWidth = 200;
|
10
|
+
//如果是flex模式的话,就不使用宽度来控制,而是直接交给flex布局
|
11
|
+
var ColumnList = styled(List).withConfig({
|
12
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
13
|
+
return !['widthSum', 'isFlex'].includes(prop);
|
14
|
+
}
|
15
|
+
}).withConfig({
|
16
|
+
displayName: "ColumnList",
|
17
|
+
componentId: "basic-component-347b__sc-1hh0w2t-0"
|
18
|
+
})(["", ""], function (props) {
|
19
|
+
if (props.isFlex) {
|
20
|
+
return css(["display:flex;"]);
|
21
|
+
} else {
|
22
|
+
return css(["width:", "px;"], props.widthSum);
|
23
|
+
}
|
24
|
+
});
|
25
|
+
export var Column = styled(ListItem).withConfig({
|
26
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
27
|
+
return !['width', 'isFlex', 'border'].includes(prop);
|
28
|
+
}
|
29
|
+
}).withConfig({
|
30
|
+
displayName: "Column",
|
31
|
+
componentId: "basic-component-347b__sc-1hh0w2t-1"
|
32
|
+
})(["padding:var(--kep-platform-padding-xs);text-align:", ";white-space:break-spaces;word-break:break-all;border-bottom:var(--kep-platform-line-width) var(--kep-platform-line-type) var(--kep-platform-color-border-secondary);", " background-color:var(--kep-platform-color-bg-base);", ":hover &{background-color:var(--kep-platform-color-bg-hover);}", " ", " ", ""], function (props) {
|
33
|
+
return props.align;
|
34
|
+
}, function (props) {
|
35
|
+
if (props.bordered) {
|
36
|
+
return css(["border:var(--kep-platform-line-width) var(--kep-platform-line-type) var(--kep-platform-color-border-secondary);border-top-width:0;border-left-width:0;"]);
|
37
|
+
}
|
38
|
+
}, ColumnList, function (props) {
|
39
|
+
if (props.isFlex) {
|
40
|
+
return css(["flex:", ";"], props.width || DefaultColumnWidth);
|
41
|
+
} else {
|
42
|
+
return css(["width:", "px;"], props.width || DefaultColumnWidth);
|
43
|
+
}
|
44
|
+
}, function (props) {
|
45
|
+
if (props.fixed && !props.isFlex) {
|
46
|
+
return css(["position:sticky;"]);
|
47
|
+
}
|
48
|
+
}, function (props) {
|
49
|
+
if (props.fixed === 'left' && !props.isFlex) {
|
50
|
+
return css(["left:", ";z-index:var(--kep-platform-z-index-fixed);"], props.left);
|
51
|
+
}
|
52
|
+
if (props.fixed === 'right' && !props.isFlex) {
|
53
|
+
return css(["right:", ";z-index:var(--kep-platform-z-index-fixed) - 1;"], props.right);
|
54
|
+
}
|
55
|
+
});
|
56
|
+
var displayColumnsCache = {};
|
57
|
+
export default function Columns(_ref) {
|
58
|
+
var columns = _ref.columns,
|
59
|
+
rowData = _ref.rowData,
|
60
|
+
_ref$isFlex = _ref.isFlex,
|
61
|
+
isFlex = _ref$isFlex === void 0 ? true : _ref$isFlex,
|
62
|
+
_ref$leftBase = _ref.leftBase,
|
63
|
+
leftBase = _ref$leftBase === void 0 ? 0 : _ref$leftBase,
|
64
|
+
columnsKey = _ref.columnsKey,
|
65
|
+
columnsRestProps = _objectWithoutProperties(_ref, _excluded);
|
66
|
+
var displayColumns = useMemo(function () {
|
67
|
+
if (columnsKey && displayColumnsCache[columnsKey]) {
|
68
|
+
return displayColumnsCache[columnsKey];
|
69
|
+
}
|
70
|
+
var newColumns;
|
71
|
+
if (isFlex) {
|
72
|
+
newColumns = columns.filter(function (_ref2) {
|
73
|
+
var hideInTable = _ref2.hideInTable;
|
74
|
+
return !hideInTable;
|
75
|
+
});
|
76
|
+
if (columnsKey) {
|
77
|
+
return displayColumnsCache[columnsKey] = newColumns;
|
78
|
+
}
|
79
|
+
return newColumns;
|
80
|
+
}
|
81
|
+
/* 用来计算sticky的偏移量,确定每个有fixed属性column的位置 */
|
82
|
+
var leftCache = 0;
|
83
|
+
var rightCache = 0;
|
84
|
+
var p;
|
85
|
+
newColumns = [];
|
86
|
+
for (var i = 0; i < columns.length; i++) {
|
87
|
+
p = columns[i];
|
88
|
+
if (p.hideInTable) {
|
89
|
+
continue;
|
90
|
+
}
|
91
|
+
if (p.fixed === 'left') {
|
92
|
+
p.left = leftCache + 'px';
|
93
|
+
leftCache += p.width || DefaultColumnWidth;
|
94
|
+
}
|
95
|
+
if (p.fixed === 'right') {
|
96
|
+
p.right = rightCache + 'px';
|
97
|
+
rightCache += p.width || DefaultColumnWidth;
|
98
|
+
}
|
99
|
+
newColumns.push(p);
|
100
|
+
}
|
101
|
+
if (columnsKey) {
|
102
|
+
displayColumnsCache[columnsKey] = newColumns;
|
103
|
+
}
|
104
|
+
return newColumns;
|
105
|
+
}, [columns, isFlex, leftBase, columnsKey]);
|
106
|
+
var widthSum = useMemo(function () {
|
107
|
+
return columns.reduce(function (pre, current) {
|
108
|
+
return pre + (current.width || DefaultColumnWidth);
|
109
|
+
}, 0);
|
110
|
+
}, [displayColumns]);
|
111
|
+
return /*#__PURE__*/React.createElement(ColumnList, _extends({
|
112
|
+
direction: "row"
|
113
|
+
}, columnsRestProps, {
|
114
|
+
widthSum: widthSum,
|
115
|
+
isFlex: isFlex
|
116
|
+
}), displayColumns.map(function (_ref3, index) {
|
117
|
+
var dataIndex = _ref3.dataIndex,
|
118
|
+
render = _ref3.render,
|
119
|
+
key = _ref3.key,
|
120
|
+
listItemRestProps = _objectWithoutProperties(_ref3, _excluded2);
|
121
|
+
return /*#__PURE__*/React.createElement(Column, _extends({}, listItemRestProps, {
|
122
|
+
key: key,
|
123
|
+
isFlex: isFlex
|
124
|
+
}), (render === null || render === void 0 ? void 0 : render(rowData[dataIndex], rowData, index)) || rowData[dataIndex] || '-');
|
125
|
+
}));
|
126
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Column, default as Columns, type ColumnsProps } from './Columns';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Column, default as Columns } from "./Columns";
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { HtmlHTMLAttributes } from 'react';
|
2
|
+
export type FlexProps = {
|
3
|
+
direction?: Direction;
|
4
|
+
width?: number;
|
5
|
+
alignItems?: string;
|
6
|
+
};
|
7
|
+
export declare const Flex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FlexProps & HtmlHTMLAttributes<HTMLDivElement>>> & string;
|
8
|
+
export type FlexItemProps = {
|
9
|
+
flex?: number | string;
|
10
|
+
width?: number;
|
11
|
+
align?: Align;
|
12
|
+
cursor?: string;
|
13
|
+
};
|
14
|
+
export declare const FlexItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FlexItemProps & HtmlHTMLAttributes<HTMLDivElement>>> & string;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import styled, { css } from 'styled-components';
|
2
|
+
export var Flex = styled.div.withConfig({
|
3
|
+
displayName: "Flex",
|
4
|
+
componentId: "basic-component-347b__sc-14xikkf-0"
|
5
|
+
})(["display:flex;flex-direction:", ";align-items:", ";", ""], function (props) {
|
6
|
+
return props.direction || 'row';
|
7
|
+
}, function (props) {
|
8
|
+
return props.alignItems || 'center';
|
9
|
+
}, function (props) {
|
10
|
+
if (props.width) {
|
11
|
+
return css(["width:", "px;"], props.width);
|
12
|
+
} else {
|
13
|
+
return css(["width:100%;"]);
|
14
|
+
}
|
15
|
+
});
|
16
|
+
export var FlexItem = styled.div.withConfig({
|
17
|
+
displayName: "FlexItem",
|
18
|
+
componentId: "basic-component-347b__sc-14xikkf-1"
|
19
|
+
})(["flex:", ";text-align:", ";cursor:", ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], function (props) {
|
20
|
+
return props.flex;
|
21
|
+
}, function (props) {
|
22
|
+
return props.align;
|
23
|
+
}, function (props) {
|
24
|
+
return props.cursor || 'default';
|
25
|
+
}, function (props) {
|
26
|
+
if (props.width) {
|
27
|
+
return css(["width:", "px;"], props.width);
|
28
|
+
}
|
29
|
+
});
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './flex';
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from "./flex";
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React, { HtmlHTMLAttributes } from 'react';
|
2
|
+
export type ColProps = {
|
3
|
+
span: number;
|
4
|
+
offset?: number;
|
5
|
+
} & HtmlHTMLAttributes<HTMLDivElement>;
|
6
|
+
export declare const StyledCol: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ColProps>> & string;
|
7
|
+
declare const Col: React.FC<ColProps>;
|
8
|
+
export default Col;
|
package/dist/Grid/Col.js
ADDED
@@ -0,0 +1,12 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
export var StyledCol = styled.div.withConfig({
|
4
|
+
displayName: "StyledCol",
|
5
|
+
componentId: "basic-component-347b__sc-1arnr37-0"
|
6
|
+
})(["flex-basis:calc(100% * ", " / 24);"], function (props) {
|
7
|
+
return props.span;
|
8
|
+
});
|
9
|
+
var Col = function Col(props) {
|
10
|
+
return /*#__PURE__*/React.createElement(StyledCol, props);
|
11
|
+
};
|
12
|
+
export default Col;
|
package/dist/Grid/Row.js
ADDED
@@ -0,0 +1,55 @@
|
|
1
|
+
var _excluded = ["children"];
|
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
|
+
import theme from "../__consts/theme";
|
8
|
+
import Col, { StyledCol } from "./Col";
|
9
|
+
var StyledRow = styled.div.withConfig({
|
10
|
+
displayName: "StyledRow",
|
11
|
+
componentId: "basic-component-347b__sc-15h2ba-0"
|
12
|
+
})(["display:flex;flex-wrap:wrap;margin:", ";& > ", "{padding:", ";}"], function (props) {
|
13
|
+
if (props.gap) {
|
14
|
+
if (typeof props.gap === 'number') {
|
15
|
+
var margin = (props.gap || parseInt(theme.gap)) / 2;
|
16
|
+
return -margin + 'px';
|
17
|
+
} else if (Array.isArray(props.gap) && props.gap.length === 2 && typeof props.gap[0] === 'number' && typeof props.gap[1] === 'number') {
|
18
|
+
var marginTop = (props.gap[0] || parseInt(theme.gap)) / 2;
|
19
|
+
var marginRight = (props.gap[1] || parseInt(theme.gap)) / 2;
|
20
|
+
return "-".concat(marginTop, "px -").concat(marginRight, "px");
|
21
|
+
}
|
22
|
+
} else {
|
23
|
+
return 0;
|
24
|
+
}
|
25
|
+
}, StyledCol, function (props) {
|
26
|
+
if (props.gap) {
|
27
|
+
if (typeof props.gap === 'number') {
|
28
|
+
var padding = (props.gap || parseInt(theme.gap)) / 2;
|
29
|
+
return padding + 'px';
|
30
|
+
} else if (Array.isArray(props.gap) && props.gap.length === 2 && typeof props.gap[0] === 'number' && typeof props.gap[1] === 'number') {
|
31
|
+
var paddingTop = (props.gap[0] || parseInt(theme.gap)) / 2;
|
32
|
+
var paddingRight = (props.gap[1] || parseInt(theme.gap)) / 2;
|
33
|
+
return "".concat(paddingTop, "px ").concat(paddingRight, "px");
|
34
|
+
}
|
35
|
+
} else {
|
36
|
+
return 0;
|
37
|
+
}
|
38
|
+
});
|
39
|
+
var Row = function Row(props) {
|
40
|
+
var children = props.children,
|
41
|
+
rest = _objectWithoutProperties(props, _excluded);
|
42
|
+
return /*#__PURE__*/React.createElement(StyledRow, _extends({}, rest, {
|
43
|
+
className: "".concat(rest.className, " row")
|
44
|
+
}), React.Children.map(children, function (child) {
|
45
|
+
if ( /*#__PURE__*/React.isValidElement(child)) {
|
46
|
+
if (child.type === Col) {
|
47
|
+
return child;
|
48
|
+
}
|
49
|
+
} else {
|
50
|
+
console.warn('行组件内部只能渲染列组件');
|
51
|
+
return false;
|
52
|
+
}
|
53
|
+
}));
|
54
|
+
};
|
55
|
+
export default Row;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
export type IndentProps = {
|
3
|
+
level: number;
|
4
|
+
indentWidth?: string;
|
5
|
+
};
|
6
|
+
declare const Indent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IndentProps>> & string;
|
7
|
+
export default Indent;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
var indentWidthRegx = /(\d*)(\D+)/;
|
3
|
+
/* 缩进组件,默认单位是rem,默认长度是1,默认层级是1 */
|
4
|
+
var defaultIndentUnit = 'px';
|
5
|
+
var defaultIndentWidth = 16;
|
6
|
+
var lengthUnits = ['px', 'rem', 'pt', 'em', '%'];
|
7
|
+
var Indent = styled.div.withConfig({
|
8
|
+
displayName: "Indent",
|
9
|
+
componentId: "basic-component-347b__sc-1w1dll1-0"
|
10
|
+
})(["width:", ";"], function (props) {
|
11
|
+
if (!props.indentWidth) {
|
12
|
+
return props.level * defaultIndentWidth + defaultIndentUnit;
|
13
|
+
}
|
14
|
+
var result = indentWidthRegx.exec(props.indentWidth);
|
15
|
+
var number = defaultIndentWidth,
|
16
|
+
unit = defaultIndentUnit;
|
17
|
+
if (result) {
|
18
|
+
number = parseInt(result[1]);
|
19
|
+
if (lengthUnits.includes(result[2])) {
|
20
|
+
unit = result[2];
|
21
|
+
}
|
22
|
+
}
|
23
|
+
return props.level * number + unit;
|
24
|
+
});
|
25
|
+
export default Indent;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as Indent, type IndentProps } from './Indent';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as Indent } from "./Indent";
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import React, { HtmlHTMLAttributes, Key, ReactNode } from 'react';
|
2
|
+
type ListItemType = {
|
3
|
+
key: string;
|
4
|
+
title?: ReactNode;
|
5
|
+
} & Omit<HtmlHTMLAttributes<HTMLLIElement>, 'title'>;
|
6
|
+
export type ListProps = {
|
7
|
+
items?: ListItemType[];
|
8
|
+
direction?: Direction;
|
9
|
+
itemRender?: ListItemRender;
|
10
|
+
} & HtmlHTMLAttributes<HTMLUListElement>;
|
11
|
+
export type ListItemProps = {
|
12
|
+
key: Key;
|
13
|
+
title?: ReactNode;
|
14
|
+
index?: number;
|
15
|
+
itemRender?: ListItemRender;
|
16
|
+
} & Omit<HtmlHTMLAttributes<HTMLLIElement>, 'title'>;
|
17
|
+
export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
|
18
|
+
declare const List: React.FC<ListProps>;
|
19
|
+
export default List;
|