skyquake/tests/stories/sq-input-slider.js

   1 import React from 'react';
   2 import { storiesOf, action } from '@kadira/storybook';
   3 import SqInputRangeSlider from '../../framework/widgets/sq-input-range-slider/sq-input-range-slider'
   4 import StyleGuideItem from 'react-style-guide';
   5 import '../../node_modules/react-style-guide/node_modules/highlight.js/styles/github.css';
   6
   7 let containerStyle = {
   8   display: 'flex'
   9 };
  10
  11 storiesOf('SqInputRangeSlider', module)
  12   .add('Horizontal Slider', () => (
  13   <div>
  14     <div className="inputcontainer" style={containerStyle}>
  15       <SqInputRangeSlider className="one two three" max={150} step={10} width={300} onChange={action('valueChanged')} />
  16     </div>
  17     <div className="inputcontainer" style={containerStyle}>
  18       <SqInputRangeSlider className="one two three" max={150} step={10} width={800} onChange={action('valueChanged')} />
  19     </div>
  20     <div className="inputcontainer" style={containerStyle}>
  21       <SqInputRangeSlider className="one two three" max={150} step={10} width={200} disabled onChange={action('valueChanged')} />
  22     </div>
  23   </div>
  24   ))
  25   .add('Vertical Slider', () => (
  26                                  <StyleGuideItem>
  27 <div style={{display:'flex'}}>
  28   <div style={containerStyle}>
  29     <SqInputRangeSlider vertical={true} width={300}  onChange={action('valueChanged')} />
  30   </div>
  31   <div style={containerStyle}>
  32     <SqInputRangeSlider vertical={true} width={600}  onChange={action('valueChanged')} />
  33   </div>
  34   <div style={containerStyle}>
  35     <SqInputRangeSlider vertical={true} width={300}  onChange={action('valueChanged')} disabled={true} />
  36     <SqInputRangeSlider vertical={true} width={300}  onChange={action('valueChanged')} disabled={true} />
  37   </div>
  38 </div>
  39 </StyleGuideItem>
  40   ));