web: Common: Fixed PeopleSelector story:
+ Added onCancel handler + Moved story to separated class PeopleSelectorExample + Changed actions to console.log
This commit is contained in:
parent
a94adb0a96
commit
3627bbb34c
@ -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>
|
||||
);
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue
Block a user