@mskcc/carbon-react/lib/internal/useNormalizedInputProps.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var iconsReact = require('@carbon/icons-react');
var usePrefix = require('./usePrefix.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

/**
 * @typedef {object} InputProps
 * @property {string} id - The input's id
 * @property {boolean | undefined} readOnly - Whether the input should be readonly
 * @property {boolean} disabled - Whether the input should be disabled
 * @property {boolean} invalid - Whether the input should be marked as invalid
 * @property {React.ReactNode | undefined} invalidText - The validation message displayed in case the input is considered invalid
 * @property {boolean} warn - Whether the input should be in warning state
 * @property {React.ReactNode | undefined} warnText - The validation message displayed in case the input is in warning state
 */

/**
 * @typedef {object} NormalizedInputProps
 * @property {boolean} disabled - Whether the input is disabled
 * @property {boolean} invalid - Whether the input is invalid (takes precedence over warn)
 * @property {string} invalidId - The invalid message's id
 * @property {string} helperId - id used for helper text
 * @property {boolean} warn - Whether the input is in warning state
 * @property {string} warnId - The warning message's id
 * @property {React.ReactNode | null} validation – React node rendering the appropriate validation message (if any)
 * @property {React.ReactNode | null} icon – React node rendering the appropriate accompanying icon (if any)
 */

/**
 * Returns an object containing non-colliding props and additional, generated ones.
 * This hook ensures that only either "invalid" or "warn" is true but never both at
 * the same time. Regardless whether "invalid" or "warn", the appropriate validation
 * message is passed as "validation". If the input should be accompanied by an icon
 * (to visually represent a readonly, invalid or warning state), the appropriate icon
 * is passed as "icon".
 * It also ensure that neither "invalid", nor "warn", nor "disabled" are enabled when
 * "readonly" is passed as "readonly" takes precedence over these variants.
 *
 * @param {InputProps} props - The props passed to the component
 * @returns {NormalizedInputProps}
 */
function useNormalizedInputProps(_ref) {
  let {
    id,
    readOnly,
    disabled,
    invalid,
    invalidText,
    warn,
    warnText
  } = _ref;
  const prefix = usePrefix.usePrefix();
  const normalizedProps = {
    disabled: !readOnly && disabled,
    invalid: !readOnly && invalid,
    invalidId: `${id}-error-msg`,
    warn: !readOnly && !invalid && warn,
    warnId: `${id}-warn-msg`,
    validation: null,
    icon: null,
    helperId: `${id}-helper-text`
  };
  if (normalizedProps.invalid) {
    normalizedProps.icon = iconsReact.WarningFilled;
    normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement("div", {
      className: `${prefix}--form-requirement`,
      id: normalizedProps.invalidId
    }, invalidText);
  } else if (normalizedProps.warn) {
    normalizedProps.icon = iconsReact.WarningAltFilled;
    normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement("div", {
      className: `${prefix}--form-requirement`,
      id: normalizedProps.warnId
    }, warnText);
  }
  return normalizedProps;
}

exports.useNormalizedInputProps = useNormalizedInputProps;