feat(netlify-cms-widget-relation): use react-select and add support for multiple entries (#1936)
This commit is contained in:
committed by
Shawn Erquhart
parent
944290ea1d
commit
518f6fb1c0
@ -16,4 +16,5 @@ export {
|
||||
shadows,
|
||||
borders,
|
||||
transitions,
|
||||
reactSelectStyles,
|
||||
} from './styles';
|
||||
|
@ -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;
|
||||
|
Reference in New Issue
Block a user