Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade conditional #26

Merged
merged 8 commits into from
Nov 8, 2022
Merged

Upgrade conditional #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b0a8893
made changes to all required files
ayodeji-ti Nov 7, 2022
ba73365
True and false box can only be used in conditional
ayodeji-ti Nov 7, 2022
375f242
made conditional the parent component
ayodeji-ti Nov 8, 2022
20ad8b4
Two different boxes with different refs
ayodeji-ti Nov 8, 2022
a44de54
preview works as expected
ayodeji-ti Nov 8, 2022
6fdaaa7
updated code generation
ayodeji-ti Nov 8, 2022
5d2ada4
re4moved truth and false box
ayodeji-ti Nov 8, 2022
15dd095
added null check
ayodeji-ti Nov 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 102 additions & 6 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

28 changes: 11 additions & 17 deletions src/components/editor/previews/ConditionalPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,29 @@ import ComponentPreview from '~components/editor/ComponentPreview'
import { useDropComponent } from '~hooks/useDropComponent'
import { useInteractive } from '~hooks/useInteractive'

const ConditionalPreview: React.FC<{ component: IComponent }> = ({
component,
}) => {
const { drop, isOver } = useDropComponent(component.id)
const ConditionalPreview: React.FC<IPreviewProps> = ({ component }) => {
const acceptedTypes = [
'Box',
] as ComponentType[]
const { props, ref } = useInteractive(component, true)
const { drop, isOver } = useDropComponent(component.id, acceptedTypes)


if (isOver) {
props.bg = 'teal.50'
}

return (
<Box pos="relative">
<Box pos="relative" {...props} ref={drop(ref)}>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need ref for outerbox

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So that we can move the conditional component, if we don't add the ref, then asides from the initial drag and drop, we won't be able to move it again

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But that means it can accept other draggable items as well, which is not desired. Try to avoid that

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, only boxes, if you check the conditional preview, you would see that I have added the accepted type as Box, any other component won't be accepted, you can try it out for yourself
Screenshot (399)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, great

{props.show === 'show-both' || props.show === undefined ? (
<>
<Box pos="relative" ref={drop(ref)} {...props}>
<ComponentPreview componentName={component.children[0]} />
</Box>
<Box pos="relative" ref={drop(ref)} {...props}>
<ComponentPreview componentName={component.children[1]} />
</Box>
<ComponentPreview componentName={component?.children[0]} />
<ComponentPreview componentName={component?.children[1]} />
</>
) : props.show === 'show-true' ? (
<Box pos="relative" ref={drop(ref)} {...props}>
<ComponentPreview componentName={component.children[0]} />
</Box>
<ComponentPreview componentName={component?.children[0]} />
) : (
<Box pos="relative" ref={drop(ref)} {...props}>
<ComponentPreview componentName={component.children[1]} />
</Box>
<ComponentPreview componentName={component?.children[1]} />
)}
</Box>
)
Expand Down
6 changes: 5 additions & 1 deletion src/componentsList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,11 @@ export const menuItems: MenuItems = {
},
Button: {},
Center: {},
Conditional: {},
Conditional: {
children: {
Box: {}
},
},
Container: {},
Checkbox: {},
CircularProgress: {},
Expand Down
17 changes: 17 additions & 0 deletions src/core/models/composer/builder.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,22 @@ export const buildBreadcrumb = (parent: string): ComposedComponent => {
}
}

export const buildConditional = (parent: string): ComposedComponent => {
const composer = new Composer()

const nodeId = composer.addNode({ type: 'Conditional', parent })
composer.addNode({ type: 'Box', parent: nodeId })
composer.addNode({ type: 'Box', parent: nodeId })

const components = composer.getComponents()

return {
components,
root: nodeId,
parent,
}
}

export const buildFormControl = (parent: string): ComposedComponent => {
const composer = new Composer()

Expand Down Expand Up @@ -281,6 +297,7 @@ const builders: ComposerBuilders = {
StatMeta: buildStats,
TableMeta: buildTable,
TableRowMeta: buildTableRow,
ConditionalMeta: buildConditional,
}

export default builders
1 change: 1 addition & 0 deletions src/react-app-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ type MetaComponentType =
| 'StatMeta'
| 'TableMeta'
| 'TableRowMeta'
| 'ConditionalMeta'

interface ParametersType {
name: string
Expand Down
22 changes: 6 additions & 16 deletions src/utils/code.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,20 +429,14 @@ export const generateCode = async (
name =>
name !== 'root' &&
components[name].type !== 'Conditional' &&
components[name].type !== 'Loop' &&
components[name].type !== 'Box' &&
!Object.keys(currentComponents).includes(components[name].type),
)
.map(name => components[name].type),
),
]

const loopIndex = imports.indexOf('Loop')
const boxIndex = imports.indexOf('Box')
if (loopIndex !== -1 && boxIndex === -1) {
imports[loopIndex] = 'Box'
} else if (loopIndex !== -1 && boxIndex !== -1) {
imports = imports.filter(imp => imp !== 'Loop')
}

const customImports = [
...new Set(
Object.keys(components)
Expand All @@ -466,6 +460,7 @@ export const generateCode = async (
code = `import React, {RefObject} from 'react';
import {
ChakraProvider,
Box,
${imports.join(',')}
} from "@chakra-ui/react";${
iconImports.length
Expand Down Expand Up @@ -506,20 +501,14 @@ export const generateOcTsxCode = async (
name =>
name !== 'root' &&
components[name].type !== 'Conditional' &&
components[name].type !== 'Loop' &&
components[name].type !== 'Box' &&
!Object.keys(currentComponents).includes(components[name].type),
)
.map(name => components[name].type),
),
]

const loopIndex = imports.indexOf('Loop')
const boxIndex = imports.indexOf('Box')
if (loopIndex !== -1 && boxIndex === -1) {
imports[loopIndex] = 'Box'
} else if (loopIndex !== -1 && boxIndex !== -1) {
imports = imports.filter(imp => imp !== 'Loop')
}

const customImports = [
...new Set(
Object.keys(components)
Expand All @@ -543,6 +532,7 @@ export const generateOcTsxCode = async (
code = `import React, {RefObject} from 'react';
import {
ChakraProvider,
Box,
${imports.join(',')}
} from "@chakra-ui/react";${
iconImports.length
Expand Down
1 change: 1 addition & 0 deletions src/utils/editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ const COMPONENTS: (ComponentType | MetaComponentType)[] = [
'StatMeta',
'TableMeta',
'TableRowMeta',
'ConditionalMeta',
// Allow custom components
'Conditional',
'Loop',
Expand Down