informed/dist/esm/components/Relevant.js

A lightweight framework and utility for building powerful forms in React applications

import React, { useContext, useMemo } from 'react';
import { ScopeContext, RelevanceContext } from '../Context.js';
import { useFormController } from '../hooks/useFormController.js';
import { useRelevance } from '../hooks/useRelevance.js';

var Relevant = function Relevant(_ref) {
  var when = _ref.when,
    relevanceWhen = _ref.relevanceWhen,
    relevanceDeps = _ref.relevanceDeps,
    children = _ref.children;
  var formController = useFormController();
  var scope = useContext(ScopeContext);

  // If we live in `Relevant`
  var parentRelevantContext = useContext(RelevanceContext);
  var isRelevant = useRelevance({
    relevant: when,
    relevanceWhen: relevanceWhen,
    relevanceDeps: relevanceDeps
  });
  var relevantContext = useMemo(function () {
    return {
      isRelevant: isRelevant,
      relevant: function relevant() {
        // We might have parent
        if (parentRelevantContext && !parentRelevantContext.relevant()) {
          return false;
        }
        return when({
          formState: formController.getFormState(),
          formApi: formController.getFormApi(),
          scope: scope,
          relevanceDeps: relevanceDeps
        });
      }
    };
  }, [isRelevant, scope, relevanceDeps]);
  return /*#__PURE__*/React.createElement(RelevanceContext.Provider, {
    value: relevantContext
  }, isRelevant ? children : null);
};

// import React, { useMemo, useContext } from 'react';
// import { useFormState } from '../hooks/useFormState';
// import { useFormApi } from '../hooks/useFormApi';
// import { RelevanceContext, ScopeContext } from '../Context';
// import { useFormController } from '../hooks/useFormController';

// export const Relevant = ({ when, children }) => {
//   const formState = useFormState();
//   const formApi = useFormApi();
//   const formController = useFormController();
//   const scope = useContext(ScopeContext);

//   const isRelevant = when({
//     formState,
//     formApi,
//     scope
//   });

//   const relevantContext = useMemo(
//     () => {
//       return {
//         isRelevant,
//         relevant: () =>
//           when({
//             formState: formController.getFormState(),
//             formApi: formController.getFormApi(),
//             scope
//           })
//       };
//     },
//     [isRelevant]
//   );

//   return (
//     <RelevanceContext.Provider value={relevantContext}>
//       {isRelevant ? children : null}
//     </RelevanceContext.Provider>
//   );
// };

export { Relevant };