Refactor #4431 - For DataTable(Add context & refactor headerCell pt opt)

Refactor #4431 - For Timeline
primefaces · Aug 13, 2023 · 2b88e5e · 2b88e5e
1 parent e8f69e9
commit 2b88e5e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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 = <tr {...headerRowProps}>{createHeaderCells(props.columns)}</tr>;
             const filterRow = props.filterDisplay === 'row' && <tr {...headerRowProps}>{createFilterCells()}</tr>;
@@ -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
@@ -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
@@ -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) || <div {...markerProps}></div>;
                     const connectorProps = mergeProps(
                         {
                             className: cx('connector')
                         },
-                        ptm('connector')
+                        getPTOptions('connector', index)
                     );
                     const connector = index !== props.value.length - 1 && <div {...connectorProps}></div>;
                     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 (