react-with-hoc/lib/module/hocs/withIf.js

Work with React and HOCs (Higher-Order Components)

import React, { useMemo } from "react";
import { newHoc } from "../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} />
 */
export const withIf = 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 = useMemo(() => propNameOrFactory(props), dependencyNames.map(key => props[key]));
    }
    if (condition) {
      return /*#__PURE__*/React.createElement(Component, {
        ...props
      });
    } else {
      if (Else) {
        return /*#__PURE__*/React.createElement(Else, {
          ...props
        });
      }
      // @ts-expect-error null is valid
      return null;
    }
  };
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsInVzZU1lbW8iLCJuZXdIb2MiLCJ3aXRoSWYiLCJDb21wb25lbnQiLCJwcm9wTmFtZU9yRmFjdG9yeSIsImRlcGVuZGVuY3lOYW1lcyIsIkVsc2UiLCJwcm9jZXNzIiwiZW52IiwiTk9ERV9FTlYiLCJFcnJvciIsIldpdGhJZiIsInByb3BzIiwiY29uZGl0aW9uIiwibWFwIiwia2V5IiwiY3JlYXRlRWxlbWVudCJdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9ob2NzL3dpdGhJZi50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IENvbXBvbmVudFR5cGUsIEZ1bmN0aW9uQ29tcG9uZW50LCB1c2VNZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBEZXBlbmRlbmN5TmFtZXMgfSBmcm9tIFwiLi4vdHlwZXMvRGVwZW5kZW5jeU5hbWVzXCI7XG5pbXBvcnQgeyBGbiwgSW50ZXJzZWN0aW9uRm4sIFRvU2NoZW1hIH0gZnJvbSBcIi4uL3R5cGVzL0ZuXCI7XG5pbXBvcnQgeyBIb2MgfSBmcm9tIFwiLi4vdHlwZXMvSG9jXCI7XG5pbXBvcnQgeyBuZXdIb2MgfSBmcm9tIFwiLi4vdXRpbHMvbmV3SG9jXCI7XG5cbmludGVyZmFjZSBXaXRoSWZGbjxQcm9wTmFtZSBleHRlbmRzIHN0cmluZywgUHJvcFZhbHVlPiBleHRlbmRzIEZuIHtcbiAgcmV0dXJuOiBbUHJvcE5hbWUsIGFueV0gZXh0ZW5kcyB0aGlzW1wiYXJnMFwiXVxuICAgID8gdGhpc1tcImFyZzBcIl1cbiAgICA6IHRoaXNbXCJhcmcwXCJdIHwgW1Byb3BOYW1lLCBQcm9wVmFsdWVdO1xufVxuXG5pbnRlcmZhY2UgV2l0aElmSG9jIHtcbiAgPFByb3BOYW1lIGV4dGVuZHMgc3RyaW5nLCBQcm9wVmFsdWUgPSB1bmtub3duPihcbiAgICBwcm9wTmFtZTogUHJvcE5hbWUsXG4gICAgb3B0aW9ucz86IHtcbiAgICAgIEVsc2U/OiBDb21wb25lbnRUeXBlPGFueT47XG4gICAgfSxcbiAgKTogSG9jPFtXaXRoSWZGbjxQcm9wTmFtZSwgUHJvcFZhbHVlPl0+O1xuXG4gIDxcbiAgICBEZXBlbmRlbmN5UHJvcHMgZXh0ZW5kcyB7fSxcbiAgICBURGVwZW5kZW5jeU5hbWVzIGV4dGVuZHNcbiAgICAgIERlcGVuZGVuY3lOYW1lczxEZXBlbmRlbmN5UHJvcHM+ID0gRGVwZW5kZW5jeU5hbWVzPERlcGVuZGVuY3lQcm9wcz4sXG4gID4oXG4gICAgZmFjdG9yeTogKHByb3BzOiBEZXBlbmRlbmN5UHJvcHMpID0+IGFueSxcbiAgICBvcHRpb25zOiB7XG4gICAgICBFbHNlPzogQ29tcG9uZW50VHlwZTxhbnk+O1xuICAgICAgZGVwZW5kZW5jeU5hbWVzOiBURGVwZW5kZW5jeU5hbWVzO1xuICAgIH0sXG4gICk6IEhvYzxbSW50ZXJzZWN0aW9uRm48VG9TY2hlbWE8RGVwZW5kZW5jeVByb3BzPj5dPjtcbn1cblxuLyoqXG4gKiByZW5kZXJzIGNvbmRpdGlvbmFsbHlcbiAqXG4gKiBAZXhwZXJpbWVudGFsIEl0IGNvdWxkIGhhdmUgYSBiZXR0ZXIgbmFtZVxuICpcbiAqIEBleGFtcGxlXG4gKiBjb25zdCBBZG1pbkRhc2hib2FyZDogUmVhY3QuRkMgPSAoKSA9PiB7XG4gKiAgIHJldHVybiA8Pi4uLjwvPlxuICogfVxuICogY29uc3QgU2FmZUFkbWluRGFzaGJvYXJkID0gd2l0aElmPFwiaXNBZG1pblwiLCBib29sZWFuPihcImlzQWRtaW5cIikoQWRtaW5EYXNoYm9hcmQpXG4gKlxuICogLy8gcmVuZGVycyA8QWRtaW5EYXNoYm9hcmQgLz5cbiAqIDxTYWZlQWRtaW5EYXNoYm9hcmQgaXNBZG1pbj17dHJ1ZX0gLz5cbiAqXG4gKiAvLyByZW5kZXJzIG51bGxcbiAqIDxTYWZlQWRtaW5EYXNoYm9hcmQgaXNBZG1pbj17ZmFsc2V9IC8+XG4gKlxuICogQGV4YW1wbGVcbiAqIGNvbnN0IEhhcHB5U2NyZWVuOiBSZWFjdC5GQyA9ICgpID0+IHtcbiAqICAgcmV0dXJuIDw+Li4uPC8+XG4gKiB9XG4gKiBjb25zdCBCbHVlRXJyb3JTY3JlZW46IFJlYWN0LkZDID0gKCkgPT4ge1xuICogICByZXR1cm4gPD4uLi48Lz5cbiAqIH1cbiAqIGNvbnN0IE5ld0NvbXBvbmVudCA9IHdpdGhJZihcImVycm9yXCIsIHtcbiAqICAgRWxzZTogQmx1ZUVycm9yU2NyZWVuXG4gKiB9KShIYXBweVNjcmVlbilcbiAqXG4gKiAvLyByZW5kZXJzIDxIYXBweUNhc2UgLz5cbiAqIDxOZXdDb21wb25lbnQgZXJyb3I9e251bGx9IC8+XG4gKlxuICogLy8gcmVuZGVycyA8Qmx1ZUVycm9yU2NyZWVuIC8+XG4gKiA8TmV3Q29tcG9uZW50IGVycm9yPXtuZXcgRXJyb3IoXCJzb21lIGVycm9yXCIpfSAvPlxuICpcbiAqIEBleGFtcGxlXG4gKiB0eXBlIEhhcHBpbmVzc0xldmVsID0gMCB8IDEgfCAyIHwgMyB8IDQgfCA1IHwgNiB8IDcgfCA4IHwgOSB8IDEwO1xuICogY29uc3QgSGFwcHlTY3JlZW46IFJlYWN0LkZDID0gKCkgPT4ge1xuICogICByZXR1cm4gPD4uLi48Lz5cbiAqIH1cbiAqIGNvbnN0IFNhZFNjcmVlbjogUmVhY3QuRkMgPSAoKSA9PiB7XG4gKiAgIHJldHVybiA8Pi4uLjwvPlxuICogfVxuICogY29uc3QgTW9vZFNjcmVlbiA9IHdpdGhJZjx7IGhhcHBpbmVzc0xldmVsOiBIYXBwaW5lc3NMZXZlbCB9PihcbiAqICAgKHsgaGFwcGluZXNzTGV2ZWwgfSkgPT4gaGFwcGluZXNzTGV2ZWwgPj0gNSxcbiAqICAge1xuICogICAgIGRlcGVuZGVuY3lOYW1lczogW1wiaGFwcGluZXNzTGV2ZWxcIl0sXG4gKiAgICAgRWxzZTogU2FkU2NyZWVuLFxuICogICB9LFxuICogKShIYXBweVNjcmVlbik7XG4gKlxuICogLy8gcmVuZGVycyA8SGFwcHlTY3JlZW4gLz5cbiAqIDxNb29kU2NyZWVuIGhhcHBpbmVzc0xldmVsPXsxMH0gLz5cbiAqXG4gKiAvLyByZW5kZXJzIDxTYWRTY3JlZW4gLz5cbiAqIDxNb29kU2NyZWVuIGhhcHBpbmVzc0xldmVsPXszfSAvPlxuICovXG5leHBvcnQgY29uc3Qgd2l0aElmID0gbmV3SG9jPFdpdGhJZkhvYz4oZnVuY3Rpb24gd2l0aElmKFxuICBDb21wb25lbnQ6IENvbXBvbmVudFR5cGU8YW55PixcbiAgcHJvcE5hbWVPckZhY3Rvcnk6IHN0cmluZyB8IEZ1bmN0aW9uLFxuICB7XG4gICAgZGVwZW5kZW5jeU5hbWVzLFxuICAgIEVsc2UsXG4gIH06IHtcbiAgICBkZXBlbmRlbmN5TmFtZXM/OiBzdHJpbmdbXTtcbiAgICBFbHNlPzogQ29tcG9uZW50VHlwZTxhbnk+O1xuICB9ID0ge30sXG4pOiBGdW5jdGlvbkNvbXBvbmVudCB7XG4gIGlmIChwcm9jZXNzLmVudi5OT0RFX0VOViAhPT0gXCJwcm9kdWN0aW9uXCIpIHtcbiAgICBpZiAodHlwZW9mIHByb3BOYW1lT3JGYWN0b3J5ID09PSBcImZ1bmN0aW9uXCIgJiYgIWRlcGVuZGVuY3lOYW1lcykge1xuICAgICAgdGhyb3cgbmV3IEVycm9yKFxuICAgICAgICBcIndpdGhJZiB3aXRoIGZ1bmN0aW9uIHNob3VsZCBoYXZlIGRlcGVuZGVuY3lOYW1lcyBhc3NpZ25lZFwiLFxuICAgICAgKTtcbiAgICB9XG4gIH1cblxuICByZXR1cm4gZnVuY3Rpb24gV2l0aElmKHByb3BzOiBhbnkpOiBKU1guRWxlbWVudCB7XG4gICAgbGV0IGNvbmRpdGlvbjogYm9vbGVhbjtcbiAgICBpZiAodHlwZW9mIHByb3BOYW1lT3JGYWN0b3J5ID09PSBcInN0cmluZ1wiKSB7XG4gICAgICBjb25kaXRpb24gPSBwcm9wc1twcm9wTmFtZU9yRmFjdG9yeV07XG4gICAgfSBlbHNlIHtcbiAgICAgIC8vIGlzIGZ1bmN0aW9uXG5cbiAgICAgIGNvbmRpdGlvbiA9IHVzZU1lbW8oXG4gICAgICAgICgpID0+IHByb3BOYW1lT3JGYWN0b3J5KHByb3BzKSxcblxuICAgICAgICBkZXBlbmRlbmN5TmFtZXMhLm1hcCgoa2V5KSA9PiBwcm9wc1trZXldKSxcbiAgICAgICk7XG4gICAgfVxuXG4gICAgaWYgKGNvbmRpdGlvbikge1xuICAgICAgcmV0dXJuIDxDb21wb25lbnQgey4uLnByb3BzfSAvPjtcbiAgICB9IGVsc2Uge1xuICAgICAgaWYgKEVsc2UpIHtcbiAgICAgICAgcmV0dXJuIDxFbHNlIHsuLi5wcm9wc30gLz47XG4gICAgICB9XG4gICAgICAvLyBAdHMtZXhwZWN0LWVycm9yIG51bGwgaXMgdmFsaWRcbiAgICAgIHJldHVybiBudWxsO1xuICAgIH1cbiAgfTtcbn0pO1xuIl0sIm1hcHBpbmdzIjoiQUFBQSxPQUFPQSxLQUFLLElBQXNDQyxPQUFPLFFBQVEsT0FBTztBQUl4RSxTQUFTQyxNQUFNLFFBQVEsaUJBQWlCO0FBNkJ4QztBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsT0FBTyxNQUFNQyxNQUFNLEdBQUdELE1BQU0sQ0FBWSxTQUFTQyxNQUFNQSxDQUNyREMsU0FBNkIsRUFDN0JDLGlCQUFvQyxFQUNwQztFQUNFQyxlQUFlO0VBQ2ZDO0FBSUYsQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUNhO0VBQ25CLElBQUlDLE9BQU8sQ0FBQ0MsR0FBRyxDQUFDQyxRQUFRLEtBQUssWUFBWSxFQUFFO0lBQ3pDLElBQUksT0FBT0wsaUJBQWlCLEtBQUssVUFBVSxJQUFJLENBQUNDLGVBQWUsRUFBRTtNQUMvRCxNQUFNLElBQUlLLEtBQUssQ0FDYiwyREFDRixDQUFDO0lBQ0g7RUFDRjtFQUVBLE9BQU8sU0FBU0MsTUFBTUEsQ0FBQ0MsS0FBVSxFQUFlO0lBQzlDLElBQUlDLFNBQWtCO0lBQ3RCLElBQUksT0FBT1QsaUJBQWlCLEtBQUssUUFBUSxFQUFFO01BQ3pDUyxTQUFTLEdBQUdELEtBQUssQ0FBQ1IsaUJBQWlCLENBQUM7SUFDdEMsQ0FBQyxNQUFNO01BQ0w7O01BRUFTLFNBQVMsR0FBR2IsT0FBTyxDQUNqQixNQUFNSSxpQkFBaUIsQ0FBQ1EsS0FBSyxDQUFDLEVBRTlCUCxlQUFlLENBQUVTLEdBQUcsQ0FBRUMsR0FBRyxJQUFLSCxLQUFLLENBQUNHLEdBQUcsQ0FBQyxDQUMxQyxDQUFDO0lBQ0g7SUFFQSxJQUFJRixTQUFTLEVBQUU7TUFDYixvQkFBT2QsS0FBQSxDQUFBaUIsYUFBQSxDQUFDYixTQUFTO1FBQUEsR0FBS1M7TUFBSyxDQUFHLENBQUM7SUFDakMsQ0FBQyxNQUFNO01BQ0wsSUFBSU4sSUFBSSxFQUFFO1FBQ1Isb0JBQU9QLEtBQUEsQ0FBQWlCLGFBQUEsQ0FBQ1YsSUFBSTtVQUFBLEdBQUtNO1FBQUssQ0FBRyxDQUFDO01BQzVCO01BQ0E7TUFDQSxPQUFPLElBQUk7SUFDYjtFQUNGLENBQUM7QUFDSCxDQUFDLENBQUMifQ==
//# sourceMappingURL=withIf.js.map