dtable-ui-component 0.3.7-beta.3 → 0.3.8-alpha1

package/lib/FormulaFormatter/index.js

@@ -7,7 +7,7 @@ import React from 'react';
 import { CellType, FORMULA_RESULT_TYPE, getFormulaDisplayString } from 'dtable-utils';
 import BaseFormatterConfig from '../formatterConfig/base-formatter-config';
 import TextFormatter from '../TextFormatter';
-import { isArrayFormalColumn, isSimpleCellFormatter, isFunction, getFormulaArrayValue, convertValueToDtableLongTextValue } from './utils';
+import { isArrayFormatColumn, isSimpleCellFormatter, isFunction, getFormulaArrayValue, convertValueToDtableLongTextValue } from './utils';
 import cellValueValidator from './cell-value-validator';
 import './index.css';
 
@@ -58,7 +58,7 @@ var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
 
       var formatterProps = _this.getFormatterProps(array_type, array_data, collaborators);
 
-      if (isArrayFormalColumn(array_type)) {
+      if (isArrayFormatColumn(array_type)) {
         formatterProps.value = value;
         return _this.createColumnFormatter(Formatter, formatterProps);
       }

package/lib/FormulaFormatter/utils.js

@@ -1,10 +1,10 @@
-import { ARRAY_FORMAL_COLUMNS, SIMPLE_CELL_COLUMNS, SIMPLE_CELL_FORMULA_RESULTS } from '../constants';
+import { ARRAY_FORMAT_COLUMNS, SIMPLE_CELL_COLUMNS, SIMPLE_CELL_FORMULA_RESULTS } from '../constants';
 import getPreviewContent from '../SimpleLongTextFormatter/normalize-long-text-value';
 export function isSimpleCellFormatter(type) {
   return SIMPLE_CELL_COLUMNS.includes(type) || SIMPLE_CELL_FORMULA_RESULTS.includes(type);
 }
-export function isArrayFormalColumn(columnType) {
-  return ARRAY_FORMAL_COLUMNS.includes(columnType);
+export function isArrayFormatColumn(columnType) {
+  return ARRAY_FORMAT_COLUMNS.includes(columnType);
 }
 export var isFunction = function isFunction(functionToCheck) {
   var getType = {};

package/lib/RowExpandFormatter/index.js

@@ -9,7 +9,7 @@ var _emptyTypeMap;
 
 import React from 'react';
 import classnames from 'classnames';
-import { TextFormatter, NumberFormatter, CheckboxFormatter, DateFormatter, SingleSelectFormatter, MultipleSelectFormatter, CollaboratorFormatter, LongTextFormatter, GeolocationFormatter, CTimeFormatter, CreatorFormatter, LastModifierFormatter, MTimeFormatter, AutoNumberFormatter, DurationFormatter, ButtonFormatter, RowExpandUrlFormatter, RowExpandEmailFormatter, RowExpandRateFormatter, RowExpandImageFormatter, RowExpandFileFormatter, RowExpandLinkFormatter, DigitalSignFormatter, FormulaFormatter } from '../index';
+import { TextFormatter, NumberFormatter, CheckboxFormatter, DateFormatter, SingleSelectFormatter, MultipleSelectFormatter, CollaboratorFormatter, LongTextFormatter, GeolocationFormatter, CTimeFormatter, CreatorFormatter, LastModifierFormatter, MTimeFormatter, AutoNumberFormatter, DurationFormatter, ButtonFormatter, RowExpandUrlFormatter, RowExpandEmailFormatter, RowExpandRateFormatter, RowExpandImageFormatter, RowExpandFileFormatter, RowExpandLinkFormatter, RowExpandFormulaFormatter, DigitalSignFormatter } from '../index';
 import { CellType } from '../constants';
 import './index.css';
 var emptyTypeMap = (_emptyTypeMap = {}, _defineProperty(_emptyTypeMap, CellType.TEXT, true), _defineProperty(_emptyTypeMap, CellType.LONG_TEXT, true), _defineProperty(_emptyTypeMap, CellType.GEOLOCATION, true), _defineProperty(_emptyTypeMap, CellType.SINGLE_SELECT, true), _defineProperty(_emptyTypeMap, CellType.MULTIPLE_SELECT, true), _defineProperty(_emptyTypeMap, CellType.CTIME, true), _defineProperty(_emptyTypeMap, CellType.MTIME, true), _defineProperty(_emptyTypeMap, CellType.DATE, true), _defineProperty(_emptyTypeMap, CellType.AUTO_NUMBER, true), _defineProperty(_emptyTypeMap, CellType.URL, true), _defineProperty(_emptyTypeMap, CellType.EMAIL, true), _defineProperty(_emptyTypeMap, CellType.IMAGE, true), _defineProperty(_emptyTypeMap, CellType.FILE, true), _defineProperty(_emptyTypeMap, CellType.CREATOR, true), _defineProperty(_emptyTypeMap, CellType.LAST_MODIFIER, true), _emptyTypeMap);
@@ -74,7 +74,13 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
     _this.renderEmpty = function () {
       return /*#__PURE__*/React.createElement("span", {
         className: "row-cell-empty"
-      });
+      }); // <div
+      //   onClick={this.toggleEditor}
+      //   className={classnames('form-control', { 'disabled': readOnly })}
+      //   style={{width: 320, lineHeight: '1.625rem'}}
+      // >
+      //   {formatValue}
+      // </div>
     };
 
     _this.renderFormatter = function () {
@@ -86,11 +92,9 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
           columnType = _column.type;
       var collaborators = _this.state.collaborators;
       var containerClassName = "dtable-".concat(columnType, "-formatter ").concat(className || '');
-      var cellValue = row[column.key] || row[column.name];
-
-      if (!cellValue && emptyTypeMap[columnType]) {
-        return _this.renderEmpty();
-      }
+      var cellValue = row[column.key] || row[column.name]; // if (!cellValue && emptyTypeMap[columnType]) {
+      //   return this.renderEmpty();
+      // }
 
       switch (columnType) {
         case CellType.TEXT:
@@ -105,10 +109,9 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
 
         case CellType.COLLABORATOR:
           {
-            if (!cellValue || cellValue.length === 0) {
-              return _this.renderEmpty();
-            }
-
+            // if (!cellValue || cellValue.length === 0) {
+            //   return this.renderEmpty();
+            // }
             return /*#__PURE__*/React.createElement("div", {
               className: "form-control d-flex align-items-center w-100 h-auto"
             }, /*#__PURE__*/React.createElement(CollaboratorFormatter, {
@@ -142,10 +145,9 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
 
         case CellType.NUMBER:
           {
-            if (!cellValue && cellValue !== 0) {
-              return _this.renderEmpty();
-            }
-
+            // if (!cellValue && cellValue !== 0) {
+            //   return this.renderEmpty();
+            // }
             return /*#__PURE__*/React.createElement("div", {
               className: "form-control d-flex align-items-center",
               style: {
@@ -174,10 +176,9 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
 
         case CellType.CTIME:
           {
-            if (!row._ctime) {
-              return _this.renderEmpty();
-            }
-
+            // if (!row._ctime) {
+            //   return this.renderEmpty();
+            // }
             return /*#__PURE__*/React.createElement("div", {
               className: "form-control d-flex align-items-center ctime-formatter-container",
               style: {
@@ -191,10 +192,9 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
 
         case CellType.MTIME:
           {
-            if (!row._mtime) {
-              return _this.renderEmpty();
-            }
-
+            // if (!row._mtime) {
+            //   return this.renderEmpty();
+            // }
             return /*#__PURE__*/React.createElement("div", {
               className: "form-control d-flex align-items-center mtime-formatter-container",
               style: {
@@ -208,10 +208,9 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
 
         case CellType.MULTIPLE_SELECT:
           {
-            if (!cellValue || cellValue.length === 0) {
-              return _this.renderEmpty();
-            }
-
+            // if (!cellValue || cellValue.length === 0) {
+            //   return this.renderEmpty();
+            // }
             var options = column.data ? column.data.options : [];
             return /*#__PURE__*/React.createElement("div", {
               className: "form-control d-flex align-items-center w-100 h-auto"
@@ -286,11 +285,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
         case CellType.FORMULA:
         case CellType.LINK_FORMULA:
           {
-            if (!cellValue && cellValue !== 0 && cellValue !== false) {
-              return _this.renderEmpty();
-            }
-
-            return /*#__PURE__*/React.createElement(FormulaFormatter, {
+            // if (!cellValue && cellValue !== 0 && cellValue !== false) {
+            //   return this.renderEmpty();
+            // }
+            return /*#__PURE__*/React.createElement(RowExpandFormulaFormatter, {
               value: cellValue,
               column: column,
               collaborators: collaborators,
@@ -317,11 +315,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
                   }
                 })
               });
-            }
+            } // if (!Array.isArray(cellValue) || cellValue.length === 0) {
+            //   return this.renderEmpty();
+            // }
 
-            if (!Array.isArray(cellValue) || cellValue.length === 0) {
-              return _this.renderEmpty();
-            }
 
             return /*#__PURE__*/React.createElement(RowExpandLinkFormatter, {
               value: cellValue,
@@ -362,10 +359,9 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
 
         case CellType.DURATION:
           {
-            if (!cellValue && cellValue !== 0) {
-              return _this.renderEmpty();
-            }
-
+            // if (!cellValue && cellValue !== 0) {
+            //   return this.renderEmpty();
+            // }
             return /*#__PURE__*/React.createElement("div", {
               className: "form-control d-flex align-items-center",
               style: {

package/lib/RowExpandFormulaFormatter/index.js

@@ -0,0 +1,188 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { CellType, FORMULA_RESULT_TYPE, getFormulaDisplayString } from 'dtable-utils';
+import BaseFormatterConfig from '../formatterConfig/base-formatter-config';
+import TextFormatter from '../TextFormatter';
+import { isArrayFormatColumn, isSimpleCellFormatter, isFunction, getFormulaArrayValue, convertValueToDtableLongTextValue } from '../FormulaFormatter/utils';
+import cellValueValidator from '../FormulaFormatter/cell-value-validator';
+import '../FormulaFormatter/index.css';
+
+var RowExpandFormulaFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(RowExpandFormulaFormatter, _React$Component);
+
+  var _super = _createSuper(RowExpandFormulaFormatter);
+
+  function RowExpandFormulaFormatter() {
+    var _this;
+
+    _classCallCheck(this, RowExpandFormulaFormatter);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.renderBorder = function (dom) {
+      var column = _this.props.column;
+      var result_type = column.data.result_type;
+      var style = {
+        minHeight: '38px'
+      };
+
+      if (result_type === FORMULA_RESULT_TYPE.DATE || result_type === FORMULA_RESULT_TYPE.NUMBER) {
+        style = {
+          width: '320px'
+        };
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "d-flex align-items-center form-control disabled h-auto",
+        style: style
+      }, dom);
+    };
+
+    _this.renderOtherColumnFormatter = function () {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          column = _this$props.column,
+          collaborators = _this$props.collaborators;
+      var _column$data = column.data,
+          array_type = _column$data.array_type,
+          array_data = _column$data.array_data;
+
+      if (!array_type || array_type === CellType.LINK) {
+        return null;
+      }
+
+      var Formatter = BaseFormatterConfig[array_type];
+
+      var formatterProps = _this.getFormatterProps(array_type, array_data, collaborators);
+
+      if (isArrayFormatColumn(array_type)) {
+        formatterProps.value = value;
+        return _this.renderBorder(_this.createColumnFormatter(Formatter, formatterProps));
+      }
+
+      var cellValue = value;
+
+      if (!Array.isArray(value)) {
+        cellValue = cellValueValidator(value, array_type) ? [value] : [];
+      }
+
+      return _this.renderBorder( /*#__PURE__*/React.createElement("div", {
+        className: "dtable-ui formula-formatter multiple"
+      }, cellValue.map(function (v, index) {
+        formatterProps.value = v;
+        return /*#__PURE__*/React.createElement("div", {
+          className: "formula-formatter-content-item ".concat(isSimpleCellFormatter(array_type) ? 'simple-cell-formatter' : ''),
+          key: "formula-formatter-content-item-".concat(index)
+        }, _this.createColumnFormatter(Formatter, formatterProps));
+      })));
+    };
+
+    _this.getFormatterProps = function (array_type, array_data, collaborators) {
+      switch (array_type) {
+        case CellType.DURATION:
+          {
+            var duration_format = array_data.duration_format;
+            return {
+              format: duration_format
+            };
+          }
+
+        case CellType.NUMBER:
+        case CellType.RATE:
+        case CellType.GEOLOCATION:
+          {
+            return {
+              data: array_data
+            };
+          }
+
+        default:
+          {
+            return _objectSpread(_objectSpread({}, array_data), {}, {
+              collaborators: collaborators
+            });
+          }
+      }
+    };
+
+    return _this;
+  }
+
+  _createClass(RowExpandFormulaFormatter, [{
+    key: "createColumnFormatter",
+    value: function createColumnFormatter(Formatter, formatterProps) {
+      if (React.isValidElement(Formatter)) {
+        return React.cloneElement(Formatter, _objectSpread({}, formatterProps));
+      } else if (isFunction(Formatter)) {
+        return /*#__PURE__*/React.createElement(Formatter, formatterProps);
+      } else {
+        return /*#__PURE__*/React.createElement(TextFormatter, formatterProps);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          containerClassName = _this$props2.containerClassName,
+          column = _this$props2.column,
+          collaborators = _this$props2.collaborators,
+          value = _this$props2.value;
+      var data = column.data;
+      var array_type = data.array_type,
+          result_type = data.result_type;
+
+      if (Array.isArray(value)) {
+        value = getFormulaArrayValue(value);
+
+        if (array_type === CellType.DATE || result_type === FORMULA_RESULT_TYPE.DATE) {
+          value = value.map(function (item) {
+            return item.replace('T', ' ').replace('Z', '');
+          });
+        } else if (array_type === CellType.LONG_TEXT) {
+          value = value.map(function (item) {
+            return convertValueToDtableLongTextValue(item);
+          });
+        }
+      } else {
+        if (result_type === FORMULA_RESULT_TYPE.DATE) {
+          value = value.replace('T', ' ').replace('Z', '');
+        }
+      }
+
+      if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
+        return this.renderOtherColumnFormatter();
+      }
+
+      if (typeof value === 'object') {
+        return null;
+      }
+
+      var formattedValue = getFormulaDisplayString(value, data, {
+        collaborators: collaborators
+      });
+      var className = "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName);
+
+      if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
+        className = className + ' text-right';
+      }
+
+      return this.renderBorder( /*#__PURE__*/React.createElement("div", {
+        className: className,
+        title: formattedValue,
+        "aria-label": formattedValue
+      }, formattedValue));
+    }
+  }]);
+
+  return RowExpandFormulaFormatter;
+}(React.Component);
+
+export { RowExpandFormulaFormatter as default };

package/lib/RowExpandLinkFormatter/index.js

@@ -7,7 +7,7 @@ import React, { Component } from 'react';
 import { CellType } from '../constants';
 import { MultipleSelectFormatter, DateFormatter, CTimeFormatter, MTimeFormatter } from '../index';
 import CollaboratorItemFormatter from './collaborator-item-formatter';
-import { getFormulaArrayValue, isArrayFormalColumn } from './utils';
+import { getFormulaArrayValue, isArrayFormatColumn } from './utils';
 import { getCellDisplayValue } from './value-display-utils';
 import './index.css';
 
@@ -45,7 +45,7 @@ var RowExpandLinkFormatter = /*#__PURE__*/function (_Component) {
 
       var displayColumnType = displayColumn.type,
           displayColumnData = displayColumn.data;
-      var cellValue = getFormulaArrayValue(value, !isArrayFormalColumn(displayColumnType));
+      var cellValue = getFormulaArrayValue(value, !isArrayFormatColumn(displayColumnType));
 
       if (!Array.isArray(cellValue) || cellValue.length === 0) {
         return props.renderEmpty();

package/lib/RowExpandLinkFormatter/utils.js

@@ -53,6 +53,6 @@ export var getTwoDimensionArrayValue = function getTwoDimensionArrayValue(value)
     });
   });
 };
-export function isArrayFormalColumn(columnType) {
+export function isArrayFormatColumn(columnType) {
   return [CellType.IMAGE, CellType.FILE, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR].includes(columnType);
 }

package/lib/constants/index.js

@@ -17,6 +17,6 @@ var DATE_TYPES = {
   'YYYY-MM-DD HH:mm': 'YYYY-MM-DD HH:mm'
 };
 var SIMPLE_CELL_COLUMNS = [CellType.TEXT, CellType.NUMBER, CellType.DATE, CellType.CTIME, CellType.MTIME, CellType.AUTO_NUMBER, CellType.URL, CellType.EMAIL, CellType.DURATION, CellType.CHECKBOX, CellType.RATE];
-var ARRAY_FORMAL_COLUMNS = [CellType.IMAGE, CellType.FILE, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR];
+var ARRAY_FORMAT_COLUMNS = [CellType.IMAGE, CellType.FILE, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR];
 var SIMPLE_CELL_FORMULA_RESULTS = [FORMULA_RESULT_TYPE.NUMBER, FORMULA_RESULT_TYPE.STRING, FORMULA_RESULT_TYPE.DATE, FORMULA_RESULT_TYPE.BOOL];
-export { CellType, NUMBER_TYPES, DATE_TYPES, FORMULA_RESULT_TYPE, SIMPLE_CELL_COLUMNS, ARRAY_FORMAL_COLUMNS, SIMPLE_CELL_FORMULA_RESULTS };
+export { CellType, NUMBER_TYPES, DATE_TYPES, FORMULA_RESULT_TYPE, SIMPLE_CELL_COLUMNS, ARRAY_FORMAT_COLUMNS, SIMPLE_CELL_FORMULA_RESULTS };

package/lib/index.js

@@ -40,6 +40,7 @@ export { default as RowExpandLinkFormatter } from './RowExpandLinkFormatter';
 export { default as RowExpandRateFormatter } from './RowExpandRateFormatter';
 export { default as RowExpandEmailFormatter } from './RowExpandEmailFormatter';
 export { default as RowExpandUrlFormatter } from './RowExpandUrlFormatter';
+export { default as RowExpandFormulaFormatter } from './RowExpandFormulaFormatter';
 export { default as RowExpandFormatter } from './RowExpandFormatter'; // editor
 
 export { default as TextEditor } from './TextEditor';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "0.3.7-beta.3",
+  "version": "0.3.8-alpha1",
   "main": "./lib/index.js",
   "dependencies": {
     "dtable-utils": "0.0.2",