migrate object and list widgets

This commit is contained in:
Shawn Erquhart
2018-07-24 17:13:48 -04:00
parent 2efd09ba94
commit 3f47fe6dbf
29 changed files with 289 additions and 422 deletions

View File

@ -1,9 +1,18 @@
import React from 'react';
import styled from 'react-emotion';
import Icon from './Icon';
import { colors, lengths } from './styles';
import { colors, lengths, buttons } from './styles';
const TopBar = styled.div`
display: flex;
justify-content: space-between;
height: 26px;
border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
position: relative;
`
const TopBarButton = styled.button`
${buttons.button};
color: ${colors.controlLabel};
background: transparent;
font-size: 16px;
@ -24,8 +33,8 @@ const DragIcon = styled(TopBarButtonSpan)`
cursor: move;
`
const ListItemTopBar = ({ collapsed, onCollapseToggle, onRemove, dragHandleHOC }) => (
<div>
const ListItemTopBar = ({ className, collapsed, onCollapseToggle, onRemove, dragHandleHOC }) => (
<TopBar className={className}>
{
onCollapseToggle
? <TopBarButton onClick={onCollapseToggle}>
@ -47,7 +56,7 @@ const ListItemTopBar = ({ collapsed, onCollapseToggle, onRemove, dragHandleHOC }
</TopBarButton>
: null
}
</div>
</TopBar>
);
const StyledListItemTopBar = styled(ListItemTopBar)`

View File

@ -0,0 +1,67 @@
import React from 'react';
import styled, { css }from 'react-emotion';
import Icon from './Icon';
import { colors, buttons } from './styles';
const TopBarContainer = styled.div`
align-items: center;
background-color: ${colors.textFieldBorder};
display: flex;
justify-content: space-between;
margin: 0 -14px;
padding: 13px;
`
const ExpandButtonContainer = styled.div`
${props => props.hasHeading && css`
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
line-height: 1;
`}
`
const ExpandButton = styled.button`
${buttons.button};
padding: 4px;
background-color: transparent;
color: inherit;
&:last-of-type {
margin-right: 4px;
}
`
const AddButton = styled.button`
${buttons.button};
display: flex;
justify-content: center;
align-items: center;
padding: 2px 12px;
font-size: 12px;
font-weight: bold;
border-radius: 3px;
${Icon} {
margin-left: 6px;
}
`
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>
);
export default ObjectWidgetTopBar;

View File

@ -5,6 +5,7 @@ export Loader from './Loader';
export Toggle, { ToggleContainer, ToggleBackground, ToggleHandle } from './Toggle';
export AuthenticationPage from './AuthenticationPage';
export WidgetPreviewContainer from './WidgetPreviewContainer';
export ObjectWidgetTopBar from './ObjectWidgetTopBar';
export {
fonts,
colorsRaw,

View File

@ -253,6 +253,9 @@ const components = {
font-size: 14px;
margin-top: 8px;
`,
objectWidgetTopBarContainer: css`
padding: 0 14px 14px;
`,
}
injectGlobal`