sea-chart 0.0.58 → 0.0.60

package/README.md

@@ -28,6 +28,8 @@
 
   **注意**：自定义API 的demo,目前不支持修改参数同步更新视图
 
+  **注意**：默认 webpack-dev-server 会打开 127.0.0.1:9001 并出错，需要手动改成 127.0.0.1:9000 才能正常访问
+
 ## 使用
   1. 安装 sea-chart
   ```

package/dist/assets/css/react-data-grid-header.css

@@ -0,0 +1,515 @@
+.react-grid-Header {
+  background: #f9f9f9;
+}
+
+.react-grid-Header--resizing {
+  cursor: ew-resize;
+}
+
+.react-grid-HeaderRow {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: flex;
+  justify-content: space-between;
+}
+
+.dtable-header-setting {
+  height: 100%;
+  width: 30px;
+  float: right;
+  display: flex;
+  align-items: center;
+  color: #888;
+}
+
+.dtable-header-setting::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.dtable-header-setting:hover {
+  color: #444;
+  cursor: pointer;
+}
+
+.dtable-header-setting-submenu .dtable-dropdown-menu {
+  top: -12px !important;
+  left: -10px !important;
+}
+
+.dtable-dropdown-menu .dtable-header-setting-submenu:hover .dtable-dropdown-menu .item-icon {
+  color: #8c8c8c;
+}
+
+.dtable-dropdown-menu .dtable-header-setting-submenu:hover .dropdown-item:hover .item-icon {
+  color: #fff;
+}
+
+.react-grid-HeaderCell {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background: #f9f9f9;
+  padding: 8px;
+  font-weight: normal;
+  border-right: 1px solid #dddddd;
+  border-bottom: 1px solid #dddddd;
+  font-size: 14px;
+}
+
+.react-grid-HeaderCell.rdg-row-actions-cell {
+  z-index: 3;
+}
+
+.react-grid-HeaderCell__value {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.react-grid-HeaderCell__resizeHandle {
+  cursor: ew-resize;
+}
+
+.react-grid-HeaderCell__resizeHandle:hover {
+  background: #dddddd;
+}
+
+.react-grid-HeaderCell--frozen:last-of-type {
+  box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
+}
+
+.react-grid-HeaderCell--resizing .react-grid-HeaderCell__resizeHandle {
+  background: #dddddd;
+}
+
+.react-grid-HeaderCell__draggable {
+  cursor: col-resize;
+}
+
+.react-grid-HeaderCell__draggable:hover {
+  background-color: #2d7ff9;
+}
+
+.rdg-can-drop > .react-grid-HeaderCell {
+  background: #ececec;
+}
+
+.react-grid-HeaderCell .Select {
+  max-height: 30px;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.react-grid-HeaderCell .Select-control {
+  max-height: 30px;
+  border: 1px solid #cccccc;
+  color: #555;
+  border-radius: 3px;
+}
+
+.react-grid-HeaderCell .is-focused:not(.is-open) > .Select-control {
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+
+.react-grid-HeaderCell .Select-control .Select-placeholder {
+  line-height: 20px;
+  color: #999;
+  padding: 4px;
+}
+
+.react-grid-HeaderCell .Select-control .Select-input {
+  max-height: 28px;
+  padding: 4px;
+  margin-left: 0px;
+}
+
+.react-grid-HeaderCell .Select-control .Select-input input {
+  padding: 0px;
+  height: 100%;
+}
+
+.react-grid-HeaderCell .Select-control .Select-arrow-zone .Select-arrow {
+  border-color: gray transparent transparent;
+  border-width: 4px 4px 2.5px;
+}
+
+.react-grid-HeaderCell .Select-control .Select-value {
+  padding: 4px;
+  line-height: 20px !important;
+}
+
+.react-grid-HeaderCell .Select--multi .Select-control .Select-value {
+  padding: 0px;
+  line-height: 16px !important;
+  max-height: 20px;
+}
+
+.react-grid-HeaderCell .Select--multi .Select-control .Select-value .Select-value-icon {
+  max-height: 20px;
+}
+
+.react-grid-HeaderCell .Select--multi .Select-control .Select-value .Select-value-label {
+  max-height: 20px;
+}
+
+.react-grid-HeaderCell .Select-control .Select-value .Select-value-label {
+  color: #555555 !important;
+}
+
+.react-grid-HeaderCell .Select-menu-outer {
+  z-index: 2;
+}
+
+.react-grid-HeaderCell .Select-menu-outer .Select-option {
+  padding: 4px;
+  line-height: 20px;
+}
+
+.react-grid-HeaderCell .Select-menu-outer .Select-menu .Select-option.is-selected {
+  color: #555555;
+}
+
+.react-grid-HeaderCell .Select-menu-outer .Select-menu .Select-option.is-focused {
+  color: #555555;
+}
+
+/* custom */
+.header-cell-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.header-cell-container > div {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 30px;
+}
+
+.header-cell-container .header-cell-left {
+  width: calc(100% - 20px);
+  display: flex;
+}
+
+.header-cell-container .header-uneditable-cell-left {
+  width: calc(100% - 34px);
+}
+
+.header-cell-container .header-uneditable-description-cell-left {
+  width: calc(100% - 50px);
+}
+
+.header-cell-container .dtable-dropdown-menu {
+  width: 20px;
+  padding: 0 5px;
+}
+
+.header-icon {
+  display: inline-block;
+  padding: 0 0.3125rem;
+  margin-left: -0.3125rem;
+}
+
+.header-cell-container .header-icon {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon:hover {
+  cursor: default;
+}
+
+.header-icon .dtable-font {
+  font-size: 14px;
+  color: #aaa;
+  cursor: default;
+}
+
+.header-icon .dtable-font.dtable-icon-use-help {
+  color: #bdbdbd;
+}
+
+.header-icon .dtable-font.dtable-icon-use-help:hover {
+  color: #888;
+}
+
+.bs-tooltip-bottom .arrow::before,
+.bs-tooltip-auto[x-placement^='bottom'] .arrow::before {
+  border-bottom-color: #303133;
+}
+
+.bs-tooltip-auto[x-placement^='right'] .arrow::before {
+  border-right-color: #303133;
+}
+
+.bs-tooltip-auto[x-placement^='left'] .arrow::before {
+  border-left-color: #303133;
+}
+
+.tooltip-inner {
+  max-width: 242px;
+  font-weight: lighter;
+  text-align: start;
+  background-color: #303133;
+}
+
+.help-icon-tooltip-inner {
+  position: relative;
+  overflow: hidden;
+}
+
+.help-icon-tooltip-btn {
+  float: right;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.help-icon-tooltip-btn:hover {
+  color: rgba(255, 255, 255, 1);
+}
+
+.expand-row-icon {
+  display: inline-block;
+  margin-right: 0.5rem;
+}
+
+.expand-row-icon .dtable-font {
+  font-size: 14px;
+  color: #535354;
+}
+
+.header-name {
+  margin-left: 3px;
+  overflow: hidden;
+}
+
+.header-cell-container .header-name {
+  align-items: center;
+}
+
+.header-dropdown {
+  position: unset;
+  display: inline-block;
+  margin-left: auto;
+  z-index: 1;
+  cursor: pointer !important;
+}
+
+.header-dropdown:hover {
+  cursor: pointer;
+}
+
+.header-dropdown > span {
+  display: inline-block;
+  padding: 0 6px;
+}
+
+.header-dropdown .dtable-icon-drop-down {
+  display: inline-block;
+  font-size: 12px;
+  color: #999;
+  transform: scale(0.8);
+  transition: all 0.1s;
+}
+
+.header-dropdown:hover .dtable-icon-drop-down {
+  color: #aaa;
+}
+
+.header-dropdown .dropdown-item:hover {
+  background-color: #20a0ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.header-dropdown .grid-header-dropdown-item {
+  padding: 0 12px !important;
+}
+
+.header-dropdown .grid-header-dropdown-item .item-icon {
+  line-height: 32px;
+}
+
+.dtable-dropdown-menu .grid-header-dropdown-item.formula-date-format-item {
+  padding-left: 15px;
+}
+
+.react-grid-HeaderCell.add-column-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  position: absolute;
+  cursor: pointer;
+}
+
+.react-grid-HeaderCell.add-column-icon .dtable-font {
+  font-size: 15px;
+}
+
+.dtable-io-dialog {
+  width: 560px;
+  max-width: 560px;
+}
+
+.dtable-io-dialog .modal-body {
+  padding: 0;
+}
+
+.dtable-io-dialog .download-files-header {
+  padding: 16px;
+  padding-bottom: 0;
+  color: #999;
+}
+
+.dtable-io-dialog .download-files-header .select-columns {
+  color: #eb8205;
+  cursor: pointer;
+}
+
+.dtable-io-dialog .download-files-body {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0 16px 16px;
+  height: 317px;
+  overflow: auto;
+  align-content: flex-start;
+}
+
+.dtable-io-dialog .download-files-item {
+  width: 255px;
+  height: 60px;
+  border: 1px solid #eeeeee;
+  margin-top: 16px;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.08);
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  padding-left: 0;
+  border-radius: 4px;
+}
+
+.dtable-io-dialog .download-files-item:hover {
+  box-shadow: 0 1px 10px 2px rgba(0, 0, 0, 0.1);
+}
+
+.dtable-io-dialog .download-files-item .download-file-container {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
+
+.dtable-io-dialog .download-files-item .download-file-content {
+  display: flex;
+  justify-content: space-between;
+  flex: 1;
+  padding-left: 10px;
+  align-items: center;
+  font-size: 14px;
+  min-height: 24px;
+}
+
+.download-file-content .download-file-count {
+  color: #999999;
+  font-size: 14px;
+  margin-left: 5px;
+}
+
+.download-files-item .download-file-btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  cursor: pointer;
+  align-self: flex-start;
+  font-size: 14px;
+}
+
+.download-files-item .download-file-btn:hover {
+  color: #333;
+}
+
+.download-files-item .item-dropdown-menu .item-dropdown-more {
+  color: #999;
+}
+
+.download-files-item .dtable-icon-check-circle {
+  font-size: 12px;
+  margin-left: 4px;
+}
+
+.download-file-container .download-file-status {
+  display: flex;
+  justify-content: space-between;
+  flex: 1;
+  padding-left: 10px;
+  align-items: center;
+  font-size: 12px;
+}
+
+.download-file-status .download-file-tip {
+  color: #999;
+}
+
+.download-file-status .transfer-file-tip {
+  color: green;
+}
+
+.download-file-status .download-file-cancel {
+  color: #f0a033;
+  cursor: pointer;
+}
+
+.download-file-status .download-file-error {
+  color: red;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.download-file-status .download-file-error .download-file-again {
+  margin-left: 5px;
+}
+
+.react-grid-HeaderCell-default .header-cell-container .widget-HeaderCell__value {
+  line-height: 24px;
+}
+
+.react-grid-HeaderCell-default .header-name .header-name-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.react-grid-HeaderCell-double .header-cell-container .header-cell-left {
+  height: 100%;
+}
+
+.react-grid-HeaderCell-double .header-name .header-name-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: initial;
+  max-height: 46px;
+  height: fit-content;
+}

package/dist/components/cell-factory/FormatterConfig.js

@@ -0,0 +1,57 @@
+import _DepartmentSingleSelectFormatter from "dtable-ui-component/lib/DepartmentSingleSelectFormatter";
+import _DigitalSignFormatter from "dtable-ui-component/lib/DigitalSignFormatter";
+import _RateFormatter from "dtable-ui-component/lib/RateFormatter";
+import _ButtonFormatter from "dtable-ui-component/lib/ButtonFormatter";
+import _DurationFormatter from "dtable-ui-component/lib/DurationFormatter";
+import _EmailFormatter from "dtable-ui-component/lib/EmailFormatter";
+import _UrlFormatter from "dtable-ui-component/lib/UrlFormatter";
+import _AutoNumberFormatter from "dtable-ui-component/lib/AutoNumberFormatter";
+import _FormulaFormatter from "dtable-ui-component/lib/FormulaFormatter";
+import _GeolocationFormatter from "dtable-ui-component/lib/GeolocationFormatter";
+import _MTimeFormatter from "dtable-ui-component/lib/MTimeFormatter";
+import _LastModifierFormatter from "dtable-ui-component/lib/LastModifierFormatter";
+import _CTimeFormatter from "dtable-ui-component/lib/CTimeFormatter";
+import _CreatorFormatter from "dtable-ui-component/lib/CreatorFormatter";
+import _LinkFormatter from "dtable-ui-component/lib/LinkFormatter";
+import _DateFormatter from "dtable-ui-component/lib/DateFormatter";
+import _NumberFormatter from "dtable-ui-component/lib/NumberFormatter";
+import _CollaboratorFormatter from "dtable-ui-component/lib/CollaboratorFormatter";
+import _MultipleSelectFormatter from "dtable-ui-component/lib/MultipleSelectFormatter";
+import _FileFormatter from "dtable-ui-component/lib/FileFormatter";
+import _ImageFormatter from "dtable-ui-component/lib/ImageFormatter";
+import _SingleSelectFormatter from "dtable-ui-component/lib/SingleSelectFormatter";
+import _LongTextFormatter from "dtable-ui-component/lib/LongTextFormatter";
+import _CheckboxFormatter from "dtable-ui-component/lib/CheckboxFormatter";
+import React from 'react';
+import { CellType } from 'dtable-utils';
+import SimpleCellFormatter from '../cell-factory/SimpleCellFormatter';
+const FormatterConfig = {
+  [CellType.DEFAULT]: /*#__PURE__*/React.createElement(SimpleCellFormatter, null),
+  [CellType.TEXT]: /*#__PURE__*/React.createElement(SimpleCellFormatter, null),
+  [CellType.CHECKBOX]: /*#__PURE__*/React.createElement(_CheckboxFormatter, null),
+  [CellType.LONG_TEXT]: /*#__PURE__*/React.createElement(_LongTextFormatter, null),
+  [CellType.SINGLE_SELECT]: /*#__PURE__*/React.createElement(_SingleSelectFormatter, null),
+  [CellType.IMAGE]: /*#__PURE__*/React.createElement(_ImageFormatter, null),
+  [CellType.FILE]: /*#__PURE__*/React.createElement(_FileFormatter, null),
+  [CellType.MULTIPLE_SELECT]: /*#__PURE__*/React.createElement(_MultipleSelectFormatter, null),
+  [CellType.COLLABORATOR]: /*#__PURE__*/React.createElement(_CollaboratorFormatter, null),
+  [CellType.NUMBER]: /*#__PURE__*/React.createElement(_NumberFormatter, null),
+  [CellType.DATE]: /*#__PURE__*/React.createElement(_DateFormatter, null),
+  [CellType.LINK]: /*#__PURE__*/React.createElement(_LinkFormatter, null),
+  [CellType.CREATOR]: /*#__PURE__*/React.createElement(_CreatorFormatter, null),
+  [CellType.CTIME]: /*#__PURE__*/React.createElement(_CTimeFormatter, null),
+  [CellType.LAST_MODIFIER]: /*#__PURE__*/React.createElement(_LastModifierFormatter, null),
+  [CellType.MTIME]: /*#__PURE__*/React.createElement(_MTimeFormatter, null),
+  [CellType.GEOLOCATION]: /*#__PURE__*/React.createElement(_GeolocationFormatter, null),
+  [CellType.FORMULA]: /*#__PURE__*/React.createElement(_FormulaFormatter, null),
+  [CellType.AUTO_NUMBER]: /*#__PURE__*/React.createElement(_AutoNumberFormatter, null),
+  [CellType.URL]: /*#__PURE__*/React.createElement(_UrlFormatter, null),
+  [CellType.EMAIL]: /*#__PURE__*/React.createElement(_EmailFormatter, null),
+  [CellType.DURATION]: /*#__PURE__*/React.createElement(_DurationFormatter, null),
+  [CellType.BUTTON]: /*#__PURE__*/React.createElement(_ButtonFormatter, null),
+  [CellType.LINK_FORMULA]: /*#__PURE__*/React.createElement(_FormulaFormatter, null),
+  [CellType.RATE]: /*#__PURE__*/React.createElement(_RateFormatter, null),
+  [CellType.DIGITAL_SIGN]: /*#__PURE__*/React.createElement(_DigitalSignFormatter, null),
+  [CellType.DEPARTMENT_SINGLE_SELECT]: /*#__PURE__*/React.createElement(_DepartmentSingleSelectFormatter, null)
+};
+export default FormatterConfig;

package/dist/components/cell-factory/SimpleCellFormatter.js

@@ -0,0 +1,32 @@
+import React from 'react';
+class SimpleCellFormatter extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.getFormattedValue = val => {
+      let formattedValue = val;
+      if (Object.prototype.toString.call(val) === '[object Boolean]') {
+        formattedValue += '';
+      }
+      return formattedValue;
+    };
+  }
+  shouldComponentUpdate(nextProps) {
+    return nextProps.value !== this.props.value;
+  }
+  render() {
+    const {
+      value
+    } = this.props;
+    if (typeof value === 'object') {
+      return null;
+    }
+    const gridCellClassName = this.props.type ? "grid-cell-type-".concat(this.props.type) : 'grid-cell-type-default';
+    let formattedValue = this.getFormattedValue(value);
+    return /*#__PURE__*/React.createElement("div", {
+      className: gridCellClassName,
+      title: formattedValue,
+      "aria-label": formattedValue
+    }, formattedValue);
+  }
+}
+export default SimpleCellFormatter;

package/dist/components/cell-factory/SingleSelectOption.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import intl from '../../intl';
+import { getSelectColumnOptions } from '../../utils/column-utils';
+import { DELETED_OPTION_BACKGROUND_COLOR, DELETED_OPTION_TIPS } from '../../constants/common-constants';
+class SingleSelectOption extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.getCurrentOption = () => {
+      let {
+        value,
+        column
+      } = this.props;
+      let options = getSelectColumnOptions(column);
+      return options.find(item => item.id === value);
+    };
+    this.getStyle = option => {
+      let style = {
+        display: 'inline-block',
+        padding: '0px 10px',
+        height: '20px',
+        lineHeight: '20px',
+        textAlign: 'center',
+        borderRadius: '10px',
+        fontSize: '13px'
+      };
+      if (option) {
+        style.backgroundColor = option.color;
+        style.color = option.textColor || null;
+      } else {
+        style.backgroundColor = DELETED_OPTION_BACKGROUND_COLOR;
+      }
+      return style;
+    };
+  }
+  render() {
+    const {
+      value,
+      column
+    } = this.props;
+    if (!value) {
+      return /*#__PURE__*/React.createElement("div", null);
+    }
+    const currentOption = this.getCurrentOption();
+    const name = currentOption ? currentOption.name : intl.get(DELETED_OPTION_TIPS);
+    return /*#__PURE__*/React.createElement("div", {
+      // If parent node is FormulaFormatter, column is {data: array_data}, so column.type is undefined
+      className: 'grid_cell_type_' + (column.type || ''),
+      style: this.getStyle(currentOption),
+      title: name
+    }, name);
+  }
+}
+export default SingleSelectOption;

package/dist/components/cell-factory/cell-editor-factory.js

@@ -0,0 +1,12 @@
+import EditorConfig from '../cell-editors/EditorConfig';
+const DEFAULT = 'default';
+class CellEditorFactory {
+  createEditor(editorType) {
+    if (EditorConfig[editorType]) {
+      return EditorConfig[editorType];
+    }
+    return EditorConfig[DEFAULT];
+  }
+}
+let cellEditorFactory = new CellEditorFactory();
+export default cellEditorFactory;

package/dist/components/cell-factory/cell-formatter-factory.js

@@ -0,0 +1,11 @@
+import FormatterConfig from './/FormatterConfig';
+class CellFormatterFactory {
+  createFormatter(formatterType) {
+    if (FormatterConfig[formatterType]) {
+      return FormatterConfig[formatterType];
+    }
+    return null;
+  }
+}
+const cellFormatterFactory = new CellFormatterFactory();
+export default cellFormatterFactory;