@ntragas/pouncejstest/dist/esm/components/TextInput/TextInput.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import Box from '../Box';
import { slugify, isEmptyValue } from '../../utils/helpers';
import { InputControl, InputElement, InputLabel } from '../utils/Input';
import Icon from '../Icon';
import Flex from '../Flex';
var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
  var label = _ref.label,
      invalid = _ref.invalid,
      required = _ref.required,
      disabled = _ref.disabled,
      id = _ref.id,
      prefix = _ref.prefix,
      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 = _objectWithoutPropertiesLoose(_ref, ["label", "invalid", "required", "disabled", "id", "prefix", "hidden", "name", "icon", "iconProps", "variant", "iconAlignment", "value"]);

  var identifier = id || name || slugify(label);
  var isEmpty = isEmptyValue(value);
  return /*#__PURE__*/React.createElement(InputControl, {
    variant: variant,
    invalid: invalid,
    disabled: disabled,
    required: required,
    hidden: hidden
  }, /*#__PURE__*/React.createElement(Flex, {
    align: "center",
    position: "relative"
  }, prefix && /*#__PURE__*/React.createElement(Box, {
    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.createElement(InputElement, _extends({
    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,
    position: "relative",
    zIndex: 2
  }, rest, {
    ref: ref
  })), /*#__PURE__*/React.createElement(InputLabel, {
    raised: !isEmpty,
    htmlFor: identifier,
    left: icon && iconAlignment === 'left' ? 26 : null
  }, label), icon && /*#__PURE__*/React.createElement(Icon, _extends({
    zIndex: 1,
    position: "absolute",
    size: "medium",
    left: iconAlignment === 'left' ? 3 : null,
    right: iconAlignment === 'right' ? 4 : null,
    type: icon
  }, iconProps))));
});
export default /*#__PURE__*/React.memo(TextInput);