@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/transfer/transfer.scss

@@ -0,0 +1,200 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-transfer;
+
+.#{$module} {
+    // max-height: 412px;
+    // min-height: 400px;
+    background-color: $color-transfer-bg;
+    border: $width-transfer-border solid $color-transfer-border;
+    border-radius: $radius-transfer;
+    min-width: $width-transfer-minWidth;
+    height: $height-transfer;
+    box-sizing: border-box;
+    display: flex;
+
+    &-disabled {
+        // background-color: $color-transfer_disabled-bg;
+        .#{$module}-header {
+            color: $color-transfer_disabled-text;
+            cursor: not-allowed;
+        }
+        .#{$module}-item {
+            color: $color-transfer_disabled-text;
+            cursor: not-allowed;
+
+            &:hover {
+                background-color: inherit;
+                .#{$module}-item-close-icon {
+                    visibility: hidden;
+                }
+            }
+
+            &:active {
+                background-color: inherit;
+            }
+        }
+    }
+
+    &-custom-panel {
+        border: none;
+        min-width: inherit;
+        height: inherit;
+    }
+    
+    &-header {
+        @include font-size-small;
+        @include ver-center;
+        height: $height-transfer_header;
+        margin-top: $spacing-transfer_header-marginTop;
+        margin-right: $spacing-transfer_header-marginRight;
+        margin-bottom: $spacing-transfer_header-marginBottom;
+        margin-left: $spacing-transfer_header-marginLeft;
+        color: $color-transfer_header-text;
+
+        &-all {
+            font-weight: $font-transfer_header_all-fontWeight;
+            margin-left: $spacing-transfer_header_all-marginLeft;
+        }
+        .#{$prefix}-button {
+            @include font-size-small;
+        }
+    }
+
+    &-item {
+        min-height: $height-transfer_item-minHeight;
+        box-sizing: border-box;
+        padding-top: $spacing-transfer_item-paddingTop;
+        padding-right: $spacing-transfer_item-paddingRight;
+        padding-bottom: $spacing-transfer_item-paddingBottom;
+        padding-left: $spacing-transfer_item-paddingLeft;
+        user-select: none;
+        @include font-size-regular;
+        @include ver-center;
+        justify-content: space-between;
+        flex-wrap: nowrap;
+        color: $color-transfer_item-text;
+        cursor: pointer;
+
+        &:hover {
+            background-color: $color-transfer_item-bg-hover;
+        }
+
+        &:active {
+            background-color: $color-transfer_item-bg-active;
+        }
+
+        &-disabled {
+            cursor: not-allowed;
+
+            &:hover {
+                background-color: inherit;
+            }
+        }
+
+        .#{$module}-item-close-icon {
+            width: $width-transfer_item_close-icon;
+            height: $width-transfer_item_close-icon;
+            font-size: $width-transfer_item_close-icon;
+            cursor: pointer;
+            visibility: hidden;
+            color: $color-transfer_close_icon-icon;
+        }
+    }
+
+    &-left {
+        width: $width-transfer_left;
+        border-right: $width-transfer_left-border solid $color-transfer-border;
+        display: flex;
+        flex-direction: column;
+        // padding: $spacing-base-tight;
+
+        &-list {
+            overflow: auto;
+            flex-grow: 1;
+        }
+
+        &-empty {
+            height: $height-transfer_left_empty;
+        }
+        .#{$prefix}-spin {
+            width: 100%;
+            flex-grow: 1;
+        }
+    }
+
+    &-right {
+        width: $width-transfer_right;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        // padding: $spacing-base-tight;
+
+        &-header {
+            margin-top: $spacing-transfer_right_header-marginTop;
+            margin-bottom: $spacing-transfer_right_header-marginBottom;
+            height: $height-transfer_right_header;
+            flex-shrink: 0;
+        }
+
+        &-list {
+            overflow: auto;
+            // max-height: 360px;
+            flex-grow: 1;
+        }
+
+        &-item {
+            color: $color-transfer_selected_item-text;
+            cursor: auto;
+
+            &:hover {
+                .#{$module}-item-close-icon {
+                    flex-shrink: 0;
+                    visibility: visible;
+                    cursor: pointer;
+                }
+                .#{$module}-item-close-icon.#{$module}-item-close-icon-disabled {
+                    visibility: hidden;
+                }
+            }
+            &-text {
+                flex: 1;
+                word-break: break-all;
+            }
+
+            &-drag-handler {
+                margin-right: $spacing-transfer_right_item_drag_handler-marginRight;
+                flex-shrink: 0;
+            }
+        }
+
+        &-empty {
+            position: absolute;
+            height: $height-transfer_right_empty;
+        }
+    }
+
+    &-empty {
+        width: $width-transfer_empty;
+        @include all-center;
+        @include font-size-small;
+        color: $color-transfer_empty-text;
+    }
+
+    &-filter {
+        margin-top: $spacing-transfer_filter-marginTop;
+        margin-right: $spacing-transfer_filter-marginRight;
+        margin-bottom: $spacing-transfer_filter-marginBottom;
+        margin-left: $spacing-transfer_filter-marginLeft;
+    }
+
+    &-group-title {
+        color: $color-transfer_group_title-text;
+        padding-left: $spacing-transfer_group_title-paddingLeft;
+        @include font-size-small;
+        height: $height-transfer_group_title;
+        @include ver-center;
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/transfer/transferUtlls.d.ts

@@ -0,0 +1,4 @@
+export declare function _generateGroupedData(dataSource: any[]): any[];
+export declare function _generateTreeData(dataSource: any[]): any[];
+export declare function _generateDataByType(dataSource: any[], type: string): any[];
+export declare function _generateSelectedItems(value: any[], data: any[]): Map<any, any>;

package/lib/cjs/transfer/transferUtlls.js

@@ -0,0 +1,128 @@
+"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._generateDataByType = _generateDataByType;
+exports._generateGroupedData = _generateGroupedData;
+exports._generateSelectedItems = _generateSelectedItems;
+exports._generateTreeData = _generateTreeData;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _reverse = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reverse"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+
+var _omit2 = _interopRequireDefault(require("lodash/omit"));
+
+var _constants = require("./constants");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+function _generateGroupedData(dataSource) {
+  const newData = [];
+
+  for (const group of dataSource) {
+    var _context;
+
+    (0, _forEach.default)(_context = group.children).call(_context, item => {
+      const {
+        children
+      } = group,
+            rest = __rest(group, ["children"]);
+
+      newData.push((0, _assign.default)((0, _assign.default)({}, item), {
+        _parent: rest
+      }));
+    });
+  }
+
+  return newData;
+} // DFS
+
+
+function _generateTreeData(dataSource) {
+  var _context2;
+
+  const newData = [];
+  const stack = (0, _reverse.default)(_context2 = [...dataSource]).call(_context2);
+
+  while (stack.length) {
+    const current = stack.pop();
+    current.path = current.path || [(0, _omit2.default)(current, ['children'])];
+
+    if (current.children && (0, _isArray.default)(current.children)) {
+      const nodes = current.children;
+
+      for (let i = nodes.length - 1; i >= 0; i--) {
+        var _context3, _context4;
+
+        const child = (0, _assign.default)({}, nodes[i]);
+        child.path = (0, _concat.default)(_context3 = (0, _concat.default)(_context4 = []).call(_context4, current.path)).call(_context3, (0, _omit2.default)(child, ['children']));
+        stack.push(child);
+      }
+    } else {
+      current.isLeaf = true;
+    }
+
+    newData.push((0, _omit2.default)(current, ['children']));
+  }
+
+  return newData;
+}
+
+function _generateDataByType(dataSource, type) {
+  const newData = (0, _slice.default)(dataSource).call(dataSource) || [];
+
+  if (type === _constants.strings.TYPE_GROUP_LIST) {
+    return _generateGroupedData(newData);
+  }
+
+  if (type === _constants.strings.TYPE_TREE_TO_LIST) {
+    return _generateTreeData(newData);
+  }
+
+  return newData;
+}
+
+function _generateSelectedItems(value, data) {
+  const selectedItems = new _map.default();
+  (0, _forEach.default)(value).call(value, val => {
+    const index = (0, _findIndex.default)(data).call(data, option => option.value === val);
+
+    if (index !== -1) {
+      const option = data[index];
+      selectedItems.set(option.key, option);
+    }
+  });
+  return selectedItems;
+}

package/lib/cjs/transfer/variables.scss

@@ -0,0 +1,55 @@
+// Color
+$color-transfer-bg: var(--semi-color-bg-1); // 穿梭框背景颜色 - 默认
+$color-transfer_disabled-bg: var(--semi-color-disabled-fill); // 穿梭框背景颜色 - 禁用
+$color-transfer-border: var(--semi-color-border); // 穿梭框描边颜色 - 默认
+$color-transfer_header-text: var(--semi-color-text-2); // 穿梭框 header 文字颜色
+$color-transfer_empty-text: var(--semi-color-text-2); // 穿梭框空状态文字颜色
+$color-transfer_group_title-text: var(--semi-color-text-2); // 穿梭框分组标题文字颜色
+$color-transfer_disabled-text: var(--semi-color-disabled-text); // 穿梭框禁用文本文字颜色
+$color-transfer_close_icon-icon: var(--semi-color-text-2); // 穿梭框关闭按钮颜色
+$color-transfer_item-text: var(--semi-color-text-1); // 穿梭框常规文字颜色
+$color-transfer_selected_item-text: var(--semi-color-text-0); // 穿梭框选中条目文字颜色
+$color-transfer_item-bg-default: var(--semi-color-white); // 穿梭框条目背景色 - 默认
+$color-transfer_item-bg-hover: var(--semi-color-fill-0); // 穿梭框条目背景色 - 悬浮
+$color-transfer_item-bg-active: var(--semi-color-fill-1); // 穿梭框条目背景色 - 按下
+
+// Width/Height
+$width-transfer-border: 1px; // 穿梭框描边宽度
+$width-transfer-minWidth: 402px; // 穿梭框整体最小宽度
+$height-transfer: 400px; // 穿梭框高度
+$height-transfer_header: 24px; // 穿梭框 header 高度
+$height-transfer_item-minHeight: 36px; // 穿梭框条目最小高度
+$width-transfer_item_close-icon: $width-icon-small; // 穿梭框选中条目删除按钮宽度
+$width-transfer_left: 50%; // 穿梭框左侧面板宽度
+$width-transfer_right: 50%; // 穿梭框左侧面板宽度
+$height-transfer_left_empty: 36px; // 穿梭框空状态高度
+$width-transfer_left-border: $border-thickness-control; // 穿梭框双侧面板分割线宽度
+$height-transfer_right_header: 32px; // 穿梭框 header 高度
+$height-transfer_right_empty: 100%; // 穿梭框右侧空状态宽度
+$width-transfer_empty: 100%; // 穿梭框整体空状态宽度
+$height-transfer_group_title: 28px; // 穿梭框分组标题高度
+
+// Spacing
+$spacing-transfer_header-marginTop: 12px; // 穿梭框 header 顶部外边距
+$spacing-transfer_header-marginRight: 12px; // 穿梭框 header 右侧外边距
+$spacing-transfer_header-marginBottom: 8px; // 穿梭框 header 底部外边距
+$spacing-transfer_header-marginLeft: 12px; // 穿梭框 header 左侧外边距
+$spacing-transfer_header_all-marginLeft: $spacing-base; // 穿梭框全选按钮左侧外边距
+$spacing-transfer_item-paddingTop: $spacing-tight; // 穿梭框条目顶部内边距
+$spacing-transfer_item-paddingRight: 9px; // 穿梭框条目右侧内边距
+$spacing-transfer_item-paddingBottom: $spacing-tight; // 穿梭框条目底部内边距
+$spacing-transfer_item-paddingLeft: $spacing-base-tight; // 穿梭框条目左侧内边距
+$spacing-transfer_right_header-marginTop: $spacing-base-tight; // 穿梭框右侧面板 header 顶部外边距
+$spacing-transfer_right_header-marginBottom: 0; // 穿梭框右侧面板 header 底部外边距
+$spacing-transfer_right_item_drag_handler-marginRight: 4px; // 穿梭框拖动图标右侧外边距
+$spacing-transfer_filter-marginTop: 12px; // 穿梭框搜索顶部外边距
+$spacing-transfer_filter-marginRight: 12px; // 穿梭框搜索右侧外边距
+$spacing-transfer_filter-marginBottom: 0; // 穿梭框搜索底部外边距
+$spacing-transfer_filter-marginLeft: 12px; // 穿梭框搜索左侧外边距
+$spacing-transfer_group_title-paddingLeft: $spacing-base-tight; // 穿梭框分组标题左侧内边距
+
+// Radius
+$radius-transfer: var(--semi-border-radius-medium); // 穿梭框圆角
+
+// Font
+$font-transfer_header_all-fontWeight: 600; // 穿梭框字重

package/lib/cjs/tree/constants.d.ts

@@ -0,0 +1,9 @@
+declare const cssClasses: {
+    PREFIX: string;
+    PREFIX_OPTION: string;
+};
+declare const strings: {
+    EXPAND_ACTION: (string | boolean)[];
+};
+declare const numbers: {};
+export { cssClasses, strings, numbers };

package/lib/cjs/tree/constants.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.numbers = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-tree"),
+  PREFIX_OPTION: "".concat(_constants.BASE_CLASS_PREFIX, "-tree-option")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  EXPAND_ACTION: [false, 'click', 'doubleClick']
+};
+exports.strings = strings;
+const numbers = {};
+exports.numbers = numbers;