Dashboard sipadu mbip
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

uncontrollable.js 6.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. "use strict";
  2. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  4. exports.__esModule = true;
  5. exports.default = uncontrollable;
  6. var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
  7. var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  8. var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
  9. var _react = _interopRequireDefault(require("react"));
  10. var _reactLifecyclesCompat = require("react-lifecycles-compat");
  11. var _invariant = _interopRequireDefault(require("invariant"));
  12. var Utils = _interopRequireWildcard(require("./utils"));
  13. function uncontrollable(Component, controlledValues, methods) {
  14. if (methods === void 0) {
  15. methods = [];
  16. }
  17. var displayName = Component.displayName || Component.name || 'Component';
  18. var canAcceptRef = Utils.canAcceptRef(Component);
  19. var controlledProps = Object.keys(controlledValues);
  20. var PROPS_TO_OMIT = controlledProps.map(Utils.defaultKey);
  21. !(canAcceptRef || !methods.length) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(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;
  22. var UncontrolledComponent =
  23. /*#__PURE__*/
  24. function (_React$Component) {
  25. (0, _inheritsLoose2.default)(UncontrolledComponent, _React$Component);
  26. function UncontrolledComponent() {
  27. var _this;
  28. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  29. args[_key] = arguments[_key];
  30. }
  31. _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
  32. _this.handlers = Object.create(null);
  33. controlledProps.forEach(function (propName) {
  34. var handlerName = controlledValues[propName];
  35. var handleChange = function handleChange(value) {
  36. if (_this.props[handlerName]) {
  37. var _this$props;
  38. _this._notifying = true;
  39. for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
  40. args[_key2 - 1] = arguments[_key2];
  41. }
  42. (_this$props = _this.props)[handlerName].apply(_this$props, [value].concat(args));
  43. _this._notifying = false;
  44. }
  45. if (!_this.unmounted) _this.setState(function (_ref) {
  46. var _extends2;
  47. var values = _ref.values;
  48. return {
  49. values: (0, _extends3.default)(Object.create(null), values, (_extends2 = {}, _extends2[propName] = value, _extends2))
  50. };
  51. });
  52. };
  53. _this.handlers[handlerName] = handleChange;
  54. });
  55. if (methods.length) _this.attachRef = function (ref) {
  56. _this.inner = ref;
  57. };
  58. var values = Object.create(null);
  59. controlledProps.forEach(function (key) {
  60. values[key] = _this.props[Utils.defaultKey(key)];
  61. });
  62. _this.state = {
  63. values: values,
  64. prevProps: {}
  65. };
  66. return _this;
  67. }
  68. var _proto = UncontrolledComponent.prototype;
  69. _proto.shouldComponentUpdate = function shouldComponentUpdate() {
  70. //let setState trigger the update
  71. return !this._notifying;
  72. };
  73. UncontrolledComponent.getDerivedStateFromProps = function getDerivedStateFromProps(props, _ref2) {
  74. var values = _ref2.values,
  75. prevProps = _ref2.prevProps;
  76. var nextState = {
  77. values: (0, _extends3.default)(Object.create(null), values),
  78. prevProps: {}
  79. };
  80. controlledProps.forEach(function (key) {
  81. /**
  82. * If a prop switches from controlled to Uncontrolled
  83. * reset its value to the defaultValue
  84. */
  85. nextState.prevProps[key] = props[key];
  86. if (!Utils.isProp(props, key) && Utils.isProp(prevProps, key)) {
  87. nextState.values[key] = props[Utils.defaultKey(key)];
  88. }
  89. });
  90. return nextState;
  91. };
  92. _proto.componentWillUnmount = function componentWillUnmount() {
  93. this.unmounted = true;
  94. };
  95. _proto.render = function render() {
  96. var _this2 = this;
  97. var _this$props2 = this.props,
  98. innerRef = _this$props2.innerRef,
  99. props = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["innerRef"]);
  100. PROPS_TO_OMIT.forEach(function (prop) {
  101. delete props[prop];
  102. });
  103. var newProps = {};
  104. controlledProps.forEach(function (propName) {
  105. var propValue = _this2.props[propName];
  106. newProps[propName] = propValue !== undefined ? propValue : _this2.state.values[propName];
  107. });
  108. return _react.default.createElement(Component, (0, _extends3.default)({}, props, newProps, this.handlers, {
  109. ref: innerRef || this.attachRef
  110. }));
  111. };
  112. return UncontrolledComponent;
  113. }(_react.default.Component);
  114. (0, _reactLifecyclesCompat.polyfill)(UncontrolledComponent);
  115. UncontrolledComponent.displayName = "Uncontrolled(" + displayName + ")";
  116. UncontrolledComponent.propTypes = (0, _extends3.default)({
  117. innerRef: function innerRef() {}
  118. }, Utils.uncontrolledPropTypes(controlledValues, displayName));
  119. methods.forEach(function (method) {
  120. UncontrolledComponent.prototype[method] = function $proxiedMethod() {
  121. var _this$inner;
  122. return (_this$inner = this.inner)[method].apply(_this$inner, arguments);
  123. };
  124. });
  125. var WrappedComponent = UncontrolledComponent;
  126. if (_react.default.forwardRef) {
  127. WrappedComponent = _react.default.forwardRef(function (props, ref) {
  128. return _react.default.createElement(UncontrolledComponent, (0, _extends3.default)({}, props, {
  129. innerRef: ref
  130. }));
  131. });
  132. WrappedComponent.propTypes = UncontrolledComponent.propTypes;
  133. }
  134. WrappedComponent.ControlledComponent = Component;
  135. /**
  136. * useful when wrapping a Component and you want to control
  137. * everything
  138. */
  139. WrappedComponent.deferControlTo = function (newComponent, additions, nextMethods) {
  140. if (additions === void 0) {
  141. additions = {};
  142. }
  143. return uncontrollable(newComponent, (0, _extends3.default)({}, controlledValues, additions), nextMethods);
  144. };
  145. return WrappedComponent;
  146. }
  147. module.exports = exports["default"];