@contentful/field-editor-shared 0.21.0 → 0.24.0

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.24.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-shared@0.23.0...@contentful/field-editor-shared@0.24.0) (2021-09-17)
+
+
+### Features
+
+* add shortenStorageUnit util to shared ([#852](https://github.com/contentful/field-editors/issues/852)) ([142472b](https://github.com/contentful/field-editors/commit/142472b57fc1ca2843dd414c5320fdb5b5b11e62))
+
+
+
+
+
+# [0.23.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-shared@0.22.1...@contentful/field-editor-shared@0.23.0) (2021-09-16)
+
+
+### Features
+
+* export shared util to validate images ([#846](https://github.com/contentful/field-editors/issues/846)) ([f26c481](https://github.com/contentful/field-editors/commit/f26c481cc5abf275acb4e4a65b462be487708117))
+
+
+
+
+
+## [0.22.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-shared@0.22.0...@contentful/field-editor-shared@0.22.1) (2021-08-19)
+
+
+### Bug Fixes
+
+* FieldConnector setValue race conditions ([#803](https://github.com/contentful/field-editors/issues/803)) ([15a5aa6](https://github.com/contentful/field-editors/commit/15a5aa68a6f3f6c7183444c8fd11de1e70208aa7))
+
+
+
+
+
+# [0.22.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-shared@0.21.0...@contentful/field-editor-shared@0.22.0) (2021-07-23)
+
+
+### Features
+
+* 💡 new color tokens ([#778](https://github.com/contentful/field-editors/issues/778)) ([fba548d](https://github.com/contentful/field-editors/commit/fba548de32305016df7f2685634eefb14294828f))
+
+
+
+
+
 # [0.21.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-shared@0.18.0...@contentful/field-editor-shared@0.21.0) (2021-07-06)
 
 

package/dist/FieldConnector.d.ts

@@ -14,7 +14,6 @@ export interface FieldConnectorChildProps<ValueType> {
 interface FieldConnectorState<ValueType> {
     isLocalValueChange: boolean;
     externalReset: number;
-    lastSetValue: ValueType | Nullable;
     lastRemoteValue: ValueType | Nullable;
     value: ValueType | Nullable;
     disabled: boolean;
@@ -39,7 +38,8 @@ export declare class FieldConnector<ValueType> extends React.Component<FieldConn
     unsubscribeErrors: Function | null;
     unsubscribeDisabled: Function | null;
     unsubscribeValue: Function | null;
-    setValue: import("lodash").DebouncedFunc<(value: ValueType | Nullable) => Promise<unknown>>;
+    setValue: (value: ValueType | Nullable) => Promise<void>;
+    triggerSetValueCallbacks: import("lodash").DebouncedFunc<(value: ValueType | Nullable) => Promise<unknown>>;
     componentDidMount(): void;
     componentWillUnmount(): void;
     render(): React.ReactNode;

package/dist/field-editor-shared.cjs.development.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var React = _interopDefault(require('react'));
-var throttle = _interopDefault(require('lodash/throttle'));
 var isEqual = _interopDefault(require('lodash/isEqual'));
+var throttle = _interopDefault(require('lodash/throttle'));
 var forma36ReactComponents = require('@contentful/forma-36-react-components');
 var tokens = _interopDefault(require('@contentful/forma-36-tokens'));
 var emotion = require('emotion');
@@ -73,256 +73,18 @@ function _extends() {
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
-}
-
-var FieldConnector = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(FieldConnector, _React$Component);
-
-  function FieldConnector(props) {
-    var _this;
 
-    _this = _React$Component.call(this, props) || this;
-    _this.unsubscribeErrors = null;
-    _this.unsubscribeDisabled = null;
-    _this.unsubscribeValue = null;
-    _this.setValue = throttle(function (value) {
-      if (_this.props.isEmptyValue(value === undefined ? null : value)) {
-        return new Promise(function (resolve, reject) {
-          _this.setState({
-            lastSetValue: undefined
-          }, function () {
-            _this.props.field.removeValue().then(resolve)["catch"](reject);
-          });
-        });
-      } else {
-        return new Promise(function (resolve, reject) {
-          _this.setState({
-            lastSetValue: value
-          }, function () {
-            _this.props.field.setValue(value).then(resolve)["catch"](reject);
-          });
-        });
-      }
-    }, _this.props.throttle, {
-      leading: _this.props.throttle === 0
-    });
-    var initialValue = props.field.getValue();
-    _this.state = {
-      isLocalValueChange: false,
-      externalReset: 0,
-      value: initialValue,
-      lastSetValue: initialValue,
-      lastRemoteValue: initialValue,
-      disabled: props.isInitiallyDisabled,
-      errors: []
-    };
-    return _this;
-  }
-
-  var _proto = FieldConnector.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    var _this2 = this;
-
-    var field = this.props.field;
-    this.unsubscribeErrors = field.onSchemaErrorsChanged(function (errors) {
-      _this2.setState({
-        errors: errors || []
-      });
-    });
-    this.unsubscribeDisabled = field.onIsDisabledChanged(function (disabled) {
-      _this2.setState({
-        disabled: disabled
-      });
-    });
-    this.unsubscribeValue = field.onValueChanged(function (value) {
-      _this2.setState(function (currentState) {
-        var isLocalValueChange = _this2.props.isEqualValues(value, currentState.lastSetValue);
-
-        var lastRemoteValue = isLocalValueChange ? currentState.lastRemoteValue : value;
-        var externalReset = currentState.externalReset + (isLocalValueChange ? 0 : 1);
-        return {
-          value: value,
-          lastSetValue: value,
-          lastRemoteValue: lastRemoteValue,
-          isLocalValueChange: isLocalValueChange,
-          externalReset: externalReset
-        };
-      });
-    });
-  };
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    if (typeof this.unsubscribeErrors === 'function') {
-      this.unsubscribeErrors();
-    }
-
-    if (typeof this.unsubscribeDisabled === 'function') {
-      this.unsubscribeDisabled();
-    }
-
-    if (typeof this.unsubscribeValue === 'function') {
-      this.unsubscribeValue();
-    }
-  };
-
-  _proto.render = function render() {
-    var childProps = _extends({}, this.state); // `lastSetValue` can be either the `setValue()` value right after it got called
-    // or the current remote value. No use-case for passing this to child.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-
-
-    delete childProps.lastSetValue;
-    return this.props.children(_extends({}, childProps, {
-      // @ts-expect-error
-      setValue: this.setValue
-    }));
-  };
-
-  return FieldConnector;
-}(React.Component);
-FieldConnector.defaultProps = {
-  children: function children() {
-    return null;
-  },
-  // eslint-disable-next-line
-  isEmptyValue: function isEmptyValue(value) {
-    return value === null || value === '';
-  },
-  // eslint-disable-next-line
-  isEqualValues: function isEqualValues(value1, value2) {
-    return isEqual(value1, value2);
-  },
-  throttle: 300
-};
-
-function PredefinedValuesError() {
-  return React.createElement(forma36ReactComponents.Note, {
-    noteType: "warning",
-    testId: "predefined-values-warning"
-  }, "The widget failed to initialize. You can fix the problem by providing predefined values under the validations tab in the field settings.");
+  _setPrototypeOf(subClass, superClass);
 }
 
-var styles = {
-  invalid: /*#__PURE__*/emotion.css({
-    color: tokens.colorRedBase
-  })
-};
-function CharCounter(props) {
-  var _cx;
-
-  var count = 0;
-
-  if (props.value) {
-    count = props.value.length;
-  }
-
-  var valid = count === 0 || props.checkConstraint(count);
-  return React.createElement("span", {
-    "data-status-code": valid ? null : 'invalid-size',
-    className: emotion.cx((_cx = {}, _cx[styles.invalid] = !valid, _cx))
-  }, count, " characters");
-}
-
-function CharValidation(props) {
-  var constraints = props.constraints;
-
-  if (constraints.type === 'max') {
-    return React.createElement("span", null, "Maximum ", constraints.max, " characters");
-  } else if (constraints.type === 'min') {
-    return React.createElement("span", null, "Requires at least ", constraints.min, " characters");
-  } else {
-    return React.createElement("span", null, "Requires between ", constraints.min, " and ", constraints.max, " characters");
-  }
-}
-
-function open(componentRenderer) {
-  var rootDom = null;
-
-  var getRoot = function getRoot() {
-    if (rootDom === null) {
-      rootDom = document.createElement('div');
-      rootDom.setAttribute('id', 'field-editor-modal-root');
-      document.body.appendChild(rootDom);
-    }
-
-    return rootDom;
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
   };
 
-  return new Promise(function (resolve) {
-    var currentConfig = {
-      onClose: onClose,
-      isShown: true
-    };
-
-    function render(_ref) {
-      var onClose = _ref.onClose,
-          isShown = _ref.isShown;
-      ReactDOM.render(componentRenderer({
-        onClose: onClose,
-        isShown: isShown
-      }), getRoot());
-    }
-
-    function onClose() {
-      currentConfig = _extends({}, currentConfig, {
-        isShown: false
-      });
-      render(currentConfig);
-      resolve.apply(void 0, arguments);
-      getRoot().remove();
-    }
-
-    render(currentConfig);
-  });
-}
-function openDialog(options, Component) {
-  var key = Date.now();
-  var size = isNumber(options.width) ? options.width + "px" : options.width;
-  return open(function (_ref2) {
-    var isShown = _ref2.isShown,
-        onClose = _ref2.onClose;
-
-    var onCloseHandler = function onCloseHandler() {
-      return onClose();
-    };
-
-    return React.createElement(forma36ReactComponents.Modal, {
-      key: key,
-      shouldCloseOnOverlayClick: options.shouldCloseOnOverlayClick || false,
-      shouldCloseOnEscapePress: options.shouldCloseOnEscapePress || false,
-      allowHeightOverflow: options.allowHeightOverflow || false,
-      position: options.position || 'center',
-      isShown: isShown,
-      onClose: onCloseHandler,
-      size: size || '700px'
-    }, function () {
-      return React.createElement(React.Fragment, null, options.title && React.createElement(forma36ReactComponents.Modal.Header, {
-        testId: "dialog-title",
-        title: options.title,
-        onClose: onCloseHandler
-      }), React.createElement("div", {
-        style: {
-          minHeight: options.minHeight || 'auto'
-        }
-      }, React.createElement(Component, {
-        onClose: onClose
-      })));
-    });
-  });
+  return _setPrototypeOf(o, p);
 }
-var ModalDialogLauncher = {
-  openDialog: openDialog
-};
-
-var ModalDialogLauncher$1 = {
-  __proto__: null,
-  open: open,
-  openDialog: openDialog,
-  'default': ModalDialogLauncher
-};
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1052,6 +814,267 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
   }
 });
 
+var FieldConnector = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(FieldConnector, _React$Component);
+
+  function FieldConnector(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.unsubscribeErrors = null;
+    _this.unsubscribeDisabled = null;
+    _this.unsubscribeValue = null;
+
+    _this.setValue = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(value) {
+        return runtime_1.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (_this.props.isEmptyValue(value != null ? value : null)) {
+                  _this.setState({
+                    value: undefined
+                  });
+                } else {
+                  _this.setState({
+                    value: value
+                  });
+                }
+
+                _context.next = 3;
+                return _this.triggerSetValueCallbacks(value);
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    _this.triggerSetValueCallbacks = throttle(function (value) {
+      return new Promise(function (resolve, reject) {
+        if (_this.props.isEmptyValue(value != null ? value : null)) {
+          _this.props.field.removeValue().then(resolve)["catch"](reject);
+        } else {
+          _this.props.field.setValue(value).then(resolve)["catch"](reject);
+        }
+      });
+    }, _this.props.throttle, {
+      leading: _this.props.throttle === 0
+    });
+    var initialValue = props.field.getValue();
+    _this.state = {
+      isLocalValueChange: false,
+      externalReset: 0,
+      value: initialValue,
+      lastRemoteValue: initialValue,
+      disabled: props.isInitiallyDisabled,
+      errors: []
+    };
+    return _this;
+  }
+
+  var _proto = FieldConnector.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var _this2 = this;
+
+    var field = this.props.field;
+    this.unsubscribeErrors = field.onSchemaErrorsChanged(function (errors) {
+      _this2.setState({
+        errors: errors || []
+      });
+    });
+    this.unsubscribeDisabled = field.onIsDisabledChanged(function (disabled) {
+      _this2.setState({
+        disabled: disabled
+      });
+    });
+    this.unsubscribeValue = field.onValueChanged(function (value) {
+      _this2.setState(function (currentState) {
+        var isLocalValueChange = _this2.props.isEqualValues(value, currentState.value);
+
+        var lastRemoteValue = isLocalValueChange ? currentState.lastRemoteValue : value;
+        var externalReset = currentState.externalReset + (isLocalValueChange ? 0 : 1);
+        return {
+          value: value,
+          lastRemoteValue: lastRemoteValue,
+          isLocalValueChange: isLocalValueChange,
+          externalReset: externalReset
+        };
+      });
+    });
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (typeof this.unsubscribeErrors === 'function') {
+      this.unsubscribeErrors();
+    }
+
+    if (typeof this.unsubscribeDisabled === 'function') {
+      this.unsubscribeDisabled();
+    }
+
+    if (typeof this.unsubscribeValue === 'function') {
+      this.unsubscribeValue();
+    }
+  };
+
+  _proto.render = function render() {
+    return this.props.children(_extends({}, this.state, {
+      setValue: this.setValue
+    }));
+  };
+
+  return FieldConnector;
+}(React.Component);
+FieldConnector.defaultProps = {
+  children: function children() {
+    return null;
+  },
+  // eslint-disable-next-line
+  isEmptyValue: function isEmptyValue(value) {
+    return value === null || value === '';
+  },
+  // eslint-disable-next-line
+  isEqualValues: function isEqualValues(value1, value2) {
+    return isEqual(value1, value2);
+  },
+  throttle: 300
+};
+
+function PredefinedValuesError() {
+  return React.createElement(forma36ReactComponents.Note, {
+    noteType: "warning",
+    testId: "predefined-values-warning"
+  }, "The widget failed to initialize. You can fix the problem by providing predefined values under the validations tab in the field settings.");
+}
+
+var styles = {
+  invalid: /*#__PURE__*/emotion.css({
+    color: tokens.red600
+  })
+};
+function CharCounter(props) {
+  var _cx;
+
+  var count = 0;
+
+  if (props.value) {
+    count = props.value.length;
+  }
+
+  var valid = count === 0 || props.checkConstraint(count);
+  return React.createElement("span", {
+    "data-status-code": valid ? null : 'invalid-size',
+    className: emotion.cx((_cx = {}, _cx[styles.invalid] = !valid, _cx))
+  }, count, " characters");
+}
+
+function CharValidation(props) {
+  var constraints = props.constraints;
+
+  if (constraints.type === 'max') {
+    return React.createElement("span", null, "Maximum ", constraints.max, " characters");
+  } else if (constraints.type === 'min') {
+    return React.createElement("span", null, "Requires at least ", constraints.min, " characters");
+  } else {
+    return React.createElement("span", null, "Requires between ", constraints.min, " and ", constraints.max, " characters");
+  }
+}
+
+function open(componentRenderer) {
+  var rootDom = null;
+
+  var getRoot = function getRoot() {
+    if (rootDom === null) {
+      rootDom = document.createElement('div');
+      rootDom.setAttribute('id', 'field-editor-modal-root');
+      document.body.appendChild(rootDom);
+    }
+
+    return rootDom;
+  };
+
+  return new Promise(function (resolve) {
+    var currentConfig = {
+      onClose: onClose,
+      isShown: true
+    };
+
+    function render(_ref) {
+      var onClose = _ref.onClose,
+          isShown = _ref.isShown;
+      ReactDOM.render(componentRenderer({
+        onClose: onClose,
+        isShown: isShown
+      }), getRoot());
+    }
+
+    function onClose() {
+      currentConfig = _extends({}, currentConfig, {
+        isShown: false
+      });
+      render(currentConfig);
+      resolve.apply(void 0, arguments);
+      getRoot().remove();
+    }
+
+    render(currentConfig);
+  });
+}
+function openDialog(options, Component) {
+  var key = Date.now();
+  var size = isNumber(options.width) ? options.width + "px" : options.width;
+  return open(function (_ref2) {
+    var isShown = _ref2.isShown,
+        onClose = _ref2.onClose;
+
+    var onCloseHandler = function onCloseHandler() {
+      return onClose();
+    };
+
+    return React.createElement(forma36ReactComponents.Modal, {
+      key: key,
+      shouldCloseOnOverlayClick: options.shouldCloseOnOverlayClick || false,
+      shouldCloseOnEscapePress: options.shouldCloseOnEscapePress || false,
+      allowHeightOverflow: options.allowHeightOverflow || false,
+      position: options.position || 'center',
+      isShown: isShown,
+      onClose: onCloseHandler,
+      size: size || '700px'
+    }, function () {
+      return React.createElement(React.Fragment, null, options.title && React.createElement(forma36ReactComponents.Modal.Header, {
+        testId: "dialog-title",
+        title: options.title,
+        onClose: onCloseHandler
+      }), React.createElement("div", {
+        style: {
+          minHeight: options.minHeight || 'auto'
+        }
+      }, React.createElement(Component, {
+        onClose: onClose
+      })));
+    });
+  });
+}
+var ModalDialogLauncher = {
+  openDialog: openDialog
+};
+
+var ModalDialogLauncher$1 = {
+  __proto__: null,
+  open: open,
+  openDialog: openDialog,
+  'default': ModalDialogLauncher
+};
+
 function titleOrDefault(title, defaultTitle) {
   if (!isString(title)) {
     return defaultTitle;
@@ -1359,6 +1382,81 @@ var constraints = {
   makeChecker: makeChecker
 };
 
+/**
+ * Checks whether the passed content type matches one of our valid MIME types
+ */
+function isValidImage(file) {
+  var validMimeTypes = ['image/bmp', 'image/x-windows-bmp', 'image/gif', 'image/webp', // This is not a valid MIME type but we supported it in the past.
+  'image/jpg', 'image/jpeg', 'image/pjpeg', 'image/x-jps', 'image/png', 'image/svg+xml'];
+  return validMimeTypes.includes(file.contentType);
+}
+
+/**
+ * Transforms a number into a localized string (en-US)
+ * toLocaleString(1000); // "1,000"
+ * @param {Number} number
+ */
+function toLocaleString(number) {
+  return number.toLocaleString('en-US');
+}
+
+function formatFloat(value, localize) {
+  return localize ? toLocaleString(value) : value.toFixed(2) // remove floating point if not necessary
+  .replace(/\.(0)*$|0*$/, '');
+}
+/**
+ * Make a storage unit number more readable by making them smaller
+ * shortenStorageUnit(1000, 'GB'); // "1 TB"
+ * shortenStorageUnit(0.001, 'TB'); // "1 GB"
+ * @param value
+ * @param uom Unit of measure
+ * @returns
+ */
+
+
+function shortenStorageUnit(value, uom) {
+  if (value <= 0) {
+    return '0 B';
+  }
+
+  var units = ['PB', 'TB', 'GB', 'MB', 'KB', 'B'];
+
+  var getBigger = function getBigger(unit) {
+    return units[units.indexOf(unit) - 1];
+  };
+
+  var getSmaller = function getSmaller(unit) {
+    return units[units.indexOf(unit) + 1];
+  };
+
+  var isBiggestUnit = function isBiggestUnit(unit) {
+    return units.indexOf(unit) === 0;
+  };
+
+  var isSmallestUnit = function isSmallestUnit(unit) {
+    return units.indexOf(unit) === units.length - 1;
+  };
+
+  var reduce = function reduce(number, unit) {
+    if (number < 0.99 && !isSmallestUnit(unit)) {
+      return reduce(number * 1000, getSmaller(unit));
+    } else if (number >= 1000 && !isBiggestUnit(unit)) {
+      return reduce(number / 1000, getBigger(unit));
+    } else {
+      return {
+        number: number,
+        unit: unit
+      };
+    }
+  };
+
+  var _reduce = reduce(value, uom),
+      number = _reduce.number,
+      unit = _reduce.unit;
+
+  return formatFloat(number, false) + " " + unit;
+}
+
 exports.CharCounter = CharCounter;
 exports.CharValidation = CharValidation;
 exports.ConstraintsUtils = constraints;
@@ -1366,4 +1464,7 @@ exports.FieldConnector = FieldConnector;
 exports.ModalDialogLauncher = ModalDialogLauncher$1;
 exports.PredefinedValuesError = PredefinedValuesError;
 exports.entityHelpers = entityHelpers;
+exports.isValidImage = isValidImage;
+exports.shortenStorageUnit = shortenStorageUnit;
+exports.toLocaleString = toLocaleString;
 //# sourceMappingURL=field-editor-shared.cjs.development.js.map