feat(netlify-cms-widget-relation): use react-select and add support for multiple entries (#1936)

This commit is contained in:
Alexander Nanberg
2019-02-19 20:11:38 +01:00
committed by Shawn Erquhart
parent 944290ea1d
commit 518f6fb1c0
9 changed files with 431 additions and 236 deletions

View File

@ -16,4 +16,5 @@ export {
shadows,
borders,
transitions,
reactSelectStyles,
} from './styles';

View File

@ -1,6 +1,17 @@
import { css, injectGlobal } from 'react-emotion';
export { fonts, colorsRaw, colors, lengths, components, buttons, shadows, borders, transitions };
export {
fonts,
colorsRaw,
colors,
lengths,
components,
buttons,
shadows,
borders,
transitions,
reactSelectStyles,
};
/**
* Font Stacks
@ -297,6 +308,49 @@ const components = {
`,
};
const reactSelectStyles = {
control: styles => ({
...styles,
border: 0,
boxShadow: 'none',
padding: '9px 0 9px 12px',
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isSelected
? `${colors.active}`
: state.isFocused
? `${colors.activeBackground}`
: 'transparent',
paddingLeft: '22px',
}),
menu: styles => ({ ...styles, right: 0, zIndex: 2 }),
container: styles => ({ ...styles, padding: '0 !important' }),
indicatorSeparator: (styles, state) =>
state.hasValue && state.selectProps.isClearable
? { ...styles, backgroundColor: `${colors.textFieldBorder}` }
: { display: 'none' },
dropdownIndicator: styles => ({ ...styles, color: `${colors.controlLabel}` }),
clearIndicator: styles => ({ ...styles, color: `${colors.controlLabel}` }),
multiValue: styles => ({
...styles,
backgroundColor: colors.background,
}),
multiValueLabel: styles => ({
...styles,
color: colors.textLead,
fontWeight: 500,
}),
multiValueRemove: styles => ({
...styles,
color: colors.controlLabel,
':hover': {
color: colors.errorText,
backgroundColor: colors.errorBackground,
},
}),
};
injectGlobal`
*, *:before, *:after {
box-sizing: border-box;