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

Web: Common: FilterInput small refactoring

Browse Source
This commit is contained in:
Alexey Kostenko 2020-11-19 11:49:02 +03:00
parent f428df1767
commit 8e4a1a4053
3 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/ASC.Web.Common/src/components/FilterInput/FilterInput.js
View File

@ -110,7 +110,7 @@ class FilterInput extends React.Component {
openFilterItems: [],
hiddenFilterItems: [],
needUpdateFilter: false,
searchWidth: null,
asideView: false,
};
this.searchWrapper = React.createRef();
@ -455,9 +455,13 @@ class FilterInput extends React.Component {
? sectionWidth - filterWidth - comboBoxWidth - sectionPaddings
: fullWidth - filterWidth;
this.setState({
searchWidth,
});
if (searchWidth) {
const asideView = searchWidth && searchWidth < 350;
this.setState({
asideView,
});
}
const filterArr = Array.from(
Array.from(this.filterWrapper.current.children).find(
@ -745,7 +749,7 @@ class FilterInput extends React.Component {
hiddenFilterItems,
sortId,
sortDirection,
searchWidth,
asideView,
needUpdateFilter,
} = this.state;
@ -803,7 +807,7 @@ class FilterInput extends React.Component {
isDisabled={isDisabled}
columnCount={filterColumnCount}
needUpdateFilter={needUpdateFilter}
searchWidth={searchWidth}
asideView={asideView}
/>
</div>
</SearchInput>

8
web/ASC.Web.Common/src/components/FilterInput/sub-components/FilterBlock.js
View File

@ -185,6 +185,7 @@ class FilterItem extends React.Component {
isMultiSelect={false}
onCancel={this.onCancelSelector}
onSelect={this.onSelectGroup}
displayType={"auto"}
/>
</>
)}
@ -212,6 +213,7 @@ class FilterItem extends React.Component {
defaultOptionLabel={defaultOptionLabel}
onCancel={this.onCancelSelector}
onSelect={this.onSelectGroup}
displayType={"auto"}
/>
</>
)}
@ -453,7 +455,7 @@ class FilterBlock extends React.Component {
const _this = this;
const filterItems = this.getFilterItems();
const filterData = this.props.getFilterData();
const { iconSize, isDisabled, contextMenuHeader, searchWidth } = this.props;
const { iconSize, isDisabled, contextMenuHeader, asideView } = this.props;
return (
<>
<div
@ -471,7 +473,7 @@ class FilterBlock extends React.Component {
getData={_this.getData}
isDisabled={isDisabled}
asideHeader={contextMenuHeader}
searchWidth={searchWidth}
asideView={asideView}
/>
)}
</>
@ -488,7 +490,7 @@ FilterBlock.propTypes = {
openFilterItems: PropTypes.array,
columnCount: PropTypes.number,
contextMenuHeader: PropTypes.string,
searchWidth: PropTypes.number,
asideView: PropTypes.bool,
};
export default FilterBlock;

6
web/ASC.Web.Common/src/components/FilterInput/sub-components/FilterButton.js
View File

@ -11,7 +11,7 @@ class FilterButton extends React.PureComponent {
iconSize,
columnCount,
asideHeader,
searchWidth,
asideView,
} = this.props;
//console.log('render FilterButton)
return (
@ -27,7 +27,7 @@ class FilterButton extends React.PureComponent {
size={iconSize}
title="Actions"
columnCount={columnCount}
displayType={searchWidth && searchWidth < 350 ? "aside" : "auto"}
displayType={asideView ? "aside" : "auto"}
asideHeader={asideHeader}
></ContextMenuButton>
);
@ -40,6 +40,6 @@ FilterButton.propTypes = {
isDisabled: PropTypes.bool,
columnCount: PropTypes.number,
asideHeader: PropTypes.string,
searchWidth: PropTypes.number,
asideView: PropTypes.bool,
};
export default FilterButton;