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"
}