Refactor #4602 - For DataTable

primefaces · Aug 7, 2023 · 632eaf2 · 632eaf2
1 parent 368d96a
commit 632eaf2
Show file tree

Hide file tree

Showing 23 changed files with 584 additions and 652 deletions.
diff --git a/components/lib/button/ButtonBase.js b/components/lib/button/ButtonBase.js
@@ -29,77 +29,6 @@ const classes = {
         })
 };
 
-const styles = `
-.p-button {
-    margin: 0;
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    align-items: center;
-    vertical-align: bottom;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-button-label {
-    flex: 1 1 auto;
-}
-
-.p-button-icon-right {
-    order: 1;
-}
-
-.p-button:disabled {
-    cursor: default;
-}
-
-.p-button-icon-only {
-    justify-content: center;
-}
-
-.p-button-icon-only .p-button-label {
-    visibility: hidden;
-    width: 0;
-    flex: 0 0 auto;
-}
-
-.p-button-vertical {
-    flex-direction: column;
-}
-
-.p-button-icon-bottom {
-    order: 2;
-}
-
-.p-buttonset .p-button {
-    margin: 0;
-}
-
-.p-buttonset .p-button:not(:last-child) {
-    border-right: 0 none;
-}
-
-.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
-    border-radius: 0;
-}
-
-.p-buttonset .p-button:first-of-type {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.p-buttonset .p-button:last-of-type {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.p-buttonset .p-button:focus {
-    position: relative;
-    z-index: 1;
-}
-`;
-
 export const ButtonBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Button',
@@ -125,7 +54,6 @@ export const ButtonBase = ComponentBase.extend({
         visible: true
     },
     css: {
-        classes,
-        styles
+        classes
     }
 });
diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts
@@ -804,6 +804,11 @@ export interface ColumnProps {
      * @type {ColumnPassThroughOptions}
      */
     pt?: ColumnPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
     /**
      * Style class of the component.
      */

diff --git a/components/lib/columngroup/columngroup.d.ts b/components/lib/columngroup/columngroup.d.ts
@@ -49,6 +49,11 @@ export interface ColumnGroupProps {
      * @type {ColumnGroupPassThroughOptions}
      */
     pt?: ColumnGroupPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
@@ -24,14 +24,15 @@ export const BodyCell = React.memo((props) => {
     const selfClick = React.useRef(false);
     const tabindexTimeout = React.useRef(null);
     const initFocusTimeout = React.useRef(null);
+    const { ptmo, cx, sx } = props.ptCallbacks;
 
     const getColumnProp = (name) => ColumnBase.getCProp(props.column, name);
     const getColumnProps = (column) => ColumnBase.getCProps(column);
 
     const getColumnPTOptions = (key) => {
         const cProps = getColumnProps(props.column);
 
-        return props.ptCallbacks.ptmo(getColumnProp('pt'), key, {
+        return ptmo(getColumnProp('pt'), key, {
             props: cProps,
             parent: props.metaData,
             state: {
@@ -556,19 +557,10 @@ export const BodyCell = React.memo((props) => {
         const expander = ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, columnBodyOptions);
         const cellClassName = ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
         const bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);
-        const className = classNames(bodyClassName, getColumnProp('className'), cellClassName, {
-            'p-selection-column': selectionMode !== null,
-            'p-editable-column': editor,
-            'p-cell-editing': editor && editingState,
-            'p-frozen-column': frozen,
-            'p-selectable-cell': props.allowCellSelection && props.isSelectable({ data: getCellParams(), index: props.rowIndex }),
-            'p-highlight': cellSelected,
-            [`p-align-${align}`]: !!align
-        });
         const style = getStyle();
         const columnTitleProps = mergeProps(
             {
-                className: 'p-column-title'
+                className: cx('columnTitle')
             },
             getColumnProp('columnTitle')
         );
@@ -618,10 +610,9 @@ export const BodyCell = React.memo((props) => {
             );
         } else if (rowReorder) {
             const showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, { rowIndex: props.rowIndex, props: props.tableProps }) : true;
-            const rowReorderIconClassName = 'p-datatable-reorderablerow-handle';
             const rowReorderIconProps = mergeProps(
                 {
-                    className: rowReorderIconClassName
+                    className: cx('rowReorderIcon')
                 },
                 getColumnProp('rowReorderIcon')
             );
@@ -631,7 +622,7 @@ export const BodyCell = React.memo((props) => {
         } else if (expander) {
             const rowTogglerIconProps = mergeProps(
                 {
-                    className: 'p-row-toggler-icon',
+                    className: cx('rowTogglerIcon'),
                     'aria-hidden': true
                 },
                 getColumnProp('rowTogglerIcon')
@@ -644,7 +635,7 @@ export const BodyCell = React.memo((props) => {
             const label = `${props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel')} ${ariaLabelText}`;
             const expanderProps = {
                 onClick: onRowToggle,
-                className: 'p-row-toggler p-link'
+                className: cx('rowToggler')
             };
             const rowTogglerProps = mergeProps(
                 {
@@ -671,12 +662,9 @@ export const BodyCell = React.memo((props) => {
             }
         } else if (isRowEditor && rowEditor) {
             let rowEditorProps = {};
-            let rowEditorSaveIconClassName = 'p-row-editor-save-icon',
-                rowEditorCancelIconClassName = 'p-row-editor-cancel-icon',
-                rowEditorInitIconClassName = 'p-row-editor-init-icon';
-            const rowEditorSaveIconProps = mergeProps({ className: rowEditorSaveIconClassName }, getColumnProp('rowEditorSaveIconProps'));
-            const rowEditorCancelIconProps = mergeProps({ className: rowEditorCancelIconClassName }, getColumnProp('rowEditorCancelIconProps'));
-            const rowEditorInitIconProps = mergeProps({ className: rowEditorInitIconClassName }, getColumnProp('rowEditorInitIconProps'));
+            const rowEditorSaveIconProps = mergeProps({ className: cx('rowEditorSaveIcon') }, getColumnProp('rowEditorSaveIconProps'));
+            const rowEditorCancelIconProps = mergeProps({ className: cx('rowEditorCancelIcon') }, getColumnProp('rowEditorCancelIconProps'));
+            const rowEditorInitIconProps = mergeProps({ className: cx('rowEditorInitIcon') }, getColumnProp('rowEditorInitIconProps'));
             const rowEditorSaveIcon = IconUtils.getJSXIcon(props.rowEditorSaveIcon || <CheckIcon {...rowEditorSaveIconProps} />, { ...rowEditorSaveIconProps }, { props });
             const rowEditorCancelIcon = IconUtils.getJSXIcon(props.rowEditorCancelIcon || <TimesIcon {...rowEditorCancelIconProps} />, { ...rowEditorCancelIconProps }, { props });
             const rowEditorInitIcon = IconUtils.getJSXIcon(props.rowEditorInitIcon || <PencilIcon {...rowEditorInitIconProps} />, { ...rowEditorInitIconProps }, { props });
@@ -685,9 +673,9 @@ export const BodyCell = React.memo((props) => {
                 rowEditorProps = {
                     editing: true,
                     onSaveClick: onRowEditSave,
-                    saveClassName: 'p-row-editor-save p-link',
+                    saveClassName: cx('rowEditorSaveButton'),
                     onCancelClick: onRowEditCancel,
-                    cancelClassName: 'p-row-editor-cancel p-link'
+                    cancelClassName: cx('rowEditorCancelButton')
                 };
 
                 const rowEditorEditButtonProps = mergeProps(
@@ -728,7 +716,7 @@ export const BodyCell = React.memo((props) => {
                 rowEditorProps = {
                     editing: false,
                     onInitClick: onRowEditInit,
-                    initClassName: 'p-row-editor-init p-link'
+                    initClassName: cx('rowEditorInitButton')
                 };
 
                 const rowEditorInitButtonProps = mergeProps(
@@ -796,7 +784,7 @@ export const BodyCell = React.memo((props) => {
         const bodyCellProps = mergeProps(
             {
                 style,
-                className,
+                className: classNames(bodyClassName, getColumnProp('className'), cellClassName, cx('bodyCell', { selectionMode, editor, editingState, frozen, cellSelected, align, bodyProps: props, getCellParams })),
                 rowSpan: props.rowSpan,
                 tabIndex,
                 role: 'cell',

diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js
@@ -7,15 +7,19 @@ export const BodyRow = React.memo((props) => {
     const [editingState, setEditingState] = React.useState(false);
     const editing = props.onRowEditChange ? props.editing : editingState;
     const getColumnProps = (column) => ColumnBase.getCProps(column);
+    const { ptm, ptmo, cx } = props.ptCallbacks;
 
     const getColumnPTOptions = (key) => {
         const cProps = getColumnProps(props.column);
 
-        return props.ptCallbacks.ptmo(cProps, key, {
-            props: cProps,
+        return ptmo(cProps, key, {
+            props,
             parent: props.metaData,
             state: {
                 editing: editingState
+            },
+            context: {
+                index: props.index
             }
         });
     };
@@ -371,20 +375,14 @@ export const BodyRow = React.memo((props) => {
     };
 
     const rowClassName = ObjectUtils.getPropValue(props.rowClassName, props.rowData, { props: props.tableProps });
-    const className = classNames(rowClassName, {
-        'p-highlight': (!props.allowCellSelection && props.selected) || props.contextMenuSelected,
-        'p-highlight-contextmenu': props.contextMenuSelected,
-        'p-selectable-row': props.allowRowSelection && props.isSelectable({ data: props.rowData, index: props.rowIndex }),
-        'p-row-odd': props.rowIndex % 2 !== 0
-    });
     const style = { height: props.virtualScrollerOptions ? props.virtualScrollerOptions.itemSize : undefined };
     const content = createContent();
     const tabIndex = getTabIndex();
     const rowProps = mergeProps(
         {
             role: 'row',
             tabIndex: tabIndex,
-            className: className,
+            className: classNames(rowClassName, cx('row', { rowProps: props })),
             style: style,
             onMouseDown: (e) => onMouseDown(e),
             onMouseUp: (e) => onMouseUp(e),
@@ -401,7 +399,7 @@ export const BodyRow = React.memo((props) => {
             onDragEnd: (e) => onDragEnd(e),
             onDrop: (e) => onDrop(e)
         },
-        props.ptCallbacks.ptm('row')
+        ptm('row')
     );
 
     return <tr {...rowProps}>{content}</tr>;