dtable-ui-component 5.3.5 → 5.3.7

package/lib/select-editor/pc-select-editor/index.js

@@ -0,0 +1,290 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _reactstrap = require("reactstrap");
+var _lang = require("../../lang");
+var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
+var _constants = require("../../constants");
+require("./index.css");
+class PCSelectEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onHotKey = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter) {
+        this.onEnter(e);
+      } else if (e.keyCode === _constants.KeyCodes.UpArrow) {
+        this.onUpArrow(e);
+      } else if (e.keyCode === _constants.KeyCodes.DownArrow) {
+        this.onDownArrow(e);
+      } else if (e.keyCode === _constants.KeyCodes.Tab) {
+        if (this.props.onPressTab) {
+          this.props.onPressTab(e);
+        }
+      } else if (e.keyCode === _constants.KeyCodes.Escape) {
+        if (this.props.isInModal) {
+          e.stopPropagation();
+          this.props.onClose && this.props.onClose();
+        }
+      }
+    };
+    this.onEnter = e => {
+      e.preventDefault();
+      let option;
+      const {
+        isSupportNewOption
+      } = this.props;
+      if (this.filteredOptions.length === 1) {
+        option = this.filteredOptions[0];
+      } else if (this.state.highlightIndex > -1) {
+        option = this.filteredOptions[this.state.highlightIndex];
+      }
+      if (option) {
+        this.onOptionItemToggle(option);
+      } else {
+        const {
+          searchValue
+        } = this.state;
+        if (searchValue && isSupportNewOption && this.filteredOptions.length === 0) {
+          e.stopPropagation();
+          this.onAddNewOption();
+        }
+      }
+    };
+    this.onUpArrow = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      let {
+        highlightIndex,
+        maxItemNum,
+        itemHeight
+      } = this.state;
+      if (highlightIndex > 0) {
+        this.setState({
+          highlightIndex: highlightIndex - 1
+        }, () => {
+          if (highlightIndex < this.filteredOptions.length - maxItemNum) {
+            this.container.scrollTop -= itemHeight;
+          }
+        });
+      }
+    };
+    this.onDownArrow = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      let {
+        highlightIndex,
+        maxItemNum,
+        itemHeight
+      } = this.state;
+      if (highlightIndex < this.filteredOptions.length - 1) {
+        this.setState({
+          highlightIndex: highlightIndex + 1
+        }, () => {
+          if (highlightIndex >= maxItemNum) {
+            this.container.scrollTop += itemHeight;
+          }
+        });
+      }
+    };
+    this.onValueChanged = searchValue => {
+      const {
+        searchValue: oldSearchVal
+      } = this.state;
+      const {
+        options
+      } = this.props;
+      if (oldSearchVal === searchValue) return;
+      this.setState({
+        searchValue
+      });
+      let val = searchValue.toLowerCase();
+      this.filteredOptions = val ? options.filter(item => item.name && item.name.toLowerCase().indexOf(val) > -1) : options;
+      this.setState({
+        highlightIndex: this.filteredOptions.length > 0 ? 0 : -1
+      });
+    };
+    this.onAddNewOption = () => {
+      let name = this.state.searchValue.trim();
+      this.props.onAddNewOption(name);
+    };
+    this.onOptionItemToggle = item => {
+      this.props.onCommit(item);
+    };
+    this.onMenuMouseEnter = index => {
+      this.setState({
+        highlightIndex: index
+      });
+    };
+    this.onMenuMouseLeave = index => {
+      this.timer = setTimeout(() => {
+        if (this.state.highlightIndex === index) {
+          this.setState({
+            highlightIndex: -1
+          });
+        }
+      }, 300);
+    };
+    this.getOptionStyle = option => {
+      const {
+        optionWidth
+      } = this.props;
+      const textColor = option.textColor || null;
+      return {
+        display: 'inline-block',
+        padding: '0px 10px',
+        height: '20px',
+        lineHeight: '20px',
+        borderRadius: '10px',
+        fontSize: '13px',
+        backgroundColor: option.color,
+        color: textColor,
+        maxWidth: optionWidth || 138
+      };
+    };
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.ChineseInputMethod || e.keyCode === _constants.KeyCodes.Enter || e.keyCode === _constants.KeyCodes.LeftArrow || e.keyCode === _constants.KeyCodes.RightArrow) {
+        e.stopPropagation();
+      }
+    };
+    this.getMaxItemNum = () => {
+      let selectContainerStyle = getComputedStyle(this.container, null);
+      let selectItemStyle = getComputedStyle(this.selectItem, null);
+      let maxSelectItemNum = Math.floor(parseInt(selectContainerStyle.maxHeight) / parseInt(selectItemStyle.height));
+      return maxSelectItemNum - 1;
+    };
+    this.state = {
+      searchValue: '',
+      highlightIndex: -1,
+      maxItemNum: 0,
+      itemHeight: 0
+    };
+    this.filteredOptions = props.options;
+    this.timer = null;
+    this.parent = null;
+    this.ref = null;
+    this.container = null;
+    this.selectItem = null;
+  }
+  componentDidMount() {
+    if (this.props.isInModal && this.parent) {
+      if (this.parent.getBoundingClientRect().top > 330) {
+        this.ref.style.top = '-200px';
+      }
+    }
+    const {
+      bottom
+    } = this.ref.getBoundingClientRect();
+    if (bottom > window.innerHeight) {
+      this.ref.style.top = parseInt(this.ref.style.top) - bottom + window.innerHeight + 'px';
+    }
+    if (this.container && this.selectItem) {
+      this.setState({
+        maxItemNum: this.getMaxItemNum(),
+        itemHeight: parseInt(getComputedStyle(this.selectItem, null).height)
+      });
+    }
+    document.addEventListener('keydown', this.onHotKey, true);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onHotKey, true);
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+  }
+  render() {
+    const {
+      isInModal,
+      className,
+      value,
+      column,
+      valueKey,
+      isSupportNewOption,
+      target
+    } = this.props;
+    const {
+      searchValue,
+      highlightIndex
+    } = this.state;
+
+    // maxWidth = single-selects-container's width - single-selects-container's padding-left and padding-right - single-select-container's padding-left - single-select-check-icon's width - The gap between the single-select-check-icon and single-select-name or scroll's width
+    // maxWidth = column.width > 200 ? column.width - 20 - 12 - 20 - 10 : 200 - 20 - 12 - 20 - 10
+    // maxWidth = column.width > 200 ? column.width - 62 : 200 - 62
+    let maxWidth = isInModal ? 250 : (column === null || column === void 0 ? void 0 : column.width) > 200 ? column.width - 62 : 138;
+    const dom = /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('dtable-ui-editor-container dtable-ui-select-editor-container', className),
+      ref: ref => this.ref = ref
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "select-options-search"
+    }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
+      placeholder: (0, _lang.getLocale)('Search_option'),
+      onKeyDown: this.onKeyDown,
+      onChange: this.onValueChanged,
+      autoFocus: true
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "select-options-container",
+      ref: ref => this.container = ref
+    }, this.filteredOptions.length > 0 && this.filteredOptions.map((option, index) => {
+      let optionStyle = this.getOptionStyle(option);
+      optionStyle = {
+        ...optionStyle,
+        maxWidth
+      };
+      let isSelected = value.includes(option[valueKey]);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: option.id,
+        className: "select-option-item",
+        ref: ref => this.selectItem = ref
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('select-option-item-container', {
+          'select-option-item-container-highlight': index === highlightIndex
+        }),
+        onMouseDown: this.onOptionItemToggle.bind(this, option),
+        onMouseEnter: this.onMenuMouseEnter.bind(this, index),
+        onMouseLeave: this.onMenuMouseLeave.bind(this, index)
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "option-info"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "option-name",
+        style: optionStyle,
+        title: option.name
+      }, option.name)), /*#__PURE__*/_react.default.createElement("div", {
+        className: "option-checked"
+      }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-check-mark"
+      }))));
+    }), this.filteredOptions.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-editor-no-search-result"
+    }, (0, _lang.getLocale)('No_options_available'))), isSupportNewOption && !!searchValue && /*#__PURE__*/_react.default.createElement("div", {
+      className: "select-options-add",
+      onClick: this.onAddNewOption
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-add-table"
+    }), /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Add_an_option'), ' ', searchValue)));
+    if (isInModal) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: ref => this.parent = ref
+      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Popover, {
+        placement: "bottom-start",
+        isOpen: true,
+        target: target,
+        hideArrow: true,
+        fade: false,
+        className: "dtable-ui dtable-ui-row-expand-select-editor-popover"
+      }, dom));
+    }
+    return dom;
+  }
+}
+PCSelectEditor.defaultProps = {
+  options: [],
+  value: [],
+  valueKey: 'id'
+};
+var _default = exports.default = PCSelectEditor;

package/lib/utils/cell-comparer.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isCellValueChanged = void 0;
+var _dtableUtils = require("dtable-utils");
+var _objectUtils = _interopRequireDefault(require("./object-utils"));
+const isCellValueChanged = (oldVal, newVal, columnType) => {
+  if (oldVal === newVal) {
+    return false;
+  }
+  if (oldVal === undefined || oldVal === null) {
+    if (columnType === _dtableUtils.CellType.GEOLOCATION && (0, _dtableUtils.isEmptyObject)(newVal)) {
+      return false;
+    }
+    if ((columnType === _dtableUtils.CellType.DATE || columnType === _dtableUtils.CellType.NUMBER || columnType === _dtableUtils.CellType.AUTO_NUMBER) && newVal === null) {
+      return false;
+    }
+    if (Array.isArray(newVal)) {
+      return newVal.length !== 0;
+    }
+    return newVal !== false && newVal !== '';
+  }
+  if (Array.isArray(oldVal) && Array.isArray(newVal)) {
+    // [{}].toString(): [object Object]
+    return JSON.stringify(oldVal) !== JSON.stringify(newVal);
+  }
+  if (typeof oldVal === 'object' && typeof newVal === 'object' && newVal !== null) {
+    return !_objectUtils.default.isSameObject(oldVal, newVal);
+  }
+  return oldVal !== newVal;
+};
+exports.isCellValueChanged = isCellValueChanged;

package/lib/utils/cell.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isValidPosition = exports.isLongTextValueExceedLimit = exports.checkValueConformityFormat = exports.checkNumberValidation = void 0;
+var _constants = require("../constants");
+var _utils = require("./utils");
+const checkValueConformityFormat = (columnData, value) => {
+  const {
+    format_specification_value,
+    format_check_type
+  } = columnData || {};
+  let isMatched = false;
+  if (format_check_type !== 'custom_format') {
+    const reg = _constants.FORMAT_REG_EXP_LIST[format_check_type];
+    isMatched = reg && reg.test((0, _utils.getTrimmedString)(value));
+  } else {
+    const reg = new RegExp(format_specification_value);
+    isMatched = reg.test((0, _utils.getTrimmedString)(value));
+  }
+  return isMatched;
+};
+exports.checkValueConformityFormat = checkValueConformityFormat;
+const checkNumberValidation = (columnData, value) => {
+  const {
+    format_max_value,
+    format_min_value
+  } = columnData || {};
+  const num = parseFloat(value);
+  if (isNaN(num) || !num && num !== 0) {
+    return false;
+  }
+  if ((format_max_value || format_max_value === 0) && num > format_max_value) {
+    return false;
+  }
+  if ((format_min_value || format_min_value === 0) && num < format_min_value) {
+    return false;
+  }
+  return true;
+};
+exports.checkNumberValidation = checkNumberValidation;
+const isLongTextValueExceedLimit = value => {
+  if (!value) return false;
+  if (typeof value === 'string') return value.length >= _constants.LONG_TEXT_LENGTH_LIMIT;
+  const {
+    text
+  } = value || {};
+  return text ? text.length >= _constants.LONG_TEXT_LENGTH_LIMIT : false;
+};
+exports.isLongTextValueExceedLimit = isLongTextValueExceedLimit;
+const isValidPosition = (lng, lat) => {
+  return (lng || lng === 0) && (lat || lat === 0);
+};
+exports.isValidPosition = isValidPosition;

package/lib/utils/column-utils.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isEnableCheckFormat = exports.getDateColumnFormat = void 0;
+var _dtableUtils = require("dtable-utils");
+const isEnableCheckFormat = column => {
+  if (!column) return false;
+  const {
+    data
+  } = column;
+  const {
+    enable_check_format
+  } = data || {};
+  if (enable_check_format) return true;
+  return false;
+};
+exports.isEnableCheckFormat = isEnableCheckFormat;
+const getDateColumnFormat = column => {
+  const format = column && column.data && column.data.format ? column.data.format : _dtableUtils.DEFAULT_DATE_FORMAT;
+  // Old Europe format is D/M/YYYY new format is DD/MM/YYYY
+  return format;
+};
+exports.getDateColumnFormat = getDateColumnFormat;

package/lib/utils/editor-utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isValidUrl = exports.initDateEditorLanguage = exports.getTrimmedString = exports.getSelectOptionItem = void 0;
+exports.initDateEditorLanguage = exports.getTrimmedString = exports.getSelectOptionItem = void 0;
 const zhCN = require('@seafile/seafile-calendar/lib/locale/zh_CN');
 const zhTW = require('@seafile/seafile-calendar/lib/locale/zh_TW');
 const enUS = require('@seafile/seafile-calendar/lib/locale/en_US');
@@ -63,11 +63,6 @@ const getSelectOptionItem = (options, optionId) => {
   return options.find(option => option.id === optionId);
 };
 exports.getSelectOptionItem = getSelectOptionItem;
-const isValidUrl = url => {
-  const reg = /^(([-a-zA-Z0-9+.]+):\/\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
-  return reg.test(url);
-};
-exports.isValidUrl = isValidUrl;
 const getTrimmedString = value => {
   return typeof value === 'string' ? value.trim() : '';
 };

package/lib/utils/get-event-transfer.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const HTML = 'text/html';
+const TEXT = 'text/plain';
+// const FILES = 'files';
+
+function getType(transfer, type) {
+  if (!transfer.types || !transfer.types.length) {
+    // COMPAT: In IE 11, there is no `types` field but `getData('Text')`
+    // is supported`. (2017/06/23)
+    return type === TEXT ? transfer.getData('Text') || null : null;
+  }
+  return transfer.getData(type);
+}
+function getFiles(transfer) {
+  let files;
+  try {
+    // Get and normalize files if they exist.
+    if (transfer.items && transfer.items.length) {
+      files = Array.from(transfer.items).map(item => item.kind === 'file' ? item.getAsFile() : null).filter(exists => exists);
+    } else if (transfer.files && transfer.files.length) {
+      files = Array.from(transfer.files);
+    }
+  } catch (err) {
+    if (transfer.files && transfer.files.length) {
+      files = Array.from(transfer.files);
+    }
+  }
+  return files;
+}
+function getEventTransfer(event) {
+  let html;
+  let text;
+  let files;
+  if (window.isMobile) {
+    if (window.dtableTransfer) {
+      text = window.dtableTransfer['TEXT'];
+    }
+  } else {
+    const transfer = event.dataTransfer || event.clipboardData;
+    html = getType(transfer, HTML);
+    text = getType(transfer, TEXT);
+    files = getFiles(transfer);
+  }
+
+  // paste html
+  if (html) {
+    return {
+      html,
+      text,
+      type: 'html'
+    };
+  }
+
+  // paste local picture or other files here
+  if (files && files.length) {
+    return {
+      'files': files,
+      type: 'files'
+    };
+  }
+
+  // paste text
+  if (text) {
+    return {
+      text,
+      type: 'text'
+    };
+  }
+}
+var _default = exports.default = getEventTransfer;

package/lib/utils/hotkey.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSpace = exports.isShiftModEnter = exports.isShiftEnter = exports.isOptPageup = exports.isOptPagedown = exports.isModZ = exports.isModUp = exports.isModSlash = exports.isModShiftZ = exports.isModShiftG = exports.isModShiftDot = exports.isModShiftComma = exports.isModSemicolon = exports.isModS = exports.isModRight = exports.isModP = exports.isModOptionR = exports.isModOptionE = exports.isModLeft = exports.isModL = exports.isModG = exports.isModF = exports.isModDown = exports.isModDot = exports.isModComma = exports.isModC = exports.isModBackslash = exports.isEsc = exports.isEnter = void 0;
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+const isModC = exports.isModC = (0, _isHotkey.default)('mod+c');
+const isModS = exports.isModS = (0, _isHotkey.default)('mod+s');
+const isModZ = exports.isModZ = (0, _isHotkey.default)('mod+z');
+const isModL = exports.isModL = (0, _isHotkey.default)('mod+l');
+const isModF = exports.isModF = (0, _isHotkey.default)('mod+f');
+const isModP = exports.isModP = (0, _isHotkey.default)('mod+p');
+const isModG = exports.isModG = (0, _isHotkey.default)('mod+g');
+const isModDot = exports.isModDot = (0, _isHotkey.default)('mod+.');
+const isModComma = exports.isModComma = (0, _isHotkey.default)('mod+,');
+const isModSlash = exports.isModSlash = (0, _isHotkey.default)('mod+/');
+const isModBackslash = exports.isModBackslash = (0, _isHotkey.default)('mod+\'');
+const isModSemicolon = exports.isModSemicolon = (0, _isHotkey.default)('mod+;');
+const isModUp = exports.isModUp = (0, _isHotkey.default)('mod+up');
+const isModDown = exports.isModDown = (0, _isHotkey.default)('mod+down');
+const isModLeft = exports.isModLeft = (0, _isHotkey.default)('mod+left');
+const isModRight = exports.isModRight = (0, _isHotkey.default)('mod+right');
+const isModShiftZ = exports.isModShiftZ = (0, _isHotkey.default)('mod+shift+z');
+const isModShiftG = exports.isModShiftG = (0, _isHotkey.default)('mod+shift+g');
+const isModOptionR = exports.isModOptionR = (0, _isHotkey.default)('mod+option+r');
+const isModOptionE = exports.isModOptionE = (0, _isHotkey.default)('mod+option+e');
+const isModShiftDot = exports.isModShiftDot = (0, _isHotkey.default)('mod+shift+.');
+const isModShiftComma = exports.isModShiftComma = (0, _isHotkey.default)('mod+shift+,');
+const isShiftEnter = exports.isShiftEnter = (0, _isHotkey.default)('shift+enter');
+const isShiftModEnter = exports.isShiftModEnter = (0, _isHotkey.default)('shift+mod+enter');
+const isOptPageup = exports.isOptPageup = (0, _isHotkey.default)('opt+pageup');
+const isOptPagedown = exports.isOptPagedown = (0, _isHotkey.default)('opt+pagedown');
+const isSpace = exports.isSpace = (0, _isHotkey.default)('space');
+const isEsc = exports.isEsc = (0, _isHotkey.default)('esc');
+const isEnter = exports.isEnter = (0, _isHotkey.default)('enter');

package/lib/utils/object-utils.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shallowCloneObject = exports.hasOwnProperty = exports.default = void 0;
+class ObjectUtils {
+  static getDataType(data) {
+    let type = typeof data;
+    if (type !== 'object') {
+      return type;
+    }
+    return Object.prototype.toString.call(data).replace(/^\[object (\S+)\]$/, '$1');
+  }
+  static iterable(data) {
+    return ['Object', 'Array'].includes(this.getDataType(data));
+  }
+  static isObjectChanged(source, comparison) {
+    if (!this.iterable(source)) {
+      throw new Error("source should be a Object or Array , but got ".concat(this.getDataType(source)));
+    }
+    if (this.getDataType(source) !== this.getDataType(comparison)) {
+      return true;
+    }
+    const sourceKeys = Object.keys(source);
+    const comparisonKeys = Object.keys({
+      ...source,
+      ...comparison
+    });
+    if (sourceKeys.length !== comparisonKeys.length) {
+      return true;
+    }
+    return comparisonKeys.some(key => {
+      if (this.iterable(source[key])) {
+        return this.isObjectChanged(source[key], comparison[key]);
+      } else {
+        return source[key] !== comparison[key];
+      }
+    });
+  }
+  static isSameObject(source, comparison) {
+    if (!source || !comparison) return false;
+    return !this.isObjectChanged(source, comparison);
+  }
+}
+const hasOwnProperty = (obj, propertyKey) => {
+  if (!obj || !propertyKey) return false;
+  return Object.prototype.hasOwnProperty.call(obj, propertyKey);
+};
+exports.hasOwnProperty = hasOwnProperty;
+const shallowCloneObject = obj => {
+  const result = {};
+  for (const k in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, k)) {
+      result[k] = obj[k];
+    }
+  }
+  return result;
+};
+exports.shallowCloneObject = shallowCloneObject;
+var _default = exports.default = ObjectUtils;