1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports["default"] = void 0;
|
9 |
|
10 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11 |
|
12 | var _react = _interopRequireDefault(require("react"));
|
13 |
|
14 | var _random = _interopRequireDefault(require("lodash/random"));
|
15 |
|
16 | var _Story = _interopRequireDefault(require("@lskjs/dev/Story"));
|
17 |
|
18 | var _Avatar = _interopRequireDefault(require("./Avatar"));
|
19 |
|
20 | var rndNum = (0, _random["default"])(99);
|
21 | var avatarImg = "https://randomuser.me/api/portraits/men/".concat(rndNum, ".jpg");
|
22 | var smallImg = 'http://placeimg.com/32/32/people';
|
23 | var largeImg = 'http://placeimg.com/1920/1920/people';
|
24 | var noProportionalImg = 'http://placeimg.com/640/320/people';
|
25 |
|
26 | var user = function user() {
|
27 | return {
|
28 | id: (0, _random["default"])(99),
|
29 | title: 'John Smith',
|
30 | src: "https://randomuser.me/api/portraits/men/".concat((0, _random["default"])(99), ".jpg")
|
31 | };
|
32 | };
|
33 |
|
34 | var _default = function _default(_ref) {
|
35 | var storiesOf = _ref.storiesOf;
|
36 | return storiesOf('avatar/Avatar').add('Default as img (title,src)', function () {
|
37 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement(_Avatar["default"], {
|
38 | title: "John Smith",
|
39 | src: avatarImg
|
40 | }));
|
41 | }).add('Alternative as User (name,avatar)', function () {
|
42 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement(_Avatar["default"], {
|
43 | name: "John Smith",
|
44 | avatar: avatarImg
|
45 | }));
|
46 | }).add('Empty', function () {
|
47 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement(_Avatar["default"], null));
|
48 | }).add('props.backgroundColor', function () {
|
49 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement(_Avatar["default"], {
|
50 | backgroundColor: "#A7226E",
|
51 | title: "Purple"
|
52 | }), _react["default"].createElement(_Avatar["default"], {
|
53 | backgroundColor: "#EC2049",
|
54 | title: "Pink"
|
55 | }), _react["default"].createElement(_Avatar["default"], {
|
56 | backgroundColor: "#F26B38",
|
57 | title: "Orange"
|
58 | }), _react["default"].createElement(_Avatar["default"], {
|
59 | backgroundColor: "#F7DB4F",
|
60 | title: "Yellow"
|
61 | }), _react["default"].createElement(_Avatar["default"], {
|
62 | backgroundColor: "#2F9599",
|
63 | title: "Blue"
|
64 | }));
|
65 | }).add('Empty avatar, colored by random ', function () {
|
66 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement(_Avatar["default"], null), _react["default"].createElement(_Avatar["default"], null), _react["default"].createElement(_Avatar["default"], null), _react["default"].createElement(_Avatar["default"], null));
|
67 | }).add('Colored by title', function () {
|
68 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement("p", null, "Any titles:"), _react["default"].createElement(_Avatar["default"], {
|
69 | title: "user 1"
|
70 | }), _react["default"].createElement(_Avatar["default"], {
|
71 | title: "user 2"
|
72 | }), _react["default"].createElement(_Avatar["default"], {
|
73 | title: "user 3"
|
74 | }), _react["default"].createElement(_Avatar["default"], {
|
75 | title: "user 4"
|
76 | }), _react["default"].createElement("p", null, "Same titles:"), _react["default"].createElement(_Avatar["default"], {
|
77 | title: "user 1"
|
78 | }), _react["default"].createElement(_Avatar["default"], {
|
79 | title: "user 2"
|
80 | }), _react["default"].createElement(_Avatar["default"], {
|
81 | title: "user 3"
|
82 | }), _react["default"].createElement(_Avatar["default"], {
|
83 | title: "user 4"
|
84 | }));
|
85 | }).add('Colored by id', function () {
|
86 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement("p", null, "Any users:"), _react["default"].createElement(_Avatar["default"], {
|
87 | title: "user 1",
|
88 | id: 1
|
89 | }), _react["default"].createElement(_Avatar["default"], {
|
90 | title: "user 2",
|
91 | id: 2
|
92 | }), _react["default"].createElement(_Avatar["default"], {
|
93 | title: "user 3",
|
94 | id: "user3"
|
95 | }), _react["default"].createElement(_Avatar["default"], {
|
96 | title: "user 4",
|
97 | id: null
|
98 | }), _react["default"].createElement("p", null, "Same ids:"), _react["default"].createElement(_Avatar["default"], {
|
99 | title: "name 1",
|
100 | id: 1
|
101 | }), _react["default"].createElement(_Avatar["default"], {
|
102 | title: "name 2",
|
103 | id: 1
|
104 | }), _react["default"].createElement(_Avatar["default"], {
|
105 | title: "name 3",
|
106 | id: 1
|
107 | }));
|
108 | }).add('No image', function () {
|
109 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement(_Avatar["default"], {
|
110 | title: "John Smith"
|
111 | }), _react["default"].createElement(_Avatar["default"], {
|
112 | title: "John Smith",
|
113 | textScale: 0.5
|
114 | }), _react["default"].createElement(_Avatar["default"], {
|
115 | title: "John Smith",
|
116 | textScale: 2
|
117 | }), _react["default"].createElement(_Avatar["default"], {
|
118 | title: "John Smith",
|
119 | textScale: 4
|
120 | }));
|
121 | }).add('Size', function () {
|
122 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement(_Avatar["default"], user()), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
123 | size: 32
|
124 | })), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
125 | size: 64
|
126 | })), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
127 | size: 100
|
128 | })), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
129 | width: 100,
|
130 | height: 50
|
131 | })), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
132 | width: 50,
|
133 | height: 100
|
134 | })));
|
135 | }).add('Custom styles', function () {
|
136 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement("div", null, _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
137 | style: {
|
138 | margin: 10
|
139 | }
|
140 | })), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
141 | style: {
|
142 | padding: 10
|
143 | }
|
144 | })), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
145 | style: {
|
146 | border: '4px solid rgb(244, 67, 54)'
|
147 | }
|
148 | })), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
149 | style: {
|
150 | border: '4px solid rgba(128, 128, 128, 0.5)'
|
151 | }
|
152 | })), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
153 | style: {
|
154 | border: '4px solid rgba(128, 128, 128, 0.5)'
|
155 | },
|
156 | src: "//broken.site/img.png"
|
157 | }))), _react["default"].createElement("div", null, _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
158 | innerStyle: {
|
159 | boxShadow: '1px 1px 10px 2px #333'
|
160 | }
|
161 | })), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
162 | innerStyle: {
|
163 | filter: 'grayscale(100%)'
|
164 | }
|
165 | })), _react["default"].createElement(_Avatar["default"], {
|
166 | id: (0, _random["default"])(99),
|
167 | title: 'John Smith',
|
168 | innerStyle: {
|
169 | border: '4px solid rgb(244, 67, 54)'
|
170 | }
|
171 | }), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
172 | innerStyle: {
|
173 | border: '4px solid rgba(128, 128, 128, 0.5)'
|
174 | },
|
175 | src: "//broken.site/img.png"
|
176 | })), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
177 | innerStyle: {
|
178 | border: '2px solid #4CAF50'
|
179 | }
|
180 | })), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
181 | innerStyle: {
|
182 | border: '4px solid #F44336'
|
183 | }
|
184 | }))));
|
185 | }).add('Badge', function () {
|
186 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement(_Avatar["default"], user(), _react["default"].createElement(_Avatar["default"].Badge, {
|
187 | left: true,
|
188 | top: true
|
189 | }, _react["default"].createElement("div", {
|
190 | style: {
|
191 | width: 10,
|
192 | height: 10,
|
193 | backgroundColor: '#4CAF50',
|
194 | borderRadius: '50%',
|
195 | border: '2px solid #fff'
|
196 | }
|
197 | }))), _react["default"].createElement(_Avatar["default"], {
|
198 | title: "Offline Smith"
|
199 | }, _react["default"].createElement(_Avatar["default"].Badge, {
|
200 | right: true,
|
201 | bottom: true
|
202 | }, _react["default"].createElement("div", {
|
203 | style: {
|
204 | width: 10,
|
205 | height: 10,
|
206 | backgroundColor: '#F44336',
|
207 | borderRadius: '50%',
|
208 | border: '2px solid #fff'
|
209 | }
|
210 | }))), _react["default"].createElement(_Avatar["default"], {
|
211 | size: 100,
|
212 | title: "Offline Smith"
|
213 | }, _react["default"].createElement(_Avatar["default"].Badge, {
|
214 | right: true,
|
215 | bottom: true
|
216 | }, _react["default"].createElement("div", {
|
217 | style: {
|
218 | width: 10,
|
219 | height: 10,
|
220 | backgroundColor: '#F44336',
|
221 | borderRadius: '50%',
|
222 | border: '2px solid #fff'
|
223 | }
|
224 | }))), _react["default"].createElement(_Avatar["default"], {
|
225 | size: 200,
|
226 | title: "Offline Smith"
|
227 | }, _react["default"].createElement(_Avatar["default"].Badge, {
|
228 | right: true,
|
229 | bottom: true
|
230 | }, _react["default"].createElement("div", {
|
231 | style: {
|
232 | width: 10,
|
233 | height: 10,
|
234 | backgroundColor: '#F44336',
|
235 | borderRadius: '50%',
|
236 | border: '2px solid #fff'
|
237 | }
|
238 | }))), _react["default"].createElement(_Avatar["default"], null, _react["default"].createElement(_Avatar["default"].Badge, {
|
239 | left: true,
|
240 | top: true
|
241 | }, _react["default"].createElement("div", {
|
242 | style: {
|
243 | width: 10,
|
244 | height: 10,
|
245 | backgroundColor: '#4CAF50',
|
246 | borderRadius: '50%',
|
247 | border: '2px solid #fff'
|
248 | }
|
249 | })), _react["default"].createElement(_Avatar["default"].Badge, {
|
250 | right: true,
|
251 | top: true
|
252 | }, _react["default"].createElement("div", {
|
253 | style: {
|
254 | width: 10,
|
255 | height: 10,
|
256 | backgroundColor: '#F44336',
|
257 | borderRadius: '50%',
|
258 | border: '2px solid #fff'
|
259 | }
|
260 | })), _react["default"].createElement(_Avatar["default"].Badge, {
|
261 | left: true,
|
262 | bottom: true
|
263 | }, _react["default"].createElement("div", {
|
264 | style: {
|
265 | width: 10,
|
266 | height: 10,
|
267 | backgroundColor: '#574caf',
|
268 | borderRadius: '50%',
|
269 | border: '2px solid #fff'
|
270 | }
|
271 | })), _react["default"].createElement(_Avatar["default"].Badge, {
|
272 | right: true,
|
273 | bottom: true
|
274 | }, _react["default"].createElement("div", {
|
275 | style: {
|
276 | width: 10,
|
277 | height: 10,
|
278 | backgroundColor: '#c6972f',
|
279 | borderRadius: '50%',
|
280 | border: '2px solid #fff'
|
281 | }
|
282 | }))), _react["default"].createElement(_Avatar["default"], null, _react["default"].createElement("div", {
|
283 | style: {
|
284 | width: 10,
|
285 | height: 10,
|
286 | backgroundColor: '#F44336',
|
287 | borderRadius: '50%',
|
288 | position: 'absolute',
|
289 | right: '24px',
|
290 | bottom: '24px',
|
291 | border: '2px solid #fff'
|
292 | }
|
293 | })));
|
294 | }).add('Shape', function () {
|
295 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
296 | shape: "circle"
|
297 | })), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
298 | shape: "square"
|
299 | })), _react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, user(), {
|
300 | shape: "rounded"
|
301 | })));
|
302 | }).add('Failed img', function () {
|
303 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement(_Avatar["default"], {
|
304 | title: "John Smith",
|
305 | src: "/failed-img.png"
|
306 | }));
|
307 | }).add('No proportional', function () {
|
308 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement(_Avatar["default"], {
|
309 | title: "John Smith",
|
310 | src: smallImg
|
311 | }), _react["default"].createElement(_Avatar["default"], {
|
312 | title: "John Smith",
|
313 | src: largeImg
|
314 | }), _react["default"].createElement(_Avatar["default"], {
|
315 | title: "John Smith",
|
316 | src: noProportionalImg
|
317 | }), _react["default"].createElement(_Avatar["default"], {
|
318 | title: "John Smith",
|
319 | src: noProportionalImg,
|
320 | width: 128,
|
321 | height: 64
|
322 | }), _react["default"].createElement(_Avatar["default"], {
|
323 | title: "John Smith",
|
324 | src: noProportionalImg,
|
325 | shape: "rounded",
|
326 | width: 128,
|
327 | height: 64
|
328 | }));
|
329 | }).add('With tag a', function () {
|
330 | return _react["default"].createElement(_Story["default"], null, _react["default"].createElement("a", {
|
331 | href: "#"
|
332 | }, _react["default"].createElement(_Avatar["default"], user())));
|
333 | });
|
334 |
|
335 |
|
336 |
|
337 |
|
338 |
|
339 |
|
340 |
|
341 |
|
342 |
|
343 |
|
344 |
|
345 |
|
346 |
|
347 |
|
348 |
|
349 |
|
350 |
|
351 |
|
352 |
|
353 |
|
354 |
|
355 |
|
356 |
|
357 | };
|
358 |
|
359 | exports["default"] = _default;
|
360 |
|
\ | No newline at end of file |