@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/table/table.scss

@@ -0,0 +1,552 @@
+@import "./variables.scss";
+@import "./mixin.scss";
+@import "./operationPanel.scss";
+
+$module: #{$prefix}-table;
+
+.#{$module} {
+    width: 100%;
+    text-align: left;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: inherit;
+    display: table;
+
+    &-wrapper {
+        zoom: 1;
+        position: relative;
+        clear: both;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        @include font-size-regular;
+        color: $color-table-text-default;
+        width: 100%;
+    }
+
+    &-middle {
+        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
+        .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
+            padding-top: $spacing-table_middle-paddingY;
+            padding-bottom: $spacing-table_middle-paddingY;
+        }
+    }
+
+    &-small {
+        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
+        .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
+            padding-top: $spacing-table_small-paddingY;
+            padding-bottom: $spacing-table_small-paddingY;
+        }
+    }
+
+    &-title {
+        position: relative;
+        padding-top: $spacing-table_title-paddingY;
+        padding-bottom: $spacing-table_title-paddingY;
+        padding-left: $spacing-table_title-paddingX;
+        padding-right: $spacing-table_title-paddingX;
+    }
+
+    &-container {
+        position: relative;
+    }
+
+    &-header {
+        overflow: hidden;
+
+        &::-webkit-scrollbar {
+            background-color: transparent;
+            border-bottom: $border-table_head-bottom;
+        }
+        scrollbar-base-color: transparent;
+    }
+
+    &-body {
+        overflow: auto;
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    &-colgroup {
+        display: table-column-group;
+        .#{$module}-col {
+            display: table-column;
+        }
+        .#{$module}-column {
+
+            &-expand,
+            &-selection {
+                width: $width-table_column_selection;
+            }
+        }
+    }
+
+    &-thead {
+        & > .#{$module}-row {
+            & > .#{$module}-row-head {
+                background-color: $color-table_th-bg-default;
+                color: $color-table_th-text-default;
+                font-weight: $font-weight-bold;
+                text-align: left;
+                border-bottom: $border-table_head-bottom;
+                padding-left: $spacing-table_row_head-paddingX;
+                padding-right: $spacing-table_row_head-paddingX;
+                padding-top: $spacing-table_row_head-paddingY;
+                padding-bottom: $spacing-table_row_head-paddingY;
+                vertical-align: middle;
+                word-break: break-all;
+                word-wrap: break-word;
+                position: relative;
+                user-select: none;
+
+                &.#{$module}-cell-fixed {
+
+                    &-left,
+                    &-right {
+                        z-index: $z-table_fixed_column;
+                        position: sticky;
+                        background-color: $color-table-bg-default;
+
+                        &::before {
+                            background-color: $color-table_th-bg-default;
+                            content: "";
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            right: 0;
+                            bottom: 0;
+                            display: block;
+                            z-index: -1;
+                        }
+                    }
+
+                    &-left-last {
+                        border-right: $width-table_cell_fixed_left_last solid $color-table_shadow-border-default;
+                        box-shadow: #{$shadow-table_right};
+
+                        &.resizing {
+                            @include genResizing();
+                        }
+                    }
+
+                    &-right-first {
+                        border-left: $width-table_cell_fixed_right_first solid $color-table_shadow-border-default;
+                        box-shadow: #{$shadow-table_left};
+
+                        &.resizing {
+                            @include genResizing();
+                        }
+
+                        // scroll-bar 列无需有box-shadow
+
+                        &[x-type="column-scrollbar"] {
+                            box-shadow: none;
+                            border-left: transparent;
+                        }
+                    }
+                }
+
+                &.#{$module}-column-selection {
+                    text-align: center;
+                }
+
+                &[colspan]:not([colspan="1"]) {
+                    text-align: center;
+                }
+
+                .#{$module}-header-column {
+                    display: inline-flex;
+                    align-items: center;
+                }
+            }
+
+            .react-resizable {
+                position: relative;
+                background-clip: padding-box;
+            }
+
+            .resizing {
+                @include genResizing();
+            }
+
+            .react-resizable-handle {
+                position: absolute;
+                width: $width-table_react_resizable_handle;
+                height: calc(100% - #{$spacing-table_resizable-offset-y} * 2);
+                background-color: $color-table-border-default;
+                bottom: $spacing-table_resizable-bottom;
+                right: $spacing-table_react_resizable_handle-right;
+                cursor: col-resize;
+                z-index: 0;
+
+                &:hover {
+                    background-color: $color-table_resizer-bg-default;
+                }
+            }
+        }
+    }
+
+    &-tbody {
+        display: table-row-group;
+        & > .#{$module}-row {
+            display: table-row;
+
+            &:hover {
+                & > .#{$module}-row-cell {
+                    background-color: $color-table_body-bg-hover;
+
+                    &.#{$module}-cell-fixed {
+    
+                        &-left,
+                        &-right {
+                            background-color: $color-table_body-bg-default;
+    
+                            &::before {
+                                background-color: $color-table_body-bg-hover;
+                                content: "";
+                                position: absolute;
+                                left: 0;
+                                top: 0;
+                                right: 0;
+                                bottom: 0;
+                                display: block;
+                                z-index: -1;
+                            }
+                        }
+                    }
+                }
+            }
+
+            & > .#{$module}-row-cell {
+                display: table-cell;
+                word-wrap: break-word;
+                word-break: break-all;
+                border-left: none;
+                border-right: none;
+                border-bottom: $border-table;
+                padding: $spacing-table_tbody_rowCell-padding;
+                box-sizing: border-box;
+                position: relative;
+                vertical-align: middle;
+
+                &.resizing {
+                    border-right: $border-table_resizer;
+                }
+            }
+            &.#{$module}-row {
+
+                &-expand {
+                    & > .#{$module}-row-cell {
+                        background-color: $color-table_row_expanded-bg-default;
+                    }
+                }
+            }
+
+            & > .#{$module}-cell-fixed {
+
+                &-left,
+                &-right {
+                    z-index: $z-table_fixed_column;;
+                    position: sticky;
+                    background-color: $color-table-bg-default;
+                }
+
+                &-left-last {
+                    border-right: $width-table_cell_fixed_left_last solid $color-table_shadow-border-default;
+                    box-shadow: #{$shadow-table_right};
+                }
+
+                &-right-first {
+                    border-left: $width-table_cell_fixed_right_first solid $color-table_shadow-border-default;
+                    box-shadow: #{$shadow-table_left};
+                }
+            }
+        }
+
+        & > .#{$module}-row-section {
+            display: table-row;
+
+            & > .#{$module}-row-cell {
+                background-color: $color-table_selection-bg-default;
+                border-bottom: $border-table;
+            }
+
+            & > .#{$module}-row-cell:not(.#{$module}-column-selection) {
+                padding: $spacing-table_tbody_rowSelection_rowCell_notSelection-paddingY $spacing-table_tbody_rowSelection_rowCell_notSelection-paddingX;
+            }
+
+            .#{$module}-section-inner {
+                display: inline-flex;
+                align-items: center;
+            }
+        }
+    }
+
+    &-virtualized .#{$module}-tbody {
+        display: block;
+        & > .#{$module}-row {
+            display: flex;
+            & > .#{$module}-row-cell {
+                word-wrap: unset;
+                word-break: unset;
+                white-space: nowrap;
+                display: inline-flex;
+                align-items: center;
+                overflow: hidden;
+            }
+
+            &-section {
+                & > .#{$module}-row-cell {
+                    padding-top: $spacing-table-paddingY;
+                    padding-bottom: $spacing-table-paddingY;
+                    display: flex;
+                }
+            }
+
+            &-expand {
+                & > .#{$module}-row-cell {
+                    padding: 0;
+                    overflow: unset;
+                }
+            }
+        }
+    }
+
+    &-footer {
+        background-color: $color-table_footer-bg-default;
+        padding: $spacing-table_footer-padding;
+        margin: 0;
+        position: relative;
+    }
+
+    .#{$module}-selection {
+
+        &-wrap {
+            // inline-flex vertical-align baseline 会导致父元素高度异常
+            display: inline-flex;
+            vertical-align: bottom; 
+        }
+
+        &-disabled {
+            cursor: not-allowed;
+
+            & > .#{$prefix}-checkbox {
+                pointer-events: none;
+            }
+        }
+    }
+
+    .#{$module}-column {
+
+        &-hidden {
+            display: none;
+        }
+
+        &-selection {
+            text-align: center;
+            // width: $width-table_column_selection;
+
+            .#{$prefix}-checkbox-inner-display {
+                .#{$prefix}-icon {
+                    left: 0;
+                    top: 0;
+                }
+            }
+        }
+
+        &-expand {
+            .#{$module}-expand-icon {
+                transform: translateY(2px);
+
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+
+        &-sorter {
+            margin-left: $spacing-table_column_sorter-marginLeft;
+            display: inline-block;
+            width: $width-table_column_sorter-icon;
+            height: $height-table_column_sorter-icon;
+            cursor: pointer;
+            vertical-align: middle;
+            text-align: center;
+
+            &-up,
+            &-down {
+                height: 0;
+                display: block;
+                color: $color-table_sorter-text-default;
+
+                &:hover .anticon {
+                    color: $color-table_sorter-text-hover;
+                }
+
+                svg {
+                    width: $width-table_column_sorter-icon;
+                    height: $height-table_column_sorter-icon;
+                }
+
+                &.on {
+                    .#{$prefix}-icon-caretup,
+                    .#{$prefix}-icon-caretdown {
+                        color: $color-table_sorter_on-text-default;
+                    }
+                }
+            }
+        }
+
+        &-filter {
+            margin-left: $spacing-table_column_filter-marginLeft;
+            display: inline-flex;
+            cursor: pointer;
+            color: $color-table_filter-text-default;
+            vertical-align: middle;
+
+            svg {
+                width: $width-table_column_filter-icon;
+                height: $height-table_column_filter-icon;
+            }
+
+            &.on {
+                color: $color-table_filter_on-text-default;
+            }
+        }
+    }
+
+    &-bordered {
+        .#{$module}-title {
+            padding-left: $spacing-table_bordered_titler-paddingLeft;
+            padding-right: $spacing-table_bordered_titler-paddingRight;
+            border-top: $border-table;
+            border-right: $border-table;
+            border-left: $border-table;
+        }
+
+        .#{$module}-container {
+            border: $border-table;
+            border-right: 0;
+            border-bottom: 0;
+        }
+
+        .#{$module}-header {
+
+            &::-webkit-scrollbar {
+                border-right: $border-table;
+            }
+        }
+
+        .#{$module}-footer {
+            border-left: $border-table;
+            border-right: $border-table;
+            border-bottom: $border-table;
+        }
+
+        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
+
+            .react-resizable-handle {
+                background-color: transparent;
+            }
+        }
+
+        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
+        .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
+            border-right: $border-table;
+        }
+
+        .#{$module}-placeholder {
+            border-right: $border-table;
+        }
+    }
+
+    &-placeholder {
+        position: relative;
+        z-index: 1;
+        padding: #{$spacing-table-paddingY} #{$spacing-table-paddingX};
+        color: $color-table_disabled-bg-default;
+        font-size: #{$font-table_base-fontSize};
+        text-align: center;
+        background: $color-table_pl-bg-default;
+        border-bottom: $border-table;
+        border-radius: 0 0 #{$radius-table_base} #{$radius-table_base};
+    }
+
+    &-fixed {
+        table-layout: fixed;
+        min-width: 100%;
+
+        & > .#{$module}-tbody {
+            & > .#{$module}-row-expand > .#{$module}-row-cell > .#{$module}-expand-inner,
+            & > .#{$module}-row-section > .#{$module}-row-cell > .#{$module}-section-inner {
+                position: sticky;
+                overflow: auto;
+                left: 0;
+                margin-left: -$spacing-table_expand_row-paddingLeft;
+                margin-right: -$spacing-table_expand_row-paddingRight;
+                padding-left: $spacing-table_expand_row-paddingLeft;
+                padding-right: $spacing-table_expand_row-paddingRight;
+                height: 100%;
+                display: flex;
+                align-items: center;
+            }
+        }
+
+        // when header is fixed, table should use `table-layout: fixed` to avoid align bug
+        &-header {
+
+            table {
+                table-layout: fixed;
+            }
+        }
+    }
+
+    &-scroll {
+
+        &-position {
+
+            &-left {
+                .#{$module}-tbody,
+                .#{$module}-thead {
+                    & > .#{$module}-row > .#{$module}-cell-fixed-left-last {
+                        box-shadow: none;
+                    }
+                }
+            }
+
+            &-right {
+                .#{$module}-tbody,
+                .#{$module}-thead {
+                    & > .#{$module}-row > .#{$module}-cell-fixed-right-first {
+                        box-shadow: none;
+                    }
+                }
+            }
+        }
+    }
+
+    &-pagination-outer {
+        color: $color-table_page-text-default;
+        min-height: $height-table_pagination_outer_min;
+    }
+}
+
+.#{$module}-expand-icon {
+    color: $color-table_expanded_icon-default;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    background: $color-table_expanded-bg-default;
+    position: relative;
+    margin-right: $spacing-table_expand_icon-marginRight;
+
+    &-cell {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/table/tableRowFoundation.d.ts

@@ -0,0 +1,14 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { BaseRowKeyType } from './foundation';
+export interface TableRowAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    notifyClick: (rowKey: BaseRowKeyType, e: any, expand: boolean) => void;
+    notifyDoubleClick: (record: Record<string, any>, e: any) => void;
+    notifyMouseEnter: (record: Record<string, any>, e: any) => void;
+    notifyMouseLeave: (record: Record<string, any>, e: any) => void;
+}
+export default class TableRowFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TableRowAdapter<P, S>, P, S> {
+    handleClick(e: any): void;
+    handleDoubleClick(e: any): void;
+    handleMouseEnter(e: any): void;
+    handleMouseLeave(e: any): void;
+}

package/lib/cjs/table/tableRowFoundation.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+// eslint-disable-next-line max-len
+class TableRowFoundation extends _foundation.default {
+  handleClick(e) {
+    const {
+      expanded,
+      rowKey
+    } = this.getProps();
+
+    this._adapter.notifyClick(rowKey, e, expanded);
+  }
+
+  handleDoubleClick(e) {
+    this._adapter.notifyDoubleClick(this.getProp('record'), e);
+  }
+
+  handleMouseEnter(e) {
+    const record = this.getProp('record');
+
+    this._adapter.notifyMouseEnter(record, e);
+  }
+
+  handleMouseLeave(e) {
+    const record = this.getProp('record');
+
+    this._adapter.notifyMouseLeave(record, e);
+  }
+
+}
+
+exports.default = TableRowFoundation;

package/lib/cjs/table/tableSelectionCellFoundation.d.ts

@@ -0,0 +1,13 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface TableSelectionCellEvent {
+    [x: string]: any;
+    target?: {
+        checked?: boolean;
+    };
+}
+export interface TableSelectionCellAdapter extends DefaultAdapter {
+    notifyChange: (value: any, e: TableSelectionCellEvent) => void;
+}
+export default class TableSelectionCellFoundation extends BaseFoundation<TableSelectionCellAdapter> {
+    handleChange(e: TableSelectionCellEvent): void;
+}

package/lib/cjs/table/tableSelectionCellFoundation.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+class TableSelectionCellFoundation extends _foundation.default {
+  handleChange(e) {
+    const value = e.target.checked;
+
+    this._adapter.notifyChange(value, e);
+  }
+
+}
+
+exports.default = TableSelectionCellFoundation;