Merge branch 'feature/relations-main-view' into feature/relations-main-view-reducer

This commit is contained in:
Gustav Hansen 2022-08-10 15:49:27 +02:00 committed by GitHub
commit 69f44aded3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 54 additions and 30 deletions

View File

@ -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,

View File

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

View File

@ -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,
};

View File

@ -0,0 +1 @@
export default from './Async';

View File

@ -1,3 +1 @@
import ReactSelect from './ReactSelect';
export default ReactSelect;
export default from './ReactSelect';

View File

@ -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] }),

View File

@ -41,7 +41,6 @@ const MyCompo = () => {
moveComponentDown: () => {},
moveComponentField: () => {},
moveComponentUp: () => {},
moveRelation: () => {},
onChange: () => {},
onRemoveRelation: () => {},
removeComponentFromDynamicZone: () => {},

View File

@ -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';