web: Common: Fixed PeopleSelector story:

+ Added onCancel handler
+ Moved story to separated class PeopleSelectorExample
+ Changed actions to console.log

web/ASC.Web.Common/src/components/PeopleSelector/PeopleSelector.stories.js

@@ -1,7 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import { storiesOf } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
 import {
   withKnobs,
   boolean
@@ -9,12 +8,57 @@ import {
 import Section from "../../../.storybook/decorators/section";
 
 import PeopleSelector from ".";
-import { BooleanValue } from "react-values";
 import { Button } from "asc-web-components";
 import withProvider from "../../../.storybook/decorators/redux";
 //import withReadme from "storybook-readme/with-readme";
 //import Readme from "./README.md";
 
+class PeopleSelectorExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.buttonRef = React.createRef();
+
+    this.state = {
+      isOpen: false
+    }
+  }
+
+  toggle = () => {
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
+  }
+
+  onCancel = (e) => {
+    if (this.buttonRef.current.contains(e.target)) { 
+      console.log("onCancel skipped");
+      return;
+    }
+
+    console.log("onCancel");
+    this.toggle();
+  }
+
+  render() {
+    return (
+      <div style={{ position: "relative" }}>
+        <Button label="Toggle dropdown" onClick={this.toggle} ref={this.buttonRef} />
+        <PeopleSelector 
+          isOpen={this.state.isOpen} 
+          useFake={true} 
+          isMultiSelect={boolean("isMultiSelect", true)}
+          onSelect={(data) => {
+            console.log("onSelect", data);
+            this.toggle();
+          }}
+          onCancel={this.onCancel}
+        />
+      </div>
+    );
+  }
+}
+
 storiesOf("Components|PeopleSelector", module)
   .addDecorator(withProvider)
   .addDecorator(withKnobs)
@@ -23,22 +67,7 @@ storiesOf("Components|PeopleSelector", module)
   .add("base", () => {
     return (
       <Section>
-        <BooleanValue>
-          {({ value, toggle }) => (
-            <div style={{ position: "relative" }}>
-              <Button label="Toggle dropdown" onClick={toggle} />
-              <PeopleSelector 
-                isOpen={value} 
-                useFake={true} 
-                isMultiSelect={boolean("isMultiSelect", true)}
-                onSelect={(data) => {
-                  action("onSelect", data);
-                  toggle();
-                }}
-              />
-            </div>
-          )}
-        </BooleanValue>
+        <PeopleSelectorExample />
       </Section>
     );
   });