@akemona-org/strapi-plugin-content-manager 3.7.0

package/admin/src/components/Inputs/index.js

@@ -0,0 +1,283 @@
+import React, { memo, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { get, omit, take } from 'lodash';
+import isEqual from 'react-fast-compare';
+import { useIntl } from 'react-intl';
+import { Inputs as InputsIndex } from '@buffetjs/custom';
+import { NotAllowedInput, useStrapi } 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 InputUID from '../InputUID';
+import {
+  connect,
+  generateOptions,
+  getInputType,
+  getStep,
+  select,
+  VALIDATIONS_TO_OMIT,
+} from './utils';
+
+function Inputs({
+  allowedFields,
+  autoFocus,
+  fieldSchema,
+  formErrors,
+  isCreatingEntry,
+  keys,
+  labelIcon,
+  metadatas,
+  onBlur,
+  onChange,
+  readableFields,
+  shouldNotRunValidations,
+  queryInfos,
+  value,
+}) {
+  const {
+    strapi: { fieldApi },
+  } = useStrapi();
+  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;
+
+  const errorId = useMemo(() => {
+    return get(formErrors, [keys, 'id'], null);
+  }, [formErrors, keys]);
+
+  const errorMessage = errorId ? formatMessage({ id: errorId, defaultMessage: errorId }) : null;
+
+  const fieldName = useMemo(() => {
+    return getFieldName(keys);
+  }, [keys]);
+
+  const validations = useMemo(() => {
+    const inputValidations = omit(
+      fieldSchema,
+      shouldNotRunValidations
+        ? [...VALIDATIONS_TO_OMIT, 'required', 'minLength']
+        : VALIDATIONS_TO_OMIT
+    );
+
+    const regexpString = fieldSchema.regex || null;
+
+    if (regexpString) {
+      const regexp = new RegExp(regexpString);
+
+      if (regexp) {
+        inputValidations.regex = regexp;
+      }
+    }
+
+    return inputValidations;
+  }, [fieldSchema, shouldNotRunValidations]);
+
+  const isRequired = useMemo(() => get(validations, ['required'], false), [validations]);
+
+  const isChildOfDynamicZone = useMemo(() => {
+    const attributes = get(currentContentTypeLayout, ['attributes'], {});
+    const foundAttributeType = get(attributes, [fieldName[0], 'type'], null);
+
+    return foundAttributeType === 'dynamiczone';
+  }, [currentContentTypeLayout, fieldName]);
+
+  const inputType = useMemo(() => {
+    return getInputType(type);
+  }, [type]);
+
+  const inputValue = useMemo(() => {
+    // Fix for input file multipe
+    if (type === 'media' && !value) {
+      return [];
+    }
+
+    return value;
+  }, [type, value]);
+
+  const step = useMemo(() => {
+    return getStep(type);
+  }, [type]);
+
+  const isUserAllowedToEditField = useMemo(() => {
+    const joinedName = fieldName.join('.');
+
+    if (allowedFields.includes(joinedName)) {
+      return true;
+    }
+
+    if (isChildOfDynamicZone) {
+      return allowedFields.includes(fieldName[0]);
+    }
+
+    const isChildOfComponent = fieldName.length > 1;
+
+    if (isChildOfComponent) {
+      const parentFieldName = take(fieldName, fieldName.length - 1).join('.');
+
+      return allowedFields.includes(parentFieldName);
+    }
+
+    return false;
+  }, [allowedFields, fieldName, isChildOfDynamicZone]);
+
+  const isUserAllowedToReadField = useMemo(() => {
+    const joinedName = fieldName.join('.');
+
+    if (readableFields.includes(joinedName)) {
+      return true;
+    }
+
+    if (isChildOfDynamicZone) {
+      return readableFields.includes(fieldName[0]);
+    }
+
+    const isChildOfComponent = fieldName.length > 1;
+
+    if (isChildOfComponent) {
+      const parentFieldName = take(fieldName, fieldName.length - 1).join('.');
+
+      return readableFields.includes(parentFieldName);
+    }
+
+    return false;
+  }, [readableFields, fieldName, isChildOfDynamicZone]);
+
+  const shouldDisplayNotAllowedInput = useMemo(() => {
+    return isUserAllowedToReadField || isUserAllowedToEditField;
+  }, [isUserAllowedToEditField, isUserAllowedToReadField]);
+
+  const shouldDisableField = useMemo(() => {
+    if (!isCreatingEntry) {
+      const doesNotHaveRight = isUserAllowedToReadField && !isUserAllowedToEditField;
+
+      if (doesNotHaveRight) {
+        return true;
+      }
+
+      return disabled;
+    }
+
+    return disabled;
+  }, [disabled, isCreatingEntry, isUserAllowedToEditField, isUserAllowedToReadField]);
+
+  const options = useMemo(() => generateOptions(fieldSchema.enum || [], isRequired), [
+    fieldSchema,
+    isRequired,
+  ]);
+
+  const otherFields = useMemo(() => {
+    return fieldApi.getFields();
+  }, [fieldApi]);
+
+  const { description, visible } = metadatas;
+
+  if (visible === false) {
+    return null;
+  }
+
+  if (!shouldDisplayNotAllowedInput) {
+    return (
+      <NotAllowedInput
+        label={metadatas.label}
+        labelIcon={labelIconformatted}
+        error={errorMessage}
+      />
+    );
+  }
+
+  if (type === 'relation') {
+    return (
+      <div key={keys}>
+        <SelectWrapper
+          {...metadatas}
+          {...fieldSchema}
+          labelIcon={labelIcon}
+          isUserAllowedToEditField={isUserAllowedToEditField}
+          isUserAllowedToReadField={isUserAllowedToReadField}
+          name={keys}
+          queryInfos={queryInfos}
+          value={value}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <InputsIndex
+      {...metadatas}
+      autoComplete="new-password"
+      autoFocus={autoFocus}
+      disabled={shouldDisableField}
+      error={errorMessage}
+      inputDescription={description}
+      labelIcon={labelIconformatted}
+      description={description}
+      contentTypeUID={currentContentTypeLayout.uid}
+      customInputs={{
+        json: InputJSONWithErrors,
+        wysiwyg: WysiwygWithErrors,
+        uid: InputUID,
+        ...otherFields,
+      }}
+      multiple={fieldSchema.multiple || false}
+      attribute={fieldSchema}
+      name={keys}
+      onBlur={onBlur}
+      onChange={onChange}
+      options={options}
+      step={step}
+      type={inputType}
+      validations={validations}
+      value={inputValue}
+      withDefaultValue={false}
+    />
+  );
+}
+
+Inputs.defaultProps = {
+  autoFocus: false,
+  formErrors: {},
+  labelIcon: null,
+  onBlur: null,
+  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,
+  }),
+  metadatas: PropTypes.object.isRequired,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  readableFields: PropTypes.array.isRequired,
+  shouldNotRunValidations: PropTypes.bool.isRequired,
+  queryInfos: PropTypes.shape({
+    containsKey: PropTypes.string,
+    defaultParams: PropTypes.object,
+    endPoint: PropTypes.string,
+  }),
+  value: PropTypes.any,
+};
+
+const Memoized = memo(Inputs, isEqual);
+
+export default connect(Memoized, select);

package/admin/src/components/Inputs/utils/VALIDATIONS_TO_OMIT.js

@@ -0,0 +1,12 @@
+const validationsToOmit = [
+  'type',
+  'model',
+  'via',
+  'collection',
+  'default',
+  'plugin',
+  'enum',
+  'regex',
+];
+
+export default validationsToOmit;

package/admin/src/components/Inputs/utils/connect.js

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

package/admin/src/components/Inputs/utils/generateOptions.js

@@ -0,0 +1,19 @@
+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>
+  )),
+];
+
+export default generateOptions;

package/admin/src/components/Inputs/utils/getInputType.js

@@ -0,0 +1,44 @@
+import { toLower } from 'lodash';
+
+const getInputType = (type = '') => {
+  switch (toLower(type)) {
+    case 'boolean':
+      return 'bool';
+    case 'biginteger':
+      return 'text';
+    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';
+    case 'uid':
+      return 'uid';
+    default:
+      return type || 'text';
+  }
+};
+
+export default getInputType;

package/admin/src/components/Inputs/utils/getStep.js

@@ -0,0 +1,15 @@
+const getStep = type => {
+  let step;
+
+  if (type === 'float' || type === 'decimal') {
+    step = 0.01;
+  } else if (type === 'time' || type === 'datetime') {
+    step = 30;
+  } else {
+    step = 1;
+  }
+
+  return step;
+};
+
+export default getStep;

package/admin/src/components/Inputs/utils/index.js

@@ -0,0 +1,6 @@
+export { default as connect } from './connect';
+export { default as generateOptions } from './generateOptions';
+export { default as getInputType } from './getInputType';
+export { default as getStep } from './getStep';
+export { default as select } from './select';
+export { default as VALIDATIONS_TO_OMIT } from './VALIDATIONS_TO_OMIT';

package/admin/src/components/Inputs/utils/select.js

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { get } from 'lodash';
+import { useContentManagerEditViewDataManager } from 'strapi-helper-plugin';
+
+function useSelect(keys) {
+  const {
+    createActionAllowedFields,
+    formErrors,
+    isCreatingEntry,
+    modifiedData,
+    onChange,
+    readActionAllowedFields,
+    shouldNotRunValidations,
+    updateActionAllowedFields,
+  } = useContentManagerEditViewDataManager();
+
+  const allowedFields = useMemo(() => {
+    return isCreatingEntry ? createActionAllowedFields : updateActionAllowedFields;
+  }, [isCreatingEntry, createActionAllowedFields, updateActionAllowedFields]);
+
+  const readableFields = useMemo(() => {
+    return isCreatingEntry ? [] : readActionAllowedFields;
+  }, [isCreatingEntry, readActionAllowedFields]);
+
+  const value = get(modifiedData, keys, null);
+
+  return {
+    allowedFields,
+    formErrors,
+    isCreatingEntry,
+    onChange,
+    readableFields,
+    shouldNotRunValidations,
+    value,
+  };
+}
+
+export default useSelect;

package/admin/src/components/LayoutTitle/index.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const LayoutTitle = styled.div`
+  color: #333740;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 18px;
+
+  p {
+    margin-top: 2px;
+    margin-bottom: 13px;
+    color: #9ea7b8;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: normal;
+  }
+`;
+
+export default LayoutTitle;

package/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js

@@ -0,0 +1,171 @@
+import styled, { css } from 'styled-components';
+
+const sizes = {
+  small: '35px',
+  big: '127px',
+  margin: '20px',
+};
+const max = 4;
+
+const StyledMediaPreviewList = styled.div`
+  position: relative;
+  height: ${sizes.small};
+  > div {
+    position: absolute;
+    top: 0;
+    ${createCSS()};
+  }
+`;
+
+function createCSS() {
+  let styles = '';
+
+  for (let i = 0; i <= max; i += 1) {
+    styles += `
+      &:nth-of-type(${i}) {
+        left: calc( ${sizes.margin} * ${i - 1});
+        z-index: ${i};
+      }
+    `;
+  }
+
+  return css`
+    ${styles}
+  `;
+}
+
+const MediaPreviewItem = styled.div`
+  width: ${sizes.small};
+  height: ${sizes.small};
+  div {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: calc(${sizes.small} / 2);
+    background-color: #f3f3f4;
+    border: 1px solid #f3f3f4;
+  }
+  &.hoverable {
+    :hover {
+      z-index: ${max + 1};
+    }
+  }
+`;
+
+const MediaPreviewFile = styled(MediaPreviewItem)`
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  div {
+    position: relative;
+    background-color: #f3f3f4;
+    color: #333740;
+    text-align: center;
+    line-height: ${sizes.small};
+    border: 1px solid white;
+    span {
+      display: block;
+      padding: 0 3px;
+      text-transform: uppercase;
+      font-size: 10px;
+      font-weight: 600;
+    }
+    i,
+    svg {
+      position: absolute;
+      left: 1px;
+      top: -1px;
+      font-size: 15px;
+      width: 100%;
+      height: 100%;
+      &:before {
+        width: 100%;
+        height: 100%;
+        padding: 10px;
+        line-height: 35px;
+        background: #f3f3f4;
+      }
+    }
+  }
+  div + span {
+    display: none;
+    position: absolute;
+    left: 120%;
+    bottom: -10px;
+    max-width: 150px;
+    color: #333740;
+  }
+  &.hoverable {
+    :hover {
+      div + span {
+        display: block;
+      }
+    }
+  }
+`;
+
+const MediaPreviewText = styled(MediaPreviewItem)`
+  div {
+    font-size: 13px;
+    color: #333740;
+    text-align: center;
+    line-height: ${sizes.small};
+    font-weight: 600;
+  }
+`;
+
+const MediaPreviewImage = styled(MediaPreviewItem)`
+  img {
+    display: block;
+    object-fit: cover;
+    background-color: #fafafb;
+  }
+  div {
+    position: relative;
+    &::before {
+      content: '-';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: white;
+      color: transparent;
+      opacity: 0;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  div + img {
+    display: none;
+    width: ${sizes.big};
+    height: ${sizes.big};
+    border-radius: calc(${sizes.big} / 2);
+    margin-top: calc(${`-${sizes.big}`} - ${sizes.small} - 5px);
+    margin-left: calc((${sizes.small} - ${sizes.big}) / 2);
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
+  }
+
+  &.hoverable {
+    :hover {
+      div {
+        &::before {
+          opacity: 0.6;
+        }
+      }
+      div + img {
+        display: block;
+      }
+    }
+  }
+`;
+
+export {
+  MediaPreviewFile,
+  MediaPreviewImage,
+  MediaPreviewItem,
+  MediaPreviewText,
+  StyledMediaPreviewList,
+};