@apdesign/web-react 1.0.0

package/lib/Switch/style/index.less

@@ -0,0 +1,410 @@
+@import './token.less';
+
+@switch-prefix-cls: ~'@{prefix}-switch';
+
+@switch-size-default-gap: ((@switch-size-default - @switch-size-dot-default) / 2);
+@switch-size-small-gap: ((@switch-size-small - @switch-size-dot-small) / 2);
+
+@switch-size-default-line-gap: ((@switch-size-default - @switch-line-size-dot-default) / 2);
+@switch-size-small-line-gap: ((@switch-size-small - @switch-line-size-dot-small) / 2);
+
+.switchSlideText-enter,
+.switchSlideText-appear {
+  left: -100% !important;
+}
+
+.switchSlideText-enter-active,
+.switchSlideText-appear-active {
+  left: 8px !important;
+  transition: left @transition-duration-2 @transition-timing-function-standard;
+}
+
+.switchSlideText-exit {
+  left: 100% !important;
+}
+
+.switchSlideText-exit-active {
+  left: @switch-size-dot-default + @switch-size-default-gap + 6px !important;
+  transition: left @transition-duration-2 @transition-timing-function-standard;
+}
+
+.@{switch-prefix-cls} {
+  position: relative;
+  outline: none;
+  height: @switch-size-default;
+  line-height: @switch-size-default;
+  min-width: @switch-circle-default-width;
+  background-color: @switch-color-bg_off;
+  border-radius: (@switch-size-default / 2);
+  border: none;
+  cursor: pointer;
+  transition: background-color @transition-duration-2 @transition-timing-function-standard;
+  padding: 0;
+  box-sizing: border-box;
+  vertical-align: middle;
+  overflow: hidden;
+
+  &-type-round,
+  &-type-circle {
+    &:focus-visible {
+      box-shadow: 0 0 0 2px @switch-color-box-shadow_default;
+    }
+
+    &.@{switch-prefix-cls}-checked:focus-visible {
+      box-shadow: 0 0 0 2px @switch-color-box-shadow_checked;
+    }
+  }
+
+  &-type-line {
+    &:focus-visible .@{switch-prefix-cls}-dot {
+      box-shadow: 0 0 0 2px @switch-color-box-shadow_default;
+      transition: none;
+    }
+
+    &.@{switch-prefix-cls}-checked:focus-visible .@{switch-prefix-cls}-dot {
+      box-shadow: 0 0 0 2px @switch-color-box-shadow_checked;
+    }
+  }
+
+  &-dot {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: @switch-size-default-gap;
+    left: @switch-size-default-gap;
+    width: @switch-size-dot-default;
+    height: @switch-size-dot-default;
+    border-radius: 50%;
+    background-color: @switch-color-dot-bg;
+    color: @switch-color-dot-icon_off;
+    font-size: 12px;
+    transition: all @transition-duration-2 @transition-timing-function-standard;
+  }
+
+  &-checked {
+    background-color: @switch-color-bg_on;
+  }
+
+  &-checked &-dot {
+    color: @switch-color-dot-icon_on;
+    left: calc(100% - @switch-size-dot-default - @switch-size-default-gap);
+  }
+
+  &[disabled] &-dot {
+    color: @switch-color-dot-icon_off_disabled;
+  }
+
+  &[disabled]&-checked &-dot {
+    color: @switch-color-dot-icon_on_disabled;
+  }
+
+  &[disabled] &-dot {
+    color: @switch-color-dot-icon_off_disabled;
+  }
+
+  &[disabled]&-checked &-dot {
+    color: @switch-color-dot-icon_on_disabled;
+  }
+
+  &-text-holder {
+    opacity: 0;
+    font-size: @switch-font-size-text;
+    margin: 0 8px 0 @switch-size-dot-default + @switch-size-default-gap + 6px;
+  }
+
+  &-text {
+    position: absolute;
+    color: @switch-color-text_off;
+    font-size: @switch-font-size-text;
+    top: 0;
+    left: @switch-size-dot-default + @switch-size-default-gap + 6px;
+  }
+
+  &-checked &-text-holder {
+    margin: 0 @switch-size-dot-default + @switch-size-default-gap + 6px 0 8px;
+  }
+
+  &-checked &-text {
+    left: 8px;
+    color: @switch-color-text_on;
+  }
+
+  // Disabled
+  &[disabled] {
+    cursor: not-allowed;
+    background-color: @switch-color-bg_off_disabled;
+  }
+
+  &[disabled] &-text {
+    color: @switch-color-text_off_disabled;
+  }
+
+  &[disabled]&-checked {
+    background-color: @switch-color-bg_on_disabled;
+  }
+
+  &[disabled]&-checked &-text {
+    color: @switch-color-text_on_disabled;
+  }
+
+  // Loading
+  &-loading {
+    background-color: @switch-color-bg_off_loading;
+  }
+
+  &-loading &-dot {
+    color: @switch-color-dot-icon_off_loading;
+  }
+
+  &-loading &-text {
+    color: @switch-color-text_off_loading;
+  }
+
+  &-loading&-checked {
+    background-color: @switch-color-bg_on_loading;
+  }
+
+  &-loading&-checked &-dot {
+    color: @switch-color-dot-icon_on_loading;
+  }
+
+  &-loading&-checked &-text {
+    color: @switch-color-text_on_loading;
+  }
+
+  &-small {
+    height: @switch-size-small;
+    line-height: @switch-size-small;
+    min-width: @switch-circle-small-width;
+  }
+
+  &-small&-checked {
+    padding-left: -@switch-size-small-gap;
+  }
+
+  &-small &-dot {
+    top: @switch-size-small-gap;
+    left: @switch-size-small-gap;
+    width: @switch-size-dot-small;
+    height: @switch-size-dot-small;
+    border-radius: (@switch-size-small / 2);
+
+    &-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.66667);
+    }
+  }
+
+  &-small&-checked &-dot {
+    left: calc(100% - @switch-size-dot-small - @switch-size-small-gap);
+  }
+}
+
+// Round
+.@{switch-prefix-cls} {
+  &-type-round {
+    border-radius: @radius-small;
+    min-width: @switch-round-default-width;
+  }
+
+  &-type-round &-dot {
+    border-radius: 2px;
+  }
+
+  &-type-round&-small {
+    border-radius: 2px;
+    height: @switch-size-small;
+    line-height: @switch-size-small;
+    min-width: @switch-round-small-width;
+  }
+
+  &-type-round&-small &-dot {
+    border-radius: 1px;
+  }
+}
+
+// Line
+.@{switch-prefix-cls} {
+  &-type-line {
+    min-width: @switch-line-default-width;
+    background-color: transparent;
+    overflow: unset;
+
+    &::after {
+      content: '';
+      display: block;
+      width: 100%;
+      border-radius: (@switch-line-height-bg-line / 2);
+      height: @switch-line-height-bg-line;
+      background-color: @switch-color-bg_off;
+      transition: background-color @transition-duration-2 @transition-timing-function-standard;
+    }
+  }
+
+  &-type-line &-dot {
+    top: @switch-size-default-line-gap;
+    left: 0;
+    border-radius: (@switch-line-size-dot-default / 2);
+    width: @switch-line-size-dot-default;
+    height: @switch-line-size-dot-default;
+    background-color: @switch-color-dot-bg;
+    box-shadow: 0 1px 3px @switch-line-color-dot-shadow;
+  }
+
+  &-type-line&-checked {
+    background-color: transparent;
+
+    &::after {
+      background-color: @switch-color-bg_on;
+    }
+  }
+
+  &-type-line&-checked &-dot {
+    left: calc(100% - @switch-line-size-dot-default);
+  }
+
+  // Disabled
+  &-type-line[disabled] {
+    cursor: not-allowed;
+    background-color: transparent;
+
+    &::after {
+      background-color: @switch-color-bg_off_disabled;
+    }
+  }
+
+  &-type-line[disabled]&-checked {
+    background-color: transparent;
+
+    &::after {
+      background-color: @switch-color-bg_on_disabled;
+    }
+  }
+
+  // Loading
+  &-type-line&-loading {
+    background-color: transparent;
+
+    &::after {
+      background-color: @switch-color-bg_off_loading;
+    }
+  }
+
+  &-type-line&-loading&-checked {
+    background-color: transparent;
+
+    &::after {
+      background-color: @switch-color-bg_on_loading;
+    }
+  }
+
+  &-type-line&-small {
+    height: @switch-size-small;
+    line-height: @switch-size-small;
+    min-width: @switch-line-small-width;
+  }
+
+  &-type-line&-small&-checked {
+    padding-left: -@switch-size-small-line-gap;
+  }
+
+  &-type-line&-small &-dot {
+    top: @switch-size-small-line-gap;
+    width: @switch-line-size-dot-small;
+    height: @switch-line-size-dot-small;
+    border-radius: (@switch-size-small / 2);
+
+    &-icon {
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  &-type-line&-small&-checked &-dot {
+    left: calc(100% - @switch-line-size-dot-small);
+  }
+}
+
+.@{switch-prefix-cls}-rtl {
+  direction: rtl;
+
+  .switchSlideText-enter,
+  .switchSlideText-appear {
+    right: -100% !important;
+    left: initial;
+  }
+
+  .switchSlideText-enter-active,
+  .switchSlideText-appear-active {
+    left: initial;
+    right: 8px !important;
+    transition: right @transition-duration-2 @transition-timing-function-standard;
+  }
+
+  .switchSlideText-exit {
+    right: 100% !important;
+    left: initial;
+  }
+
+  .switchSlideText-exit-active {
+    left: initial;
+    right: @switch-size-dot-default + @switch-size-default-gap + 6px !important;
+    transition: right @transition-duration-2 @transition-timing-function-standard;
+  }
+
+  .@{switch-prefix-cls} {
+    &-dot {
+      left: initial;
+      right: @switch-size-default-gap;
+    }
+
+    &-text-holder {
+      margin: 0 @switch-size-dot-default + @switch-size-default-gap + 6px 0 8px;
+    }
+
+    &-text {
+      left: initial;
+      right: @switch-size-dot-default + @switch-size-default-gap + 6px;
+    }
+  }
+
+  &.@{switch-prefix-cls}-small .@{switch-prefix-cls}-dot {
+    right: @switch-size-small-gap;
+  }
+
+  &.@{switch-prefix-cls}-type-line .@{switch-prefix-cls}-dot {
+    right: 0;
+  }
+
+  &.@{switch-prefix-cls}-checked {
+    .@{switch-prefix-cls}-dot {
+      right: calc(100% - @switch-size-dot-default - @switch-size-default-gap);
+    }
+
+    .@{switch-prefix-cls}-text-holder {
+      margin: 0 8px 0 @switch-size-dot-default + @switch-size-default-gap + 6px;
+    }
+
+    .@{switch-prefix-cls}-text {
+      right: 8px;
+      left: initial;
+    }
+
+    &.@{switch-prefix-cls}-small {
+      padding-right: -@switch-size-small-gap;
+      padding-left: 0;
+
+      &.@{switch-prefix-cls}-type-line {
+        padding-right: -@switch-size-small-line-gap;
+        padding-left: 0;
+      }
+    }
+
+    &.@{switch-prefix-cls}-small .@{switch-prefix-cls}-dot {
+      left: initial;
+      right: calc(100% - @switch-size-dot-small - @switch-size-small-gap);
+    }
+  }
+}

package/lib/Switch/style/token.less

@@ -0,0 +1,50 @@
+@import '../../style/theme/default.less';
+
+// Global
+@switch-size-default: @size-6;
+@switch-size-small: @size-4;
+@switch-font-size-text: @font-size-caption;
+
+// circle and round
+@switch-size-dot-default: @size-4;
+@switch-size-dot-small: 12px;
+
+// line
+@switch-line-size-dot-default: @size-5;
+@switch-line-size-dot-small: @size-4;
+
+// Circle
+@switch-circle-default-width: @size-10;
+@switch-circle-small-width: @size-7;
+
+// Round
+@switch-round-default-width: @size-10;
+@switch-round-small-width: @size-7;
+
+// Line
+@switch-line-default-width: @size-9;
+@switch-line-small-width: @size-7;
+@switch-line-height-bg-line: 6px;
+@switch-line-color-dot-shadow: var(~'@{arco-cssvars-prefix}-color-neutral-6');
+
+@switch-color-bg_on: @color-primary-6;
+@switch-color-bg_off: var(~'@{arco-cssvars-prefix}-color-fill-4');
+@switch-color-bg_on_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
+@switch-color-bg_off_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@switch-color-bg_on_loading: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
+@switch-color-bg_off_loading: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@switch-color-dot-bg: var(~'@{arco-cssvars-prefix}-color-bg-white');
+@switch-color-text_on: var(~'@{arco-cssvars-prefix}-color-white');
+@switch-color-text_off: var(~'@{arco-cssvars-prefix}-color-white');
+@switch-color-text_on_disabled: var(~'@{arco-cssvars-prefix}-color-white');
+@switch-color-text_off_disabled: var(~'@{arco-cssvars-prefix}-color-white');
+@switch-color-text_on_loading: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
+@switch-color-text_off_loading: var(~'@{arco-cssvars-prefix}-color-white');
+@switch-color-dot-icon_on: @color-primary-6;
+@switch-color-dot-icon_off: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@switch-color-dot-icon_on_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
+@switch-color-dot-icon_off_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@switch-color-dot-icon_on_loading: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
+@switch-color-dot-icon_off_loading: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@switch-color-box-shadow_checked: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
+@switch-color-box-shadow_default: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));

package/lib/Table/__test__/common/columns.d.ts

@@ -0,0 +1,11 @@
+import { ColumnProps } from '../../interface';
+import { TestData, MultipleSorterTestData } from './data';
+export declare const columns: ColumnProps<TestData>[];
+export declare const columnsSorter: ColumnProps<TestData>[];
+export declare const columnsFilter: ColumnProps<TestData>[];
+export declare const columnsFilterCustom: ColumnProps<TestData>[];
+export declare const columnsCustomRender: ColumnProps<TestData>[];
+export declare const columnsFixedColumns: ColumnProps<TestData>[];
+export declare const columnsCustomStyle: ColumnProps<TestData>[];
+export declare const columnsGroupColumns: ColumnProps<TestData>[];
+export declare const multipleSorterColumns: ColumnProps<MultipleSorterTestData>[];

package/lib/Table/__test__/common/columns.js

@@ -0,0 +1,199 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.multipleSorterColumns = exports.columnsGroupColumns = exports.columnsCustomStyle = exports.columnsFixedColumns = exports.columnsCustomRender = exports.columnsFilterCustom = exports.columnsFilter = exports.columnsSorter = exports.columns = void 0;
+var react_1 = __importDefault(require("react"));
+var Button_1 = __importDefault(require("../../../Button"));
+var Tag_1 = __importDefault(require("../../../Tag"));
+var icon_1 = require("../../../../icon");
+var constant_1 = require("../../../_util/constant");
+exports.columns = [
+    {
+        title: 'Name',
+        dataIndex: 'name',
+    },
+    {
+        title: 'Address',
+        dataIndex: 'address',
+    },
+    {
+        title: 'Sex',
+        dataIndex: 'sex',
+    },
+    {
+        title: 'Age',
+        dataIndex: 'age',
+    },
+    {
+        title: 'Email',
+        dataIndex: 'email',
+    },
+];
+exports.columnsSorter = (function () {
+    return exports.columns.map(function (d) {
+        if (d.title === 'Age') {
+            return __assign(__assign({}, d), { defaultSortOrder: 'ascend', sorter: function (a, b) { return a.age - b.age; } });
+        }
+        return d;
+    });
+})();
+exports.columnsFilter = (function () {
+    return exports.columns.map(function (d) {
+        if (d.title === 'Sex') {
+            return __assign(__assign({}, d), { defaultFilters: ['male'], filters: [
+                    {
+                        text: 'Male',
+                        value: 'male',
+                    },
+                    {
+                        text: 'Female',
+                        value: 'female',
+                    },
+                ], onFilter: function (value, row) { return row.sex === value; } });
+        }
+        return d;
+    });
+})();
+exports.columnsFilterCustom = (function () {
+    return exports.columns.map(function (d) {
+        if (d.title === 'Sex') {
+            return __assign(__assign({}, d), { filterIcon: react_1.default.createElement(icon_1.IconSearch, null), filterDropdown: function (_a) {
+                    var setFilterKeys = _a.setFilterKeys, confirm = _a.confirm;
+                    return (react_1.default.createElement("div", { className: "arco-table-custom-filter" },
+                        react_1.default.createElement(Button_1.default, { onClick: function () {
+                                setFilterKeys(['male'], constant_1.NOOP);
+                            } }, "set value"),
+                        react_1.default.createElement(Button_1.default, { onClick: function () {
+                                confirm();
+                            } }, "ok")));
+                }, onFilter: function (value, row) { return row.sex === value; } });
+        }
+        return d;
+    });
+})();
+exports.columnsCustomRender = (function () {
+    return exports.columns.map(function (d) {
+        if (d.title === 'Sex') {
+            return __assign(__assign({}, d), { render: function (col) {
+                    return react_1.default.createElement(Tag_1.default, null, col);
+                } });
+        }
+        return d;
+    });
+})();
+exports.columnsFixedColumns = (function () {
+    return exports.columns.map(function (d) {
+        if (d.title === 'Name') {
+            return __assign(__assign({}, d), { fixed: 'left', width: 100 });
+        }
+        if (d.title === 'Email') {
+            return __assign(__assign({}, d), { fixed: 'right', width: 120 });
+        }
+        return d;
+    });
+})();
+exports.columnsCustomStyle = (function () {
+    return exports.columns.map(function (d) {
+        if (d.title === 'Name') {
+            return __assign(__assign({}, d), { className: 'red', headerCellStyle: {
+                    backgroundColor: 'rgb(0, 0, 0)',
+                    color: 'rgb(255, 255, 255)',
+                }, bodyCellStyle: {
+                    color: 'rgb(255, 255, 255)',
+                } });
+        }
+        if (d.title === 'Address') {
+            return __assign(__assign({}, d), { cellStyle: {
+                    color: 'rgb(1, 1, 1)',
+                } });
+        }
+        return d;
+    });
+})();
+exports.columnsGroupColumns = [
+    {
+        title: 'Name',
+        dataIndex: 'name',
+    },
+    {
+        title: 'Other',
+        children: [
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            },
+            {
+                title: 'Sex',
+                dataIndex: 'sex',
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+            },
+        ],
+    },
+    {
+        title: 'Email',
+        dataIndex: 'email',
+    },
+];
+exports.multipleSorterColumns = [
+    {
+        title: 'Name',
+        dataIndex: 'name',
+        sorter: function (a, b) {
+            if (a.name > b.name) {
+                return 1;
+            }
+            if (a.name < b.name) {
+                return -1;
+            }
+            return 0;
+        },
+    },
+    {
+        title: 'Age',
+        dataIndex: 'age',
+        sorter: function (a, b) { return a.age - b.age; },
+    },
+    {
+        title: 'Score A',
+        dataIndex: 'scoreA',
+        defaultSortOrder: 'descend',
+        sorter: {
+            compare: function (a, b) { return a.scoreA - b.scoreA; },
+            multiple: 3,
+        },
+    },
+    {
+        title: 'Score B',
+        dataIndex: 'scoreB',
+        defaultSortOrder: 'ascend',
+        sorter: {
+            compare: function (a, b) { return a.scoreB - b.scoreB; },
+            multiple: 2,
+        },
+    },
+    {
+        title: 'Score C',
+        dataIndex: 'scoreC',
+        defaultSortOrder: 'descend',
+        sorter: {
+            compare: function (a, b) { return a.scoreC - b.scoreC; },
+            multiple: 1,
+        },
+    },
+];

package/lib/Table/__test__/common/data.d.ts

@@ -0,0 +1,29 @@
+export interface TestData {
+    key: string;
+    name: string;
+    address: string;
+    sex: 'male' | 'female';
+    age: number;
+    email: string;
+}
+export interface MultipleSorterTestData {
+    key: string;
+    name: string;
+    age: number;
+    scoreA: number;
+    scoreB: number;
+    scoreC: number;
+}
+export declare const data: TestData[];
+export interface TestTreeData extends TestData {
+    children?: TestTreeData[];
+}
+export declare const treeData: TestTreeData[];
+export declare const multipleSorterData: {
+    key: string;
+    name: string;
+    age: number;
+    scoreA: number;
+    scoreB: number;
+    scoreC: number;
+}[];