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

web: Components: Init Aside inside AdvancedSelector

Browse Source
This commit is contained in:
Alexey Safronov 2019-09-27 12:42:32 +03:00
parent 46a02a8385
commit 59a69007bc
3 changed files with 34 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,11 @@
import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from '@storybook/addon-actions';
import { withKnobs, text, number } from "@storybook/addon-knobs/react";
import { withKnobs, text, number, boolean, select } from "@storybook/addon-knobs/react";
import withReadme from "storybook-readme/with-readme";
import Readme from "./README.md";
import AdvancedSelector from "./";
import Section from "../../../.storybook/decorators/section";
import { boolean, select } from "@storybook/addon-knobs/dist/deprecated";
import { ArrayValue, BooleanValue } from "react-values";
import Button from "../button";
@ -78,6 +77,7 @@ const groups = [
];
const sizes = ["compact", "full"];
const displayTypes = ['dropdown', 'aside'];
storiesOf("Components|AdvancedSelector", module)
.addDecorator(withKnobs)
@ -95,65 +95,6 @@ storiesOf("Components|AdvancedSelector", module)
};
});
return (
<Section>
<ArrayValue
defaultValue={options}
onChange={() => action("options onChange")}
>
{({ value, set }) => (
<AdvancedSelector
size={select("size", sizes, "full")}
placeholder={text("placeholder", "Search users")}
onSearchChanged={value => {
action("onSearchChanged")(value);
set(
options.filter(option => {
return option.label.indexOf(value) > -1;
})
);
}}
options={value}
groups={groups}
selectedGroups={[groups[0]]}
isMultiSelect={boolean("isMultiSelect", true)}
buttonLabel={text("buttonLabel", "Add members")}
selectAllLabel={text("selectAllLabel", "Select all")}
onSelect={selectedOptions => {
action("onSelect")(selectedOptions);
}}
onChangeGroup={group => {
set(
options.filter(option => {
return (
option.groups &&
option.groups.length > 0 &&
option.groups.indexOf(group.key) > -1
);
})
);
}}
allowCreation={boolean("allowCreation", false)}
onAddNewClick={() => action("onSelect") }
/>
)}
</ArrayValue>
</Section>
);
})
.add("drop down", () => {
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})`
};
});
return (
<Section>
<BooleanValue
@ -170,8 +111,6 @@ storiesOf("Components|AdvancedSelector", module)
{({ value, set }) => (
<AdvancedSelector
size={select("size", sizes, "full")}
isDropDown={true}
isOpen={isOpen}
placeholder={text("placeholder", "Search users")}
onSearchChanged={value => {
action("onSearchChanged")(value);
@ -205,6 +144,8 @@ storiesOf("Components|AdvancedSelector", module)
}}
allowCreation={boolean("allowCreation", false)}
onAddNewClick={() => action("onSelect") }
isOpen={isOpen}
displayType={select("displayType", displayTypes, "dropdown")}
/>
)}
</ArrayValue>

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

@ -16,6 +16,9 @@ import isEqual from "lodash/isEqual";
import DropDown from "../drop-down";
import { handleAnyClick } from "../../utils/event";
import isEmpty from "lodash/isEmpty";
import Aside from "../layout/sub-components/aside";
const displayTypes = ['dropdown', 'aside'];
/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
@ -37,7 +40,7 @@ const Container = ({
selectedGroups,
onChangeGroup,
isOpen,
isDropDown,
displayType,
containerWidth,
containerHeight,
allowCreation,
@ -63,13 +66,13 @@ const StyledContainer = styled(Container)`
.head_container {
display: flex;
margin-bottom: ${props => props.isDropDown ? 8 : 16}px;
margin-bottom: ${props => props.displayType === "dropdown" ? 8 : 16}px;
.options_searcher {
display: inline-block;
width: 100%;
${props => props.isDropDown && props.size === "full" && css`
${props => props.displayType === "dropdown" && props.size === "full" && css`
margin-right: ${props =>
props.allowCreation ?
8 : 16
@ -106,7 +109,7 @@ const StyledContainer = styled(Container)`
.data_column_one {
${props =>
props.isDropDown && props.groups && props.groups.length > 0
props.displayType === "dropdown" && props.groups && props.groups.length > 0
? css`
width: 50%;
display: inline-block;
@ -138,7 +141,7 @@ const StyledContainer = styled(Container)`
.data_column_two {
${props =>
props.isDropDown && props.groups && props.groups.length > 0
props.displayType === "dropdown" && props.groups && props.groups.length > 0
? css`
width: 50%;
display: inline-block;
@ -371,7 +374,7 @@ class AdvancedSelector extends React.Component {
buttonLabel,
selectAllLabel,
size,
isDropDown,
displayType,
onAddNewClick,
allowCreation
} = this.props;
@ -408,14 +411,14 @@ class AdvancedSelector extends React.Component {
case "compact":
containerHeight = hasGroups ? "326px" : "100%";
containerWidth = "379px";
listWidth = isDropDown ? 356 : 356;
listWidth = displayType === "dropdown" ? 356 : 356;
listHeight = hasGroups ? 488 : isMultiSelect ? 176 : 226;
break;
case "full":
default:
containerHeight = "100%";
containerWidth = isDropDown ? "690px" : "326px";
listWidth = isDropDown ? 320 : 302;
containerWidth = displayType === "dropdown" ? "690px" : "326px";
listWidth = displayType === "dropdown" ? 320 : 302;
listHeight = 488;
break;
}
@ -458,7 +461,7 @@ class AdvancedSelector extends React.Component {
/>
)}
</div>
{!isDropDown &&
{displayType === "aside" &&
groups &&
groups.length > 0 && (
<ComboBox
@ -496,7 +499,7 @@ class AdvancedSelector extends React.Component {
{this.renderRow.bind(this)}
</FixedSizeList>
</div>
{isDropDown && size === "full" && groups && groups.length > 0 && (
{displayType === "dropdown" && size === "full" && groups && groups.length > 0 && (
<div className="data_column_two">
<Text.Body
as="p"
@ -541,13 +544,15 @@ class AdvancedSelector extends React.Component {
};
render() {
const { isDropDown, isOpen } = this.props;
const { displayType, isOpen } = this.props;
//console.log("AdvancedSelector render()");
return isDropDown ? (
return displayType === "dropdown" ? (
<DropDown opened={isOpen}>{this.renderBody()}</DropDown>
) : (
this.renderBody()
<Aside visible={isOpen} scale={false}>
{this.renderBody()}
</Aside>
);
}
}
@ -570,11 +575,11 @@ AdvancedSelector.propTypes = {
onSelect: PropTypes.func,
onChangeGroup: PropTypes.func,
onCancel: PropTypes.func,
isDropDown: PropTypes.bool,
isOpen: PropTypes.bool,
allowCreation: PropTypes.bool,
onAddNewClick: PropTypes.func,
allowAnyClickClose: PropTypes.bool
allowAnyClickClose: PropTypes.bool,
displayType: PropTypes.oneOf(displayTypes)
};
AdvancedSelector.defaultProps = {
@ -582,7 +587,8 @@ AdvancedSelector.defaultProps = {
size: "compact",
buttonLabel: "Add members",
selectAllLabel: "Select all",
allowAnyClickClose: true
allowAnyClickClose: true,
displayType: "dropdown"
};
export default AdvancedSelector;

183
web/ASC.Web.Components/src/components/examples/people.selectors.stories.js
View File

@ -100,7 +100,7 @@ storiesOf("EXAMPLES|AdvancedSelector", module)
>
{({ value, set }) => (
<AdvancedSelector
isDropDown={true}
displayType="dropdown"
isOpen={isOpen}
size="compact"
placeholder={text("placeholder", "Search")}
@ -142,179 +142,6 @@ storiesOf("EXAMPLES|AdvancedSelector", module)
label: `User${index + 1} (All groups, ${additional_group.label})`
};
});
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" }}>
<Button label="Toggle dropdown" 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);
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}
scaledOptions={true}
size="content"
/>
</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>
);
})
.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>
@ -333,7 +160,11 @@ storiesOf("EXAMPLES|AdvancedSelector", module)
label="Toggle dropdown"
options={options}
isOpen={isOpen}
selectedOption={getSelectedOption(selectedOptionsHead.length, options.length)}
selectedOption={{
key: 0,
//icon: 'icon_name', //if you need insert ComboBox styled image
label: "Add employee"
}}
//innerContainer={react.node} // if you need insert custom node element inside ComboBox
onClick={toggle}
/>
@ -344,7 +175,7 @@ storiesOf("EXAMPLES|AdvancedSelector", module)
{({ value, set }) => (
<>
<AdvancedSelector
isDropDown={true}
displayType="dropdown"
isOpen={isOpen}
size="full"
placeholder={text("placeholder", "Search")}