@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(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
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, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(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 _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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : 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; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } /* 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) {
    _inherits(_class, _PureComponent);
    var _super = _createSuper(_class);
    function _class(props) {
      var _this;
      _classCallCheck(this, _class);
      _this = _super.call(this, props);
      _this.handle = _handle.handle.bind(_assertThisInitialized(_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;
    }
    _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;
      }
    }]);
    return _class;
  }(_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;