dtable-ui-component 7.0.1-beta.5 → 7.0.1-beta.btn2

package/lib/utils/url.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalURL = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.isBase64 = exports.isAIUrl = exports.imageCheck = exports.getValidFileImageUrls = exports.getImageThumbnailUrl = exports.getFileThumbnailInfo = exports.getFileSuffix = exports.getFileName = exports.getFileIconUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = exports.checkImgExists = void 0;
+exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalURL = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.isBase64 = exports.isAIUrl = exports.imageCheck = exports.getValidFileImageUrls = exports.getFileThumbnailInfo = exports.getFileSuffix = exports.getFileName = exports.getFileIconUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = exports.checkImgExists = void 0;
+var _dtableUtils = require("dtable-utils");
 var _file = require("../constants/file");
 const isTargetUrl = (target, url) => {
   if (!url || typeof url !== 'string') return false;
@@ -95,32 +96,6 @@ const generateCurrentBaseImageUrl = _ref2 => {
   return "".concat(validServer, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl);
 };
 exports.generateCurrentBaseImageUrl = generateCurrentBaseImageUrl;
-const getImageThumbnailUrl = function (url) {
-  let _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    server = _ref3.server,
-    dtableUuid = _ref3.dtableUuid,
-    workspaceID = _ref3.workspaceID,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? 256 : _ref3$size;
-  if (!url || typeof url !== 'string') return '';
-  if (server && dtableUuid && isCustomAssetUrl(url)) {
-    const assetUuid = url.slice(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
-    return server + '/dtable/' + dtableUuid + '/custom-asset-thumbnail/' + assetUuid + '?size=' + size;
-  }
-  if (isAIUrl(url) || checkSVGImage(url) || !isInternalImg(url) || isBase64(url)) return url;
-  if (server && workspaceID && dtableUuid && isDigitalSignsUrl(url)) {
-    return generateCurrentBaseImageThumbnailUrl({
-      server,
-      workspaceID,
-      dtableUuid,
-      size,
-      partUrl: url
-    });
-  }
-  if (url.includes('/thumbnail/workspace')) return url;
-  return url.replace('/workspace', '/thumbnail/workspace') + '?size=' + size;
-};
-exports.getImageThumbnailUrl = getImageThumbnailUrl;
 const getFileName = url => {
   if (!url) return null;
   let validUrl = url;
@@ -145,9 +120,9 @@ const imageCheck = filename => {
 };
 exports.imageCheck = imageCheck;
 const isInternalURL = function (url) {
-  let _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref4$server = _ref4.server,
-    server = _ref4$server === void 0 ? '' : _ref4$server;
+  let _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref3$server = _ref3.server,
+    server = _ref3$server === void 0 ? '' : _ref3$server;
   if (!url || typeof url !== 'string') return false;
   return server && url.indexOf(server) > -1;
 };
@@ -182,10 +157,10 @@ const getFileIconUrl = (filename, direntType) => {
 };
 exports.getFileIconUrl = getFileIconUrl;
 const getFileThumbnailInfo = function (file) {
-  let _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    server = _ref5.server,
-    dtableUuid = _ref5.dtableUuid,
-    workspaceID = _ref5.workspaceID;
+  let _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    server = _ref4.server,
+    dtableUuid = _ref4.dtableUuid,
+    workspaceID = _ref4.workspaceID;
   const defaultIcon = _file.FILEEXT_ICON_MAP['default'];
   const defaultIconUrl = _file.FILEEXT_ICON_URL_MAP[defaultIcon];
   if (!file || !file.name) return {
@@ -195,7 +170,7 @@ const getFileThumbnailInfo = function (file) {
   const isImage = imageCheck(file.name);
   if (isImage && server) return {
     isImage,
-    fileIconUrl: getImageThumbnailUrl(file.url, {
+    fileIconUrl: (0, _dtableUtils.getImageThumbnailUrl)(file.url, {
       server,
       dtableUuid,
       workspaceID

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "7.0.1-beta.5",
+  "version": "7.0.1-beta.btn2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",
@@ -8,7 +8,7 @@
     "@seafile/seafile-editor": "^3.0.34",
     "classnames": "~2.5.*",
     "dayjs": "1.10.7",
-    "dtable-utils": "~5.0.27",
+    "dtable-utils": "~5.0.32",
     "is-hotkey": "0.2.0",
     "rc-checkbox": "3.5.0",
     "react-color": "2.19.3",

package/lib/DTableCustomizeSearchInput/index.css

@@ -1,75 +0,0 @@
-.seatable-search-input {
-  width: 100%;
-  padding: 6px 10px;
-  min-width: 170px;
-  position: relative;
-  padding: 0;
-  height: 32px;
-  border-bottom: 1px solid var(--bs-border-secondary-color);
-}
-
-.seatable-select-search {
-  border-bottom: 1px solid var(--bs-border-secondary-color);
-  height: 32px;
-}
-
-.select-search-control {
-  height: 100%;
-  border: none;
-  cursor: pointer;
-  display: block;
-  background-color: var(--bs-popover-bg);
-  font-weight: 400;
-  font-size: .875rem;
-  line-height: 1.6;
-  width: 100%;
-  padding: .375rem 1rem;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-
-.select-search-control:focus {
-  outline: none;
-  box-shadow: none;
-  border: none;
-  cursor: pointer;
-  height: 100%;
-}
-
-.clear-icon-x {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 20px;
-  pointer-events: auto;
-  color: var(--bs-icon-color);
-  right: 13px;
-  top: 6px;
-  z-index: 1;
-  height: 20px;
-  width: 20px;
-  cursor: pointer;
-  border-radius: 3px;
-}
-
-.clear-icon-x .multicolor-icon {
-  font-size: 12px;
-}
-
-.clear-icon-x:hover {
-  background-color: var(--bs-btn-background-hover);
-}
-
-.seatable-search-input .none-search-result {
-  height: 100px;
-  width: 100%;
-  padding: 10px;
-  color: var(--bs-icon-color);
-}
-
-.dtable-ui-user-select-popover .select-search-control,
-.dtable-popover .select-search-control {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}

package/lib/DTableCustomizeSearchInput/index.js

@@ -1,133 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
-require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
-class DTableCustomizeSearchInput extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.onCompositionStart = () => {
-      this.isInputtingChinese = true;
-    };
-    this.onChange = e => {
-      this.timer && clearTimeout(this.timer);
-      const _this$props = this.props,
-        onChange = _this$props.onChange,
-        _this$props$wait = _this$props.wait,
-        wait = _this$props$wait === void 0 ? 100 : _this$props$wait;
-      let text = e.target.value;
-      this.setState({
-        searchValue: text || ''
-      }, () => {
-        if (this.isInputtingChinese) return;
-        this.timer = setTimeout(() => {
-          onChange && onChange(this.state.searchValue.trim());
-        }, wait);
-      });
-    };
-    this.onCompositionEnd = e => {
-      this.isInputtingChinese = false;
-      this.onChange(e);
-    };
-    this.clearSearch = e => {
-      e && e.stopPropagation && e.stopPropagation();
-      const clearValue = this.props.clearValue;
-      this.setState({
-        searchValue: ''
-      }, () => {
-        clearValue && clearValue();
-      });
-    };
-    this.setFocus = isSelectAllText => {
-      if (this.inputRef === document.activeElement) return;
-      this.inputRef.focus();
-      if (isSelectAllText) {
-        const txtLength = this.state.searchValue.length;
-        this.inputRef.setSelectionRange(0, txtLength);
-      }
-    };
-    this.renderClear = () => {
-      const _this$props2 = this.props,
-        isClearable = _this$props2.isClearable,
-        clearClassName = _this$props2.clearClassName;
-      const searchValue = this.state.searchValue;
-      if (!isClearable || !searchValue) return null;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: (0, _classnames.default)('clear-icon-x', clearClassName),
-        onClick: this.clearSearch,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
-          symbol: "close",
-          color: "var(--bs-icon-secondary-color)"
-        })
-      });
-    };
-    this.state = {
-      searchValue: props.value || ''
-    };
-    this.isInputtingChinese = false;
-    this.timer = null;
-    this.inputRef = null;
-  }
-  componentDidMount() {
-    if (this.props.autoFocus && this.inputRef && this.inputRef !== document.activeElement) {
-      setTimeout(() => {
-        this.inputRef.focus();
-      }, 0);
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.value !== this.props.value) {
-      this.setState({
-        searchValue: nextProps.value
-      });
-    }
-  }
-  componentWillUnmount() {
-    this.timer && clearTimeout(this.timer);
-    this.timer = null;
-    this.inputRef = null;
-  }
-  render() {
-    const _this$props3 = this.props,
-      placeholder = _this$props3.placeholder,
-      autoFocus = _this$props3.autoFocus,
-      className = _this$props3.className,
-      onKeyDown = _this$props3.onKeyDown,
-      _this$props3$disabled = _this$props3.disabled,
-      disabled = _this$props3$disabled === void 0 ? false : _this$props3$disabled,
-      _this$props3$style = _this$props3.style,
-      style = _this$props3$style === void 0 ? {} : _this$props3$style,
-      isClearable = _this$props3.isClearable,
-      _this$props3$isMultip = _this$props3.isMultiple,
-      isMultiple = _this$props3$isMultip === void 0 ? false : _this$props3$isMultip;
-    const searchValue = this.state.searchValue;
-    const inputWidth = isClearable && searchValue && !isMultiple ? 'calc(100% - 40px)' : '100%';
-    style.width = inputWidth;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-        type: "text",
-        name: "search-input",
-        value: searchValue,
-        className: (0, _classnames.default)('select-search-control', className),
-        onChange: this.onChange,
-        autoFocus: autoFocus,
-        placeholder: placeholder,
-        onCompositionStart: this.onCompositionStart,
-        onCompositionEnd: this.onCompositionEnd,
-        onKeyDown: onKeyDown,
-        disabled: disabled,
-        style: style,
-        ref: ref => this.inputRef = ref
-      }), this.renderClear()]
-    });
-  }
-}
-var _default = exports.default = DTableCustomizeSearchInput;

package/lib/DTableModalHeader/index.css

@@ -1,22 +0,0 @@
-.modal-header .dtable-modal-close.close {
-  padding: 14px 16px;
-  opacity: 1;
-  margin: -1rem -1rem -1rem auto;
-  background-color: transparent;
-  border: 0;
-  float: right;
-  font-size: 1.40625rem;
-  font-weight: 700;
-  line-height: 1;
-  color: #000;
-}
-
-.modal-header .dtable-modal-close.close:not(:disabled):not(.disabled):hover {
-  opacity: 1;
-}
-
-.modal-header .dtable-modal-close .dtable-modal-close-inner {
-  width: 28px;
-  height: 28px;
-  font-size: 22.5px; /* same with Seafile close icon */
-}

package/lib/DTableSelect/select-dropdown-indicator/index.css

@@ -1,16 +0,0 @@
-.select-dropdown-indicator {
-  position: absolute;
-  top: 50%;
-  right: 18px;
-  transform: translateY(-50%);
-  margin-left: -2px;
-}
-
-.select-dropdown-indicator svg {
-  width: 12px;
-  height: 12px;
-}
-
-.dis-multicolor-icon-down {
-  opacity: 0.65 !important;
-}

package/lib/DTableSelect/select-dropdown-indicator/index.js

@@ -1,24 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _DTableIcon = _interopRequireDefault(require("../../DTableIcon"));
-require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
-const SelectDropdownIndicator = _ref => {
-  let isDisabled = _ref.isDisabled;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    className: "select-dropdown-indicator d-flex align-items-center",
-    "aria-hidden": "true",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
-      symbol: "down",
-      color: "var(--bs-icon-color)",
-      className: isDisabled ? 'dis-multicolor-icon-down' : ''
-    })
-  });
-};
-var _default = exports.default = SelectDropdownIndicator;

package/lib/assets/icons/close.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718937171668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18368" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M489.6 444.8l294.4-294.4 67.2 67.2-294.4 294.4 294.4 294.4-67.2 67.2-294.4-294.4-272 272-67.2-67.2 272-272-272-272 67.2-67.2z" p-id="18369" fill="currentColor"></path></svg>

package/lib/assets/icons/down.svg

@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.27148 11.2718L6.09991 8.44336L15.9994 18.3429L25.8989 8.44336L28.7273 11.2718L15.9994 23.9997L3.27148 11.2718Z" fill="currentColor"/>
-</svg>