Web: Changed style of GroupButton and GroupButtonsMenu components
This commit is contained in:
Ilya Oleshko
parent
676e7610b9
commit
a64badc0ea
@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react'
|
||||
import withReadme from 'storybook-readme/with-readme'
|
||||
import Readme from './README.md'
|
||||
import { Container, Row, Col } from 'reactstrap';
|
||||
import { GroupButton } from 'asc-web-components'
|
||||
import { GroupButton, DropDownItem } from 'asc-web-components'
|
||||
|
||||
const rowStyle = { marginTop: 8 };
|
||||
|
||||
@ -13,102 +13,22 @@ storiesOf('Components|GroupButton', module)
|
||||
.add('all', () => (
|
||||
<Container>
|
||||
<Row style={rowStyle}>
|
||||
<Col xs="1"></Col>
|
||||
<Col>Active</Col>
|
||||
<Col>Hover</Col>
|
||||
<Col>Click*(Press)</Col>
|
||||
<Col>Disable</Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col xs="1">Default</Col>
|
||||
<Col><GroupButton text='' isCheckbox /></Col>
|
||||
<Col><GroupButton text='' isCheckbox hovered /></Col>
|
||||
<Col><GroupButton text='' isCheckbox activated/></Col>
|
||||
<Col><GroupButton text='' isCheckbox disabled /></Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col xs="1"></Col>
|
||||
<Col><GroupButton text='' isCheckbox isDropdown ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton text='' isCheckbox isDropdown hovered ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton text='' isCheckbox isDropdown activated ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton text='' isCheckbox isDropdown disabled ><GroupButton /></GroupButton></Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col xs="1"></Col>
|
||||
<Col><GroupButton text='' isCheckbox isDropdown splitted ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton text='' isCheckbox isDropdown splitted hovered ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton text='' isCheckbox isDropdown splitted activated ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton text='' isCheckbox isDropdown splitted disabled ><GroupButton /></GroupButton></Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col xs="1"></Col>
|
||||
<Col><GroupButton /></Col>
|
||||
<Col><GroupButton hovered /></Col>
|
||||
<Col><GroupButton activated /></Col>
|
||||
<Col><GroupButton activated/></Col>
|
||||
<Col><GroupButton disabled /></Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col xs="1"></Col>
|
||||
<Col><GroupButton isDropdown ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton isDropdown hovered ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton isDropdown activated ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton isDropdown disabled ><GroupButton /></GroupButton></Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col xs="1"></Col>
|
||||
<Col><GroupButton isDropdown splitted ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton isDropdown splitted hovered ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton isDropdown splitted activated ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton isDropdown splitted disabled ><GroupButton /></GroupButton></Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col></Col>
|
||||
<Col></Col>
|
||||
<Col></Col>
|
||||
<Col></Col>
|
||||
<Col></Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col xs="1">Primary</Col>
|
||||
<Col><GroupButton primary text='' isCheckbox /></Col>
|
||||
<Col><GroupButton primary text='' isCheckbox hovered /></Col>
|
||||
<Col><GroupButton primary text='' isCheckbox activated /></Col>
|
||||
<Col><GroupButton primary text='' isCheckbox disabled /></Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col xs="1"></Col>
|
||||
<Col><GroupButton primary text='' isCheckbox isDropdown ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton primary text='' isCheckbox isDropdown hovered ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton primary text='' isCheckbox isDropdown activated ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton primary text='' isCheckbox isDropdown disabled ><GroupButton /></GroupButton></Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col xs="1"></Col>
|
||||
<Col><GroupButton primary text='' isCheckbox isDropdown splitted ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton primary text='' isCheckbox isDropdown splitted hovered ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton primary text='' isCheckbox isDropdown splitted activated ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton primary text='' isCheckbox isDropdown splitted disabled ><GroupButton /></GroupButton></Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col xs="1"></Col>
|
||||
<Col><GroupButton primary /></Col>
|
||||
<Col><GroupButton primary hovered /></Col>
|
||||
<Col><GroupButton primary activated /></Col>
|
||||
<Col><GroupButton primary disabled /></Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col xs="1"></Col>
|
||||
<Col><GroupButton primary isDropdown ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton primary isDropdown hovered ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton primary isDropdown activated ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton primary isDropdown disabled ><GroupButton /></GroupButton></Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col xs="1"></Col>
|
||||
<Col><GroupButton primary isDropdown splitted ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton primary isDropdown splitted hovered ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton primary isDropdown splitted activated ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton primary isDropdown splitted disabled ><GroupButton /></GroupButton></Col>
|
||||
<Col><GroupButton isDropdown ><DropDownItem /></GroupButton></Col>
|
||||
<Col><GroupButton isDropdown hovered ><DropDownItem /></GroupButton></Col>
|
||||
<Col><GroupButton isDropdown activated ><DropDownItem /></GroupButton></Col>
|
||||
<Col><GroupButton isDropdown disabled ><DropDownItem /></GroupButton></Col>
|
||||
</Row>
|
||||
</Container>
|
||||
));
|
||||
@ -13,18 +13,15 @@ Base Button is used for a group action on a page.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
<GroupButton text='Group button' primary={false} disabled={false} isCheckbox={false} isDropdown={false} splitted={false} opened={false} ></GroupButton>
|
||||
<GroupButton label='Group button' disabled={false} isDropdown={false} opened={false} ></GroupButton>
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------ | -------- | :------: | --------------------------- | -------------- | ----------------------------------------------------------------- |
|
||||
| `text` | `string` | - | - | `Default text` | Value of the group button |
|
||||
| `primary` | `bool` | - | - | `false` | Tells when the button should be primary |
|
||||
| `label` | `string` | - | - | `Group button` | Value of the group button |
|
||||
| `disabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
|
||||
| `isCheckbox` | `bool` | - | - | `false` | Tells when the button should present a checkbox state |
|
||||
| `isDropdown` | `bool` | - | - | `false` | Tells when the button should present a dropdown state |
|
||||
| `splitted` | `bool` | - | - | `false` | Tells when the button should present a dropdown state with button |
|
||||
| `opened` | `bool` | - | - | `false` | Tells when the button should be opened by default |
|
||||
| `clickAction` | `func` | - | - | - | What the button will trigger when clicked |
|
||||
| `action` | `func` | - | - | - | What the button will trigger when clicked |
|
||||
@ -3,21 +3,18 @@ import { storiesOf } from '@storybook/react'
|
||||
import { withKnobs, boolean, text } from '@storybook/addon-knobs/react';
|
||||
import withReadme from 'storybook-readme/with-readme'
|
||||
import Readme from './README.md'
|
||||
import { GroupButton } from 'asc-web-components'
|
||||
import { GroupButton, DropDownItem } from 'asc-web-components'
|
||||
|
||||
storiesOf('Components|GroupButton', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('base', () => (
|
||||
<GroupButton
|
||||
text = {text('Label', 'Base group button')}
|
||||
primary = {boolean('primary', false)}
|
||||
label = {text('Label', 'Base group button')}
|
||||
disabled = {boolean('disabled', false)}
|
||||
isCheckbox = {boolean('isCheckbox', false)}
|
||||
isDropdown = {boolean('isDropdown', false)}
|
||||
opened = {boolean('opened', false)}
|
||||
splitted = {boolean('splitted', false)}
|
||||
>
|
||||
<GroupButton/>
|
||||
<DropDownItem/>
|
||||
</GroupButton>
|
||||
));
|
||||
|
||||
@ -1,14 +1,19 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import withReadme from 'storybook-readme/with-readme'
|
||||
import styled from '@emotion/styled';
|
||||
import styled, { css } from '@emotion/styled';
|
||||
import Readme from './README.md'
|
||||
import { GroupButtonsMenu, GroupButton } from 'asc-web-components'
|
||||
import { GroupButtonsMenu, GroupButton, DropDownItem } from 'asc-web-components'
|
||||
|
||||
const GroupButtonsMenuContainer = styled.div`
|
||||
height: 2000px;
|
||||
`;
|
||||
|
||||
const Checkbox = styled.input`
|
||||
vertical-align: middle;
|
||||
margin-left: 24px;
|
||||
`;
|
||||
|
||||
storiesOf('Components|GroupButtonsMenu', module)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('empty', () => (
|
||||
@ -19,41 +24,41 @@ storiesOf('Components|GroupButtonsMenu', module)
|
||||
.add('documents', () => (
|
||||
<GroupButtonsMenuContainer>
|
||||
<GroupButtonsMenu needCollapse>
|
||||
<GroupButton text='' isCheckbox isDropdown>
|
||||
<GroupButton text='All'/>
|
||||
<GroupButton text='Folders'/>
|
||||
<GroupButton text='Documents'/>
|
||||
<GroupButton text='Presentations'/>
|
||||
<GroupButton text='Spreadsheets'/>
|
||||
<GroupButton text='Images'/>
|
||||
<GroupButton text='Media'/>
|
||||
<GroupButton text='Archives'/>
|
||||
<GroupButton text='All files'/>
|
||||
<Checkbox name="checkbox" type="checkbox" />
|
||||
<GroupButton label='Select' isDropdown isSeparator fontWeight='bold'>
|
||||
<DropDownItem label='All'/>
|
||||
<DropDownItem label='Files'/>
|
||||
<DropDownItem label='Folders'/>
|
||||
<DropDownItem label='Documents'/>
|
||||
<DropDownItem label='Presentations'/>
|
||||
<DropDownItem label='Images'/>
|
||||
<DropDownItem label='Archives'/>
|
||||
</GroupButton>
|
||||
<GroupButton text='Sharing Settings'/>
|
||||
<GroupButton text='Download' />
|
||||
<GroupButton text='Download as'/>
|
||||
<GroupButton text='Move to' hovered={false} />
|
||||
<GroupButton text='Copy'/>
|
||||
<GroupButton text='Delete'/>
|
||||
<GroupButton label='Share'/>
|
||||
<GroupButton label='Download' />
|
||||
<GroupButton label='Download as'/>
|
||||
<GroupButton label='Move'/>
|
||||
<GroupButton label='Copy'/>
|
||||
<GroupButton label='Delete'/>
|
||||
</GroupButtonsMenu>
|
||||
</GroupButtonsMenuContainer>
|
||||
))
|
||||
.add('people', () => (
|
||||
<GroupButtonsMenuContainer>
|
||||
<GroupButtonsMenu needCollapse>
|
||||
<GroupButton text='' isCheckbox />
|
||||
<GroupButton text='Change type' isDropdown>
|
||||
<GroupButton text='User'/>
|
||||
<GroupButton text='Guest'/>
|
||||
<Checkbox name="checkbox" type="checkbox" />
|
||||
<GroupButton label='Select' isDropdown isSeparator fontWeight='bold'>
|
||||
<DropDownItem label='Active'/>
|
||||
<DropDownItem label='Disabled'/>
|
||||
<DropDownItem label='Invited'/>
|
||||
</GroupButton>
|
||||
<GroupButton text='Change status' isDropdown>
|
||||
<GroupButton text='Active'/>
|
||||
<GroupButton text='Disabled'/>
|
||||
</GroupButton>
|
||||
<GroupButton text='Send activation link once again' />
|
||||
<GroupButton text='Write Letter'/>
|
||||
<GroupButton text='Delete'/>
|
||||
<GroupButton label='Make employee' />
|
||||
<GroupButton label='Make guest' />
|
||||
<GroupButton label='Set active' />
|
||||
<GroupButton label='Set disabled' />
|
||||
<GroupButton label='Invite again' />
|
||||
<GroupButton label='Send e-mail' />
|
||||
<GroupButton label='Delete' />
|
||||
</GroupButtonsMenu>
|
||||
</GroupButtonsMenuContainer>
|
||||
));
|
||||
@ -4,74 +4,49 @@ import PropTypes from 'prop-types'
|
||||
import { Icons } from '../icons'
|
||||
import DropDown from '../drop-down'
|
||||
|
||||
const backgroundColor = '#ebebeb',
|
||||
disabledBackgroundColor = '#f7f7f7',
|
||||
activatedBackgroundColor = '#e2e2e2',
|
||||
hoveredBackgroundColor = '#f5f5f5',
|
||||
primaryBackgroundColor = '#2da7db',
|
||||
primaryDisabledBackgroundColor = '#a6dcf2',
|
||||
primaryActivatedBackgroundColor = '#1f97ca',
|
||||
primaryHoveredBackgroundColor = '#3db8ec';
|
||||
|
||||
const borderColor = '#c4c4c4',
|
||||
disabledBorderColor = '#ebebeb',
|
||||
activatedBorderColor = '#dadada',
|
||||
hoveredBorderColor = '#d4d4d4',
|
||||
primaryBorderColor = 'transparent';
|
||||
|
||||
const textColor = '#666666',
|
||||
disabledTextColor = '#999999',
|
||||
primaryTextColor = '#ffffff';
|
||||
const textColor = '#333333',
|
||||
disabledTextColor = '#A3A9AE';
|
||||
|
||||
const activatedCss = css`
|
||||
cursor: pointer;
|
||||
border: 1px solid ${props => props.primary ? primaryBorderColor : activatedBorderColor} !important;
|
||||
background-color: ${props => props.primary ? primaryActivatedBackgroundColor : activatedBackgroundColor} !important;
|
||||
`;
|
||||
|
||||
const hoveredCss = css`
|
||||
cursor: pointer;
|
||||
border: 1px solid ${props => props.primary ? primaryBorderColor : hoveredBorderColor};
|
||||
background-color: ${props => props.primary ? primaryHoveredBackgroundColor : hoveredBackgroundColor};
|
||||
`;
|
||||
|
||||
const StyledGroupButton = styled.div`
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
`;
|
||||
|
||||
const StyledDropdownToggle = styled.button`
|
||||
font: normal 12px 'Open Sans', sans-serif;
|
||||
const StyledDropdownToggle = styled.div`
|
||||
font-family: Open Sans;
|
||||
font-style: normal;
|
||||
font-weight: ${props => props.fontWeight};
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
cursor: default;
|
||||
|
||||
color: ${props => (props.primary && primaryTextColor) || (props.disabled ? disabledTextColor : textColor)};
|
||||
background-color: ${props => (props.disabled
|
||||
? (props.primary ? primaryDisabledBackgroundColor : disabledBackgroundColor)
|
||||
: (props.primary ? primaryBackgroundColor : backgroundColor))};
|
||||
border: 1px solid ${props => (props.disabled
|
||||
? (props.primary ? primaryBorderColor : disabledBorderColor)
|
||||
: (props.primary ? primaryBorderColor : borderColor))};
|
||||
color: ${props => (props.disabled ? disabledTextColor : textColor)};
|
||||
|
||||
float: left;
|
||||
height: 21px;
|
||||
margin-right: ${props => props.splitted ? '0px' : '4px'};
|
||||
margin-left: ${props => props.splitted ? '-1px' : '0px'};
|
||||
height: 19px;
|
||||
margin: 18px 12px 19px 12px;
|
||||
overflow: hidden;
|
||||
padding: 1px 5px 1px;
|
||||
padding: 0px;
|
||||
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
border-radius: ${props => props.splitted ? '0px 3px 3px 0px' : '3px'};
|
||||
-moz-border-radius: ${props => props.splitted ? '0px 3px 3px 0px' : '3px'};
|
||||
-webkit-border-radius: ${props => props.splitted ? '0px 3px 3px 0px' : '3px'};
|
||||
|
||||
${props => !props.disabled && (props.activated ? `${activatedCss}` : css`
|
||||
&:active {
|
||||
${activatedCss}
|
||||
@ -83,48 +58,19 @@ const StyledDropdownToggle = styled.button`
|
||||
${hoveredCss}
|
||||
}`)
|
||||
}
|
||||
|
||||
${props => props.isCheckbox & !props.splitted && css`
|
||||
padding: 3px 5px 1px;
|
||||
`}
|
||||
`;
|
||||
|
||||
const StyledButton = styled(StyledDropdownToggle)`
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
|
||||
border-radius: ${props => props.splitted ? '3px 0px 0px 3px' : '3px'};
|
||||
-moz-border-radius: ${props => props.splitted ? '3px 0px 0px 3px' : '3px'};
|
||||
-webkit-border-radius: ${props => props.splitted ? '3px 0px 0px 3px' : '3px'};
|
||||
|
||||
${props => props.isCheckbox & props.splitted && css`
|
||||
padding: 3px 5px 1px;
|
||||
`}
|
||||
`;
|
||||
|
||||
const Caret = styled(Icons.ExpanderDownIcon)`
|
||||
width: 10px;
|
||||
margin-left: 4px;
|
||||
`;
|
||||
|
||||
${props => props.isCheckbox && (props.splitted
|
||||
? css`
|
||||
margin-top: -4px;
|
||||
margin-left: 0;
|
||||
`
|
||||
: css`
|
||||
margin-top: -6px;
|
||||
`)
|
||||
}
|
||||
|
||||
${props => !props.isCheckbox && (props.splitted
|
||||
? css`
|
||||
margin-top: -2px;
|
||||
margin-left: 0;
|
||||
`
|
||||
: css`
|
||||
margin-top: -3px;
|
||||
`)
|
||||
}
|
||||
const Separator = styled.div`
|
||||
vertical-align: middle;
|
||||
border: 0.5px solid #ECEEF1;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
margin-top: 16px;
|
||||
`;
|
||||
|
||||
const useOuterClickNotifier = (onOuterClick, ref) => {
|
||||
@ -142,7 +88,7 @@ const useOuterClickNotifier = (onOuterClick, ref) => {
|
||||
}
|
||||
|
||||
const GroupButton = (props) => {
|
||||
const { text, splitted, isDropdown, isCheckbox, opened, disabled, primary, clickAction } = props;
|
||||
const { label, isDropdown, opened, disabled, action, isSeparator } = props;
|
||||
const [isOpen, toggle] = useState(opened);
|
||||
const ref = useRef(null);
|
||||
|
||||
@ -150,76 +96,50 @@ const GroupButton = (props) => {
|
||||
|
||||
const dropMenu = <DropDown isOpen={isOpen} {...props}/>;
|
||||
|
||||
const splittedDropButton =
|
||||
<>
|
||||
<StyledButton {...props} onClick={clickAction}>
|
||||
{text}
|
||||
{isCheckbox && <input type='checkbox' disabled={disabled ? 'disabled' : ''} />}
|
||||
</StyledButton>
|
||||
<StyledDropdownToggle {...props} onClick={() => { disabled ? false : toggle(!isOpen) }}>
|
||||
<Caret
|
||||
splitted={splitted}
|
||||
isCheckbox={isCheckbox}
|
||||
size='small'
|
||||
color={primary && primaryTextColor || (disabled ? disabledTextColor : textColor)}
|
||||
/>
|
||||
</StyledDropdownToggle>
|
||||
</>;
|
||||
|
||||
const singleDropButton =
|
||||
const dropDownButton =
|
||||
<StyledDropdownToggle {...props} onClick={() => { disabled ? false : toggle(!isOpen) }}>
|
||||
{text}
|
||||
{isCheckbox && <input type='checkbox' disabled={disabled ? 'disabled' : ''} />}
|
||||
<Caret
|
||||
splitted={splitted}
|
||||
isCheckbox={isCheckbox}
|
||||
size='small'
|
||||
color={primary && primaryTextColor || (disabled ? disabledTextColor : textColor)}
|
||||
/>
|
||||
{label}
|
||||
<Caret size='small' color={disabled ? disabledTextColor : textColor} />
|
||||
</StyledDropdownToggle>;
|
||||
|
||||
return (
|
||||
<StyledGroupButton ref={ref} {...props}>
|
||||
{isDropdown
|
||||
? (splitted
|
||||
? { ...splittedDropButton }
|
||||
: { ...singleDropButton })
|
||||
: <StyledDropdownToggle {...props} onClick={clickAction}>
|
||||
{text}
|
||||
{isCheckbox && <input type='checkbox' disabled={disabled ? 'disabled' : ''} />}
|
||||
? {...dropDownButton}
|
||||
: <StyledDropdownToggle {...props} onClick={action}>
|
||||
{label}
|
||||
</StyledDropdownToggle>
|
||||
}
|
||||
{isDropdown && { ...dropMenu }}
|
||||
{isSeparator && <Separator/>}
|
||||
{isDropdown && {...dropMenu}}
|
||||
</StyledGroupButton>
|
||||
);
|
||||
}
|
||||
|
||||
GroupButton.propTypes = {
|
||||
text: PropTypes.string,
|
||||
primary: PropTypes.bool,
|
||||
label: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
activated: PropTypes.bool,
|
||||
opened: PropTypes.bool,
|
||||
hovered: PropTypes.bool,
|
||||
splitted: PropTypes.bool,
|
||||
isCheckbox: PropTypes.bool,
|
||||
isDropdown: PropTypes.bool,
|
||||
isSeparator: PropTypes.bool,
|
||||
tabIndex: PropTypes.number,
|
||||
clickAction: PropTypes.func
|
||||
action: PropTypes.func,
|
||||
fontWeight: PropTypes.string
|
||||
};
|
||||
|
||||
GroupButton.defaultProps = {
|
||||
text: 'Default text',
|
||||
primary: false,
|
||||
label: 'Group button',
|
||||
disabled: false,
|
||||
activated: false,
|
||||
opened: false,
|
||||
hovered: false,
|
||||
splitted: false,
|
||||
isCheckbox: false,
|
||||
isDropdown: false,
|
||||
isSeparator: false,
|
||||
tabIndex: -1,
|
||||
clickAction: (e) => console.log('Button "' + e.target.innerText + '" clicked!')
|
||||
action: (e) => console.log('Button "' + e.target.innerText + '" clicked!'),
|
||||
fontWeight: 600
|
||||
};
|
||||
|
||||
export default GroupButton
|
||||
@ -6,19 +6,46 @@ import GroupButton from '../group-button'
|
||||
const StyledGroupButtonsMenu = styled.div`
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
border-bottom: 1px solid #d1d1d1;
|
||||
color: #999999;
|
||||
height: 30px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.100306);
|
||||
height: 56px;
|
||||
list-style: none;
|
||||
margin: 0 0 -1px;
|
||||
padding: 0 0 8px 0;
|
||||
padding: 0 18px 19px 0;
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const CloseButton = styled.div`
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
content: ' ';
|
||||
height: 20px;
|
||||
width: 1px;
|
||||
background-color: #D8D8D8;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
`;
|
||||
|
||||
const padding = 4;
|
||||
var lastWidth = 0;
|
||||
|
||||
@ -85,7 +112,8 @@ const GroupButtonsMenu = props => {
|
||||
return (
|
||||
<StyledGroupButtonsMenu ref={ref} {...props}>
|
||||
{children}
|
||||
{needCollapse && <GroupButton className="more" isDropdown text='...'>{children}</GroupButton>}
|
||||
{needCollapse && <GroupButton className="more" isDropdown label='More'>{children}</GroupButton>}
|
||||
<CloseButton/>
|
||||
</StyledGroupButtonsMenu>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user