@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/upload/upload.scss

@@ -0,0 +1,522 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-upload;
+
+.#{$module} {
+    display: flex;
+    flex-wrap: wrap;
+
+    &-disabled {
+        cursor: not-allowed;
+
+        .#{$module}-file-card {
+            cursor: not-allowed;
+
+            &-close {
+                cursor: not-allowed;
+            }
+        }
+
+        .#{$module}-drag-area {
+            border: none;
+            cursor: not-allowed;
+
+            &:hover {
+                background-color: $color-upload_drag_area-bg;
+            }
+
+            &-main-text,
+            &-sub-text,
+            &-icon {
+                cursor: not-allowed;
+                color: $color-upload_drag_area_disabled-text;
+            }
+        }
+    }
+
+    &-hidden-input {
+        display: none;
+    }
+
+    &-hidden-input-replace {
+        display: none;
+    }
+
+    &-add {
+        display: flex;
+        align-items: center;
+    }
+
+    &[x-prompt-pos="right"] {
+        .#{$module}-add {
+            display: inline-flex;
+        }
+
+        .#{$module}-prompt {
+            display: inline-flex;
+        }
+    }
+
+    &[x-prompt-pos="bottom"] {
+        .#{$module}-add {
+            display: flex;
+        }
+
+        .#{$module}-prompt {
+            display: flex;
+            flex-basis: 100%;
+        }
+
+        .#{$module}-file-list {
+            flex-basis: 100%;
+        }
+    }
+
+    &[x-prompt-pos="left"] {
+        .#{$module}-add {
+            display: inline-flex;
+            order: 2;
+        }
+
+        .#{$module}-prompt {
+            display: inline-flex;
+            order: 1;
+        }
+
+        .#{$module}-file-list {
+            order: 2;
+        }
+    }
+
+    &-file-list {
+        flex-basis: 100%;
+        flex-shrink: 0;
+        display: block;
+        margin-top: $spacing-tight;
+        margin-bottom: $spacing-tight;
+
+        &-main {
+            display: flex;
+            flex-wrap: wrap;
+            flex-shrink: 0;
+
+            p {
+                @include ver-center;
+            }
+        }
+
+        &-title {
+            @include font-size-small;
+            color: $color-upload_assist-text;
+
+            &-choosen {
+                margin-right: $spacing-upload_title_choosen-marginRight;
+            }
+
+            &-clear {
+                cursor: pointer;
+                color: $color-upload_clear-text;
+            }
+
+            margin-bottom: $spacing-upload_title-marginBottom;
+        }
+    }
+
+    &-file-card {
+        // border: 1px solid $color-upload-border;
+        border-radius: $radius-upload_file_card;
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-between;
+        height: $height-upload_file_card;
+        width: $width-upload_file_card;
+        margin-right: $spacing-tight;
+        margin-bottom: $spacing-tight;
+        background-color: $color-upload_card-bg;
+        cursor: pointer;
+
+        &:hover {
+            background-color: $color-upload_card-bg-hover;
+        }
+
+        a {
+            text-decoration: none;
+            // color: inherit;
+        }
+
+        &-preview {
+            height: $height-upload_file_card_preview;
+            width: $width-upload_file_card_preview;
+            color: $color-upload_preview-icon;
+            margin: $spacing-upload_file_card_preview-margin;
+            @include all-center;
+            border-radius: $radius-upload_file_card_preview;
+            flex-shrink: 0;
+
+            img {
+                width: $width-upload_file_card_preview_img;
+                height: $width-upload_file_card_preview_img;
+                object-fit: cover;
+            }
+        }
+
+        &-preview-placeholder {
+            background-color: $color-upload_file_card_preview_placeholder-bg;
+            color: $color-upload_file_card_preview_placeholder-text;
+        }
+
+        &-show-pointer {
+            cursor: pointer;
+        }
+
+        &-info {
+            display: flex;
+            align-items: center;
+
+            &-main {
+                display: flex;
+                flex-wrap: wrap;
+                flex: 1;
+
+                &-text {
+                    @include ver-center;
+                    flex-basis: 100%;
+                }
+
+                &-control {
+                    display: flex;
+                }
+            }
+
+            &-name {
+                // width: $width-upload_file_card_info_name;
+                width: 0;
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                display: inline-block;
+                @include font-size-regular;
+                font-weight: $font-upload_file_card_info_name-fontWeight;
+                color: $color-upload-text;
+            }
+
+            &-size {
+                @include font-size-small;
+                font-weight: $font-upload_file_card_info_size-fontWeight;
+                margin-left: $spacing-upload_file_card_info_size-marginLeft;
+                color: $color-upload_assist-text;
+                margin-top: 1px;
+            }
+
+            &-replace {
+                display: inline-flex;
+                margin-left: $spacing-tight;
+                color: var(--semi-color-text-2);
+            }
+
+            &-validate-message {
+                @include font-size-small;
+                @include ver-center;
+                color: $color-upload-text;
+            }
+
+            &-retry {
+                @include font-size-small;
+                color: $color-upload_retry-text;
+                cursor: pointer;
+                margin-left: $spacing-upload_file_card_info_retry-marginLeft;
+            }
+
+            .#{$prefix}-progress {
+                flex-basis: 100%;
+                margin-top: $spacing-upload_file_card_info_progress-marginTop;
+            }
+        }
+
+        &-close {
+            margin-left: $spacing-upload_file_card_close-marginLeft;
+            margin-right: $spacing-upload_file_card_close-marginRight;
+            flex-shrink: 0;
+        }
+
+        &-replace {
+            margin-left: $spacing-tight;
+            width: 24px;
+            flex-shrink: 0;
+        }
+
+        &-icon {
+
+            &-loading,
+            &-error {
+                font-size: $width-upload_file_card-icon;
+                margin-right: $spacing-upload_file_card_icon-marginRight;
+            }
+
+            &-error {
+                position: relative;
+                top: $spacing-upload_picture_file_card_icon_error-top;
+            }
+
+            &-loading {
+                .#{$prefix}-spin-wrapper svg {
+                    height: $width-upload_file_card-icon;
+                    width: $width-upload_file_card-icon;
+                }
+            }
+        }
+
+        &-fail {
+            background-color: $color-upload_card_fail-bg;
+
+            &:hover {
+                background-color: $color-upload_card_fail-bg-hover;
+            }
+
+            .#{$module}-file-card {
+
+                &-info-validate-message {
+                    color: $color-upload_file_card_fail_info-text;
+                }
+            }
+        }
+    }
+
+    // listType = 'picture'
+
+    &-picture {
+        display: flex;
+
+        &[x-prompt-pos="bottom"] {
+            flex-direction: column;
+
+            .#{$module}-prompt {
+                order: 2;
+            }
+
+            .#{$module}-add {
+                order: 1;
+            }
+        }
+
+        &[x-prompt-pos="right"] {
+            .#{$module}-prompt {
+                order: 2;
+            }
+
+            .#{$module}-add {
+                order: 1;
+            }
+        }
+
+        &-add {
+            background-color: $color-upload_pic_add-bg;
+            height: $height-upload_file_pic_card;
+            width: $width-upload_file_pic_card;
+            box-sizing: border-box;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            border: $width-upload_picture_add-border dashed $color-upload-border;
+            color: $color-upload-icon;
+            border-radius: $radius-upload_picture_add;
+            order: 2;
+            cursor: pointer;
+
+            &:hover {
+                background-color: $color-upload_pic_add-bg-hover;
+            }
+
+            &:active {
+                background-color: $color-upload_pic_add-bg-active;
+            }
+        }
+
+        &-add-disabled {
+            cursor: not-allowed;
+
+            &:hover {
+                background-color: $color-upload_pic_add-bg;
+            }
+
+            &:active {
+                background-color: $color-upload_pic_add-bg;
+            }
+        }
+
+        &-file-list {
+            flex-basis: inherit;
+            margin-top: 0;
+            margin-bottom: 0;
+            // width: 100%;
+        }
+
+        &-file-card {
+            height: $height-upload_file_pic_card;
+            width: $width-upload_file_pic_card;
+            position: relative;
+            margin-right: $spacing-upload_picture_file_card-marginRight;
+            margin-bottom: $spacing-upload_picture_file_card-marginBottom;
+
+            img {
+                height: $width-upload_picture_file_card_img;
+                width: $width-upload_picture_file_card_img;
+                object-fit: cover;
+                border-radius: $radius-upload_picture_file_card_img;
+            }
+
+            &-close {
+                width: $width-upload_picture_file_card_close;
+                height: $width-upload_picture_file_card_close;
+                background-color: $color-upload_pic_remove-bg;
+                position: absolute;
+                top: $spacing-upload_picture_file_card_close-top;
+                right: $spacing-upload_picture_file_card_close-right;
+                @include all-center;
+                display: none;
+                border-radius: $radius-upload_picture_file_card_close;
+                color: white;
+                cursor: pointer;
+                transition: all 0s;
+            }
+
+            &:hover {
+                .#{$module}-picture-file-card-close {
+                    display: flex;
+                }
+
+                .#{$module}-picture-file-card-replace {
+                    visibility: visible;
+                }
+            }
+
+            .#{$prefix}-progress-circle {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+            &-retry {
+                background-color: $color-upload_file_card_retry-bg;
+                width: $width-upload_file_card_retry;
+                height: $width-upload_file_card_retry;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                color: $color-upload_file_card_retry-text;
+                border-radius: $radius-upload_file_card_retry;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+            }
+
+            &-icon-retry {
+                transform: scale(-1, 1);
+                font-size: $width-upload_file_card_retry-icon;
+            }
+
+            &-replace {
+                visibility: hidden;
+                display: inline-flex;
+                position: absolute;
+                cursor: pointer;
+                top: 50%;
+                left: 50%;
+                color: $color-upload_replace-text;
+                transform: translate3D(-50%, -50%, 0);
+            }
+
+            &-icon-loading,
+            &-icon-error {
+                position: absolute;
+                bottom: $spacing-upload_picture_file_card_loading_error-bottom;
+                right: $spacing-upload_picture_file_card_loading_error-right;
+                color: $color-upload_picture_file_card_loading_error-icon;
+            }
+
+            &-icon-loading {
+                font-size: $width-upload_picture_file_card_loading-icon;
+            }
+
+            &-show-pointer {
+                cursor: pointer;
+            }
+        }
+    }
+
+    &-drag-area {
+        border-radius: $radius-upload_drag_area;
+        border: $width-upload_drag_area-border dashed $color-upload-border;
+        width: 100%;
+        padding: $spacing-upload_drag_area-padding;
+        background-color: $color-upload_drag_area-bg;
+        @include all-center;
+        flex-direction: column;
+        cursor: pointer;
+
+        &:hover {
+            background-color: $color-upload_drag_area-bg-hover;
+            border-color: $color-upload_drag_area-border-hover;
+        }
+
+        &-custom {
+            border: none;
+            padding: 0;
+            background-color: inherit;
+
+            &:hover {
+                background-color: inherit;
+            }
+        }
+
+        &-legal {
+            background-color: $color-upload_drag_area-bg-hover;
+            border-color: $color-upload_drag_area-border-hover;
+
+            .#{$module}-drag-area-sub-text {
+                display: none;
+            }
+        }
+
+        &-icon {
+            color: $color-upload_drag_area_icon;
+        }
+
+        &-text {
+            text-align: center;
+        }
+
+        &-main-text {
+            cursor: pointer;
+            @include font-size-regular;
+            margin-bottom: $spacing-upload_drag_area_main_text-marginBottom;
+        }
+
+        &-sub-text {
+            cursor: pointer;
+            @include font-size-small;
+        }
+
+        &-tips {
+            @include font-size-small;
+            font-weight: $font-upload_drag_area_tips-fontWeight;
+
+            &-legal {
+                color: $color-upload_drag_area_tips-text;
+            }
+        }
+    }
+
+    &-validate-message {
+        flex-basis: 100%;
+        flex-shrink: 0;
+        display: block;
+        color: $color-upload_file_card_fail_info-text;
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/upload/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const byteKB = 1024;
+export declare const byteMB = 1048576;
+export declare function getFileSize(number: number): string;
+export declare function endsWith(str: string, suffix: string): boolean;
+export declare function loopFiles(item: FileSystemDirectoryEntry): Promise<Array<FileSystemEntry>>;
+export declare function mapFileTree(items: Array<DataTransferItem>): Promise<Array<File>>;

package/lib/cjs/upload/utils.js

@@ -0,0 +1,165 @@
+"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.byteMB = exports.byteKB = void 0;
+exports.endsWith = endsWith;
+exports.getFileSize = getFileSize;
+exports.loopFiles = loopFiles;
+exports.mapFileTree = mapFileTree;
+
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = _promise.default))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+const byteKB = 1024;
+exports.byteKB = byteKB;
+const byteMB = 1048576;
+exports.byteMB = byteMB;
+
+function getFileSize(number) {
+  if (number < byteKB) {
+    return "".concat((number / byteKB).toFixed(2), "KB");
+  } else if (number >= byteKB && number < byteMB) {
+    return "".concat((number / byteKB).toFixed(1), "KB");
+  } else if (number >= byteMB) {
+    return "".concat((number / byteMB).toFixed(1), "MB");
+  }
+
+  return undefined;
+}
+
+function endsWith(str, suffix) {
+  return (0, _indexOf.default)(str).call(str, suffix, str.length - suffix.length) !== -1;
+}
+
+function loopFiles(item) {
+  return __awaiter(this, void 0, void 0, function* () {
+    return new _promise.default((res, rej) => {
+      const dirReader = item.createReader();
+      let fileList = [];
+
+      function sequence() {
+        dirReader.readEntries(entries => {
+          const entryList = (0, _slice.default)(Array.prototype).apply(entries);
+          fileList = (0, _concat.default)(fileList).call(fileList, entryList); // Check if all the file has been viewed
+
+          const isFinished = !entryList.length;
+
+          if (isFinished) {
+            res(fileList);
+          } else {
+            sequence();
+          }
+        }, rej);
+      }
+
+      sequence();
+    });
+  });
+}
+
+function mapFileTree(items) {
+  return __awaiter(this, void 0, void 0, function* () {
+    const promises = [];
+
+    const _traverseFileTree = (item, path) => __awaiter(this, void 0, void 0, function* () {
+      path = path || ''; //@ts-ignore add path property into item
+
+      item.path = path;
+
+      if (item.isFile) {
+        promises.push(new _promise.default((res, rej) => {
+          item.file(file => {
+            if (item.fullPath && !file.webkitRelativePath) {
+              // This file is provided to the user based on the relative path of the drag and drop folder
+              // If you drag the Upload folder, the path of the internal file may be Upload/File/a.png, etc
+              (0, _defineProperties.default)(file, {
+                webkitRelativePath: {
+                  writable: true
+                }
+              }); //@ts-ignore add webkitRelativePath property into file
+
+              file.webkitRelativePath = item.fullPath.replace(/^\//, '');
+              (0, _defineProperties.default)(file, {
+                webkitRelativePath: {
+                  writable: false
+                }
+              });
+            }
+
+            res(file);
+          }, rej);
+        }));
+      } else if (item.isDirectory) {
+        const entries = yield loopFiles(item);
+
+        for (let index = 0; index < entries.length; index++) {
+          var _context;
+
+          const entry = entries[index];
+          yield _traverseFileTree(entry, (0, _concat.default)(_context = "".concat(path)).call(_context, item.name, "/"));
+        }
+      }
+    });
+
+    try {
+      const batches = (0, _map.default)(items).call(items, i => _traverseFileTree(i.webkitGetAsEntry())); // Perform asynchronous operations to add the required promises to the queue
+
+      yield _promise.default.all(batches); // Execution queue
+
+      const result = yield _promise.default.all(promises);
+      return result;
+    } catch (error) {
+      console.warn('Catched error while loop directory.');
+      console.error(error);
+      return [];
+    }
+  });
+}