From 18b1d312e7b1b6b2093e224ac4d9384031b419fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Mon, 15 May 2023 22:25:03 +0300 Subject: [PATCH] Refactor #4391 - For BreadCrumb --- components/doc/breadcrumb/pt/ptdoc.js | 82 ++++++++++++++++ components/doc/breadcrumb/pt/wireframe.js | 13 +++ components/doc/common/apidoc/index.json | 90 +++++++++++++++++ components/lib/breadcrumb/BreadCrumb.js | 103 +++++++++++++++----- components/lib/breadcrumb/BreadCrumbBase.js | 10 +- components/lib/breadcrumb/breadcrumb.d.ts | 50 +++++++++- pages/breadcrumb/index.js | 23 ++++- 7 files changed, 337 insertions(+), 34 deletions(-) create mode 100644 components/doc/breadcrumb/pt/ptdoc.js create mode 100644 components/doc/breadcrumb/pt/wireframe.js diff --git a/components/doc/breadcrumb/pt/ptdoc.js b/components/doc/breadcrumb/pt/ptdoc.js new file mode 100644 index 0000000000..197acd4fc1 --- /dev/null +++ b/components/doc/breadcrumb/pt/ptdoc.js @@ -0,0 +1,82 @@ +import { BreadCrumb } from '../../../lib/breadcrumb/BreadCrumb'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function PTDoc(props) { + const items = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]; + const home = { icon: 'pi pi-home', url: 'https://primereact.org' }; + + const code = { + basic: ` + + `, + javascript: ` +import React from 'react'; +import { BreadCrumb } from 'primereact/breadcrumb'; + +export default function PTDemo() { + const items = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]; + const home = { icon: 'pi pi-home', url: 'https://primereact.org' } + + return ( +
+ ({ + className: props.index === items.length - 1 ? 'font-italic' : undefined + }) + }} + model={items} + home={home} + /> +
+ ) +} + `, + typescript: ` +import React from 'react'; +import { BreadCrumb } from 'primereact/breadcrumb'; +import { MenuItem } from 'primereact/menuitem'; + +export default function PTDemo() { + const items: MenuItem[] = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]; + const home: MenuItem = { icon: 'pi pi-home', url: 'https://primereact.org' } + + return ( +
+ ({ + className: props.index === items.length - 1 ? 'font-italic' : undefined + }) + }} + model={items} + home={home} + /> +
+ ) +} + ` + }; + + return ( + <> + +
+ ({ + className: props.index === items.length - 1 ? 'font-italic' : undefined + }) + }} + model={items} + home={home} + /> +
+ + + ); +} diff --git a/components/doc/breadcrumb/pt/wireframe.js b/components/doc/breadcrumb/pt/wireframe.js new file mode 100644 index 0000000000..98803fb376 --- /dev/null +++ b/components/doc/breadcrumb/pt/wireframe.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { DocSectionText } from '../../common/docsectiontext'; + +export const Wireframe = (props) => { + return ( + <> + +
+ breadcrumb +
+ + ); +}; diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 6165ba875f..35a7a4879f 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -3520,6 +3520,14 @@ "type": "ReactNode", "default": "", "description": "Used to get the child elements of the component." + }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "BreadCrumbPassThroughOptions", + "default": "", + "description": "Uses to pass attributes to DOM elements inside the component." } ] }, @@ -3528,6 +3536,88 @@ "values": [] } } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "values": { + "BreadCrumbPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "props", + "optional": false, + "readonly": false, + "type": "BreadCrumbProps" + } + ], + "callbacks": [] + }, + "BreadCrumbPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "BreadCrumbPassThroughType>", + "description": "Uses to pass attributes to the root's DOM element." + }, + { + "name": "menu", + "optional": true, + "readonly": false, + "type": "BreadCrumbPassThroughType>", + "description": "Uses to pass attributes to the list's DOM element." + }, + { + "name": "menuitem", + "optional": true, + "readonly": false, + "type": "BreadCrumbPassThroughType>", + "description": "Uses to pass attributes to the list item's DOM element." + }, + { + "name": "action", + "optional": true, + "readonly": false, + "type": "BreadCrumbPassThroughType>", + "description": "Uses to pass attributes to the action's DOM element." + }, + { + "name": "icon", + "optional": true, + "readonly": false, + "type": "BreadCrumbPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the icon's DOM element." + }, + { + "name": "label", + "optional": true, + "readonly": false, + "type": "BreadCrumbPassThroughType>", + "description": "Uses to pass attributes to the label's DOM element." + }, + { + "name": "separatorIcon", + "optional": true, + "readonly": false, + "type": "BreadCrumbPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the separator icon's DOM element." + } + ], + "callbacks": [] + } + } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "BreadCrumbPassThroughType": { + "values": "PassThroughType" + } + } } }, "button": { diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js index c360a0f1f5..f37a960555 100644 --- a/components/lib/breadcrumb/BreadCrumb.js +++ b/components/lib/breadcrumb/BreadCrumb.js @@ -1,12 +1,14 @@ import * as React from 'react'; -import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; +import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { BreadCrumbBase } from './BreadCrumbBase'; import { ChevronRightIcon } from '../icons/chevronright'; export const BreadCrumb = React.memo( React.forwardRef((inProps, ref) => { const props = BreadCrumbBase.getProps(inProps); - + const { ptm } = BreadCrumbBase.setMetaData({ + props + }); const elementRef = React.useRef(null); const itemClick = (event, item) => { @@ -38,14 +40,26 @@ export const BreadCrumb = React.memo( const { icon: _icon, target, url, disabled, style, className: _className, template } = home; const className = classNames('p-breadcrumb-home', { 'p-disabled': disabled }, _className); - const icon = IconUtils.getJSXIcon(_icon, { className: 'p-menuitem-icon' }, { props }); - - let content = ( - itemClick(event, home)}> - {icon} - + const iconProps = mergeProps( + { + className: 'p-menuitem-icon' + }, + ptm('icon') + ); + const icon = IconUtils.getJSXIcon(_icon, { ...iconProps }, { props }); + const actionProps = mergeProps( + { + href: url || '#', + className: 'p-menuitem-link', + 'aria-disabled': disabled, + target, + onClick: (event) => itemClick(event, home) + }, + ptm('action') ); + let content = {icon}; + if (template) { const defaultContentOptions = { onClick: (event) => itemClick(event, home), @@ -58,11 +72,15 @@ export const BreadCrumb = React.memo( content = ObjectUtils.getJSXElement(template, home, defaultContentOptions); } - return ( -
  • - {content} -
    • + const menuitemProps = mergeProps( + { + className, + style + }, + ptm('menuitem') ); + + return
  • {content}
    • ; } return null; @@ -70,8 +88,14 @@ export const BreadCrumb = React.memo( const createSeparator = () => { const iconClassName = 'p-breadcrumb-chevron'; - const icon = props.separatorIcon || ; - const separatorIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props }); + const separatorIconProps = mergeProps( + { + className: iconClassName + }, + ptm('separatorIcon') + ); + const icon = props.separatorIcon || ; + const separatorIcon = IconUtils.getJSXIcon(icon, { ...separatorIconProps }, { props }); return separatorIcon; }; @@ -82,12 +106,24 @@ export const BreadCrumb = React.memo( } const className = classNames(item.className, { 'p-disabled': item.disabled }); - const label = item.label && {item.label}; - let content = ( - itemClick(event, item)} aria-disabled={item.disabled}> - {label} - + const labelProps = mergeProps( + { + className: 'p-menuitem-text' + }, + ptm('label') + ); + const label = item.label && {item.label}; + const actionProps = mergeProps( + { + href: item.url || '#', + className: 'p-menuitem-link', + target: item.target, + onClick: (event) => itemClick(event, item), + 'aria-disabled': item.disabled + }, + ptm('action') ); + let content = {label}; if (item.template) { const defaultContentOptions = { @@ -101,11 +137,15 @@ export const BreadCrumb = React.memo( content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions); } - return ( -
  • - {content} -
    • + const menuitemProps = mergeProps( + { + className, + style: item.style + }, + ptm('menuitem') ); + + return
  • {content}
    • ; }; const createMenuitems = () => { @@ -138,15 +178,26 @@ export const BreadCrumb = React.memo( getElement: () => elementRef.current })); - const otherProps = BreadCrumbBase.getOtherProps(props); const className = classNames('p-breadcrumb p-component', props.className); const home = createHome(); const items = createMenuitems(); const separator = createSeparator(); + const menuProps = mergeProps(ptm('menu')); + const rootProps = mergeProps( + { + id: props.id, + ref: elementRef, + className, + style: props.style, + 'aria-label': 'Breadcrumb' + }, + BreadCrumbBase.getOtherProps(props), + ptm('root') + ); return ( -