@ntragas/pouncejstest/dist/cjs/components/utils/Input/InputControl.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _Box = _interopRequireDefault(require("../../Box"));

var _InputContext = require("./InputContext");

var InputControl = function InputControl(_ref) {
  var _ref$invalid = _ref.invalid,
      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
      children = _ref.children,
      disabled = _ref.disabled,
      required = _ref.required,
      hidden = _ref.hidden;

  var contextValue = _react.default.useMemo(function () {
    return {
      invalid,
      variant,
      disabled,
      required,
      hidden
    };
  }, [invalid, variant, disabled, required, hidden]);

  var borderColor = _react.default.useMemo(function () {
    if (invalid) {
      return 'red-300';
    }

    return variant === 'outline' ? 'navyblue-300' : 'navyblue-400';
  }, [variant, invalid]);

  return /*#__PURE__*/_react.default.createElement(_Box.default, {
    minHeight: 47,
    position: "relative",
    border: "1px solid",
    transition: "border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
    backgroundColor: variant === 'outline' ? 'transparent' : 'navyblue-400',
    borderRadius: "medium",
    borderColor: borderColor,
    "aria-disabled": disabled,
    "aria-hidden": hidden,
    hidden: hidden,
    _hover: {
      borderColor: !invalid ? 'blue-400' : undefined
    },
    _focusWithin: {
      borderColor: !invalid ? 'blue-400' : undefined,
      span: {
        opacity: 1,
        visibility: 'visible'
      },
      label: {
        fontWeight: 'medium',
        transform: 'translate(6px, 4px) scale(0.65)'
      }
    }
  }, /*#__PURE__*/_react.default.createElement(_InputContext.InputContext.Provider, {
    value: contextValue
  }, children));
};

var _default = InputControl;
exports.default = _default;