From e4b209f504f673f617fb30bf504cf06734f569e0 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 18 Sep 2019 13:23:03 +0300 Subject: [PATCH 01/14] Web: Components: renamed date-picker the same function --- web/ASC.Web.Components/src/components/date-picker/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/ASC.Web.Components/src/components/date-picker/index.js b/web/ASC.Web.Components/src/components/date-picker/index.js index 99ec532376..11bb5327ef 100644 --- a/web/ASC.Web.Components/src/components/date-picker/index.js +++ b/web/ASC.Web.Components/src/components/date-picker/index.js @@ -57,7 +57,7 @@ class DatePicker extends Component { if ( !isNaN(date) && - this.compareDates(date) && + this.compareDate(date) && targetValue.indexOf("_") === -1 ) { //console.log("Mask complete"); @@ -94,7 +94,7 @@ class DatePicker extends Component { } }; - compareDates = date => { + compareDate = date => { const { minDate, maxDate } = this.props; if (date < minDate || date > maxDate) { return false; From 097f78d290a3647fa9f769d5d44d42a4aca26a62 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 18 Sep 2019 14:44:01 +0300 Subject: [PATCH 02/14] web: Components: Added sub-component ComboButton for ComboBox component --- .../combobox/sub-components/combo-button.js | 202 ++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 web/ASC.Web.Components/src/components/combobox/sub-components/combo-button.js diff --git a/web/ASC.Web.Components/src/components/combobox/sub-components/combo-button.js b/web/ASC.Web.Components/src/components/combobox/sub-components/combo-button.js new file mode 100644 index 0000000000..96395f96aa --- /dev/null +++ b/web/ASC.Web.Components/src/components/combobox/sub-components/combo-button.js @@ -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 ( + + {innerContainer && + + {innerContainer} + + } + {selectedOption && selectedOption.icon && + + {React.createElement(Icons[selectedOption.icon], + { + size: 'scale', + color: boxIconColor, + isfill: true + }) + } + + } + + {selectedOption.label} + + + {(withOptions || withAdvancedOptions) && + React.createElement(Icons['ExpanderDownIcon'], + { + size: 'scale', + color: arrowIconColor, + isfill: true + }) + } + + + ); + } +} + +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; \ No newline at end of file From c4209faddb62651c70afa6bc3871c29648f95c7a Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 18 Sep 2019 14:45:29 +0300 Subject: [PATCH 03/14] web: Components: Fixed ComboBox component, added usage ComboButton sub-component. Fixed README and story. --- .../src/components/combobox/README.md | 51 ++++- .../components/combobox/combobox.stories.js | 1 - .../src/components/combobox/index.js | 208 +++++------------- 3 files changed, 109 insertions(+), 151 deletions(-) diff --git a/web/ASC.Web.Components/src/components/combobox/README.md b/web/ASC.Web.Components/src/components/combobox/README.md index 605045abdf..7a9552f151 100644 --- a/web/ASC.Web.Components/src/components/combobox/README.md +++ b/web/ASC.Web.Components/src/components/combobox/README.md @@ -54,7 +54,7 @@ const advancedOptions = ( directionX="right" > -; + ``` #### Usage @@ -101,3 +101,52 @@ const options = [ | `scaled` | `bool` | - | - | `true` | Indicates that component is scaled by parent | | `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 +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 | diff --git a/web/ASC.Web.Components/src/components/combobox/combobox.stories.js b/web/ASC.Web.Components/src/components/combobox/combobox.stories.js index 03e1e6f94a..ff6ae731c7 100644 --- a/web/ASC.Web.Components/src/components/combobox/combobox.stories.js +++ b/web/ASC.Web.Components/src/components/combobox/combobox.stories.js @@ -146,7 +146,6 @@ storiesOf('Components|Input', module) > - diff --git a/web/ASC.Web.Components/src/components/combobox/index.js b/web/ASC.Web.Components/src/components/combobox/index.js index e8a54aef9e..b48d578cfd 100644 --- a/web/ASC.Web.Components/src/components/combobox/index.js +++ b/web/ASC.Web.Components/src/components/combobox/index.js @@ -3,12 +3,11 @@ import PropTypes from 'prop-types' import styled from 'styled-components'; import DropDownItem from '../drop-down-item' import DropDown from '../drop-down' -import { Icons } from '../icons' import { handleAnyClick } from '../../utils/event'; import isEqual from 'lodash/isEqual'; +import ComboButton from './sub-components/combo-button' const StyledComboBox = styled.div` - color: ${props => props.isDisabled ? '#D0D5DA' : '#333333'}; width: ${props => (props.scaled && '100%') || (props.size === 'base' && '173px') || @@ -19,92 +18,6 @@ const StyledComboBox = styled.div` }; 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 { @@ -137,11 +50,11 @@ class ComboBox extends React.Component { }; optionClick = (option) => { - this.toggle(!this.state.isOpen); this.setState({ isOpen: !this.state.isOpen, selectedOption: option }); + this.props.onSelect && this.props.onSelect(option); }; @@ -149,7 +62,7 @@ class ComboBox extends React.Component { handleAnyClick(false, this.handleClick); } - shouldComponentUpdate(nextProps,nextState) { + shouldComponentUpdate(nextProps, nextState) { return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState); } @@ -170,62 +83,57 @@ class ComboBox extends React.Component { render() { //console.log("ComboBox render"); const { - dropDownMaxHeight, - isDisabled, - directionX, - directionY, - scaled, - children, - options, - noBorder, - advancedOptions - } = this.props; + dropDownMaxHeight, + directionX, + directionY, + scaled, + size, + options, + advancedOptions, + isDisabled, + children, + noBorder } = this.props; const { isOpen, selectedOption } = this.state; - const dropDownMaxHeightProp = dropDownMaxHeight ? { maxHeight: dropDownMaxHeight } : {}; - const dropDownManualWidthProp = scaled ? { manualWidth: '100%' } : {}; - const boxIconColor = isDisabled ? '#D0D5DA' : '#333333'; - const arrowIconColor = isDisabled ? '#D0D5DA' : '#A3A9AE'; - + const dropDownMaxHeightProp = dropDownMaxHeight + ? { maxHeight: dropDownMaxHeight } + : {}; + const dropDownManualWidthProp = scaled + ? { manualWidth: '100%' } + : {}; + + const optionsLength = options.length + ? options.length + : 0; + + const advancedOptionsLength = advancedOptions + && advancedOptions.props.children.length + ? advancedOptions.props.children.length + : 0; + return ( - - - {children && - - {children} - - } - {selectedOption && selectedOption.icon && - - {React.createElement(Icons[selectedOption.icon], - { - size: 'scale', - color: boxIconColor, - isfill: true - }) - } - - } - - {selectedOption.label} - - 0 || advancedOptions !== undefined} noBorder={noBorder} isOpen={isOpen}> - {(options.length > 0 || advancedOptions !== undefined) && - React.createElement(Icons['ExpanderDownIcon'], - { - size: 'scale', - color: arrowIconColor, - isfill: true - }) - } - - + 0} + optionsLength={optionsLength} + withAdvancedOptions={advancedOptionsLength > 0} + innerContainer={children} + innerContainerClassName='optionalBlock' + isOpen={isOpen} + size={size} + scaled={scaled} + /> - {advancedOptions - ? advancedOptions - : options.map((option) => - - )} + {advancedOptions + ? advancedOptions + : options.map((option) => + + )} ); From edb0556ce0509e1d121067211e0aa461cc534662 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 18 Sep 2019 14:46:32 +0300 Subject: [PATCH 04/14] web: Components: Added "people user selector as advanced ComboBox" at AdvancedSelector example story --- .../examples/people.selectors.stories.js | 182 ++++++++++++++++++ 1 file changed, 182 insertions(+) diff --git a/web/ASC.Web.Components/src/components/examples/people.selectors.stories.js b/web/ASC.Web.Components/src/components/examples/people.selectors.stories.js index 1fd061508b..e6933213ee 100644 --- a/web/ASC.Web.Components/src/components/examples/people.selectors.stories.js +++ b/web/ASC.Web.Components/src/components/examples/people.selectors.stories.js @@ -11,6 +11,7 @@ import ModalDialog from "../modal-dialog"; import FieldContainer from "../field-container"; import TextInput from "../text-input"; import ComboBox from "../combobox"; +import ComboButton from '../combobox/sub-components/combo-button' const groups = [ { @@ -292,4 +293,185 @@ storiesOf("EXAMPLES|AdvancedSelector", module) ); + }) + .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 ( +
+ action("modalVisible changed")} + > + {({ value: modalVisible, toggle: toggleModalVisible }) => ( + action("isOpen changed")} + > + {({ value: isOpen, toggle }) => ( +
+ + action("options onChange")} + > + {({ value, set }) => ( + <> + { + 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} + /> + + + { + //set(e.target.value); + }} + /> + + + { + //set(e.target.value); + }} + /> + + + { + //set(e.target.value); + }} + /> + + + + console.log("Selected option", option) + } + selectedOption={{ + key: 0, + label: "Select" + }} + dropDownMaxHeight={200} + scaled={true} + size="content" + /> + +
+ } + footerContent={[ +
+ ); }); From 5d17cf59636b35984263d3ccea8400b5acb69a06 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 18 Sep 2019 14:46:48 +0300 Subject: [PATCH 05/14] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index 64c7bea187..4cba3dc188 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.87", + "version": "1.0.88", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.js", From 271b27f3309f06408f4660f203e71dc114800e18 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 18 Sep 2019 15:42:29 +0300 Subject: [PATCH 06/14] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index 4cba3dc188..fb42401681 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.88", + "version": "1.0.89", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.js", From 6bdd40f435efe34d9e7bc726022a7adec51c7a00 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 18 Sep 2019 16:24:14 +0300 Subject: [PATCH 07/14] web: Components: Added scaledOptions property at ComboBox component. --- .../src/components/combobox/README.md | 44 +++++++++---------- .../components/combobox/combobox.stories.js | 3 +- .../src/components/combobox/index.js | 11 +++-- 3 files changed, 30 insertions(+), 28 deletions(-) diff --git a/web/ASC.Web.Components/src/components/combobox/README.md b/web/ASC.Web.Components/src/components/combobox/README.md index 7a9552f151..806770594e 100644 --- a/web/ASC.Web.Components/src/components/combobox/README.md +++ b/web/ASC.Web.Components/src/components/combobox/README.md @@ -54,7 +54,7 @@ const advancedOptions = ( directionX="right" > - +; ``` #### Usage @@ -83,6 +83,7 @@ const options = [ dropDownMaxHeight={200} noBorder={false} scale={true} + scaledOptions={true} size='content' onSelect={option => console.log('selected', option)} /> @@ -90,17 +91,18 @@ const options = [ #### Properties -| Props | Type | Required | Values | Default | Description | -| ------------------- | --------- | :------: | ------------------------------------------ | ------- | --------------------------------------------------------- | -| `options` | `array` | ✅ | - | - | Combo box options | -| `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled | -| `noBorder` | `bool` | - | - | `false` | Indicates that component is displayed without borders | -| `selectedOption` | `object` | ✅ | - | - | Selected option | -| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option | -| `dropDownMaxHeight` | `number` | - | - | - | Height of Dropdown | -| `scaled` | `bool` | - | - | `true` | Indicates that component is scaled by parent | -| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge`, `content` | `base` | Select component width, one of default | -| `advancedOptions` | `element` | - | - | - | If you need display options not basic options | +| Props | Type | Required | Values | Default | Description | +| ------------------- | --------- | :------: | ------------------------------------------ | ------- | ----------------------------------------------------------- | +| `options` | `array` | ✅ | - | - | Combo box options | +| `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled | +| `noBorder` | `bool` | - | - | `false` | Indicates that component is displayed without borders | +| `selectedOption` | `object` | ✅ | - | - | Selected option | +| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option | +| `dropDownMaxHeight` | `number` | - | - | - | Height of Dropdown | +| `scaled` | `bool` | - | - | `true` | Indicates that component is scaled by parent | +| `scaledOptions` | `bool` | - | - | `false` | Indicates that component`s options is scaled by ComboButton | +| `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 @@ -115,21 +117,17 @@ This is an independent element that responds to changes in parameters and serves Demo container - } - innerContainerClassName='optionalBlock' + innerContainer={<>Demo container} + innerContainerClassName="optionalBlock" isOpen={false} - size='content' + size="content" scaled={false} /> ``` diff --git a/web/ASC.Web.Components/src/components/combobox/combobox.stories.js b/web/ASC.Web.Components/src/components/combobox/combobox.stories.js index ff6ae731c7..6acab1f209 100644 --- a/web/ASC.Web.Components/src/components/combobox/combobox.stories.js +++ b/web/ASC.Web.Components/src/components/combobox/combobox.stories.js @@ -58,7 +58,7 @@ storiesOf('Components|Input', module) ]; const needScrollDropDown = boolean('Need scroll dropdown', false); - const dropDownMaxHeight = needScrollDropDown && number('dropDownMaxHeight', 200); + const dropDownMaxHeight = needScrollDropDown ? number('dropDownMaxHeight', 200) : null; const optionsMultiSelect = options('children', { button: 'button', @@ -125,6 +125,7 @@ storiesOf('Components|Input', module) noBorder={boolean('noBorder', false)} dropDownMaxHeight={dropDownMaxHeight} scaled={boolean('scaled', false)} + scaledOptions={boolean('scaledOptions', false)} size={select('size', sizeOptions, 'content')} > {childrenItems} diff --git a/web/ASC.Web.Components/src/components/combobox/index.js b/web/ASC.Web.Components/src/components/combobox/index.js index b48d578cfd..dd2a445c2a 100644 --- a/web/ASC.Web.Components/src/components/combobox/index.js +++ b/web/ASC.Web.Components/src/components/combobox/index.js @@ -92,13 +92,14 @@ class ComboBox extends React.Component { advancedOptions, isDisabled, children, - noBorder } = this.props; + noBorder, + scaledOptions } = this.props; const { isOpen, selectedOption } = this.state; const dropDownMaxHeightProp = dropDownMaxHeight ? { maxHeight: dropDownMaxHeight } : {}; - const dropDownManualWidthProp = scaled + const dropDownManualWidthProp = scaledOptions ? { manualWidth: '100%' } : {}; @@ -174,14 +175,16 @@ ComboBox.propTypes = { size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'content']), directionX: PropTypes.oneOf(['left', 'right']), directionY: PropTypes.oneOf(['bottom', 'top']), - scaled: PropTypes.bool + scaled: PropTypes.bool, + scaledOptions: PropTypes.bool } ComboBox.defaultProps = { noBorder: false, isDisabled: false, size: 'base', - scaled: true + scaled: true, + scaledOptions: false } export default ComboBox; \ No newline at end of file From 592451f7c703a8198af9e21d92fc35861acc51fe Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 18 Sep 2019 16:25:22 +0300 Subject: [PATCH 08/14] web: Components: Fixed usage ComboBox component with new options at Paging component. --- web/ASC.Web.Components/src/components/paging/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/src/components/paging/index.js b/web/ASC.Web.Components/src/components/paging/index.js index 74a31536d6..1df59f6cb5 100644 --- a/web/ASC.Web.Components/src/components/paging/index.js +++ b/web/ASC.Web.Components/src/components/paging/index.js @@ -81,7 +81,8 @@ const Paging = props => { {countItems && From fbd0d232f0659523dcb22c3f80214c44f75a170e Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 18 Sep 2019 16:25:56 +0300 Subject: [PATCH 09/14] web: Components: Fixed usage ComboBox component with new options at FilterInput component. --- .../src/components/filter-input/sort-combobox.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web/ASC.Web.Components/src/components/filter-input/sort-combobox.js b/web/ASC.Web.Components/src/components/filter-input/sort-combobox.js index d48490fda5..1acd7cab17 100644 --- a/web/ASC.Web.Components/src/components/filter-input/sort-combobox.js +++ b/web/ASC.Web.Components/src/components/filter-input/sort-combobox.js @@ -120,10 +120,9 @@ class SortComboBox extends React.Component { advancedOptions={advancedOptions} isDisabled={this.props.isDisabled} selectedOption={this.props.selectedOption} - scaled={false} + scaled={true} size="content" directionX="right" - > Date: Wed, 18 Sep 2019 16:27:14 +0300 Subject: [PATCH 10/14] web: Components: Fixed usage ComboBox at AdvancedSelector example story --- .../src/components/examples/people.selectors.stories.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/web/ASC.Web.Components/src/components/examples/people.selectors.stories.js b/web/ASC.Web.Components/src/components/examples/people.selectors.stories.js index e6933213ee..adde432d0f 100644 --- a/web/ASC.Web.Components/src/components/examples/people.selectors.stories.js +++ b/web/ASC.Web.Components/src/components/examples/people.selectors.stories.js @@ -264,6 +264,7 @@ storiesOf("EXAMPLES|AdvancedSelector", module) }} dropDownMaxHeight={200} scaled={true} + scaledOptions={true} size="content" /> @@ -446,6 +447,7 @@ storiesOf("EXAMPLES|AdvancedSelector", module) dropDownMaxHeight={200} scaled={true} size="content" + scaledOptions={true} /> From fbbd712ea7e1800423669a402bcabd5a5da4d299 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 18 Sep 2019 16:27:49 +0300 Subject: [PATCH 11/14] web: Components: Fixed usage ComboBox component with new options at AdvancedSelector component. --- web/ASC.Web.Components/src/components/advanced-selector/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web/ASC.Web.Components/src/components/advanced-selector/index.js b/web/ASC.Web.Components/src/components/advanced-selector/index.js index 607aeb130f..be1c559fa1 100644 --- a/web/ASC.Web.Components/src/components/advanced-selector/index.js +++ b/web/ASC.Web.Components/src/components/advanced-selector/index.js @@ -468,6 +468,7 @@ class AdvancedSelector extends React.Component { selectedOption={currentGroup} dropDownMaxHeight={200} scaled={true} + scaledOptions={true} size="content" onSelect={this.onCurrentGroupChange} /> From c75a9b277a603cb74950570e7ded3a82d621380e Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 18 Sep 2019 16:28:09 +0300 Subject: [PATCH 12/14] web: Components: Fixed usage ComboBox component with new options at Calendar component. --- web/ASC.Web.Components/src/components/calendar/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/web/ASC.Web.Components/src/components/calendar/index.js b/web/ASC.Web.Components/src/components/calendar/index.js index b90539e587..7d349c311b 100644 --- a/web/ASC.Web.Components/src/components/calendar/index.js +++ b/web/ASC.Web.Components/src/components/calendar/index.js @@ -619,6 +619,7 @@ class Calendar extends Component { Date: Wed, 18 Sep 2019 16:29:01 +0300 Subject: [PATCH 13/14] web: People: Fixed ComboBox usage at GroupActions component --- .../src/components/pages/GroupAction/Section/Body/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/index.js b/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/index.js index a30ed319a6..1058c4d61a 100644 --- a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/index.js +++ b/products/ASC.People/Client/src/components/pages/GroupAction/Section/Body/index.js @@ -291,6 +291,7 @@ class SectionBodyContent extends React.Component { }} dropDownMaxHeight={200} scaled={true} + scaledOptions={true} size="content" /> From 2d28373abf4becceab18ea0eb70d26809935133f Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 18 Sep 2019 16:30:07 +0300 Subject: [PATCH 14/14] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index fb42401681..f78e8562b0 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.89", + "version": "1.0.90", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.js",