import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; import _extends from "@babel/runtime/helpers/esm/extends"; import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose"; var _jsxFileName = "/Users/jquense/src/uncontrollable/src/uncontrollable.js"; import React from 'react'; import { polyfill } from 'react-lifecycles-compat'; import invariant from 'invariant'; import * as Utils from './utils'; export default function uncontrollable(Component, controlledValues, methods) { if (methods === void 0) { methods = []; } var displayName = Component.displayName || Component.name || 'Component'; var canAcceptRef = Utils.canAcceptRef(Component); var controlledProps = Object.keys(controlledValues); var PROPS_TO_OMIT = controlledProps.map(Utils.defaultKey); !(canAcceptRef || !methods.length) ? process.env.NODE_ENV !== "production" ? invariant(false, '[uncontrollable] stateless function components cannot pass through methods ' + 'because they have no associated instances. Check component: ' + displayName + ', ' + 'attempting to pass through methods: ' + methods.join(', ')) : invariant(false) : void 0; var UncontrolledComponent = /*#__PURE__*/ function (_React$Component) { _inheritsLoose(UncontrolledComponent, _React$Component); function UncontrolledComponent() { var _this; for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this; _this.handlers = Object.create(null); controlledProps.forEach(function (propName) { var handlerName = controlledValues[propName]; var handleChange = function handleChange(value) { if (_this.props[handlerName]) { var _this$props; _this._notifying = true; for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { args[_key2 - 1] = arguments[_key2]; } (_this$props = _this.props)[handlerName].apply(_this$props, [value].concat(args)); _this._notifying = false; } if (!_this.unmounted) _this.setState(function (_ref) { var _extends2; var values = _ref.values; return { values: _extends(Object.create(null), values, (_extends2 = {}, _extends2[propName] = value, _extends2)) }; }); }; _this.handlers[handlerName] = handleChange; }); if (methods.length) _this.attachRef = function (ref) { _this.inner = ref; }; var values = Object.create(null); controlledProps.forEach(function (key) { values[key] = _this.props[Utils.defaultKey(key)]; }); _this.state = { values: values, prevProps: {} }; return _this; } var _proto = UncontrolledComponent.prototype; _proto.shouldComponentUpdate = function shouldComponentUpdate() { //let setState trigger the update return !this._notifying; }; UncontrolledComponent.getDerivedStateFromProps = function getDerivedStateFromProps(props, _ref2) { var values = _ref2.values, prevProps = _ref2.prevProps; var nextState = { values: _extends(Object.create(null), values), prevProps: {} }; controlledProps.forEach(function (key) { /** * If a prop switches from controlled to Uncontrolled * reset its value to the defaultValue */ nextState.prevProps[key] = props[key]; if (!Utils.isProp(props, key) && Utils.isProp(prevProps, key)) { nextState.values[key] = props[Utils.defaultKey(key)]; } }); return nextState; }; _proto.componentWillUnmount = function componentWillUnmount() { this.unmounted = true; }; _proto.render = function render() { var _this2 = this; var _this$props2 = this.props, innerRef = _this$props2.innerRef, props = _objectWithoutPropertiesLoose(_this$props2, ["innerRef"]); PROPS_TO_OMIT.forEach(function (prop) { delete props[prop]; }); var newProps = {}; controlledProps.forEach(function (propName) { var propValue = _this2.props[propName]; newProps[propName] = propValue !== undefined ? propValue : _this2.state.values[propName]; }); return React.createElement(Component, _extends({}, props, newProps, this.handlers, { ref: innerRef || this.attachRef })); }; return UncontrolledComponent; }(React.Component); polyfill(UncontrolledComponent); UncontrolledComponent.displayName = "Uncontrolled(" + displayName + ")"; UncontrolledComponent.propTypes = _extends({ innerRef: function innerRef() {} }, Utils.uncontrolledPropTypes(controlledValues, displayName)); methods.forEach(function (method) { UncontrolledComponent.prototype[method] = function $proxiedMethod() { var _this$inner; return (_this$inner = this.inner)[method].apply(_this$inner, arguments); }; }); var WrappedComponent = UncontrolledComponent; if (React.forwardRef) { WrappedComponent = React.forwardRef(function (props, ref) { return React.createElement(UncontrolledComponent, _extends({}, props, { innerRef: ref, __source: { fileName: _jsxFileName, lineNumber: 128 }, __self: this })); }); WrappedComponent.propTypes = UncontrolledComponent.propTypes; } WrappedComponent.ControlledComponent = Component; /** * useful when wrapping a Component and you want to control * everything */ WrappedComponent.deferControlTo = function (newComponent, additions, nextMethods) { if (additions === void 0) { additions = {}; } return uncontrollable(newComponent, _extends({}, controlledValues, additions), nextMethods); }; return WrappedComponent; }