feat(netlify-cms-widget-list): add variable type definitions to list widget (#1857)

This commit is contained in:
Simon Hanukaev
2018-12-27 06:51:35 +02:00
committed by Shawn Erquhart
parent 44b7cdf9f8
commit 8ddc168197
6 changed files with 269 additions and 39 deletions

View File

@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
import styled, { css } from 'react-emotion';
import Icon from './Icon';
import { colors, buttons } from './styles';
import Dropdown, { StyledDropdownButton, DropdownItem } from './Dropdown';
import ImmutablePropTypes from 'react-immutable-proptypes';
const TopBarContainer = styled.div`
align-items: center;
@ -51,36 +53,70 @@ const AddButton = styled.button`
}
`;
const ObjectWidgetTopBar = ({
allowAdd,
onAdd,
onCollapseToggle,
collapsed,
heading = null,
label,
}) => (
<TopBarContainer>
<ExpandButtonContainer hasHeading={!!heading}>
<ExpandButton onClick={onCollapseToggle}>
<Icon type="chevron" direction={collapsed ? 'right' : 'down'} size="small" />
</ExpandButton>
{heading}
</ExpandButtonContainer>
{!allowAdd ? null : (
<AddButton onClick={onAdd}>
Add {label} <Icon type="add" size="xsmall" />
</AddButton>
)}
</TopBarContainer>
);
class ObjectWidgetTopBar extends React.Component {
static propTypes = {
allowAdd: PropTypes.bool,
types: ImmutablePropTypes.list,
onAdd: PropTypes.func,
onAddType: PropTypes.func,
onCollapseToggle: PropTypes.func,
collapsed: PropTypes.bool,
heading: PropTypes.node,
label: PropTypes.string,
};
ObjectWidgetTopBar.propTypes = {
allowAdd: PropTypes.bool,
onAdd: PropTypes.func,
onCollapseToggle: PropTypes.func,
collapsed: PropTypes.bool,
heading: PropTypes.node,
label: PropTypes.string,
};
renderAddUI() {
if (!this.props.allowAdd) {
return null;
}
if (this.props.types && this.props.types.size > 0) {
return this.renderTypesDropdown(this.props.types);
} else {
return this.renderAddButton();
}
}
renderTypesDropdown(types) {
return (
<Dropdown
renderButton={() => (
<StyledDropdownButton>Add {this.props.label} item</StyledDropdownButton>
)}
>
{types.map((type, idx) => (
<DropdownItem
key={idx}
label={type.get('label', type.get('name'))}
onClick={() => this.props.onAddType(type.get('name'))}
/>
))}
</Dropdown>
);
}
renderAddButton() {
return (
<AddButton onClick={this.props.onAdd}>
Add {this.props.label} <Icon type="add" size="xsmall" />
</AddButton>
);
}
render() {
const { onCollapseToggle, collapsed, heading = null } = this.props;
return (
<TopBarContainer>
<ExpandButtonContainer hasHeading={!!heading}>
<ExpandButton onClick={onCollapseToggle}>
<Icon type="chevron" direction={collapsed ? 'right' : 'down'} size="small" />
</ExpandButton>
{heading}
</ExpandButtonContainer>
{this.renderAddUI()}
</TopBarContainer>
);
}
}
export default ObjectWidgetTopBar;