pouncejs/dist/cjs/components/TextInput/TextInput.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

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

var _helpers = require("../../utils/helpers");

var _Input = require("../utils/Input");

var _Icon = _interopRequireDefault(require("../Icon"));

var _Flex = _interopRequireDefault(require("../Flex"));

var TextInput = /*#__PURE__*/_react.default.forwardRef(function TextInput(_ref, ref) {
  var label = _ref.label,
      invalid = _ref.invalid,
      required = _ref.required,
      disabled = _ref.disabled,
      id = _ref.id,
      prefix = _ref.prefix,
      suffix = _ref.suffix,
      hidden = _ref.hidden,
      name = _ref.name,
      icon = _ref.icon,
      _ref$iconProps = _ref.iconProps,
      iconProps = _ref$iconProps === void 0 ? {} : _ref$iconProps,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
      _ref$iconAlignment = _ref.iconAlignment,
      iconAlignment = _ref$iconAlignment === void 0 ? 'right' : _ref$iconAlignment,
      value = _ref.value,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["label", "invalid", "required", "disabled", "id", "prefix", "suffix", "hidden", "name", "icon", "iconProps", "variant", "iconAlignment", "value"]);
  var identifier = id || name || (0, _helpers.slugify)(label);
  var isEmpty = (0, _helpers.isEmptyValue)(value);
  return /*#__PURE__*/_react.default.createElement(_Input.InputControl, {
    variant: variant,
    invalid: invalid,
    disabled: disabled,
    required: required,
    hidden: hidden
  }, /*#__PURE__*/_react.default.createElement(_Flex.default, {
    align: "center",
    position: "relative"
  }, prefix && /*#__PURE__*/_react.default.createElement(_Box.default, {
    fontSize: "medium",
    fontWeight: "medium",
    as: "span",
    height: "100%",
    color: "navyblue-100",
    pt: 5,
    pl: 4,
    pb: 2,
    opacity: isEmpty ? 0 : 1,
    visibility: isEmpty ? 'hidden' : 'visible',
    transition: "opacity,visibility 400ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
  }, prefix), /*#__PURE__*/_react.default.createElement(_Input.InputElement, (0, _extends2.default)({
    as: "input",
    type: "text",
    id: identifier,
    name: name,
    value: value,
    truncated: true,
    pl: icon && iconAlignment === 'left' ? 42 : prefix ? 0 : null,
    pr: icon && iconAlignment === 'right' ? 10 : suffix ? 0 : null,
    position: "relative",
    zIndex: 2
  }, rest, {
    ref: ref
  })), /*#__PURE__*/_react.default.createElement(_Input.InputLabel, {
    raised: !isEmpty,
    htmlFor: identifier,
    left: icon && iconAlignment === 'left' ? 26 : null
  }, label), suffix && /*#__PURE__*/_react.default.createElement(_Box.default, {
    fontSize: "medium",
    fontWeight: "medium",
    as: "span",
    height: "100%",
    color: "navyblue-100",
    pt: 5,
    pr: 4,
    pb: 2,
    opacity: isEmpty ? 0 : 1,
    visibility: isEmpty ? 'hidden' : 'visible',
    transition: "opacity,visibility 400ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
  }, suffix), icon && /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({
    zIndex: 1,
    position: "absolute",
    size: "medium",
    left: iconAlignment === 'left' ? 3 : null,
    right: iconAlignment === 'right' ? 4 : null,
    type: icon
  }, iconProps))));
});

var _default = /*#__PURE__*/_react.default.memo(TextInput);

exports.default = _default;