@shopgate/engage/components/Form/Builder/ElementText.js

Shopgate's ENGAGE library.

import _camelCase from "lodash/camelCase";
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import TextField from '@shopgate/pwa-ui-shared/TextField';
import FormHelper from "./FormHelper";
import { ELEMENT_TYPE_TEXT, ELEMENT_TYPE_NUMBER, ELEMENT_TYPE_EMAIL, ELEMENT_TYPE_PASSWORD, ELEMENT_TYPE_DATE, ELEMENT_TYPE_PHONE } from "./Builder.constants";

// Map element type to input type
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const mapping = {
  [ELEMENT_TYPE_TEXT]: 'text',
  [ELEMENT_TYPE_NUMBER]: 'number',
  [ELEMENT_TYPE_EMAIL]: 'email',
  [ELEMENT_TYPE_PASSWORD]: 'password',
  [ELEMENT_TYPE_DATE]: 'date',
  [ELEMENT_TYPE_PHONE]: 'tel'
};

/**
 * Takes an element and renders it, if the type matches
 * @param {Object} props Component props.
 * @param {Object} props.element The data of the element to be rendered
 * @returns {JSX.Element}
 */
const ElementText = props => {
  const {
    element,
    errorText,
    name,
    value,
    visible,
    formName
  } = props;
  if (!visible) {
    return null;
  }
  const {
    required,
    disabled,
    handleChange,
    label
  } = element;
  const type = mapping[element.type];
  return /*#__PURE__*/_jsxs("div", {
    className: classNames(_camelCase(name), 'engage__form-text', 'formBuilderField', {
      validationError: !!errorText
    }),
    children: [/*#__PURE__*/_jsx(TextField, {
      required: required,
      type: type,
      name: name,
      label: label,
      value: value,
      onChange: handleChange,
      errorText: errorText,
      isControlled: true,
      translateErrorText: false,
      showErrorText: false,
      disabled: disabled
    }), /*#__PURE__*/_jsx(FormHelper, {
      errorText: errorText,
      element: element,
      formName: formName,
      elementName: name
    })]
  });
};
ElementText.defaultProps = {
  value: '',
  visible: true
};
export default /*#__PURE__*/memo(ElementText);