From 59a69007bc7f8be9ff190a0a57a891add657831e Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Fri, 27 Sep 2019 12:42:32 +0300 Subject: [PATCH] web: Components: Init Aside inside AdvancedSelector --- .../advanced-selector.stories.js | 67 +------ .../src/components/advanced-selector/index.js | 40 ++-- .../examples/people.selectors.stories.js | 183 +----------------- 3 files changed, 34 insertions(+), 256 deletions(-) diff --git a/web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js b/web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js index 8eb524ff9d..83334460c6 100644 --- a/web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js +++ b/web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js @@ -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 ( -
- action("options onChange")} - > - {({ value, set }) => ( - { - 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") } - /> - )} - -
- ); - }) - .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 (
( { 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")} /> )} 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 be1c559fa1..defffd2ac5 100644 --- a/web/ASC.Web.Components/src/components/advanced-selector/index.js +++ b/web/ASC.Web.Components/src/components/advanced-selector/index.js @@ -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 { /> )} - {!isDropDown && + {displayType === "aside" && groups && groups.length > 0 && ( - {isDropDown && size === "full" && groups && groups.length > 0 && ( + {displayType === "dropdown" && size === "full" && groups && groups.length > 0 && (
{this.renderBody()} ) : ( - this.renderBody() + ); } } @@ -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; 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 adde432d0f..b497640ff4 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 @@ -100,7 +100,7 @@ storiesOf("EXAMPLES|AdvancedSelector", module) > {({ value, set }) => ( - action("modalVisible changed")} - > - {({ value: modalVisible, toggle: toggleModalVisible }) => ( - action("isOpen changed")} - > - {({ value: isOpen, toggle }) => ( -
-
- } - footerContent={[ -
- )} - - )} - -
- ); - }) - .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 (
@@ -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 }) => ( <>