IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Added properties isHeader and disabled to DropDownItem component and changed story of this component

Browse Source
This commit is contained in:
Ilya Oleshko 2019-07-12 13:40:37 +03:00
parent 672132117a
commit 8f43a40492
4 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/ASC.Web.Components/src/components/drop-down-item/index.js
View File

@ -28,7 +28,9 @@ const StyledDropdownItem = styled.button`
display: ${props => props.isUserPreview ? 'inline-block' : 'block'};
color: #333333;
color: ${props => props.disabled || props.isHeader ? '#A3A9AE' : '#333333'};
text-transform: ${props => props.isHeader ? 'uppercase' : 'none'};
box-sizing: border-box;
text-align: left;
background: none;
@ -46,29 +48,27 @@ const StyledDropdownItem = styled.button`
font-size: 13px;
${itemTruncate}
&:hover{
${props => (!props.isSeparator
? `
${props => props.isSeparator || props.disabled || props.isHeader
? `cursor: default;`
: `
background-color: #F8F9F9;
width: 100%;
text-align: left;
&:first-of-type{
&:first-of-type {
border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
}
&:last-of-type{
&:last-of-type {
border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
}`
: `
cursor: default;
`
)}
}
}
`;
@ -114,7 +114,7 @@ const UserEmailWrapper = styled.div`
`;
const DropDownItem = props => {
const {isSeparator, isUserPreview, tabIndex, onClick, label} = props;
const {isSeparator, isUserPreview, label} = props;
return (
<StyledDropdownItem {...props} >
{isSeparator ? '\u00A0' : !isUserPreview && label}
@ -138,17 +138,19 @@ const DropDownItem = props => {
DropDownItem.propTypes = {
isSeparator: PropTypes.bool,
isUserPreview: PropTypes.bool,
isHeader: PropTypes.bool,
tabIndex: PropTypes.number,
onClick: PropTypes.func,
label: PropTypes.string
label: PropTypes.string,
disabled: PropTypes.bool
};
DropDownItem.defaultProps = {
isSeparator: false,
isUserPreview: false,
isHeader: false,
tabIndex: -1,
onClick: (e) => console.log('Button "' + e.target.innerText + '" clicked!'),
label: ''
label: '',
disabled: false
};
export default DropDownItem

5
web/ASC.Web.Storybook/stories/drop-down/base/index.stories.js
View File

@ -20,6 +20,10 @@ storiesOf('Components| DropDown', module)
<Col xs="4">
Without active button
<DropDown opened={true}>
<DropDownItem
isHeader
label='Category 1'
/>
<DropDownItem
label='Button 1'
onClick={() => console.log('Button 1 clicked')}
@ -35,6 +39,7 @@ storiesOf('Components| DropDown', module)
<DropDownItem
label='Button 4'
onClick={() => console.log('Button 4 clicked')}
disabled={true}
/>
<DropDownItem isSeparator />
<DropDownItem

4
web/ASC.Web.Storybook/stories/drop-down/drop-down-item/README.md
View File

@ -24,5 +24,7 @@ To add an avatar username and email when you turn on the isUserPreview parameter
| ------------------ | -------- | :------: | --------------------------- | -------------- | ----------------------------------------------------------------- |
| `isSeparator` | `bool` | - | - | `false` | Tells when the dropdown item should display like separator |
| `isUserPreview` | `bool` | - | - | `false` | Tells when the dropdown item should display like User preview |
| `isHeader` | `bool` | - | - | `false` | Tells when the dropdown item should display like header |
| `label` | `string` | - | - | `Dropdown item`| Dropdown item text |
| `onClick` | `func` | - | - | - | What the dropdown item will trigger when clicked |
| `onClick` | `func` | - | - | - | What the dropdown item will trigger when clicked |
| `disabled | `bool` | - | - | `false` | Tells when the dropdown item should display like disabled |

6
web/ASC.Web.Storybook/stories/drop-down/drop-down-item/drop-down-item.stories.js
View File

@ -19,13 +19,15 @@ storiesOf('Components | DropDown | DropDownItem', module)
<Col xs="1"></Col>
<Col xs="4">
<DropDown opened={true}>
<DropDownItem isHeader label='Category' onClick={() => console.log('Button 1 clicked')} />
<DropDownItem label='Button 1' onClick={() => console.log('Button 1 clicked')} />
<DropDownItem label='Button 2' onClick={() => console.log('Button 2 clicked')} />
<DropDownItem label='Button 3' onClick={() => console.log('Button 3 clicked')} />
<DropDownItem disabled label='Button 3' onClick={() => console.log('Button 3 clicked')} />
<DropDownItem label='Button 4' onClick={() => console.log('Button 4 clicked')} />
<DropDownItem isSeparator />
<DropDownItem isHeader label='Category' onClick={() => console.log('Button 1 clicked')} />
<DropDownItem label='Button 5' onClick={() => console.log('Button 5 clicked')} />
<DropDownItem label='Button 6' onClick={() => console.log('Button 6 clicked')} />
<DropDownItem disabled label='Button 6' onClick={() => console.log('Button 6 clicked')} />
</DropDown>
</Col>
<Col xs="1"></Col>