@strapi/admin 4.0.0-next.12 → 4.0.0-next.16

package/admin/src/content-manager/components/Inputs/GenericInput.js

@@ -0,0 +1,347 @@
+/**
+ *
+ * GenericInput
+ * This is a temp file move it to the helper plugin when ready
+ */
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import cloneDeep from 'lodash/cloneDeep';
+import { formatISO } from 'date-fns';
+import { DatePicker } from '@strapi/parts/DatePicker';
+import { NumberInput } from '@strapi/parts/NumberInput';
+import { Select, Option } from '@strapi/parts/Select';
+import { Textarea } from '@strapi/parts/Textarea';
+import { TextInput } from '@strapi/parts/TextInput';
+import { TimePicker } from '@strapi/parts/TimePicker';
+import { ToggleInput } from '@strapi/parts/ToggleInput';
+import Hide from '@strapi/icons/Hide';
+import Show from '@strapi/icons/Show';
+
+const GenericInput = ({
+  autoComplete,
+  customInputs,
+  description,
+  disabled,
+  intlLabel,
+  labelAction,
+  error,
+  name,
+  onChange,
+  options,
+  placeholder,
+  step,
+  type,
+  value,
+  ...rest
+}) => {
+  const { formatMessage } = useIntl();
+  const [showPassword, setShowPassword] = useState(false);
+
+  const CustomInput = customInputs ? customInputs[type] : null;
+
+  if (CustomInput) {
+    return (
+      <CustomInput
+        {...rest}
+        description={description}
+        disabled={disabled}
+        intlLabel={intlLabel}
+        labelAction={labelAction}
+        error={error}
+        name={name}
+        onChange={onChange}
+        placeholder={placeholder}
+        type={type}
+        value={value}
+      />
+    );
+  }
+
+  const label = intlLabel.id
+    ? formatMessage(
+        { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
+        { ...intlLabel.values }
+      )
+    : name;
+
+  const hint = description
+    ? formatMessage(
+        { id: description.id, defaultMessage: description.defaultMessage },
+        { ...description.values }
+      )
+    : '';
+
+  const formattedPlaceholder = placeholder
+    ? formatMessage(
+        { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
+        { ...placeholder.values }
+      )
+    : '';
+
+  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
+
+  switch (type) {
+    case 'bool': {
+      return (
+        <ToggleInput
+          checked={value || false}
+          disabled={disabled}
+          hint={hint}
+          label={label}
+          labelAction={labelAction}
+          name={name}
+          offLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.off-label',
+            defaultMessage: 'Off',
+          })}
+          onLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.on-label',
+            defaultMessage: 'On',
+          })}
+          onChange={e => {
+            onChange({ target: { name, value: e.target.checked } });
+          }}
+        />
+      );
+    }
+    case 'date': {
+      return (
+        <DatePicker
+          clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
+          disabled={disabled}
+          error={errorMessage}
+          label={label}
+          labelAction={labelAction}
+          id={name}
+          hint={hint}
+          name={name}
+          onChange={date => {
+            const formattedDate = formatISO(cloneDeep(date), { representation: 'date' });
+
+            onChange({ target: { name, value: formattedDate, type } });
+          }}
+          onClear={() => onChange({ target: { name, value: '', type } })}
+          placeholder={formattedPlaceholder}
+          selectedDate={value ? new Date(value) : null}
+          selectedDateLabel={formattedDate => `Date picker, current is ${formattedDate}`}
+        />
+      );
+    }
+    case 'number': {
+      return (
+        <NumberInput
+          disabled={disabled}
+          error={errorMessage}
+          label={label}
+          labelAction={labelAction}
+          id={name}
+          hint={hint}
+          name={name}
+          onValueChange={value => {
+            onChange({ target: { name, value, type } });
+          }}
+          placeholder={formattedPlaceholder}
+          step={step}
+          value={value || undefined}
+        />
+      );
+    }
+    case 'email':
+    case 'text':
+    case 'string': {
+      return (
+        <TextInput
+          autoComplete={autoComplete}
+          disabled={disabled}
+          error={errorMessage}
+          label={label}
+          labelAction={labelAction}
+          id={name}
+          hint={hint}
+          name={name}
+          onChange={onChange}
+          placeholder={formattedPlaceholder}
+          type={type}
+          value={value || ''}
+        />
+      );
+    }
+    case 'password': {
+      return (
+        <TextInput
+          autoComplete={autoComplete}
+          disabled={disabled}
+          error={errorMessage}
+          endAction={
+            <button
+              aria-label={formatMessage({
+                id: 'Auth.form.password.show-password',
+                defaultMessage: 'Show password',
+              })}
+              onClick={() => {
+                setShowPassword(prev => !prev);
+              }}
+              style={{
+                border: 'none',
+                padding: 0,
+                background: 'transparent',
+              }}
+              type="button"
+            >
+              {showPassword ? <Show /> : <Hide />}
+            </button>
+          }
+          label={label}
+          labelAction={labelAction}
+          id={name}
+          hint={hint}
+          name={name}
+          onChange={onChange}
+          placeholder={formattedPlaceholder}
+          type={showPassword ? 'text' : 'password'}
+          value={value || ''}
+        />
+      );
+    }
+    case 'select': {
+      return (
+        <Select
+          disabled={disabled}
+          error={errorMessage}
+          label={label}
+          labelAction={labelAction}
+          id={name}
+          hint={hint}
+          name={name}
+          onChange={value => {
+            onChange({ target: { name, value: value === '' ? null : value, type: 'select' } });
+          }}
+          placeholder={formattedPlaceholder}
+          value={value || ''}
+        >
+          {options.map(({ metadatas: { intlLabel, disabled, hidden }, key, value }) => {
+            return (
+              <Option key={key} value={value} disabled={disabled} hidden={hidden}>
+                {formatMessage(intlLabel)}
+              </Option>
+            );
+          })}
+        </Select>
+      );
+    }
+    case 'textarea': {
+      return (
+        <Textarea
+          disabled={disabled}
+          error={errorMessage}
+          label={label}
+          labelAction={labelAction}
+          id={name}
+          hint={hint}
+          name={name}
+          onChange={onChange}
+          placeholder={formattedPlaceholder}
+          type={type}
+          value={value || ''}
+        >
+          {value}
+        </Textarea>
+      );
+    }
+    case 'time': {
+      let time = value;
+
+      // The backend send a value which has the following format: '00:45:00.000'
+      // or the time picker only supports hours & minutes so we need to mutate the value
+      if (value && value.split(':').length > 2) {
+        time = time.split(':');
+        time.pop();
+        time = time.join(':');
+      }
+
+      return (
+        <TimePicker
+          clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
+          disabled={disabled}
+          error={errorMessage}
+          label={label}
+          labelAction={labelAction}
+          id={name}
+          hint={hint}
+          name={name}
+          onChange={time => {
+            onChange({ target: { name, value: `${time}`, type } });
+          }}
+          onClear={() => {
+            onChange({ target: { name, value: null, type } });
+          }}
+          placeholder={formattedPlaceholder}
+          step={step}
+          value={time}
+        />
+      );
+    }
+    default: {
+      return <div>{type} is not supported</div>;
+    }
+  }
+};
+
+GenericInput.defaultProps = {
+  autoComplete: undefined,
+  customInputs: null,
+  description: null,
+  disabled: false,
+  error: '',
+  labelAction: undefined,
+  placeholder: null,
+  options: [],
+  step: 1,
+  value: '',
+};
+
+GenericInput.propTypes = {
+  autoComplete: PropTypes.string,
+  customInputs: PropTypes.object,
+  description: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }),
+  disabled: PropTypes.bool,
+  error: PropTypes.string,
+  intlLabel: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }).isRequired,
+  labelAction: PropTypes.element,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      metadatas: PropTypes.shape({
+        intlLabel: PropTypes.shape({
+          id: PropTypes.string.isRequired,
+          defaultMessage: PropTypes.string.isRequired,
+        }).isRequired,
+        disabled: PropTypes.bool,
+        hidden: PropTypes.bool,
+      }).isRequired,
+      key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    }).isRequired
+  ),
+  placeholder: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }),
+  step: PropTypes.number,
+  type: PropTypes.string.isRequired,
+  value: PropTypes.any,
+};
+
+export default GenericInput;

package/admin/src/content-manager/components/Inputs/index.js

@@ -4,15 +4,19 @@ import get from 'lodash/get';
 import omit from 'lodash/omit';
 import take from 'lodash/take';
 import isEqual from 'react-fast-compare';
-import { useIntl } from 'react-intl';
-import { Inputs as InputsIndex } from '@buffetjs/custom';
-import { NotAllowedInput, useLibrary } from '@strapi/helper-plugin';
+import {
+  NotAllowedInput,
+  // useLibrary
+} from '@strapi/helper-plugin';
 import { useContentTypeLayout } from '../../hooks';
 import { getFieldName } from '../../utils';
-import InputJSONWithErrors from '../InputJSONWithErrors';
-import SelectWrapper from '../SelectWrapper';
-import WysiwygWithErrors from '../WysiwygWithErrors';
+import Wysiwyg from '../Wysiwyg';
+import InputJSON from '../InputJSON';
+import ComingSoonInput from './ComingSoonInput';
+import GenericInput from './GenericInput';
 import InputUID from '../InputUID';
+import SelectWrapper from '../SelectWrapper';
+
 import {
   connect,
   generateOptions,
@@ -24,28 +28,21 @@ import {
 
 function Inputs({
   allowedFields,
-  autoFocus,
   fieldSchema,
   formErrors,
   isCreatingEntry,
   keys,
-  labelIcon,
+  labelAction,
   metadatas,
-  onBlur,
+
   onChange,
   readableFields,
   shouldNotRunValidations,
   queryInfos,
   value,
 }) {
-  const { fields } = useLibrary();
-
+  // const { fields } = useLibrary();
   const { contentType: currentContentTypeLayout } = useContentTypeLayout();
-  const { formatMessage } = useIntl();
-
-  const labelIconformatted = labelIcon
-    ? { icon: labelIcon.icon, title: formatMessage(labelIcon.title) }
-    : labelIcon;
 
   const disabled = useMemo(() => !get(metadatas, 'editable', true), [metadatas]);
   const type = fieldSchema.type;
@@ -54,8 +51,6 @@ function Inputs({
     return get(formErrors, [keys, 'id'], null);
   }, [formErrors, keys]);
 
-  const errorMessage = errorId ? formatMessage({ id: errorId, defaultMessage: errorId }) : null;
-
   const fieldName = useMemo(() => {
     return getFieldName(keys);
   }, [keys]);
@@ -174,7 +169,7 @@ function Inputs({
     isRequired,
   ]);
 
-  const { description, visible } = metadatas;
+  const { label, description, placeholder, visible } = metadatas;
 
   if (visible === false) {
     return null;
@@ -183,56 +178,74 @@ function Inputs({
   if (!shouldDisplayNotAllowedInput) {
     return (
       <NotAllowedInput
-        label={metadatas.label}
-        labelIcon={labelIconformatted}
-        error={errorMessage}
+        description={description ? { id: description, defaultMessage: description } : null}
+        intlLabel={{ id: label, defaultMessage: label }}
+        labelAction={labelAction}
+        error={errorId}
+        name={keys}
       />
     );
   }
 
   if (type === 'relation') {
+    // return 'RELATION';
     return (
-      <div key={keys}>
-        <SelectWrapper
-          {...metadatas}
-          {...fieldSchema}
-          labelIcon={labelIcon}
-          isUserAllowedToEditField={isUserAllowedToEditField}
-          isUserAllowedToReadField={isUserAllowedToReadField}
-          name={keys}
-          queryInfos={queryInfos}
-          value={value}
-        />
-      </div>
+      <SelectWrapper
+        {...metadatas}
+        {...fieldSchema}
+        description={{
+          id: metadatas.description,
+          defaultMessage: metadatas.description,
+        }}
+        intlLabel={{
+          id: metadatas.label,
+          defaultMessage: metadatas.label,
+        }}
+        labelAction={labelAction}
+        isUserAllowedToEditField={isUserAllowedToEditField}
+        isUserAllowedToReadField={isUserAllowedToReadField}
+        name={keys}
+        placeholder={
+          metadatas.placeholder
+            ? {
+                id: metadatas.placeholder,
+                defaultMessage: metadatas.placeholder,
+              }
+            : null
+        }
+        queryInfos={queryInfos}
+        value={value}
+      />
     );
   }
 
   return (
-    <InputsIndex
-      {...metadatas}
+    <GenericInput
+      attribute={fieldSchema}
       autoComplete="new-password"
-      autoFocus={autoFocus}
+      intlLabel={{ id: label, defaultMessage: label }}
+      description={description ? { id: description, defaultMessage: description } : null}
       disabled={shouldDisableField}
-      error={errorMessage}
-      inputDescription={description}
-      labelIcon={labelIconformatted}
-      description={description}
+      error={errorId}
+      labelAction={labelAction}
       contentTypeUID={currentContentTypeLayout.uid}
       customInputs={{
-        json: InputJSONWithErrors,
-        wysiwyg: WysiwygWithErrors,
+        // ...fields,
+        json: InputJSON,
         uid: InputUID,
-        ...fields,
+        // FIXME
+        datetime: ComingSoonInput,
+        media: ComingSoonInput,
+        wysiwyg: Wysiwyg,
       }}
       multiple={fieldSchema.multiple || false}
-      attribute={fieldSchema}
       name={keys}
-      onBlur={onBlur}
       onChange={onChange}
       options={options}
+      placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
       step={step}
       type={inputType}
-      validations={validations}
+      // validations={validations}
       value={inputValue}
       withDefaultValue={false}
     />
@@ -240,30 +253,20 @@ function Inputs({
 }
 
 Inputs.defaultProps = {
-  autoFocus: false,
   formErrors: {},
-  labelIcon: null,
-  onBlur: null,
+  labelAction: undefined,
   queryInfos: {},
   value: null,
 };
 
 Inputs.propTypes = {
   allowedFields: PropTypes.array.isRequired,
-  autoFocus: PropTypes.bool,
   fieldSchema: PropTypes.object.isRequired,
   formErrors: PropTypes.object,
   keys: PropTypes.string.isRequired,
   isCreatingEntry: PropTypes.bool.isRequired,
-  labelIcon: PropTypes.shape({
-    icon: PropTypes.node.isRequired,
-    title: PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      defaultMessage: PropTypes.string.isRequired,
-    }).isRequired,
-  }),
+  labelAction: PropTypes.element,
   metadatas: PropTypes.object.isRequired,
-  onBlur: PropTypes.func,
   onChange: PropTypes.func.isRequired,
   readableFields: PropTypes.array.isRequired,
   shouldNotRunValidations: PropTypes.bool.isRequired,
@@ -277,4 +280,7 @@ Inputs.propTypes = {
 
 const Memoized = memo(Inputs, isEqual);
 
-export default connect(Memoized, select);
+export default connect(
+  Memoized,
+  select
+);

package/admin/src/content-manager/components/Inputs/utils/generateOptions.js

@@ -1,19 +1,32 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-const generateOptions = (options, isRequired = false) => [
-  <FormattedMessage id="components.InputSelect.option.placeholder" key="__enum_option_null">
-    {msg => (
-      <option disabled={isRequired} hidden={isRequired} value="">
-        {msg}
-      </option>
-    )}
-  </FormattedMessage>,
-  ...options.map(v => (
-    <option key={v} value={v}>
-      {v}
-    </option>
-  )),
-];
+const generateOptions = (options, isRequired = false) => {
+  return [
+    {
+      metadatas: {
+        intlLabel: {
+          id: 'components.InputSelect.option.placeholder',
+          defaultMessage: 'Choose here',
+        },
+        disabled: isRequired,
+        hidden: isRequired,
+      },
+      key: '__enum_option_null',
+      value: '',
+    },
+    ...options.map(option => {
+      return {
+        metadatas: {
+          intlLabel: {
+            id: option,
+            defaultMessage: option,
+          },
+          hidden: false,
+          disabled: false,
+        },
+        key: option,
+        value: option,
+      };
+    }),
+  ];
+};
 
 export default generateOptions;

package/admin/src/content-manager/components/Inputs/utils/select.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { get } from 'lodash';
-import { useContentManagerEditViewDataManager } from '@strapi/helper-plugin';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 function useSelect(keys) {
   const {
@@ -12,7 +12,7 @@ function useSelect(keys) {
     readActionAllowedFields,
     shouldNotRunValidations,
     updateActionAllowedFields,
-  } = useContentManagerEditViewDataManager();
+  } = useCMEditViewDataManager();
 
   const allowedFields = useMemo(() => {
     return isCreatingEntry ? createActionAllowedFields : updateActionAllowedFields;