X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/ce4a1cdc67fd97c83f0249f04dde762bb6a6251a..bead3b2896eaaceb9b9a3c805d40e8048c93b218:/src/components/multiselect-toolbar/MultiselectToolbar.tsx diff --git a/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/src/components/multiselect-toolbar/MultiselectToolbar.tsx index 927da8c3..72d375ff 100644 --- a/src/components/multiselect-toolbar/MultiselectToolbar.tsx +++ b/src/components/multiselect-toolbar/MultiselectToolbar.tsx @@ -31,7 +31,7 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ width: 0, padding: 0, margin: "1rem auto auto 0.5rem", - overflow: "hidden", + overflowY: 'scroll', transition: "width 150ms", }, button: { @@ -43,17 +43,21 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ export type MultiselectToolbarProps = { checkedList: TCheckedList; selectedUuid: string | null - resources: ResourcesState; + iconProps: IconProps executeMulti: (action: ContextMenuAction, checkedList: TCheckedList, resources: ResourcesState) => void; - favorites: FavoritesState }; +type IconProps = { + resources: ResourcesState; + favorites: FavoritesState +} + export const MultiselectToolbar = connect( mapStateToProps, mapDispatchToProps )( withStyles(styles)((props: MultiselectToolbarProps & WithStyles) => { - const { classes, checkedList, resources, selectedUuid: singleSelectedUuid, favorites } = props; + const { classes, checkedList, selectedUuid: singleSelectedUuid, iconProps } = props; const currentResourceKinds = Array.from(selectedToKindSet(checkedList)); const currentPathIsTrash = window.location.pathname === "/trash"; @@ -75,12 +79,12 @@ export const MultiselectToolbar = connect( action.hasAlts ? ( - props.executeMulti(action, checkedList, resources)}> - {action.useAlts(singleSelectedUuid, resources, favorites) ? action.altIcon && action.altIcon({}): action.icon({})} + props.executeMulti(action, checkedList, iconProps.resources)}> + {currentPathIsTrash || action.useAlts(singleSelectedUuid, iconProps) ? action.altIcon && action.altIcon({}) : action.icon({})} ) : ( @@ -90,7 +94,7 @@ export const MultiselectToolbar = connect( key={i} disableFocusListener > - props.executeMulti(action, checkedList, resources)}>{action.icon({})} + props.executeMulti(action, checkedList, iconProps.resources)}>{action.icon({})} ) ) @@ -180,7 +184,7 @@ function selectActionsByKind(currentResourceKinds: Array, filterSet: TMu }); } -const isExactlyOneSelected = (checkedList: TCheckedList) => { +export const isExactlyOneSelected = (checkedList: TCheckedList) => { let tally = 0; let current = ''; for (const uuid in checkedList) { @@ -194,13 +198,15 @@ const isExactlyOneSelected = (checkedList: TCheckedList) => { //--------------------------------------------------// -function mapStateToProps(state: RootState) { +function mapStateToProps({multiselect, resources, favorites}: RootState) { return { - checkedList: state.multiselect.checkedList as TCheckedList, - selectedUuid: isExactlyOneSelected(state.multiselect.checkedList), - resources: state.resources, - favorites: state.favorites - }; + checkedList: multiselect.checkedList as TCheckedList, + selectedUuid: isExactlyOneSelected(multiselect.checkedList), + iconProps: { + resources, + favorites + } + } } function mapDispatchToProps(dispatch: Dispatch) {