123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170 |
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
- 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
- }));
- });
- 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;
- }
|