[SDESK-5948] fix(sams): Checkbox not working in Asset Selector Modal (#…

…3870) * fix(sams-dark-ui): Add `dark-ui` class to the Modal component * enhance(sams-single-click): Improve single click performance when double click is disabled * fix(sams-select-asset): Combine click and checkbox functionality to select the item * fix(sams-lint) * enhance(sams-single-click): Imrpove single click performance for list view * chore(sams): Remove redundant code in AssetListPanel * chore(sams): Remove unused prop from SelectAssetModal
superdesk · Apr 23, 2021 · 03c8063 · 03c8063
1 parent f7dc38d
commit 03c8063
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 51 deletions.
diff --git a/scripts/extensions/sams/src/components/assets/assetGridItem.tsx b/scripts/extensions/sams/src/components/assets/assetGridItem.tsx
@@ -93,7 +93,7 @@ export class AssetGridItem extends React.PureComponent<IProps> {
         return (
             <GridItem
                 onClick={this.onItemClick}
-                onDoubleClick={this.onItemDoubleClick}
+                onDoubleClick={this.props.onDoubleClick && this.onItemDoubleClick}
                 selected={this.props.selected || this.props.itemSelected}
                 locked={isAssetLocked(this.props.asset)}
             >

diff --git a/scripts/extensions/sams/src/components/assets/assetListItem.tsx b/scripts/extensions/sams/src/components/assets/assetListItem.tsx
@@ -75,7 +75,7 @@ export class AssetListItem extends React.PureComponent<IProps> {
         return (
             <ListItem
                 onClick={this.onItemClick}
-                onDoubleClick={this.onItemDoubleClick}
+                onDoubleClick={this.props.onDoubleClick && this.onItemDoubleClick}
                 selected={this.props.selected || this.props.itemSelected}
                 shadow={1}
             >

diff --git a/scripts/extensions/sams/src/components/assets/assetListPanel.tsx b/scripts/extensions/sams/src/components/assets/assetListPanel.tsx
@@ -23,27 +23,6 @@ interface IProps {
 }
 
 export class AssetListPanel extends React.PureComponent<IProps> {
-    constructor(props: IProps) {
-        super(props);
-        this.onItemClick = this.onItemClick.bind(this);
-        this.onItemDoubleClick = this.onItemDoubleClick.bind(this);
-        this.onUpdateSelectedAssetIds = this.onUpdateSelectedAssetIds.bind(this);
-    }
-
-    onItemClick(asset: IAssetItem) {
-        this.props.onItemClicked(asset);
-    }
-
-    onItemDoubleClick(asset: IAssetItem) {
-        if (this.props.onItemDoubleClicked != null) {
-            this.props.onItemDoubleClicked(asset);
-        }
-    }
-
-    onUpdateSelectedAssetIds(asset: IAssetItem) {
-        this.props.updateSelectedAssetIds(asset);
-    }
-
     render() {
         const {gettext} = superdeskApi.localization;
         const {assertNever} = superdeskApi.helpers;
@@ -64,15 +43,12 @@ export class AssetListPanel extends React.PureComponent<IProps> {
                             key={asset._id}
                             asset={asset}
                             selected={this.props.selectedItems?.includes(asset._id) ?? false}
-                            toggleSelected={this.props.onItemClicked == null ?
-                                undefined :
-                                this.onItemClick
-                            }
-                            onClick={this.onItemClick}
-                            onDoubleClick={this.onItemDoubleClick}
+                            toggleSelected={this.props.onItemClicked}
+                            onClick={this.props.onItemClicked}
+                            onDoubleClick={this.props.onItemDoubleClicked}
                             actions={this.props.actions}
                             itemSelected={this.props.selectedAssetIds?.indexOf(asset._id) !== -1}
-                            updateSelectedAssetIds={this.onUpdateSelectedAssetIds}
+                            updateSelectedAssetIds={this.props.updateSelectedAssetIds}
                         />
                     ))}
                 </GridList>
@@ -85,11 +61,11 @@ export class AssetListPanel extends React.PureComponent<IProps> {
                             key={asset._id}
                             asset={asset}
                             selected={this.props.selectedItems?.includes(asset._id) ?? false}
-                            onClick={this.onItemClick}
-                            onDoubleClick={this.onItemDoubleClick}
+                            onClick={this.props.onItemClicked}
+                            onDoubleClick={this.props.onItemDoubleClicked}
                             actions={this.props.actions}
                             itemSelected={this.props.selectedAssetIds?.indexOf(asset._id) !== -1}
-                            updateSelectedAssetIds={this.onUpdateSelectedAssetIds}
+                            updateSelectedAssetIds={this.props.updateSelectedAssetIds}
                         />
                     ))}
                 </ListItemGroup>

diff --git a/scripts/extensions/sams/src/components/assets/selectAssetModal.tsx b/scripts/extensions/sams/src/components/assets/selectAssetModal.tsx
@@ -15,7 +15,6 @@ import {
     getAssetSearchParams,
     getAssetSearchResults,
     getAssetSetFilter,
-    getSelectedAssetIds,
 } from '../../store/assets/selectors';
 import {
     loadNextAssetsPage,
@@ -28,7 +27,7 @@ import {toggleFilterPanelState} from '../../store/workspace/actions';
 
 // UI
 import {Button, ButtonGroup} from 'superdesk-ui-framework/react';
-import {Modal, ModalBody, ModalHeader} from '../../ui/modal';
+import {Modal, ModalBody, ModalHeader} from '../../ui';
 import {PageLayout} from '../../containers/PageLayout';
 import {WorkspaceSubnav} from '../workspaceSubnav';
 import {AssetFilterPanel} from './assetFilterPanel';
@@ -46,7 +45,6 @@ interface IProps {
     filterPanelOpen: boolean;
     listStyle: ASSET_LIST_STYLE;
     searchParams: IAssetSearchParams;
-    selectedAssetIds: Array<string>;
     updateAssetSearchParamsAndListItems(
         params: Partial<IAssetSearchParams>,
         listAction: LIST_ACTION,
@@ -68,7 +66,6 @@ const mapStateToProps = (state: IApplicationState) => ({
     listStyle: getAssetListStyle(state),
     searchParams: getAssetSearchParams(state),
     currentSet: getAssetSetFilter(state),
-    selectedAssetIds: getSelectedAssetIds(state),
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
@@ -119,10 +116,6 @@ export class SelectAssetModalComponent extends React.Component<IProps, IState> {
         this.props.queryAssetsFromCurrentSearch(LIST_ACTION.REPLACE);
     }
 
-    onMultiActionBar(asset: IAssetItem) {
-        this.props.updateSelectedAssetIds(asset);
-    }
-
     onScroll(event: React.UIEvent<HTMLDivElement>) {
         const node = event.currentTarget;
 
@@ -159,6 +152,7 @@ export class SelectAssetModalComponent extends React.Component<IProps, IState> {
 
     render() {
         const {gettext} = superdeskApi.localization;
+        const selectedAssetIds = Object.keys(this.state.selectedItems);
 
         return (
             <Modal
@@ -207,10 +201,10 @@ export class SelectAssetModalComponent extends React.Component<IProps, IState> {
                             <AssetListPanel
                                 assets={this.props.assets}
                                 listStyle={this.props.listStyle}
-                                selectedItems={Object.keys(this.state.selectedItems)}
+                                selectedItems={selectedAssetIds}
                                 onItemClicked={this.toggleItemSelected}
-                                selectedAssetIds={this.props.selectedAssetIds}
-                                updateSelectedAssetIds={this.onMultiActionBar}
+                                selectedAssetIds={selectedAssetIds}
+                                updateSelectedAssetIds={this.toggleItemSelected}
                             />
                         )}
                     />

diff --git a/scripts/extensions/sams/src/ui/grid/GridItem.tsx b/scripts/extensions/sams/src/ui/grid/GridItem.tsx
@@ -11,7 +11,7 @@ interface IProps {
 
 export class GridItem extends React.PureComponent<IProps> {
     clickCount: number = 0;
-    singleClickTimer: any;
+    singleClickTimer?: number;
 
     constructor(props: IProps) {
         super(props);
@@ -20,14 +20,19 @@ export class GridItem extends React.PureComponent<IProps> {
     }
 
     handleClicks() {
+        if (this.props.onDoubleClick == null) {
+            this.props.onClick!();
+            return;
+        }
+
         this.clickCount++;
         if (this.clickCount === 1) {
-            this.singleClickTimer = setTimeout(() => {
+            this.singleClickTimer = window.setTimeout(() => {
                 this.clickCount = 0;
                 this.props.onClick!();
             }, 300);
         } else if (this.clickCount === 2) {
-            clearTimeout(this.singleClickTimer);
+            window.clearTimeout(this.singleClickTimer);
             this.clickCount = 0;
             this.props.onDoubleClick!();
         }
@@ -44,7 +49,7 @@ export class GridItem extends React.PureComponent<IProps> {
         );
 
         return (
-            <div className={classes} onClick={() => this.handleClicks()}>
+            <div className={classes} onClick={this.handleClicks}>
                 {this.props.children}
             </div>
         );

diff --git a/scripts/extensions/sams/src/ui/list/ListItem.tsx b/scripts/extensions/sams/src/ui/list/ListItem.tsx
@@ -20,7 +20,7 @@ interface IProps {
 
 export class ListItem extends React.PureComponent<IProps> {
     clickCount: number = 0;
-    singleClickTimer: any;
+    singleClickTimer?: number;
 
     constructor(props: IProps) {
         super(props);
@@ -29,15 +29,20 @@ export class ListItem extends React.PureComponent<IProps> {
     }
 
     handleClicks(event: React.MouseEvent<HTMLDivElement>) {
+        if (this.props.onDoubleClick == null) {
+            this.props.onClick!(event);
+            return;
+        }
+
         this.clickCount++;
         if (this.clickCount === 1) {
             event.persist();
-            this.singleClickTimer = setTimeout(() => {
+            this.singleClickTimer = window.setTimeout(() => {
                 this.clickCount = 0;
                 this.props.onClick!(event);
             }, 300);
         } else if (this.clickCount === 2) {
-            clearTimeout(this.singleClickTimer);
+            window.clearTimeout(this.singleClickTimer);
             this.clickCount = 0;
             this.props.onDoubleClick!(event);
         }

diff --git a/scripts/extensions/sams/src/ui/modal/Modal.tsx b/scripts/extensions/sams/src/ui/modal/Modal.tsx
@@ -44,6 +44,7 @@ export class Modal extends React.PureComponent<IProps> {
             {
                 [`modal--${this.props.size}`]: this.props.size,
                 'modal--dark-ui': this.props.darkUI,
+                'dark-ui': this.props.darkUI,
             },
         );
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,6 +44,7 @@ export class Modal extends React.PureComponent<IProps> { @@
                 {
                     [`modal--${this.props.size}`]: this.props.size,
                     'modal--dark-ui': this.props.darkUI,
+                    'dark-ui': this.props.darkUI,
                 },
             );
@@ Expand Down @@