import * as React from "react" ; import { saveAs } from "browser-filesaver" ; import { useState } from "react" ; import { Listable } from "../../../common/Listable" ; import { Button } from "../../Components/Button" ; import { LibraryFriendlyNames , LibraryType , Libraries , LibraryStoreNames } from "../Libraries" ; import { Listing } from "../Listing" ; import { ActiveLibrary } from "./ActiveLibrary" ; import { DeletePrompt } from "./DeletePrompt" ; import { MovePrompt } from "./MovePrompt" ; import { SelectedItemsViewForActiveTab } from "./SelectedItemsViewForActiveTab" ; import { Selection , SelectionContext } from "./SelectionContext" ; import { Library } from "../useLibrary" ; import { Store } from "../../Utility/Store" ; type PromptTypeAndTargets = [ "move" | "delete" , Listing < Listable > [ ] ] | null ; export function SelectedItemsManager ( props ) { const [ promptTypeAndTargets , setPromptTypeAndTargets ] = useState < PromptTypeAndTargets > ( null ) ; const selection = React . useContext ( SelectionContext ) ; return ( < div > { selection . selected . length > 0 && ( < div style = { { flexFlow : "row" , alignItems : "center" } } > < h2 style = { { flexGrow : 1 } } > Selected { LibraryFriendlyNames [ props . activeTab ] } < /h2> { selection . selected . length === 1 && ( < Button text = "Edit" fontAwesomeIcon = "edit" onClick = { ( ) => props . editListing ( selection . selected [ 0 ] ) } />)} < Button text = "Move" fontAwesomeIcon = "folder" onClick = { ( ) => setPromptTypeAndTargets ( [ "move" , selection . selected ] ) } /> < Button text = "Delete" fontAwesomeIcon = "trash" onClick = { ( ) => setPromptTypeAndTargets ( [ "delete" , selection . selected ] ) } /> < Button text = "Export" fontAwesomeIcon = "download" onClick = { ( ) => exportSelectedItems ( selection , props . activeTab ) } /> < /div>)} < ActivePrompt promptTypeAndTargets = { promptTypeAndTargets } library = { ActiveLibrary ( props . libraries , props . activeTab ) } done = { ( ) => setPromptTypeAndTargets ( null ) } /> < div className = "c-library-manager__selection" style = { { flexShrink : 1 } } > < SelectedItemsViewForActiveTab selection = { selection } activeTab = { props . activeTab } / > < /div> < /div>); } async function exportSelectedItems ( selection , activeTab ) { if ( selection . selected . length > 0 ) { const blob = await Store . ExportListings ( selection . selected , LibraryStoreNames [ activeTab ] ) ; const firstListing = selection . selected [ 0 ] ; const firstListingName = firstListing . Meta ( ) . Name . toLocaleLowerCase ( ) . replace ( / /gi , "-" ) . replace ( /[^\w\s-]/gi , "" ) ; saveAs ( blob , `improved-initiative-${ firstListingName }-${ selection . selected . length }.json` ) ; } } function ActivePrompt ( props ) { if ( props . promptTypeAndTargets === null ) { return null ; } if ( props . promptTypeAndTargets [ 0 ] === "move" ) { return < MovePrompt { ... props } targets = { props . promptTypeAndTargets [ 1 ] } / > ; } if ( props . promptTypeAndTargets [ 0 ] === "delete" ) { return < DeletePrompt { ... props } targets = { props . promptTypeAndTargets [ 1 ] } / > ; } return null ; }