|
1 |
| -import React, { useEffect, useState } from "react"; |
| 1 | +import React from "react"; |
2 | 2 |
|
3 | 3 | import {
|
4 | 4 | ResponsiveVerticalMenu,
|
@@ -372,83 +372,3 @@ export const MixedIcons = (props: Partial<ResponsiveVerticalMenuProps>) => {
|
372 | 372 | );
|
373 | 373 | };
|
374 | 374 | MixedIcons.storyName = "Mixed Icons";
|
375 |
| - |
376 |
| -type MenuItem = { |
377 |
| - productName: string; |
378 |
| - menuItems?: MenuItem[]; |
379 |
| -}; |
380 |
| - |
381 |
| -const useGetData = () => { |
382 |
| - const [data] = useState<MenuItem[]>([ |
383 |
| - { |
384 |
| - productName: "foo", |
385 |
| - menuItems: [{ productName: "bar" }, { productName: "baz" }], |
386 |
| - }, |
387 |
| - ]); |
388 |
| - return data; |
389 |
| -}; |
390 |
| - |
391 |
| -const usePostData = () => { |
392 |
| - const [postData, setPostData] = useState<MenuItem[]>([]); |
393 |
| - |
394 |
| - useEffect(() => { |
395 |
| - const handle = setTimeout(() => { |
396 |
| - setPostData([ |
397 |
| - { |
398 |
| - productName: "accounting", |
399 |
| - menuItems: [ |
400 |
| - { productName: "payroll" }, |
401 |
| - { productName: "hr" }, |
402 |
| - { productName: "clientmanage" }, |
403 |
| - ], |
404 |
| - }, |
405 |
| - ]); |
406 |
| - }, 5000); |
407 |
| - return () => { |
408 |
| - clearTimeout(handle); |
409 |
| - }; |
410 |
| - }, []); |
411 |
| - return postData; |
412 |
| -}; |
413 |
| - |
414 |
| -const TestMenu = ({ data }: { data: MenuItem[] }) => { |
415 |
| - const postData = usePostData(); |
416 |
| - |
417 |
| - const products = postData.length === 0 ? data : postData; |
418 |
| - |
419 |
| - return ( |
420 |
| - <ResponsiveVerticalMenuProvider> |
421 |
| - <ResponsiveVerticalMenu height="100%"> |
422 |
| - <> |
423 |
| - <ResponsiveVerticalMenuItem |
424 |
| - label="Home" |
425 |
| - id="home" |
426 |
| - icon="home" |
427 |
| - href="#" |
428 |
| - /> |
429 |
| - {products.map((d) => ( |
430 |
| - <ResponsiveVerticalMenuItem |
431 |
| - key={d.productName} |
432 |
| - id={d.productName} |
433 |
| - label={d.productName} |
434 |
| - > |
435 |
| - {d?.menuItems?.map((menuItem) => ( |
436 |
| - <ResponsiveVerticalMenuItem |
437 |
| - key={menuItem.productName} |
438 |
| - id={menuItem.productName} |
439 |
| - label={menuItem.productName} |
440 |
| - /> |
441 |
| - ))} |
442 |
| - </ResponsiveVerticalMenuItem> |
443 |
| - ))} |
444 |
| - </> |
445 |
| - </ResponsiveVerticalMenu> |
446 |
| - </ResponsiveVerticalMenuProvider> |
447 |
| - ); |
448 |
| -}; |
449 |
| - |
450 |
| -export const DelayedMenuItems = () => { |
451 |
| - const data = useGetData(); |
452 |
| - return <TestMenu data={data} />; |
453 |
| -}; |
454 |
| -DelayedMenuItems.storyName = "Delayed Menu Items"; |
0 commit comments