Merge branch 'master' of github.com:ONLYOFFICE/CommunityServer-AspNetCore
This commit is contained in:
commit
c9311e53c8
@ -337,6 +337,7 @@ class SectionBodyContent extends React.Component {
|
|||||||
}}
|
}}
|
||||||
dropDownMaxHeight={200}
|
dropDownMaxHeight={200}
|
||||||
scaled={true}
|
scaled={true}
|
||||||
|
scaledOptions={true}
|
||||||
size="content"
|
size="content"
|
||||||
/>
|
/>
|
||||||
</FieldContainer>
|
</FieldContainer>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "asc-web-components",
|
"name": "asc-web-components",
|
||||||
"version": "1.0.87",
|
"version": "1.0.90",
|
||||||
"description": "Ascensio System SIA component library",
|
"description": "Ascensio System SIA component library",
|
||||||
"license": "AGPL-3.0",
|
"license": "AGPL-3.0",
|
||||||
"main": "dist/asc-web-components.js",
|
"main": "dist/asc-web-components.js",
|
||||||
|
@ -468,6 +468,7 @@ class AdvancedSelector extends React.Component {
|
|||||||
selectedOption={currentGroup}
|
selectedOption={currentGroup}
|
||||||
dropDownMaxHeight={200}
|
dropDownMaxHeight={200}
|
||||||
scaled={true}
|
scaled={true}
|
||||||
|
scaledOptions={true}
|
||||||
size="content"
|
size="content"
|
||||||
onSelect={this.onCurrentGroupChange}
|
onSelect={this.onCurrentGroupChange}
|
||||||
/>
|
/>
|
||||||
|
@ -619,6 +619,7 @@ class Calendar extends Component {
|
|||||||
<ComboBoxMonthStyle size={size}>
|
<ComboBoxMonthStyle size={size}>
|
||||||
<ComboBox
|
<ComboBox
|
||||||
scaled={true}
|
scaled={true}
|
||||||
|
scaledOptions={true}
|
||||||
dropDownMaxHeight={dropDownSizeMonth}
|
dropDownMaxHeight={dropDownSizeMonth}
|
||||||
onSelect={this.onSelectMonth}
|
onSelect={this.onSelectMonth}
|
||||||
selectedOption={selectedOptionMonth}
|
selectedOption={selectedOptionMonth}
|
||||||
@ -629,6 +630,7 @@ class Calendar extends Component {
|
|||||||
<ComboBoxDateStyle>
|
<ComboBoxDateStyle>
|
||||||
<ComboBox
|
<ComboBox
|
||||||
scaled={true}
|
scaled={true}
|
||||||
|
scaledOptions={true}
|
||||||
dropDownMaxHeight={dropDownSizeYear}
|
dropDownMaxHeight={dropDownSizeYear}
|
||||||
onSelect={this.onSelectYear}
|
onSelect={this.onSelectYear}
|
||||||
selectedOption={selectedOptionYear}
|
selectedOption={selectedOptionYear}
|
||||||
|
@ -83,6 +83,7 @@ const options = [
|
|||||||
dropDownMaxHeight={200}
|
dropDownMaxHeight={200}
|
||||||
noBorder={false}
|
noBorder={false}
|
||||||
scale={true}
|
scale={true}
|
||||||
|
scaledOptions={true}
|
||||||
size='content'
|
size='content'
|
||||||
onSelect={option => console.log('selected', option)}
|
onSelect={option => console.log('selected', option)}
|
||||||
/>
|
/>
|
||||||
@ -90,14 +91,60 @@ const options = [
|
|||||||
|
|
||||||
#### Properties
|
#### Properties
|
||||||
|
|
||||||
| Props | Type | Required | Values | Default | Description |
|
| Props | Type | Required | Values | Default | Description |
|
||||||
| ------------------- | --------- | :------: | ------------------------------------------ | ------- | --------------------------------------------------------- |
|
| ------------------- | --------- | :------: | ------------------------------------------ | ------- | ----------------------------------------------------------- |
|
||||||
| `options` | `array` | ✅ | - | - | Combo box options |
|
| `options` | `array` | ✅ | - | - | Combo box options |
|
||||||
| `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled |
|
| `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled |
|
||||||
| `noBorder` | `bool` | - | - | `false` | Indicates that component is displayed without borders |
|
| `noBorder` | `bool` | - | - | `false` | Indicates that component is displayed without borders |
|
||||||
| `selectedOption` | `object` | ✅ | - | - | Selected option |
|
| `selectedOption` | `object` | ✅ | - | - | Selected option |
|
||||||
| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option |
|
| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option |
|
||||||
| `dropDownMaxHeight` | `number` | - | - | - | Height of Dropdown |
|
| `dropDownMaxHeight` | `number` | - | - | - | Height of Dropdown |
|
||||||
| `scaled` | `bool` | - | - | `true` | Indicates that component is scaled by parent |
|
| `scaled` | `bool` | - | - | `true` | Indicates that component is scaled by parent |
|
||||||
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge`, `content` | `base` | Select component width, one of default |
|
| `scaledOptions` | `bool` | - | - | `false` | Indicates that component`s options is scaled by ComboButton |
|
||||||
| `advancedOptions` | `element` | - | - | - | If you need display options not basic options |
|
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge`, `content` | `base` | Select component width, one of default |
|
||||||
|
| `advancedOptions` | `element` | - | - | - | If you need display options not basic options |
|
||||||
|
|
||||||
|
## ComboButton
|
||||||
|
|
||||||
|
#### Description
|
||||||
|
|
||||||
|
> This description is for reference only, the component described below is not exported.
|
||||||
|
|
||||||
|
To create designs using combobox logic, there is a child component ComboButton.
|
||||||
|
This is an independent element that responds to changes in parameters and serves only to demonstrate set values.
|
||||||
|
|
||||||
|
```js
|
||||||
|
<ComboButton
|
||||||
|
noBorder={false}
|
||||||
|
isDisabled={false}
|
||||||
|
selectedOption={{
|
||||||
|
key: 0,
|
||||||
|
label: "Select"
|
||||||
|
}}
|
||||||
|
withOptions={false}
|
||||||
|
optionsLength={0}
|
||||||
|
withAdvancedOptions={true}
|
||||||
|
innerContainer={<>Demo container</>}
|
||||||
|
innerContainerClassName="optionalBlock"
|
||||||
|
isOpen={false}
|
||||||
|
size="content"
|
||||||
|
scaled={false}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Properties
|
||||||
|
|
||||||
|
| Props | Type | Required | Values | Default | Description |
|
||||||
|
| ------------------------- | -------- | :------: | -------------------------------- | ---------------- | -------------------------------------------------------- |
|
||||||
|
| `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled |
|
||||||
|
| `noBorder` | `bool` | - | - | `false` | Indicates that component is displayed without borders |
|
||||||
|
| `selectedOption` | `object` | - | - | - | Selected option |
|
||||||
|
| `withOptions` | `bool` | - | - | `true` | Lets you style as ComboBox with options |
|
||||||
|
| `optionsLength` | `number` | - | - | - | Lets you style as ComboBox with options |
|
||||||
|
| `withAdvancedOptions` | `bool` | - | - | `false` | Lets you style as a ComboBox with advanced options |
|
||||||
|
| `innerContainer` | `node` | - | - | - | Allows displaying third-party element inside ComboButton |
|
||||||
|
| `innerContainerClassName` | `string` | - | - | `innerContainer` | Required to access third-party container |
|
||||||
|
| `isOpen` | `bool` | - | - | `false` | Lets you style as ComboBox arrow |
|
||||||
|
| `scaled` | `bool` | - | - | `false` | Indicates that component is scaled by parent |
|
||||||
|
| `size` | `oneOf` | - | `base`, `...`, `huge`, `content` | `content` | Select component width, one of default |
|
||||||
|
| `onClick` | `func` | - | - | - | Will be triggered whenever an ComboButton is clicked |
|
||||||
|
@ -58,7 +58,7 @@ storiesOf('Components|Input', module)
|
|||||||
];
|
];
|
||||||
|
|
||||||
const needScrollDropDown = boolean('Need scroll dropdown', false);
|
const needScrollDropDown = boolean('Need scroll dropdown', false);
|
||||||
const dropDownMaxHeight = needScrollDropDown && number('dropDownMaxHeight', 200);
|
const dropDownMaxHeight = needScrollDropDown ? number('dropDownMaxHeight', 200) : null;
|
||||||
const optionsMultiSelect = options('children',
|
const optionsMultiSelect = options('children',
|
||||||
{
|
{
|
||||||
button: 'button',
|
button: 'button',
|
||||||
@ -125,6 +125,7 @@ storiesOf('Components|Input', module)
|
|||||||
noBorder={boolean('noBorder', false)}
|
noBorder={boolean('noBorder', false)}
|
||||||
dropDownMaxHeight={dropDownMaxHeight}
|
dropDownMaxHeight={dropDownMaxHeight}
|
||||||
scaled={boolean('scaled', false)}
|
scaled={boolean('scaled', false)}
|
||||||
|
scaledOptions={boolean('scaledOptions', false)}
|
||||||
size={select('size', sizeOptions, 'content')}
|
size={select('size', sizeOptions, 'content')}
|
||||||
>
|
>
|
||||||
{childrenItems}
|
{childrenItems}
|
||||||
@ -146,7 +147,6 @@ storiesOf('Components|Input', module)
|
|||||||
>
|
>
|
||||||
<Icons.NavLogoIcon size="medium" key='comboIcon' />
|
<Icons.NavLogoIcon size="medium" key='comboIcon' />
|
||||||
</ComboBox>
|
</ComboBox>
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
@ -3,12 +3,11 @@ import PropTypes from 'prop-types'
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import DropDownItem from '../drop-down-item'
|
import DropDownItem from '../drop-down-item'
|
||||||
import DropDown from '../drop-down'
|
import DropDown from '../drop-down'
|
||||||
import { Icons } from '../icons'
|
|
||||||
import { handleAnyClick } from '../../utils/event';
|
import { handleAnyClick } from '../../utils/event';
|
||||||
import isEqual from 'lodash/isEqual';
|
import isEqual from 'lodash/isEqual';
|
||||||
|
import ComboButton from './sub-components/combo-button'
|
||||||
|
|
||||||
const StyledComboBox = styled.div`
|
const StyledComboBox = styled.div`
|
||||||
color: ${props => props.isDisabled ? '#D0D5DA' : '#333333'};
|
|
||||||
width: ${props =>
|
width: ${props =>
|
||||||
(props.scaled && '100%') ||
|
(props.scaled && '100%') ||
|
||||||
(props.size === 'base' && '173px') ||
|
(props.size === 'base' && '173px') ||
|
||||||
@ -19,92 +18,6 @@ const StyledComboBox = styled.div`
|
|||||||
};
|
};
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
-webkit-touch-callout: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
background: #FFFFFF;
|
|
||||||
|
|
||||||
${props => !props.noBorder && `
|
|
||||||
border: 1px solid #D0D5DA;
|
|
||||||
border-radius: 3px;
|
|
||||||
`}
|
|
||||||
|
|
||||||
${props => props.isDisabled && !props.noBorder && `
|
|
||||||
border-color: #ECEEF1;
|
|
||||||
background: #F8F9F9;
|
|
||||||
`}
|
|
||||||
|
|
||||||
${props => !props.noBorder && `
|
|
||||||
height: 32px;
|
|
||||||
`}
|
|
||||||
|
|
||||||
:hover{
|
|
||||||
border-color: ${state => state.isOpen ? '#2DA7DB' : '#A3A9AE' };
|
|
||||||
cursor: ${props => (props.isDisabled || !props.options.length ) ? (props.advancedOptions) ? 'pointer' : 'default' : 'pointer'};
|
|
||||||
|
|
||||||
${props => props.isDisabled && `
|
|
||||||
border-color: #ECEEF1;
|
|
||||||
`}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledComboButton = styled.div`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
height: ${props => props.noBorder ? `18px` : `30px`};
|
|
||||||
margin-left: 8px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledIcon = styled.div`
|
|
||||||
width: 16px;
|
|
||||||
margin-right: 8px;
|
|
||||||
margin-top: -2px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledOptionalItem = styled.div`
|
|
||||||
margin-right: 8px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledLabel = styled.div`
|
|
||||||
font-family: Open Sans;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 13px;
|
|
||||||
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
margin-right: 8px;
|
|
||||||
|
|
||||||
${props => props.noBorder && `
|
|
||||||
line-height: 11px;
|
|
||||||
border-bottom: 1px dashed transparent;
|
|
||||||
|
|
||||||
:hover{
|
|
||||||
border-bottom: 1px dashed;
|
|
||||||
}
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledArrowIcon = styled.div`
|
|
||||||
display: flex;
|
|
||||||
align-self: start;
|
|
||||||
width: ${props => props.needDisplay ? '8px' : '0px'};
|
|
||||||
flex: 0 0 ${props => props.needDisplay ? '8px' : '0px'};
|
|
||||||
margin-top: ${props => props.noBorder ? `5px` : `12px`};
|
|
||||||
margin-right: ${props => props.needDisplay ? '8px' : '0px'};
|
|
||||||
margin-left: ${props => props.needDisplay ? 'auto' : '0px'};
|
|
||||||
|
|
||||||
${props => props.isOpen && `
|
|
||||||
transform: scale(1, -1);
|
|
||||||
`}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
class ComboBox extends React.Component {
|
class ComboBox extends React.Component {
|
||||||
@ -137,11 +50,11 @@ class ComboBox extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
optionClick = (option) => {
|
optionClick = (option) => {
|
||||||
this.toggle(!this.state.isOpen);
|
|
||||||
this.setState({
|
this.setState({
|
||||||
isOpen: !this.state.isOpen,
|
isOpen: !this.state.isOpen,
|
||||||
selectedOption: option
|
selectedOption: option
|
||||||
});
|
});
|
||||||
|
|
||||||
this.props.onSelect && this.props.onSelect(option);
|
this.props.onSelect && this.props.onSelect(option);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -149,7 +62,7 @@ class ComboBox extends React.Component {
|
|||||||
handleAnyClick(false, this.handleClick);
|
handleAnyClick(false, this.handleClick);
|
||||||
}
|
}
|
||||||
|
|
||||||
shouldComponentUpdate(nextProps,nextState) {
|
shouldComponentUpdate(nextProps, nextState) {
|
||||||
return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
|
return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -170,62 +83,58 @@ class ComboBox extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
//console.log("ComboBox render");
|
//console.log("ComboBox render");
|
||||||
const {
|
const {
|
||||||
dropDownMaxHeight,
|
dropDownMaxHeight,
|
||||||
isDisabled,
|
directionX,
|
||||||
directionX,
|
directionY,
|
||||||
directionY,
|
scaled,
|
||||||
scaled,
|
size,
|
||||||
children,
|
options,
|
||||||
options,
|
advancedOptions,
|
||||||
noBorder,
|
isDisabled,
|
||||||
advancedOptions
|
children,
|
||||||
} = this.props;
|
noBorder,
|
||||||
|
scaledOptions } = this.props;
|
||||||
const { isOpen, selectedOption } = this.state;
|
const { isOpen, selectedOption } = this.state;
|
||||||
|
|
||||||
const dropDownMaxHeightProp = dropDownMaxHeight ? { maxHeight: dropDownMaxHeight } : {};
|
const dropDownMaxHeightProp = dropDownMaxHeight
|
||||||
const dropDownManualWidthProp = scaled ? { manualWidth: '100%' } : {};
|
? { maxHeight: dropDownMaxHeight }
|
||||||
const boxIconColor = isDisabled ? '#D0D5DA' : '#333333';
|
: {};
|
||||||
const arrowIconColor = isDisabled ? '#D0D5DA' : '#A3A9AE';
|
const dropDownManualWidthProp = scaledOptions
|
||||||
|
? { manualWidth: '100%' }
|
||||||
|
: {};
|
||||||
|
|
||||||
|
const optionsLength = options.length
|
||||||
|
? options.length
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
const advancedOptionsLength = advancedOptions
|
||||||
|
&& advancedOptions.props.children.length
|
||||||
|
? advancedOptions.props.children.length
|
||||||
|
: 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledComboBox ref={this.ref}
|
<StyledComboBox
|
||||||
{...this.props}
|
ref={this.ref}
|
||||||
{...this.state}
|
isDisabled={isDisabled}
|
||||||
|
scaled={scaled}
|
||||||
|
size={size}
|
||||||
data={selectedOption}
|
data={selectedOption}
|
||||||
onClick={this.comboBoxClick}
|
onClick={this.comboBoxClick}
|
||||||
onSelect={this.stopAction}
|
{...this.props}
|
||||||
>
|
>
|
||||||
<StyledComboButton noBorder={noBorder}>
|
<ComboButton
|
||||||
{children &&
|
noBorder={noBorder}
|
||||||
<StyledOptionalItem className='optionalBlock'>
|
isDisabled={isDisabled}
|
||||||
{children}
|
selectedOption={selectedOption}
|
||||||
</StyledOptionalItem>
|
withOptions={optionsLength > 0}
|
||||||
}
|
optionsLength={optionsLength}
|
||||||
{selectedOption && selectedOption.icon &&
|
withAdvancedOptions={advancedOptionsLength > 0}
|
||||||
<StyledIcon>
|
innerContainer={children}
|
||||||
{React.createElement(Icons[selectedOption.icon],
|
innerContainerClassName='optionalBlock'
|
||||||
{
|
isOpen={isOpen}
|
||||||
size: 'scale',
|
size={size}
|
||||||
color: boxIconColor,
|
scaled={scaled}
|
||||||
isfill: true
|
/>
|
||||||
})
|
|
||||||
}
|
|
||||||
</StyledIcon>
|
|
||||||
}
|
|
||||||
<StyledLabel noBorder={noBorder}>
|
|
||||||
{selectedOption.label}
|
|
||||||
</StyledLabel>
|
|
||||||
<StyledArrowIcon needDisplay={options.length > 0 || advancedOptions !== undefined} noBorder={noBorder} isOpen={isOpen}>
|
|
||||||
{(options.length > 0 || advancedOptions !== undefined) &&
|
|
||||||
React.createElement(Icons['ExpanderDownIcon'],
|
|
||||||
{
|
|
||||||
size: 'scale',
|
|
||||||
color: arrowIconColor,
|
|
||||||
isfill: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</StyledArrowIcon>
|
|
||||||
</StyledComboButton>
|
|
||||||
<DropDown
|
<DropDown
|
||||||
directionX={directionX}
|
directionX={directionX}
|
||||||
directionY={directionY}
|
directionY={directionY}
|
||||||
@ -234,15 +143,17 @@ class ComboBox extends React.Component {
|
|||||||
{...dropDownMaxHeightProp}
|
{...dropDownMaxHeightProp}
|
||||||
{...dropDownManualWidthProp}
|
{...dropDownManualWidthProp}
|
||||||
>
|
>
|
||||||
{advancedOptions
|
{advancedOptions
|
||||||
? advancedOptions
|
? advancedOptions
|
||||||
: options.map((option) =>
|
: options.map((option) =>
|
||||||
<DropDownItem {...option}
|
<DropDownItem {...option}
|
||||||
key={option.key}
|
key={option.key}
|
||||||
disabled={option.disabled || (option.label === selectedOption.label)}
|
disabled={
|
||||||
onClick={this.optionClick.bind(this, option)}
|
option.disabled
|
||||||
/>
|
|| (option.label === selectedOption.label)}
|
||||||
)}
|
onClick={this.optionClick.bind(this, option)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</DropDown>
|
</DropDown>
|
||||||
</StyledComboBox>
|
</StyledComboBox>
|
||||||
);
|
);
|
||||||
@ -264,14 +175,16 @@ ComboBox.propTypes = {
|
|||||||
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'content']),
|
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'content']),
|
||||||
directionX: PropTypes.oneOf(['left', 'right']),
|
directionX: PropTypes.oneOf(['left', 'right']),
|
||||||
directionY: PropTypes.oneOf(['bottom', 'top']),
|
directionY: PropTypes.oneOf(['bottom', 'top']),
|
||||||
scaled: PropTypes.bool
|
scaled: PropTypes.bool,
|
||||||
|
scaledOptions: PropTypes.bool
|
||||||
}
|
}
|
||||||
|
|
||||||
ComboBox.defaultProps = {
|
ComboBox.defaultProps = {
|
||||||
noBorder: false,
|
noBorder: false,
|
||||||
isDisabled: false,
|
isDisabled: false,
|
||||||
size: 'base',
|
size: 'base',
|
||||||
scaled: true
|
scaled: true,
|
||||||
|
scaledOptions: false
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ComboBox;
|
export default ComboBox;
|
@ -0,0 +1,202 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { Icons } from '../../icons'
|
||||||
|
|
||||||
|
const StyledComboButton = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
height: ${props => props.noBorder ? `18px` : `30px`};
|
||||||
|
width: ${props =>
|
||||||
|
(props.scaled && '100%') ||
|
||||||
|
(props.size === 'base' && '173px') ||
|
||||||
|
(props.size === 'middle' && '300px') ||
|
||||||
|
(props.size === 'big' && '350px') ||
|
||||||
|
(props.size === 'huge' && '500px') ||
|
||||||
|
(props.size === 'content' && 'fit-content')
|
||||||
|
};
|
||||||
|
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
padding-left: 8px;
|
||||||
|
|
||||||
|
background: ${props => !props.noBorder ? '#FFFFFF' : 'none'};
|
||||||
|
|
||||||
|
color: ${props => props.isDisabled ? '#D0D5DA' : '#333333'};
|
||||||
|
|
||||||
|
${props => !props.noBorder && `
|
||||||
|
border: 1px solid #D0D5DA;
|
||||||
|
border-radius: 3px;
|
||||||
|
`}
|
||||||
|
|
||||||
|
${props => props.isDisabled && !props.noBorder && `
|
||||||
|
border-color: #ECEEF1;
|
||||||
|
background: #F8F9F9;
|
||||||
|
`}
|
||||||
|
|
||||||
|
${props => !props.noBorder && `
|
||||||
|
height: 32px;
|
||||||
|
`}
|
||||||
|
|
||||||
|
:hover{
|
||||||
|
border-color: ${props => props.isOpen ? '#2DA7DB' : '#A3A9AE'};
|
||||||
|
cursor: ${props => (props.isDisabled || !props.containOptions) ? (props.advancedOptions) ? 'pointer' : 'default' : 'pointer'};
|
||||||
|
|
||||||
|
${props => props.isDisabled && `
|
||||||
|
border-color: #ECEEF1;
|
||||||
|
`}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledOptionalItem = styled.div`
|
||||||
|
margin-right: 8px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledIcon = styled.div`
|
||||||
|
width: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-top: -2px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
const StyledLabel = styled.div`
|
||||||
|
font-family: Open Sans;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
${props => props.noBorder && `
|
||||||
|
line-height: 11px;
|
||||||
|
border-bottom: 1px dashed transparent;
|
||||||
|
|
||||||
|
:hover{
|
||||||
|
border-bottom: 1px dashed;
|
||||||
|
}
|
||||||
|
`};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledArrowIcon = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-self: start;
|
||||||
|
width: ${props => props.needDisplay ? '8px' : '0px'};
|
||||||
|
flex: 0 0 ${props => props.needDisplay ? '8px' : '0px'};
|
||||||
|
margin-top: ${props => props.noBorder ? `5px` : `12px`};
|
||||||
|
margin-right: ${props => props.needDisplay ? '8px' : '0px'};
|
||||||
|
margin-left: ${props => props.needDisplay ? 'auto' : '0px'};
|
||||||
|
|
||||||
|
${props => props.isOpen && `
|
||||||
|
transform: scale(1, -1);
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
class ComboButton extends React.Component {
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
noBorder,
|
||||||
|
onClick,
|
||||||
|
isDisabled,
|
||||||
|
innerContainer,
|
||||||
|
innerContainerClassName,
|
||||||
|
selectedOption,
|
||||||
|
optionsLength,
|
||||||
|
withOptions,
|
||||||
|
withAdvancedOptions,
|
||||||
|
isOpen,
|
||||||
|
scaled,
|
||||||
|
size } = this.props;
|
||||||
|
|
||||||
|
const boxIconColor = isDisabled ? '#D0D5DA' : '#333333';
|
||||||
|
const arrowIconColor = isDisabled ? '#D0D5DA' : '#A3A9AE';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledComboButton
|
||||||
|
isOpen={isOpen}
|
||||||
|
isDisabled={isDisabled}
|
||||||
|
noBorder={noBorder}
|
||||||
|
containOptions={optionsLength}
|
||||||
|
onClick={onClick}
|
||||||
|
scaled={scaled}
|
||||||
|
size={size}
|
||||||
|
>
|
||||||
|
{innerContainer &&
|
||||||
|
<StyledOptionalItem className={innerContainerClassName}>
|
||||||
|
{innerContainer}
|
||||||
|
</StyledOptionalItem>
|
||||||
|
}
|
||||||
|
{selectedOption && selectedOption.icon &&
|
||||||
|
<StyledIcon>
|
||||||
|
{React.createElement(Icons[selectedOption.icon],
|
||||||
|
{
|
||||||
|
size: 'scale',
|
||||||
|
color: boxIconColor,
|
||||||
|
isfill: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</StyledIcon>
|
||||||
|
}
|
||||||
|
<StyledLabel noBorder={noBorder}>
|
||||||
|
{selectedOption.label}
|
||||||
|
</StyledLabel>
|
||||||
|
<StyledArrowIcon
|
||||||
|
needDisplay={withOptions || withAdvancedOptions}
|
||||||
|
noBorder={noBorder}
|
||||||
|
isOpen={isOpen}>
|
||||||
|
{(withOptions || withAdvancedOptions) &&
|
||||||
|
React.createElement(Icons['ExpanderDownIcon'],
|
||||||
|
{
|
||||||
|
size: 'scale',
|
||||||
|
color: arrowIconColor,
|
||||||
|
isfill: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</StyledArrowIcon>
|
||||||
|
</StyledComboButton>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ComboButton.propTypes = {
|
||||||
|
noBorder: PropTypes.bool,
|
||||||
|
isDisabled: PropTypes.bool,
|
||||||
|
selectedOption: PropTypes.oneOfType([
|
||||||
|
PropTypes.arrayOf(PropTypes.object),
|
||||||
|
PropTypes.object
|
||||||
|
]),
|
||||||
|
withOptions: PropTypes.bool,
|
||||||
|
optionsLength: PropTypes.number,
|
||||||
|
withAdvancedOptions: PropTypes.bool,
|
||||||
|
innerContainer: PropTypes.oneOfType([
|
||||||
|
PropTypes.arrayOf(PropTypes.node),
|
||||||
|
PropTypes.node
|
||||||
|
]),
|
||||||
|
innerContainerClassName: PropTypes.string,
|
||||||
|
isOpen: PropTypes.bool,
|
||||||
|
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'content']),
|
||||||
|
scaled: PropTypes.bool,
|
||||||
|
onClick: PropTypes.func
|
||||||
|
}
|
||||||
|
|
||||||
|
ComboButton.defaultProps = {
|
||||||
|
noBorder: false,
|
||||||
|
isDisabled: false,
|
||||||
|
withOptions: true,
|
||||||
|
withAdvancedOptions: false,
|
||||||
|
innerContainerClassName: 'innerContainer',
|
||||||
|
isOpen: false,
|
||||||
|
size: 'content',
|
||||||
|
scaled: false
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ComboButton;
|
@ -57,7 +57,7 @@ class DatePicker extends Component {
|
|||||||
|
|
||||||
if (
|
if (
|
||||||
!isNaN(date) &&
|
!isNaN(date) &&
|
||||||
this.compareDates(date) &&
|
this.compareDate(date) &&
|
||||||
targetValue.indexOf("_") === -1
|
targetValue.indexOf("_") === -1
|
||||||
) {
|
) {
|
||||||
//console.log("Mask complete");
|
//console.log("Mask complete");
|
||||||
@ -94,7 +94,7 @@ class DatePicker extends Component {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
compareDates = date => {
|
compareDate = date => {
|
||||||
const { minDate, maxDate } = this.props;
|
const { minDate, maxDate } = this.props;
|
||||||
if (date < minDate || date > maxDate) {
|
if (date < minDate || date > maxDate) {
|
||||||
return false;
|
return false;
|
||||||
|
@ -11,6 +11,7 @@ import ModalDialog from "../modal-dialog";
|
|||||||
import FieldContainer from "../field-container";
|
import FieldContainer from "../field-container";
|
||||||
import TextInput from "../text-input";
|
import TextInput from "../text-input";
|
||||||
import ComboBox from "../combobox";
|
import ComboBox from "../combobox";
|
||||||
|
import ComboButton from '../combobox/sub-components/combo-button'
|
||||||
|
|
||||||
const groups = [
|
const groups = [
|
||||||
{
|
{
|
||||||
@ -263,6 +264,7 @@ storiesOf("EXAMPLES|AdvancedSelector", module)
|
|||||||
}}
|
}}
|
||||||
dropDownMaxHeight={200}
|
dropDownMaxHeight={200}
|
||||||
scaled={true}
|
scaled={true}
|
||||||
|
scaledOptions={true}
|
||||||
size="content"
|
size="content"
|
||||||
/>
|
/>
|
||||||
</FieldContainer>
|
</FieldContainer>
|
||||||
@ -292,4 +294,186 @@ storiesOf("EXAMPLES|AdvancedSelector", module)
|
|||||||
</BooleanValue>
|
</BooleanValue>
|
||||||
</Section>
|
</Section>
|
||||||
);
|
);
|
||||||
|
})
|
||||||
|
.add("people user selector as advanced ComboBox", () => {
|
||||||
|
const optionsCount = number("Users count", 1000);
|
||||||
|
const options = Array.from({ length: optionsCount }, (v, index) => {
|
||||||
|
const additional_group = groups[getRandomInt(1, 6)];
|
||||||
|
groups[0].total++;
|
||||||
|
additional_group.total++;
|
||||||
|
return {
|
||||||
|
key: `user${index}`,
|
||||||
|
groups: ["group-all", additional_group.key],
|
||||||
|
label: `User${index + 1} (All groups, ${additional_group.label})`
|
||||||
|
};
|
||||||
|
});
|
||||||
|
let selectedOptionsHead = [];
|
||||||
|
const getSelectedOption = (count, maxCount) => {
|
||||||
|
return {
|
||||||
|
key: 0,
|
||||||
|
//icon: 'icon_name', //if you need insert ComboBox styled image
|
||||||
|
label: `Selected (${count}/${maxCount})`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Section>
|
||||||
|
<BooleanValue
|
||||||
|
defaultValue={false}
|
||||||
|
onChange={() => action("modalVisible changed")}
|
||||||
|
>
|
||||||
|
{({ value: modalVisible, toggle: toggleModalVisible }) => (
|
||||||
|
<BooleanValue
|
||||||
|
defaultValue={true}
|
||||||
|
onChange={() => action("isOpen changed")}
|
||||||
|
>
|
||||||
|
{({ value: isOpen, toggle }) => (
|
||||||
|
<div style={{ position: "relative" }}>
|
||||||
|
<ComboButton
|
||||||
|
label="Toggle dropdown"
|
||||||
|
options={options}
|
||||||
|
isOpen={isOpen}
|
||||||
|
selectedOption={getSelectedOption(selectedOptionsHead.length, options.length)}
|
||||||
|
//innerContainer={react.node} // if you need insert custom node element inside ComboBox
|
||||||
|
onClick={toggle}
|
||||||
|
/>
|
||||||
|
<ArrayValue
|
||||||
|
defaultValue={options}
|
||||||
|
onChange={() => action("options onChange")}
|
||||||
|
>
|
||||||
|
{({ value, set }) => (
|
||||||
|
<>
|
||||||
|
<AdvancedSelector
|
||||||
|
isDropDown={true}
|
||||||
|
isOpen={isOpen}
|
||||||
|
size="full"
|
||||||
|
placeholder={text("placeholder", "Search")}
|
||||||
|
onSearchChanged={value => {
|
||||||
|
action("onSearchChanged")(value);
|
||||||
|
set(
|
||||||
|
options.filter(option => {
|
||||||
|
return option.label.indexOf(value) > -1;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
options={value}
|
||||||
|
groups={groups}
|
||||||
|
isMultiSelect={boolean("isMultiSelect", true)}
|
||||||
|
buttonLabel={text("buttonLabel", "Add departments")}
|
||||||
|
selectAllLabel={text("selectAllLabel", "Select all")}
|
||||||
|
onSelect={selectedOptions => {
|
||||||
|
action("onSelect")(selectedOptions);
|
||||||
|
selectedOptionsHead = selectedOptions;
|
||||||
|
toggle();
|
||||||
|
}}
|
||||||
|
onCancel={toggle}
|
||||||
|
allowCreation={boolean("allowCreation", true)}
|
||||||
|
onAddNewClick={toggleModalVisible}
|
||||||
|
allowAnyClickClose={!modalVisible}
|
||||||
|
/>
|
||||||
|
<ModalDialog
|
||||||
|
zIndex={1001}
|
||||||
|
visible={modalVisible}
|
||||||
|
headerContent="New User"
|
||||||
|
bodyContent={
|
||||||
|
<div className="create_new_user_modal">
|
||||||
|
<FieldContainer
|
||||||
|
isVertical={true}
|
||||||
|
isRequired={true}
|
||||||
|
hasError={false}
|
||||||
|
labelText={"First name:"}
|
||||||
|
>
|
||||||
|
<TextInput
|
||||||
|
value={""}
|
||||||
|
hasError={false}
|
||||||
|
className="firstName-input"
|
||||||
|
scale={true}
|
||||||
|
autoComplete="off"
|
||||||
|
onChange={e => {
|
||||||
|
//set(e.target.value);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FieldContainer>
|
||||||
|
<FieldContainer
|
||||||
|
isVertical={true}
|
||||||
|
isRequired={true}
|
||||||
|
hasError={false}
|
||||||
|
labelText={"Last name:"}
|
||||||
|
>
|
||||||
|
<TextInput
|
||||||
|
value={""}
|
||||||
|
hasError={false}
|
||||||
|
className="lastName-input"
|
||||||
|
scale={true}
|
||||||
|
autoComplete="off"
|
||||||
|
onChange={e => {
|
||||||
|
//set(e.target.value);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FieldContainer>
|
||||||
|
<FieldContainer
|
||||||
|
isVertical={true}
|
||||||
|
isRequired={true}
|
||||||
|
hasError={false}
|
||||||
|
labelText={"E-mail:"}
|
||||||
|
>
|
||||||
|
<TextInput
|
||||||
|
value={""}
|
||||||
|
hasError={false}
|
||||||
|
className="email-input"
|
||||||
|
scale={true}
|
||||||
|
autoComplete="off"
|
||||||
|
onChange={e => {
|
||||||
|
//set(e.target.value);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FieldContainer>
|
||||||
|
<FieldContainer
|
||||||
|
isVertical={true}
|
||||||
|
isRequired={true}
|
||||||
|
hasError={false}
|
||||||
|
labelText={"Group:"}
|
||||||
|
>
|
||||||
|
<ComboBox
|
||||||
|
options={groups}
|
||||||
|
className="group-input"
|
||||||
|
onSelect={option =>
|
||||||
|
console.log("Selected option", option)
|
||||||
|
}
|
||||||
|
selectedOption={{
|
||||||
|
key: 0,
|
||||||
|
label: "Select"
|
||||||
|
}}
|
||||||
|
dropDownMaxHeight={200}
|
||||||
|
scaled={true}
|
||||||
|
size="content"
|
||||||
|
scaledOptions={true}
|
||||||
|
/>
|
||||||
|
</FieldContainer>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
footerContent={[
|
||||||
|
<Button
|
||||||
|
key="CreateBtn"
|
||||||
|
label="Create"
|
||||||
|
primary={true}
|
||||||
|
size="big"
|
||||||
|
onClick={e => {
|
||||||
|
console.log("CreateBtn click", e);
|
||||||
|
toggleModalVisible();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
]}
|
||||||
|
onClose={toggleModalVisible}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</ArrayValue>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</BooleanValue>
|
||||||
|
)}
|
||||||
|
</BooleanValue>
|
||||||
|
</Section>
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
@ -120,10 +120,9 @@ class SortComboBox extends React.Component {
|
|||||||
advancedOptions={advancedOptions}
|
advancedOptions={advancedOptions}
|
||||||
isDisabled={this.props.isDisabled}
|
isDisabled={this.props.isDisabled}
|
||||||
selectedOption={this.props.selectedOption}
|
selectedOption={this.props.selectedOption}
|
||||||
scaled={false}
|
scaled={true}
|
||||||
size="content"
|
size="content"
|
||||||
directionX="right"
|
directionX="right"
|
||||||
|
|
||||||
>
|
>
|
||||||
<StyledIconButton sortDirection={!!this.state.sortDirection}>
|
<StyledIconButton sortDirection={!!this.state.sortDirection}>
|
||||||
<IconButton
|
<IconButton
|
||||||
|
@ -81,7 +81,8 @@ const Paging = props => {
|
|||||||
{countItems &&
|
{countItems &&
|
||||||
<StyledOnPage>
|
<StyledOnPage>
|
||||||
<ComboBox
|
<ComboBox
|
||||||
directionY={openDirection}
|
directionY={openDirection}
|
||||||
|
directionX='right'
|
||||||
options={countItems}
|
options={countItems}
|
||||||
onSelect={onSelectCountAction}
|
onSelect={onSelectCountAction}
|
||||||
selectedOption={selectedCountItem}/>
|
selectedOption={selectedCountItem}/>
|
||||||
|
Loading…
Reference in New Issue
Block a user