@flexis/ui/components/CustomSelect/CustomSelect.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 { text, boolean, number } from '@storybook/addon-knobs/react';
import { storiesOf } from '../../helpers/stories';
import CustomSelect, { CustomSelectFace, CustomSelectOption } from './';
export var stylableApi = "\nStylable API\n---\n- ::placeholder\n- ::dropdownContent\n- ::options\n- ::option\n- ::label\n- ::input\n";
export var events = {
  onChange: action('change')
};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

export default storiesOf('CustomSelect', module).addParameters({
  info: stylableApi
}).add('with basic state', function () {
  return _createElement(CustomSelect, _extends({}, events, {
    disabled: boolean('Disabled', false)
  }), _ref, _ref2, _ref3);
}).add('with custom face', function () {
  return _createElement(CustomSelect, _extends({}, events, {
    disabled: boolean('Disabled', false)
  }), _createElement(CustomSelectFace, null, function (label, _ref4) {
    var disabled = _ref4.disabled;
    return _createElement("button", {
      id: "customSelectFace",
      disabled: disabled
    }, label);
  }), _ref5, _ref6, _ref7);
}).add('with placeholder', function () {
  return _createElement(CustomSelect, _extends({}, events, {
    id: "customSelect",
    placeholder: text('Placeholder', 'Placeholder'),
    disabled: boolean('Disabled', false)
  }), _createElement(CustomSelectFace, null, function (label, _ref8) {
    var disabled = _ref8.disabled;
    return _createElement("button", {
      id: "customSelectFace",
      disabled: disabled
    }, label);
  }), _ref9, _ref10, _ref11);
}).add('with disabled state', function () {
  return _createElement(CustomSelect, _extends({}, events, {
    disabled: boolean('Disabled', true)
  }), _createElement(CustomSelectFace, null, function (label, _ref12) {
    var disabled = _ref12.disabled;
    return _createElement("button", {
      disabled: disabled
    }, label);
  }), _ref13, _ref14, _ref15);
}).add('with default value', function () {
  return _createElement(CustomSelect, _extends({}, events, {
    name: "select",
    defaultValue: 1,
    disabled: boolean('Disabled', false)
  }), _createElement(CustomSelectFace, null, function (label, _ref16) {
    var disabled = _ref16.disabled;
    return _createElement("button", {
      disabled: disabled
    }, label);
  }), _ref17, _ref18, _ref19);
}).add('with value', function () {
  return _createElement(CustomSelect, _extends({}, events, {
    name: "select",
    value: number('Value', 1),
    disabled: boolean('Disabled', false)
  }), _createElement(CustomSelectFace, null, function (label, _ref20) {
    var disabled = _ref20.disabled;
    return _createElement("button", {
      disabled: disabled
    }, label);
  }), _ref21, _ref22, _ref23);
}).add('with default multiple values', function () {
  return _createElement(CustomSelect, _extends({}, events, {
    name: "select",
    defaultValue: [1, 2],
    disabled: boolean('Disabled', false),
    multiple: true
  }), _createElement(CustomSelectFace, null, function (label, _ref24) {
    var disabled = _ref24.disabled;
    return _createElement("button", {
      disabled: disabled
    }, label);
  }), _ref25, _ref26, _ref27);
}).add('with basic multiple state', function () {
  return _createElement(CustomSelect, _extends({}, events, {
    name: "select",
    disabled: boolean('Disabled', false),
    multiple: true
  }), _createElement(CustomSelectFace, null, function (label, _ref28) {
    var disabled = _ref28.disabled;
    return _createElement("button", {
      disabled: disabled
    }, label);
  }), _ref29, _ref30, _ref31);
}).add('with multiple values', function () {
  return _createElement(CustomSelect, _extends({}, events, {
    name: "select",
    value: [1, 2],
    disabled: boolean('Disabled', false),
    multiple: true
  }), _createElement(CustomSelectFace, null, function (label, _ref32) {
    var disabled = _ref32.disabled;
    return _createElement("button", {
      disabled: disabled
    }, label);
  }), _ref33, _ref34, _ref35);
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0N1c3RvbVNlbGVjdC9DdXN0b21TZWxlY3Quc3Rvcmllcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQTtBQUNBLE9BQU8sS0FBUCxNQUFrQixPQUFsQjs7QUFDQSxTQUNDLE1BREQsUUFFTywwQkFGUDtBQUdBLFNBQ0MsSUFERCxFQUVDLE9BRkQsRUFHQyxNQUhELFFBSU8sOEJBSlA7QUFLQSxTQUNDLFNBREQsUUFFTyx1QkFGUDtBQUdBLE9BQU8sWUFBUCxJQUNDLGdCQURELEVBRUMsa0JBRkQsUUFHTyxJQUhQO0FBS0EsT0FBTyxJQUFNLFdBQVcsK0dBQWpCO0FBV1AsT0FBTyxJQUFNLE1BQU0sR0FBRztBQUNyQixFQUFBLFFBQVEsRUFBRSxNQUFNLENBQUMsUUFBRDtBQURLLENBQWY7O3dCQWVILGVBQUMsa0JBQUQ7QUFBb0IsRUFBQSxLQUFLLEVBQUU7QUFBM0IsZTs7eUJBR0EsZUFBQyxrQkFBRDtBQUFvQixFQUFBLEtBQUssRUFBRTtBQUEzQixlOzt5QkFHQSxlQUFDLGtCQUFEO0FBQW9CLEVBQUEsS0FBSyxFQUFFO0FBQTNCLGU7O3lCQXVCQSxlQUFDLGtCQUFEO0FBQW9CLEVBQUEsS0FBSyxFQUFFO0FBQTNCLGU7O3lCQUdBLGVBQUMsa0JBQUQ7QUFBb0IsRUFBQSxLQUFLLEVBQUU7QUFBM0IsZTs7eUJBR0EsZUFBQyxrQkFBRDtBQUFvQixFQUFBLEtBQUssRUFBRTtBQUEzQixlOzt5QkF5QkEsZUFBQyxrQkFBRDtBQUFvQixFQUFBLEtBQUssRUFBRTtBQUEzQixlOzswQkFHQSxlQUFDLGtCQUFEO0FBQW9CLEVBQUEsS0FBSyxFQUFFO0FBQTNCLGU7OzBCQUdBLGVBQUMsa0JBQUQ7QUFBb0IsRUFBQSxLQUFLLEVBQUU7QUFBM0IsZTs7MEJBb0JBLGVBQUMsa0JBQUQ7QUFBb0IsRUFBQSxLQUFLLEVBQUU7QUFBM0IsZTs7MEJBR0EsZUFBQyxrQkFBRDtBQUFvQixFQUFBLEtBQUssRUFB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