Add common Table components in React

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;

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;

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;

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;

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;

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;

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;