@apdesign/web-react 1.0.0

package/lib/Table/style/token.less

@@ -0,0 +1,96 @@
+@import '../../style/theme/default.less';
+
+@table-size-default-padding-horizontal: @spacing-7;
+@table-size-default-padding-vertical: 9px;
+@table-size-middle-padding-horizontal: @spacing-7;
+@table-size-middle-padding-vertical: 7px;
+@table-size-small-padding-horizontal: @spacing-7;
+@table-size-small-padding-vertical: 5px;
+@table-size-mini-padding-horizontal: @spacing-7;
+@table-size-mini-padding-vertical: 2px;
+
+@table-size-default-font-size: @font-size-body-3;
+@table-size-middle-font-size: @font-size-body-3;
+@table-size-small-font-size: @font-size-body-3;
+@table-size-mini-font-size: @font-size-body-1;
+
+@table-size-default-font-header-size: @font-size-body-3;
+@table-size-middle-font-header-size: @font-size-body-3;
+@table-size-small-font-header-size: @font-size-body-3;
+@table-size-mini-font-header-size: @font-size-body-1;
+
+@table-border-width: @border-1;
+@table-border-style: solid;
+
+@table-size-expand-button: 14px;
+@table-spacing-expand-button-margin-right: @spacing-2;
+@table-font-size-expand-button: 12px;
+@table-border-radius-expand-button: 2px;
+
+@table-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@table-border-radius: @radius-medium;
+
+@table-color-text-header-cell: rgb(var(~'@{arco-cssvars-prefix}-gray-10'));
+@table-color-bg-header-cell: var(~'@{arco-cssvars-prefix}-color-neutral-2');
+@table-color-bg-header-sorted-cell: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@table-color-bg-header-sorted-cell_hover: rgba(var(~'@{arco-cssvars-prefix}-gray-4'), 0.5);
+@table-color-header-filters-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
+@table-color-header-filters-icon_active: @color-primary-6;
+@table-color-bg-header-filters-icon_hover: var(~'@{arco-cssvars-prefix}-color-neutral-4');
+@table-font-size-filters-icon: 16px;
+@table-size-filters-width: 24px;
+@table-font-weight-header-text: @font-weight-500;
+
+@table-color-text-body-cell: rgb(var(~'@{arco-cssvars-prefix}-gray-10'));
+@table-color-bg-body-cell: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@table-color-bg-body-sorted-cell: var(~'@{arco-cssvars-prefix}-color-fill-1');
+@table-color-bg-body-stripe-row: var(~'@{arco-cssvars-prefix}-color-fill-1');
+@table-color-bg-body-stripe-row_dark: var(~'@{arco-cssvars-prefix}-color-bg-3');
+@table-color-bg-body-row_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
+@table-color-bg-body-row_active: var(~'@{arco-cssvars-prefix}-color-fill-1');
+
+@table-color-expand-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
+@table-color-expand-icon-border: @color-transparent;
+@table-color-expand-icon-border_hover: @color-transparent;
+@table-color-expand-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
+@table-color-bg-expand-icon: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@table-color-bg-expand-icon_hover: var(~'@{arco-cssvars-prefix}-color-neutral-4');
+@table-color-bg-expand-content: var(~'@{arco-cssvars-prefix}-color-fill-1');
+@table-color-bg-expand-content_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
+@table-border-expand-icon-width: @border-1;
+@table-spacing-header-sorter-icon-margin-left: @spacing-4;
+
+@table-color-header-sorter-icon: var(~'@{arco-cssvars-prefix}-color-neutral-5');
+@table-color-header-sorter-icon_next: var(~'@{arco-cssvars-prefix}-color-neutral-6');
+@table-color-header-sorter-icon_active: @color-primary-6;
+@table-spacing-header-sorter-icon-margin-left: @spacing-4;
+@table-size-header-sorter-icon-height: 8px;
+@table-font-size-header-sorter-icon: 12px;
+@table-position-header-sorter-icon-up-top: -2px;
+@table-position-header-sorter-icon-down-top: -3px;
+
+// Popup
+@table-color-bg-filters-popup: var(~'@{arco-cssvars-prefix}-color-bg-5');
+@table-color-border-filters-popup: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@table-popup-min-width: 100px;
+@table-popup-max-height: 200px;
+@table-popup-border-radius: @radius-medium;
+
+// box shadow
+@table-shadow-left: inset 6px 0 8px -3px rgba(0, 0, 0, 0.15);
+@table-shadow-right: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
+@table-size-shadow-wrapper-width: 10px;
+
+// editable row
+@table-color-editable-body-cell-border: var(~'@{arco-cssvars-prefix}-color-white');
+
+// pagination
+@table-spacing-pagination-margin: @spacing-6;
+
+// selection
+@table-size-selection-col-width: 40px;
+
+@table-size-expand-icon-col-width: 40px;
+@table-color-body-background: var(~'@{arco-cssvars-prefix}-color-bg-2');
+
+@table-color-bg-tfoot: var(~'@{arco-cssvars-prefix}-color-neutral-2');

package/lib/Table/summary/cell.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { Omit } from '../../_util/type';
+interface SummaryCellProps extends Omit<HTMLAttributes<HTMLTableDataCellElement>, 'children'> {
+    children?: ReactNode;
+    colSpan?: number;
+    rowSpan?: number;
+}
+declare function Cell(props: SummaryCellProps): JSX.Element;
+declare namespace Cell {
+    var __ARCO_TABLE_SUMMARY_CELL__: boolean;
+}
+export default Cell;

package/lib/Table/summary/cell.js

@@ -0,0 +1,35 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var omit_1 = __importDefault(require("../../_util/omit"));
+function Cell(props) {
+    var children = props.children, rest = __rest(props, ["children"]);
+    return react_1.default.createElement("td", __assign({}, (0, omit_1.default)(rest, ['$$ArcoTableSummaryCell'])), children);
+}
+Cell.__ARCO_TABLE_SUMMARY_CELL__ = true;
+exports.default = Cell;

package/lib/Table/summary/context.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ColumnProps } from '../interface';
+interface SummaryContextProps {
+    columns?: ColumnProps[];
+    stickyOffsets?: number[];
+    stickyClassNames?: string[];
+    prefixCls?: string;
+}
+export declare const SummaryContext: import("react").Context<SummaryContextProps>;
+export {};

package/lib/Table/summary/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SummaryContext = void 0;
+var react_1 = require("react");
+exports.SummaryContext = (0, react_1.createContext)({});

package/lib/Table/summary/index.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { SummaryProps } from '../interface';
+declare function Summary(props: SummaryProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare namespace Summary {
+    var Row: typeof import("./row").default;
+    var Cell: typeof import("./cell").default;
+}
+export default Summary;

package/lib/Table/summary/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var row_1 = __importDefault(require("./row"));
+var cell_1 = __importDefault(require("./cell"));
+function Summary(props) {
+    return props.children;
+}
+Summary.Row = row_1.default;
+Summary.Cell = cell_1.default;
+exports.default = Summary;

package/lib/Table/summary/row.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import { Omit } from '../../_util/type';
+interface SummaryRowProps extends Omit<HTMLAttributes<HTMLTableRowElement>, 'children'> {
+    children?: ReactNode;
+}
+declare function Row(props: SummaryRowProps): JSX.Element;
+export default Row;

package/lib/Table/summary/row.js

@@ -0,0 +1,80 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var get_1 = __importDefault(require("lodash/get"));
+var context_1 = require("./context");
+var classNames_1 = __importDefault(require("../../_util/classNames"));
+var ConfigProvider_1 = require("../../ConfigProvider");
+function Row(props) {
+    var rtl = (0, react_1.useContext)(ConfigProvider_1.ConfigContext).rtl;
+    var _a = (0, react_1.useContext)(context_1.SummaryContext), columns = _a.columns, stickyOffsets = _a.stickyOffsets, stickyClassNames = _a.stickyClassNames, prefixCls = _a.prefixCls;
+    var children = props.children, rest = __rest(props, ["children"]);
+    var colSpans = react_1.default.Children.map(children, function (child) { return child.props.colSpan || 1; });
+    var element = react_1.default.Children.map(children, function (child, index) {
+        var _a, _b;
+        var _c, _d;
+        var childElement = child;
+        // childElement?.props?.$$ArcoTableSummaryCell: Compatible Cell.defaultProps.$$ArcoTableSummaryCell
+        var isSummaryCell = (0, get_1.default)(childElement, 'type.__ARCO_TABLE_SUMMARY_CELL__') ||
+            (0, get_1.default)(childElement, 'props.$$ArcoTableSummaryCell');
+        var childStyle = (_c = childElement === null || childElement === void 0 ? void 0 : childElement.props) === null || _c === void 0 ? void 0 : _c.style;
+        var childClassName = (_d = childElement === null || childElement === void 0 ? void 0 : childElement.props) === null || _d === void 0 ? void 0 : _d.className;
+        var prevAllColSpan = colSpans.slice(0, index).reduce(function (p, n) { return p + n; }, 0);
+        var stickyIndex = prevAllColSpan;
+        var stickyStyle = columns[stickyIndex].fixed === 'left'
+            ? (_a = {}, _a[rtl ? 'right' : 'left'] = stickyOffsets[stickyIndex], _a) : columns[stickyIndex].fixed === 'right'
+            ? (_b = {}, _b[rtl ? 'left' : 'right'] = stickyOffsets[stickyIndex], _b) : {};
+        var stickyClassName = columns[stickyIndex].fixed === 'left' || columns[stickyIndex].fixed === 'right'
+            ? stickyClassNames[stickyIndex]
+            : '';
+        return isSummaryCell
+            ? react_1.default.cloneElement(childElement, __assign(__assign({}, childElement.props), { className: (0, classNames_1.default)(prefixCls + "-td", stickyClassName, childClassName), style: __assign(__assign({}, childStyle), stickyStyle) }))
+            : child;
+    });
+    return react_1.default.createElement("tr", __assign({}, rest), element);
+}
+exports.default = Row;

package/lib/Table/table.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TableProps } from './interface';
+export interface TableInstance {
+    getRootDomElement: () => HTMLDivElement;
+    scrollIntoView: (dataIndex: React.Key) => void;
+}
+declare const _default: <T>(props: TableProps<T> & {
+    ref?: React.Ref<TableInstance>;
+}) => React.ReactElement;
+export default _default;