feat(netlify-cms-widget-list): add variable type definitions to list widget (#1857)
This commit is contained in:
committed by
Shawn Erquhart
parent
44b7cdf9f8
commit
8ddc168197
@ -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;
|
||||
|
Reference in New Issue
Block a user