Fix accordion drop issue (premieroctet#28)

* Fix accordion drop issue * Update src/components/editor/previews/AccordionPreview.tsx Co-Authored-By: foyarash <hfoyart@premieroctet.com> * Fix typing Co-authored-by: foyarash <hfoyart@premieroctet.com>
cac-groups · Feb 10, 2020 · ad4c615 · ad4c615
1 parent 5bbafa2
commit ad4c615
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 97 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -13,81 +13,6 @@ import ErrorBoundary from './components/ErrorBoundary'
 import { decodeShareUrl } from './utils/share'
 import useDispatch from './hooks/useDispatch'
 
-export const COMPONENTS: ComponentType[] = [
-  'Alert',
-  'AlertDescription',
-  'AlertIcon',
-  'AlertTitle',
-  'Avatar',
-  'AvatarBadge',
-  'AvatarGroup',
-  'Badge',
-  'Box',
-  'Button',
-  'Checkbox',
-  'CircularProgress',
-  'CloseButton',
-  'Code',
-  'Divider',
-  'Flex',
-  'FormControl',
-  'FormLabel',
-  'FormHelperText',
-  'FormErrorMessage',
-  'Heading',
-  'Icon',
-  'IconButton',
-  'Image',
-  'Input',
-  'Link',
-  'List',
-  'ListItem',
-  'Progress',
-  'Radio',
-  'RadioGroup',
-  'SimpleGrid',
-  'Spinner',
-  'Select',
-  'Stack',
-  'Switch',
-  'Tag',
-  'Text',
-  'Textarea',
-  'Tab',
-  'Accordion',
-  'Editable',
-  'AspectRatioBox',
-  'Breadcrumb',
-  'Menu',
-  'NumberInput',
-  'AccordionItem',
-  'AccordionHeader',
-  'AccordionPanel',
-  'AccordionIcon',
-  /*"Tabs",
-  "TabList",
-  "TabPanel",
-  "TabPanels"*/
-]
-
-export const rootComponents = COMPONENTS
-  // Remove specific components
-  .filter(
-    name =>
-      ![
-        'AlertIcon',
-        'AlertDescription',
-        'AlertTitle',
-        'AvatarBadge',
-        'AccordionItem',
-        'AccordionHeader',
-        'AccordionPanel',
-        'AccordionIcon',
-      ].includes(name),
-  )
-  // Allow meta components
-  .concat(['AlertMeta', 'FormControlMeta', 'AccordionMeta', 'ListMeta'])
-
 const App = () => {
   const { handlers } = useShortcuts()
   const dispatch = useDispatch()

diff --git a/src/components/editor/ComponentPreview.tsx b/src/components/editor/ComponentPreview.tsx
@@ -12,6 +12,8 @@ import AvatarPreview, {
 import StackPreview from './previews/StackPreview'
 import AccordionPreview, {
   AccordionHeaderPreview,
+  AccordionItemPreview,
+  AccordionPanelPreview,
 } from './previews/AccordionPreview'
 import { RadioGroupPreview } from './previews/RadioPreview'
 import SelectPreview from './previews/SelectPreview'
@@ -81,8 +83,6 @@ const ComponentPreview: React.FC<{
     case 'Box':
     case 'SimpleGrid':
     case 'Flex':
-    case 'AccordionPanel':
-    case 'AccordionItem':
     case 'FormControl':
     case 'Tabs':
     case 'List':
@@ -129,7 +129,10 @@ const ComponentPreview: React.FC<{
       return <InputLeftAddonPreview component={component} />
     case 'InputRightAddon':
       return <InputRightAddonPreview component={component} />
-
+    case 'AccordionItem':
+      return <AccordionItemPreview component={component} />
+    case 'AccordionPanel':
+      return <AccordionPanelPreview component={component} />
     default:
       return null
   }

diff --git a/src/components/editor/WithRefSimplePreviewContainer.tsx b/src/components/editor/WithRefSimplePreviewContainer.tsx
@@ -5,8 +5,9 @@ import { Box } from '@chakra-ui/core'
 const WithRefSimplePreviewContainer: React.FC<{
   component: IComponent
   type: string | FunctionComponent<any> | ComponentClass<any, any>
-}> = ({ component, type }) => {
-  const { props, ref } = useInteractive(component)
+  enableVisualHelper?: boolean
+}> = ({ component, type, enableVisualHelper }) => {
+  const { props, ref } = useInteractive(component, enableVisualHelper)
   let boxProps: any = {}
 
   return (

diff --git a/src/components/editor/previews/AccordionPreview.tsx b/src/components/editor/previews/AccordionPreview.tsx
@@ -1,15 +1,18 @@
 import React from 'react'
 import { useInteractive } from '../../../hooks/useInteractive'
 import { useDropComponent } from '../../../hooks/useDropComponent'
-import { Box, Accordion, AccordionHeader } from '@chakra-ui/core'
+import {
+  Box,
+  Accordion,
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+} from '@chakra-ui/core'
 import ComponentPreview from '../ComponentPreview'
+import { COMPONENTS } from '../../../utils/editor'
 
-const acceptedTypes = [
-  'AccordionItem',
-  'AccordionHeader',
-  'AccordionPanel',
-  'AccordionIcon',
-] as ComponentType[]
+const acceptedTypes: ComponentType[] = ['AccordionItem']
+const acceptedItemTypes: ComponentType[] = ['AccordionHeader', 'AccordionPanel']
 
 const AccordionPreview: React.FC<IPreviewProps> = ({ component }) => {
   const { props, ref } = useInteractive(component, true)
@@ -34,7 +37,7 @@ const AccordionPreview: React.FC<IPreviewProps> = ({ component }) => {
 
 export const AccordionHeaderPreview = ({ component }: IPreviewProps) => {
   const { props, ref } = useInteractive(component, true)
-  const { drop, isOver } = useDropComponent(component.id)
+  const { drop, isOver } = useDropComponent(component.id, COMPONENTS)
 
   if (isOver) {
     props.bg = 'teal.50'
@@ -49,4 +52,46 @@ export const AccordionHeaderPreview = ({ component }: IPreviewProps) => {
   )
 }
 
+export const AccordionItemPreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component, true)
+  const { drop, isOver } = useDropComponent(component.id, acceptedItemTypes)
+
+  let boxProps: any = {}
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <Box ref={drop(ref)} {...boxProps}>
+      <AccordionItem {...props}>
+        {component.children.map((key: string) => (
+          <ComponentPreview key={key} componentName={key} />
+        ))}
+      </AccordionItem>
+    </Box>
+  )
+}
+
+export const AccordionPanelPreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component, true)
+  const { drop, isOver } = useDropComponent(component.id, COMPONENTS)
+
+  let boxProps: any = {}
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <Box ref={drop(ref)} {...boxProps}>
+      <AccordionPanel {...props}>
+        {component.children.map((key: string) => (
+          <ComponentPreview key={key} componentName={key} />
+        ))}
+      </AccordionPanel>
+    </Box>
+  )
+}
+
 export default AccordionPreview
diff --git a/src/utils/editor.ts b/src/utils/editor.ts
@@ -55,6 +55,12 @@ export const COMPONENTS: ComponentType[] = [
   'AccordionIcon',
   'InputRightElement',
   'InputLeftElement',
+  // Allow meta components
+  'AlertMeta',
+  'FormControlMeta',
+  'AccordionMeta',
+  'ListMeta',
+  'InputGroupMeta',
 ]
 
 export const rootComponents = COMPONENTS
@@ -66,17 +72,8 @@ export const rootComponents = COMPONENTS
         'AlertDescription',
         'AlertTitle',
         'AvatarBadge',
-        'AccordionItem',
         'AccordionHeader',
         'AccordionPanel',
         'AccordionIcon',
       ].includes(name),
   )
-  // Allow meta components
-  .concat([
-    'AlertMeta',
-    'FormControlMeta',
-    'AccordionMeta',
-    'ListMeta',
-    'InputGroupMeta',
-  ])