@flexis/ui
Version:
Styleless React Components
160 lines (147 loc) • 10.4 kB
JavaScript
import React from 'react';
var _createElement = React.createElement;
import { action } from '@storybook/addon-actions';
import { select, boolean } from '@storybook/addon-knobs/react';
import { storiesOf, buildInfo } from '../../helpers/stories';
import { AlignValues } from '../common/types';
import Dropdown, { DropdownContent } from './';
export var stylableApi = "\nStylable API\n---\n- :active\n- :disable\n- ::content\n\t- :active\n\t- :offset\n".concat(buildInfo([{
values: AlignValues,
prefix: ':',
postfix: 'align',
indent: 1
}]), "\n");
var _ref = /*#__PURE__*/_createElement("button", {
id: "dropdownToggleButton"
}, "Click me!");
var _ref2 = /*#__PURE__*/_createElement("br", null);
var _ref3 = /*#__PURE__*/_createElement("button", null, "text");
var _ref4 = /*#__PURE__*/_createElement("button", null, "Click me!");
var _ref5 = /*#__PURE__*/_createElement("button", null, "Click me!");
var _ref6 = /*#__PURE__*/_createElement("button", null, "Click me!");
var _ref7 = /*#__PURE__*/_createElement("button", null, "Click me!");
var _ref8 = /*#__PURE__*/_createElement("button", null, "Click me!");
var _ref9 = /*#__PURE__*/_createElement("button", {
id: "dropdownToggleButton"
}, "Click me!");
var _ref10 = /*#__PURE__*/_createElement(DropdownContent, null, "Dropdown content.");
var _ref11 = /*#__PURE__*/_createElement("button", {
id: "dropdownToggleButton2"
}, "Click me!");
var _ref12 = /*#__PURE__*/_createElement(DropdownContent, null, "Dropdown content.");
export default storiesOf('Dropdown', module).addParameters({
info: stylableApi
}).add('with simple content', function () {
return _createElement(Dropdown, {
onToggle: action('toggle'),
align: select('Align', AlignValues, 'start'),
disabled: boolean('Disabled', false),
blockScroll: boolean('Block scroll', true),
hideOnClick: boolean('Hide on click', false)
}, _ref, _createElement(DropdownContent, {
style: {
padding: '1rem',
width: '12rem',
textAlign: 'center'
}
}, "Dropdown content.", _ref2, _ref3));
}).add('with default active', function () {
return _createElement(Dropdown, {
onToggle: action('toggle'),
align: select('Align', AlignValues, 'start'),
disabled: boolean('Disabled', false),
blockScroll: boolean('Block scroll', true),
hideOnClick: boolean('Hide on click', false),
defaultActive: true
}, _ref4, _createElement(DropdownContent, {
style: {
padding: '1rem',
width: '12rem',
textAlign: 'center'
}
}, "Dropdown content."));
}).add('with disabled state', function () {
return _createElement(Dropdown, {
onToggle: action('toggle'),
align: select('Align', AlignValues, 'start'),
disabled: boolean('Disabled', true),
blockScroll: boolean('Block scroll', true),
hideOnClick: boolean('Hide on click', false)
}, _ref5, _createElement(DropdownContent, {
style: {
padding: '1rem',
width: '12rem',
textAlign: 'center'
}
}, "Dropdown content."));
}).add('with active state', function () {
return _createElement(Dropdown, {
onToggle: action('toggle'),
align: select('Align', AlignValues, 'start'),
disabled: boolean('Disabled', false),
active: boolean('Active', true),
blockScroll: boolean('Block scroll', true),
hideOnClick: boolean('Hide on click', false)
}, _ref6, _createElement(DropdownContent, {
style: {
padding: '1rem',
width: '12rem',
textAlign: 'center'
}
}, "Dropdown content."));
}).add('with scroll', function () {
return _createElement("div", {
style: {
padding: '100px 0 1200px'
}
}, _createElement(Dropdown, {
onToggle: action('toggle'),
align: select('Align', AlignValues, 'start'),
disabled: boolean('Disabled', false),
blockScroll: boolean('Block scroll', true)
}, _ref7, _createElement(DropdownContent, {
style: {
padding: '1rem',
width: '12rem',
textAlign: 'center'
}
}, "Dropdown content.")));
}).add('with fixed block', function () {
return _createElement("div", {
style: {
padding: '100px 0 1200px'
}
}, _createElement("div", {
style: {
position: 'fixed',
top: '30px',
left: '100px',
border: '1px solid black',
width: '300px',
height: '200px',
overflow: 'auto'
}
}, _createElement("div", {
style: {
padding: '100px 0 1200px'
}
}, _createElement(Dropdown, {
onToggle: action('toggle'),
align: select('Align', AlignValues, 'start'),
disabled: boolean('Disabled', false),
blockScroll: boolean('Block scroll', true)
}, _ref8, _createElement(DropdownContent, {
style: {
padding: '1rem',
width: '12rem',
textAlign: 'center'
}
}, "Dropdown content.")))));
}).add('with two dropdowns', function () {
return _createElement(React.Fragment, null, _createElement(Dropdown, {
onToggle: action('toggle')
}, _ref9, _ref10), _createElement(Dropdown, {
onToggle: action('toggle')
}, _ref11, _ref12));
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0Ryb3Bkb3duL0Ryb3Bkb3duLnN0b3JpZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBUCxNQUFrQixPQUFsQjs7QUFDQSxTQUNDLE1BREQsUUFFTywwQkFGUDtBQUdBLFNBQ0MsTUFERCxFQUVDLE9BRkQsUUFHTyw4QkFIUDtBQUlBLFNBQ0MsU0FERCxFQUVDLFNBRkQsUUFHTyx1QkFIUDtBQUlBLFNBQ0MsV0FERCxRQUVPLGlCQUZQO0FBR0EsT0FBTyxRQUFQLElBQ0MsZUFERCxRQUVPLElBRlA7QUFJQSxPQUFPLElBQU0sV0FBVyxnR0FRdEIsU0FBUyxDQUFDLENBQ1g7QUFDQyxFQUFBLE1BQU0sRUFBRyxXQURWO0FBRUMsRUFBQSxNQUFNLEVBQUcsR0FGVjtBQUdDLEVBQUEsT0FBTyxFQUFFLE9BSFY7QUFJQyxFQUFBLE1BQU0sRUFBRztBQUpWLENBRFcsQ0FBRCxDQVJhLE9BQWpCOzt3QkFnQ0g7QUFBUSxFQUFBLEVBQUUsRUFBQztBQUFYLGU7O3lCQVVrQiwwQjs7eUJBQ2pCLHNDOzt5QkFnQkQsMkM7O3lCQXlCQSwyQzs7eUJBMEJBLDJDOzt5QkE2QkMsMkM7O3lCQThDRSwyQzs7eUJBeUJGO0FBQVEsRUFBQSxFQUFFLEVBQUM7QUFBWCxlOzswQkFHQSxlQUFDLGVBQUQsNEI7OzBCQU9BO0FBQVEsRUFBQSxFQUFFLEVBQUM7QUFBWCxlOzswQkFHQSxlQUFDLGVBQUQsNEI7O0FBN01MLGVBQWUsU0FBUyxDQUFDLFVBQUQsRUFBYSxNQUFiLENBQVQsQ0FDYixhQURhLENBQ0M7QUFDZCxFQUFBLElBQUksRUFBRTtBQURRLENBREQsRUFJYixHQUphLENBS2IscUJBTGEsRUFNYjtBQUFBLFNBQ0MsZUFBQyxRQUFEO0FBQ0MsSUFBQSxRQUFRLEVBQUUsTUFBTSxDQUFDLFFBQUQsQ0FEakI7QUFFQyxJQUFBLEtBQUssRUFBRSxNQUFNLENBQUMsT0FBRCxFQUFVLFdBQVYsRUFBdUIs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