Skip to content

Commit

Permalink
Refactor #4602 - for Toolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
habubey committed Jul 5, 2023
1 parent 6bc739c commit f63a77f
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 27 deletions.
19 changes: 0 additions & 19 deletions components/lib/toolbar/Toolbar.css

This file was deleted.

17 changes: 10 additions & 7 deletions components/lib/toolbar/Toolbar.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import * as React from 'react';
import { classNames, ObjectUtils, mergeProps } from '../utils/Utils';
import { ToolbarBase } from './ToolbarBase';
import { PrimeReactContext } from '../api/Api';
import { useStyle } from '../hooks/Hooks';
import { ObjectUtils, mergeProps } from '../utils/Utils';
import { ToolbarBase } from './ToolbarBase';

export const Toolbar = React.memo(
React.forwardRef((inProps, ref) => {
Expand All @@ -14,7 +15,9 @@ export const Toolbar = React.memo(
const center = ObjectUtils.getJSXElement(props.center, props);
const end = ObjectUtils.getJSXElement(props.right || props.end, props);

const { ptm } = ToolbarBase.setMetaData({
useStyle(ToolbarBase.css.styles, { name: 'primereact_toolbar_style' });

const { ptm, cx } = ToolbarBase.setMetaData({
props
});

Expand All @@ -25,21 +28,21 @@ export const Toolbar = React.memo(

const startProps = mergeProps(
{
className: 'p-toolbar-group-start p-toolbar-group-left'
className: cx('start')
},
ptm('start')
);

const centerProps = mergeProps(
{
className: 'p-toolbar-group-center'
className: cx('center')
},
ptm('center')
);

const endProps = mergeProps(
{
className: 'p-toolbar-group-end p-toolbar-group-right'
className: cx('end')
},
ptm('end')
);
Expand All @@ -49,7 +52,7 @@ export const Toolbar = React.memo(
id: props.id,
ref: elementRef,
style: props.style,
className: classNames('p-toolbar p-component', props.className),
className: cx('root'),
role: 'toolbar'
},
ToolbarBase.getOtherProps(props),
Expand Down
30 changes: 30 additions & 0 deletions components/lib/toolbar/ToolbarBase.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ComponentBase } from '../componentbase/ComponentBase';
import { classNames } from '../utils/utils';

export const ToolbarBase = ComponentBase.extend({
defaultProps: {
Expand All @@ -12,5 +13,34 @@ export const ToolbarBase = ComponentBase.extend({
center: null,
end: null,
children: undefined
},
css: {
classes: {
root: ({ props }) => classNames('p-toolbar p-component', props.className),
start: 'p-toolbar-group-start p-toolbar-group-left',
center: 'p-toolbar-group-center',
end: 'p-toolbar-group-end p-toolbar-group-right'
},
styles: `
.p-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.p-toolbar-group-start,
.p-toolbar-group-center,
.p-toolbar-group-end {
display: flex;
align-items: center;
}
.p-toolbar-group-left,
.p-toolbar-group-right {
display: flex;
align-items: center;
}
`
}
});
5 changes: 5 additions & 0 deletions components/lib/toolbar/toolbar.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,11 @@ export interface ToolbarProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
* @type {ToolbarPassThroughOptions}
*/
pt?: ToolbarPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}

/**
Expand Down
1 change: 0 additions & 1 deletion styles/primereact.css
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@
@import "../components/lib/tabview/TabView.css";
/*@import '../components/lib/terminal/Terminal.css';*/
@import "../components/lib/tieredmenu/TieredMenu.css";
@import "../components/lib/toolbar/Toolbar.css";
@import "../components/lib/tooltip/Tooltip.css";
@import "../components/lib/tree/Tree.css";
@import "../components/lib/treetable/TreeTable.css";
Expand Down

0 comments on commit f63a77f

Please sign in to comment.