mirror of
https://github.com/strapi/strapi.git
synced 2025-09-25 16:29:34 +00:00
Merge branch 'feature/relations-main-view' into feature/relations-main-view-reducer
This commit is contained in:
commit
69f44aded3
@ -404,15 +404,6 @@ const EditViewDataManagerProvider = ({
|
||||
});
|
||||
}, []);
|
||||
|
||||
const moveRelation = useCallback((dragIndex, overIndex, name) => {
|
||||
dispatch({
|
||||
type: 'MOVE_FIELD',
|
||||
dragIndex,
|
||||
overIndex,
|
||||
keys: name.split('.'),
|
||||
});
|
||||
}, []);
|
||||
|
||||
const removeRelation = useCallback(({ target: { name, value } }) => {
|
||||
dispatch({
|
||||
type: 'REMOVE_RELATION',
|
||||
@ -488,7 +479,6 @@ const EditViewDataManagerProvider = ({
|
||||
moveComponentDown,
|
||||
moveComponentField,
|
||||
moveComponentUp,
|
||||
moveRelation,
|
||||
onChange: handleChange,
|
||||
onPublish: handlePublish,
|
||||
onUnpublish,
|
||||
|
@ -64,13 +64,8 @@ function SelectWrapper({
|
||||
const [{ query }] = useQueryParams();
|
||||
// Disable the input in case of a polymorphic relation
|
||||
const isMorph = useMemo(() => relationType.toLowerCase().includes('morph'), [relationType]);
|
||||
const {
|
||||
addRelation,
|
||||
modifiedData,
|
||||
moveRelation,
|
||||
onChange,
|
||||
removeRelation,
|
||||
} = useCMEditViewDataManager();
|
||||
|
||||
const { addRelation, modifiedData, onChange, removeRelation } = useCMEditViewDataManager();
|
||||
const { pathname } = useLocation();
|
||||
|
||||
const value = get(modifiedData, name, null);
|
||||
@ -295,7 +290,6 @@ function SelectWrapper({
|
||||
isLoading={isLoading}
|
||||
isClearable
|
||||
mainField={mainField}
|
||||
move={moveRelation}
|
||||
name={name}
|
||||
options={filteredOptions}
|
||||
onChange={handleChange}
|
||||
|
@ -0,0 +1,41 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import SelectAsync from 'react-select/async';
|
||||
import { useTheme } from 'styled-components';
|
||||
|
||||
import ClearIndicator from '../components/ClearIndicator';
|
||||
import DropdownIndicator from '../components/DropdownIndicator';
|
||||
import IndicatorSeparator from '../components/IndicatorSeparator';
|
||||
|
||||
import getSelectStyles from '../utils/getSelectStyles';
|
||||
|
||||
const ReactSelectAsync = ({ components, styles, error, ariaErrorMessage, ...props }) => {
|
||||
const theme = useTheme();
|
||||
const customStyles = getSelectStyles(theme, error);
|
||||
|
||||
return (
|
||||
<SelectAsync
|
||||
{...props}
|
||||
components={{ ClearIndicator, DropdownIndicator, IndicatorSeparator, ...components }}
|
||||
aria-errormessage={error && ariaErrorMessage}
|
||||
aria-invalid={!!error}
|
||||
styles={{ ...customStyles, ...styles }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReactSelectAsync;
|
||||
|
||||
ReactSelectAsync.defaultProps = {
|
||||
ariaErrorMessage: undefined,
|
||||
components: undefined,
|
||||
error: undefined,
|
||||
styles: undefined,
|
||||
};
|
||||
|
||||
ReactSelectAsync.propTypes = {
|
||||
ariaErrorMessage: PropTypes.string,
|
||||
components: PropTypes.object,
|
||||
error: PropTypes.string,
|
||||
styles: PropTypes.object,
|
||||
};
|
@ -0,0 +1 @@
|
||||
export default from './Async';
|
@ -1,3 +1 @@
|
||||
import ReactSelect from './ReactSelect';
|
||||
|
||||
export default ReactSelect;
|
||||
export default from './ReactSelect';
|
||||
|
@ -7,16 +7,16 @@ const getSelectStyles = (theme, error) => {
|
||||
lineHeight: 'normal',
|
||||
}),
|
||||
control: (base, state) => {
|
||||
let border = `1px solid ${theme.colors.neutral200} !important`;
|
||||
let boxShadow = 0;
|
||||
let borderColor = theme.colors.neutral200;
|
||||
let boxShadowColor;
|
||||
let backgroundColor;
|
||||
|
||||
if (state.isFocused) {
|
||||
border = `1px solid ${theme.colors.primary600} !important`;
|
||||
boxShadow = `${theme.colors.primary600} 0px 0px 0px 2px`;
|
||||
borderColor = theme.colors.primary600;
|
||||
boxShadowColor = theme.colors.primary600;
|
||||
} else if (error) {
|
||||
border = `1px solid ${theme.colors.danger600} !important`;
|
||||
boxShadow = `${theme.colors.danger600} 0px 0px 0px 2px`;
|
||||
borderColor = theme.colors.danger600;
|
||||
boxShadowColor = theme.colors.danger600;
|
||||
}
|
||||
|
||||
if (state.isDisabled) {
|
||||
@ -27,7 +27,7 @@ const getSelectStyles = (theme, error) => {
|
||||
...base,
|
||||
fontSize: 14,
|
||||
height: 40,
|
||||
border,
|
||||
border: `1px solid ${borderColor} !important`,
|
||||
outline: 0,
|
||||
borderRadius: '2px !important',
|
||||
backgroundColor,
|
||||
@ -35,7 +35,7 @@ const getSelectStyles = (theme, error) => {
|
||||
borderTopRightRadius: '4px !important',
|
||||
borderBottomLeftRadius: '4px !important',
|
||||
borderBottomRightRadius: '4px !important',
|
||||
boxShadow,
|
||||
boxShadow: boxShadowColor ? `${boxShadowColor} 0px 0px 0px 2px` : 0,
|
||||
};
|
||||
},
|
||||
indicatorContainer: base => ({ ...base, padding: 0, paddingRight: theme.spaces[3] }),
|
||||
|
@ -41,7 +41,6 @@ const MyCompo = () => {
|
||||
moveComponentDown: () => {},
|
||||
moveComponentField: () => {},
|
||||
moveComponentUp: () => {},
|
||||
moveRelation: () => {},
|
||||
onChange: () => {},
|
||||
onRemoveRelation: () => {},
|
||||
removeComponentFromDynamicZone: () => {},
|
||||
|
@ -64,6 +64,7 @@ export { default as PageSizeURLQuery } from './components/PageSizeURLQuery';
|
||||
export { default as RelativeTime } from './components/RelativeTime';
|
||||
export { default as DateTimePicker } from './components/DateTimePicker';
|
||||
export { default as ReactSelect } from './components/ReactSelect';
|
||||
export { default as ReactSelectAsync } from './components/ReactSelect/Async';
|
||||
export { default as Link } from './components/Link';
|
||||
export { default as LinkButton } from './components/LinkButton';
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user