@talend/react-forms/lib/UIForm/fields/Text/Text.component.js

React forms library based on json schema form.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Text;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _generateId = require("../../Message/generateId");
var _labels = require("../../utils/labels");
var _properties = require("../../utils/properties");
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* eslint-disable jsx-a11y/no-autofocus */

function Text(props) {
  const {
    id,
    isValid,
    errorMessage,
    onChange,
    onFinish,
    schema,
    value,
    valueIsUpdating
  } = props;
  const {
    autoComplete,
    autoFocus,
    description,
    disabled = false,
    labelProps,
    link = null,
    placeholder,
    readOnly = false,
    title,
    type,
    ...rest
  } = schema;
  if (type === 'hidden') {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
      id: id,
      type: type,
      value: value
    });
  }
  const descriptionId = (0, _generateId.generateDescriptionId)(id);
  const errorId = (0, _generateId.generateErrorId)(id);
  let fieldProps = {
    id,
    autoComplete,
    autoFocus,
    disabled: disabled || valueIsUpdating,
    onBlur: event => {
      if (onFinish) {
        onFinish(event, {
          schema
        });
      }
    },
    onChange: event => {
      if (onChange) {
        onChange(event, {
          schema,
          value: (0, _properties.convertValue)(type, event.target.value)
        });
      }
    },
    placeholder,
    readOnly,
    type,
    value,
    label: (0, _labels.getLabelProps)(title, labelProps, schema.hint, schema.required),
    required: schema.required,
    description: errorMessage || description,
    hasError: !isValid,
    'aria-invalid': !isValid,
    'aria-required': schema.required,
    'aria-describedby': `${descriptionId} ${errorId}`,
    ...(0, _properties.extractDataAttributes)(rest)
  };
  if (type === 'number') {
    fieldProps = {
      ...fieldProps,
      min: (0, _lodash.get)(schema, 'schema.minimum'),
      max: (0, _lodash.get)(schema, 'schema.maximum'),
      step: (0, _lodash.get)(schema, 'schema.step')
    };
  }
  if (type === 'password') {
    fieldProps = {
      ...fieldProps,
      link
    };
  }
  const componentNames = {
    text: _designSystem.Form.Text,
    number: _designSystem.Form.Number,
    password: _designSystem.Form.Password
  };
  return /*#__PURE__*/_react.default.createElement(componentNames[type] || _designSystem.Form.Text, fieldProps);
}
if (process.env.NODE_ENV !== 'production') {
  Text.propTypes = {
    id: _propTypes.default.string,
    isValid: _propTypes.default.bool,
    errorMessage: _propTypes.default.string,
    onChange: _propTypes.default.func.isRequired,
    onFinish: _propTypes.default.func.isRequired,
    schema: _propTypes.default.shape({
      className: _propTypes.default.string,
      autoComplete: _propTypes.default.string,
      autoFocus: _propTypes.default.bool,
      description: _propTypes.default.string,
      disabled: _propTypes.default.bool,
      placeholder: _propTypes.default.string,
      readOnly: _propTypes.default.bool,
      required: _propTypes.default.bool,
      title: _propTypes.default.string,
      labelProps: _propTypes.default.object,
      hint: _propTypes.default.shape({
        icon: _propTypes.default.string,
        className: _propTypes.default.string,
        overlayComponent: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]).isRequired,
        overlayPlacement: _propTypes.default.string
      }),
      link: _propTypes.default.shape({
        label: _propTypes.default.string
      }),
      type: _propTypes.default.string,
      schema: _propTypes.default.object
    }),
    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
    valueIsUpdating: _propTypes.default.bool
  };
}
Text.defaultProps = {
  isValid: true,
  schema: {},
  value: ''
};
//# sourceMappingURL=Text.component.js.map