feat: add readonly mode for FilesList

best-doctor · Nov 21, 2022 · 6141dd4 · 6141dd4
1 parent 82c3ec0
commit 6141dd4
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bestdoctor/ke-beta",
-  "version": "13.2.7",
+  "version": "13.2.8",
   "description": "BestDoctor back-office UI constructor",
   "author": "pro100filipp",
   "main": "dist/index.js",

diff --git a/src/FormControls/FilesUpload/FilesList.tsx b/src/FormControls/FilesUpload/FilesList.tsx
@@ -1,6 +1,6 @@
 // Это легаси
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useCallback } from 'react'
 import { List, ListIcon, ListItem, IconButton, Link, LinkProps } from '@chakra-ui/react'
 import { Paperclip, X } from 'react-feather'
 
@@ -13,16 +13,39 @@ const listItemCss = css`
   }
 `
 
+type FilesListProps = {
+  value: readonly FileDescriptor[]
+  listItemIcon?: React.ComponentType
+  linkProps?: Omit<LinkProps, 'href'>
+} & (
+  | {
+      isReadOnly: true
+      onChange: undefined
+    }
+  | {
+      isReadOnly?: false
+      onChange: (value: FileDescriptor[]) => void
+    }
+)
+
 export function FilesList({
   value,
   onChange,
   listItemIcon = Paperclip,
   linkProps,
+  isReadOnly = false,
 }: FilesListProps): ReactElement<FilesListProps> {
-  const deleteFile = (file: FileDescriptor): void => {
-    const restFiles = value.filter((f) => f.uuid !== file.uuid)
-    onChange(restFiles)
-  }
+  const deleteFile = useCallback(
+    (file: FileDescriptor): void => {
+      if (!onChange) {
+        return
+      }
+
+      const restFiles = value.filter((f) => f.uuid !== file.uuid)
+      onChange(restFiles)
+    },
+    [onChange, value]
+  )
 
   return (
     <List>
@@ -36,23 +59,18 @@ export function FilesList({
           ) : (
             file.name
           )}
-          <IconButton
-            aria-label="Удалить"
-            variant="unstyled"
-            size="xs"
-            icon={<X color="red" size={16} />}
-            ml={2}
-            onClick={() => deleteFile(file)}
-          />
+          {!isReadOnly && (
+            <IconButton
+              aria-label="Удалить"
+              variant="unstyled"
+              size="xs"
+              icon={<X color="red" size={16} />}
+              ml={2}
+              onClick={() => deleteFile(file)}
+            />
+          )}
         </ListItem>
       ))}
     </List>
   )
 }
-
-interface FilesListProps {
-  value: readonly FileDescriptor[]
-  onChange: (value: FileDescriptor[]) => void
-  listItemIcon?: React.ComponentType
-  linkProps?: Omit<LinkProps, 'href'>
-}