@strapi/admin 4.3.4 → 4.4.0-alpha.0

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/schema.js

@@ -9,12 +9,12 @@ import { translatedErrors as errorsTrads } from '@strapi/helper-plugin';
 
 import isFieldTypeNumber from '../../../utils/isFieldTypeNumber';
 
-yup.addMethod(yup.mixed, 'defined', function() {
-  return this.test('defined', errorsTrads.required, value => value !== undefined);
+yup.addMethod(yup.mixed, 'defined', function () {
+  return this.test('defined', errorsTrads.required, (value) => value !== undefined);
 });
 
-yup.addMethod(yup.array, 'notEmptyMin', function(min) {
-  return this.test('notEmptyMin', errorsTrads.min, value => {
+yup.addMethod(yup.array, 'notEmptyMin', function (min) {
+  return this.test('notEmptyMin', errorsTrads.min, (value) => {
     if (isEmpty(value)) {
       return true;
     }
@@ -23,8 +23,8 @@ yup.addMethod(yup.array, 'notEmptyMin', function(min) {
   });
 });
 
-yup.addMethod(yup.string, 'isInferior', function(message, max) {
-  return this.test('isInferior', message, function(value) {
+yup.addMethod(yup.string, 'isInferior', function (message, max) {
+  return this.test('isInferior', message, function (value) {
     if (!value) {
       return true;
     }
@@ -37,8 +37,8 @@ yup.addMethod(yup.string, 'isInferior', function(message, max) {
   });
 });
 
-yup.addMethod(yup.string, 'isSuperior', function(message, min) {
-  return this.test('isSuperior', message, function(value) {
+yup.addMethod(yup.string, 'isSuperior', function (message, min) {
+  return this.test('isSuperior', message, function (value) {
     if (!value) {
       return true;
     }
@@ -51,7 +51,7 @@ yup.addMethod(yup.string, 'isSuperior', function(message, min) {
   });
 });
 
-const getAttributes = data => get(data, ['attributes'], {});
+const getAttributes = (data) => get(data, ['attributes'], {});
 
 const createYupSchema = (
   model,
@@ -97,7 +97,7 @@ const createYupSchema = (
         if (attribute.repeatable === true) {
           const { min, max, required } = attribute;
 
-          let componentSchema = yup.lazy(value => {
+          let componentSchema = yup.lazy((value) => {
             let baseSchema = yup.array().of(componentFieldSchema);
 
             if (min) {
@@ -123,7 +123,7 @@ const createYupSchema = (
 
           return acc;
         }
-        const componentSchema = yup.lazy(obj => {
+        const componentSchema = yup.lazy((obj) => {
           if (obj !== undefined) {
             return attribute.required === true && !options.isDraft
               ? componentFieldSchema.defined()
@@ -154,7 +154,7 @@ const createYupSchema = (
         if (min) {
           if (attribute.required) {
             dynamicZoneSchema = dynamicZoneSchema
-              .test('min', errorsTrads.min, value => {
+              .test('min', errorsTrads.min, (value) => {
                 if (options.isCreatingEntry) {
                   return value && value.length >= min;
                 }
@@ -165,7 +165,7 @@ const createYupSchema = (
 
                 return value !== null && value.length >= min;
               })
-              .test('required', errorsTrads.required, value => {
+              .test('required', errorsTrads.required, (value) => {
                 if (options.isCreatingEntry) {
                   return value !== null || value !== undefined;
                 }
@@ -180,7 +180,7 @@ const createYupSchema = (
             dynamicZoneSchema = dynamicZoneSchema.notEmptyMin(min);
           }
         } else if (attribute.required && !options.isDraft) {
-          dynamicZoneSchema = dynamicZoneSchema.test('required', errorsTrads.required, value => {
+          dynamicZoneSchema = dynamicZoneSchema.test('required', errorsTrads.required, (value) => {
             if (options.isCreatingEntry) {
               return value !== null || value !== undefined;
             }
@@ -215,7 +215,7 @@ const createYupSchemaAttribute = (type, validations, options) => {
   if (type === 'json') {
     schema = yup
       .mixed(errorsTrads.json)
-      .test('isJSON', errorsTrads.json, value => {
+      .test('isJSON', errorsTrads.json, (value) => {
         if (value === undefined) {
           return true;
         }
@@ -238,7 +238,7 @@ const createYupSchemaAttribute = (type, validations, options) => {
   if (['number', 'integer', 'float', 'decimal'].includes(type)) {
     schema = yup
       .number()
-      .transform(cv => (isNaN(cv) ? undefined : cv))
+      .transform((cv) => (isNaN(cv) ? undefined : cv))
       .typeError();
   }
 
@@ -250,7 +250,7 @@ const createYupSchemaAttribute = (type, validations, options) => {
     schema = yup.date();
   }
 
-  Object.keys(validations).forEach(validation => {
+  Object.keys(validations).forEach((validation) => {
     const validationValue = validations[validation];
 
     if (
@@ -269,7 +269,7 @@ const createYupSchemaAttribute = (type, validations, options) => {
               if (options.isCreatingEntry) {
                 schema = schema.required(errorsTrads.required);
               } else {
-                schema = schema.test('required', errorsTrads.required, value => {
+                schema = schema.test('required', errorsTrads.required, (value) => {
                   // Field is not touched and the user is editing the entry
                   if (value === undefined && !options.isFromComponent) {
                     return true;

package/admin/src/content-manager/components/FieldComponent/utils/connect.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 function connect(WrappedComponent, select) {
-  return function(props) {
+  return (props) => {
     // eslint-disable-next-line react/prop-types
     const selectors = select(props);
 

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

@@ -22,7 +22,7 @@ function useSelect({ isFromDynamicZone, name }) {
   const allDynamicZoneFields = useMemo(() => {
     const attributes = get(contentType, ['attributes'], {});
 
-    const dynamicZoneFields = Object.keys(attributes).filter(attrName => {
+    const dynamicZoneFields = Object.keys(attributes).filter((attrName) => {
       return get(attributes, [attrName, 'type'], '') === 'dynamiczone';
     });
 
@@ -43,17 +43,17 @@ function useSelect({ isFromDynamicZone, name }) {
       return true;
     }
 
-    const includedDynamicZoneFields = allowedFields.filter(name => name === compoName[0]);
+    const includedDynamicZoneFields = allowedFields.filter((name) => name === compoName[0]);
 
     if (includedDynamicZoneFields.length > 0) {
       return true;
     }
 
     const relatedChildrenAllowedFields = allowedFields
-      .map(fieldName => {
+      .map((fieldName) => {
         return fieldName.split('.');
       })
-      .filter(fieldName => {
+      .filter((fieldName) => {
         if (fieldName.length < compoName.length) {
           return false;
         }
@@ -78,10 +78,10 @@ function useSelect({ isFromDynamicZone, name }) {
     const allowedFields = isCreatingEntry ? [] : readActionAllowedFields;
 
     const relatedChildrenAllowedFields = allowedFields
-      .map(fieldName => {
+      .map((fieldName) => {
         return fieldName.split('.');
       })
-      .filter(fieldName => {
+      .filter((fieldName) => {
         if (fieldName.length < compoName.length) {
           return false;
         }

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import { useCustomFields } from '@strapi/helper-plugin';
 import Date from '@strapi/icons/Date';
 import Boolean from '@strapi/icons/Boolean';
 import Email from '@strapi/icons/Email';
@@ -40,10 +42,38 @@ const iconByTypes = {
   dynamiczone: <DynamicZone />,
 };
 
-const FieldTypeIcon = ({ type }) => iconByTypes[type] || null;
+const FieldTypeIcon = ({ type, customFieldUid }) => {
+  const customFieldsRegistry = useCustomFields();
+
+  let Compo = iconByTypes[type];
+
+  if (customFieldUid) {
+    const customField = customFieldsRegistry.get(customFieldUid);
+    const CustomFieldIcon = customField.icon;
+
+    if (CustomFieldIcon) {
+      Compo = (
+        <Box marginRight={3} width={7} height={6}>
+          <CustomFieldIcon />
+        </Box>
+      );
+    }
+  }
+
+  if (!iconByTypes[type]) {
+    return null;
+  }
+
+  return Compo;
+};
+
+FieldTypeIcon.defaultProps = {
+  customFieldUid: null,
+};
 
 FieldTypeIcon.propTypes = {
   type: PropTypes.string.isRequired,
+  customFieldUid: PropTypes.string,
 };
 
 export default FieldTypeIcon;

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

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 const FormTitle = ({ description, title }) => (
   <>
     {!!title && <FormattedMessage id={title} />}
-    {!!description && <FormattedMessage id={description}>{msg => <p>{msg}</p>}</FormattedMessage>}
+    {!!description && <FormattedMessage id={description}>{(msg) => <p>{msg}</p>}</FormattedMessage>}
   </>
 );
 

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

@@ -13,7 +13,7 @@ const InjectionZoneList = ({ area, ...props }) => {
   // TODO
   return (
     <ul>
-      {compos.map(compo => {
+      {compos.map((compo) => {
         const component = compo.Component(props);
 
         if (component) {

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

@@ -87,11 +87,10 @@ class InputJSON extends React.Component {
 
   setSize = () => this.codeMirror.setSize('100%', 'auto');
 
-  getContentAtLine = line => this.codeMirror.getLine(line);
+  getContentAtLine = (line) => this.codeMirror.getLine(line);
 
-  getEditorOption = opt => this.codeMirror.getOption(opt);
-
-  getValue = () => this.codeMirror.getValue();
+  // getEditorOption = (opt) => this.codeMirror.getOption(opt);
+  // getValue = () => this.codeMirror.getValue();
 
   markSelection = ({ message }) => {
     let line = parseInt(message.split(':')[0].split('line ')[1], 10) - 1;
@@ -142,7 +141,7 @@ class InputJSON extends React.Component {
     this.timer = setTimeout(() => this.testJSON(doc.getValue()), WAIT);
   };
 
-  testJSON = value => {
+  testJSON = (value) => {
     try {
       jsonlint.parse(value);
     } catch (err) {
@@ -189,7 +188,7 @@ InputJSON.defaultProps = {
   error: undefined,
   intlLabel: undefined,
   labelAction: undefined,
-  onChange: () => {},
+  onChange() {},
   value: null,
   required: false,
 };

package/admin/src/content-manager/components/InputJSON/jsonlint.js

@@ -1,6 +1,6 @@
 /* Jison generated parser */
 /* eslint-disable */
-var jsonlint = (function() {
+var jsonlint = (function () {
   var parser = {
     trace: function trace() {},
     yy: {},
@@ -453,7 +453,7 @@ var jsonlint = (function() {
     },
   };
   /* Jison generated lexer */
-  var lexer = (function() {
+  var lexer = (function () {
     var lexer = {
       EOF: 1,
       parseError: function parseError(str, hash) {
@@ -463,7 +463,7 @@ var jsonlint = (function() {
           throw new Error(str);
         }
       },
-      setInput: function(input) {
+      setInput: function (input) {
         this._input = input;
         this._more = this._less = this.done = false;
         this.yylineno = this.yyleng = 0;
@@ -472,7 +472,7 @@ var jsonlint = (function() {
         this.yylloc = { first_line: 1, first_column: 0, last_line: 1, last_column: 0 };
         return this;
       },
-      input: function() {
+      input: function () {
         var ch = this._input[0];
         this.yytext += ch;
         this.yyleng++;
@@ -483,34 +483,34 @@ var jsonlint = (function() {
         this._input = this._input.slice(1);
         return ch;
       },
-      unput: function(ch) {
+      unput: function (ch) {
         this._input = ch + this._input;
         return this;
       },
-      more: function() {
+      more: function () {
         this._more = true;
         return this;
       },
-      less: function(n) {
+      less: function (n) {
         this._input = this.match.slice(n) + this._input;
       },
-      pastInput: function() {
+      pastInput: function () {
         var past = this.matched.substr(0, this.matched.length - this.match.length);
         return (past.length > 20 ? '...' : '') + past.substr(-20).replace(/\n/g, '');
       },
-      upcomingInput: function() {
+      upcomingInput: function () {
         var next = this.match;
         if (next.length < 20) {
           next += this._input.substr(0, 20 - next.length);
         }
         return (next.substr(0, 20) + (next.length > 20 ? '...' : '')).replace(/\n/g, '');
       },
-      showPosition: function() {
+      showPosition: function () {
         var pre = this.pastInput();
         var c = new Array(pre.length + 1).join('-');
         return pre + this.upcomingInput() + '\n' + c + '^';
       },
-      next: function() {
+      next: function () {
         if (this.done) {
           return this.EOF;
         }
@@ -587,7 +587,7 @@ var jsonlint = (function() {
       _currentRules: function _currentRules() {
         return this.conditions[this.conditionStack[this.conditionStack.length - 1]].rules;
       },
-      topState: function() {
+      topState: function () {
         return this.conditionStack[this.conditionStack.length - 2];
       },
       pushState: function begin(condition) {
@@ -669,7 +669,7 @@ var jsonlint = (function() {
 })();
 if (typeof require !== 'undefined' && typeof exports !== 'undefined') {
   exports.parser = jsonlint;
-  exports.parse = function() {
+  exports.parse = function () {
     return jsonlint.parse.apply(jsonlint, arguments);
   };
   exports.main = function commonjsMain(args) {

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

@@ -174,7 +174,7 @@ const InputUID = ({
     setRegenerateLabel(null);
   };
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     if (e.target.value && isCreation) {
       setIsCustomized(true);
     }

package/admin/src/content-manager/components/InputUID/regex.js

@@ -1,3 +1,3 @@
-const UID_REGEX = new RegExp(/^[A-Za-z0-9-_.~]*$/);
+const UID_REGEX = /^[A-Za-z0-9-_.~]*$/;
 
 export default UID_REGEX;

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

@@ -5,7 +5,7 @@ import get from 'lodash/get';
 import omit from 'lodash/omit';
 import take from 'lodash/take';
 import isEqual from 'react-fast-compare';
-import { GenericInput, NotAllowedInput, useLibrary } from '@strapi/helper-plugin';
+import { GenericInput, NotAllowedInput, useLibrary, useCustomFields } from '@strapi/helper-plugin';
 import { useContentTypeLayout } from '../../hooks';
 import { getFieldName } from '../../utils';
 import Wysiwyg from '../Wysiwyg';
@@ -39,9 +39,10 @@ function Inputs({
   const { fields } = useLibrary();
   const { formatMessage } = useIntl();
   const { contentType: currentContentTypeLayout } = useContentTypeLayout();
+  const customFieldsRegistry = useCustomFields();
 
   const disabled = useMemo(() => !get(metadatas, 'editable', true), [metadatas]);
-  const type = fieldSchema.type;
+  const { type, customField: customFieldUid } = fieldSchema;
   const error = get(formErrors, [keys], null);
 
   const fieldName = useMemo(() => {
@@ -157,13 +158,53 @@ function Inputs({
     return disabled;
   }, [disabled, isCreatingEntry, isUserAllowedToEditField, isUserAllowedToReadField]);
 
-  const options = useMemo(() => generateOptions(fieldSchema.enum || [], isRequired), [
-    fieldSchema,
-    isRequired,
-  ]);
+  const options = useMemo(
+    () => generateOptions(fieldSchema.enum || [], isRequired),
+    [fieldSchema, isRequired]
+  );
 
   const { label, description, placeholder, visible } = metadatas;
 
+  /**
+   * It decides whether using the default `step` accoding to its `inputType` or the one
+   * obtained from `metadatas`.
+   *
+   * The `metadatas.step` is returned when the `inputValue` is divisible by it or when the
+   * `inputValue` is empty, otherwise the default `step` is returned.
+   */
+  const inputStep = useMemo(() => {
+    if (!metadatas.step || (inputType !== 'datetime' && inputType !== 'time')) {
+      return step;
+    }
+
+    if (!inputValue) {
+      return metadatas.step;
+    }
+
+    let minutes;
+
+    if (inputType === 'datetime') {
+      minutes = parseInt(inputValue.substr(14, 2), 10);
+    } else if (inputType === 'time') {
+      minutes = parseInt(inputValue.slice(-2), 10);
+    }
+
+    return minutes % metadatas.step === 0 ? metadatas.step : step;
+  }, [inputType, inputValue, metadatas.step, step]);
+
+  // Memoize the component to avoid remounting it and losing state
+  const CustomFieldInput = useMemo(() => {
+    if (customFieldUid) {
+      const customField = customFieldsRegistry.get(customFieldUid);
+      const CustomFieldInput = React.lazy(customField.components.Input);
+
+      return CustomFieldInput;
+    }
+
+    // Not a custom field, component won't be used
+    return null;
+  }, [customFieldUid, customFieldsRegistry]);
+
   if (visible === false) {
     return null;
   }
@@ -217,6 +258,18 @@ function Inputs({
     );
   }
 
+  const customInputs = {
+    json: InputJSON,
+    uid: InputUID,
+    media: fields.media,
+    wysiwyg: Wysiwyg,
+    ...fields,
+  };
+
+  if (customFieldUid) {
+    customInputs[customFieldUid] = CustomFieldInput;
+  }
+
   return (
     <GenericInput
       attribute={fieldSchema}
@@ -229,21 +282,15 @@ function Inputs({
       error={error}
       labelAction={labelAction}
       contentTypeUID={currentContentTypeLayout.uid}
-      customInputs={{
-        json: InputJSON,
-        uid: InputUID,
-        media: fields.media,
-        wysiwyg: Wysiwyg,
-        ...fields,
-      }}
+      customInputs={customInputs}
       multiple={fieldSchema.multiple || false}
       name={keys}
       onChange={onChange}
       options={options}
       placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
       required={fieldSchema.required || false}
-      step={step}
-      type={inputType}
+      step={inputStep}
+      type={customFieldUid || inputType}
       // validations={validations}
       value={inputValue}
       withDefaultValue={false}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 function connect(WrappedComponent, select) {
-  return function(props) {
+  return (props) => {
     // eslint-disable-next-line react/prop-types
     const selectors = select(props.keys);
 

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

@@ -12,7 +12,7 @@ const generateOptions = (options, isRequired = false) => {
       key: '__enum_option_null',
       value: '',
     },
-    ...options.map(option => {
+    ...options.map((option) => {
       return {
         metadatas: {
           intlLabel: {

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

@@ -1,12 +1,8 @@
-const getStep = type => {
+const getStep = (type) => {
   let step;
 
   if (type === 'float' || type === 'decimal') {
     step = 0.01;
-  } else if (type === 'time' || type === 'datetime') {
-    // Since we cannot set a value that is not in the list of the time picker, we need to set the step to 1
-    // TODO: Fix the timepicker in order to be able to set any value regardless of the list
-    step = 1;
   } else {
     step = 1;
   }

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

@@ -44,16 +44,16 @@ function LayoutDndProvider({
 LayoutDndProvider.defaultProps = {
   attributes: {},
   buttonData: [],
-  goTo: () => {},
+  goTo() {},
   layout: [],
   metadatas: {},
-  moveItem: () => {},
-  moveRow: () => {},
-  onAddData: () => {},
+  moveItem() {},
+  moveRow() {},
+  onAddData() {},
   relationsLayout: [],
-  removeField: () => {},
+  removeField() {},
   selectedItemName: null,
-  setEditFieldToSelect: () => {},
+  setEditFieldToSelect() {},
 };
 
 LayoutDndProvider.propTypes = {

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

@@ -12,10 +12,10 @@ import Inputs from '../Inputs';
 
 const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, name }) => {
   const { getComponentLayout } = useContentTypeLayout();
-  const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
-    componentUid,
-    getComponentLayout,
-  ]);
+  const componentLayoutData = useMemo(
+    () => getComponentLayout(componentUid),
+    [componentUid, getComponentLayout]
+  );
   const fields = componentLayoutData.layouts.edit;
 
   return (

package/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js

@@ -25,7 +25,7 @@ const md = new Markdown({
   linkify: true,
   typographer: true,
   // Code from: https://github.com/markdown-it/markdown-it/blob/master/support/demo_template/index.js#L83
-  highlight: (str, lang) => {
+  highlight(str, lang) {
     if (lang && lang !== 'auto' && getLanguage(lang)) {
       return (
         '<pre class="hljs language-' +

package/admin/src/content-manager/components/PreviewWysiwyg/utils/satinizeHtml.js

@@ -11,6 +11,6 @@ const options = {
   },
 };
 
-const clean = dirty => sanitizeHtml(dirty, options);
+const clean = (dirty) => sanitizeHtml(dirty, options);
 
 export default clean;

package/admin/src/content-manager/components/RepeatableComponent/AccordionGroupCustom/index.js

@@ -73,7 +73,7 @@ const LabelAction = styled(Box)`
 
 const AccordionGroupCustom = ({ children, footer, label, labelAction, error }) => {
   const { formatMessage } = useIntl();
-  const childrenArray = Children.toArray(children).map(child => {
+  const childrenArray = Children.toArray(children).map((child) => {
     return cloneElement(child, { hasErrorMessage: false });
   });