calcite-react/TextField/TextField.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _TextFieldStyled = require("./TextField-styled");

var _FormControl = require("../Form/FormControl");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var TextField = (0, _react.forwardRef)(function (_ref, ref) {
  var children = _ref.children,
      type = _ref.type,
      value = _ref.value,
      minimal = _ref.minimal,
      fullWidth = _ref.fullWidth,
      search = _ref.search,
      id = _ref.id,
      onChange = _ref.onChange,
      onBlur = _ref.onBlur,
      leftAdornment = _ref.leftAdornment,
      leftAdornmentNoWrap = _ref.leftAdornmentNoWrap,
      rightAdornment = _ref.rightAdornment,
      rightAdornmentNoWrap = _ref.rightAdornmentNoWrap,
      name = _ref.name,
      disabled = _ref.disabled,
      field = _ref.field,
      form = _ref.form,
      onRequestClear = _ref.onRequestClear,
      searchClearProps = _ref.searchClearProps,
      other = _objectWithoutProperties(_ref, ["children", "type", "value", "minimal", "fullWidth", "search", "id", "onChange", "onBlur", "leftAdornment", "leftAdornmentNoWrap", "rightAdornment", "rightAdornmentNoWrap", "name", "disabled", "field", "form", "onRequestClear", "searchClearProps"]);

  var formControlContext = (0, _react.useContext)(_FormControl.FormControlContext);
  var touched, errors, isSubmitting;

  if (field) {
    name = field.name;
    touched = form.touched;
    errors = form.errors;
    isSubmitting = form.isSubmitting;
  }

  var getAdornment = function getAdornment(adornment, adornmentNoWrap, direction) {
    if (adornment && adornment.type && (adornment.type.displayName === 'Button' || adornment.type.displayName === 'ButtonGroup' || adornment.type.displayName === 'Select' || adornmentNoWrap)) {
      return _react.default.cloneElement(adornment, _objectSpread({}, adornment.props, {
        minimal: minimal,
        isAdornment: true,
        adornmentDirection: direction
      }));
    }

    return adornment && _react.default.createElement(_TextFieldStyled.StyledAdornmentWrapper, {
      adornmentDirection: direction,
      minimal: minimal
    }, adornment);
  };

  var getValue = function getValue() {
    return field ? field.value : value;
  };

  var handleChange = function handleChange(e) {
    if (field) {
      field.onChange(e);
    }

    if (onChange) {
      onChange(e);
    }
  };

  var handleBlur = function handleBlur(e) {
    if (field) {
      field.onBlur(e);
    }

    if (onBlur) {
      onBlur(e);
    }
  };

  var isSuccess = function isSuccess() {
    if (touched) {
      return touched[name] && !errors[name] ? true : false;
    }

    return formControlContext.success;
  };

  var isError = function isError() {
    if (touched) {
      return touched[name] && errors[name] ? true : false;
    }

    return formControlContext.error;
  };

  var isDisabled = function isDisabled() {
    return isSubmitting || disabled;
  };

  var searchClear = (0, _react.useMemo)(function () {
    if (search && !isDisabled() && (getValue() || getValue() === 0)) {
      return _react.default.createElement(_TextFieldStyled.SearchClearIcon, _extends({
        size: 16,
        filled: true,
        isSuccess: isSuccess(),
        isError: isError()
      }, searchClearProps, {
        onClick: onRequestClear
      }));
    }

    return null;
  }, [search, getValue(), isDisabled()]);
  var TextFieldArea = _TextFieldStyled.StyledTextField;

  if (type === 'textarea') {
    TextFieldArea = _TextFieldStyled.StyledTextArea;
  }

  if (!leftAdornment && !rightAdornment && !search) {
    return _react.default.createElement(TextFieldArea, _extends({
      ref: ref,
      name: name,
      as: type === 'textarea' ? 'textarea' : 'input',
      type: type,
      value: getValue(),
      minimal: minimal,
      fullWidth: fullWidth,
      id: id || formControlContext._generatedId,
      onChange: handleChange,
      onBlur: handleBlur,
      success: isSuccess(),
      error: isError(),
      disabled: isDisabled()
    }, other));
  }

  return _react.default.createElement(_TextFieldStyled.StyledTextFieldAdornmentWrapper, {
    fullWidth: fullWidth,
    minimal: minimal
  }, getAdornment(leftAdornment, leftAdornmentNoWrap, 'left'), _react.default.createElement(TextFieldArea, _extends({
    ref: ref,
    name: name,
    as: type === 'textarea' ? 'textarea' : 'input',
    type: type,
    value: getValue(),
    minimal: minimal,
    search: search,
    fullWidth: fullWidth,
    hasAdornmentLeft: leftAdornment !== undefined,
    hasAdornmentRight: rightAdornment !== undefined,
    id: id || formControlContext._generatedId,
    onChange: handleChange,
    onBlur: handleBlur,
    success: isSuccess(),
    error: isError(),
    disabled: isDisabled()
  }, other)), searchClear, getAdornment(rightAdornment, rightAdornmentNoWrap, 'right'));
});
TextField.propTypes = {
  /** HTML prop to be applied to the input. */
  type: _propTypes.default.oneOf(['color', 'email', 'file', 'image', 'number', 'password', 'tel', 'text', 'url', 'textarea']),

  /** HTML prop for the current value of the input. */
  value: _propTypes.default.node,

  /** The form control should show an error. */
  error: _propTypes.default.bool,

  /** The form control should show success. */
  success: _propTypes.default.bool,

  /** Make the TextField 100% width. */
  fullWidth: _propTypes.default.bool,

  /** Display prop to style the TextField with a simplified UI. */
  minimal: _propTypes.default.bool,

  /** Option to display a magnifying glass icon and clear button to the input. */
  search: _propTypes.default.bool,

  /** Callback when Search clear button is clicked */
  onRequestClear: _propTypes.default.func,

  /** Props to be passed to the Search clear button */
  searchClearProps: _propTypes.default.object,

  /** TextField and label should appear side by side instead of stacked. */
  horizontal: _propTypes.default.bool,

  /** HTML prop for the TextField; works together with a label's `for` prop. */
  id: _propTypes.default.string,

  /** HTML prop to name the form element. */
  name: _propTypes.default.string
};
TextField.defaultProps = {
  type: 'text'
};
TextField.displayName = 'TextField';
var _default = TextField;
exports.default = _default;