Merge pull request #480 from sebgroup/develop

#Release - fix column and sorting alignment issue in table
seb-oss · Oct 14, 2020 · 987ac26 · 987ac26
2 parents 3a9696d + 9660ef2
commit 987ac26
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 15 deletions.
diff --git a/develop/components/common/TitleBar.tsx b/develop/components/common/TitleBar.tsx
@@ -220,7 +220,7 @@ export default class TitleBar extends React.Component<TitleBarProps, TitleBarSta
                     <div className="sidebar-toggler">
                         <Icon
                             className="bars"
-                            onClick={this.props.onToggleClick && this.props.onToggleClick}
+                            onClick={this.props.onToggleClick}
                             src={
                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                     <path d="M442 114H6a6 6 0 0 0-6-6V84a6 6 0 0 0 6-6h436a6 6 0 0 0 6 6v24a6 6 0 0 0-6 6zm0 160H6a6 6 0 0 0-6-6v-24a6 6 0 0 0 6-6h436a6 6 0 0 0 6 6v24a6 6 0 0 0-6 6zm0 160H6a6 6 0 0 0-6-6v-24a6 6 0 0 0 6-6h436a6 6 0 0 0 6 6v24a6 6 0 0 0-6 6z" />

diff --git a/src/Accordion/accordion-style.scss b/src/Accordion/accordion-style.scss
@@ -115,7 +115,7 @@ $accordion-min-height: 48px;
         }
         &.deg-180 {
             .header-wrapper > svg:last-of-type:not(:first-of-type) {
-                transform: rotate(-18deg0);
+                transform: rotate(-180deg);
             }
         }
         &.deg-180-counter {

diff --git a/src/ImageCropper/ImagePreview.tsx b/src/ImageCropper/ImagePreview.tsx
@@ -77,7 +77,7 @@ export class ImagePreview extends React.Component<ImagePreviewProps, ImagePrevie
                     id="fileInput"
                     name="profileImage"
                     accept="image/*"
-                    onChange={this.props.handleUploadImage && this.props.handleUploadImage}
+                    onChange={this.props.handleUploadImage}
                     onClick={(e: any) => {
                         if (e.target && e.target.value) {
                             e.target.value = null;

diff --git a/src/Notification/Notification.tsx b/src/Notification/Notification.tsx
@@ -77,7 +77,7 @@ export class Notification extends React.Component<NotificationProps> {
                 <div className={`content-wrapper` + (this.props.onClick ? " clickable" : "")} onClick={this.props.onClick}>
                     {this.props.title && style === "style-slide-in" && <div className="notification-title">{this.props.title}</div>}
                     {this.props.message && <div className="notification-message">{this.props.message}</div>}
-                    {this.props.children && this.props.children}
+                    {this.props.children}
                     {style === "style-slide-in" && this.props.actions && this.props.actions.length && this.props.actions.length < 3 && (
                         <div className={"actions-wrapper" + (this.props.actions.length === 2 ? " partitioned" : "")}>
                             {this.props.actions.map((item: NotificationAction, i: number) => (

diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx
@@ -108,6 +108,11 @@ const Table: React.FunctionComponent<TableProps> = React.memo(
         const [tableRows, setTableRows] = React.useState<Array<TableRow>>([]);
         const [tableRowsImage, setTableRowsImage] = React.useState<Array<TableRow>>([]);
 
+        // memoized variables -------------------------------------------------------------------------
+        const showActionColumn: boolean = React.useMemo(() => {
+            const dataHasAction: boolean = currentTableRows?.some((row: TableRow) => row.actionLinks?.length);
+            return props.actionLinks?.length > 0 || !!props.primaryActionButton || dataHasAction;
+        }, [props.actionLinks, props.actionLinks, props.primaryActionButton, currentTableRows]);
         // events -------------------------------------------------------------------------------------
 
         /**
@@ -711,7 +716,7 @@ const Table: React.FunctionComponent<TableProps> = React.memo(
                     onRowExpanded={onRowExpanded}
                     onSubRowExpanded={onSubRowExpanded}
                     onActionDropped={onActionColumnDropped}
-                    useShowActionColumn={(props.actionLinks && props.actionLinks.length > 0) || !!props.primaryActionButton}
+                    useShowActionColumn={showActionColumn}
                     actionLinks={props.actionLinks}
                     primaryActionButton={props.primaryActionButton}
                     loading={!props.data}

diff --git a/src/Table/sections/TableUI.tsx b/src/Table/sections/TableUI.tsx
@@ -84,12 +84,14 @@ export const TableUI: React.FunctionComponent<TableUIProps> = React.memo(
                                             }
                                         }}
                                     >
-                                        <span className="th-label">{header.label}</span>
-                                        {props.sortable && header.canSort && (
-                                            <span role="link" className={"icon-holder" + (header.isSorted ? (header.isSortedDesc ? " desc" : " asc") : "")} id={header.accessor}>
-                                                {defaultSort}
-                                            </span>
-                                        )}
+                                        <div className="sort-holder">
+                                            <span className="th-label">{header.label}</span>
+                                            {props.sortable && header.canSort && (
+                                                <span role="link" className={"icon-holder" + (header.isSorted ? (header.isSortedDesc ? " desc" : " asc") : "")} id={header.accessor}>
+                                                    {defaultSort}
+                                                </span>
+                                            )}
+                                        </div>
                                     </th>
                                 ) : null;
                             })}
@@ -106,7 +108,7 @@ export const TableUI: React.FunctionComponent<TableUIProps> = React.memo(
                                         tableRef={tableRef}
                                         onActionDropped={props.onActionDropped}
                                         onRowExpanded={props.onRowExpanded}
-                                        useShowActionColumn={props.useShowActionColumn || !!row?.actionLinks?.length}
+                                        useShowActionColumn={props.useShowActionColumn}
                                         rowsAreCollapsable={props.rowsAreCollapsable}
                                         onItemSelected={props.onItemSelected}
                                         primaryActionButton={props.primaryActionButton}
@@ -128,7 +130,7 @@ export const TableUI: React.FunctionComponent<TableUIProps> = React.memo(
                                                     tableRef={tableRef}
                                                     onActionDropped={props.onActionDropped}
                                                     onRowExpanded={props.onRowExpanded}
-                                                    useShowActionColumn={props.useShowActionColumn || !!subRow?.actionLinks?.length}
+                                                    useShowActionColumn={props.useShowActionColumn}
                                                     rowsAreCollapsable={props.rowsAreCollapsable}
                                                     onItemSelected={props.onItemSelected}
                                                     primaryActionButton={props.primaryActionButton}

diff --git a/src/Table/table-style.scss b/src/Table/table-style.scss
@@ -19,10 +19,14 @@ table {
                         &:hover {
                             color: $icon-active-color;
                         }
+
+                        .sort-holder {
+                            display: flex;
+                            align-items: center;
+                        }
                     }
 
                     .icon-holder {
-                        vertical-align: middle;
                         position: relative;
                         margin-left: 5px;
                         height: $icon-size;
@@ -70,7 +74,7 @@ table {
                         height: $icon-size;
                         display: flex;
                         align-items: center;
-
+                        justify-content: flex-end;
                         &:hover {
                             svg {
                                 fill: $icon-active-color;
@@ -93,6 +97,7 @@ table {
                         position: relative;
                         display: flex;
                         align-items: center;
+                        justify-content: flex-end;
 
                         button {
                             min-height: $icon-size;