Merge branch 'master' of github.com:ONLYOFFICE/CommunityServer-AspNetCore
This commit is contained in:
commit
3a468a2d8c
110
web/ASC.Web.Components/src/components/combobox/index.js
Normal file
110
web/ASC.Web.Components/src/components/combobox/index.js
Normal file
@ -0,0 +1,110 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styled from 'styled-components';
|
||||
import InputBlock from '../input-block'
|
||||
import DropDownItem from '../drop-down-item'
|
||||
import DropDown from '../drop-down'
|
||||
|
||||
const StyledComboBox = styled.div`
|
||||
& > div > input {
|
||||
${props => !props.isDisabled && `cursor: pointer !important;`}
|
||||
|
||||
&::placeholder {
|
||||
font-family: Open Sans;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
${props => !props.isDisabled && `color: #333333;`}
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
class ComboBox extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.ref = React.createRef();
|
||||
|
||||
this.state = {
|
||||
isOpen: props.opened,
|
||||
boxLabel: props.items[0].label,
|
||||
items: props.items
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
handleClick = (e) => !this.ref.current.contains(e.target) && this.toggle(false);
|
||||
stopAction = (e) => e.preventDefault();
|
||||
toggle = (isOpen) => this.setState({ isOpen: isOpen });
|
||||
|
||||
componentDidMount() {
|
||||
if (this.ref.current) {
|
||||
document.addEventListener("click", this.handleClick);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("click", this.handleClick)
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.opened !== prevProps.opened) {
|
||||
this.toggle(this.props.opened);
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<StyledComboBox ref={this.ref} {...this.props}
|
||||
onClick={
|
||||
!this.props.isDisabled
|
||||
? () => {
|
||||
this.setState({ items: this.props.items});
|
||||
this.toggle(!this.state.isOpen);
|
||||
}
|
||||
: this.stopAction
|
||||
}
|
||||
>
|
||||
<InputBlock placeholder={this.state.boxLabel}
|
||||
iconName='ExpanderDownIcon'
|
||||
iconSize={8}
|
||||
isIconFill={true}
|
||||
iconColor='#A3A9AE'
|
||||
scale={true}
|
||||
isDisabled={this.props.isDisabled}
|
||||
isReadOnly={true}
|
||||
onIconClick={() => false}
|
||||
>
|
||||
<DropDown direction={this.props.direction || 'left'}
|
||||
manualWidth='100%'
|
||||
manualTop='102%'
|
||||
isOpen={this.state.isOpen}
|
||||
>
|
||||
{this.state.items.map(item =>
|
||||
<DropDownItem {...item}
|
||||
onClick={() => {
|
||||
item.onClick && item.onClick();
|
||||
this.toggle(!this.state.isOpen);
|
||||
this.setState({boxLabel: item.label});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</DropDown>
|
||||
</InputBlock>
|
||||
</StyledComboBox>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
ComboBox.propTypes = {
|
||||
isDisabled: PropTypes.bool
|
||||
}
|
||||
|
||||
ComboBox.defaultProps = {
|
||||
isDisabled: false
|
||||
}
|
||||
|
||||
export default ComboBox;
|
||||
@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
|
||||
import Avatar from '../../components/avatar'
|
||||
|
||||
const itemTruncate = css`
|
||||
max-width:300px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -97,7 +96,7 @@ const UserNameWrapper = styled.div`
|
||||
line-height: 28px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 60px;
|
||||
|
||||
max-width:300px;
|
||||
${itemTruncate}
|
||||
`;
|
||||
|
||||
@ -109,7 +108,7 @@ const UserEmailWrapper = styled.div`
|
||||
line-height: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 60px;
|
||||
|
||||
max-width:300px;
|
||||
${itemTruncate}
|
||||
`;
|
||||
|
||||
|
||||
@ -10,7 +10,8 @@ const StyledDropdown = styled.div`
|
||||
font-size: 13px;
|
||||
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
${props => props.manualWidth && `width: ${props.manualWidth};`}
|
||||
top: ${props => props.manualTop ? props.manualTop : '100%'};
|
||||
${props => (props.direction === 'right' && css`right: 0px;`)}
|
||||
${props => (props.direction === 'left' && css`left: 0px;`)}
|
||||
z-index: 1000;
|
||||
@ -48,7 +49,9 @@ const DropDown = props => {
|
||||
|
||||
DropDown.propTypes = {
|
||||
direction: PropTypes.oneOf(['left', 'right']),
|
||||
withArrow: PropTypes.bool
|
||||
withArrow: PropTypes.bool,
|
||||
manualWidth: PropTypes.string,
|
||||
manualTop: PropTypes.string
|
||||
};
|
||||
|
||||
DropDown.defaultProps = {
|
||||
|
||||
@ -29,4 +29,5 @@ export { default as SearchInput } from './components/search-input'
|
||||
export { default as Backdrop } from './components/backdrop'
|
||||
export { default as Scrollbar } from './components/scrollbar'
|
||||
export { default as Toast } from './components/toast'
|
||||
export { default as toastr } from './components/toast/toastr'
|
||||
export { default as toastr } from './components/toast/toastr'
|
||||
export { default as ComboBox } from './components/combobox'
|
||||
@ -15,40 +15,20 @@ storiesOf('Components|ContentRow', module)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('base', () => {
|
||||
|
||||
const checkbox = boolean('checkbox', true);
|
||||
const avatar = boolean('avatar', true);
|
||||
const contextButton = boolean('contextButton', true);
|
||||
|
||||
|
||||
return(
|
||||
<Section>
|
||||
<ContentRow status=''
|
||||
checkBox={checkbox
|
||||
? <BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<Checkbox isChecked={value}
|
||||
onChange={e => {
|
||||
console.log('Item with id: '+ e.target.value + ' Checked!')
|
||||
toggle(e.target.checked);
|
||||
}}
|
||||
isDisabled={false}
|
||||
value='1'
|
||||
id='1' />)}
|
||||
</BooleanValue>
|
||||
: '' }
|
||||
avatar={avatar
|
||||
? <Avatar size='small'
|
||||
role='user'
|
||||
source=''
|
||||
userName='' />
|
||||
: ''}
|
||||
contextButton={contextButton
|
||||
? <ContextMenuButton direction='right'
|
||||
getData={() =>
|
||||
[
|
||||
{key: 'key1', label: 'Edit', onClick: () => console.log('Context action: Edit')},
|
||||
{key: 'key2', label: 'Delete', onClick: () => console.log('Context action: Delete')}
|
||||
]} />
|
||||
: ''}
|
||||
<ContentRow key='1'
|
||||
avatarName={avatar ? 'Demo Avatar' : ''}
|
||||
avatarRole={avatar ? 'user' : ''}
|
||||
avatarSource={avatar ? '' : ''}
|
||||
contextOptions={contextButton ? [
|
||||
{key: 'key1', label: 'Edit', onClick: () => console.log('Context action: Edit')},
|
||||
{key: 'key2', label: 'Delete', onClick: () => console.log('Context action: Delete')}
|
||||
] : ''}
|
||||
>
|
||||
<Text.Body truncate={true} >{text('content', '')}</Text.Body>
|
||||
</ContentRow>
|
||||
|
||||
@ -211,8 +211,6 @@ const users = [
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
storiesOf('EXAMPLES|ContentRow', module)
|
||||
.add('people row', () => {
|
||||
|
||||
@ -278,25 +276,18 @@ storiesOf('EXAMPLES|ContentRow', module)
|
||||
<Section>
|
||||
{users.map(user => {
|
||||
return (
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<ContentRow key={user.id}
|
||||
status={user.status}
|
||||
checked={value}
|
||||
data={user}
|
||||
onSelect={(e) => {
|
||||
toggle(e.target.checked);
|
||||
console.log(user, !value);
|
||||
}}
|
||||
avatarRole={user.role}
|
||||
avatarSource={user.avatar}
|
||||
avatarName={user.userName}
|
||||
contextOptions={user.contextOptions}>
|
||||
{peopleContent(user.userName, user.departments[0], user.phones[0], user.emails[0], user.isHead, user.status)}
|
||||
</ContentRow>
|
||||
)}
|
||||
</BooleanValue>
|
||||
);
|
||||
<ContentRow key={user.id}
|
||||
status={user.status}
|
||||
checked={false}
|
||||
data={user}
|
||||
avatarRole={user.role}
|
||||
avatarSource={user.avatar}
|
||||
avatarName={user.userName}
|
||||
contextOptions={user.contextOptions}
|
||||
>
|
||||
{peopleContent(user.userName, user.departments[0], user.phones[0], user.emails[0], user.isHead, user.status)}
|
||||
</ContentRow>
|
||||
);
|
||||
})}
|
||||
</Section>
|
||||
);
|
||||
|
||||
@ -21,4 +21,6 @@ Is a dropdown with any number of action
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------ | -------- | :------: | --------------------------- | -------------- | ----------------------------------------------------------------- |
|
||||
| `opened` | `bool` | - | - | `false` | Tells when the dropdown should be opened |
|
||||
| `direction` | `oneOf` | - | `left`, `right` | `left` | Sets the opening direction relative to the parent |
|
||||
| `direction` | `oneOf` | - | `left`, `right` | `left` | Sets the opening direction relative to the parent |
|
||||
| `manualWidth` | `string` | - | - | - | Required if you need to specify the exact width of the component, for example 100%|
|
||||
| `manualTop` | `string` | - | - | - | Required if you need to specify the exact distance from the parent component|
|
||||
@ -54,7 +54,7 @@ storiesOf('Components| DropDown', module)
|
||||
</Col>
|
||||
<Col xs="2"/>
|
||||
<Col>
|
||||
<GroupButton text='Dropdown demo' isDropdown={true}>
|
||||
<GroupButton label='Dropdown demo' isDropdown={true}>
|
||||
<DropDownItem
|
||||
label='Button 1'
|
||||
/>
|
||||
|
||||
@ -13,11 +13,15 @@ Menu for group actions on a page.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
<GroupButtonsMenu needCollapse={false} />
|
||||
<GroupButtonsMenu checked={false} menuItems={menuItems} visible={true} />
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------ | -------- | :------: | --------------------------- | --------- | --------------------------------------------------------- |
|
||||
| `needCollapse` | `bool` | - | - | `false` | Displays a button that minimizes non-screen elements |
|
||||
| `checked` | `bool` | - | - | `false` | Sets initial value of checkbox |
|
||||
| `menuItems` | `object` | - | - | - | Button collection |
|
||||
| `visible` | `bool` | - | - | - | Sets menu visibility |
|
||||
| `moreLabel` | `string` | - | - | `More` | Label for more button |
|
||||
| `closeTitle` | `string` | - | - | `Close` | Title for close menu button |
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { withKnobs, text } from '@storybook/addon-knobs/react';
|
||||
import { BooleanValue } from 'react-values'
|
||||
import withReadme from 'storybook-readme/with-readme'
|
||||
import styled from '@emotion/styled';
|
||||
import Readme from './README.md'
|
||||
import { GroupButtonsMenu, Checkbox, DropDownItem } from 'asc-web-components'
|
||||
import { GroupButtonsMenu, DropDownItem } from 'asc-web-components'
|
||||
|
||||
const GroupButtonsMenuContainer = styled.div`
|
||||
height: 2000px;
|
||||
@ -47,18 +46,8 @@ storiesOf('Components|GroupButtonsMenu', module)
|
||||
|
||||
return (
|
||||
<GroupButtonsMenuContainer>
|
||||
<GroupButtonsMenu checkBox={
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<Checkbox isChecked={value}
|
||||
onChange={e => {
|
||||
console.log(e.target.value+' is checked');
|
||||
toggle(e.target.checked);
|
||||
}}
|
||||
isDisabled={false}
|
||||
value='Checkbox'
|
||||
id='check1' />)}
|
||||
</BooleanValue>}
|
||||
<GroupButtonsMenu
|
||||
checked={false}
|
||||
menuItems={menuItems}
|
||||
visible={true}
|
||||
moreLabel={text('moreLabel', 'More')}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { withKnobs, text} from '@storybook/addon-knobs/react';
|
||||
import { BooleanValue } from 'react-values'
|
||||
import styled from '@emotion/styled';
|
||||
import { GroupButtonsMenu, Checkbox, DropDownItem } from 'asc-web-components'
|
||||
import { GroupButtonsMenu, DropDownItem } from 'asc-web-components'
|
||||
|
||||
const GroupButtonsMenuContainer = styled.div`
|
||||
height: 2000px;
|
||||
@ -55,18 +54,8 @@ storiesOf('EXAMPLES|GroupButtonsMenu', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('people', () => (
|
||||
<GroupButtonsMenuContainer>
|
||||
<GroupButtonsMenu checkBox={
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<Checkbox isChecked={value}
|
||||
onChange={e => {
|
||||
console.log(e.target.value);
|
||||
toggle(e.target.checked);
|
||||
}}
|
||||
isDisabled={false}
|
||||
value='Checkbox'
|
||||
id='check1' />)}
|
||||
</BooleanValue>}
|
||||
<GroupButtonsMenu
|
||||
checked={false}
|
||||
menuItems={peopleItems}
|
||||
visible={true}
|
||||
moreLabel={text('moreLabel', 'More')}
|
||||
|
||||
20
web/ASC.Web.Storybook/stories/input/combobox/README.md
Normal file
20
web/ASC.Web.Storybook/stories/input/combobox/README.md
Normal file
@ -0,0 +1,20 @@
|
||||
# ComboBox
|
||||
|
||||
#### Description
|
||||
|
||||
Custom combo box input
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
import { ComboBox } from 'asc-web-components';
|
||||
|
||||
<ComboBox items={items} isDisabled={false}/>
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ---------------------- | ----------------- | :------: | ---------------------------- | ------- | -------------------------------------------- |
|
||||
| `items` | `array of object` | ✅ | - | - | Combo box items |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled |
|
||||
@ -0,0 +1,34 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { withKnobs, boolean} from '@storybook/addon-knobs/react';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
import { ComboBox } from 'asc-web-components'
|
||||
|
||||
let items = [
|
||||
{
|
||||
label: '25 per page',
|
||||
onClick: () => console.log('set paging 25 action')
|
||||
},
|
||||
{
|
||||
label: '50 per page',
|
||||
onClick: () => console.log('set paging 50 action')
|
||||
},
|
||||
{
|
||||
label: '100 per page',
|
||||
onClick: () => console.log('set paging 100 action')
|
||||
}
|
||||
];
|
||||
|
||||
storiesOf('Components|Input', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('combo box', () => (
|
||||
<Section>
|
||||
<ComboBox
|
||||
items={items}
|
||||
isDisabled={boolean('isDisabled', false)}
|
||||
/>
|
||||
</Section>
|
||||
));
|
||||
Loading…
Reference in New Issue
Block a user