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

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

@@ -1,27 +1,32 @@
 import React, { useCallback, useState, useEffect, useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { Link, useLocation } from 'react-router-dom';
-import { findIndex, get, isArray, isEmpty, set } from 'lodash';
 import {
-  DropdownIndicator,
-  LabelIconWrapper,
-  NotAllowedInput,
-  useContentManagerEditViewDataManager,
-  useQueryParams,
-} from '@strapi/helper-plugin';
-import { Flex, Text, Padded } from '@buffetjs/core';
+  // FormattedMessage,
+  useIntl,
+} from 'react-intl';
+import { useLocation } from 'react-router-dom';
+import { Link } from '@strapi/parts/Link';
+import { Stack } from '@strapi/parts/Stack';
+import { useTheme } from 'styled-components';
+import findIndex from 'lodash/findIndex';
+import get from 'lodash/get';
+import isArray from 'lodash/isArray';
+import isEmpty from 'lodash/isEmpty';
+import set from 'lodash/set';
+import { NotAllowedInput, useCMEditViewDataManager, useQueryParams } from '@strapi/helper-plugin';
 import { stringify } from 'qs';
 import axios from 'axios';
 import { axiosInstance } from '../../../core/utils';
 import { getTrad } from '../../utils';
+import Label from './Label';
 import SelectOne from '../SelectOne';
 import SelectMany from '../SelectMany';
 import ClearIndicator from './ClearIndicator';
+import DropdownIndicator from './DropdownIndicator';
 import IndicatorSeparator from './IndicatorSeparator';
 import Option from './Option';
-import { A, BaselineAlignment } from './components';
-import { connect, select, styles } from './utils';
+import { connect, select } from './utils';
+import getSelectStyles from './utils/getSelectStyles';
 
 const initialPaginationState = {
   _contains: '',
@@ -45,10 +50,10 @@ const buildParams = (query, paramsToKeep) => {
   }, {});
 };
 function SelectWrapper({
-  description,
+  // description,
   editable,
-  label,
-  labelIcon,
+  labelAction,
+  intlLabel,
   isCreatingEntry,
   isFieldAllowed,
   isFieldReadable,
@@ -69,8 +74,9 @@ function SelectWrapper({
     moveRelation,
     onChange,
     onRemoveRelation,
-  } = useContentManagerEditViewDataManager();
+  } = useCMEditViewDataManager();
   const { pathname } = useLocation();
+  const theme = useTheme();
 
   const value = get(modifiedData, name, null);
   const [state, setState] = useState(initialPaginationState);
@@ -170,15 +176,17 @@ function SelectWrapper({
       }
     },
     [
-      isMorph,
-      isFieldAllowed,
-      state._limit,
-      state._contains,
-      defaultParams,
       containsKey,
+      defaultParams,
       endPoint,
       idsToOmit,
+      isFieldAllowed,
+      isMorph,
       mainField.name,
+      setIsLoading,
+      setOptions,
+      state._contains,
+      state._limit,
     ]
   );
 
@@ -234,23 +242,15 @@ function SelectWrapper({
 
   const searchToPersist = stringify(buildParams(query, paramsToKeep), { encode: false });
 
-  const link = useMemo(() => {
-    if (!value) {
-      return null;
-    }
-
-    if (!shouldDisplayRelationLink) {
-      return null;
-    }
+  let link = null;
 
-    return (
+  if (isSingle && value && shouldDisplayRelationLink) {
+    link = (
       <Link to={{ pathname: to, state: { from: pathname }, search: searchToPersist }}>
-        <FormattedMessage id="content-manager.containers.Edit.seeDetails">
-          {msg => <A color="mediumBlue">{msg}</A>}
-        </FormattedMessage>
+        {formatMessage({ id: getTrad('containers.Edit.seeDetails'), defaultMessage: 'Details' })}
       </Link>
     );
-  }, [shouldDisplayRelationLink, pathname, to, value, searchToPersist]);
+  }
 
   const Component = isSingle ? SelectOne : SelectMany;
   const associationsLength = isArray(value) ? value.length : 0;
@@ -267,106 +267,148 @@ function SelectWrapper({
     return !editable;
   }, [isMorph, isCreatingEntry, editable, isFieldAllowed, isFieldReadable]);
 
-  const labelIconformatted = labelIcon
-    ? { icon: labelIcon.icon, title: formatMessage(labelIcon.title) }
-    : labelIcon;
-
   if (!isFieldAllowed && isCreatingEntry) {
-    return <NotAllowedInput label={label} labelIcon={labelIconformatted} />;
+    return <NotAllowedInput intlLabel={intlLabel} labelAction={labelAction} />;
   }
 
   if (!isCreatingEntry && !isFieldAllowed && !isFieldReadable) {
-    return <NotAllowedInput label={label} labelIcon={labelIconformatted} />;
+    return <NotAllowedInput intlLabel={intlLabel} labelAction={labelAction} />;
   }
 
+  const styles = getSelectStyles(theme);
+
   return (
-    <Padded>
-      <BaselineAlignment />
-      <Flex justifyContent="space-between">
-        <Flex>
-          <Text fontWeight="semiBold">
-            <span>
-              {label}
-              {!isSingle && ` (${associationsLength})`}
-            </span>
-          </Text>
-          {labelIconformatted && (
-            <div style={{ lineHeight: '13px' }}>
-              <LabelIconWrapper title={labelIconformatted.title}>
-                {labelIconformatted.icon}
-              </LabelIconWrapper>
-            </div>
-          )}
-        </Flex>
-        {isSingle && link}
-      </Flex>
-      {!isEmpty(description) && (
-        <Padded top size="xs">
-          <BaselineAlignment />
-          <Text fontSize="sm" color="grey" lineHeight="12px" ellipsis>
-            {description}
-          </Text>
-        </Padded>
-      )}
-      <Padded top size="sm">
-        <BaselineAlignment />
-
-        <Component
-          addRelation={handleAddRelation}
-          components={{ ClearIndicator, DropdownIndicator, IndicatorSeparator, Option }}
-          displayNavigationLink={shouldDisplayRelationLink}
-          id={name}
-          isDisabled={isDisabled}
-          isLoading={isLoading}
-          isClearable
-          mainField={mainField}
-          move={moveRelation}
-          name={name}
-          options={filteredOptions}
-          onChange={handleChange}
-          onInputChange={handleInputChange}
-          onMenuClose={handleMenuClose}
-          onMenuOpen={handleMenuOpen}
-          onMenuScrollToBottom={handleMenuScrollToBottom}
-          onRemove={onRemoveRelation}
-          placeholder={
-            isEmpty(placeholder) ? (
-              <FormattedMessage id={getTrad('containers.Edit.addAnItem')} />
-            ) : (
-              placeholder
-            )
-          }
-          searchToPersist={searchToPersist}
-          styles={styles}
-          targetModel={targetModel}
-          value={value}
-        />
-      </Padded>
-      <div style={{ marginBottom: 28 }} />
-    </Padded>
+    <Stack size={1}>
+      <Label
+        intlLabel={intlLabel}
+        isSingle={isSingle}
+        labelAction={labelAction}
+        link={link}
+        name={name}
+        numberOfEntries={associationsLength}
+      />
+      <Component
+        addRelation={handleAddRelation}
+        components={{
+          ClearIndicator,
+          DropdownIndicator,
+          IndicatorSeparator,
+          Option,
+        }}
+        displayNavigationLink={shouldDisplayRelationLink}
+        id={name}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        isClearable
+        mainField={mainField}
+        move={moveRelation}
+        name={name}
+        options={filteredOptions}
+        // options={temp}
+        onChange={handleChange}
+        onInputChange={handleInputChange}
+        onMenuClose={handleMenuClose}
+        onMenuOpen={handleMenuOpen}
+        onMenuScrollToBottom={handleMenuScrollToBottom}
+        onRemove={onRemoveRelation}
+        placeholder={placeholder}
+        searchToPersist={searchToPersist}
+        styles={styles}
+        targetModel={targetModel}
+        value={value}
+      />
+    </Stack>
   );
+
+  // return (
+  //   <Padded>
+  //     <BaselineAlignment />
+  //     <Flex justifyContent="space-between">
+  //       <Flex>
+  //         <Text fontWeight="semiBold">
+  //           <span>
+  //             {label}
+  //             {!isSingle && ` (${associationsLength})`}
+  //           </span>
+  //         </Text>
+  //         {labelIconformatted && (
+  //           <div style={{ lineHeight: '13px' }}>
+  //             <LabelIconWrapper title={labelIconformatted.title}>
+  //               {labelIconformatted.icon}
+  //             </LabelIconWrapper>
+  //           </div>
+  //         )}
+  //       </Flex>
+  //       {isSingle && link}
+  //     </Flex>
+  //     {!isEmpty(description) && (
+  //       <Padded top size="xs">
+  //         <BaselineAlignment />
+  //         <Text fontSize="sm" color="grey" lineHeight="12px" ellipsis>
+  //           {description}
+  //         </Text>
+  //       </Padded>
+  //     )}
+  //     <Padded top size="sm">
+  //       <BaselineAlignment />
+
+  // <Component
+  //   addRelation={handleAddRelation}
+  //   components={{ ClearIndicator, DropdownIndicator, IndicatorSeparator, Option }}
+  //   displayNavigationLink={shouldDisplayRelationLink}
+  //   id={name}
+  //   isDisabled={isDisabled}
+  //   isLoading={isLoading}
+  //   isClearable
+  //   mainField={mainField}
+  //   move={moveRelation}
+  //   name={name}
+  //   options={filteredOptions}
+  //   onChange={handleChange}
+  //   onInputChange={handleInputChange}
+  //   onMenuClose={handleMenuClose}
+  //   onMenuOpen={handleMenuOpen}
+  //   onMenuScrollToBottom={handleMenuScrollToBottom}
+  //   onRemove={onRemoveRelation}
+  //   placeholder={
+  //     isEmpty(placeholder) ? (
+  //       <FormattedMessage id={getTrad('containers.Edit.addAnItem')} />
+  //     ) : (
+  //       placeholder
+  //     )
+  //   }
+  //   searchToPersist={searchToPersist}
+  //   styles={styles}
+  //   targetModel={targetModel}
+  //   value={value}
+  // />
+  //     </Padded>
+  //     <div style={{ marginBottom: 28 }} />
+  //   </Padded>
+  // );
 }
 
 SelectWrapper.defaultProps = {
   editable: true,
-  description: '',
-  label: '',
-  labelIcon: null,
+  // description: '',
+  labelAction: null,
   isFieldAllowed: true,
-  placeholder: '',
+  placeholder: null,
 };
 
 SelectWrapper.propTypes = {
   editable: PropTypes.bool,
-  description: PropTypes.string,
-  label: PropTypes.string,
-  labelIcon: PropTypes.shape({
-    icon: PropTypes.node.isRequired,
-    title: PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      defaultMessage: PropTypes.string,
-    }),
-  }),
+  // description: PropTypes.shape({
+  //   id: PropTypes.string.isRequired,
+  //   defaultMessage: PropTypes.string.isRequired,
+  //   values: PropTypes.object,
+  // }),
+  intlLabel: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }).isRequired,
+  labelAction: PropTypes.element,
   isCreatingEntry: PropTypes.bool.isRequired,
   isFieldAllowed: PropTypes.bool,
   isFieldReadable: PropTypes.bool.isRequired,
@@ -377,7 +419,11 @@ SelectWrapper.propTypes = {
     }).isRequired,
   }).isRequired,
   name: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
+  placeholder: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }),
   relationType: PropTypes.string.isRequired,
   targetModel: PropTypes.string.isRequired,
   queryInfos: PropTypes.shape({
@@ -391,4 +437,7 @@ SelectWrapper.propTypes = {
 
 const Memoized = memo(SelectWrapper);
 
-export default connect(Memoized, select);
+export default connect(
+  Memoized,
+  select
+);

package/admin/src/content-manager/components/SelectWrapper/utils/getSelectStyles.js

@@ -0,0 +1,89 @@
+const getSelectStyles = theme => {
+  return {
+    clearIndicator: base => ({ ...base, padding: 0, paddingRight: theme.spaces[3] }),
+    container: base => ({
+      ...base,
+      background: theme.colors.neutral0,
+      fontFamily: 'Arial',
+      lineHeight: 'normal',
+    }),
+    control: (base, state) => {
+      let border;
+      let borderBottom;
+      let backgroundColor;
+
+      if (state.isFocused) {
+        border = `1px solid ${theme.colors.primary600} !important`;
+      } else {
+        border = `1px solid ${theme.colors.neutral200} !important`;
+      }
+
+      if (state.menuIsOpen === true) {
+        borderBottom = `1px solid ${theme.colors.primary600} !important`;
+      }
+
+      if (state.isDisabled) {
+        backgroundColor = '#fafafb !important';
+      }
+
+      return {
+        ...base,
+        fontSize: 14,
+        height: 40,
+        border,
+        outline: 0,
+        boxShadow: 0,
+        borderRadius: '2px !important',
+        borderBottom,
+        backgroundColor,
+        borderTopLeftRadius: '4px !important',
+        borderTopRightRadius: '4px !important',
+        borderBottomLeftRadius: '4px !important',
+        borderBottomRightRadius: '4px !important',
+      };
+    },
+    indicatorContainer: base => ({ ...base, padding: 0, paddingRight: theme.spaces[3] }),
+    input: base => ({ ...base, margin: 0, padding: 0 }),
+    menu: base => {
+      return {
+        ...base,
+        width: '100%',
+        marginTop: theme.spaces[1],
+        borderRadius: '4px !important',
+        borderTopLeftRadius: '4px !important',
+        borderTopRightRadius: '4px !important',
+        border: `1px solid ${theme.colors.neutral200} !important`,
+        boxShadow: 0,
+        fontSize: '14px',
+        fontFamily: 'Arial',
+      };
+    },
+    menuList: base => ({
+      ...base,
+      paddingLeft: theme.spaces[1],
+      paddingTop: theme.spaces[1],
+      paddingRight: theme.spaces[1],
+      paddingBottom: theme.spaces[1],
+    }),
+    option: (base, state) => {
+      let backgroundColor = base.backgroundColor;
+
+      if (state.isFocused) {
+        backgroundColor = theme.colors.primary100;
+      }
+
+      return { ...base, lineHeight: theme.spaces[5], backgroundColor, borderRadius: 4 };
+    },
+    placeholder: base => ({ ...base, marginLeft: 0 }),
+    singleValue: base => ({ ...base, marginLeft: 0 }),
+    valueContainer: base => ({
+      ...base,
+      padding: 0,
+      paddingLeft: theme.spaces[4],
+      marginLeft: 0,
+      marginRight: 0,
+    }),
+  };
+};
+
+export default getSelectStyles;

package/admin/src/content-manager/components/SelectWrapper/utils/index.js

@@ -1,3 +1,2 @@
 export { default as connect } from './connect';
 export { default as select } from './select';
-export { default as styles } from './styles';

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useContentManagerEditViewDataManager } from '@strapi/helper-plugin';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 function useSelect({ isUserAllowedToEditField, isUserAllowedToReadField, name }) {
   const {
@@ -7,7 +7,7 @@ function useSelect({ isUserAllowedToEditField, isUserAllowedToReadField, name })
     createActionAllowedFields,
     readActionAllowedFields,
     updateActionAllowedFields,
-  } = useContentManagerEditViewDataManager();
+  } = useCMEditViewDataManager();
 
   const isFieldAllowed = useMemo(() => {
     if (isUserAllowedToEditField === true) {

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

@@ -1,21 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Text } from '@buffetjs/core';
+import { Text } from '@strapi/parts/Text';
+import { Box } from '@strapi/parts/Box';
 import { getTrad } from '../../utils';
-import Wrapper from './Wrapper';
 
 const State = ({ isPublished }) => {
   const { formatMessage } = useIntl();
+  const content = formatMessage({
+    id: getTrad(`containers.List.${isPublished ? 'published' : 'draft'}`),
+  });
+  const background = isPublished ? 'success100' : 'secondary100';
+  const textColor = isPublished ? 'success700' : 'secondary700';
 
   return (
-    <Wrapper isGreen={isPublished}>
-      <Text lineHeight="19px">
-        {formatMessage({
-          id: getTrad(`containers.List.${isPublished ? 'published' : 'draft'}`),
-        })}
+    <Box
+      background={background}
+      hasRadius
+      paddingTop={1}
+      paddingBottom={1}
+      paddingLeft={2}
+      paddingRight={2}
+      style={{ width: 'fit-content' }}
+    >
+      <Text bold textColor={textColor}>
+        {content}
       </Text>
-    </Wrapper>
+    </Box>
   );
 };
 

package/admin/src/content-manager/components/Wysiwyg/Editor.js

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import CodeMirror from 'codemirror';
+import 'codemirror/addon/display/placeholder';
+import PreviewWysiwyg from '../PreviewWysiwyg';
+import EditorWrapper from './EditorWrapper';
+import { EditorAndPreviewWrapper } from './WysiwygStyles';
+import newlineAndIndentContinueMarkdownList from './utils/continueList';
+
+const Editor = ({
+  disabled,
+  editorRef,
+  error,
+  isPreviewMode,
+  name,
+  onChange,
+  placeholder,
+  textareaRef,
+  value,
+}) => {
+  const onChangeRef = useRef(onChange);
+
+  useEffect(() => {
+    editorRef.current = CodeMirror.fromTextArea(textareaRef.current, {
+      lineWrapping: true,
+      extraKeys: {
+        Enter: 'newlineAndIndentContinueMarkdownList',
+        Tab: false,
+        'Shift-Tab': false,
+      },
+      readOnly: false,
+    });
+
+    CodeMirror.commands.newlineAndIndentContinueMarkdownList = newlineAndIndentContinueMarkdownList;
+    editorRef.current.on('change', doc => {
+      onChangeRef.current({ target: { name, value: doc.getValue(), type: 'wysiwyg' } });
+    });
+  }, [editorRef, textareaRef, name]);
+
+  useEffect(() => {
+    if (value && !editorRef.current.state.focused) {
+      editorRef.current.setValue(value);
+    }
+  }, [editorRef, value]);
+
+  useEffect(() => {
+    if (isPreviewMode || disabled) {
+      editorRef.current.setOption('readOnly', 'nocursor');
+    } else {
+      editorRef.current.setOption('readOnly', false);
+    }
+  }, [disabled, isPreviewMode, editorRef]);
+
+  useEffect(() => {
+    if (error) {
+      editorRef.current.setOption('screenReaderLabel', error);
+    } else {
+      // to replace with translation
+      editorRef.current.setOption('screenReaderLabel', 'Editor');
+    }
+  }, [editorRef, error]);
+
+  return (
+    <EditorAndPreviewWrapper>
+      <EditorWrapper disabled={disabled || isPreviewMode}>
+        <textarea ref={textareaRef} placeholder={placeholder} />
+      </EditorWrapper>
+      {isPreviewMode && <PreviewWysiwyg data={value} />}
+    </EditorAndPreviewWrapper>
+  );
+};
+
+Editor.defaultProps = {
+  disabled: false,
+  error: undefined,
+  isPreviewMode: false,
+  placeholder: '',
+  value: '',
+};
+
+Editor.propTypes = {
+  disabled: PropTypes.bool,
+  editorRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
+  error: PropTypes.string,
+  isPreviewMode: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  textareaRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
+  value: PropTypes.string,
+};
+
+export default Editor;