carbon-react 101.4.5 → 102.0.0

package/lib/components/decimal/decimal.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,268 +21,211 @@ var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-conte
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
-let Decimal = /*#__PURE__*/function (_React$Component) {
-  _inherits(Decimal, _React$Component);
-
-  var _super = _createSuper(Decimal);
-
-  function Decimal(props, context) {
-    var _this;
-
-    _classCallCheck(this, Decimal);
-
-    _this = _super.call(this, props, context);
-
-    _defineProperty(_assertThisInitialized(_this), "emptyValue", _this.props.allowEmptyValue ? "" : "0.00");
-
-    _defineProperty(_assertThisInitialized(_this), "callOnChange", () => {
-      if (_this.props.onChange) {
-        _this.props.onChange(_this.createEvent());
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onChange", ev => {
-      const {
-        target: {
-          value
-        }
-      } = ev;
-
-      _this.setState({
-        value: _this.toStandardDecimal(value),
-        visibleValue: value
-      }, () => {
-        _this.callOnChange();
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onBlur", () => {
-      let shouldCallOnChange = false;
-
-      _this.setState(({
-        value,
-        visibleValue
-      }) => {
-        if (!visibleValue) {
-          shouldCallOnChange = value !== _this.emptyValue;
-          return {
-            value: _this.emptyValue,
-            visibleValue: _this.formatValue(_this.emptyValue)
-          };
-        }
-
-        return {
-          visibleValue: _this.formatValue(value)
-        };
-      }, () => {
-        if (shouldCallOnChange) {
-          _this.callOnChange();
-        }
+const Decimal = ({
+  align = "right",
+  defaultValue,
+  precision = 2,
+  inputWidth,
+  readOnly,
+  onChange,
+  onBlur,
+  onKeyPress,
+  id,
+  name,
+  allowEmptyValue = false,
+  required,
+  locale,
+  value,
+  ...rest
+}) => {
+  const l = (0, _react.useContext)(_i18nContext.default);
+  const emptyValue = allowEmptyValue ? "" : "0.00";
+
+  const getSafeValueProp = initialValue => {
+    // We're intentionally preventing the use of number values to help prevent any unintentional rounding issues
+    (0, _invariant.default)(typeof initialValue === "string", "Decimal `value` prop must be a string");
+
+    if (initialValue && !allowEmptyValue) {
+      (0, _invariant.default)(initialValue !== "", "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or `0.00`");
+    }
 
-        if (_this.props.onBlur) {
-          _this.props.onBlur(_this.createEvent());
-        }
-      });
-    });
+    return initialValue;
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "createEvent", () => {
-      const standardVisible = _this.toStandardDecimal(_this.state.visibleValue);
-
-      const formattedValue = _this.isNaN(standardVisible) ? _this.state.visibleValue : _this.formatValue(standardVisible);
-      return {
-        target: {
-          name: _this.props.name,
-          id: _this.props.id,
-          value: {
-            rawValue: _this.state.value,
-            formattedValue
-          }
-        }
-      };
-    });
+  const getSeparator = (0, _react.useCallback)(separatorType => {
+    const numberWithGroupAndDecimalSeparator = 10000.1;
+    return Intl.NumberFormat(locale || l.locale()).formatToParts(numberWithGroupAndDecimalSeparator).find(part => part.type === separatorType).value;
+  }, [l, locale]);
+  const isNaN = (0, _react.useCallback)(valueToTest => {
+    return Number.isNaN(Number(valueToTest));
+  }, []);
+  /**
+   * Format a user defined value
+   */
 
-    _defineProperty(_assertThisInitialized(_this), "isNaN", value => {
-      return Number.isNaN(Number(value));
-    });
+  const formatValue = (0, _react.useCallback)(valueToFormat => {
+    if (isNaN(valueToFormat)) {
+      return valueToFormat;
+    }
+    /* Guards against any white-space only strings like "   " being 
+     mishandled and returned as `NaN` for the value displayed in the textbox */
 
-    _defineProperty(_assertThisInitialized(_this), "getSafeValueProp", isInitialValue => {
-      const {
-        value,
-        allowEmptyValue
-      } = _this.props; // We're intentionally preventing the use of number values to help prevent any unintentional rounding issues
 
-      (0, _invariant.default)(typeof value === "string", "Decimal `value` prop must be a string");
+    if (valueToFormat === "" || valueToFormat.match(/\s+/g)) {
+      return valueToFormat;
+    }
 
-      if (isInitialValue && !allowEmptyValue) {
-        (0, _invariant.default)(value !== "", "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or `0.00`");
-      }
+    const separator = getSeparator("decimal");
+    const [integer, remainder] = valueToFormat.split(".");
+    const formattedInteger = Intl.NumberFormat(locale || l.locale(), {
+      maximumFractionDigits: 0
+    }).format(integer);
+    let formattedNumber = formattedInteger;
+
+    if ((remainder === null || remainder === void 0 ? void 0 : remainder.length) > precision) {
+      formattedNumber += `${separator + remainder}`;
+    } else if ((remainder === null || remainder === void 0 ? void 0 : remainder.length) <= precision) {
+      formattedNumber += `${separator + remainder + "0".repeat(precision - remainder.length)}`;
+    } else {
+      formattedNumber += `${precision ? separator + "0".repeat(precision) : ""}`;
+    }
 
-      return value;
-    });
+    return formattedNumber;
+  }, [getSeparator, isNaN, l, locale, precision]); // Return previous value before state is changed. Used to compare prevState and newState.
 
-    _defineProperty(_assertThisInitialized(_this), "removeDelimiters", value => {
-      const delimiterMatcher = new RegExp(`[\\${_this.getSeparator("group")} ]*`, "g");
-      return value.replace(delimiterMatcher, "");
+  function usePrevious(arg) {
+    const ref = (0, _react.useRef)();
+    (0, _react.useEffect)(() => {
+      ref.current = arg;
     });
+    return ref.current;
+  }
+  /**
+   * Determine if the precision value has changed from the previous ref value for precision
+   */
 
-    _defineProperty(_assertThisInitialized(_this), "formatValue", value => {
-      if (_this.isNaN(value)) {
-        return value;
-      }
-      /* Guards against any white-space only strings like "   " being 
-         mishandled and returned as `NaN` for visibleValue */
-
-
-      if (value === "" || value.match(/\s+/g)) {
-        return value;
-      }
-
-      const separator = _this.getSeparator("decimal");
-
-      const [integer, remainder] = value.split(".");
-      const formattedInteger = Intl.NumberFormat(_this.props.locale || _this.context.locale(), {
-        maximumFractionDigits: 0
-      }).format(integer);
-      let formattedNumber = formattedInteger;
-
-      if (remainder && remainder.length > _this.props.precision) {
-        formattedNumber += `${separator + remainder}`;
-      } else if (remainder && remainder.length <= _this.props.precision) {
-        formattedNumber += `${separator + remainder + "0".repeat(_this.props.precision - remainder.length)}`;
-      } else {
-        formattedNumber += `${_this.props.precision ? separator + "0".repeat(_this.props.precision) : ""}`;
-      }
 
-      return formattedNumber;
-    });
+  const prevPrecisionValue = usePrevious(precision);
+  (0, _react.useEffect)(() => {
+    if (prevPrecisionValue && prevPrecisionValue !== precision) {
+      // eslint-disable-next-line no-console
+      console.error("Decimal `precision` prop has changed value. Changing the Decimal `precision` prop has no effect.");
+    }
+  }, [precision]);
+  const removeDelimiters = (0, _react.useCallback)(valueToFormat => {
+    const delimiterMatcher = new RegExp(`[\\${getSeparator("group")} ]*`, "g");
+    return valueToFormat.replace(delimiterMatcher, "");
+  }, [getSeparator]);
+  /**
+   * Convert raw input to a standard decimal format
+   */
 
-    _defineProperty(_assertThisInitialized(_this), "toStandardDecimal", i18nValue => {
-      const valueWithoutNBS = _this.getSeparator("group").match(/\s+/) && !i18nValue.match(/\s{2,}/) ? i18nValue.replace(/\s+/g, "") : i18nValue;
-      /* If a value is passed in that is a number but has too many delimiters in succession, we want to handle this
-      value without formatting it or removing delimiters. We also want to consider that,
-      if a value consists of only delimiters, we want to treat that 
-      value in the same way as if the value was NaN. We want to pass this value to the 
-      formatValue function, before the delimiters can be removed. */
+  const toStandardDecimal = (0, _react.useCallback)(i18nValue => {
+    const valueWithoutNBS = getSeparator("group").match(/\s+/) && !i18nValue.match(/\s{2,}/) ? i18nValue.replace(/\s+/g, "") : i18nValue;
+    /* If a value is passed in that is a number but has too many delimiters in succession, we want to handle this
+    value without formatting it or removing delimiters. We also want to consider that,
+    if a value consists of only delimiters, we want to treat that 
+    value in the same way as if the value was NaN. We want to pass this value to the 
+    formatValue function, before the delimiters can be removed. */
 
-      const errorsWithDelimiter = new RegExp(`([^A-Za-z0-9]{2,})|(^[^A-Za-z0-9-]+)|([^0-9a-z-,.])|([^0-9-,.]+)|([W,.])$`, "g");
+    const errorsWithDelimiter = new RegExp(`([^A-Za-z0-9]{2,})|(^[^A-Za-z0-9-]+)|([^0-9a-z-,.])|([^0-9-,.]+)|([W,.])$`, "g");
+    const separator = getSeparator("decimal");
+    const separatorRegex = new RegExp(separator === "." ? `\\${separator}` : separator, "g");
 
-      const separator = _this.getSeparator("decimal");
+    if (valueWithoutNBS.match(errorsWithDelimiter) || (valueWithoutNBS.match(separatorRegex) || []).length > 1) {
+      return valueWithoutNBS;
+    }
 
-      const separatorRegex = new RegExp(separator === "." ? `\\${separator}` : separator, "g");
+    const withoutDelimiters = removeDelimiters(valueWithoutNBS);
+    return withoutDelimiters.replace(new RegExp(`\\${separator}`, "g"), ".");
+  }, [getSeparator, removeDelimiters]);
+  const decimalValue = getSafeValueProp(defaultValue || value || emptyValue);
+  const [stateValue, setStateValue] = (0, _react.useState)(isNaN(toStandardDecimal(decimalValue)) ? decimalValue : formatValue(decimalValue));
 
-      if (valueWithoutNBS.match(errorsWithDelimiter) || (valueWithoutNBS.match(separatorRegex) || []).length > 1) {
-        return valueWithoutNBS;
+  const createEvent = (formatted, raw) => {
+    return {
+      target: {
+        name,
+        id,
+        value: {
+          formattedValue: formatValue(toStandardDecimal(formatted)),
+          rawValue: raw || toStandardDecimal(formatted)
+        }
       }
-
-      const withoutDelimiters = _this.removeDelimiters(valueWithoutNBS);
-
-      return withoutDelimiters.replace(new RegExp(`\\${separator}`, "g"), ".");
-    });
-
-    const isControlled = _this.isControlled();
-
-    const _value = isControlled ? _this.getSafeValueProp(true) : _this.props.defaultValue || _this.emptyValue;
-
-    _this.state = {
-      value: _value,
-      visibleValue: _this.formatValue(_value),
-      isControlled
     };
-    return _this;
-  }
+  };
+
+  const handleOnChange = ev => {
+    const {
+      value: val
+    } = ev.target;
+    setStateValue(val);
+    if (onChange) onChange(createEvent(val));
+  };
+
+  const handleOnBlur = ev => {
+    const {
+      value: updatedValue
+    } = ev.target;
+    let event;
+
+    if (updatedValue) {
+      const standardVisible = toStandardDecimal(updatedValue);
+      const formattedValue = isNaN(standardVisible) ? updatedValue : formatValue(standardVisible);
+      event = createEvent(formattedValue, standardVisible);
+      setStateValue(formattedValue);
+    } else {
+      event = createEvent(emptyValue);
+      setStateValue(emptyValue);
+    }
 
-  _createClass(Decimal, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      const message = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-      const isControlled = this.isControlled();
-      (0, _invariant.default)(this.state.isControlled === isControlled, message);
+    if (onBlur) onBlur(event);
+  };
 
-      if (prevProps.precision !== this.props.precision) {
-        // eslint-disable-next-line no-console
-        console.error("Decimal `precision` prop has changed value. Changing the Decimal `precision` prop has no effect.");
-      }
+  const isComponentControlled = value !== undefined;
+  const prevControlledState = usePrevious(isComponentControlled);
+  (0, _react.useEffect)(() => {
+    const message = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
+    (0, _invariant.default)(prevControlledState !== isComponentControlled, message);
+  }, [isComponentControlled]);
+  (0, _react.useEffect)(() => {
+    const unformattedValue = toStandardDecimal(stateValue);
 
-      if (isControlled) {
-        const valueProp = this.getSafeValueProp();
+    if (isComponentControlled) {
+      const valueProp = getSafeValueProp(value);
 
-        if (valueProp !== prevState.value) {
-          this.setState({
-            value: valueProp,
-            visibleValue: this.formatValue(valueProp)
-          });
-        }
+      if (unformattedValue !== valueProp) {
+        setStateValue(formatValue(value));
       }
-    }
-  }, {
-    key: "isControlled",
-    value:
-    /**
-     * Determine if the component is controlled at the time of call
-     */
-    function isControlled() {
-      return this.props.value !== undefined;
-    }
-  }, {
-    key: "getSeparator",
-    value: function getSeparator(separatorType) {
-      const numberWithGroupAndDecimalSeparator = 10000.1;
-      return Intl.NumberFormat(this.props.locale || this.context.locale()).formatToParts(numberWithGroupAndDecimalSeparator).find(part => part.type === separatorType).value;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      const {
-        name,
-        defaultValue,
-        locale,
-        ...rest
-      } = this.props;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, rest, {
-        onChange: this.onChange,
-        onBlur: this.onBlur,
-        value: this.state.visibleValue
-      })), /*#__PURE__*/_react.default.createElement("input", {
-        name: name,
-        value: this.toStandardDecimal(this.state.visibleValue),
-        type: "hidden",
-        "data-component": "hidden-input"
-      }));
-    }
-  }]);
-
-  return Decimal;
-}(_react.default.Component);
-
-_defineProperty(Decimal, "maxPrecision", 15);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [value]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
+    onKeyPress: onKeyPress,
+    align: align,
+    readOnly: readOnly,
+    required: required,
+    inputWidth: inputWidth,
+    onChange: handleOnChange,
+    onBlur: handleOnBlur,
+    value: stateValue,
+    "data-component": "decimal"
+  }, rest)), /*#__PURE__*/_react.default.createElement("input", {
+    name: name,
+    value: toStandardDecimal(stateValue),
+    type: "hidden",
+    "data-component": "hidden-input"
+  }));
+};
 
-Decimal.contextType = _i18nContext.default;
 Decimal.propTypes = {
   /** Styled-system margin props */
   ...marginPropTypes,
@@ -300,7 +243,7 @@ Decimal.propTypes = {
    */
   // eslint-disable-next-line consistent-return
   precision: props => {
-    if (!Number.isInteger(props.precision) || props.precision < 0 || props.precision > Decimal.maxPrecision) {
+    if (!Number.isInteger(props.precision) || props.precision < 0 || props.precision > 15) {
       return new Error("Precision prop must be a number greater than 0 or equal to or less than 15.");
     }
   },
@@ -366,11 +309,5 @@ Decimal.propTypes = {
   /** Aria label for rendered help component */
   helpAriaLabel: _propTypes.default.string
 };
-Decimal.defaultProps = {
-  align: "right",
-  precision: 2,
-  allowEmptyValue: false,
-  "data-component": "decimal"
-};
 var _default = Decimal;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "101.4.5",
+  "version": "102.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {