From b6e665b7b08e017cd5df1c9ced006e6dee703075 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Fri, 19 May 2023 01:24:39 +0300 Subject: [PATCH] Refactor #4391 - For SlideMenu --- components/doc/common/apidoc/index.json | 171 ++++++++ components/doc/slidemenu/pt/ptdoc.js | 463 ++++++++++++++++++++++ components/doc/slidemenu/pt/wireframe.js | 15 + components/lib/slidemenu/SlideMenu.js | 67 +++- components/lib/slidemenu/SlideMenuBase.js | 10 +- components/lib/slidemenu/SlideMenuSub.js | 78 +++- components/lib/slidemenu/slidemenu.d.ts | 99 ++++- pages/slidemenu/index.js | 23 +- 8 files changed, 901 insertions(+), 25 deletions(-) create mode 100644 components/doc/slidemenu/pt/ptdoc.js create mode 100644 components/doc/slidemenu/pt/wireframe.js diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index b0eae36764..9c5763da5d 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -30950,6 +30950,177 @@ ] } } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "values": { + "SlideMenuPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "props", + "optional": false, + "readonly": false, + "type": "SlideMenuProps" + }, + { + "name": "state", + "optional": false, + "readonly": false, + "type": "SlideMenuState" + }, + { + "name": "context", + "optional": false, + "readonly": false, + "type": "SlideMenuContext" + } + ], + "callbacks": [] + }, + "SlideMenuPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "SlideMenuProps.pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughType>", + "description": "Uses to pass attributes to the root's DOM element." + }, + { + "name": "wrapper", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughType>", + "description": "Uses to pass attributes to the wrapper's DOM element." + }, + { + "name": "content", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughType>", + "description": "Uses to pass attributes to the content's DOM element." + }, + { + "name": "menu", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughType>", + "description": "Uses to pass attributes to the list's DOM element." + }, + { + "name": "menuitem", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughType>", + "description": "Uses to pass attributes to the list item's DOM element." + }, + { + "name": "action", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughType>", + "description": "Uses to pass attributes to the action's DOM element." + }, + { + "name": "icon", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the icon's DOM element." + }, + { + "name": "previous", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughType>", + "description": "Uses to pass attributes to the previous's DOM element." + }, + { + "name": "previousIcon", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the previous icon's DOM element." + }, + { + "name": "previousLabel", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughType>", + "description": "Uses to pass attributes to the previous label's DOM element." + }, + { + "name": "label", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughType>", + "description": "Uses to pass attributes to the label's DOM element." + }, + { + "name": "submenuIcon", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the submenu icon's DOM element." + }, + { + "name": "separator", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughType>", + "description": "Uses to pass attributes to the separator's DOM element." + } + ], + "callbacks": [] + }, + "SlideMenuState": { + "description": "Defines current inline state in SlideMenu component.", + "relatedProp": "", + "props": [ + { + "name": "visible", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Current visible state as a boolean." + }, + { + "name": "level", + "optional": false, + "readonly": false, + "type": "number", + "description": "Current level state as a number." + } + ], + "callbacks": [] + }, + "SlideMenuContext": { + "description": "Defines current options in SlideMenu component.", + "relatedProp": "", + "props": [ + { + "name": "active", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Current active state of menuitem as a boolean." + } + ], + "callbacks": [] + } + } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "SlideMenuPassThroughType": { + "values": "PassThroughType" + } + } } }, "slider": { diff --git a/components/doc/slidemenu/pt/ptdoc.js b/components/doc/slidemenu/pt/ptdoc.js new file mode 100644 index 0000000000..86bb917424 --- /dev/null +++ b/components/doc/slidemenu/pt/ptdoc.js @@ -0,0 +1,463 @@ +import { SlideMenu } from '../../../lib/slidemenu/SlideMenu'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function PTDoc(props) { + const items = [ + { + label: 'File', + icon: 'pi pi-fw pi-file', + items: [ + { + label: 'New', + icon: 'pi pi-fw pi-plus', + items: [ + { + label: 'Bookmark', + icon: 'pi pi-fw pi-bookmark' + }, + { + label: 'Video', + icon: 'pi pi-fw pi-video' + } + ] + }, + { + label: 'Delete', + icon: 'pi pi-fw pi-trash' + }, + { + separator: true + }, + { + label: 'Export', + icon: 'pi pi-fw pi-external-link' + } + ] + }, + { + label: 'Edit', + icon: 'pi pi-fw pi-pencil', + items: [ + { + label: 'Left', + icon: 'pi pi-fw pi-align-left' + }, + { + label: 'Right', + icon: 'pi pi-fw pi-align-right' + }, + { + label: 'Center', + icon: 'pi pi-fw pi-align-center' + }, + { + label: 'Justify', + icon: 'pi pi-fw pi-align-justify' + } + ] + }, + { + label: 'Users', + icon: 'pi pi-fw pi-user', + items: [ + { + label: 'New', + icon: 'pi pi-fw pi-user-plus' + }, + { + label: 'Delete', + icon: 'pi pi-fw pi-user-minus' + }, + { + label: 'Search', + icon: 'pi pi-fw pi-users', + items: [ + { + label: 'Filter', + icon: 'pi pi-fw pi-filter', + items: [ + { + label: 'Print', + icon: 'pi pi-fw pi-print' + } + ] + }, + { + icon: 'pi pi-fw pi-bars', + label: 'List' + } + ] + } + ] + }, + { + label: 'Events', + icon: 'pi pi-fw pi-calendar', + items: [ + { + label: 'Edit', + icon: 'pi pi-fw pi-pencil', + items: [ + { + label: 'Save', + icon: 'pi pi-fw pi-calendar-plus' + }, + { + label: 'Delete', + icon: 'pi pi-fw pi-calendar-minus' + } + ] + }, + { + label: 'Archive', + icon: 'pi pi-fw pi-calendar-times', + items: [ + { + label: 'Remove', + icon: 'pi pi-fw pi-calendar-minus' + } + ] + } + ] + }, + { + separator: true + }, + { + label: 'Quit', + icon: 'pi pi-fw pi-power-off' + } + ]; + + const code = { + basic: ` + ({ className: context.active ? 'bg-primary-200' : undefined }) + }} +> +`, + javascript: ` +import React from 'react'; +import { SlideMenu } from 'primereact/slidemenu'; + +export default function PTDemo() { + const items = [ + { + label:'File', + icon:'pi pi-fw pi-file', + items:[ + { + label:'New', + icon:'pi pi-fw pi-plus', + items:[ + { + label:'Bookmark', + icon:'pi pi-fw pi-bookmark' + }, + { + label:'Video', + icon:'pi pi-fw pi-video' + }, + + ] + }, + { + label:'Delete', + icon:'pi pi-fw pi-trash' + }, + { + separator:true + }, + { + label:'Export', + icon:'pi pi-fw pi-external-link' + } + ] + }, + { + label:'Edit', + icon:'pi pi-fw pi-pencil', + items:[ + { + label:'Left', + icon:'pi pi-fw pi-align-left' + }, + { + label:'Right', + icon:'pi pi-fw pi-align-right' + }, + { + label:'Center', + icon:'pi pi-fw pi-align-center' + }, + { + label:'Justify', + icon:'pi pi-fw pi-align-justify' + }, + + ] + }, + { + label:'Users', + icon:'pi pi-fw pi-user', + items:[ + { + label:'New', + icon:'pi pi-fw pi-user-plus', + + }, + { + label:'Delete', + icon:'pi pi-fw pi-user-minus', + + }, + { + label:'Search', + icon:'pi pi-fw pi-users', + items:[ + { + label:'Filter', + icon:'pi pi-fw pi-filter', + items:[ + { + label:'Print', + icon:'pi pi-fw pi-print' + } + ] + }, + { + icon:'pi pi-fw pi-bars', + label:'List' + } + ] + } + ] + }, + { + label:'Events', + icon:'pi pi-fw pi-calendar', + items:[ + { + label:'Edit', + icon:'pi pi-fw pi-pencil', + items:[ + { + label:'Save', + icon:'pi pi-fw pi-calendar-plus' + }, + { + label:'Delete', + icon:'pi pi-fw pi-calendar-minus' + } + ] + }, + { + label:'Archive', + icon:'pi pi-fw pi-calendar-times', + items:[ + { + label:'Remove', + icon:'pi pi-fw pi-calendar-minus' + } + ] + } + ] + }, + { + separator:true + }, + { + label:'Quit', + icon:'pi pi-fw pi-power-off' + } + ]; + + return ( +
+ ({ className: context.active ? 'bg-primary-200' : undefined }) + }} + > +
+ ) +} + `, + typescript: ` +import React from 'react'; +import { SlideMenu } from 'primereact/slidemenu'; +import { MenuItem } from 'primereact/menuitem'; + +export default function PTDemo() { + const items: MenuItem[] = [ + { + label:'File', + icon:'pi pi-fw pi-file', + items:[ + { + label:'New', + icon:'pi pi-fw pi-plus', + items:[ + { + label:'Bookmark', + icon:'pi pi-fw pi-bookmark' + }, + { + label:'Video', + icon:'pi pi-fw pi-video' + }, + + ] + }, + { + label:'Delete', + icon:'pi pi-fw pi-trash' + }, + { + separator:true + }, + { + label:'Export', + icon:'pi pi-fw pi-external-link' + } + ] + }, + { + label:'Edit', + icon:'pi pi-fw pi-pencil', + items:[ + { + label:'Left', + icon:'pi pi-fw pi-align-left' + }, + { + label:'Right', + icon:'pi pi-fw pi-align-right' + }, + { + label:'Center', + icon:'pi pi-fw pi-align-center' + }, + { + label:'Justify', + icon:'pi pi-fw pi-align-justify' + }, + + ] + }, + { + label:'Users', + icon:'pi pi-fw pi-user', + items:[ + { + label:'New', + icon:'pi pi-fw pi-user-plus', + + }, + { + label:'Delete', + icon:'pi pi-fw pi-user-minus', + + }, + { + label:'Search', + icon:'pi pi-fw pi-users', + items:[ + { + label:'Filter', + icon:'pi pi-fw pi-filter', + items:[ + { + label:'Print', + icon:'pi pi-fw pi-print' + } + ] + }, + { + icon:'pi pi-fw pi-bars', + label:'List' + } + ] + } + ] + }, + { + label:'Events', + icon:'pi pi-fw pi-calendar', + items:[ + { + label:'Edit', + icon:'pi pi-fw pi-pencil', + items:[ + { + label:'Save', + icon:'pi pi-fw pi-calendar-plus' + }, + { + label:'Delete', + icon:'pi pi-fw pi-calendar-minus' + } + ] + }, + { + label:'Archive', + icon:'pi pi-fw pi-calendar-times', + items:[ + { + label:'Remove', + icon:'pi pi-fw pi-calendar-minus' + } + ] + } + ] + }, + { + separator:true + }, + { + label:'Quit', + icon:'pi pi-fw pi-power-off' + } + ]; + + return ( +
+ ({ className: context.active ? 'bg-primary-200' : undefined }) + }} + > +
+ ) +} + ` + }; + + return ( + <> + +
+ ({ className: context.active ? 'bg-primary-200' : undefined }) + }} + > +
+ + + ); +} diff --git a/components/doc/slidemenu/pt/wireframe.js b/components/doc/slidemenu/pt/wireframe.js new file mode 100644 index 0000000000..5d8b193b08 --- /dev/null +++ b/components/doc/slidemenu/pt/wireframe.js @@ -0,0 +1,15 @@ + +import React from 'react'; +import { DocSectionText } from '../../common/docsectiontext'; + +export const Wireframe = (props) => { + + return ( + <> + +
+ slidemenu +
+ + ); +}; \ No newline at end of file diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js index 2132470f2e..b0b1109ae1 100644 --- a/components/lib/slidemenu/SlideMenu.js +++ b/components/lib/slidemenu/SlideMenu.js @@ -4,7 +4,7 @@ import { CSSTransition } from '../csstransition/CSSTransition'; import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; -import { classNames, DomHandler, IconUtils, ZIndexUtils } from '../utils/Utils'; +import { classNames, DomHandler, IconUtils, mergeProps, ZIndexUtils } from '../utils/Utils'; import { SlideMenuBase } from './SlideMenuBase'; import { SlideMenuSub } from './SlideMenuSub'; import { ChevronLeftIcon } from '../icons/chevronleft'; @@ -15,6 +15,13 @@ export const SlideMenu = React.memo( const [levelState, setLevelState] = React.useState(0); const [visibleState, setVisibleState] = React.useState(false); + const { ptm } = SlideMenuBase.setMetaData({ + props, + state: { + visible: visibleState, + level: levelState + } + }); const menuRef = React.useRef(null); const targetRef = React.useRef(null); const backward = React.useRef(null); @@ -115,19 +122,33 @@ export const SlideMenu = React.memo( }); const iconClassName = 'p-slidemenu-backward-icon'; - const icon = props.backIcon || ; - const backIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props }); + const previousIconProps = mergeProps( + { + className: iconClassName + }, + ptm('previousIcon') + ); + const icon = props.backIcon || ; + const backIcon = IconUtils.getJSXIcon(icon, { ...previousIconProps }, { props }); + const previousLabelProps = mergeProps(ptm('previousLabel')); + const previousProps = mergeProps( + { + ref: backward, + className, + onClick: (e) => navigateBack(e) + }, + ptm('previous') + ); return ( -
+
{backIcon} - {props.backLabel} + {props.backLabel}
); }; const createElement = () => { - const otherProps = SlideMenuBase.getOtherProps(props); const className = classNames( 'p-slidemenu p-component', { @@ -137,6 +158,33 @@ export const SlideMenu = React.memo( ); const wrapperStyle = { height: props.viewportHeight + 'px' }; const backward = createBackward(); + const rootProps = mergeProps( + { + ref: menuRef, + id: props.id, + className, + style: props.style, + onClick: (e) => onPanelClick(e) + }, + SlideMenuBase.getOtherProps(props), + ptm('root') + ); + + const wrapperProps = mergeProps( + { + className: "p-slidemenu-wrapper", + style: wrapperStyle + }, + ptm('wrapper') + ); + + const contentProps = mergeProps( + { + ref: slideMenuContent, + className: "p-slidemenu-content" + }, + ptm('content') + ); return ( -
-
-
+
+
+
{backward} diff --git a/components/lib/slidemenu/SlideMenuBase.js b/components/lib/slidemenu/SlideMenuBase.js index 3ddd10c18d..863f1be863 100644 --- a/components/lib/slidemenu/SlideMenuBase.js +++ b/components/lib/slidemenu/SlideMenuBase.js @@ -1,6 +1,6 @@ -import { ObjectUtils } from '../utils/Utils'; +import { ComponentBase } from '../componentbase/ComponentBase'; -export const SlideMenuBase = { +export const SlideMenuBase = ComponentBase.extend({ defaultProps: { __TYPE: 'SlideMenu', appendTo: null, @@ -23,7 +23,5 @@ export const SlideMenuBase = { transitionOptions: null, viewportHeight: 175, children: undefined - }, - getProps: (props) => ObjectUtils.getMergedProps(props, SlideMenuBase.defaultProps), - getOtherProps: (props) => ObjectUtils.getDiffProps(props, SlideMenuBase.defaultProps) -}; + } +}); diff --git a/components/lib/slidemenu/SlideMenuSub.js b/components/lib/slidemenu/SlideMenuSub.js index 80fcd4f589..24d669754c 100644 --- a/components/lib/slidemenu/SlideMenuSub.js +++ b/components/lib/slidemenu/SlideMenuSub.js @@ -1,11 +1,19 @@ import * as React from 'react'; -import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; +import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { AngleRightIcon } from '../icons/angleright'; export const SlideMenuSub = React.memo((props) => { const [activeItemState, setActiveItemState] = React.useState(null); const [renderSubMenu, setRenderSubMenu] = React.useState({}); + const getPTOptions = (item, key) => { + return props.ptm(key, { + context: { + active: activeItemState === item + } + }); + }; + const onItemClick = (event, item, index) => { if (item.disabled) { event.preventDefault(); @@ -35,8 +43,15 @@ export const SlideMenuSub = React.memo((props) => { const createSeparator = (index) => { const key = 'separator_' + index; + const separatorProps = mergeProps( + { + key, + className: "p-menu-separator" + }, + props.ptm('separator') + ); - return
  • ; + return
  • ; }; const createSubmenu = (item, index) => { @@ -53,6 +68,7 @@ export const SlideMenuSub = React.memo((props) => { onForward={props.onForward} parentActive={item === activeItemState} submenuIcon={props.submenuIcon} + ptm={props.ptm} /> ); } @@ -73,13 +89,42 @@ export const SlideMenuSub = React.memo((props) => { const active = activeItemState === item; const className = classNames('p-menuitem', { 'p-menuitem-active': active, 'p-disabled': item.disabled }, item.className); const iconClassName = classNames('p-menuitem-icon', item.icon); - const icon = IconUtils.getJSXIcon(item.icon, { className: 'p-menuitem-icon' }, { props: props.menuProps }); + const iconProps = mergeProps( + { + className: 'p-menuitem-icon' + }, + getPTOptions(item, 'icon') + ); + const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props: props.menuProps }); const submenuIconClassName = 'p-submenu-icon'; - const submenuIcon = item.items && IconUtils.getJSXIcon(props.submenuIcon || , { className: submenuIconClassName }, { props }); - const label = item.label && {item.label}; + const submenuIconProps = mergeProps( + { + className: submenuIconClassName + }, + getPTOptions(item, 'submenuIcon') + ); + const labelProps = mergeProps( + { + className: "p-menuitem-text" + }, + getPTOptions(item, 'label') + ); + const submenuIcon = item.items && IconUtils.getJSXIcon(props.submenuIcon || , { ...submenuIconProps }, { props }); + const label = item.label && {item.label}; const submenu = createSubmenu(item, index); + const actionProps = mergeProps( + { + href: item.url || '#', + className: "p-menuitem-link", + target: item.target, + onClick: (event) => onItemClick(event, item, index), + 'aria-disabled': item.disabled + }, + getPTOptions(item, 'action') + ); + let content = ( - onItemClick(event, item, index)} aria-disabled={item.disabled}> + {icon} {label} {submenuIcon} @@ -101,8 +146,18 @@ export const SlideMenuSub = React.memo((props) => { content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions); } + const menuitemProps = mergeProps( + { + id: item.id, + key, + className, + style: item.style + }, + getPTOptions(item, 'menuitem') + ) + return ( -
  • +
  • {content} {submenu}
    • @@ -130,9 +185,16 @@ export const SlideMenuSub = React.memo((props) => { 'p-active-submenu': props.parentActive }); const items = createItems(); + const menuProps = mergeProps( + { + className, + style + }, + props.ptm('menu') + ) return ( -
      +
        {items}
      ); diff --git a/components/lib/slidemenu/slidemenu.d.ts b/components/lib/slidemenu/slidemenu.d.ts index 6f84ff425a..cd73b29d84 100644 --- a/components/lib/slidemenu/slidemenu.d.ts +++ b/components/lib/slidemenu/slidemenu.d.ts @@ -10,7 +10,104 @@ import * as React from 'react'; import { CSSTransitionProps } from '../csstransition'; import { MenuItem } from '../menuitem'; -import { IconType } from '../utils/utils'; +import { IconType, PassThroughType } from '../utils/utils'; + +export declare type SlideMenuPassThroughType = PassThroughType; + +/** + * Custom passthrough(pt) option method. + */ +export interface SlideMenuPassThroughMethodOptions { + props: SlideMenuProps; + state: SlideMenuState; + context: SlideMenuContext; +} + +/** + * Custom passthrough(pt) options. + * @see {@link SlideMenuProps.pt} + */ +export interface SlideMenuPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: SlideMenuPassThroughType>; + /** + * Uses to pass attributes to the wrapper's DOM element. + */ + wrapper?: SlideMenuPassThroughType>; + /** + * Uses to pass attributes to the content's DOM element. + */ + content?: SlideMenuPassThroughType>; + /** + * Uses to pass attributes to the list's DOM element. + */ + menu?: SlideMenuPassThroughType>; + /** + * Uses to pass attributes to the list item's DOM element. + */ + menuitem?: SlideMenuPassThroughType>; + /** + * Uses to pass attributes to the action's DOM element. + */ + action?: SlideMenuPassThroughType>; + /** + * Uses to pass attributes to the icon's DOM element. + */ + icon?: SlideMenuPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the previous's DOM element. + */ + previous?: SlideMenuPassThroughType>; + /** + * Uses to pass attributes to the previous icon's DOM element. + */ + previousIcon?: SlideMenuPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the previous label's DOM element. + */ + previousLabel?: SlideMenuPassThroughType>; + /** + * Uses to pass attributes to the label's DOM element. + */ + label?: SlideMenuPassThroughType>; + /** + * Uses to pass attributes to the submenu icon's DOM element. + */ + submenuIcon?: SlideMenuPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the separator's DOM element. + */ + separator?: SlideMenuPassThroughType>; +} + +/** + * Defines current inline state in SlideMenu component. + */ +export interface SlideMenuState { + /** + * Current visible state as a boolean. + * @defaultValue false + */ + visible: boolean; + /** + * Current level state as a number. + * @defaultValue 0 + */ + level: number; +} + +/** + * Defines current options in SlideMenu component. + */ +export interface SlideMenuContext { + /** + * Current active state of menuitem as a boolean. + * @defaultValue false + */ + active: boolean; +} /** * Custom navigate event diff --git a/pages/slidemenu/index.js b/pages/slidemenu/index.js index 470f0efda7..12a8ae05a9 100644 --- a/pages/slidemenu/index.js +++ b/pages/slidemenu/index.js @@ -1,3 +1,6 @@ +import DocApiTable from '../../components/doc/common/docapitable'; +import { PTDoc } from '../../components/doc/slidemenu/pt/ptdoc'; +import { Wireframe } from '../../components/doc/slidemenu/pt/wireframe'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/slidemenu/accessibilitydoc'; import { BasicDoc } from '../../components/doc/slidemenu/basicdoc'; @@ -33,8 +36,26 @@ const SlideMenuDemo = () => { component: AccessibilityDoc } ]; +const ptDocs = [ + { + id: 'pt.wireframe', + label: 'Wireframe', + component: Wireframe + }, + { + id: 'pt.slidemenu.options', + label: 'SlideMenu PT Options', + component: DocApiTable + }, + { + id: 'pt.demo', + label: 'Example', + component: PTDoc + } +]; - return ; + + return ; }; export default SlideMenuDemo;