dtable-ui-component 0.3.6 → 0.3.7-beta.2

package/lib/ButtonFormatter/index.js

@@ -4,7 +4,9 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import classnames from 'classnames';
+import { SELECT_OPTION_COLORS } from 'dtable-utils';
 import './index.css';
+var WHITE = '#FFFFFF';
 
 var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(ButtonFormatter, _React$Component);
@@ -36,24 +38,19 @@ var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props = this.props,
           data = _this$props.data,
-          containerClassName = _this$props.containerClassName,
-          optionColors = _this$props.optionColors;
+          containerClassName = _this$props.containerClassName;
 
       var _ref = data || {},
           button_color = _ref.button_color,
           button_name = _ref.button_name;
 
-      var colorOption = Array.isArray(optionColors) ? optionColors.find(function (item) {
+      var colorObj = SELECT_OPTION_COLORS.find(function (item) {
         return item.COLOR === button_color;
-      }) || optionColors[0] : {
-        COLOR: '#FFFCB5',
-        BORDER_COLOR: '#E8E79D',
-        TEXT_COLOR: '#666'
-      };
+      }) || SELECT_OPTION_COLORS[0];
       var btnStyle = {
-        backgroundColor: colorOption.COLOR,
-        borderColor: colorOption.BORDER_COLOR,
-        color: colorOption.TEXT_COLOR
+        backgroundColor: colorObj.COLOR,
+        borderColor: colorObj.BORDER_COLOR,
+        color: colorObj.TEXT_COLOR === WHITE ? WHITE : '#666666'
       };
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
         className: classnames('dtable-ui cell-formatter-container button-formatter', containerClassName),

package/lib/CollaboratorItem/index.css

@@ -20,7 +20,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 4px 0 2px;
+  margin: 0 5px 0 2px;
 }
 
 .dtable-ui.collaborator-item .collaborator-avatar img {

package/lib/FormulaFormatter/index.css

@@ -5,6 +5,10 @@
   margin-right: 10px;
 }
 
+.dtable-ui.dtable-row-expand-formatter .formula-formatter-content-item {
+  margin-top: 0.5rem;
+  margin-bottom: 5px;
+}
 
 .dtable-ui.formula-formatter.multiple .formula-formatter-content-item.simple-cell-formatter {
   height: 20px;

package/lib/RateFormatter/index.js

@@ -76,7 +76,4 @@ RateFormatter.defaultProps = {
   value: '',
   containerClassName: ''
 };
-RateFormatter.defaultProps = {
-  editable: true
-};
 export default RateFormatter;

package/lib/RowExpandEmailFormatter/index.css

@@ -0,0 +1,30 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-row-expand-formatter .dtable-ui.email-formatter .email-formatter-value,
+.dtable-row-expand-formatter .dtable-ui.url-formatter .url-formatter-value {
+  text-decoration: underline;
+  width: 95%;
+  display: inline-flex;
+}
+
+.dtable-row-expand-formatter .dtable-ui .row-expand-jump-link {
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+  height: 22px;
+  position: absolute;
+  top: 8px;
+  right: 22px;
+  border: 1px solid #eee;
+  padding: 0 4px;
+  color: #999;
+  border-radius: 2px;
+  background: #fff;
+  cursor: pointer;
+  box-shadow: 0 0 1px;
+}
+
+.dtable-row-expand-formatter .dtable-ui .row-expand-jump-link:hover {
+  background: #eee;
+  border: 1px solid #c9c9c9;
+}

package/lib/RowExpandEmailFormatter/index.js

@@ -0,0 +1,56 @@
+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 classnames from 'classnames';
+import { getTrimmedString } from '../utils/editor-utils';
+import './index.css';
+
+var RowExpandEmailFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(RowExpandEmailFormatter, _React$Component);
+
+  var _super = _createSuper(RowExpandEmailFormatter);
+
+  function RowExpandEmailFormatter() {
+    var _this;
+
+    _classCallCheck(this, RowExpandEmailFormatter);
+
+    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.onOpenEmailLink = function () {
+      var value = _this.props.value;
+      var newValue = value.trim();
+      window.location.href = "mailto:".concat(newValue);
+    };
+
+    return _this;
+  }
+
+  _createClass(RowExpandEmailFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          containerClassName = _this$props.containerClassName,
+          value = _this$props.value;
+      var classname = classnames('dtable-ui cell-formatter-container email-formatter', containerClassName);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "email-formatter-value text-truncate"
+      }, value), getTrimmedString(value) && /*#__PURE__*/React.createElement("span", {
+        className: "dtable-font dtable-icon-email row-expand-jump-link",
+        onClick: this.onOpenEmailLink
+      }));
+    }
+  }]);
+
+  return RowExpandEmailFormatter;
+}(React.Component);
+
+export default RowExpandEmailFormatter;

package/lib/RowExpandFormatter/index.css

@@ -43,6 +43,9 @@
 
 .dtable-ui.dtable-row-expand-formatter .form-control {
   background-color: #f8f9fa;
+  padding: 0 10px;
+  height: fit-content;
+  min-height: 2.375rem;
 }
 
 .dtable-ui.dtable-row-expand-formatter .checkbox-formatter-container {
@@ -63,7 +66,7 @@
 }
 
 .dtable-ui.dtable-row-expand-formatter .geolocation-formatter-container {
-  height: 38px;
+  margin-top: 0.5rem;
   display: flex;
   align-items: center;
 }

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, UrlFormatter, EmailFormatter, DurationFormatter, RateFormatter, ButtonFormatter, 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, DigitalSignFormatter, FormulaFormatter } 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);
@@ -147,7 +147,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
             }
 
             return /*#__PURE__*/React.createElement("div", {
-              className: "form-control d-flex align-items-center w-100"
+              className: "form-control d-flex align-items-center",
+              style: {
+                width: 320
+              }
             }, /*#__PURE__*/React.createElement(NumberFormatter, {
               value: cellValue,
               data: column.data,
@@ -158,7 +161,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
         case CellType.DATE:
           {
             return /*#__PURE__*/React.createElement("div", {
-              className: "form-control d-flex align-items-center w-100"
+              className: "form-control d-flex align-items-center",
+              style: {
+                width: 320
+              }
             }, /*#__PURE__*/React.createElement(DateFormatter, {
               value: cellValue,
               format: column.data.format,
@@ -173,7 +179,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
             }
 
             return /*#__PURE__*/React.createElement("div", {
-              className: "form-control d-flex align-items-center w-100"
+              className: "form-control d-flex align-items-center",
+              style: {
+                width: 320
+              }
             }, /*#__PURE__*/React.createElement(CTimeFormatter, {
               value: row._ctime,
               containerClassName: containerClassName
@@ -187,7 +196,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
             }
 
             return /*#__PURE__*/React.createElement("div", {
-              className: "form-control d-flex align-items-center w-100"
+              className: "form-control d-flex align-items-center",
+              style: {
+                width: 320
+              }
             }, /*#__PURE__*/React.createElement(MTimeFormatter, {
               value: row._mtime,
               containerClassName: containerClassName
@@ -332,7 +344,7 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
           {
             return /*#__PURE__*/React.createElement("div", {
               className: "form-control d-flex align-items-center w-100"
-            }, /*#__PURE__*/React.createElement(UrlFormatter, {
+            }, /*#__PURE__*/React.createElement(RowExpandUrlFormatter, {
               value: cellValue,
               containerClassName: containerClassName
             }));
@@ -342,7 +354,7 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
           {
             return /*#__PURE__*/React.createElement("div", {
               className: "form-control d-flex align-items-center w-100"
-            }, /*#__PURE__*/React.createElement(EmailFormatter, {
+            }, /*#__PURE__*/React.createElement(RowExpandEmailFormatter, {
               value: cellValue,
               containerClassName: containerClassName
             }));
@@ -355,7 +367,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
             }
 
             return /*#__PURE__*/React.createElement("div", {
-              className: "form-control d-flex align-items-center w-100"
+              className: "form-control d-flex align-items-center",
+              style: {
+                width: 320
+              }
             }, /*#__PURE__*/React.createElement(DurationFormatter, {
               value: cellValue,
               format: column.data.duration_format,
@@ -366,8 +381,11 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
         case CellType.RATE:
           {
             return /*#__PURE__*/React.createElement("div", {
-              className: "form-control d-flex align-items-center w-100"
-            }, /*#__PURE__*/React.createElement(RateFormatter, {
+              className: "form-control d-flex align-items-center",
+              style: {
+                width: 320
+              }
+            }, /*#__PURE__*/React.createElement(RowExpandRateFormatter, {
               value: cellValue,
               data: column.data,
               containerClassName: containerClassName

package/lib/RowExpandRateFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/lib/RowExpandRateFormatter/index.js

@@ -0,0 +1,76 @@
+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 classnames from 'classnames';
+import './index.css';
+
+var RateExpendRateFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(RateExpendRateFormatter, _React$Component);
+
+  var _super = _createSuper(RateExpendRateFormatter);
+
+  function RateExpendRateFormatter() {
+    var _this;
+
+    _classCallCheck(this, RateExpendRateFormatter);
+
+    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.getRateList = function () {
+      var _this$props = _this.props,
+          data = _this$props.data,
+          value = _this$props.value;
+
+      var _ref = data || {},
+          _ref$rate_max_number = _ref.rate_max_number,
+          rate_max_number = _ref$rate_max_number === void 0 ? 5 : _ref$rate_max_number,
+          _ref$rate_style_color = _ref.rate_style_color,
+          rate_style_color = _ref$rate_style_color === void 0 ? '#e5e5e5' : _ref$rate_style_color,
+          _ref$rate_style_type = _ref.rate_style_type,
+          rate_style_type = _ref$rate_style_type === void 0 ? 'dtable-icon-rate' : _ref$rate_style_type;
+
+      var rateList = [];
+
+      for (var i = 0; i < rate_max_number; i++) {
+        var style = {
+          color: value >= i + 1 ? rate_style_color : '#e5e5e5'
+        };
+        rateList.push( /*#__PURE__*/React.createElement("i", {
+          key: "dtable-ui-component-rate-".concat(i),
+          className: "dtable-font ".concat(rate_style_type),
+          style: style
+        }));
+      }
+
+      return rateList;
+    };
+
+    return _this;
+  }
+
+  _createClass(RateExpendRateFormatter, [{
+    key: "render",
+    value: function render() {
+      var containerClassName = this.props.containerClassName;
+      var className = classnames('dtable-ui cell-formatter-container rate-formatter', containerClassName);
+      var rateList = this.getRateList();
+      return /*#__PURE__*/React.createElement("div", {
+        className: className
+      }, rateList);
+    }
+  }]);
+
+  return RateExpendRateFormatter;
+}(React.Component);
+
+RateExpendRateFormatter.defaultProps = {
+  value: '',
+  containerClassName: ''
+};
+export default RateExpendRateFormatter;

package/lib/RowExpandUrlFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/lib/RowExpandUrlFormatter/index.js

@@ -0,0 +1,69 @@
+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 classnames from 'classnames';
+import toaster from '../toaster';
+import { isValidUrl, getTrimmedString } from '../utils/editor-utils';
+import './index.css';
+
+var UrlFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(UrlFormatter, _React$Component);
+
+  var _super = _createSuper(UrlFormatter);
+
+  function UrlFormatter() {
+    var _this;
+
+    _classCallCheck(this, UrlFormatter);
+
+    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.onOpenUrlLink = function () {
+      var value = _this.props.value;
+      var url = getTrimmedString(value);
+      var validUrl = isValidUrl(url) ? url : "http://".concat(url);
+
+      try {
+        var a = document.createElement('a');
+        document.body.appendChild(a);
+        a.href = validUrl;
+        a.target = '_blank';
+        a.rel = 'noopener noreferrer';
+        a.click();
+        document.body.removeChild(a);
+      } catch (_unused) {
+        toaster.danger('The url is invalid');
+      }
+    };
+
+    return _this;
+  }
+
+  _createClass(UrlFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          containerClassName = _this$props.containerClassName,
+          value = _this$props.value;
+      var classname = classnames('dtable-ui cell-formatter-container url-formatter', containerClassName);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "url-formatter-value text-truncate"
+      }, value), getTrimmedString(value) && /*#__PURE__*/React.createElement("span", {
+        className: "dtable-font dtable-icon-url row-expand-jump-link",
+        onClick: this.onOpenUrlLink
+      }));
+    }
+  }]);
+
+  return UrlFormatter;
+}(React.Component);
+
+export default UrlFormatter;

package/lib/css/cell-formatter.css

@@ -1,4 +1,5 @@
 .dtable-ui.cell-formatter-container {
   overflow: hidden;
   line-height: 1;
+  width: 100%;
 }

package/lib/data/dtable-value.js

@@ -1,4 +1,3 @@
-import { CellType } from '../constants';
 var DTABLE_VALUE = {
   'tables': [{
     '_id': '0000',

package/lib/index.js

@@ -37,6 +37,9 @@ export { default as SimpleLongTextFormatter } from './SimpleLongTextFormatter';
 export { default as RowExpandFileFormatter } from './RowExpandFileFormatter';
 export { default as RowExpandImageFormatter } from './RowExpandImageFormatter';
 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 RowExpandFormatter } from './RowExpandFormatter'; // editor
 
 export { default as TextEditor } from './TextEditor';

package/lib/utils/editor-utils.js

@@ -68,4 +68,11 @@ export var getSelectOptionItem = function getSelectOptionItem(options, optionId)
   return options.find(function (option) {
     return option.id === optionId;
   });
+};
+export var isValidUrl = function isValidUrl(url) {
+  var reg = /^(([-a-zA-Z0-9+.]+):\/\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
+  return reg.test(url);
+};
+export var getTrimmedString = function getTrimmedString(value) {
+  return typeof value === 'string' ? value.trim() : '';
 };

package/package.json

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