@flexis/ui/components/CustomSelect/CustomSelect.stories.js

Styleless React Components

"use strict";

var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = exports.events = exports.stylableApi = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));

var _react = _interopRequireDefault(require("react"));

var _addonActions = require("@storybook/addon-actions");

var _react2 = require("@storybook/addon-knobs/react");

var _stories = require("../../helpers/stories");

var _ = _interopRequireWildcard(require("./"));

/* tslint:disable: no-magic-numbers */
var _createElement = _react.default.createElement;
var stylableApi = "\nStylable API\n---\n- ::placeholder\n- ::dropdownContent\n- ::options\n- ::option\n- ::label\n- ::input\n";
exports.stylableApi = stylableApi;
var events = {
  onChange: (0, _addonActions.action)('change')
};
exports.events = events;

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

var _default = (0, _stories.storiesOf)('CustomSelect', module).addParameters({
  info: stylableApi
}).add('with basic state', function () {
  return _createElement(_.default, (0, _extends2.default)({}, events, {
    disabled: (0, _react2.boolean)('Disabled', false)
  }), _ref, _ref2, _ref3);
}).add('with custom face', function () {
  return _createElement(_.default, (0, _extends2.default)({}, events, {
    disabled: (0, _react2.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(_.default, (0, _extends2.default)({}, events, {
    id: "customSelect",
    placeholder: (0, _react2.text)('Placeholder', 'Placeholder'),
    disabled: (0, _react2.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(_.default, (0, _extends2.default)({}, events, {
    disabled: (0, _react2.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(_.default, (0, _extends2.default)({}, events, {
    name: "select",
    defaultValue: 1,
    disabled: (0, _react2.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(_.default, (0, _extends2.default)({}, events, {
    name: "select",
    value: (0, _react2.number)('Value', 1),
    disabled: (0, _react2.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(_.default, (0, _extends2.default)({}, events, {
    name: "select",
    defaultValue: [1, 2],
    disabled: (0, _react2.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(_.default, (0, _extends2.default)({}, events, {
    name: "select",
    disabled: (0, _react2.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(_.default, (0, _extends2.default)({}, events, {
    name: "select",
    value: [1, 2],
    disabled: (0, _react2.boolean)('Disabled', false),
    multiple: true
  }), _createElement(_.CustomSelectFace, null, function (label, _ref32) {
    var disabled = _ref32.disabled;
    return _createElement("button", {
      disabled: disabled
    }, label);
  }), _ref33, _ref34, _ref35);
});

exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0N1c3RvbVNlbGVjdC9DdXN0b21TZWxlY3Quc3Rvcmllcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7OztBQUNBOztBQUNBOztBQUdBOztBQUtBOztBQUdBOztBQWJBOztBQWtCTyxJQUFNLFdBQVcsK0dBQWpCOztBQVdBLElBQU0sTUFBTSxHQUFHO0FBQ3JCLEVBQUEsUUFBUSxFQUFFLDBCQUFPLFFBQVA7QUFEVyxDQUFmOzs7d0JBZUgsZUFBQyxvQkFBRDtBQUFvQixFQUFBLEtBQUssRUFBRTtBQUEzQixlOzt5QkFHQSxlQUFDLG9CQUFEO0FBQW9CLEVBQUEsS0FBSyxFQUFFO0FBQTNCLGU7O3lCQUdBLGVBQUMsb0JBQUQ7QUFBb0IsRUFBQSxLQUFLLEVBQUU7QUFBM0IsZTs7eUJBdUJBLGVBQUMsb0JBQUQ7QUFBb0IsRUFBQSxLQUFLLEVBQUU7QUFBM0IsZTs7eUJBR0EsZUFBQyxvQkFBRDtBQUFvQixFQUFBLEtBQUssRUFBRTtBQUEzQixlOzt5QkFHQSxlQUFDLG9CQUFEO0FBQW9CLEVBQUEsS0FBSyxFQUFFO0FBQTNCLGU7O3lCQXlCQSxlQUFDLG9CQUFEO0FBQW9CLEVBQUEsS0FBSyxFQUFFO0FBQTNCLGU7OzBCQUdBLGVBQUMsb0JBQUQ7QUFBb0IsRUFBQSxLQUFLLEVBQUU7QUFBM0IsZTs7MEJBR0EsZUFBQyxvQkFBRDtBQUFvQixFQUFBLEtBQUssRUFBRTtBQUEzQixlOzswQkFvQkEsZUFBQyxvQkFBRDtBQUFvQixFQUFBLEtBQUssRUFBRTtBQUEzQixlOzswQkFHQSxlQUFDLG9CQUFEO0FBQW9CLEVBQUEsS0FBSyxFQUFFO0FBQTNCLGU7OzBCQUdBLGVBQUMsb0JBQUQ7QUFBb0IsRUFBQSxLQUFLLEVBQUU7QUFBM0IsZTs7MEJBc0JBLGVBQUMsb0JBQUQ7QUFBb0IsRUFBQSxLQUFLLEVBQUU7QUFBM0IsZTs7MEJBR0EsZUFBQyxvQkFBRDtBQUFvQixFQUFBLEtBQUss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