From 2b88e5ea96d3fab3d35aae88ca665838d8a3086b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Sun, 13 Aug 2023 20:48:44 +0300 Subject: [PATCH] Refactor #4431 - For DataTable(Add context & refactor headerCell pt opt) Refactor #4431 - For Timeline --- components/lib/datatable/DataTable.js | 3 +++ components/lib/datatable/DataTableBase.js | 26 +++++++++++--------- components/lib/datatable/TableHeader.js | 18 +++++++------- components/lib/passthrough/tailwind/index.js | 4 +-- components/lib/timeline/Timeline.js | 20 ++++++++++----- 5 files changed, 43 insertions(+), 28 deletions(-) diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index f6fa254733..66c186bd37 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -42,6 +42,9 @@ export const DataTable = React.forwardRef((inProps, ref) => { editingMeta: editingMetaState, d_rows: d_rowsState, d_filters: d_filtersState + }, + context: { + scrollable: props.scrollable } }; const ptCallbacks = DataTableBase.setMetaData(metaData); diff --git a/components/lib/datatable/DataTableBase.js b/components/lib/datatable/DataTableBase.js index 7e17023b1b..c6b6862105 100644 --- a/components/lib/datatable/DataTableBase.js +++ b/components/lib/datatable/DataTableBase.js @@ -312,6 +312,7 @@ const classes = { 'p-datatable-resizable-table': props.resizableColumns, 'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit' }), + thead: 'p-datatable-thead', tfoot: 'p-datatable-tfoot', footer: 'p-datatable-footer', resizeHelper: 'p-column-resizer-helper', @@ -397,17 +398,20 @@ const classes = { }), headerCheckboxIcon: 'p-checkbox-icon', headerContent: 'p-column-header-content', - headerCell: ({ headerProps: props, frozen, sortMeta, align, _isSortableDisabled, getColumnProp }) => - classNames(getColumnProp('headerClassName'), getColumnProp('className'), { - 'p-sortable-column': getColumnProp('sortable'), - 'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'), - 'p-highlight': sortMeta.sorted, - 'p-frozen-column': frozen, - 'p-selection-column': getColumnProp('selectionMode'), - 'p-sortable-disabled': getColumnProp('sortable') && _isSortableDisabled, - 'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen, - [`p-align-${align}`]: !!align - }), + headerCell: ({ props, frozen, sortMeta, align, _isSortableDisabled, column }) => + column + ? classNames('p-filter-column', { 'p-frozen-column': frozen }) + : classNames({ + 'p-filter-column': !props.headerColumnGroup && props.filterDisplay === 'row', + 'p-sortable-column': props.sortable, + 'p-resizable-column': props.resizableColumns && props.resizeable, + 'p-highlight': sortMeta.sorted, + 'p-frozen-column': frozen, + 'p-selection-column': props.selectionMode, + 'p-sortable-disabled': props.sortable && _isSortableDisabled, + 'p-reorderable-column': props.reorderableColumns && props.reorderable && !frozen, + [`p-align-${align}`]: !!align + }), footerCell: ({ getColumnProp, align }) => classNames({ 'p-frozen-column': getColumnProp('frozen'), diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js index 2e9709d948..3297a6e0fd 100644 --- a/components/lib/datatable/TableHeader.js +++ b/components/lib/datatable/TableHeader.js @@ -14,6 +14,7 @@ export const TableHeader = React.memo((props) => { const isSingleSort = props.sortMode === 'single'; const isMultipleSort = props.sortMode === 'multiple'; const isAllSortableDisabled = isSingleSort && allSortableDisabledState; + const { ptm, ptmo, cx } = props.ptCallbacks; const getColumnProp = (column, name) => { return ColumnBase.getCProp(column, name); @@ -23,12 +24,12 @@ export const TableHeader = React.memo((props) => { const getRowProps = (row) => ColumnGroupBase.getCProps(row); const getColumnGroupProps = () => { - return props.headerColumnGroup ? props.ptCallbacks.ptmo(ColumnGroupBase.getCProps(props.headerColumnGroup)) : undefined; + return props.headerColumnGroup ? ptmo(ColumnGroupBase.getCProps(props.headerColumnGroup)) : undefined; }; const getColumnGroupPTOptions = (key) => { return ( - props.ptCallbacks.ptmo(ColumnGroupBase.getCProp(props.headerColumnGroup, 'pt')), + ptmo(ColumnGroupBase.getCProp(props.headerColumnGroup, 'pt')), key, { props: getColumnGroupProps(), @@ -44,7 +45,7 @@ export const TableHeader = React.memo((props) => { const getColumnPTOptions = (column, key) => { const cProps = getColumnProps(column); - return props.ptCallbacks.ptmo(cProps, key, { + return ptmo(cProps, key, { props: cProps, parent: props.metaData, state: { @@ -57,7 +58,7 @@ export const TableHeader = React.memo((props) => { const getRowPTOptions = (row, key) => { const rProps = getRowProps(row); - return props.ptCallbacks.ptmo(rProps, key, { + return ptmo(rProps, key, { props: rProps, parent: props.metaData }); @@ -199,14 +200,13 @@ export const TableHeader = React.memo((props) => { if (isVisible) { const { filterHeaderStyle, style, filterHeaderClassName, className, frozen, columnKey, field, selectionMode, filter } = ColumnBase.getCProps(col); const colStyle = { ...(filterHeaderStyle || {}), ...(style || {}) }; - const colClassName = classNames('p-filter-column', filterHeaderClassName, className, { 'p-frozen-column': frozen }); const colKey = columnKey || field || i; const checkbox = createCheckbox(selectionMode); const filterRow = createFilter(col, filter); const headerCellProps = mergeProps( { style: colStyle, - className: colClassName, + className: classNames(filterHeaderClassName, className, cx('headerCell', { frozen, column: col })), key: colKey }, getColumnPTOptions(col, 'headerCell'), @@ -248,7 +248,7 @@ export const TableHeader = React.memo((props) => { { role: 'row' }, - props.ptCallbacks.ptm('headerRow') + ptm('headerRow') ); const headerRow = {createHeaderCells(props.columns)}; const filterRow = props.filterDisplay === 'row' && {createFilterCells()}; @@ -265,9 +265,9 @@ export const TableHeader = React.memo((props) => { const content = createContent(); const theadProps = mergeProps( { - className: 'p-datatable-thead' + className: cx('thead') }, - props.ptCallbacks.ptm('thead'), + ptm('thead'), getColumnGroupPTOptions('root') ); diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index e89a71bbec..508d3022e2 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -601,10 +601,10 @@ const Tailwind = { } }, menu: 'm-0 p-0 list-none flex items-center justify-center transition delay-200 z-20', - menuitem: ({ props, context }) => ({ + menuitem: ({ props, state }) => ({ className: [ 'transform transition-transform duration-200 ease-out transition-opacity duration-800', - context.hidden ? 'opacity-0 scale-0' : 'opacity-1 scale-100', + !state.visible ? 'opacity-0 scale-0' : 'opacity-1 scale-100', { 'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear', 'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear', diff --git a/components/lib/timeline/Timeline.js b/components/lib/timeline/Timeline.js index 9c1ebe2d85..4423b9c6b4 100644 --- a/components/lib/timeline/Timeline.js +++ b/components/lib/timeline/Timeline.js @@ -14,6 +14,14 @@ export const Timeline = React.memo( useHandleStyle(TimelineBase.css.styles, isUnstyled, { name: 'timeline' }); + const getPTOptions = (key, index) => { + return ptm(key, { + context: { + index: index + } + }); + }; + const elementRef = React.useRef(null); const getKey = (item, index) => { @@ -29,14 +37,14 @@ export const Timeline = React.memo( { className: cx('marker') }, - ptm('marker') + getPTOptions('marker', index) ); const marker = ObjectUtils.getJSXElement(props.marker, item, index) ||
; const connectorProps = mergeProps( { className: cx('connector') }, - ptm('connector') + getPTOptions('connector', index) ); const connector = index !== props.value.length - 1 &&
; const content = ObjectUtils.getJSXElement(props.content, item, index); @@ -45,25 +53,25 @@ export const Timeline = React.memo( { className: cx('event') }, - ptm('event') + getPTOptions('event', index) ); const oppositeProps = mergeProps( { className: cx('opposite') }, - ptm('opposite') + getPTOptions('opposite', index) ); const separatorProps = mergeProps( { className: cx('separator') }, - ptm('separator') + getPTOptions('separator', index) ); const contentProps = mergeProps( { className: cx('content') }, - ptm('content') + getPTOptions('content', index) ); return (