@razorpay/blade/build/lib/web/development/components/Input/BaseInput/BaseInputVisuals.js

The Design System that powers Razorpay

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import '../../Box/BaseBox/index.js';
import '../../Typography/index.js';
import '../../../utils/isValidAllowedChildren/index.js';
import '../../../utils/logger/index.js';
import '../../Tooltip/index.js';
import '../../Box/index.js';
import '../../../utils/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { Tooltip } from '../../Tooltip/Tooltip.web.js';
import { Box } from '../../Box/Box.js';
import { isValidAllowedChildren } from '../../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import { throwBladeError } from '../../../utils/logger/logger.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
import { Text } from '../../Typography/Text/Text.js';
import { isReactNative } from '../../../utils/platform/isReactNative.js';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var getVisualContainerStyles = function getVisualContainerStyles() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
    shouldStretchTrailingBox = _ref.shouldStretchTrailingBox;
  return {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: shouldStretchTrailingBox ? 'stretch' : 'center'
  };
};
var trailingIconColor = {
  none: 'surface.icon.gray.subtle',
  error: 'feedback.icon.negative.intense',
  success: 'feedback.icon.positive.intense'
};
var iconSize = {
  medium: 'medium',
  large: 'large'
};
var textSize = {
  medium: 'medium',
  large: 'large'
};
var getPrefixStyles = function getPrefixStyles(_ref2) {
  var hasLeadingIcon = _ref2.hasLeadingIcon,
    hasPrefix = _ref2.hasPrefix;
  if (hasPrefix && hasLeadingIcon) {
    return {
      paddingLeft: 'spacing.3'
    };
  }
  if (hasPrefix && !hasLeadingIcon) {
    return {
      paddingLeft: 'spacing.4'
    };
  }
  return {
    paddingLeft: 'spacing.0'
  };
};
var getInteractionElementStyles = function getInteractionElementStyles(_ref3) {
  var hasTrailingIcon = _ref3.hasTrailingIcon,
    hasLeadingInteractionElement = _ref3.hasLeadingInteractionElement,
    hasTrailingInteractionElement = _ref3.hasTrailingInteractionElement,
    hasSuffix = _ref3.hasSuffix,
    hasTrailingButton = _ref3.hasTrailingButton;
  if (hasTrailingInteractionElement && (hasSuffix || hasTrailingIcon || hasTrailingButton)) {
    return 'spacing.2';
  }
  if (hasTrailingInteractionElement && !hasSuffix && !hasTrailingIcon && !hasTrailingButton) {
    return 'spacing.4';
  }
  if (hasLeadingInteractionElement) {
    return 'spacing.3';
  }
  return 'spacing.0';
};
var getSuffixStyles = function getSuffixStyles(_ref4) {
  var hasTrailingIcon = _ref4.hasTrailingIcon,
    hasSuffix = _ref4.hasSuffix,
    hasTrailingButton = _ref4.hasTrailingButton;
  if (hasSuffix && (hasTrailingIcon || hasTrailingButton)) {
    return {
      paddingRight: 'spacing.3'
    };
  }
  if (hasSuffix && !hasTrailingIcon && !hasTrailingButton) {
    return {
      paddingRight: 'spacing.4'
    };
  }
  return {
    paddingRight: 'spacing.0'
  };
};
var getTrailingIconStyles = function getTrailingIconStyles(_ref5) {
  var hasTrailingIcon = _ref5.hasTrailingIcon,
    hasTrailingButton = _ref5.hasTrailingButton;
  if (hasTrailingIcon && hasTrailingButton) {
    return {
      paddingRight: 'spacing.3'
    };
  }
  if (hasTrailingIcon && !hasTrailingButton) {
    return {
      paddingRight: 'spacing.4'
    };
  }
  return {
    paddingRight: 'spacing.0'
  };
};
var getInputVisualsToBeRendered = function getInputVisualsToBeRendered(_ref6) {
  var leadingIcon = _ref6.leadingIcon,
    prefix = _ref6.prefix,
    trailingInteractionElement = _ref6.trailingInteractionElement,
    leadingInteractionElement = _ref6.leadingInteractionElement,
    suffix = _ref6.suffix,
    trailingIcon = _ref6.trailingIcon,
    trailingButton = _ref6.trailingButton;
  return {
    hasLeadingIcon: Boolean(leadingIcon),
    hasPrefix: Boolean(prefix),
    hasTrailingInteractionElement: Boolean(trailingInteractionElement),
    hasLeadingInteractionElement: Boolean(leadingInteractionElement),
    hasSuffix: Boolean(suffix),
    hasTrailingIcon: Boolean(trailingIcon),
    hasTrailingButton: Boolean(trailingButton)
  };
};
var getTooltipContent = function getTooltipContent(_ref7) {
  var validationState = _ref7.validationState,
    errorText = _ref7.errorText,
    successText = _ref7.successText;
  if (validationState === 'error' && errorText) {
    return errorText;
  }
  if (validationState === 'success' && successText) {
    return successText;
  }
  return '';
};
var ValidationIconTooltip = function ValidationIconTooltip(_ref8) {
  var children = _ref8.children,
    validationState = _ref8.validationState,
    errorText = _ref8.errorText,
    successText = _ref8.successText,
    showHintsAsTooltip = _ref8.showHintsAsTooltip;
  if (showHintsAsTooltip && validationState === 'error' && errorText || validationState === 'success' && successText) {
    return /*#__PURE__*/jsx(Tooltip, {
      content: getTooltipContent({
        validationState: validationState,
        errorText: errorText,
        successText: successText
      }),
      children: /*#__PURE__*/jsx(Box, {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        children: children
      })
    });
  }
  return children;
};
var BaseInputVisuals = function BaseInputVisuals(_ref9) {
  var LeadingIcon = _ref9.leadingIcon,
    prefix = _ref9.prefix,
    trailingInteractionElement = _ref9.trailingInteractionElement,
    onTrailingInteractionElementClick = _ref9.onTrailingInteractionElementClick,
    leadingInteractionElement = _ref9.leadingInteractionElement,
    suffix = _ref9.suffix,
    TrailingIcon = _ref9.trailingIcon,
    isDisabled = _ref9.isDisabled,
    _ref9$validationState = _ref9.validationState,
    validationState = _ref9$validationState === void 0 ? 'none' : _ref9$validationState,
    size = _ref9.size,
    showHintsAsTooltip = _ref9.showHintsAsTooltip,
    errorText = _ref9.errorText,
    successText = _ref9.successText,
    TrailingButton = _ref9.trailingButton;
  var _getInputVisualsToBeR = getInputVisualsToBeRendered({
      leadingIcon: LeadingIcon,
      prefix: prefix,
      leadingInteractionElement: leadingInteractionElement,
      trailingInteractionElement: trailingInteractionElement,
      suffix: suffix,
      trailingIcon: TrailingIcon,
      trailingButton: TrailingButton,
      size: size
    }),
    hasLeadingIcon = _getInputVisualsToBeR.hasLeadingIcon,
    hasPrefix = _getInputVisualsToBeR.hasPrefix,
    hasSuffix = _getInputVisualsToBeR.hasSuffix,
    hasTrailingInteractionElement = _getInputVisualsToBeR.hasTrailingInteractionElement,
    hasLeadingInteractionElement = _getInputVisualsToBeR.hasLeadingInteractionElement,
    hasTrailingIcon = _getInputVisualsToBeR.hasTrailingIcon,
    hasTrailingButton = _getInputVisualsToBeR.hasTrailingButton;
  var hasLeadingVisuals = hasLeadingInteractionElement || hasLeadingIcon || hasPrefix;
  var hasTrailingVisuals = hasTrailingInteractionElement || hasSuffix || hasTrailingIcon || hasTrailingButton;
  if (true) {
    if (hasTrailingButton && !isValidAllowedChildren(TrailingButton, 'Link')) {
      throwBladeError({
        message: 'trailingButton must be a valid Blade Link component',
        moduleName: 'BaseInput'
      });
    }
  }
  if (hasLeadingVisuals) {
    return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({}, getVisualContainerStyles()), {}, {
      children: [hasLeadingInteractionElement ? /*#__PURE__*/jsx(BaseBox, {
        paddingLeft: getInteractionElementStyles({
          hasTrailingIcon: hasTrailingIcon,
          hasLeadingInteractionElement: hasLeadingInteractionElement,
          hasSuffix: hasSuffix,
          hasTrailingButton: hasTrailingButton
        }),
        display: "flex",
        alignItems: "stretch",
        alignSelf: "stretch",
        children: leadingInteractionElement
      }) : null, LeadingIcon ? /*#__PURE__*/jsx(BaseBox, {
        paddingLeft: "spacing.4",
        display: "flex",
        children: /*#__PURE__*/jsx(LeadingIcon, {
          size: iconSize[size],
          color: isDisabled ? 'surface.icon.gray.disabled' : 'surface.icon.gray.muted'
        })
      }) : null, hasPrefix ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getPrefixStyles({
        hasLeadingIcon: hasLeadingIcon,
        hasPrefix: hasPrefix
      })), {}, {
        children: /*#__PURE__*/jsx(Text, {
          size: textSize[size],
          variant: "body",
          weight: "regular",
          color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle',
          children: prefix
        })
      })) : null]
    }));
  }
  if (hasTrailingVisuals) {
    return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({}, getVisualContainerStyles({
      shouldStretchTrailingBox: hasTrailingInteractionElement && Boolean(onTrailingInteractionElementClick)
    })), {}, {
      children: [hasTrailingInteractionElement ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getVisualContainerStyles({
        shouldStretchTrailingBox: hasTrailingInteractionElement && Boolean(onTrailingInteractionElementClick)
      })), {}, {
        children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
          paddingRight: getInteractionElementStyles({
            hasTrailingIcon: hasTrailingIcon,
            hasTrailingInteractionElement: hasTrailingInteractionElement,
            hasSuffix: hasSuffix,
            hasTrailingButton: hasTrailingButton
          }),
          display: "flex",
          alignItems: "stretch",
          alignSelf: "stretch"
        }, !isReactNative() && {
          onClick: onTrailingInteractionElementClick
        }), {}, {
          children: trailingInteractionElement
        }))
      })) : null, hasSuffix ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getSuffixStyles({
        hasTrailingIcon: hasTrailingIcon,
        hasSuffix: hasSuffix,
        hasTrailingButton: hasTrailingButton
      })), {}, {
        children: /*#__PURE__*/jsx(Text, {
          size: textSize[size],
          variant: "body",
          weight: "regular",
          color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle',
          children: suffix
        })
      })) : null, TrailingIcon ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      }, getTrailingIconStyles({
        hasTrailingIcon: hasTrailingIcon,
        hasTrailingButton: hasTrailingButton
      })), {}, {
        children: /*#__PURE__*/jsx(ValidationIconTooltip, {
          showHintsAsTooltip: showHintsAsTooltip,
          errorText: errorText,
          successText: successText,
          validationState: validationState,
          children: /*#__PURE__*/jsx(TrailingIcon, {
            size: iconSize[size],
            color: isDisabled ? 'interactive.icon.gray.disabled' : trailingIconColor[validationState]
          })
        })
      })) : null, TrailingButton ? /*#__PURE__*/jsx(BaseBox, {
        paddingRight: "spacing.4",
        display: "flex",
        children: /*#__PURE__*/React__default.cloneElement(TrailingButton, {
          size: size,
          variant: 'button',
          isDisabled: isDisabled
        })
      }) : null]
    }));
  }
  return null;
};

export { BaseInputVisuals, getInputVisualsToBeRendered };
//# sourceMappingURL=BaseInputVisuals.js.map