Merge pull request #65 from deriv-com/shayan/webrel-2149/implement-ve…

…rtical-tab

Shayan/webrel 2149/implement vertical tab

lib/components/VerticalTab/CollapsibleVerticalTabItem.tsx

@@ -0,0 +1,59 @@
+
+import React, { useState } from 'react';
+import { Text } from '../Text';
+import clsx from 'clsx';
+import { VerticalTabItem, TabItem } from './VerticalTabItem';
+
+type CollapsibleVerticalTabItemProps = {
+    item: TabItem;
+    onSelectItemHandler: (title: string) => void;
+    selectedTab: string;
+    className?: string;
+    iconClassName?: string;
+}
+
+
+const ArrowIcon = ({ is_open }: { is_open: boolean }) => <svg className={clsx('vertical-tab__arrow', {
+    'vertical-tab__arrow--open': is_open,
+})} xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
+    <path d="M8.66699 9.58579L13.9599 4.29289C14.3504 3.90237 14.9836 3.90237 15.3741 4.29289C15.7646 4.68342 15.7646 5.31658 15.3741 5.70711L9.3741 11.7071C8.98358 12.0976 8.35041 12.0976 7.95989 11.7071L1.95989 5.70711C1.56936 5.31658 1.56936 4.68342 1.95989 4.29289C2.35041 3.90237 2.98357 3.90237 3.3741 4.29289L8.66699 9.58579Z" fill="#333333" />
+</svg>;
+
+export const CollapsibleVerticalTabItem = ({
+    item,
+    onSelectItemHandler,
+    selectedTab,
+    className,
+    iconClassName,
+}: CollapsibleVerticalTabItemProps) => {
+    const selectedSubItemSelected = item?.subItems?.find((subItem) => subItem.title === selectedTab)
+    const [open, setOpen] = useState(selectedSubItemSelected ? true : false);
+
+    const onClickHandler = () => {
+        const shouldCollapse = !selectedSubItemSelected;
+        if (shouldCollapse)
+            setOpen(!open);
+    }
+    return (
+        <div
+            key={item.title}
+            className={clsx('collapsible-vertical-tab')}>
+            <div className={clsx('collapsible-vertical-tab__header', {
+                'collapsible-vertical-tab__header--open': selectedSubItemSelected,
+            })}
+                onClick={() => onClickHandler()}
+            >
+                <span className={clsx('vertical-tab__icon', iconClassName)}> {item?.icon}</span>
+                <Text className='vertical-tab__label'>{item.title}</Text>
+                <ArrowIcon is_open={open} />
+            </div>
+            {open && <div className='collapsible-vertical-tab__items'>
+                {item?.subItems?.map((subItem) => {
+                    return (
+                        <VerticalTabItem className={className} selectedTab={selectedTab} key={subItem.title} tab={subItem} onClick={() => onSelectItemHandler(subItem.title)} />
+                    )
+                })}
+            </div>}
+        </div>
+    )
+}

lib/components/VerticalTab/VerticalTab.scss

@@ -0,0 +1,94 @@
+.vertical-tab__wrapper {
+    padding: 8px;
+    display: flex;
+    justify-content: center;
+    gap:25px;
+    @include mobile {
+        flex-direction: column;;
+    }
+}
+
+.vertical-tab {
+    &__items-container{
+        background: #f2f3f4;
+        flex: 1;
+        border-radius: 4px;
+        padding: 8px;
+    }
+
+    &__item {
+        display: flex;
+        padding: 10px 16px;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 4px;
+
+        &:hover{
+            background-color: #e6e9e9;
+        }
+
+        &--active {
+            background-color: #fff;
+            border-left: 4px solid #ff444f;
+            padding-left: 12px;
+
+            &:hover{
+                background-color: #fff;
+            }
+        }
+
+        &--disabled {
+            & > span{
+                color: #999999;
+            }
+
+            &:hover{
+                cursor: unset;
+                background-color: inherit;
+            }
+        }
+    }
+
+    &__icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 16px;
+    }
+
+    &__label {
+        flex:1;
+    }
+
+    &__panel {
+        flex: 2;
+    }
+
+    &__arrow--open{
+        transform: rotate(180deg);
+    }
+}
+
+.collapsible-vertical-tab {
+    &__header {
+        display: flex;
+        padding: 10px 16px;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 4px;
+
+        &--open > :nth-child(2) {
+            font-weight: bold;
+        }
+    }
+
+    &__icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 16px;
+    }
+
+    &__label {
+        flex:1;
+    }
+}
+

lib/components/VerticalTab/VerticalTab.tsx

@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+import clsx from 'clsx';
+import './VerticalTab.scss';
+
+type VerticalTabProps = {
+    className?: string;
+}
+
+export const VerticalTab = memo(({
+    className,
+    children
+}: React.PropsWithChildren<VerticalTabProps>) => {
+    return (
+        <div className={clsx('vertical-tab__wrapper', className)}>
+            {children}
+        </div>
+    );
+})

lib/components/VerticalTab/VerticalTabItem.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import { Text } from '../Text';
+
+export type TabItem = {
+    icon?: React.ReactNode;
+    is_disabled?: boolean;
+    panel?: React.ReactNode;
+    subItems?: {
+        is_disabled?: boolean;
+        panel: React.ReactNode;
+        title: string;
+    }[];
+    title: string;
+}
+
+type VerticalTabItemProps = {
+    tab: TabItem;
+    onClick: (title: string) => void;
+    className?: string;
+    selectedTab: string;
+}
+
+export const VerticalTabItem = ({ tab, onClick, className, selectedTab }: VerticalTabItemProps) => {
+    return (
+        <div
+            className={
+                clsx('vertical-tab__item', {
+                    'vertical-tab__item--active': tab.title === selectedTab,
+                    'vertical-tab__item--disabled': tab.is_disabled
+                }, className)
+            }
+            onClick={() => !tab.is_disabled && onClick(tab.title)}
+        >
+            {tab?.icon && (
+                <span className='vertical-tab__icon'> {tab?.icon}</span>
+            )}
+            <Text as='span' className='vertical-tab__label'>{tab.title}</Text>
+        </div>
+    )
+}

lib/components/VerticalTab/VerticalTabItems.tsx

@@ -0,0 +1,131 @@
+import React, { memo, useEffect, useState } from 'react';
+import { CollapsibleVerticalTabItem } from './CollapsibleVerticalTabItem';
+import { VerticalTabItem, type TabItem } from './VerticalTabItem'
+import clsx from 'clsx';
+
+type VerticalTabItemsProps = {
+    activeTab: string;
+    onSelectItem?: (title: string) => void;
+    wrapperClassName?: string;
+    panelClassName?: string;
+    itemClassName?: string;
+    items: TabItem[];
+    should_have_panel?: boolean;
+}
+
+/**
+ * Component to display the vertical tab items. iit should be wrapperd inside the VerticalTab component
+ * @param {TabItem} items - tab items
+ * @param {string} panelClassName -it applies the classname to the right panel
+ * @param {string} wrapperClassName - it applies the classname to the left side menu container
+ * @param {string} itemClassName - it applies the classname to the each items whether it's sub-item or single item
+ * @param {string} activeTab - indicates the active tab. you can pass the title of the tab
+ * @param {Function} onSelectItem - callback to handle selecting each tab item
+ * @param {boolean} should_have_panel - indicates whether the panel should be displayed or not
+ * @returns {React.JSX.Element} - returns the vertical tab component
+ *
+ * @example
+ * const items = [
+ *     {
+ *      title: 'Item 1',
+ *      icon: Icon,
+ *      panel: <div>Item 1 pane</div>
+ *     },
+ *     {
+ *      title: 'Item 2',
+ *      icon: Icon,
+ *      panel: <div>Item 2 pane</div>,
+ *      subItems: [
+ *          {
+ *              title: 'Item 2.1',
+ *              panel: <div>Item 2.1 pane</div>
+ *          },
+*           {
+ *              title: 'Item 2.2',
+ *              is_disabled: true,
+ *              panel: <div>Item 2.2 pane</div>
+ *          },
+ *      ]
+ *     },
+ *     {
+ *      title: 'Item 3',
+ *      icon: Icon,
+ *      panel: <div>Item 3 pane</div>
+ *     },
+ * ]
+ *
+ * <VerticalTab className='test-1'>
+ *      <VerticalTabItems
+ *          items={items} activeTab='SubItem 2.1'
+ *          onSelectItem={
+ *              (title) => console.log('clicked on:', title)
+ *          }
+ *      />
+ * </VerticalTab>
+ */
+
+export const VerticalTabItems = memo(({
+    items,
+    panelClassName,
+    wrapperClassName,
+    itemClassName,
+    activeTab,
+    should_have_panel = true,
+    onSelectItem }: VerticalTabItemsProps) => {
+    const [selectedTab, setSelectedTab] = useState<string>(activeTab);
+    useEffect(() => {
+        if (activeTab) {
+            setSelectedTab(activeTab);
+        }
+    }, [activeTab]);
+
+    const findActiveTab = (title: string) => {
+        for (const item of items) {
+            if (item?.subItems) {
+                const foundItem = item?.subItems.find((subItem) => subItem.title === title);
+                if (foundItem) {
+                    return foundItem;
+                }
+            } else {
+                if (item.title === title) {
+                    return item;
+                }
+            }
+        }
+    }
+
+    const onSelectItemHandler = (title: string) => {
+        const new_active_tab = findActiveTab(title)?.title;
+        setSelectedTab(() => new_active_tab ?? activeTab);
+        onSelectItem?.(title);
+    }
+
+
+    return (
+        <>
+            <div className={clsx('vertical-tab__items-container', wrapperClassName)}>
+                {items.map((item) => {
+                    if (!item?.subItems) {
+                        return (
+                            <VerticalTabItem className={itemClassName} key={item.title} selectedTab={selectedTab} tab={item} onClick={() => onSelectItemHandler(item.title)} />
+                        )
+                    } else {
+                        return (
+                            <CollapsibleVerticalTabItem
+                                key={item.title}
+                                item={item}
+                                selectedTab={selectedTab}
+                                onSelectItemHandler={onSelectItemHandler}
+                                className={itemClassName}
+                            />
+                        )
+                    }
+                })}
+            </div>
+            {should_have_panel && <div className={clsx('vertical-tab__panel', panelClassName)}>
+                {findActiveTab(selectedTab)?.panel}
+            </div>}
+        </>
+    );
+})
+

lib/components/VerticalTab/index.ts

@@ -0,0 +1,2 @@
+export {VerticalTab} from './VerticalTab'
+export {VerticalTabItems} from './VerticalTabItems'

lib/main.ts

@@ -13,3 +13,4 @@ export { ToggleSwitch } from "./components/ToggleSwitch";
 export { Tooltip } from "./components/Tooltip";
 export { useDevice } from "./hooks/useDevice";
 export { useOnClickOutside } from "./hooks/useOnClickOutside";
+export { VerticalTab, VerticalTabItems } from "./components/VerticalTab";