1 | import "core-js/modules/es.array.from.js";
|
2 | import "core-js/modules/es.array.map.js";
|
3 | import "core-js/modules/es.object.entries.js";
|
4 | import "core-js/modules/es.object.to-string.js";
|
5 | import "core-js/modules/es.regexp.to-string.js";
|
6 | import "core-js/modules/es.string.iterator.js";
|
7 | import "core-js/modules/es.string.pad-start.js";
|
8 |
|
9 | function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
10 |
|
11 | function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
12 |
|
13 | function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
14 |
|
15 | function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
16 |
|
17 | function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
18 |
|
19 | function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
20 |
|
21 | import React, { Fragment } from 'react';
|
22 | import { storiesOf } from '@storybook/react';
|
23 | import { action } from '@storybook/addon-actions';
|
24 | import { logger } from '@storybook/client-logger';
|
25 | import { Tabs, TabsState, TabWrapper } from './tabs';
|
26 | var colours = Array.from(new Array(15), function (val, index) {
|
27 | return index;
|
28 | }).map(function (i) {
|
29 | return Math.floor(1 / 15 * i * 16777215).toString(16).padStart(6, '0');
|
30 | });
|
31 |
|
32 | function fibonacci(num, memo) {
|
33 |
|
34 | if (!memo) {
|
35 | memo = {};
|
36 | }
|
37 |
|
38 | if (memo[num]) {
|
39 | return memo[num];
|
40 | }
|
41 |
|
42 | if (num <= 1) {
|
43 | return 1;
|
44 | }
|
45 |
|
46 | memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo);
|
47 | return memo[num];
|
48 |
|
49 | }
|
50 |
|
51 | var panels = {
|
52 | test1: {
|
53 | title: 'Tab title #1',
|
54 | render: function render(_ref) {
|
55 | var active = _ref.active,
|
56 | key = _ref.key;
|
57 | return active ? React.createElement("div", {
|
58 | id: "test1",
|
59 | key: key
|
60 | }, "CONTENT 1") : null;
|
61 | }
|
62 | },
|
63 | test2: {
|
64 | title: 'Tab title #2',
|
65 | render: function render(_ref2) {
|
66 | var active = _ref2.active,
|
67 | key = _ref2.key;
|
68 | return React.createElement("div", {
|
69 | key: key,
|
70 | id: "test2",
|
71 | style: {
|
72 | background: 'hotpink',
|
73 | minHeight: '100%',
|
74 | display: active ? 'block' : 'none'
|
75 | }
|
76 | }, "CONTENT 2");
|
77 | }
|
78 | },
|
79 | test3: {
|
80 | title: 'Tab with scroll!',
|
81 | render: function render(_ref3) {
|
82 | var active = _ref3.active,
|
83 | key = _ref3.key;
|
84 | return active ? React.createElement("div", {
|
85 | id: "test3",
|
86 | key: key
|
87 | }, colours.map(function (colour, i) {
|
88 | return React.createElement("div", {
|
89 | key: colour,
|
90 | style: {
|
91 | background: "#".concat(colour),
|
92 | height: 30 + fibonacci(i + 5) / 10
|
93 | }
|
94 | });
|
95 | })) : null;
|
96 | }
|
97 | },
|
98 | test4: {
|
99 | title: 'Tab title #4',
|
100 | render: function render(_ref4) {
|
101 | var active = _ref4.active,
|
102 | key = _ref4.key;
|
103 | return active ? React.createElement("div", {
|
104 | key: key,
|
105 | id: "test4"
|
106 | }, "CONTENT 4") : null;
|
107 | }
|
108 | },
|
109 | test5: {
|
110 | title: 'Tab title #5',
|
111 | render: function render(_ref5) {
|
112 | var active = _ref5.active,
|
113 | key = _ref5.key;
|
114 | return active ? React.createElement("div", {
|
115 | key: key,
|
116 | id: "test5"
|
117 | }, "CONTENT 5") : null;
|
118 | }
|
119 | },
|
120 | test6: {
|
121 | title: 'Tab title #6',
|
122 | render: function render(_ref6) {
|
123 | var active = _ref6.active,
|
124 | key = _ref6.key;
|
125 | return React.createElement(TabWrapper, {
|
126 | key: key,
|
127 | active: active,
|
128 | render: function render() {
|
129 | return React.createElement("div", null, "CONTENT 6");
|
130 | }
|
131 | });
|
132 | }
|
133 | }
|
134 | };
|
135 | var onSelect = action('onSelect');
|
136 | var content = Object.entries(panels).map(function (_ref7) {
|
137 | var _ref8 = _slicedToArray(_ref7, 2),
|
138 | k = _ref8[0],
|
139 | v = _ref8[1];
|
140 |
|
141 | return React.createElement("div", {
|
142 | key: k,
|
143 | id: k,
|
144 | title: v.title
|
145 | }, v.render);
|
146 | });
|
147 | storiesOf('Basics/Tabs', module).addDecorator(function (s) {
|
148 | return React.createElement("div", {
|
149 | style: {
|
150 | position: 'relative',
|
151 | height: 'calc(100vh - 20px)',
|
152 | width: 'calc(100vw - 20px)',
|
153 | margin: 10
|
154 | }
|
155 | }, s());
|
156 | }).add('stateful - static', function () {
|
157 | return React.createElement(TabsState, {
|
158 | initial: "test2"
|
159 | }, React.createElement("div", {
|
160 | id: "test1",
|
161 | title: "With a function"
|
162 | }, function (_ref9) {
|
163 | var active = _ref9.active,
|
164 | selected = _ref9.selected;
|
165 | return active ? React.createElement("div", null, selected, " is selected") : null;
|
166 | }), React.createElement("div", {
|
167 | id: "test2",
|
168 | title: "With markup"
|
169 | }, React.createElement("div", null, "test2 is always active (but visually hidden)")));
|
170 | }).add('stateful - static with set button text colors', function () {
|
171 | return React.createElement("div", null, React.createElement(TabsState, {
|
172 | initial: "test2"
|
173 | }, React.createElement("div", {
|
174 | id: "test1",
|
175 | title: "With a function",
|
176 | color: "#e00000"
|
177 | }, function (_ref10) {
|
178 | var active = _ref10.active,
|
179 | selected = _ref10.selected;
|
180 | return active ? React.createElement("div", null, selected, " is selected") : null;
|
181 | }), React.createElement("div", {
|
182 | id: "test2",
|
183 | title: "With markup",
|
184 | color: "green"
|
185 | }, React.createElement("div", null, "test2 is always active (but visually hidden)"))));
|
186 | }).add('stateful - static with set backgroundColor', function () {
|
187 | return React.createElement("div", null, React.createElement(TabsState, {
|
188 | initial: "test2",
|
189 | backgroundColor: "rgba(0,0,0,.05)"
|
190 | }, React.createElement("div", {
|
191 | id: "test1",
|
192 | title: "With a function",
|
193 | color: "#e00000"
|
194 | }, function (_ref11) {
|
195 | var active = _ref11.active,
|
196 | selected = _ref11.selected;
|
197 | return active ? React.createElement("div", null, selected, " is selected") : null;
|
198 | }), React.createElement("div", {
|
199 | id: "test2",
|
200 | title: "With markup",
|
201 | color: "green"
|
202 | }, React.createElement("div", null, "test2 is always active (but visually hidden)"))));
|
203 | }).add('stateful - dynamic', function () {
|
204 | return React.createElement(TabsState, {
|
205 | initial: "test3"
|
206 | }, Object.entries(panels).map(function (_ref12) {
|
207 | var _ref13 = _slicedToArray(_ref12, 2),
|
208 | k = _ref13[0],
|
209 | v = _ref13[1];
|
210 |
|
211 | return React.createElement("div", {
|
212 | key: k,
|
213 | id: k,
|
214 | title: v.title
|
215 | }, v.render);
|
216 | }));
|
217 | }).add('stateful - no initial', function () {
|
218 | return React.createElement(TabsState, null, content);
|
219 | }).add('stateless - bordered', function () {
|
220 | return React.createElement(Tabs, {
|
221 | bordered: true,
|
222 | absolute: false,
|
223 | selected: "test3",
|
224 | actions: {
|
225 | onSelect: onSelect
|
226 | }
|
227 | }, content);
|
228 | }).add('stateless - with tools', function () {
|
229 | return React.createElement(Tabs, {
|
230 | selected: "test3",
|
231 | actions: {
|
232 | onSelect: onSelect
|
233 | },
|
234 | tools: React.createElement(Fragment, null, React.createElement("button", {
|
235 | type: "button",
|
236 | onClick: function onClick() {
|
237 | return logger.log('1');
|
238 | }
|
239 | }, "1"), React.createElement("button", {
|
240 | type: "button",
|
241 | onClick: function onClick() {
|
242 | return logger.log('2');
|
243 | }
|
244 | }, "2"))
|
245 | }, content);
|
246 | }).add('stateless - absolute', function () {
|
247 | return React.createElement(Tabs, {
|
248 | absolute: true,
|
249 | selected: "test3",
|
250 | actions: {
|
251 | onSelect: onSelect
|
252 | }
|
253 | }, content);
|
254 | }).add('stateless - absolute bordered', function () {
|
255 | return React.createElement(Tabs, {
|
256 | absolute: true,
|
257 | bordered: true,
|
258 | selected: "test3",
|
259 | actions: {
|
260 | onSelect: onSelect
|
261 | }
|
262 | }, content);
|
263 | }).add('stateless - empty', function () {
|
264 | return React.createElement(Tabs, {
|
265 | actions: {
|
266 | onSelect: onSelect
|
267 | },
|
268 | bordered: true,
|
269 | absolute: true
|
270 | });
|
271 | }); |
\ | No newline at end of file |