@kep-platform/basic-component 0.0.1 → 0.0.5

package/dist/@types/index.d.ts

@@ -0,0 +1,60 @@
+import { keyframes } from 'styled-components';
+declare global {
+    type SizeType = 'small' | 'large' | 'middle';
+    type Keyframes = ReturnType<typeof keyframes>;
+    type Direction = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    type ListItemRender = (record: any, index: number) => ReactNode;
+    type Align = 'left' | 'right' | 'center';
+    type Pagination = { current: number; size: number };
+    type ColumnRender = (value: any, record: Record<string, any>, index: number) => ReactNode;
+    type ColumnType = {
+        key: string;
+        dataIndex: string;
+        width?: number;
+        title?: ReactNode;
+        render?: ColumnRender;
+        align?: Align;
+        hideInTable?: boolean;
+        fixed?: 'left' | 'right';
+        left?: string;
+        right?: string;
+        bordered?: boolean;
+        sorter?: boolean | SorterFunc;
+    };
+    type SorterFunc = (a: any, b: any) => number;
+    type Sorter = 'desc' | 'asc' | undefined;
+    type TriggerType = 'click' | 'mouseover' | 'contextmenu' | 'doubleClick';
+    type MenuItem = {
+        key: Key;
+        title?: string;
+        label: ReactNode;
+        onSelect?(item: MenuItem): void;
+    };
+    type RequiredTreeNodeKeys = 'key' | 'title' | 'children';
+
+    type TreeFieldNames = {
+        [key in RequiredTreeNodeKeys]: string;
+    };
+
+    type TreeNodeType = {
+        [key: string]: any;
+    };
+
+    type onExpandHandler = (
+        keys: Key[],
+        info: {
+            node: TreeNodeType;
+            expanded: boolean;
+            nativeEvent: React.MouseEvent;
+        },
+    ) => void;
+
+    type onSelectHandler = (
+        keys: Key[],
+        info: {
+            node: TreeNodeType;
+            selected: boolean;
+            nativeEvent: React.MouseEvent;
+        },
+    ) => void;
+}

package/dist/@types/styled-components.d.ts

@@ -0,0 +1,9 @@
+// styled.d.ts 文件
+import 'styled-components';
+import { ButtonTheme } from './theme';
+
+declare module 'styled-components' {
+    export interface DefaultTheme {
+        button?: ButtonTheme;
+    }
+}

package/dist/@types/theme.d.ts

@@ -0,0 +1,38 @@
+export type ButtonTheme = {
+    /* all */
+    fontWeight?: string;
+    borderRadius?: string;
+    borderWidth?: string;
+    shadowAnimation?: Keyframes;
+    /* Default */
+    defaultTextColor?: string;
+    defaultBorderColor?: string;
+    defaultBackgroundColor?: string;
+    defaultHoverBackgroundColor?: string;
+    defaultHoverBorderColor: string;
+    defaultHoverTextColor?: string;
+    /* Danger */
+    dangerTextColor?: string;
+    dangerBorderColor?: string;
+    dangerBackgroundColor?: string;
+    dangerHoverBackgroundColor: string;
+    dangerHoverTextColor?: string;
+    dangerShadowAnimation?: Keyframes;
+    /* Primary */
+    primaryTextColor?: string;
+    primaryBorderColor?: string;
+    primaryBackgroundColor?: string;
+    primaryHoverBackgroundColor: string;
+    primaryHoverTextColor?: string;
+    primaryShadowAnimation?: Keyframes;
+    /* Small */
+    smallPaddingTop?: string;
+    smallPaddingLeft?: string;
+    smallFontSize?: string;
+    smallBorderRadius?: string;
+    /* Large */
+    bargePaddingTop?: string;
+    bargePaddingLeft?: string;
+    bargeFontSize?: string;
+    bargeBorderRadius?: string;
+};

package/dist/BoxShadowBox/BoxShadowBox.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export type BoxShadowBoxProps = {
+    width: string;
+    offsetLeft?: string;
+    height: string;
+};
+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;
+export default BoxShadowBox;

package/dist/BoxShadowBox/BoxShadowBox.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+var BoxShadowBox = styled.div.withConfig({
+  displayName: "BoxShadowBox",
+  componentId: "basic-component-347b__sc-18cvhyx-0"
+})(["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) {
+  return props.width ? 999 : -1;
+}, function (props) {
+  return props.width;
+}, function (props) {
+  return props.offsetLeft;
+}, function (props) {
+  return props.height;
+});
+export default BoxShadowBox;

package/dist/BoxShadowBox/index.d.ts

@@ -0,0 +1 @@
+export { default as BoxShadowBox, type BoxShadowBoxProps } from './BoxShadowBox';

package/dist/BoxShadowBox/index.js

@@ -0,0 +1 @@
+export { default as BoxShadowBox } from "./BoxShadowBox";

package/dist/Button/Button.d.ts

@@ -0,0 +1,12 @@
+import React, { HtmlHTMLAttributes, ReactNode } from 'react';
+export type ButtonProps = {
+    type?: 'default' | 'primary' | 'danger';
+    size?: SizeType;
+    children: ReactNode;
+} & HtmlHTMLAttributes<HTMLButtonElement>;
+declare const Button: React.ForwardRefExoticComponent<{
+    type?: "default" | "primary" | "danger" | undefined;
+    size?: SizeType | undefined;
+    children: ReactNode;
+} & React.HtmlHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/Button/Button.js

@@ -0,0 +1,86 @@
+var _excluded = ["type", "size"];
+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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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."); }
+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); }
+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; }
+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; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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; }
+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; }
+import React, { forwardRef, useEffect, useState } from 'react';
+import styled, { css, keyframes } from 'styled-components';
+import theme from "../__consts/theme";
+// 定义关键帧动画
+
+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);
+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);
+var StyledButton = styled('button').withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['isActive'].includes(prop);
+  }
+}).withConfig({
+  displayName: "StyledButton",
+  componentId: "basic-component-347b__sc-nyef9a-0"
+})(["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) {
+  return props.theme.buttonFontWeight || theme.fontWeight;
+}, function (props) {
+  return props.theme.background || theme.borderWidth;
+}, function (props) {
+  if (props.theme.buttonBorderRadius) return css(["border-radius:", ";"], props.theme.buttonBorderRadius);else return css(["border-radius:var(--kep-platform-border-radius);"]);
+}, function (props) {
+  switch (props.type) {
+    case 'danger':
+      return css(["color:var(--kep-platform-color-white);border-color:transparent;background-color:var(--kep-platform-red);"]);
+    case 'default':
+      return css(["color:", ";border-color:", ";background-color:", ";&:hover{border-color:", ";color:", ";}"], theme.color, theme.secondaryColor, theme.backgroundColor, theme.primaryColor, theme.primaryColor);
+    case 'primary':
+      return css(["color:", ";border-color:transparent;background-color:", ";"], theme.backgroundColor, theme.primaryColor);
+  }
+}, function (props) {
+  if (props.isActive) {
+    if (props.type === 'danger') return css(["animation:", " 0.5s linear;"], dangerShadowAnimation);else {
+      return css(["animation:", " 0.5s linear;"], defaultShadowAnimation);
+    }
+  }
+}, function (props) {
+  switch (props.size) {
+    case 'small':
+      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);"]);
+    case 'large':
+      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);"]);
+  }
+});
+var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  useEffect(function () {
+    var timer = null;
+    if (isActive) {
+      timer = setTimeout(function () {
+        return setIsActive(false);
+      }, 500);
+    } else {
+      if (timer) clearTimeout(timer);
+    }
+  }, [isActive]);
+  return /*#__PURE__*/React.createElement(StyledButton, _extends({}, rest, {
+    type: type,
+    size: size,
+    isActive: isActive,
+    ref: ref,
+    onClick: function onClick(e) {
+      var _rest$onClick;
+      (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 || _rest$onClick.call(rest, e);
+      setIsActive(true);
+    }
+  }));
+});
+export default Button;

package/dist/Button/index.d.ts

@@ -0,0 +1 @@
+export { default as Button, type ButtonProps } from './Button';

package/dist/Button/index.js

@@ -0,0 +1 @@
+export { default as Button } from "./Button";

package/dist/Columns/Columns.d.ts

@@ -0,0 +1,24 @@
+import React, { HtmlHTMLAttributes } from 'react';
+export declare const DefaultColumnWidth = 200;
+export type ColumnsProps = {
+    columns: ColumnType[];
+    rowData: Record<string, any>;
+    isFlex?: boolean;
+    leftBase?: number;
+    columnsKey?: string;
+} & HtmlHTMLAttributes<HTMLUListElement>;
+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"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+}, Omit<ColumnType, "render" | "dataIndex"> & {
+    key: React.Key;
+    title?: React.ReactNode;
+    index?: number | undefined;
+    itemRender?: ListItemRender | undefined;
+} & Omit<React.HtmlHTMLAttributes<HTMLLIElement>, "title"> & {
+    isFlex: boolean;
+    bordered?: boolean | undefined;
+} & {
+    left?: string | undefined;
+    right?: string | undefined;
+}>> & string;
+export default function Columns({ columns, rowData, isFlex, leftBase, columnsKey, ...columnsRestProps }: ColumnsProps): React.JSX.Element;

package/dist/Columns/Columns.js

@@ -0,0 +1,126 @@
+var _excluded = ["columns", "rowData", "isFlex", "leftBase", "columnsKey"],
+  _excluded2 = ["dataIndex", "render", "key"];
+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); }
+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; }
+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; }
+import React, { useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { List, ListItem } from "../List";
+export var DefaultColumnWidth = 200;
+//如果是flex模式的话，就不使用宽度来控制，而是直接交给flex布局
+var ColumnList = styled(List).withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['widthSum', 'isFlex'].includes(prop);
+  }
+}).withConfig({
+  displayName: "ColumnList",
+  componentId: "basic-component-347b__sc-1hh0w2t-0"
+})(["", ""], function (props) {
+  if (props.isFlex) {
+    return css(["display:flex;"]);
+  } else {
+    return css(["width:", "px;"], props.widthSum);
+  }
+});
+export var Column = styled(ListItem).withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['width', 'isFlex', 'border'].includes(prop);
+  }
+}).withConfig({
+  displayName: "Column",
+  componentId: "basic-component-347b__sc-1hh0w2t-1"
+})(["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) {
+  return props.align;
+}, function (props) {
+  if (props.bordered) {
+    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;"]);
+  }
+}, ColumnList, function (props) {
+  if (props.isFlex) {
+    return css(["flex:", ";"], props.width || DefaultColumnWidth);
+  } else {
+    return css(["width:", "px;"], props.width || DefaultColumnWidth);
+  }
+}, function (props) {
+  if (props.fixed && !props.isFlex) {
+    return css(["position:sticky;"]);
+  }
+}, function (props) {
+  if (props.fixed === 'left' && !props.isFlex) {
+    return css(["left:", ";z-index:var(--kep-platform-z-index-fixed);"], props.left);
+  }
+  if (props.fixed === 'right' && !props.isFlex) {
+    return css(["right:", ";z-index:var(--kep-platform-z-index-fixed) - 1;"], props.right);
+  }
+});
+var displayColumnsCache = {};
+export default function Columns(_ref) {
+  var columns = _ref.columns,
+    rowData = _ref.rowData,
+    _ref$isFlex = _ref.isFlex,
+    isFlex = _ref$isFlex === void 0 ? true : _ref$isFlex,
+    _ref$leftBase = _ref.leftBase,
+    leftBase = _ref$leftBase === void 0 ? 0 : _ref$leftBase,
+    columnsKey = _ref.columnsKey,
+    columnsRestProps = _objectWithoutProperties(_ref, _excluded);
+  var displayColumns = useMemo(function () {
+    if (columnsKey && displayColumnsCache[columnsKey]) {
+      return displayColumnsCache[columnsKey];
+    }
+    var newColumns;
+    if (isFlex) {
+      newColumns = columns.filter(function (_ref2) {
+        var hideInTable = _ref2.hideInTable;
+        return !hideInTable;
+      });
+      if (columnsKey) {
+        return displayColumnsCache[columnsKey] = newColumns;
+      }
+      return newColumns;
+    }
+    /* 用来计算sticky的偏移量，确定每个有fixed属性column的位置 */
+    var leftCache = 0;
+    var rightCache = 0;
+    var p;
+    newColumns = [];
+    for (var i = 0; i < columns.length; i++) {
+      p = columns[i];
+      if (p.hideInTable) {
+        continue;
+      }
+      if (p.fixed === 'left') {
+        p.left = leftCache + 'px';
+        leftCache += p.width || DefaultColumnWidth;
+      }
+      if (p.fixed === 'right') {
+        p.right = rightCache + 'px';
+        rightCache += p.width || DefaultColumnWidth;
+      }
+      newColumns.push(p);
+    }
+    if (columnsKey) {
+      displayColumnsCache[columnsKey] = newColumns;
+    }
+    return newColumns;
+  }, [columns, isFlex, leftBase, columnsKey]);
+  var widthSum = useMemo(function () {
+    return columns.reduce(function (pre, current) {
+      return pre + (current.width || DefaultColumnWidth);
+    }, 0);
+  }, [displayColumns]);
+  return /*#__PURE__*/React.createElement(ColumnList, _extends({
+    direction: "row"
+  }, columnsRestProps, {
+    widthSum: widthSum,
+    isFlex: isFlex
+  }), displayColumns.map(function (_ref3, index) {
+    var dataIndex = _ref3.dataIndex,
+      render = _ref3.render,
+      key = _ref3.key,
+      listItemRestProps = _objectWithoutProperties(_ref3, _excluded2);
+    return /*#__PURE__*/React.createElement(Column, _extends({}, listItemRestProps, {
+      key: key,
+      isFlex: isFlex
+    }), (render === null || render === void 0 ? void 0 : render(rowData[dataIndex], rowData, index)) || rowData[dataIndex] || '-');
+  }));
+}

package/dist/Columns/index.d.ts

@@ -0,0 +1 @@
+export { Column, default as Columns, type ColumnsProps } from './Columns';

package/dist/Columns/index.js

@@ -0,0 +1 @@
+export { Column, default as Columns } from "./Columns";

package/dist/Flex/flex.d.ts

@@ -0,0 +1,14 @@
+import { HtmlHTMLAttributes } from 'react';
+export type FlexProps = {
+    direction?: Direction;
+    width?: number;
+    alignItems?: string;
+};
+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;
+export type FlexItemProps = {
+    flex?: number | string;
+    width?: number;
+    align?: Align;
+    cursor?: string;
+};
+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;

package/dist/Flex/flex.js

@@ -0,0 +1,29 @@
+import styled, { css } from 'styled-components';
+export var Flex = styled.div.withConfig({
+  displayName: "Flex",
+  componentId: "basic-component-347b__sc-14xikkf-0"
+})(["display:flex;flex-direction:", ";align-items:", ";", ""], function (props) {
+  return props.direction || 'row';
+}, function (props) {
+  return props.alignItems || 'center';
+}, function (props) {
+  if (props.width) {
+    return css(["width:", "px;"], props.width);
+  } else {
+    return css(["width:100%;"]);
+  }
+});
+export var FlexItem = styled.div.withConfig({
+  displayName: "FlexItem",
+  componentId: "basic-component-347b__sc-14xikkf-1"
+})(["flex:", ";text-align:", ";cursor:", ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], function (props) {
+  return props.flex;
+}, function (props) {
+  return props.align;
+}, function (props) {
+  return props.cursor || 'default';
+}, function (props) {
+  if (props.width) {
+    return css(["width:", "px;"], props.width);
+  }
+});

package/dist/Flex/index.d.ts

@@ -0,0 +1 @@
+export * from './flex';

package/dist/Flex/index.js

@@ -0,0 +1 @@
+export * from "./flex";

package/dist/Grid/Col.d.ts

@@ -0,0 +1,8 @@
+import React, { HtmlHTMLAttributes } from 'react';
+export type ColProps = {
+    span: number;
+    offset?: number;
+} & HtmlHTMLAttributes<HTMLDivElement>;
+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;
+declare const Col: React.FC<ColProps>;
+export default Col;

package/dist/Grid/Col.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+export var StyledCol = styled.div.withConfig({
+  displayName: "StyledCol",
+  componentId: "basic-component-347b__sc-1arnr37-0"
+})(["flex-basis:calc(100% * ", " / 24);"], function (props) {
+  return props.span;
+});
+var Col = function Col(props) {
+  return /*#__PURE__*/React.createElement(StyledCol, props);
+};
+export default Col;

package/dist/Grid/Row.d.ts

@@ -0,0 +1,6 @@
+import React, { HtmlHTMLAttributes } from 'react';
+export type RowProps = {
+    gap?: number | [number, number];
+} & HtmlHTMLAttributes<HTMLDivElement>;
+declare const Row: React.FC<RowProps>;
+export default Row;

package/dist/Grid/Row.js

@@ -0,0 +1,55 @@
+var _excluded = ["children"];
+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); }
+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; }
+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; }
+import React from 'react';
+import styled from 'styled-components';
+import theme from "../__consts/theme";
+import Col, { StyledCol } from "./Col";
+var StyledRow = styled.div.withConfig({
+  displayName: "StyledRow",
+  componentId: "basic-component-347b__sc-15h2ba-0"
+})(["display:flex;flex-wrap:wrap;margin:", ";& > ", "{padding:", ";}"], function (props) {
+  if (props.gap) {
+    if (typeof props.gap === 'number') {
+      var margin = (props.gap || parseInt(theme.gap)) / 2;
+      return -margin + 'px';
+    } else if (Array.isArray(props.gap) && props.gap.length === 2 && typeof props.gap[0] === 'number' && typeof props.gap[1] === 'number') {
+      var marginTop = (props.gap[0] || parseInt(theme.gap)) / 2;
+      var marginRight = (props.gap[1] || parseInt(theme.gap)) / 2;
+      return "-".concat(marginTop, "px -").concat(marginRight, "px");
+    }
+  } else {
+    return 0;
+  }
+}, StyledCol, function (props) {
+  if (props.gap) {
+    if (typeof props.gap === 'number') {
+      var padding = (props.gap || parseInt(theme.gap)) / 2;
+      return padding + 'px';
+    } else if (Array.isArray(props.gap) && props.gap.length === 2 && typeof props.gap[0] === 'number' && typeof props.gap[1] === 'number') {
+      var paddingTop = (props.gap[0] || parseInt(theme.gap)) / 2;
+      var paddingRight = (props.gap[1] || parseInt(theme.gap)) / 2;
+      return "".concat(paddingTop, "px ").concat(paddingRight, "px");
+    }
+  } else {
+    return 0;
+  }
+});
+var Row = function Row(props) {
+  var children = props.children,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(StyledRow, _extends({}, rest, {
+    className: "".concat(rest.className, " row")
+  }), React.Children.map(children, function (child) {
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      if (child.type === Col) {
+        return child;
+      }
+    } else {
+      console.warn('行组件内部只能渲染列组件');
+      return false;
+    }
+  }));
+};
+export default Row;

package/dist/Grid/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Col, type ColProps } from './Col';
+export { default as Row, type RowProps } from './Row';

package/dist/Grid/index.js

@@ -0,0 +1,2 @@
+export { default as Col } from "./Col";
+export { default as Row } from "./Row";

package/dist/Indent/Indent.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type IndentProps = {
+    level: number;
+    indentWidth?: string;
+};
+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;
+export default Indent;

package/dist/Indent/Indent.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+var indentWidthRegx = /(\d*)(\D+)/;
+/* 缩进组件，默认单位是rem,默认长度是1，默认层级是1 */
+var defaultIndentUnit = 'px';
+var defaultIndentWidth = 16;
+var lengthUnits = ['px', 'rem', 'pt', 'em', '%'];
+var Indent = styled.div.withConfig({
+  displayName: "Indent",
+  componentId: "basic-component-347b__sc-1w1dll1-0"
+})(["width:", ";"], function (props) {
+  if (!props.indentWidth) {
+    return props.level * defaultIndentWidth + defaultIndentUnit;
+  }
+  var result = indentWidthRegx.exec(props.indentWidth);
+  var number = defaultIndentWidth,
+    unit = defaultIndentUnit;
+  if (result) {
+    number = parseInt(result[1]);
+    if (lengthUnits.includes(result[2])) {
+      unit = result[2];
+    }
+  }
+  return props.level * number + unit;
+});
+export default Indent;

package/dist/Indent/index.d.ts

@@ -0,0 +1 @@
+export { default as Indent, type IndentProps } from './Indent';

package/dist/Indent/index.js

@@ -0,0 +1 @@
+export { default as Indent } from "./Indent";

package/dist/List/List.d.ts

@@ -0,0 +1,19 @@
+import React, { HtmlHTMLAttributes, Key, ReactNode } from 'react';
+type ListItemType = {
+    key: string;
+    title?: ReactNode;
+} & Omit<HtmlHTMLAttributes<HTMLLIElement>, 'title'>;
+export type ListProps = {
+    items?: ListItemType[];
+    direction?: Direction;
+    itemRender?: ListItemRender;
+} & HtmlHTMLAttributes<HTMLUListElement>;
+export type ListItemProps = {
+    key: Key;
+    title?: ReactNode;
+    index?: number;
+    itemRender?: ListItemRender;
+} & Omit<HtmlHTMLAttributes<HTMLLIElement>, 'title'>;
+export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+declare const List: React.FC<ListProps>;
+export default List;