copy move new picker

Author: NoelKova

apps/sensenet/src/components/dialogs/copy-move.tsx

@@ -1,10 +1,7 @@
-import { LinearProgress } from '@material-ui/core'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
 import { PathHelper } from '@sensenet/client-utils'
 import { GenericContent } from '@sensenet/default-content-types'
 import { useLogger, useRepository } from '@sensenet/hooks-react'
-import { GenericContentWithIsParent, Picker, PickerModes } from '@sensenet/pickers-react'
+import { PickerAdvanced } from '@sensenet/pickers-react'
 import React, { useEffect, useMemo, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { useGlobalStyles } from '../../globalStyles'
@@ -35,26 +32,21 @@ export const CopyMoveDialog: React.FunctionComponent<CopyMoveDialogProps> = (pro
   const [isExecInProgress, setIsExecInProgress] = useState(false)
 
   const selectionRoots = useMemo(() => [snRoute.path], [snRoute.path])
-  const itemsODataOptions = useMemo(() => ({ filter: '' }), [])
-
-  const blackList =
-    props.operation === 'copy'
-      ? [props.content[0].Path]
-      : [props.content[0].Path, `/${PathHelper.getParentPath(props.content[0].Path)}`]
 
   useEffect(() => {
     setLocalization(localizations[props.operation])
   }, [localizations, props.operation])
 
-  const [destination, setDestination] = useState(props.currentParent.DisplayName)
+  const [destinationString, setDestinationString] = useState(props.currentParent.DisplayName)
+  const [currentNode, setCurrentNode] = useState(props.currentParent)
 
   if (!props.content.length) {
     return null
   }
 
-  const handleSubmit = async (selection: GenericContentWithIsParent[]) => {
+  const handleSubmit = async () => {
     try {
-      const target = selection[0]
+      const target = currentNode
 
       setIsExecInProgress(true)
 
@@ -164,28 +156,25 @@ export const CopyMoveDialog: React.FunctionComponent<CopyMoveDialogProps> = (pro
                 )
               })()}
           <span style={{ marginLeft: '0.25rem' }}>
-            to <span style={{ color: 'yellow' }}>{destination}</span>
+            to <span style={{ color: 'yellow' }}>{destinationString}</span>
           </span>
         </div>
       </DialogTitle>
-      <Picker
+      <PickerAdvanced
         repository={repo}
-        currentPath={props.currentParent.Path}
-        selectionRoots={selectionRoots}
-        itemsODataOptions={itemsODataOptions}
+        defaultValue={props.content}
+        path={props.currentParent.Path}
         renderIcon={(item) => <Icon item={item} />}
-        renderLoading={() => <LinearProgress />}
-        pickerContainer={DialogContent}
-        actionsContainer={DialogActions}
-        handleCancel={closeLastDialog}
-        handleSubmit={handleSubmit}
-        selectionBlacklist={blackList}
-        isExecInProgress={isExecInProgress}
-        required={1}
-        classes={{ cancelButton: globalClasses.cancelButton }}
-        setDestination={setDestination}
-        currentParent={props.currentParent}
-        treePickerMode={PickerModes.COPY_MOVE_TREE}
+        onCancel={closeLastDialog}
+        onSubmit={() => {
+          handleSubmit()
+        }}
+        selectionRoots={selectionRoots}
+        showDialogTitle={false}
+        canPick={false}
+        showSearch={false}
+        setDestinationString={setDestinationString}
+        setCurrentNode={setCurrentNode}
       />
     </>
   )

packages/sn-pickers-react/src/components/picker-advanced.tsx

@@ -177,9 +177,9 @@ type TreeNodeProps = {
   path: string
   expanded: string[]
   setExpanded: React.Dispatch<React.SetStateAction<string[]>>
-  onSetCurrentPath: (path: string) => void
+  onSetCurrentNode: (content: GenericContent) => void
 }
-const TreeNode = ({ node, repository, renderIcon, path, expanded, setExpanded, onSetCurrentPath }: TreeNodeProps) => {
+const TreeNode = ({ node, repository, renderIcon, path, expanded, setExpanded, onSetCurrentNode }: TreeNodeProps) => {
   const classes = useStyles()
   const [childNodes, setChildNodes] = useState<GenericContent[]>([])
 
@@ -189,11 +189,9 @@ const TreeNode = ({ node, repository, renderIcon, path, expanded, setExpanded, o
       path: node.Path,
       requestInit: { signal: abortController.signal },
     })
-    const children = sortResults(childrenResult.d.results)
-    if (!children || children.length === 0) return
 
-    onSetCurrentPath(node.Path)
-    setChildNodes(childrenResult.d.results)
+    onSetCurrentNode(node)
+    setChildNodes(sortResults(childrenResult.d.results))
 
     setExpanded((prevExpanded) =>
       prevExpanded.includes(node.Id.toString()) ? prevExpanded : [...prevExpanded, node.Id.toString()],
@@ -215,7 +213,7 @@ const TreeNode = ({ node, repository, renderIcon, path, expanded, setExpanded, o
       label={
         <div style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }} onClick={handleNodeClick}>
           <div className={classes.treeIcon}>{renderIcon(node)}</div>
-          <div className={classes.treeLabel}>{node.DisplayName}</div>
+          <div className={classes.treeLabel}>{node.Name}</div>
         </div>
       }
       collapseIcon={<MinusSquare />}
@@ -230,7 +228,7 @@ const TreeNode = ({ node, repository, renderIcon, path, expanded, setExpanded, o
           path={path}
           expanded={expanded}
           setExpanded={setExpanded}
-          onSetCurrentPath={onSetCurrentPath}
+          onSetCurrentNode={onSetCurrentNode}
         />
       ))}
     </TreeItem>
@@ -258,6 +256,11 @@ interface PickerAdvancedProps {
   onSubmit?: (selectedItems: GenericContent[]) => void | undefined
   allowMultiple?: boolean
   selectionRoots?: string[]
+  showDialogTitle?: boolean
+  canPick?: boolean
+  showSearch?: boolean
+  setDestinationString?: React.Dispatch<React.SetStateAction<string | undefined>>
+  setCurrentNode?: React.Dispatch<React.SetStateAction<GenericContent>>
 }
 export const PickerAdvanced: React.FC<PickerAdvancedProps> = ({
   defaultValue,
@@ -268,6 +271,11 @@ export const PickerAdvanced: React.FC<PickerAdvancedProps> = ({
   onSubmit,
   allowMultiple = true,
   selectionRoots,
+  showDialogTitle = true,
+  canPick = true,
+  showSearch = true,
+  setDestinationString,
+  setCurrentNode,
 }) => {
   const classes = useStyles()
   const theme = useTheme()
@@ -318,8 +326,8 @@ export const PickerAdvanced: React.FC<PickerAdvancedProps> = ({
     cellRenderer: (props: { data: GenericContent }) => renderIcon(props.data),
     cellStyle: { padding: 0 },
   }
-  const availableCols = [iconCol, ...baseColumns, addCol]
-  const selectedCols = [iconCol, ...baseColumns, removeCol]
+  const availableCols = [iconCol, ...baseColumns, ...(canPick ? [addCol] : [])]
+  const selectedCols = [iconCol, ...baseColumns, ...(canPick ? [removeCol] : [])]
 
   //Button Actions
   const handleAdd = (item: GenericContent) => {
@@ -366,8 +374,17 @@ export const PickerAdvanced: React.FC<PickerAdvancedProps> = ({
     }, 250),
     [],
   )
+  const onSetCurrentNode = (currNode: GenericContent) => {
+    if (setCurrentNode) {
+      setCurrentNode(currNode)
+    }
+    onSetCurrentPath(currNode.Path)
+  }
   const onSetCurrentPath = (currPath: string) => {
     setCurrentPath(currPath)
+    if (setDestinationString) {
+      setDestinationString(currPath)
+    }
     if (currPath === path) {
       setIsInitPath(true)
     }
@@ -446,18 +463,20 @@ export const PickerAdvanced: React.FC<PickerAdvancedProps> = ({
 
   return (
     <div className={classes.mainCont}>
-      <DialogTitle className={classes.dialogTitle}>Picker</DialogTitle>
+      {showDialogTitle && <DialogTitle className={classes.dialogTitle}>Picker</DialogTitle>}
       <div className={classes.header}>
         <div className={classes.path}>{currentPath}</div>
         <div className={classes.search}>
-          <TextField
-            ref={searchFieldRef}
-            fullWidth={true}
-            placeholder={'Search'}
-            onChange={(ev) => {
-              onSearchFieldChange(ev.target.value)
-            }}
-          />
+          {showSearch && (
+            <TextField
+              ref={searchFieldRef}
+              fullWidth={true}
+              placeholder={'Search'}
+              onChange={(ev) => {
+                onSearchFieldChange(ev.target.value)
+              }}
+            />
+          )}
         </div>
       </div>
       <div className={classes.pickingCont}>
@@ -476,7 +495,7 @@ export const PickerAdvanced: React.FC<PickerAdvancedProps> = ({
                 path={path}
                 expanded={expanded}
                 setExpanded={setExpanded}
-                onSetCurrentPath={onSetCurrentPath}
+                onSetCurrentNode={onSetCurrentNode}
               />
             )}
           </TreeView>