react-with-hoc
Version:
Work with React and HOCs (Higher-Order Components)
65 lines (63 loc) • 10.3 kB
JavaScript
;
var _react = require("react");
var _newHoc = require("../utils/newHoc");
function noop() {}
/**
* like `useState` or you can pass properties to the component to make it controllable
* @example
* const CounterWithState = withState("count", { init: 0 })(function Counter({count, setCount}: {count: number; setCount: Dispatch<SetStateAction<number>>}) {
* return <button onClick={() => setCount(count + 1)}>{count}</button>;
* });
* // using CounterWithState as self controlled
* function IndependentCounters() {
* return <>
* <CounterWithState />
* <CounterWithState />
* </>;
* }
* <IndependentCounters /> // will render 2 buttons that can count independently
*
* // using CounterWithState as parent controlled
* function SameCounters() {
* const [count, setCount] = useState(0);
* return <>
* <CounterWithState count={count} setCount={setCount} />
* <CounterWithState count={count} setCount={setCount} />
* </>;
* }
* <SameCounters /> // will render 2 buttons with the same count
*/
const withState = exports.withState = (0, _newHoc.newHoc)(function withState(Component, stateName, {
init,
setterName = "set" + stateName.charAt(0).toUpperCase() + stateName.slice(1)
} = {}) {
let locallyControlled;
function getUseState(props) {
if (process.env.NODE_ENV !== "production" && locallyControlled !== undefined) {
if (locallyControlled) {
if (stateName in props || setterName in props) {
throw new Error(`The state "${stateName}" was locally controlled and then it changed`);
}
} else {
if (!(stateName in props)) {
throw new Error(`The state "${stateName}" was controlled by its parent and then it changed`);
}
}
}
locallyControlled = !(stateName in props || setterName in props);
if (locallyControlled === true) {
return (0, _react.useState)(typeof init === "function" ? init(props) : init);
}
return [props[stateName], props[setterName] ?? noop];
}
return function WithState(props) {
const [state, setState] = getUseState(props);
return /*#__PURE__*/_react.default.createElement(Component, {
[stateName]: state,
[setterName]: setState,
...props
});
};
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJyZXF1aXJlIiwiX25ld0hvYyIsIm5vb3AiLCJ3aXRoU3RhdGUiLCJleHBvcnRzIiwibmV3SG9jIiwiQ29tcG9uZW50Iiwic3RhdGVOYW1lIiwiaW5pdCIsInNldHRlck5hbWUiLCJjaGFyQXQiLCJ0b1VwcGVyQ2FzZSIsInNsaWNlIiwibG9jYWxseUNvbnRyb2xsZWQiLCJnZXRVc2VTdGF0ZSIsInByb3BzIiwicHJvY2VzcyIsImVudiIsIk5PREVfRU5WIiwidW5kZWZpbmVkIiwiRXJyb3IiLCJ1c2VTdGF0ZSIsIldpdGhTdGF0ZSIsInN0YXRlIiwic2V0U3RhdGUiLCJkZWZhdWx0IiwiY3JlYXRlRWxlbWVudCJdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9ob2NzL3dpdGhTdGF0ZS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IENvbXBvbmVudFR5cGUsIEZ1bmN0aW9uQ29tcG9uZW50LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgRm4sIEludGVyc2VjdGlvbkZuLCBQaXBlLCBTZXRPcHRpb25hbEZuLCBUb1NjaGVtYSB9IGZyb20gXCIuLi90eXBlcy9GblwiO1xuaW1wb3J0IHsgSG9jIH0gZnJvbSBcIi4uL3R5cGVzL0hvY1wiO1xuaW1wb3J0IHsgbmV3SG9jIH0gZnJvbSBcIi4uL3V0aWxzL25ld0hvY1wiO1xuXG5pbnRlcmZhY2UgV2l0aFN0YXRlRm48XG4gIFByb3BWYWx1ZSxcbiAgU3RhdGVOYW1lIGV4dGVuZHMgc3RyaW5nLFxuICBTZXR0ZXJOYW1lIGV4dGVuZHMgc3RyaW5nLFxuICBQcm9wc1NjaGVtYSBleHRlbmRzIFtzdHJpbmcgfCBudW1iZXIgfCBzeW1ib2wsIGFueV0sXG4+IGV4dGVuZHMgRm4ge1xuICByZXR1cm46IFBpcGU8XG4gICAgdGhpc1tcImFyZzBcIl0sXG4gICAgW1xuICAgICAgSW50ZXJzZWN0aW9uRm48XG4gICAgICAgIHwgW1N0YXRlTmFtZSwgUHJvcFZhbHVlXVxuICAgICAgICB8IFtTZXR0ZXJOYW1lLCBSZWFjdC5EaXNwYXRjaDxSZWFjdC5TZXRTdGF0ZUFjdGlvbjxQcm9wVmFsdWU+Pl1cbiAgICAgID4sXG4gICAgICBTZXRPcHRpb25hbEZuPFN0YXRlTmFtZSB8IFNldHRlck5hbWU+LFxuICAgICAgSW50ZXJzZWN0aW9uRm48UHJvcHNTY2hlbWE+LFxuICAgIF1cbiAgPjtcbn1cblxudHlwZSBXaXRoU3RhdGVIb2MgPSA8XG4gIFByb3BWYWx1ZSxcbiAgU3RhdGVOYW1lIGV4dGVuZHMgc3RyaW5nLFxuICBTZXR0ZXJOYW1lIGV4dGVuZHMgc3RyaW5nID0gYHNldCR7Q2FwaXRhbGl6ZTxTdGF0ZU5hbWU+fWAsXG4gIFByb3BzIGV4dGVuZHMgb2JqZWN0ID0ge30sXG4+KFxuICBzdGF0ZU5hbWU6IFN0YXRlTmFtZSxcbiAgb3B0aW9ucz86IHtcbiAgICAvKipcbiAgICAgKiB0aGUgaW5pdGlhbCB2YWx1ZVxuICAgICAqXG4gICAgICogIEBleGFtcGxlXG4gICAgICogLy8gaW5pdGlhbCBzdGF0ZSBmcm9tIGEgY29uc3RhbnRcbiAgICAgKiB7aW5pdDogXCJpbml0aWFsIHZhbHVlXCJ9XG4gICAgICpcbiAgICAgKiBAZXhhbXBsZVxuICAgICAqIC8vIGluaXRpYWwgc3RhdGUgd2lsbCBiZSBkZXJpdmVkIGZyb20gc29tZVByb3BcbiAgICAgKiB7aW5pdDogKHsgc29tZVByb3AgfToge3NvbWVQcm9wOiBudW1iZXJ9KSA9PiBzb21lUHJvcCArIDF9XG4gICAgICovXG4gICAgaW5pdD86IEV4Y2x1ZGU8UHJvcFZhbHVlLCBGdW5jdGlvbj4gfCAoKHByb3BzOiBQcm9wcykgPT4gUHJvcFZhbHVlKTtcbiAgICAvKipcbiAgICAgKiB0aGUgc2V0dGVyJ3MgbmFtZSBwcm9wZXJ0eSwgdXN1YWxseSB5b3Ugd2FudCB0byB0aGUgZGVmYXVsdCB3aGljaCBpcyBgc2V0JHtDYXBpdGFsaXplPFN0YXRlTmFtZT59YFxuICAgICAqIEBkZWZhdWx0IGBzZXQke0NhcGl0YWxpemU8U3RhdGVOYW1lPn1gXG4gICAgICogQGV4YW1wbGVcbiAgICAgKiB3aXRoU3RhdGUoXCJzb21lU3RhdGVcIiwge1xuICAgICAqICAgaW5pdDogMCxcbiAgICAgKiAgIHNldHRlck5hbWU6IFwic2V0U29tZVN0YXRlXCIgLy8gZGVmYXVsdFxuICAgICAqIH0pKEV4YW1wbGUpXG4gICAgICovXG4gICAgc2V0dGVyTmFtZT86IFNldHRlck5hbWU7XG4gIH0sXG4pID0+IEhvYzxbV2l0aFN0YXRlRm48UHJvcFZhbHVlLCBTdGF0ZU5hbWUsIFNldHRlck5hbWUsIFRvU2NoZW1hPFByb3BzPj5dPjtcblxuZnVuY3Rpb24gbm9vcCgpOiB2b2lkIHt9XG5cbi8qKlxuICogbGlrZSBgdXNlU3RhdGVgIG9yIHlvdSBjYW4gcGFzcyBwcm9wZXJ0aWVzIHRvIHRoZSBjb21wb25lbnQgdG8gbWFrZSBpdCBjb250cm9sbGFibGVcbiAqIEBleGFtcGxlXG4gKiBjb25zdCBDb3VudGVyV2l0aFN0YXRlID0gd2l0aFN0YXRlKFwiY291bnRcIiwgeyBpbml0OiAwIH0pKGZ1bmN0aW9uIENvdW50ZXIoe2NvdW50LCBzZXRDb3VudH06IHtjb3VudDogbnVtYmVyOyBzZXRDb3VudDogRGlzcGF0Y2g8U2V0U3RhdGVBY3Rpb248bnVtYmVyPj59KSB7XG4gKiAgIHJldHVybiA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9Pntjb3VudH08L2J1dHRvbj47XG4gKiB9KTtcbiAqIC8vIHVzaW5nIENvdW50ZXJXaXRoU3RhdGUgYXMgc2VsZiBjb250cm9sbGVkXG4gKiBmdW5jdGlvbiBJbmRlcGVuZGVudENvdW50ZXJzKCkge1xuICogICByZXR1cm4gPD5cbiAqICAgICA8Q291bnRlcldpdGhTdGF0ZSAvPlxuICogICAgIDxDb3VudGVyV2l0aFN0YXRlIC8+XG4gKiAgIDwvPjtcbiAqIH1cbiAqIDxJbmRlcGVuZGVudENvdW50ZXJzIC8+IC8vIHdpbGwgcmVuZGVyIDIgYnV0dG9ucyB0aGF0IGNhbiBjb3VudCBpbmRlcGVuZGVudGx5XG4gKlxuICogLy8gdXNpbmcgQ291bnRlcldpdGhTdGF0ZSBhcyBwYXJlbnQgY29udHJvbGxlZFxuICogZnVuY3Rpb24gU2FtZUNvdW50ZXJzKCkge1xuICogICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuICogICByZXR1cm4gPD5cbiAqICAgICA8Q291bnRlcldpdGhTdGF0ZSBjb3VudD17Y291bnR9IHNldENvdW50PXtzZXRDb3VudH0gLz5cbiAqICAgICA8Q291bnRlcldpdGhTdGF0ZSBjb3VudD17Y291bnR9IHNldENvdW50PXtzZXRDb3VudH0gLz5cbiAqICAgPC8+O1xuICogfVxuICogPFNhbWVDb3VudGVycyAvPiAvLyB3aWxsIHJlbmRlciAyIGJ1dHRvbnMgd2l0aCB0aGUgc2FtZSBjb3VudFxuICovXG5leHBvcnQgY29uc3Qgd2l0aFN0YXRlID0gbmV3SG9jPFdpdGhTdGF0ZUhvYz4oZnVuY3Rpb24gd2l0aFN0YXRlKFxuICBDb21wb25lbnQ6IENvbXBvbmVudFR5cGUsXG4gIHN0YXRlTmFtZTogc3RyaW5nLFxuICB7XG4gICAgaW5pdCxcbiAgICBzZXR0ZXJOYW1lID0gXCJzZXRcIiArIHN0YXRlTmFtZS5jaGFyQXQoMCkudG9VcHBlckNhc2UoKSArIHN0YXRlTmFtZS5zbGljZSgxKSxcbiAgfTogYW55ID0ge30sXG4pOiBGdW5jdGlvbkNvbXBvbmVudCB7XG4gIGxldCBsb2NhbGx5Q29udHJvbGxlZDogYm9vbGVhbiB8IHVuZGVmaW5lZDtcbiAgZnVuY3Rpb24gZ2V0VXNlU3RhdGUocHJvcHM6IGFueSk6IGFueSB7XG4gICAgaWYgKFxuICAgICAgcHJvY2Vzcy5lbnYuTk9ERV9FTlYgIT09IFwicHJvZHVjdGlvblwiICYmXG4gICAgICBsb2NhbGx5Q29udHJvbGxlZCAhPT0gdW5kZWZpbmVkXG4gICAgKSB7XG4gICAgICBpZiAobG9jYWxseUNvbnRyb2xsZWQpIHtcbiAgICAgICAgaWYgKHN0YXRlTmFtZSBpbiBwcm9wcyB8fCBzZXR0ZXJOYW1lIGluIHByb3BzKSB7XG4gICAgICAgICAgdGhyb3cgbmV3IEVycm9yKFxuICAgICAgICAgICAgYFRoZSBzdGF0ZSBcIiR7c3RhdGVOYW1lfVwiIHdhcyBsb2NhbGx5IGNvbnRyb2xsZWQgYW5kIHRoZW4gaXQgY2hhbmdlZGAsXG4gICAgICAgICAgKTtcbiAgICAgICAgfVxuICAgICAgfSBlbHNlIHtcbiAgICAgICAgaWYgKCEoc3RhdGVOYW1lIGluIHByb3BzKSkge1xuICAgICAgICAgIHRocm93IG5ldyBFcnJvcihcbiAgICAgICAgICAgIGBUaGUgc3RhdGUgXCIke3N0YXRlTmFtZX1cIiB3YXMgY29udHJvbGxlZCBieSBpdHMgcGFyZW50IGFuZCB0aGVuIGl0IGNoYW5nZWRgLFxuICAgICAgICAgICk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICBsb2NhbGx5Q29udHJvbGxlZCA9ICEoc3RhdGVOYW1lIGluIHByb3BzIHx8IHNldHRlck5hbWUgaW4gcHJvcHMpO1xuICAgIGlmIChsb2NhbGx5Q29udHJvbGxlZCA9PT0gdHJ1ZSkge1xuICAgICAgcmV0dXJuIHVzZVN0YXRlKHR5cGVvZiBpbml0ID09PSBcImZ1bmN0aW9uXCIgPyBpbml0KHByb3BzKSA6IGluaXQpO1xuICAgIH1cbiAgICByZXR1cm4gW3Byb3BzW3N0YXRlTmFtZV0sIHByb3BzW3NldHRlck5hbWVdID8/IG5vb3BdO1xuICB9XG5cbiAgcmV0dXJuIGZ1bmN0aW9uIFdpdGhTdGF0ZShwcm9wczogYW55KTogSlNYLkVsZW1lbnQge1xuICAgIGNvbnN0IFtzdGF0ZSwgc2V0U3RhdGVdID0gZ2V0VXNlU3RhdGUocHJvcHMpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxDb21wb25lbnRcbiAgICAgICAgey4uLntcbiAgICAgICAgICBbc3RhdGVOYW1lXTogc3RhdGUsXG4gICAgICAgICAgW3NldHRlck5hbWVdOiBzZXRTdGF0ZSxcbiAgICAgICAgfX1cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgLz5cbiAgICApO1xuICB9O1xufSk7XG4iXSwibWFwcGluZ3MiOiI7O0FBQUEsSUFBQUEsTUFBQSxHQUFBQyxPQUFBO0FBR0EsSUFBQUMsT0FBQSxHQUFBRCxPQUFBO0FBc0RBLFNBQVNFLElBQUlBLENBQUEsRUFBUyxDQUFDOztBQUV2QjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNPLE1BQU1DLFNBQVMsR0FBQUMsT0FBQSxDQUFBRCxTQUFBLEdBQUcsSUFBQUUsY0FBTSxFQUFlLFNBQVNGLFNBQVNBLENBQzlERyxTQUF3QixFQUN4QkMsU0FBaUIsRUFDakI7RUFDRUMsSUFBSTtFQUNKQyxVQUFVLEdBQUcsS0FBSyxHQUFHRixTQUFTLENBQUNHLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQ0MsV0FBVyxDQUFDLENBQUMsR0FBR0osU0FBUyxDQUFDSyxLQUFLLENBQUMsQ0FBQztBQUN2RSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQ1E7RUFDbkIsSUFBSUMsaUJBQXNDO0VBQzFDLFNBQVNDLFdBQVdBLENBQUNDLEtBQVUsRUFBTztJQUNwQyxJQUNFQyxPQUFPLENBQUNDLEdBQUcsQ0FBQ0MsUUFBUSxLQUFLLFlBQVksSUFDckNMLGlCQUFpQixLQUFLTSxTQUFTLEVBQy9CO01BQ0EsSUFBSU4saUJBQWlCLEVBQUU7UUFDckIsSUFBSU4sU0FBUyxJQUFJUSxLQUFLLElBQUlOLFVBQVUsSUFBSU0sS0FBSyxFQUFFO1VBQzdDLE1BQU0sSUFBSUssS0FBSyxDQUNaLGNBQWFiLFNBQVUsOENBQzFCLENBQUM7UUFDSDtNQUNGLENBQUMsTUFBTTtRQUNMLElBQUksRUFBRUEsU0FBUyxJQUFJUSxLQUFLLENBQUMsRUFBRTtVQUN6QixNQUFNLElBQUlLLEtBQUssQ0FDWixjQUFhYixTQUFVLG9EQUMxQixDQUFDO1FBQ0g7TUFDRjtJQUNGO0lBRUFNLGlCQUFpQixHQUFHLEVBQUVOLFNBQVMsSUFBSVEsS0FBSyxJQUFJTixVQUFVLElBQUlNLEtBQUssQ0FBQztJQUNoRSxJQUFJRixpQkFBaUIsS0FBSyxJQUFJLEVBQUU7TUFDOUIsT0FBTyxJQUFBUSxlQUFRLEVBQUMsT0FBT2IsSUFBSSxLQUFLLFVBQVUsR0FBR0EsSUFBSSxDQUFDTyxLQUFLLENBQUMsR0FBR1AsSUFBSSxDQUFDO0lBQ2xFO0lBQ0EsT0FBTyxDQUFDTyxLQUFLLENBQUNSLFNBQVMsQ0FBQyxFQUFFUSxLQUFLLENBQUNOLFVBQVUsQ0FBQyxJQUFJUCxJQUFJLENBQUM7RUFDdEQ7RUFFQSxPQUFPLFNBQVNvQixTQUFTQSxDQUFDUCxLQUFVLEVBQWU7SUFDakQsTUFBTSxDQUFDUSxLQUFLLEVBQUVDLFFBQVEsQ0FBQyxHQUFHVixXQUFXLENBQUNDLEtBQUssQ0FBQztJQUU1QyxvQkFDRWhCLE1BQUEsQ0FBQTBCLE9BQUEsQ0FBQUMsYUFBQSxDQUFDcEIsU0FBUztNQUVOLENBQUNDLFNBQVMsR0FBR2dCLEtBQUs7TUFDbEIsQ0FBQ2QsVUFBVSxHQUFHZSxRQUFRO01BQUEsR0FFcEJUO0lBQUssQ0FDVixDQUFDO0VBRU4sQ0FBQztBQUNILENBQUMsQ0FBQyJ9
//# sourceMappingURL=withState.js.map