DocSpace-buildtools/web/ASC.Web.Components/src/components/search-input/search-input.stories.js

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 />
  ));