diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/MenuList.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/MenuList.js index 476ed386f9..cc90f82fed 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/MenuList.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/MenuList.js @@ -13,6 +13,7 @@ const MenuList = ({ name, onClickOption, refState, + value, }, ...rest }) => { @@ -50,6 +51,8 @@ const MenuList = ({ return null; } + const isSelected = value.value === component.uid; + return (
  • -

    +

    {upperFirst(component.schema.name)}

  • @@ -86,6 +95,9 @@ MenuList.defaultProps = { }, }, }, + value: { + value: '', + }, }, }; @@ -95,6 +107,7 @@ MenuList.propTypes = { name: PropTypes.string.isRequired, onClickOption: PropTypes.func.isRequired, refState: PropTypes.object, + value: PropTypes.object, }).isRequired, }; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/Value.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/Value.js index 747136903e..cda89838b6 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/Value.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/Value.js @@ -1,8 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { components } from 'react-select'; -import { get } from 'lodash'; +import { get, size } from 'lodash'; +import { FormattedMessage } from 'react-intl'; import useDataManager from '../../hooks/useDataManager'; +import getTrad from '../../utils/getTrad'; import UpperFirst from '../UpperFirst'; const Value = ({ children, ...props }) => { @@ -29,6 +31,11 @@ const Value = ({ children, ...props }) => { const displayedCategory = isCreatingComponent ? componentCategory : category; const displayedName = isCreatingComponent ? componentName : name; const style = { color: '#333740' }; + const valueLength = size(value); + const message = + valueLength > '0' + ? getTrad('components.componentSelect.value-components') + : getTrad('components.componentSelect.value-components'); return ( @@ -42,7 +49,9 @@ const Value = ({ children, ...props }) => { )} {isMultiple && ( - {value.length} components selected + + {msg => {msg}} + )} ); diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/CreatableSelect/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/CreatableSelect/index.js index 20a79674f1..0946746f2d 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/CreatableSelect/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/CreatableSelect/index.js @@ -30,6 +30,7 @@ const CreatableSelect = ({ onChange, name, styles, value }) => {
  • -
    - -
    +
    {/* */}+

    diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/WrapperSelect/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/WrapperSelect/index.js index aa532d4cdc..15333eb795 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/WrapperSelect/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/WrapperSelect/index.js @@ -28,6 +28,16 @@ const WrapperSelect = ({ error, label, name, type, ...rest }) => { borderTopColor: '#E3E9F3 !important', }; }, + option: (base, state) => { + console.log({ base, state }); + return { + ...base, + // backgroundColor: state.isSelected ? '#DEEBFF' : base.backgroundColor, + backgroundColor: '#fff', + color: state.isSelected ? '#007eff' : '#333740', + fontWeight: state.isSelected ? '600' : '400', + }; + }, }; const Component = diff --git a/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json b/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json index 308149f57d..c54bff25d6 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json +++ b/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json @@ -272,5 +272,7 @@ "modalForm.sub-header.addComponentToDynamicZone": "Add new component to the dynamic zone", "popUpWarning.bodyMessage.cancel-modifications": "Are you sure you want to cancel your modifications?", "popUpWarning.bodyMessage.cancel-modifications.with-components": "Are you sure you want to cancel your modifications? Some components have been created or modified...", - "prompt.unsaved": "Are you sure you want to leave? All your modifications will be lost." + "prompt.unsaved": "Are you sure you want to leave? All your modifications will be lost.", + "components.componentSelect.value-components": "{number} components selected", + "components.componentSelect.value-component": "{number} component selected" }