61 lines
1.7 KiB
JavaScript
61 lines
1.7 KiB
JavaScript
import React from "react";
|
|
import { storiesOf } from "@storybook/react";
|
|
import { action } from "@storybook/addon-actions";
|
|
import { StringValue } from "react-values";
|
|
import { withKnobs, boolean, text, select } from "@storybook/addon-knobs/react";
|
|
import withReadme from "storybook-readme/with-readme";
|
|
import Readme from "./README.md";
|
|
import SearchInput from ".";
|
|
import Button from "../button";
|
|
import Section from "../../../.storybook/decorators/section";
|
|
|
|
const sizeOptions = ["base", "middle", "big", "huge"];
|
|
|
|
class SearchStory extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
value: "test1",
|
|
};
|
|
this.buttonClick = this.buttonClick.bind(this);
|
|
}
|
|
buttonClick() {
|
|
this.setState({ value: "test" });
|
|
}
|
|
render() {
|
|
return (
|
|
<Section>
|
|
<StringValue
|
|
onChange={(value) => {
|
|
action("onChange")(value);
|
|
}}
|
|
>
|
|
{({ value, set }) => (
|
|
<Section>
|
|
<div style={{ marginBottom: "20px" }}>
|
|
<Button label="Change props" onClick={this.buttonClick} />
|
|
</div>
|
|
<SearchInput
|
|
id={text("id", "")}
|
|
isDisabled={boolean("isDisabled", false)}
|
|
size={select("size", sizeOptions, "base")}
|
|
scale={boolean("scale", false)}
|
|
placeholder={text("placeholder", "Search")}
|
|
value={value}
|
|
onChange={(value) => {
|
|
set(value);
|
|
}}
|
|
/>
|
|
</Section>
|
|
)}
|
|
</StringValue>
|
|
</Section>
|
|
);
|
|
}
|
|
}
|
|
|
|
storiesOf("Components|Input", module)
|
|
.addDecorator(withKnobs)
|
|
.addDecorator(withReadme(Readme))
|
|
.add("search", () => <SearchStory />);
|