@kep-platform/basic-component 0.0.2 → 0.0.6
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|