Skip to content

Commit

Permalink
Refactor #4602 - For TreeTable
Browse files Browse the repository at this point in the history
  • Loading branch information
ulasturann committed Aug 8, 2023
1 parent 4791625 commit 1f6b6ec
Show file tree
Hide file tree
Showing 12 changed files with 342 additions and 286 deletions.
5 changes: 5 additions & 0 deletions components/lib/tabview/tabview.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,11 @@ export interface TabPanelProps {
* @type {TabPanelPassThroughOptions}
*/
pt?: TabPanelPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}

/**
Expand Down
128 changes: 0 additions & 128 deletions components/lib/treetable/TreeTable.css

This file was deleted.

67 changes: 23 additions & 44 deletions components/lib/treetable/TreeTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { TreeTableBody } from './TreeTableBody';
import { TreeTableFooter } from './TreeTableFooter';
import { TreeTableHeader } from './TreeTableHeader';
import { TreeTableScrollableView } from './TreeTableScrollableView';
import { useHandleStyle } from '../componentbase/ComponentBase';

export const TreeTable = React.forwardRef((inProps, ref) => {
const context = React.useContext(PrimeReactContext);
Expand All @@ -38,6 +39,8 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
}
};
const ptCallbacks = TreeTableBase.setMetaData(metaData);

useHandleStyle(TreeTableBase.css.styles, ptCallbacks.isUnstyled, { name: 'treetable' });
const elementRef = React.useRef(null);
const tableRef = React.useRef(null);
const resizerHelperRef = React.useRef(null);
Expand Down Expand Up @@ -309,7 +312,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
const onColumnResize = (event) => {
let containerLeft = DomHandler.getOffset(elementRef.current).left;

DomHandler.addClass(elementRef.current, 'p-unselectable-text');
!isUnstyled() && DomHandler.addClass(elementRef.current, 'p-unselectable-text');
resizerHelperRef.current.style.height = elementRef.current.offsetHeight + 'px';
resizerHelperRef.current.style.top = 0 + 'px';
resizerHelperRef.current.style.left = event.pageX - containerLeft + elementRef.current.scrollLeft + 'px';
Expand Down Expand Up @@ -860,6 +863,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
filterDelay={props.filterDelay}
ptCallbacks={ptCallbacks}
metaData={metaData}
unstyled={props.unstyled}
/>
);
};
Expand Down Expand Up @@ -927,6 +931,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
alwaysShow={props.alwaysShowPaginator}
dropdownAppendTo={props.paginatorDropdownAppendTo}
pt={ptCallbacks.ptm('paginator')}
unstyled={props.unstyled}
/>
);
};
Expand All @@ -952,7 +957,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
scrollableView = createScrollableView(value, scrollableColumns, false, props.headerColumnGroup, props.footerColumnGroup);
const scrollableWrapper = mergeProps(
{
className: 'p-treetable-wrapper p-treetable-scrollable-wrapper'
className: ptCallbacks.cx('scrollableWrapper')
},
ptCallbacks.ptm('scrollableWrapper')
);
Expand All @@ -970,35 +975,25 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
const header = createTableHeader(columns, props.headerColumnGroup);
const footer = createTableFooter(columns, props.footerColumnGroup);
const body = createTableBody(value, columns);
const tableClassName = classNames(
'p-treetable-table',
{
'p-treetable-scrollable-table': props.scrollable,
'p-treetable-resizable-table': props.resizableColumns,
'p-treetable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
},
props.tableClassName
);

const wrapperProps = mergeProps(
{
className: 'p-treetable-wrapper'
className: ptCallbacks.cx('wrapper')
},
ptCallbacks.ptm('wrapper')
);

const tableProps = mergeProps(
{
ref: tableRef,
style: props.tableStyle,
className: tableClassName
className: classNames(props.tableClassName, ptCallbacks.cx('table'))
},
ptCallbacks.ptm('table')
);

return (
<div {...wrapperProps}>
<table {...tableProps}>
<table ref={tableRef} {...tableProps}>
{header}
{footer}
{body}
Expand All @@ -1013,25 +1008,24 @@ export const TreeTable = React.forwardRef((inProps, ref) => {

const createLoader = () => {
if (props.loading) {
const iconClassName = 'p-treetable-loading-icon';
const loadingIconProps = mergeProps(
{
className: iconClassName
className: ptCallbacks.cx('loadingIcon')
},
ptCallbacks.ptm('loadingIcon')
);
const icon = props.loadingIcon || <SpinnerIcon {...loadingIconProps} spin />;
const loadingIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props });
const loadingWrapperProps = mergeProps(
{
className: 'p-treetable-loading'
className: ptCallbacks.cx('loadingWrapper')
},
ptCallbacks.ptm('loadingWrapper')
);

const loadingOverlayProps = mergeProps(
{
className: 'p-treetable-loading-overlay p-component-overlay'
className: ptCallbacks.cx('loadingOverlay')
},
ptCallbacks.ptm('loadingOverlay')
);
Expand All @@ -1048,37 +1042,24 @@ export const TreeTable = React.forwardRef((inProps, ref) => {

const data = processData();

const className = classNames(
'p-treetable p-component',
{
'p-treetable-hoverable-rows': props.rowHover,
'p-treetable-selectable': isRowSelectionMode(),
'p-treetable-resizable': props.resizableColumns,
'p-treetable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
'p-treetable-striped': props.stripedRows,
'p-treetable-gridlines': props.showGridlines
},
props.className
);
const table = createTable(data);
const totalRecords = getTotalRecords(data);
const headerProps = mergeProps(
{
className: 'p-treetable-header'
className: ptCallbacks.cx('header')
},
ptCallbacks.ptm('header')
);
const footerProps = mergeProps(
{
className: 'p-treetable-footer'
className: ptCallbacks.cx('footer')
},
ptCallbacks.ptm('footer')
);
const resizeHelperProps = mergeProps(
{
ref: resizerHelperRef,
className: 'p-column-resizer-helper',
style: { display: 'none' }
className: ptCallbacks.cx('resizeHelper'),
style: ptCallbacks.sx('resizeHelper')
},
ptCallbacks.ptm('resizeHelper')
);
Expand All @@ -1088,12 +1069,11 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
const paginatorTop = props.paginator && props.paginatorPosition !== 'bottom' && createPaginator('top', totalRecords);
const paginatorBottom = props.paginator && props.paginatorPosition !== 'top' && createPaginator('bottom', totalRecords);
const loader = createLoader();
const resizeHelper = props.resizableColumns && <div {...resizeHelperProps}></div>;
const style = { position: 'absolute', display: 'none' };
const resizeHelper = props.resizableColumns && <div ref={resizerHelperRef} {...resizeHelperProps}></div>;
const reorderIndicatorUpProps = mergeProps(
{
className: 'p-datatable-reorder-indicator-up',
style: { ...style }
className: ptCallbacks.cx('reorderIndicatorUp'),
style: ptCallbacks.sx('reorderIndicatorUp')
},
ptCallbacks.ptm('reorderIndicatorUp')
);
Expand All @@ -1104,7 +1084,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
{reorderIndicatorUpIcon}
</span>
);
const reorderIndicatorDownProps = { className: 'p-datatable-reorder-indicator-down', style: { ...style } };
const reorderIndicatorDownProps = { className: ptCallbacks.sx('reorderIndicatorDown'), style: ptCallbacks.sx('reorderIndicatorDown') };
const reorderIndicatorDownIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon'));
const reorderIndicatorDownIcon = IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || <ArrowUpIcon {...reorderIndicatorDownIconProps} />, { ...reorderIndicatorDownIconProps }, { props });
const reorderIndicatorDown = props.reorderableColumns && (
Expand All @@ -1115,9 +1095,8 @@ export const TreeTable = React.forwardRef((inProps, ref) => {

const rootProps = mergeProps(
{
ref: elementRef,
id: props.id,
className,
className: classNames(props.className, ptCallbacks.cx('root', { isRowSelectionMode })),
style: props.style,
'data-scrollselectors': '.p-treetable-wrapper'
},
Expand All @@ -1126,7 +1105,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
);

return (
<div {...rootProps}>
<div ref={elementRef} {...rootProps}>
{loader}
{headerFacet}
{paginatorTop}
Expand Down
Loading

0 comments on commit 1f6b6ec

Please sign in to comment.