dtable-ui-component 0.3.7-beta.1 → 0.3.7-beta.3

package/lib/ButtonFormatter/index.js

@@ -6,6 +6,7 @@ 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);
@@ -48,7 +49,8 @@ var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
       }) || SELECT_OPTION_COLORS[0];
       var btnStyle = {
         backgroundColor: colorObj.COLOR,
-        borderColor: colorObj.BORDER_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/CheckboxFormatter/index.css

@@ -2,4 +2,9 @@
 
 .dtable-ui.checkbox-formatter .checkbox-checked-mark {
   color: #20c933;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
 }

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.js

@@ -4,6 +4,7 @@ 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) {
@@ -22,11 +23,6 @@ var RowExpandEmailFormatter = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _this.getTrimmedString = function () {
-      var value = _this.props.value;
-      return typeof value === 'string' ? value.trim() : '';
-    };
-
     _this.onOpenEmailLink = function () {
       var value = _this.props.value;
       var newValue = value.trim();
@@ -47,7 +43,7 @@ var RowExpandEmailFormatter = /*#__PURE__*/function (_React$Component) {
         className: classname
       }, /*#__PURE__*/React.createElement("span", {
         className: "email-formatter-value text-truncate"
-      }, value), this.getTrimmedString() && /*#__PURE__*/React.createElement("span", {
+      }, value), getTrimmedString(value) && /*#__PURE__*/React.createElement("span", {
         className: "dtable-font dtable-icon-email row-expand-jump-link",
         onClick: this.onOpenEmailLink
       }));

package/lib/RowExpandFormatter/index.css

@@ -43,6 +43,14 @@
 
 .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 .ctime-formatter-container,
+.dtable-ui.dtable-row-expand-formatter .mtime-formatter-container {
+  padding: 0.375rem 0.75rem;
 }
 
 .dtable-ui.dtable-row-expand-formatter .checkbox-formatter-container {
@@ -54,6 +62,32 @@
   justify-content: center;
 }
 
+.dtable-ui.dtable-row-expand-formatter .checkbox-formatter-container .cell-formatter-container {
+  line-height: inherit;
+}
+
+.dtable-ui.dtable-row-expand-formatter .button-formatter {
+  margin-top: 6px;
+  text-align: center;
+  height: 26px;
+  line-height: 14px;
+  min-width: 80px;
+  max-width: 100%;
+  width: fit-content;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border-radius: 3px;
+  border-width: 2px;
+  font-weight: 500;
+  font-size: 14px;
+  font-family: inherit;
+  cursor: pointer;
+  letter-spacing: .03em;
+}
+
 .dtable-ui.dtable-row-expand-formatter .longtext-formatter-container {
   border: 1px solid rgba(0, 40, 100, 0.12);
   border-radius: 3px;
@@ -63,7 +97,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

@@ -179,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 ctime-formatter-container",
+              style: {
+                width: 320
+              }
             }, /*#__PURE__*/React.createElement(CTimeFormatter, {
               value: row._ctime,
               containerClassName: containerClassName
@@ -193,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 mtime-formatter-container",
+              style: {
+                width: 320
+              }
             }, /*#__PURE__*/React.createElement(MTimeFormatter, {
               value: row._mtime,
               containerClassName: containerClassName

package/lib/RowExpandRateFormatter/index.css

@@ -1 +1,5 @@
 @import url('../css/cell-formatter.css');
+
+.dtable-ui.dtable-row-expand-formatter .dtable-rate-formatter .dtable-icon-rate {
+  padding-right: 5px;
+}

package/lib/RowExpandRateFormatter/index.js

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

package/lib/RowExpandUrlFormatter/index.js

@@ -4,6 +4,8 @@ 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) {
@@ -22,22 +24,10 @@ var UrlFormatter = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _this.isValidUrl = function (url) {
-      var reg = /^(([-a-zA-Z0-9+.]+):\/\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
-      return reg.test(url);
-    };
-
-    _this.getTrimmedString = function () {
-      var value = _this.props.value;
-      return typeof value === 'string' ? value.trim() : '';
-    };
-
     _this.onOpenUrlLink = function () {
       var value = _this.props.value;
-
-      var url = _this.getTrimmedString(value);
-
-      var validUrl = _this.isValidUrl(url) ? url : "http://".concat(url);
+      var url = getTrimmedString(value);
+      var validUrl = isValidUrl(url) ? url : "http://".concat(url);
 
       try {
         var a = document.createElement('a');
@@ -48,7 +38,7 @@ var UrlFormatter = /*#__PURE__*/function (_React$Component) {
         a.click();
         document.body.removeChild(a);
       } catch (_unused) {
-        throw new Error('The url is invalid');
+        toaster.danger('The url is invalid');
       }
     };
 
@@ -66,7 +56,7 @@ var UrlFormatter = /*#__PURE__*/function (_React$Component) {
         className: classname
       }, /*#__PURE__*/React.createElement("span", {
         className: "url-formatter-value text-truncate"
-      }, value), this.getTrimmedString() && /*#__PURE__*/React.createElement("span", {
+      }, value), getTrimmedString(value) && /*#__PURE__*/React.createElement("span", {
         className: "dtable-font dtable-icon-url row-expand-jump-link",
         onClick: this.onOpenUrlLink
       }));

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.7-beta.1",
+  "version": "0.3.7-beta.3",
   "main": "./lib/index.js",
   "dependencies": {
     "dtable-utils": "0.0.2",