feat: add filter to collection view (#3741)

This commit is contained in:
Shashank Bairy R
2020-05-24 17:37:08 +00:00
committed by GitHub
parent d3aaf4ddb3
commit c28cc0c9e7
23 changed files with 652 additions and 63 deletions

View File

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

View File

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