feat: add filter to collection view (#3741)
This commit is contained in:
@ -48,7 +48,7 @@ const DropdownList = styled.ul`
|
||||
`};
|
||||
`;
|
||||
|
||||
const StyledMenuItem = ({ isActive, ...props }) => (
|
||||
const StyledMenuItem = ({ isActive, isCheckedItem = false, ...props }) => (
|
||||
<MenuItem
|
||||
css={css`
|
||||
${components.dropdownItem};
|
||||
@ -58,6 +58,7 @@ const StyledMenuItem = ({ isActive, ...props }) => (
|
||||
&:not(:active) {
|
||||
background-color: ${isActive ? colors.activeBackground : 'inherit'};
|
||||
color: ${isActive ? colors.active : 'inherit'};
|
||||
${isCheckedItem ? 'display: flex; justify-content: start' : ''};
|
||||
}
|
||||
&:hover {
|
||||
color: ${colors.active};
|
||||
@ -128,4 +129,38 @@ DropdownItem.propTypes = {
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export { Dropdown as default, DropdownItem, DropdownButton, StyledDropdownButton };
|
||||
const StyledDropdownCheckbox = ({ checked, id }) => (
|
||||
<input
|
||||
readOnly
|
||||
type="checkbox"
|
||||
css={css`
|
||||
margin-right: 10px;
|
||||
`}
|
||||
checked={checked}
|
||||
id={id}
|
||||
/>
|
||||
);
|
||||
|
||||
const DropdownCheckedItem = ({ label, id, checked, onClick }) => {
|
||||
return (
|
||||
<StyledMenuItem isCheckedItem={true} isActive={checked} onClick={onClick}>
|
||||
<StyledDropdownCheckbox checked={checked} id={id} />
|
||||
<span htmlFor={id}>{label}</span>
|
||||
</StyledMenuItem>
|
||||
);
|
||||
};
|
||||
|
||||
DropdownCheckedItem.propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
id: PropTypes.string.isRequired,
|
||||
checked: PropTypes.bool.isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export {
|
||||
Dropdown as default,
|
||||
DropdownItem,
|
||||
DropdownCheckedItem,
|
||||
DropdownButton,
|
||||
StyledDropdownButton,
|
||||
};
|
||||
|
@ -1,4 +1,9 @@
|
||||
import Dropdown, { DropdownItem, DropdownButton, StyledDropdownButton } from './Dropdown';
|
||||
import Dropdown, {
|
||||
DropdownItem,
|
||||
DropdownCheckedItem,
|
||||
DropdownButton,
|
||||
StyledDropdownButton,
|
||||
} from './Dropdown';
|
||||
import Icon from './Icon';
|
||||
import ListItemTopBar from './ListItemTopBar';
|
||||
import Loader from './Loader';
|
||||
@ -29,6 +34,7 @@ import {
|
||||
export const NetlifyCmsUiDefault = {
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownCheckedItem,
|
||||
DropdownButton,
|
||||
StyledDropdownButton,
|
||||
ListItemTopBar,
|
||||
@ -61,6 +67,7 @@ export const NetlifyCmsUiDefault = {
|
||||
export {
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownCheckedItem,
|
||||
DropdownButton,
|
||||
StyledDropdownButton,
|
||||
ListItemTopBar,
|
||||
|
Reference in New Issue
Block a user