From e3e5c00dccb5d3088b23981b933bfa0456f6aa9e Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 20:47:22 +0300 Subject: [PATCH 01/16] web: components: Avatar optimization --- .../src/components/avatar/index.js | 50 +++++++++++-------- 1 file changed, 29 insertions(+), 21 deletions(-) diff --git a/web/ASC.Web.Components/src/components/avatar/index.js b/web/ASC.Web.Components/src/components/avatar/index.js index 4958bf2f0e..24fc9240e0 100644 --- a/web/ASC.Web.Components/src/components/avatar/index.js +++ b/web/ASC.Web.Components/src/components/avatar/index.js @@ -13,13 +13,13 @@ const StyledAvatar = styled.div` (props.size === 'big' && '82px') || (props.size === 'medium' && '48px') || (props.size === 'small' && '32px') - }; + }; height: ${props => (props.size === 'max' && '160px') || (props.size === 'big' && '82px') || (props.size === 'medium' && '48px') || (props.size === 'small' && '32px') - }; + }; font-family: 'Open Sans'; font-style: normal; @@ -32,25 +32,25 @@ const RoleWrapper = styled.div` (props.size === 'big' && '-2px') || (props.size === 'medium' && '0px') || (props.size === 'small' && '-2px') - }; + }; bottom: ${props => (props.size === 'max' && '0px') || (props.size === 'big' && '4px') || (props.size === 'medium' && '0px') || (props.size === 'small' && '3px') - }; + }; width: ${props => (props.size === 'max' && '24px') || (props.size === 'big' && '12px') || (props.size === 'medium' && '12px') || (props.size === 'small' && '12px') - }; + }; height: ${props => (props.size === 'max' && '24px') || (props.size === 'big' && '12px') || (props.size === 'medium' && '12px') || (props.size === 'small' && '12px') - }; + }; `; const ImageStyled = styled.img` @@ -59,7 +59,7 @@ const ImageStyled = styled.img` border-radius: 50%; `; -const AvatarWrapper= styled.div` +const AvatarWrapper = styled.div` border-radius: 50%; height: 100%; background-color: ${avatarBackground}; @@ -84,7 +84,7 @@ const NamedAvatar = styled.div` (props.size === 'big' && '34px') || (props.size === 'medium' && '20px') || (props.size === 'small' && '12px') - }; + }; color: ${whiteColor}; `; @@ -130,30 +130,38 @@ const EditLink = styled.a` -webkit-text-overflow: ellipsis; `; +const EmptyIcon = styled(Icons.CameraIcon)` + border-radius: '50%'; +`; + +const getInitials = userName => { + const initials = userName + ? userName + .split(/\s/) + .reduce((response, word) => response += word.slice(0, 1), '') + .substring(0, 2) + : ""; + return initials; +}; + const Avatar = React.memo(props => { //console.log("Avatar render"); - const {size, source, userName, role, editing, editLabel, editAction} = props; + const { size, source, userName, role, editing, editLabel, editAction } = props; - const setNamedAvatar = userName => { - let initials = userName.split(/\s/).reduce((response,word)=> response+=word.slice(0,1),'').substring(0,2) - - return ( - {initials} - ); - }; + const initials = getInitials(userName); return ( {source !== '' && } - {(source === '' && userName !== '') && setNamedAvatar(userName)} - {(source === '' && userName === '') && } + {(source === '' && userName !== '') && {initials}} + {(source === '' && userName === '') && } - {editing && (size === 'max') && + {editing && (size === 'max') && {editLabel} } - + {role === 'guest' && } {role === 'admin' && } {role === 'owner' && } @@ -164,7 +172,7 @@ const Avatar = React.memo(props => { Avatar.propTypes = { size: PropTypes.oneOf(['max', 'big', 'medium', 'small']), - role: PropTypes.oneOf(['owner', 'admin','guest', 'user']), + role: PropTypes.oneOf(['owner', 'admin', 'guest', 'user']), source: PropTypes.string, editLabel: PropTypes.string, userName: PropTypes.string, From fb8b4be62233347df3bc495a83a154f301746704 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 21:04:34 +0300 Subject: [PATCH 02/16] web: components: Badge optimization --- .../src/components/badge/index.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/web/ASC.Web.Components/src/components/badge/index.js b/web/ASC.Web.Components/src/components/badge/index.js index 76f22bc47a..bacdd9c81f 100644 --- a/web/ASC.Web.Components/src/components/badge/index.js +++ b/web/ASC.Web.Components/src/components/badge/index.js @@ -14,25 +14,21 @@ const StyledBadge = styled.div` cursor: pointer; overflow: hidden; text-overflow: ellipsis; - display: inline-block; + display: ${props => props.number > 0 ? 'inline-block' : 'none'}; user-select: none; `; const Badge = props => { //console.log("Badge render"); - - const onClick = (e) => { + + const onClick = e => { if (props.onClick) { e.stopPropagation(); props.onClick(e); } - } + }; - return ( - props.number > 0 - ? {props.number} - : "" - ); + return ({props.number}); }; Badge.propTypes = { From f0063afabeadf21bfcde27c96e984c27ff8a16ef Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 21:16:29 +0300 Subject: [PATCH 03/16] web: components: Added new property 'scale' to the Button component --- web/ASC.Web.Components/src/components/button/index.js | 4 ++++ web/ASC.Web.Storybook/stories/buttons/base/README.md | 3 ++- .../stories/buttons/base/base.button.stories.js | 1 + 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/src/components/button/index.js b/web/ASC.Web.Components/src/components/button/index.js index ad9061e1bd..cbda17d6cf 100644 --- a/web/ASC.Web.Components/src/components/button/index.js +++ b/web/ASC.Web.Components/src/components/button/index.js @@ -60,6 +60,8 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({ : (props.primary ? '#A6DCF2' : '#FFFFFF')) }; + ${props => props.scale && `width: 100%;`} + padding: ${props => (props.size === 'big' && (props.primary ? (props.icon @@ -195,6 +197,7 @@ Button.propTypes = { label: PropTypes.string, primary: PropTypes.bool, size: PropTypes.oneOf(['base', 'medium', 'big']), + scale: PropTypes.bool, icon: PropTypes.node, tabIndex: PropTypes.number, @@ -211,6 +214,7 @@ Button.defaultProps = { label: '', primary: false, size: 'base', + scale: false, icon: null, tabIndex: -1, diff --git a/web/ASC.Web.Storybook/stories/buttons/base/README.md b/web/ASC.Web.Storybook/stories/buttons/base/README.md index 29492dcb00..7109cba0c2 100644 --- a/web/ASC.Web.Storybook/stories/buttons/base/README.md +++ b/web/ASC.Web.Storybook/stories/buttons/base/README.md @@ -22,7 +22,8 @@ Button is used for a action on a page. | ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `label` | `string` | - | - | - | Button text | | `primary` | `bool` | - | - | - | Tells when the button should be primary | -| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button | +| `size` | `oneOf` | - | `base`, `middle`, `big` | `base` | Size of button | +| `scale` | `bool` | - | - | false | Scale width of button to 100% | | `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state | | `isLoading` | `bool` | - | - | - | Tells when the button should show loader icon | | `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked | diff --git a/web/ASC.Web.Storybook/stories/buttons/base/base.button.stories.js b/web/ASC.Web.Storybook/stories/buttons/base/base.button.stories.js index 916e498f7f..54f4671844 100644 --- a/web/ASC.Web.Storybook/stories/buttons/base/base.button.stories.js +++ b/web/ASC.Web.Storybook/stories/buttons/base/base.button.stories.js @@ -24,6 +24,7 @@ storiesOf('Components|Buttons', module) label={text('label', 'Base button')} primary={boolean('primary', true)} size={select('size', sizeOptions, 'big')} + scale={boolean('scale', false)} isLoading={boolean('isLoading', false)} isHovered={boolean('isHovered', false)} From 3c5630cf84bf6316d2f14a06d151c090cd6321c2 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 21:19:34 +0300 Subject: [PATCH 04/16] web: components: Removed isRequired from onClick Button for Redux Form --- web/ASC.Web.Components/src/components/button/index.js | 2 +- web/ASC.Web.Storybook/stories/buttons/base/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/ASC.Web.Components/src/components/button/index.js b/web/ASC.Web.Components/src/components/button/index.js index cbda17d6cf..375c538d43 100644 --- a/web/ASC.Web.Components/src/components/button/index.js +++ b/web/ASC.Web.Components/src/components/button/index.js @@ -207,7 +207,7 @@ Button.propTypes = { isDisabled: PropTypes.bool, isLoading: PropTypes.bool, - onClick: PropTypes.func.isRequired, + onClick: PropTypes.func, }; Button.defaultProps = { diff --git a/web/ASC.Web.Storybook/stories/buttons/base/README.md b/web/ASC.Web.Storybook/stories/buttons/base/README.md index 7109cba0c2..958a4c9b93 100644 --- a/web/ASC.Web.Storybook/stories/buttons/base/README.md +++ b/web/ASC.Web.Storybook/stories/buttons/base/README.md @@ -26,5 +26,5 @@ Button is used for a action on a page. | `scale` | `bool` | - | - | false | Scale width of button to 100% | | `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state | | `isLoading` | `bool` | - | - | - | Tells when the button should show loader icon | -| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked | +| `onClick` | `func` | - | - | - | What the button will trigger when clicked | From d51de34ab83d91508e7393867ecccb084057fe30 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 21:42:23 +0300 Subject: [PATCH 05/16] web: components: ComboBox optimization --- .../src/components/combobox/index.js | 15 ++++++++------ .../stories/input/combobox/README.md | 20 +++++++++++++++++-- .../input/combobox/combobox.stories.js | 4 +++- 3 files changed, 30 insertions(+), 9 deletions(-) diff --git a/web/ASC.Web.Components/src/components/combobox/index.js b/web/ASC.Web.Components/src/components/combobox/index.js index f68cc049db..1a09313a11 100644 --- a/web/ASC.Web.Components/src/components/combobox/index.js +++ b/web/ASC.Web.Components/src/components/combobox/index.js @@ -50,13 +50,16 @@ class ComboBox extends React.PureComponent { stopAction = (e) => e.preventDefault(); toggle = (isOpen) => this.setState({ isOpen: isOpen }); comboBoxClick = () => { - this.setState({ option: this.props.option }); - this.toggle(!this.state.isOpen); + this.setState({ + option: this.props.option, + isOpen: !this.state.isOpen + }); }; optionClick = (option) => { - option.onClick && option.onClick(); - this.toggle(!this.state.isOpen); - this.setState({ boxLabel: option.label }); + this.setState({ + boxLabel: option.label, + isOpen: !this.state.isOpen + }); this.props.onSelect && this.props.onSelect(option); }; @@ -100,7 +103,7 @@ class ComboBox extends React.PureComponent { {this.state.options.map((option) => this.optionClick(option)} + onClick={this.optionClick.bind(this, option)} /> )} diff --git a/web/ASC.Web.Storybook/stories/input/combobox/README.md b/web/ASC.Web.Storybook/stories/input/combobox/README.md index c5b1d9e625..163b3f54da 100644 --- a/web/ASC.Web.Storybook/stories/input/combobox/README.md +++ b/web/ASC.Web.Storybook/stories/input/combobox/README.md @@ -9,7 +9,22 @@ Custom combo box input ```js import { ComboBox } from 'asc-web-components'; - +const options = [ + { + key: '0', + label: '25 per page' + }, + { + key: '1', + label: '50 per page', + }, + { + key: '2', + label: '100 per page' + } +]; + + console.log('selected', option)}/> ``` #### Properties @@ -19,4 +34,5 @@ import { ComboBox } from 'asc-web-components'; | `options` | `array` | ✅ | - | - | Combo box options | | `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled | | `withBorder` | `bool` | - | - | `true` | Indicates that component contain border | -| `selectedIndex` | `number` | - | - | `0` | Index of option selected by default | \ No newline at end of file +| `selectedIndex` | `number` | - | - | `0` | Index of option selected by default | +| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option | \ No newline at end of file diff --git a/web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js b/web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js index 6f445aad9d..c6a58e95a3 100644 --- a/web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js +++ b/web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js @@ -5,8 +5,9 @@ import withReadme from 'storybook-readme/with-readme'; import Readme from './README.md'; import Section from '../../../.storybook/decorators/section'; import { ComboBox } from 'asc-web-components' +import { action } from '@storybook/addon-actions'; -let options = [ +const options = [ { key: '0', label: '25 per page' @@ -28,6 +29,7 @@ storiesOf('Components|Input', module)
action("Selected option")(option)} isDisabled={boolean('isDisabled', false)} withBorder={boolean('withBorder', true)} /> From b25f06460eb6d79359ae01323661a8dca7dc747e Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 21:47:20 +0300 Subject: [PATCH 06/16] web: components: ContentRow optimization --- .../src/components/content-row/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/web/ASC.Web.Components/src/components/content-row/index.js b/web/ASC.Web.Components/src/components/content-row/index.js index d4b3183140..06719d2860 100644 --- a/web/ASC.Web.Components/src/components/content-row/index.js +++ b/web/ASC.Web.Components/src/components/content-row/index.js @@ -80,6 +80,7 @@ class ContentRow extends React.PureComponent { this.handleContextMenu = this.handleContextMenu.bind(this); this.changeCheckbox = this.changeCheckbox.bind(this); + this.getOptions = this.getOptions.bind(this); }; componentDidMount() { @@ -110,9 +111,12 @@ class ContentRow extends React.PureComponent { } }; + getOptions = () => this.props.contextOptions; + render() { //console.log("ContentRow render"); - const { avatarRole, avatarSource, avatarName, contextOptions, children } = this.props; + const { avatarRole, avatarSource, avatarName, children } = this.props; + return ( @@ -127,7 +131,7 @@ class ContentRow extends React.PureComponent { {children} {this.props.hasOwnProperty("contextOptions") && - contextOptions} /> + } From d3a3e065abe4cc12165252e7b5519e38d1a961c5 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 21:57:16 +0300 Subject: [PATCH 07/16] web: components: ContextMenuButton optimization --- .../components/context-menu-button/index.js | 37 ++++++++++++------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/web/ASC.Web.Components/src/components/context-menu-button/index.js b/web/ASC.Web.Components/src/components/context-menu-button/index.js index 4480c515ee..22a81c73de 100644 --- a/web/ASC.Web.Components/src/components/context-menu-button/index.js +++ b/web/ASC.Web.Components/src/components/context-menu-button/index.js @@ -25,6 +25,8 @@ class ContextMenuButton extends React.PureComponent { this.handleClick = this.handleClick.bind(this); this.stopAction = this.stopAction.bind(this); this.toggle = this.toggle.bind(this); + this.onIconButtonClick = this.onIconButtonClick.bind(this); + this.onDropDownItemClick = this.onDropDownItemClick.bind(this); } handleClick = (e) => !this.ref.current.contains(e.target) && this.toggle(false); @@ -49,6 +51,23 @@ class ContextMenuButton extends React.PureComponent { } } + onIconButtonClick = () => { + if(!this.props.isDisabled) { + this.setState({ + data: this.props.getData(), + isOpen: !this.state.isOpen + }); + } + else { + this.stopAction + } + } + + onDropDownItemClick = (item) => { + item.onClick && item.onClick(); + this.toggle(!this.state.isOpen); + } + render() { //console.log("ContextMenuButton render"); return ( @@ -63,14 +82,7 @@ class ContextMenuButton extends React.PureComponent { iconClickName={this.props.iconClickName} isFill={false} isDisabled={this.props.isDisabled} - onClick={ - !this.props.isDisabled - ? () => { - this.setState({ data: this.props.getData()}); - this.toggle(!this.state.isOpen); - } - : this.stopAction - } + onClick={this.onIconButtonClick} onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave} onMouseOver={this.props.onMouseOver} @@ -78,13 +90,10 @@ class ContextMenuButton extends React.PureComponent { /> { - this.state.data.map(item => - + { - item.onClick && item.onClick(); - this.toggle(!this.state.isOpen); - }} + onClick={this.onDropDownItemClick.bind(this, item)} /> ) } From e1084b6e233eeac78298b08585a02bc9aa2bfa0e Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 22:04:50 +0300 Subject: [PATCH 08/16] web: components: DateInput optimization --- web/ASC.Web.Components/src/components/date-input/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web/ASC.Web.Components/src/components/date-input/index.js b/web/ASC.Web.Components/src/components/date-input/index.js index 7cbf61532b..5ae9a79ec2 100644 --- a/web/ASC.Web.Components/src/components/date-input/index.js +++ b/web/ASC.Web.Components/src/components/date-input/index.js @@ -14,6 +14,7 @@ const DateInput = props => { const iconClick = function(){ this.onClick(); }; + return ( { isReadOnly={props.readOnly} hasError={props.hasError} hasWarning={props.hasWarning} - iconName={"CalendarEmptyIcon"} + iconName="CalendarEmptyIcon" isIconFill={true} - iconColor={"#A3A9AE"} + iconColor="#A3A9AE" onIconClick={iconClick} scale={true} /> From 5cb52073e0a2120a224c369e075c4ea3222dc183 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 22:20:03 +0300 Subject: [PATCH 09/16] web: components: FilterInput optimization --- .../src/components/filter-input/index.js | 57 ++++++++++--------- 1 file changed, 30 insertions(+), 27 deletions(-) diff --git a/web/ASC.Web.Components/src/components/filter-input/index.js b/web/ASC.Web.Components/src/components/filter-input/index.js index c74e358977..0c9a6bcaa2 100644 --- a/web/ASC.Web.Components/src/components/filter-input/index.js +++ b/web/ASC.Web.Components/src/components/filter-input/index.js @@ -27,7 +27,7 @@ const StyledComboBox = styled(ComboBox)` class FilterInput extends React.Component { constructor(props) { super(props); - + this.state = { sortDirection: false, sortId: this.props.getSortData().length > 0 ? this.props.getSortData()[0].id : "", @@ -42,32 +42,33 @@ class FilterInput extends React.Component { this.onSortDirectionClick = this.onSortDirectionClick.bind(this); this.onSearch = this.onSearch.bind(this); this.setFilterTimer = this.setFilterTimer.bind(this); - + this.onSearchChanged = this.onSearchChanged.bind(this); + } - getSortData(){ + getSortData() { let _this = this; let d = this.props.getSortData(); - d.map(function(item){ + d.map(function (item) { item.key = item.id; - item.onClick = (e) => _this.onClickSortItem(e, item); + item.onClick = _this.onClickSortItem.bind(_this, item); return item; }); return d; } - onClickSortItem(e, item){ - this.setState({ sortId: item.id}); + onClickSortItem(item) { + this.setState({ sortId: item.id }); this.onFilter(this.state.filterValue, item.id, this.state.sortDirection ? "asc" : "desc"); } - onSortDirectionClick(e){ + onSortDirectionClick(e) { this.onFilter(this.state.filterValue, this.state.sortId, !this.state.sortDirection ? "asc" : "desc") - this.setState({ sortDirection: !this.state.sortDirection}); + this.setState({ sortDirection: !this.state.sortDirection }); } - onSearch(result){ - this.setState({ filterValue: result.filterValue}); + onSearch(result) { + this.setState({ filterValue: result.filterValue }); this.onFilter(result.filterValue, this.state.sortId, this.state.sortDirection ? "asc" : "desc") } - onFilter(filterValue, sortId, sortDirection){ + onFilter(filterValue, sortId, sortDirection) { let result = { inputValue: this.state.searchText, filterValue: filterValue, @@ -87,12 +88,19 @@ class FilterInput extends React.Component { }, this.props.refreshTimeout); } - render(){ + onSearchChanged(e) { + this.setState({ searchText: e.target.value }) + + if (this.props.autoRefresh) + this.setFilterTimer(); + } + + render() { //console.log("FilterInput render"); - return( + return ( - {this.onSearch(result)}} - onChangeFilter={(result) => {this.onSearch(result)}} + onSearchClick={this.onSearch} + onChangeFilter={this.onSearch} value={this.state.searchText} - onChange={(e) => { - this.setState({searchText: e.target.value}) - - if(this.props.autoRefresh) - this.setFilterTimer(); - }} + onChange={this.onSearchChanged} /> - - @@ -128,10 +131,10 @@ class FilterInput extends React.Component { onClick={this.onSortDirectionClick} /> - + - + ); } }; From 4d217245040811104c47db2845c18848b4e2a716 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 22:24:08 +0300 Subject: [PATCH 10/16] web: components: GroupButton optimization --- web/ASC.Web.Components/src/components/group-button/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/src/components/group-button/index.js b/web/ASC.Web.Components/src/components/group-button/index.js index 5d3091ef61..805d6ec2bb 100644 --- a/web/ASC.Web.Components/src/components/group-button/index.js +++ b/web/ASC.Web.Components/src/components/group-button/index.js @@ -175,7 +175,7 @@ class GroupButton extends React.PureComponent { {React.Children.map(children, (child) => - this.dropDownItemClick(child)} />)} + )} : {label} From 9ad471995a451fb1cb5143f88d2a83b1d60babae Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 22:28:55 +0300 Subject: [PATCH 11/16] web: components: GroupButtonsMenu optimization --- .../src/components/group-buttons-menu/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js index 353aac2f9f..5895d559c7 100644 --- a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js +++ b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js @@ -135,7 +135,7 @@ class GroupButtonsMenu extends React.PureComponent { isSelect={item.isSelect} onSelect={item.onSelect} fontWeight={item.fontWeight} - onClick={() => this.groupButtonClick(item)} + onClick={this.groupButtonClick.bind(this, item)} {...this.props} > {item.children} @@ -148,7 +148,7 @@ class GroupButtonsMenu extends React.PureComponent { this.groupButtonClick(item)} + onClick={this.groupButtonClick.bind(this, item)} /> )} From d6cd59bddf4ad78180a7159fedbe2ce3656f6f51 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 22:29:37 +0300 Subject: [PATCH 12/16] web: components: Fix warning in Button --- web/ASC.Web.Components/src/components/button/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/src/components/button/index.js b/web/ASC.Web.Components/src/components/button/index.js index 375c538d43..7736d32a14 100644 --- a/web/ASC.Web.Components/src/components/button/index.js +++ b/web/ASC.Web.Components/src/components/button/index.js @@ -28,7 +28,7 @@ const hoverCss = css` `} `; -const ButtonWrapper = ({primary, isHovered, isClicked, isDisabled, isLoading, ...props}) => ; +const ButtonWrapper = ({primary, scale, size, isHovered, isClicked, isDisabled, isLoading, ...props}) => ; const StyledButton = styled(ButtonWrapper).attrs((props) => ({ disabled: props.isDisabled || props.isLoading ? 'disabled' : '', From 899244c966e769eeef56122c4d855d76587d4abb Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 22:36:26 +0300 Subject: [PATCH 13/16] web: components: InputBlock optimization --- .../src/components/input-block/index.js | 92 ++++++++++--------- 1 file changed, 51 insertions(+), 41 deletions(-) diff --git a/web/ASC.Web.Components/src/components/input-block/index.js b/web/ASC.Web.Components/src/components/input-block/index.js index 46f86ca36e..d2ca14905e 100644 --- a/web/ASC.Web.Components/src/components/input-block/index.js +++ b/web/ASC.Web.Components/src/components/input-block/index.js @@ -9,7 +9,7 @@ import commonInputStyle from '../text-input/common-input-styles'; const iconNames = Object.keys(Icons); -const Input = ({ isAutoFocussed, isDisabled, isReadOnly, hasError, hasWarning, iconName, scale, ...props }) => ; +const Input = ({ isAutoFocussed, isDisabled, isReadOnly, hasError, hasWarning, iconName, scale, ...props }) => ; const StyledTextInput = styled(Input)` border: none; `; @@ -49,67 +49,78 @@ const StyledInputGroup = styled(CustomInputGroup)` const InputBlock = React.forwardRef((props, ref) => { //console.log("InputBlock render"); - const {onChange, value, children, size } = props; + const { onChange, value, children, size } = props; + let iconButtonSize = 0; - if(typeof props.iconSize == "number" && props.iconSize > 0){ + + if (typeof props.iconSize == "number" && props.iconSize > 0) { iconButtonSize = props.iconSize; - }else{ + } else { switch (size) { case 'base': - iconButtonSize = 15; + iconButtonSize = 15; break; case 'middle': - iconButtonSize = 18; + iconButtonSize = 18; break; case 'big': - iconButtonSize = 21; + iconButtonSize = 21; break; case 'huge': - iconButtonSize = 24; + iconButtonSize = 24; break; - + default: break; } } - + + const onIconClick = (e) => { + props.onIconClick && props.onIconClick(e, value); + } return ( - + {children} - - { - iconNames.includes(props.iconName) - && - - - props.onIconClick(e, value)}/> - - - } + as={TextInput} + /> + { + iconNames.includes(props.iconName) + && + + + + + + } ); }); @@ -167,8 +178,7 @@ InputBlock.defaultProps = { iconName: "", iconColor: "#ffffff", isIconFill: false, - isDisabled: false, - onIconClick: (e) => console.log("Icon click") + isDisabled: false } export default InputBlock \ No newline at end of file From f0398fb10a98e75a6d4ae4cf952dd3e324ef4283 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 22:40:29 +0300 Subject: [PATCH 14/16] web: components: Nav optimization --- .../src/components/layout/sub-components/nav.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/web/ASC.Web.Components/src/components/layout/sub-components/nav.js b/web/ASC.Web.Components/src/components/layout/sub-components/nav.js index 443ff635ea..c85239dde9 100644 --- a/web/ASC.Web.Components/src/components/layout/sub-components/nav.js +++ b/web/ASC.Web.Components/src/components/layout/sub-components/nav.js @@ -22,15 +22,19 @@ const StyledNav = styled.nav` } `; +const StyledScrollbar = styled(Scrollbar)` + width: ${props => props.opened ? 240 : 56}; +`; + const Nav = React.memo(props => { console.log("Nav render"); const { opened, onMouseEnter, onMouseLeave, children } = props; return ( - + {children} - + ); }); From 9a841fcfae60523e8a51a4bc706aa1043bba425e Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 22:46:36 +0300 Subject: [PATCH 15/16] web: components: ProfileActions optimization --- .../layout/sub-components/profile-actions.js | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/web/ASC.Web.Components/src/components/layout/sub-components/profile-actions.js b/web/ASC.Web.Components/src/components/layout/sub-components/profile-actions.js index 01aea600d7..6f1ac96c7d 100644 --- a/web/ASC.Web.Components/src/components/layout/sub-components/profile-actions.js +++ b/web/ASC.Web.Components/src/components/layout/sub-components/profile-actions.js @@ -20,6 +20,8 @@ class ProfileActions extends React.PureComponent { this.handleClick = this.handleClick.bind(this); this.toggle = this.toggle.bind(this); this.getUserRole = this.getUserRole.bind(this); + this.onAvatarClick = this.onAvatarClick.bind(this); + this.onDropDownItemClick = this.onDropDownItemClick.bind(this); }; handleClick = (e) => { @@ -53,6 +55,15 @@ class ProfileActions extends React.PureComponent { return "user"; }; + onAvatarClick = () => { + this.toggle(!this.state.opened); + } + + onDropDownItemClick = (action) => { + action.onClick && action.onClick(); + this.toggle(!this.state.opened); + } + render() { console.log("Layout sub-component ProfileActions render"); return ( @@ -62,9 +73,7 @@ class ProfileActions extends React.PureComponent { role={this.getUserRole(this.state.user)} source={this.state.user.avatarSmall} userName={this.state.user.userName} - onClick={() => { - this.toggle(!this.state.opened); - }} + onClick={this.onAvatarClick} /> { - action.onClick && action.onClick(); - this.toggle(!this.state.opened); - }} + onClick={this.onDropDownItemClick.bind(this, action)} /> ) } From 4c150806742ec88178ed6b5ffb682f25a077d1b9 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 31 Jul 2019 23:02:03 +0300 Subject: [PATCH 16/16] web: components: Link optimization --- .../src/components/link/index.js | 30 +++++++++++++------ 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/web/ASC.Web.Components/src/components/link/index.js b/web/ASC.Web.Components/src/components/link/index.js index 6bbc3a0935..ccbb90e0e4 100644 --- a/web/ASC.Web.Components/src/components/link/index.js +++ b/web/ASC.Web.Components/src/components/link/index.js @@ -127,6 +127,7 @@ class Link extends React.PureComponent { this.stopAction = this.stopAction.bind(this); this.toggleDropdown = this.toggleDropdown.bind(this); this.toggleHovered = this.toggleHovered.bind(this); + this.onDropDownItemClick = this.onDropDownItemClick.bind(this); } handleClick = (e) => !this.ref.current.contains(e.target) && this.toggleDropdown(false); @@ -135,8 +136,10 @@ class Link extends React.PureComponent { toggleHovered = (isHovered) => this.setState({ isHovered: isHovered }); onMouseAction = () => this.props.dropdownType === 'appearDottedAfterHover' && this.toggleHovered(!this.state.isHovered); clickToSpan = () => { - this.setState({ data: this.props.data }); - this.toggleDropdown(!this.state.isOpen); + this.setState({ + data: this.props.data, + isOpen: !this.state.isOpen + }); } clickToSpanWithHandleEvent = (e) => { this.stopAction(e); @@ -153,18 +156,30 @@ class Link extends React.PureComponent { document.removeEventListener("click", this.handleClick) } - componentDidUpdate(prevProps) { // Store prevId in state so we can compare when props change. // Clear out previously-loaded data (so we don't render stale stuff). if (this.props.dropdownType !== prevProps.dropdownType) { - this.setState({ isDropdown: this.props.dropdownType != 'none' }); + if (this.props.isOpen !== prevProps.isOpen) { + this.setState({ + isDropdown: this.props.dropdownType != 'none', + isOpen: this.props.isOpen + }); + } + else { + this.setState({ isDropdown: this.props.dropdownType != 'none' }); + } } - if (this.props.isOpen !== prevProps.isOpen) { + else if (this.props.isOpen !== prevProps.isOpen) { this.toggleDropdown(this.props.isOpen); } } + onDropDownItemClick = (item) => { + item.onClick && item.onClick(); + this.toggleDropdown(!this.state.isOpen); + } + render() { console.log("Link render"); return ( @@ -194,10 +209,7 @@ class Link extends React.PureComponent { this.state.data.map(item => { - item.onClick && item.onClick(); - this.toggleDropdown(!this.state.isOpen); - }} + onClick={this.onDropDownItemClick.bind(this.props, item)} /> ) }