react-with-hoc
Version:
Work with React and HOCs (Higher-Order Components)
95 lines (93 loc) • 9.33 kB
JavaScript
;
var _react = require("react");
var _newHoc = require("../utils/newHoc");
/**
* renders conditionally
*
* @experimental It could have a better name
*
* @example
* const AdminDashboard: React.FC = () => {
* return <>...</>
* }
* const SafeAdminDashboard = withIf<"isAdmin", boolean>("isAdmin")(AdminDashboard)
*
* // renders <AdminDashboard />
* <SafeAdminDashboard isAdmin={true} />
*
* // renders null
* <SafeAdminDashboard isAdmin={false} />
*
* @example
* const HappyScreen: React.FC = () => {
* return <>...</>
* }
* const BlueErrorScreen: React.FC = () => {
* return <>...</>
* }
* const NewComponent = withIf("error", {
* Else: BlueErrorScreen
* })(HappyScreen)
*
* // renders <HappyCase />
* <NewComponent error={null} />
*
* // renders <BlueErrorScreen />
* <NewComponent error={new Error("some error")} />
*
* @example
* type HappinessLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
* const HappyScreen: React.FC = () => {
* return <>...</>
* }
* const SadScreen: React.FC = () => {
* return <>...</>
* }
* const MoodScreen = withIf<{ happinessLevel: HappinessLevel }>(
* ({ happinessLevel }) => happinessLevel >= 5,
* {
* dependencyNames: ["happinessLevel"],
* Else: SadScreen,
* },
* )(HappyScreen);
*
* // renders <HappyScreen />
* <MoodScreen happinessLevel={10} />
*
* // renders <SadScreen />
* <MoodScreen happinessLevel={3} />
*/
const withIf = exports.withIf = (0, _newHoc.newHoc)(function withIf(Component, propNameOrFactory, {
dependencyNames,
Else
} = {}) {
if (process.env.NODE_ENV !== "production") {
if (typeof propNameOrFactory === "function" && !dependencyNames) {
throw new Error("withIf with function should have dependencyNames assigned");
}
}
return function WithIf(props) {
let condition;
if (typeof propNameOrFactory === "string") {
condition = props[propNameOrFactory];
} else {
// is function
condition = (0, _react.useMemo)(() => propNameOrFactory(props), dependencyNames.map(key => props[key]));
}
if (condition) {
return /*#__PURE__*/_react.default.createElement(Component, {
...props
});
} else {
if (Else) {
return /*#__PURE__*/_react.default.createElement(Else, {
...props
});
}
// @ts-expect-error null is valid
return null;
}
};
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJyZXF1aXJlIiwiX25ld0hvYyIsIndpdGhJZiIsImV4cG9ydHMiLCJuZXdIb2MiLCJDb21wb25lbnQiLCJwcm9wTmFtZU9yRmFjdG9yeSIsImRlcGVuZGVuY3lOYW1lcyIsIkVsc2UiLCJwcm9jZXNzIiwiZW52IiwiTk9ERV9FTlYiLCJFcnJvciIsIldpdGhJZiIsInByb3BzIiwiY29uZGl0aW9uIiwidXNlTWVtbyIsIm1hcCIsImtleSIsImRlZmF1bHQiLCJjcmVhdGVFbGVtZW50Il0sInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2hvY3Mvd2l0aElmLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50VHlwZSwgRnVuY3Rpb25Db21wb25lbnQsIHVzZU1lbW8gfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IERlcGVuZGVuY3lOYW1lcyB9IGZyb20gXCIuLi90eXBlcy9EZXBlbmRlbmN5TmFtZXNcIjtcbmltcG9ydCB7IEZuLCBJbnRlcnNlY3Rpb25GbiwgVG9TY2hlbWEgfSBmcm9tIFwiLi4vdHlwZXMvRm5cIjtcbmltcG9ydCB7IEhvYyB9IGZyb20gXCIuLi90eXBlcy9Ib2NcIjtcbmltcG9ydCB7IG5ld0hvYyB9IGZyb20gXCIuLi91dGlscy9uZXdIb2NcIjtcblxuaW50ZXJmYWNlIFdpdGhJZkZuPFByb3BOYW1lIGV4dGVuZHMgc3RyaW5nLCBQcm9wVmFsdWU+IGV4dGVuZHMgRm4ge1xuICByZXR1cm46IFtQcm9wTmFtZSwgYW55XSBleHRlbmRzIHRoaXNbXCJhcmcwXCJdXG4gICAgPyB0aGlzW1wiYXJnMFwiXVxuICAgIDogdGhpc1tcImFyZzBcIl0gfCBbUHJvcE5hbWUsIFByb3BWYWx1ZV07XG59XG5cbmludGVyZmFjZSBXaXRoSWZIb2Mge1xuICA8UHJvcE5hbWUgZXh0ZW5kcyBzdHJpbmcsIFByb3BWYWx1ZSA9IHVua25vd24+KFxuICAgIHByb3BOYW1lOiBQcm9wTmFtZSxcbiAgICBvcHRpb25zPzoge1xuICAgICAgRWxzZT86IENvbXBvbmVudFR5cGU8YW55PjtcbiAgICB9LFxuICApOiBIb2M8W1dpdGhJZkZuPFByb3BOYW1lLCBQcm9wVmFsdWU+XT47XG5cbiAgPFxuICAgIERlcGVuZGVuY3lQcm9wcyBleHRlbmRzIHt9LFxuICAgIFREZXBlbmRlbmN5TmFtZXMgZXh0ZW5kc1xuICAgICAgRGVwZW5kZW5jeU5hbWVzPERlcGVuZGVuY3lQcm9wcz4gPSBEZXBlbmRlbmN5TmFtZXM8RGVwZW5kZW5jeVByb3BzPixcbiAgPihcbiAgICBmYWN0b3J5OiAocHJvcHM6IERlcGVuZGVuY3lQcm9wcykgPT4gYW55LFxuICAgIG9wdGlvbnM6IHtcbiAgICAgIEVsc2U/OiBDb21wb25lbnRUeXBlPGFueT47XG4gICAgICBkZXBlbmRlbmN5TmFtZXM6IFREZXBlbmRlbmN5TmFtZXM7XG4gICAgfSxcbiAgKTogSG9jPFtJbnRlcnNlY3Rpb25GbjxUb1NjaGVtYTxEZXBlbmRlbmN5UHJvcHM+Pl0+O1xufVxuXG4vKipcbiAqIHJlbmRlcnMgY29uZGl0aW9uYWxseVxuICpcbiAqIEBleHBlcmltZW50YWwgSXQgY291bGQgaGF2ZSBhIGJldHRlciBuYW1lXG4gKlxuICogQGV4YW1wbGVcbiAqIGNvbnN0IEFkbWluRGFzaGJvYXJkOiBSZWFjdC5GQyA9ICgpID0+IHtcbiAqICAgcmV0dXJuIDw+Li4uPC8+XG4gKiB9XG4gKiBjb25zdCBTYWZlQWRtaW5EYXNoYm9hcmQgPSB3aXRoSWY8XCJpc0FkbWluXCIsIGJvb2xlYW4+KFwiaXNBZG1pblwiKShBZG1pbkRhc2hib2FyZClcbiAqXG4gKiAvLyByZW5kZXJzIDxBZG1pbkRhc2hib2FyZCAvPlxuICogPFNhZmVBZG1pbkRhc2hib2FyZCBpc0FkbWluPXt0cnVlfSAvPlxuICpcbiAqIC8vIHJlbmRlcnMgbnVsbFxuICogPFNhZmVBZG1pbkRhc2hib2FyZCBpc0FkbWluPXtmYWxzZX0gLz5cbiAqXG4gKiBAZXhhbXBsZVxuICogY29uc3QgSGFwcHlTY3JlZW46IFJlYWN0LkZDID0gKCkgPT4ge1xuICogICByZXR1cm4gPD4uLi48Lz5cbiAqIH1cbiAqIGNvbnN0IEJsdWVFcnJvclNjcmVlbjogUmVhY3QuRkMgPSAoKSA9PiB7XG4gKiAgIHJldHVybiA8Pi4uLjwvPlxuICogfVxuICogY29uc3QgTmV3Q29tcG9uZW50ID0gd2l0aElmKFwiZXJyb3JcIiwge1xuICogICBFbHNlOiBCbHVlRXJyb3JTY3JlZW5cbiAqIH0pKEhhcHB5U2NyZWVuKVxuICpcbiAqIC8vIHJlbmRlcnMgPEhhcHB5Q2FzZSAvPlxuICogPE5ld0NvbXBvbmVudCBlcnJvcj17bnVsbH0gLz5cbiAqXG4gKiAvLyByZW5kZXJzIDxCbHVlRXJyb3JTY3JlZW4gLz5cbiAqIDxOZXdDb21wb25lbnQgZXJyb3I9e25ldyBFcnJvcihcInNvbWUgZXJyb3JcIil9IC8+XG4gKlxuICogQGV4YW1wbGVcbiAqIHR5cGUgSGFwcGluZXNzTGV2ZWwgPSAwIHwgMSB8IDIgfCAzIHwgNCB8IDUgfCA2IHwgNyB8IDggfCA5IHwgMTA7XG4gKiBjb25zdCBIYXBweVNjcmVlbjogUmVhY3QuRkMgPSAoKSA9PiB7XG4gKiAgIHJldHVybiA8Pi4uLjwvPlxuICogfVxuICogY29uc3QgU2FkU2NyZWVuOiBSZWFjdC5GQyA9ICgpID0+IHtcbiAqICAgcmV0dXJuIDw+Li4uPC8+XG4gKiB9XG4gKiBjb25zdCBNb29kU2NyZWVuID0gd2l0aElmPHsgaGFwcGluZXNzTGV2ZWw6IEhhcHBpbmVzc0xldmVsIH0+KFxuICogICAoeyBoYXBwaW5lc3NMZXZlbCB9KSA9PiBoYXBwaW5lc3NMZXZlbCA+PSA1LFxuICogICB7XG4gKiAgICAgZGVwZW5kZW5jeU5hbWVzOiBbXCJoYXBwaW5lc3NMZXZlbFwiXSxcbiAqICAgICBFbHNlOiBTYWRTY3JlZW4sXG4gKiAgIH0sXG4gKiApKEhhcHB5U2NyZWVuKTtcbiAqXG4gKiAvLyByZW5kZXJzIDxIYXBweVNjcmVlbiAvPlxuICogPE1vb2RTY3JlZW4gaGFwcGluZXNzTGV2ZWw9ezEwfSAvPlxuICpcbiAqIC8vIHJlbmRlcnMgPFNhZFNjcmVlbiAvPlxuICogPE1vb2RTY3JlZW4gaGFwcGluZXNzTGV2ZWw9ezN9IC8+XG4gKi9cbmV4cG9ydCBjb25zdCB3aXRoSWYgPSBuZXdIb2M8V2l0aElmSG9jPihmdW5jdGlvbiB3aXRoSWYoXG4gIENvbXBvbmVudDogQ29tcG9uZW50VHlwZTxhbnk+LFxuICBwcm9wTmFtZU9yRmFjdG9yeTogc3RyaW5nIHwgRnVuY3Rpb24sXG4gIHtcbiAgICBkZXBlbmRlbmN5TmFtZXMsXG4gICAgRWxzZSxcbiAgfToge1xuICAgIGRlcGVuZGVuY3lOYW1lcz86IHN0cmluZ1tdO1xuICAgIEVsc2U/OiBDb21wb25lbnRUeXBlPGFueT47XG4gIH0gPSB7fSxcbik6IEZ1bmN0aW9uQ29tcG9uZW50IHtcbiAgaWYgKHByb2Nlc3MuZW52Lk5PREVfRU5WICE9PSBcInByb2R1Y3Rpb25cIikge1xuICAgIGlmICh0eXBlb2YgcHJvcE5hbWVPckZhY3RvcnkgPT09IFwiZnVuY3Rpb25cIiAmJiAhZGVwZW5kZW5jeU5hbWVzKSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoXG4gICAgICAgIFwid2l0aElmIHdpdGggZnVuY3Rpb24gc2hvdWxkIGhhdmUgZGVwZW5kZW5jeU5hbWVzIGFzc2lnbmVkXCIsXG4gICAgICApO1xuICAgIH1cbiAgfVxuXG4gIHJldHVybiBmdW5jdGlvbiBXaXRoSWYocHJvcHM6IGFueSk6IEpTWC5FbGVtZW50IHtcbiAgICBsZXQgY29uZGl0aW9uOiBib29sZWFuO1xuICAgIGlmICh0eXBlb2YgcHJvcE5hbWVPckZhY3RvcnkgPT09IFwic3RyaW5nXCIpIHtcbiAgICAgIGNvbmRpdGlvbiA9IHByb3BzW3Byb3BOYW1lT3JGYWN0b3J5XTtcbiAgICB9IGVsc2Uge1xuICAgICAgLy8gaXMgZnVuY3Rpb25cblxuICAgICAgY29uZGl0aW9uID0gdXNlTWVtbyhcbiAgICAgICAgKCkgPT4gcHJvcE5hbWVPckZhY3RvcnkocHJvcHMpLFxuXG4gICAgICAgIGRlcGVuZGVuY3lOYW1lcyEubWFwKChrZXkpID0+IHByb3BzW2tleV0pLFxuICAgICAgKTtcbiAgICB9XG5cbiAgICBpZiAoY29uZGl0aW9uKSB7XG4gICAgICByZXR1cm4gPENvbXBvbmVudCB7Li4ucHJvcHN9IC8+O1xuICAgIH0gZWxzZSB7XG4gICAgICBpZiAoRWxzZSkge1xuICAgICAgICByZXR1cm4gPEVsc2Ugey4uLnByb3BzfSAvPjtcbiAgICAgIH1cbiAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3IgbnVsbCBpcyB2YWxpZFxuICAgICAgcmV0dXJuIG51bGw7XG4gICAgfVxuICB9O1xufSk7XG4iXSwibWFwcGluZ3MiOiI7O0FBQUEsSUFBQUEsTUFBQSxHQUFBQyxPQUFBO0FBSUEsSUFBQUMsT0FBQSxHQUFBRCxPQUFBO0FBNkJBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDTyxNQUFNRSxNQUFNLEdBQUFDLE9BQUEsQ0FBQUQsTUFBQSxHQUFHLElBQUFFLGNBQU0sRUFBWSxTQUFTRixNQUFNQSxDQUNyREcsU0FBNkIsRUFDN0JDLGlCQUFvQyxFQUNwQztFQUNFQyxlQUFlO0VBQ2ZDO0FBSUYsQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUNhO0VBQ25CLElBQUlDLE9BQU8sQ0FBQ0MsR0FBRyxDQUFDQyxRQUFRLEtBQUssWUFBWSxFQUFFO0lBQ3pDLElBQUksT0FBT0wsaUJBQWlCLEtBQUssVUFBVSxJQUFJLENBQUNDLGVBQWUsRUFBRTtNQUMvRCxNQUFNLElBQUlLLEtBQUssQ0FDYiwyREFDRixDQUFDO0lBQ0g7RUFDRjtFQUVBLE9BQU8sU0FBU0MsTUFBTUEsQ0FBQ0MsS0FBVSxFQUFlO0lBQzlDLElBQUlDLFNBQWtCO0lBQ3RCLElBQUksT0FBT1QsaUJBQWlCLEtBQUssUUFBUSxFQUFFO01BQ3pDUyxTQUFTLEdBQUdELEtBQUssQ0FBQ1IsaUJBQWlCLENBQUM7SUFDdEMsQ0FBQyxNQUFNO01BQ0w7O01BRUFTLFNBQVMsR0FBRyxJQUFBQyxjQUFPLEVBQ2pCLE1BQU1WLGlCQUFpQixDQUFDUSxLQUFLLENBQUMsRUFFOUJQLGVBQWUsQ0FBRVUsR0FBRyxDQUFFQyxHQUFHLElBQUtKLEtBQUssQ0FBQ0ksR0FBRyxDQUFDLENBQzFDLENBQUM7SUFDSDtJQUVBLElBQUlILFNBQVMsRUFBRTtNQUNiLG9CQUFPaEIsTUFBQSxDQUFBb0IsT0FBQSxDQUFBQyxhQUFBLENBQUNmLFNBQVM7UUFBQSxHQUFLUztNQUFLLENBQUcsQ0FBQztJQUNqQyxDQUFDLE1BQU07TUFDTCxJQUFJTixJQUFJLEVBQUU7UUFDUixvQkFBT1QsTUFBQSxDQUFBb0IsT0FBQSxDQUFBQyxhQUFBLENBQUNaLElBQUk7VUFBQSxHQUFLTTtRQUFLLENBQUcsQ0FBQztNQUM1QjtNQUNBO01BQ0EsT0FBTyxJQUFJO0lBQ2I7RUFDRixDQUFDO0FBQ0gsQ0FBQyxDQUFDIn0=
//# sourceMappingURL=withIf.js.map