Files F101488419

uncontrollable.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Mon, Feb 10, 22:53

uncontrollable.js
View Options

	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;
	}

Event Timeline