strapi/packages/strapi-plugin-content-manager/admin/src/components/Inputs/index.js

import React, { memo, useMemo } from 'react';
import PropTypes from 'prop-types';
import { get, isEmpty, omit, toLower } from 'lodash';
import { FormattedMessage } from 'react-intl';
import { Inputs as InputsIndex } from '@buffetjs/custom';

import useDataManager from '../../hooks/useDataManager';
import InputJSONWithErrors from '../InputJSONWithErrors';
import InputFileWithErrors from '../InputFileWithErrors';
import SelectWrapper from '../SelectWrapper';
import WysiwygWithErrors from '../WysiwygWithErrors';

const getInputType = (type = '') => {
  switch (toLower(type)) {
    case 'boolean':
      return 'bool';
    case 'biginteger':
    case 'decimal':
    case 'float':
    case 'integer':
      return 'number';
    case 'date':
    case 'datetime':
    case 'time':
      return type;
    case 'email':
      return 'email';
    case 'enumeration':
      return 'select';
    case 'password':
      return 'password';
    case 'string':
      return 'text';
    case 'text':
      return 'textarea';
    case 'media':
    case 'file':
    case 'files':
      return 'media';
    case 'json':
      return 'json';
    case 'wysiwyg':
    case 'WYSIWYG':
    case 'richtext':
      return 'wysiwyg';
    default:
      return 'text';
  }
};

function Inputs({ autoFocus, keys, layout, name, onBlur }) {
  const {
    didCheckErrors,
    formErrors,
    modifiedData,
    onChange,
  } = useDataManager();

  const attribute = useMemo(
    () => get(layout, ['schema', 'attributes', name], {}),
    [layout, name]
  );
  const metadatas = useMemo(
    () => get(layout, ['metadatas', name, 'edit'], {}),
    [layout, name]
  );
  const disabled = useMemo(() => !get(metadatas, 'editable', true), [
    metadatas,
  ]);
  const type = useMemo(() => get(attribute, 'type', null), [attribute]);

  const validations = omit(attribute, [
    'type',
    'model',
    'via',
    'collection',
    'default',
    'plugin',
    'enum',
  ]);
  const { description, visible } = metadatas;
  const value = get(modifiedData, keys, null);

  if (visible === false) {
    return null;
  }
  const temporaryErrorIdUntilBuffetjsSupportsFormattedMessage =
    'app.utils.defaultMessage';
  const errorId = get(
    formErrors,
    [keys, 'id'],
    temporaryErrorIdUntilBuffetjsSupportsFormattedMessage
  );

  if (type === 'relation') {
    return (
      <div className="col-6" key={keys}>
        <SelectWrapper
          {...metadatas}
          name={keys}
          plugin={attribute.plugin}
          relationType={attribute.relationType}
          targetModel={attribute.targetModel}
          value={get(modifiedData, keys)}
        />
      </div>
    );
  }

  let inputValue = value;

  // Fix for input file multipe
  if (type === 'media' && !value) {
    inputValue = [];
  }

  let step;

  if (type === 'float' || type === 'decimal') {
    step = 0.01;
  } else {
    step = 1;
  }

  return (
    <FormattedMessage id={errorId}>
      {error => {
        return (
          <InputsIndex
            {...metadatas}
            autoFocus={autoFocus}
            didCheckErrors={didCheckErrors}
            disabled={disabled}
            error={
              isEmpty(error) ||
              errorId === temporaryErrorIdUntilBuffetjsSupportsFormattedMessage
                ? null
                : error
            }
            inputDescription={description}
            description={description}
            customInputs={{
              media: InputFileWithErrors,
              json: InputJSONWithErrors,
              wysiwyg: WysiwygWithErrors,
            }}
            multiple={get(attribute, 'multiple', false)}
            name={keys}
            onBlur={onBlur}
            onChange={onChange}
            options={get(attribute, 'enum', [])}
            step={step}
            type={getInputType(type)}
            validations={validations}
            value={inputValue}
            withDefaultValue={false}
          />
        );
      }}
    </FormattedMessage>
  );
}

Inputs.defaultProps = {
  autoFocus: false,
  onBlur: null,
};

Inputs.propTypes = {
  autoFocus: PropTypes.bool,
  keys: PropTypes.string.isRequired,
  layout: PropTypes.object.isRequired,
  name: PropTypes.string.isRequired,
  onBlur: PropTypes.func,
  onChange: PropTypes.func.isRequired,
};

export default memo(Inputs);