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

web: components: Fixed hiding AdvancedSelector by click on checkbox

Browse Source
This commit is contained in:
Alexey Safronov 2019-09-12 14:04:14 +03:00
parent 92a1a34445
commit bcdfad1522
2 changed files with 145 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js
View File

@ -14,50 +14,74 @@ function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
const groups = [
{
key: "group-all",
label: "All groups",
total: 0
},
{
key: "group-dev",
label: "Development",
total: 0
},
{
key: "group-management",
label: "Management",
total: 0
},
{
key: "group-marketing",
label: "Marketing",
total: 0
},
{
key: "group-mobile",
label: "Mobile",
total: 0
},
{
key: "group-support",
label: "Support",
total: 0
},
{
key: "group-web",
label: "Web",
total: 0
},
{
key: "group-1",
label: "Group1",
total: 0
},
{
key: "group-2",
label: "Group2",
total: 0
},
{
key: "group-3",
label: "Group3",
total: 0
},
{
key: "group-4",
label: "Group4",
total: 0
},
{
key: "group-5",
label: "Group5",
total: 0
}
];
storiesOf("Components|AdvancedSelector", module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add("base", () => {
const optionsCount = number("Users count", 1000);
const groups = [
{
key: "group-all",
label: "All groups",
total: 0
},
{
key: "group-dev",
label: "Development",
total: 0
},
{
key: "group-management",
label: "Management",
total: 0
},
{
key: "group-marketing",
label: "Marketing",
total: 0
},
{
key: "group-mobile",
label: "Mobile",
total: 0
},
{
key: "group-support",
label: "Support",
total: 0
},
{
key: "group-web",
label: "Web",
total: 0
}
];
const options = Array.from({ length: optionsCount }, (v, index) => {
const additional_group = groups[getRandomInt(1, 6)];
groups[0].total++;
@ -115,45 +139,6 @@ storiesOf("Components|AdvancedSelector", module)
})
.add("drop down", () => {
const optionsCount = number("Users count", 1000);
const groups = [
{
key: "group-all",
label: "All groups",
total: 0
},
{
key: "group-dev",
label: "Development",
total: 0
},
{
key: "group-management",
label: "Management",
total: 0
},
{
key: "group-marketing",
label: "Marketing",
total: 0
},
{
key: "group-mobile",
label: "Mobile",
total: 0
},
{
key: "group-support",
label: "Support",
total: 0
},
{
key: "group-web",
label: "Web",
total: 0
}
];
const options = Array.from({ length: optionsCount }, (v, index) => {
const additional_group = groups[getRandomInt(1, 6)];
groups[0].total++;

152
web/ASC.Web.Components/src/components/advanced-selector/index.js
View File

@ -13,7 +13,7 @@ import findIndex from "lodash/findIndex";
import filter from "lodash/filter";
import DropDown from "../drop-down";
import { handleAnyClick } from "../../utils/event";
import isEmpty from 'lodash/isEmpty';
import isEmpty from "lodash/isEmpty";
/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
@ -90,13 +90,13 @@ const StyledContainer = styled(Container)`
}
.button_container {
border-top: 1px solid #eceef1;
display: flex;
border-top: 1px solid #eceef1;
display: flex;
.add_members_btn {
margin: 16px;
}
.add_members_btn {
margin: 16px;
}
}
`;
class AdvancedSelector extends React.Component {
@ -119,7 +119,7 @@ class AdvancedSelector extends React.Component {
}
handleClick = e => {
if (this.props.isOpen && !this.ref.current.contains(e.target)) {
if (this.props.isOpen && !this.ref.current.contains(e.target) && e.target.className.indexOf("option_checkbox") === -1) {
this.props.onSelect && this.props.onSelect(this.state.selectedOptions);
}
};
@ -151,11 +151,12 @@ class AdvancedSelector extends React.Component {
const groups = this.convertGroups(this.props.groups);
const currentGroup = this.getCurrentGroup(groups);
newState = Object.assign({}, newState, {
groups, currentGroup
groups,
currentGroup
});
}
if(!isEmpty(newState)) {
if (!isEmpty(newState)) {
this.setState({ ...this.state, ...newState });
}
@ -270,9 +271,18 @@ class AdvancedSelector extends React.Component {
const { selectedOptions, selectedAll, currentGroup, groups } = this.state;
const containerHeight = size === "compact" ? (!groups || !groups.length ? 336 : 326) : 545;
const containerWidth = size === "compact" ? (!groups || !groups.length ? 325 : 326) : 690;
const listHeight = size === "compact" ? (!groups || !groups.length ? 176 : 120) : 345;
const containerHeight =
size === "compact" ? (!groups || !groups.length ? 336 : 326) : 545;
const containerWidth =
size === "compact" ? (!groups || !groups.length ? 325 : 326) : 690;
const listHeight =
size === "compact"
? !groups || !groups.length
? isMultiSelect
? 176
: 226
: 120
: 345;
const itemHeight = 32;
return (
@ -281,68 +291,70 @@ class AdvancedSelector extends React.Component {
containerWidth={containerWidth}
{...this.props}
>
<div className="data_container" ref={this.ref}>
<SearchInput
className="options_searcher"
isDisabled={isDisabled}
size="base"
scale={true}
isNeedFilter={false}
placeholder={placeholder}
value={value}
onChange={onSearchChanged}
onClearSearch={onSearchChanged.bind(this, "")}
/>
{groups && groups.length > 0 && (
<ComboBox
className="options_group_selector"
<div ref={this.ref}>
<div className="data_container">
<SearchInput
className="options_searcher"
isDisabled={isDisabled}
options={groups}
selectedOption={currentGroup}
dropDownMaxHeight={200}
scaled={true}
size="content"
onSelect={this.onCurrentGroupChange}
/>
)}
{isMultiSelect && (
<Checkbox
label={selectAllLabel}
isChecked={
selectedAll || selectedOptions.length === options.length
}
isIndeterminate={!selectedAll && selectedOptions.length > 0}
className="option_select_all_checkbox"
onChange={this.onSelectedAllChange}
/>
)}
<FixedSizeList
className="options_list"
height={listHeight}
itemSize={itemHeight}
itemCount={this.props.options.length}
itemData={this.props.options}
outerElementType={CustomScrollbarsVirtualList}
>
{this.renderRow.bind(this)}
</FixedSizeList>
</div>
{isMultiSelect && (
<div className="button_container">
<Button
className="add_members_btn"
primary={true}
size="big"
label={buttonLabel}
size="base"
scale={true}
isDisabled={
!this.state.selectedOptions ||
!this.state.selectedOptions.length
}
onClick={this.onButtonClick}
isNeedFilter={false}
placeholder={placeholder}
value={value}
onChange={onSearchChanged}
onClearSearch={onSearchChanged.bind(this, "")}
/>
{groups && groups.length > 0 && (
<ComboBox
className="options_group_selector"
isDisabled={isDisabled}
options={groups}
selectedOption={currentGroup}
dropDownMaxHeight={200}
scaled={true}
size="content"
onSelect={this.onCurrentGroupChange}
/>
)}
{isMultiSelect && (
<Checkbox
label={selectAllLabel}
isChecked={
selectedAll || selectedOptions.length === options.length
}
isIndeterminate={!selectedAll && selectedOptions.length > 0}
className="option_select_all_checkbox"
onChange={this.onSelectedAllChange}
/>
)}
<FixedSizeList
className="options_list"
height={listHeight}
itemSize={itemHeight}
itemCount={this.props.options.length}
itemData={this.props.options}
outerElementType={CustomScrollbarsVirtualList}
>
{this.renderRow.bind(this)}
</FixedSizeList>
</div>
)}
{isMultiSelect && (
<div className="button_container">
<Button
className="add_members_btn"
primary={true}
size="big"
label={buttonLabel}
scale={true}
isDisabled={
!this.state.selectedOptions ||
!this.state.selectedOptions.length
}
onClick={this.onButtonClick}
/>
</div>
)}
</div>
</StyledContainer>
);
};