dtable-ui-component 6.0.2 → 6.0.4

package/lib/SingleSelectEditor/index.js

@@ -1,167 +1,27 @@
 "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 _react = _interopRequireDefault(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
-var _lang = require("../lang");
-var _EditEditorButton = _interopRequireDefault(require("../EditEditorButton"));
 var _selectEditor = require("../select-editor");
-require("./index.css");
-class SingleSelectEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.onMouseDown = e => {
-      if (this.editorContainer !== e.target && !this.editorContainer.contains(e.target)) {
-        this.onClosePopover();
-      }
-    };
-    this.formatOption = () => {
-      let {
-        newValue
-      } = this.state;
-      let option = this.options.find(option => option.name === newValue);
-      return option;
-    };
-    this.onAddOptionToggle = event => {
-      event.nativeEvent.stopImmediatePropagation();
-      event.stopPropagation();
-      if (this.props.isReadOnly) {
-        return;
-      }
-      let isPopoverShow = !this.state.isPopoverShow;
-      if (isPopoverShow) {
-        let popoverPosition = this.caculatePopoverPosition();
-        this.setState({
-          isPopoverShow,
-          popoverPosition
-        });
-      } else {
-        this.setState({
-          isPopoverShow
-        });
-      }
-    };
-    this.onCommit = newValue => {
-      let updated = {};
-      let {
-        column
-      } = this.props;
-      updated[column.name] = newValue;
-      this.props.onCommit(updated);
-    };
-    this.onOptionItemToggle = option => {
-      let newValue = this.state.newValue === option.name ? '' : option.name;
-      this.setState({
-        newValue
-      }, () => {
-        this.onCommit(newValue);
-        this.onClosePopover();
-      });
-    };
-    this.caculatePopoverPosition = () => {
-      const POPOVER_MAX_HEIGHT = 200;
-      let innerHeight = window.innerHeight;
-      let {
-        top,
-        height
-      } = this.editor.getClientRects()[0];
-      let isBelow = innerHeight - (top + height) > POPOVER_MAX_HEIGHT;
-      let position = {
-        top: height + 1,
-        left: 0
-      };
-      if (!isBelow) {
-        let bottom = height + 1;
-        position = {
-          bottom: bottom,
-          left: 0
-        };
-      }
-      return position;
-    };
-    this.onAddNewOption = optionName => {
-      this.props.onAddNewOption(optionName);
-      this.onClosePopover();
-    };
-    this.onClosePopover = () => {
-      this.setState({
-        isPopoverShow: false
-      });
-    };
-    this.setEditorContainerRef = editorContainer => {
-      this.editorContainer = editorContainer;
-    };
-    this.setEditorRef = editor => {
-      this.editor = editor;
-    };
-    this.state = {
-      newValue: props.value,
-      isPopoverShow: false,
-      popoverPosition: {}
-    };
-    let {
-      column: _column
-    } = this.props;
-    this.options = _column.data && (_column.data.options || []);
-  }
-  componentDidMount() {
-    document.addEventListener('mousedown', this.onMouseDown);
-  }
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.onMouseDown);
-  }
-  render() {
-    let {
-      isPopoverShow,
-      popoverPosition
-    } = this.state;
-    let option = this.formatOption();
-    let options = this.options;
-    let selectedOptions = option ? [option] : [];
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: this.setEditorContainerRef,
-      className: "dtable-ui-single-select-editor"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      ref: this.setEditorRef,
-      className: option ? '' : 'd-inline-block',
-      onClick: this.onAddOptionToggle
-    }, option ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-single-select-option-container"
-    }, /*#__PURE__*/_react.default.createElement(_selectEditor.SelectEditorOption, {
-      option: option
-    })) : /*#__PURE__*/_react.default.createElement(_EditEditorButton.default, {
-      text: (0, _lang.getLocale)('Add_an_option')
-    })), isPopoverShow && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-      query: "(min-width: 768px)"
-    }, /*#__PURE__*/_react.default.createElement(_selectEditor.PCSelectEditorPopover, {
-      popoverPosition: popoverPosition,
-      options: options,
-      selectedOptions: selectedOptions,
-      onOptionItemToggle: this.onOptionItemToggle,
-      isSupportNewOption: this.props.isSupportNewOption,
-      onAddNewOption: this.onAddNewOption
-    })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-      query: "(max-width: 767.8px)"
-    }, /*#__PURE__*/_react.default.createElement(_selectEditor.MBSelectEditorPopover, {
-      isReadOnly: this.props.isReadOnly,
-      value: [this.state.newValue],
-      column: this.props.column,
-      options: options,
-      onOptionItemToggle: this.onOptionItemToggle,
-      isShowRemoveIcon: true,
-      isSupportNewOption: this.props.isSupportNewOption,
-      onAddNewOption: this.onAddNewOption,
-      onClosePopover: this.onClosePopover
-    }))));
-  }
-}
-SingleSelectEditor.defaultProps = {
-  isReadOnly: false,
-  value: ''
+const SingleSelectEditor = _ref => {
+  let {
+    value: oldValue,
+    ...props
+  } = _ref;
+  const value = oldValue ? [oldValue] : [];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_selectEditor.PCSelectEditor, Object.assign({}, props, {
+    value: value
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 767.8px)"
+  }, /*#__PURE__*/_react.default.createElement(_selectEditor.MBSelectEditor, Object.assign({}, props, {
+    value: value
+  }))));
 };
 var _default = exports.default = SingleSelectEditor;

package/lib/SvgIcon/index.css

@@ -0,0 +1,11 @@
+.dtable-ui-multicolor-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.dtable-ui-multicolor-icon.scale-icon {
+  transform: scale(1.5);
+}

package/lib/SvgIcon/index.js

@@ -0,0 +1,29 @@
+"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"));
+require("./index.css");
+const needScaleIcons = ['check', 'dot', 'cross'];
+const SvgIcon = props => {
+  const {
+    className,
+    symbol,
+    color
+  } = props;
+  let iconClass = "dtable-ui-multicolor-icon multicolor-icon-".concat(symbol, " ").concat(className || '');
+  if (needScaleIcons.includes(symbol) && window.isMobile) {
+    iconClass += ' scale-icon';
+  }
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    className: iconClass,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("use", {
+    fill: color,
+    xlinkHref: "#".concat(symbol)
+  }));
+};
+var _default = exports.default = SvgIcon;

package/lib/TextEditor/index.js

@@ -1,81 +1,151 @@
 "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 = _interopRequireDefault(require("react"));
-var _isHotkey = _interopRequireDefault(require("is-hotkey"));
-var _reactstrap = require("reactstrap");
-class TextEditor extends _react.default.Component {
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("../utils/utils");
+var _constants = require("../constants");
+var _cellComparer = require("../utils/cell-comparer");
+class TextEditor extends _react.Component {
   constructor(props) {
     super(props);
-    this.onCommit = () => {
-      let updated = {};
-      let {
-        column
-      } = this.props;
-      let {
-        newValue
+    this.getValue = () => {
+      const {
+        value
       } = this.state;
-      updated[column.name] = newValue ? newValue.trim() : '';
-      this.props.onCommit(updated);
+      const text = (0, _utils.getTrimmedString)(value) || null;
+      return text;
+    };
+    this.updateValue = (value, callback) => {
+      if (value === this.state.value) {
+        return;
+      }
+      this.setState({
+        value
+      }, () => {
+        callback && callback();
+      });
+    };
+    this.focusInput = () => {
+      this.input && this.input.focus();
+    };
+    this.blurInput = () => {
+      this.input && this.input.blur();
     };
     this.onBlur = () => {
-      this.onCommit();
+      this.props.onCommit();
+    };
+    this.onPaste = e => {
+      e.stopPropagation();
+    };
+    this.onCut = e => {
+      e.stopPropagation();
     };
     this.onChange = event => {
-      let value = event.target.value;
+      event.persist();
+      const value = event.target.value;
       this.setState({
-        newValue: value
+        value
+      }, () => {
+        if (this.props.onChange) {
+          this.props.onChange(event);
+        }
       });
     };
-    this.onKeyDown = event => {
-      let {
+    this.onInputKeyDown = e => {
+      const {
         selectionStart,
         selectionEnd,
         value
-      } = event.currentTarget;
-      if ((0, _isHotkey.default)('enter', event)) {
-        event.preventDefault();
-        event.target.blur();
-      } else if (event.keyCode === 37 && selectionStart === 0 || event.keyCode === 39 && selectionEnd === value.length) {
-        event.stopPropagation();
+      } = e.currentTarget;
+      if (e.keyCode === _constants.KeyCodes.Enter) {
+        e.preventDefault();
+        this.onBlur();
+        if (this.props.selectDownCell) this.props.selectDownCell();
+      } else if (e.keyCode === _constants.KeyCodes.ChineseInputMethod || e.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || e.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
+        e.stopPropagation();
+      }
+      if (this.props.onKeyDown) {
+        this.props.onKeyDown(e);
       }
     };
-    this.onPaste = e => {
-      e.stopPropagation();
+    this.onClick = event => {
+      if (this.props.onInputClick) {
+        this.props.onInputClick(event);
+      }
     };
-    this.onCut = e => {
-      e.stopPropagation();
+    this.onCompositionStart = event => {
+      if (this.props.onCompositionStart) {
+        this.props.onCompositionStart(event);
+      }
+    };
+    this.onCompositionEnd = event => {
+      if (this.props.onCompositionEnd) {
+        this.props.onCompositionEnd(event);
+      }
+      this.onChange(event);
+    };
+    this.getInputNode = () => {
+      if (!this.input) return null;
+      if (this.input.tagName === 'INPUT') {
+        return this.input;
+      }
+      return this.input.querySelector('input:not([type=hidden])');
     };
     this.setInputRef = input => {
       this.input = input;
+      return this.input;
     };
     this.state = {
-      newValue: props.value
+      value: props.value || ''
     };
   }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      value: oldValue,
+      column
+    } = this.props;
+    const {
+      value: newValue
+    } = nextProps;
+    if ((0, _cellComparer.isCellValueChanged)(oldValue, newValue, column.type)) {
+      this.setState({
+        value: newValue || ''
+      });
+    }
+  }
   render() {
     const {
-      isReadOnly
+      column,
+      className,
+      placeholder
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
-      ref: this.setInputRef,
+    const {
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
       type: "text",
-      value: this.state.newValue,
-      readOnly: isReadOnly,
-      onChange: this.onChange,
-      onKeyDown: this.onKeyDown,
+      className: (0, _classnames.default)('form-control', className),
+      ref: this.setInputRef,
+      placeholder: placeholder || '',
       onBlur: this.onBlur,
       onCut: this.onCut,
-      onPaste: this.onPaste
-    });
+      onPaste: this.onPaste,
+      value: value,
+      name: column.name,
+      title: column.name,
+      "aria-label": column.name,
+      onChange: this.onChange,
+      onKeyDown: this.onInputKeyDown,
+      onClick: this.onClick,
+      onCompositionStart: this.onCompositionStart,
+      onCompositionEnd: this.onCompositionEnd
+    }));
   }
 }
-TextEditor.defaultProps = {
-  isReadOnly: false,
-  value: ''
-};
 var _default = exports.default = TextEditor;

package/lib/UploadProgress/index.js

@@ -0,0 +1,38 @@
+"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 _reactSweetProgress = require("react-sweet-progress");
+require("react-sweet-progress/lib/style.css");
+function UploadProgress(props) {
+  return /*#__PURE__*/_react.default.createElement(_reactSweetProgress.Progress, {
+    type: "circle",
+    percent: props.uploadPercent,
+    width: props.width || 30,
+    theme: {
+      default: {
+        color: props.defaultColor || 'rgba(0, 0, 0, 0.6)'
+      },
+      active: {
+        color: props.activeColor || '#fff'
+      },
+      success: {
+        symbol: props.tipText,
+        color: props.successColor || '#fff'
+      }
+    },
+    style: {
+      color: '#fff',
+      fontSize: '12px',
+      transform: 'rotate(-90deg)',
+      position: 'absolute',
+      zIndex: 4
+    },
+    symbolClassName: props.className || 'dtable-ui-file-upload-span'
+  });
+}
+var _default = exports.default = UploadProgress;

package/lib/UrlEditor/index.js

@@ -0,0 +1,61 @@
+"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 _editorBase = _interopRequireDefault(require("../common/editor-base"));
+var _constants = require("../constants");
+class UrlEditor extends _editorBase.default {
+  constructor() {
+    super(...arguments);
+    this.setInputRef = input => {
+      this.input = input;
+      return this.input;
+    };
+    this.onBlur = () => {
+      const update = this.getValue();
+      this.props.onCommit(update);
+    };
+    this.onCut = e => {
+      e.stopPropagation();
+    };
+    this.onPaste = e => {
+      e.stopPropagation();
+    };
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter) {
+        e.preventDefault();
+        this.onBlur();
+        if (this.props.selectDownCell) this.props.selectDownCell();
+      }
+    };
+  }
+  getValue() {
+    const updated = {};
+    updated[this.props.column.key] = this.getInputNode().value.trim();
+    return updated;
+  }
+  getInputNode() {
+    if (!this.input) return null;
+    if (this.input.tagName === 'INPUT') {
+      return this.input;
+    }
+    return this.input.querySelector('input:not([type=hidden])');
+  }
+  render() {
+    return /*#__PURE__*/_react.default.createElement("input", {
+      type: "text",
+      ref: this.setInputRef,
+      className: "form-control",
+      onBlur: this.onBlur,
+      onCut: this.onCut,
+      onPaste: this.onPaste,
+      defaultValue: this.props.value,
+      onKeyDown: this.onKeyDown
+    });
+  }
+}
+var _default = exports.default = UrlEditor;

package/lib/common/editor-base.js

@@ -0,0 +1,52 @@
+"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 _dtableUtils = require("dtable-utils");
+class EditorBase extends _react.default.Component {
+  getStyle() {
+    return {
+      width: '100%'
+    };
+  }
+  getValue() {
+    const updated = {};
+    const {
+      column
+    } = this.props;
+    const {
+      type,
+      key,
+      data
+    } = column;
+    let value = this.getInputNode().value;
+    if (type === _dtableUtils.CellType.TEXT) {
+      value = value ? value.trim() : '';
+    } else if (type === _dtableUtils.CellType.NUMBER) {
+      let {
+        precision,
+        enable_precision
+      } = data || {};
+      if (enable_precision && (0, _dtableUtils.isNumber)(value)) {
+        value = Number(value.toFixed(precision));
+      }
+    }
+    updated[key] = value;
+    return updated;
+  }
+  getInputNode() {
+    if (!this.input) return null;
+    if (this.input.tagName === 'INPUT') {
+      return this.input;
+    }
+    return this.input.querySelector('input:not([type=hidden])');
+  }
+  inheritContainerStyles() {
+    return true;
+  }
+}
+var _default = exports.default = EditorBase;