@enact/ui/Changeable/Changeable.js

A collection of simplified unstyled cross-platform UI components for Enact

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.Changeable = void 0;
var _handle = require("@enact/core/handle");
var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
var _util = require("@enact/core/util");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _warning = _interopRequireDefault(require("warning"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == typeof e || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); } /* eslint-disable react/sort-prop-types */ /**
 * A higher-order component that adds state management for a single prop via a single event handler.
 *
 * @module ui/Changeable
 * @exports Changeable
 */ /**
 * Default config for {@link ui/Changeable.Changeable}.
 *
 * @memberof ui/Changeable.Changeable
 * @hocconfig
 */
var defaultConfig = {
  /**
   * Configures the prop name to pass the callback to change the value
   *
   * @type {String}
   * @default 'onChange'
   * @memberof ui/Changeable.Changeable.defaultConfig
   */
  change: 'onChange',
  /**
   * Configures the prop name to pass the current value
   *
   * @type {String}
   * @default 'value'
   * @memberof ui/Changeable.Changeable.defaultConfig
   */
  prop: 'value'
};

/**
 * A higher-order component that adds state management to a component for a single prop via
 * a single event callback.
 *
 * Applying `Changeable` to a component will pass two additional props: the current value from state
 * and an event callback to invoke when the value changes. By default, the value is passed in the
 * `value` prop and the callback is passed in the `onChange` callback but both are configurable
 * through the HOC config object.
 *
 * If `value` is passed to `Changeable`, the HOC assumes that the value is managed elsewhere and it
 * will not update its internal state. To set an initial value, use `defaultValue` instead.
 *
 * To update the value from the wrapped component, call `onChange` with an object containing a
 * `value` member with the new value. `Changeable` will update its internal state and pass the
 * updated value back down to the wrapped component.
 *
 * *Note:* If the `prop` is overridden, the property names to set the default value and current
 * value change correspondingly.
 *
 * @class Changeable
 * @memberof ui/Changeable
 * @hoc
 * @public
 */
var Changeable = exports.Changeable = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
  var _Class;
  var prop = config.prop,
    change = config.change;
  var defaultPropKey = 'default' + (0, _util.cap)(prop);
  return _Class = /*#__PURE__*/function (_PureComponent) {
    function _Class(props) {
      var _this;
      _classCallCheck(this, _Class);
      _this = _callSuper(this, _Class, [props]);
      _this.handle = _handle.handle.bind(_this);
      _this.handleChange = _this.handle((0, _handle.forProp)('disabled', false), (0, _handle.forward)(change), function (_ref) {
        var value = _ref[prop];
        if (!_this.state.controlled) {
          _this.setState(function (_ref2) {
            var oldValue = _ref2.value;
            return value !== oldValue ? {
              value: value
            } : null;
          });
        }
      });
      _this.state = {
        rendered: false,
        value: null,
        controlled: prop in props
      };
      process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!(prop in props && defaultPropKey in props), "Do not specify both '".concat(prop, "' and '").concat(defaultPropKey, "' for Changeable instances. '").concat(defaultPropKey, "' will be ignored.\n\t\t\t\t'").concat(defaultPropKey, "' will be ignored unless '").concat(prop, "' is 'null' or 'undefined'.")) : void 0;
      return _this;
    }
    _inherits(_Class, _PureComponent);
    return _createClass(_Class, [{
      key: "render",
      value: function render() {
        var props = Object.assign({}, this.props);
        if (change) props[change] = this.handleChange;
        if (prop) props[prop] = this.state.value;
        delete props[defaultPropKey];
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, props));
      }
    }], [{
      key: "getDerivedStateFromProps",
      value: function getDerivedStateFromProps(props, state) {
        if (state.rendered === false) {
          return {
            rendered: true,
            value: props[prop] != null ? props[prop] : props[defaultPropKey]
          };
        } else if (state.controlled) {
          if (state.value !== props[prop]) {
            return {
              value: props[prop]
            };
          } else {
            return null;
          }
        }
        process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!(typeof props[prop] !== 'undefined'), "'".concat(prop, "' specified for an uncontrolled instance of Changeable and will be\n\t\t\t\tignored. To make this instance of Changeable controlled, '").concat(prop, "' should be\n\t\t\t\tspecified at creation.")) : void 0;
        return null;
      }
    }]);
  }(_react.PureComponent), _Class.displayName = 'Changeable', _Class.propTypes = /** @lends ui/Changeable.Changeable.prototype */_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, change, _propTypes["default"].func), defaultPropKey, _propTypes["default"].any), prop, _propTypes["default"].any), "disabled", _propTypes["default"].bool), _Class.defaultProps = {
    disabled: false
  }, _Class;
});
var _default = exports["default"] = Changeable;