From af1e453cb36021ae66cd2ffab108fb0a86852094 Mon Sep 17 00:00:00 2001
From: tischsoic <symfiz@gmail.com>
Date: Wed, 11 Dec 2024 10:28:09 +0100
Subject: [PATCH] Add common Table components in React

---
 .../modules/common/table/table.body.cell.js   | 47 +++++++++++++++
 .../src/modules/common/table/table.body.js    | 25 ++++++++
 .../modules/common/table/table.body.row.js    | 37 ++++++++++++
 .../modules/common/table/table.head.cell.js   | 59 +++++++++++++++++++
 .../src/modules/common/table/table.head.js    | 18 ++++++
 .../modules/common/table/table.head.row.js    | 25 ++++++++
 .../ui-dev/src/modules/common/table/table.js  | 28 +++++++++
 7 files changed, 239 insertions(+)
 create mode 100644 src/bundle/ui-dev/src/modules/common/table/table.body.cell.js
 create mode 100644 src/bundle/ui-dev/src/modules/common/table/table.body.js
 create mode 100644 src/bundle/ui-dev/src/modules/common/table/table.body.row.js
 create mode 100644 src/bundle/ui-dev/src/modules/common/table/table.head.cell.js
 create mode 100644 src/bundle/ui-dev/src/modules/common/table/table.head.js
 create mode 100644 src/bundle/ui-dev/src/modules/common/table/table.head.row.js
 create mode 100644 src/bundle/ui-dev/src/modules/common/table/table.js

diff --git a/src/bundle/ui-dev/src/modules/common/table/table.body.cell.js b/src/bundle/ui-dev/src/modules/common/table/table.body.cell.js
new file mode 100644
index 0000000000..f867c5570a
--- /dev/null
+++ b/src/bundle/ui-dev/src/modules/common/table/table.body.cell.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { createCssClassNames } from '../helpers/css.class.names';
+
+const TableBodyCell = ({ extraClasses, children, hasCheckbox, hasActionBtns, hasIcon, isCloseLeft, isCenterContent }) => {
+    const className = createCssClassNames({
+        'ibexa-table__cell': true,
+        'ibexa-table__cell--has-checkbox': hasCheckbox,
+        'ibexa-table__cell--has-action-btns': hasActionBtns,
+        'ibexa-table__cell--has-icon': hasIcon,
+        'ibexa-table__cell--close-left': isCloseLeft,
+        'ibexa-table__cell--content-center': isCenterContent,
+        [extraClasses]: true,
+    });
+    const wrapChildrenIfNeeded = (childrenToWrap) => {
+        if (hasActionBtns) {
+            return <div className="ibexa-table__cell-btns-wrapper">{childrenToWrap}</div>;
+        }
+
+        return childrenToWrap;
+    };
+
+    return <td className={className}>{wrapChildrenIfNeeded(children)}</td>;
+};
+
+TableBodyCell.propTypes = {
+    extraClasses: PropTypes.string,
+    children: PropTypes.element,
+    hasCheckbox: PropTypes.bool,
+    hasActionBtns: PropTypes.bool,
+    hasIcon: PropTypes.bool,
+    isCloseLeft: PropTypes.bool,
+    isCenterContent: PropTypes.bool,
+};
+
+TableBodyCell.defaultProps = {
+    extraClasses: '',
+    children: null,
+    hasCheckbox: false,
+    hasActionBtns: false,
+    hasIcon: false,
+    isCloseLeft: false,
+    isCenterContent: false,
+};
+
+export default TableBodyCell;
diff --git a/src/bundle/ui-dev/src/modules/common/table/table.body.js b/src/bundle/ui-dev/src/modules/common/table/table.body.js
new file mode 100644
index 0000000000..d4885cec98
--- /dev/null
+++ b/src/bundle/ui-dev/src/modules/common/table/table.body.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { createCssClassNames } from '../helpers/css.class.names';
+
+const TableBody = ({ extraClasses, children }) => {
+    const className = createCssClassNames({
+        'ibexa-table__body': true,
+        [extraClasses]: true,
+    });
+
+    return <tbody className={className}>{children}</tbody>;
+};
+
+TableBody.propTypes = {
+    extraClasses: PropTypes.string,
+    children: PropTypes.element,
+};
+
+TableBody.defaultProps = {
+    extraClasses: '',
+    children: null,
+};
+
+export default TableBody;
diff --git a/src/bundle/ui-dev/src/modules/common/table/table.body.row.js b/src/bundle/ui-dev/src/modules/common/table/table.body.row.js
new file mode 100644
index 0000000000..4954659d30
--- /dev/null
+++ b/src/bundle/ui-dev/src/modules/common/table/table.body.row.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { createCssClassNames } from '../helpers/css.class.names';
+
+const TableBodyRow = ({ extraClasses, children, isSelectable, isNotSelectable, onClick }) => {
+    const className = createCssClassNames({
+        'ibexa-table__row': true,
+        'ibexa-table__row--selectable': isSelectable,
+        'ibexa-table__row--not-selectable': isNotSelectable,
+        [extraClasses]: true,
+    });
+
+    return (
+        <tr className={className} onClick={onClick}>
+            {children}
+        </tr>
+    );
+};
+
+TableBodyRow.propTypes = {
+    extraClasses: PropTypes.string,
+    children: PropTypes.element,
+    isSelectable: PropTypes.bool,
+    isNotSelectable: PropTypes.bool,
+    onClick: PropTypes.func,
+};
+
+TableBodyRow.defaultProps = {
+    extraClasses: '',
+    children: null,
+    isSelectable: false,
+    isNotSelectable: false,
+    onClick: () => {},
+};
+
+export default TableBodyRow;
diff --git a/src/bundle/ui-dev/src/modules/common/table/table.head.cell.js b/src/bundle/ui-dev/src/modules/common/table/table.head.cell.js
new file mode 100644
index 0000000000..5a119f9802
--- /dev/null
+++ b/src/bundle/ui-dev/src/modules/common/table/table.head.cell.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { createCssClassNames } from '../helpers/css.class.names';
+
+const TableHeadCell = ({
+    extraClasses,
+    wrapperExtraClasses,
+    children,
+    sortColumnName,
+    hasCheckbox,
+    hasIcon,
+    isCloseLeft,
+    isCenterContent,
+}) => {
+    const className = createCssClassNames({
+        'ibexa-table__header-cell': true,
+        'ibexa-table__header-cell--has-checkbox': hasCheckbox,
+        'ibexa-table__header-cell--has-icon': hasIcon,
+        'ibexa-table__header-cell--close-left': isCloseLeft,
+        'ibexa-table__header-cell--content-center': isCenterContent,
+        [extraClasses]: true,
+    });
+    const cellTextWrapperClassName = createCssClassNames({
+        'ibexa-table__header-cell-text-wrapper': true,
+        [`ibexa-table__sort-column--${sortColumnName}`]: sortColumnName,
+        [wrapperExtraClasses]: true,
+    });
+
+    return (
+        <th className={className}>
+            <span className={cellTextWrapperClassName}>{children}</span>
+        </th>
+    );
+};
+
+TableHeadCell.propTypes = {
+    extraClasses: PropTypes.string,
+    wrapperExtraClasses: PropTypes.string,
+    children: PropTypes.element,
+    sortColumnName: PropTypes.string,
+    hasCheckbox: PropTypes.bool,
+    hasIcon: PropTypes.bool,
+    isCloseLeft: PropTypes.bool,
+    isCenterContent: PropTypes.bool,
+};
+
+TableHeadCell.defaultProps = {
+    extraClasses: '',
+    wrapperExtraClasses: '',
+    children: null,
+    sortColumnName: null,
+    hasCheckbox: false,
+    hasIcon: false,
+    isCloseLeft: false,
+    isCenterContent: false,
+};
+
+export default TableHeadCell;
diff --git a/src/bundle/ui-dev/src/modules/common/table/table.head.js b/src/bundle/ui-dev/src/modules/common/table/table.head.js
new file mode 100644
index 0000000000..388b94da1e
--- /dev/null
+++ b/src/bundle/ui-dev/src/modules/common/table/table.head.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const TableHead = ({ extraClasses, children }) => {
+    return <thead className={extraClasses}>{children}</thead>;
+};
+
+TableHead.propTypes = {
+    extraClasses: PropTypes.string,
+    children: PropTypes.element,
+};
+
+TableHead.defaultProps = {
+    extraClasses: '',
+    children: null,
+};
+
+export default TableHead;
diff --git a/src/bundle/ui-dev/src/modules/common/table/table.head.row.js b/src/bundle/ui-dev/src/modules/common/table/table.head.row.js
new file mode 100644
index 0000000000..5851601d62
--- /dev/null
+++ b/src/bundle/ui-dev/src/modules/common/table/table.head.row.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { createCssClassNames } from '../helpers/css.class.names';
+
+const TableHeadRow = ({ extraClasses, children }) => {
+    const className = createCssClassNames({
+        'ibexa-table__head-row': true,
+        [extraClasses]: true,
+    });
+
+    return <tr className={className}>{children}</tr>;
+};
+
+TableHeadRow.propTypes = {
+    extraClasses: PropTypes.string,
+    children: PropTypes.element,
+};
+
+TableHeadRow.defaultProps = {
+    extraClasses: '',
+    children: null,
+};
+
+export default TableHeadRow;
diff --git a/src/bundle/ui-dev/src/modules/common/table/table.js b/src/bundle/ui-dev/src/modules/common/table/table.js
new file mode 100644
index 0000000000..94611b02ff
--- /dev/null
+++ b/src/bundle/ui-dev/src/modules/common/table/table.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { createCssClassNames } from '../helpers/css.class.names';
+
+const Table = ({ extraClasses, children, isLastColumnSticky }) => {
+    const className = createCssClassNames({
+        'ibexa-table table': true,
+        'ibexa-table--last-column-sticky': isLastColumnSticky,
+        [extraClasses]: true,
+    });
+
+    return <table className={className}>{children}</table>;
+};
+
+Table.propTypes = {
+    extraClasses: PropTypes.string,
+    children: PropTypes.element,
+    isLastColumnSticky: PropTypes.bool,
+};
+
+Table.defaultProps = {
+    extraClasses: '',
+    children: null,
+    isLastColumnSticky: false,
+};
+
+export default Table;