@flexis/ui/components/CustomFlatSelect/CustomFlatSelect.stories.es.js

Styleless React Components

import _extends from "@babel/runtime-corejs3/helpers/extends";

/* tslint:disable: no-magic-numbers */
import React from 'react';
var _createElement = React.createElement;
import { action } from '@storybook/addon-actions';
import { boolean, number } from '@storybook/addon-knobs/react';
import { storiesOf } from '../../helpers/stories';
import Button from '../Button';
import CustomFlatSelect, { CustomFlatSelectOption } from './';
export var stylableApi = "\nStylable API\n---\n- ::option\n- ::label\n- ::input\n";
export var events = {
  onChange: action('change')
};

var _ref = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 0
}, "Option #1");

var _ref2 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 1
}, "Option #2");

var _ref3 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 2
}, "Option #3");

var _ref4 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 0
}, _createElement(Button, {
  type: "button"
}, "Option #1"));

var _ref5 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 1
}, "Option #2");

var _ref6 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 2
}, "Option #3");

var _ref7 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 0
}, "Option #1");

var _ref8 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 1
}, "Option #2");

var _ref9 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 2
}, "Option #3");

var _ref10 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 0
}, "Option #1");

var _ref11 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 1
}, "Option #2");

var _ref12 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 2
}, "Option #3");

var _ref13 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 0
}, "Option #1");

var _ref14 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 1
}, "Option #2");

var _ref15 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 2
}, "Option #3");

var _ref16 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 0
}, "Option #1");

var _ref17 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 1
}, "Option #2");

var _ref18 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 2
}, "Option #3");

var _ref19 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 0
}, "Option #1");

var _ref20 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 1
}, "Option #2");

var _ref21 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 2
}, "Option #3");

var _ref22 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 0
}, "Option #1");

var _ref23 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 1
}, "Option #2");

var _ref24 = /*#__PURE__*/_createElement(CustomFlatSelectOption, {
  value: 2
}, "Option #3");

export default storiesOf('CustomFlatSelect', module).addParameters({
  info: stylableApi
}).add('with basic state', function () {
  return _createElement(CustomFlatSelect, _extends({}, events, {
    id: "toggleSelect",
    style: {
      width: '10rem'
    },
    disabled: boolean('Disabled', false)
  }), _ref, _ref2, _ref3);
}).add('with option button', function () {
  return _createElement(CustomFlatSelect, _extends({}, events, {
    id: "toggleSelect",
    style: {
      width: '10rem'
    },
    disabled: boolean('Disabled', false)
  }), _ref4, _ref5, _ref6);
}).add('with disabled state', function () {
  return _createElement(CustomFlatSelect, _extends({}, events, {
    style: {
      width: '10rem'
    },
    disabled: boolean('Disabled', true)
  }), _ref7, _ref8, _ref9);
}).add('with default value', function () {
  return _createElement(CustomFlatSelect, _extends({}, events, {
    style: {
      width: '10rem'
    },
    name: "select",
    defaultValue: 1,
    disabled: boolean('Disabled', false)
  }), _ref10, _ref11, _ref12);
}).add('with value', function () {
  return _createElement(CustomFlatSelect, _extends({}, events, {
    style: {
      width: '10rem'
    },
    name: "select",
    value: number('Value', 1),
    disabled: boolean('Disabled', false)
  }), _ref13, _ref14, _ref15);
}).add('with default multiple values', function () {
  return _createElement(CustomFlatSelect, _extends({}, events, {
    style: {
      width: '10rem'
    },
    name: "select",
    defaultValue: [1, 2],
    disabled: boolean('Disabled', false),
    multiple: true
  }), _ref16, _ref17, _ref18);
}).add('with basic multiple state', function () {
  return _createElement(CustomFlatSelect, _extends({}, events, {
    style: {
      width: '10rem'
    },
    id: "select",
    name: "select",
    disabled: boolean('Disabled', false),
    multiple: true
  }), _ref19, _ref20, _ref21);
}).add('with multiple values', function () {
  return _createElement(CustomFlatSelect, _extends({}, events, {
    style: {
      width: '10rem'
    },
    name: "select",
    value: [1, 2],
    disabled: boolean('Disabled', false),
    multiple: true
  }), _ref22, _ref23, _ref24);
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0N1c3RvbUZsYXRTZWxlY3QvQ3VzdG9tRmxhdFNlbGVjdC5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOztBQUFBO0FBQ0EsT0FBTyxLQUFQLE1BQWtCLE9BQWxCOztBQUNBLFNBQ0MsTUFERCxRQUVPLDBCQUZQO0FBR0EsU0FDQyxPQURELEVBRUMsTUFGRCxRQUdPLDhCQUhQO0FBSUEsU0FDQyxTQURELFFBRU8sdUJBRlA7QUFHQSxPQUFPLE1BQVAsTUFBbUIsV0FBbkI7QUFDQSxPQUFPLGdCQUFQLElBQ0Msc0JBREQsUUFFTyxJQUZQO0FBSUEsT0FBTyxJQUFNLFdBQVcsNERBQWpCO0FBUVAsT0FBTyxJQUFNLE1BQU0sR0FBRztBQUNyQixFQUFBLFFBQVEsRUFBRSxNQUFNLENBQUMsUUFBRDtBQURLLENBQWY7O3dCQWlCSCxlQUFDLHNCQUFEO0FBQXdCLEVBQUEsS0FBSyxFQUFFO0FBQS9CLGU7O3lCQUdBLGVBQUMsc0JBQUQ7QUFBd0IsRUFBQSxLQUFLLEVBQUU7QUFBL0IsZTs7eUJBR0EsZUFBQyxzQkFBRDtBQUF3QixFQUFBLEtBQUssRUFBRTtBQUEvQixlOzt5QkFlQSxlQUFDLHNCQUFEO0FBQXdCLEVBQUEsS0FBSyxFQUFFO0FBQS9CLEdBQ0MsZUFBQyxNQUFEO0FBQVEsRUFBQSxJQUFJLEVBQUM7QUFBYixlQURELEM7O3lCQUtBLGVBQUMsc0JBQUQ7QUFBd0IsRUFBQSxLQUFLLEVBQUU7QUFBL0IsZTs7eUJBR0EsZUFBQyxzQkFBRDtBQUF3QixFQUFBLEtBQUssRUFBRTtBQUEvQixlOzt5QkFjQSxlQUFDLHNCQUFEO0FBQXdCLEVBQUEsS0FBSyxFQUFFO0FBQS9CLGU7O3lCQUdBLGVBQUMsc0JBQUQ7QUFBd0IsRUFBQSxLQUFLLEVBQUU7QUFBL0IsZTs7eUJBR0EsZUFBQyxzQkFBRDtBQUF3QixFQUFBLEtBQUssRUFBRTtBQUEvQixlOzswQkFnQkEsZUFBQyxzQkFBRDtBQUF3QixF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