Dashboard sipadu mbip
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

uncontrollable.js 5.8KB

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