-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
UI rendering with dnd controls, test passing; handles inactive.
- Loading branch information
1 parent
51eb8ab
commit 91ed5df
Showing
7 changed files
with
131 additions
and
125 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,136 +1,47 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { createFormSession, getPattern } from '@atj/forms'; | ||
| import { createFormSession } from '@atj/forms'; | ||
|
|
||
| import Form, { | ||
| type ComponentForPattern, | ||
| type PatternComponent, | ||
| type FormUIContext, | ||
| } from '../../Form'; | ||
| import Form, { PatternComponent, type ComponentForPattern } from '../../Form'; | ||
|
|
||
| import { PreviewPattern } from './PreviewPattern'; | ||
| import { PatternPreviewSequence } from './PreviewSequencePattern'; | ||
| import { useFormEditStore } from './store'; | ||
| import DraggableList from './DraggableList'; | ||
|
|
||
| export const PreviewForm = () => { | ||
| const uiContext = useFormEditStore(state => state.context); | ||
| const form = useFormEditStore(state => state.form); | ||
|
|
||
| const previewUiContext: FormUIContext = { | ||
| config: uiContext.config, | ||
| // TODO: We'll want to hoist this definition up to a higher level, so we | ||
| // don't have to regenerate it every time we render the form. | ||
| components: createPreviewComponents( | ||
| uiContext.components, | ||
| uiContext.uswdsRoot | ||
| ), | ||
| uswdsRoot: uiContext.uswdsRoot, | ||
| }; | ||
| const disposable = createFormSession(form); // nullSession instead? | ||
|
|
||
| return ( | ||
| <Form | ||
| isPreview={true} | ||
| context={previewUiContext} | ||
| context={{ | ||
| config: uiContext.config, | ||
| // TODO: We might want to hoist this definition up to a higher level, | ||
| // so we don't have to regenerate it every time we render the form. | ||
| components: createPreviewComponents(uiContext.components), | ||
| uswdsRoot: uiContext.uswdsRoot, | ||
| }} | ||
| session={disposable} | ||
| ></Form> | ||
| ); | ||
| }; | ||
|
|
||
| const createSequencePatternPreviewComponent = ( | ||
| Component: PatternComponent, | ||
| previewComponents: ComponentForPattern | ||
| ) => { | ||
| const PatternPreviewSequenceComponent: PatternComponent = props => { | ||
| const form = useFormEditStore(state => state.form); | ||
| const setSelectedPattern = useFormEditStore( | ||
| state => state.setSelectedPattern | ||
| ); | ||
| const pattern = getPattern(form, props._patternId); | ||
| return ( | ||
| <DraggableList | ||
| form={form} | ||
| pattern={pattern} | ||
| setSelectedPattern={setSelectedPattern} | ||
| > | ||
| <Component _patternId={pattern.id} {...pattern}></Component> | ||
| </DraggableList> | ||
| ); | ||
| }; | ||
| return PatternPreviewSequenceComponent; | ||
| }; | ||
|
|
||
| const createPatternPreviewComponent = ( | ||
| Component: PatternComponent, | ||
| uswdsRoot: string | ||
| ) => { | ||
| const PatternPreviewComponent: PatternComponent = props => { | ||
| const context = useFormEditStore(state => state.context); | ||
| const selectedPattern = useFormEditStore(state => state.selectedPattern); | ||
| const handleEditClick = useFormEditStore(state => state.handleEditClick); | ||
|
|
||
| const isSelected = selectedPattern?.id === props._patternId; | ||
| const divClassNames = isSelected | ||
| ? 'form-group-row field-selected' | ||
| : 'form-group-row'; | ||
| const EditComponent = context.editComponents[props.type]; | ||
|
|
||
| return ( | ||
| <div className={divClassNames} data-id={props._patternId}> | ||
| <Component {...props} /> | ||
| <span className="edit-button-icon"> | ||
| {EditComponent ? ( | ||
| <button | ||
| className="usa-button usa-button--secondary usa-button--unstyled" | ||
| onClick={() => handleEditClick(props._patternId)} | ||
| onKeyDown={e => { | ||
| if (e.key === 'Enter') { | ||
| handleEditClick(props._patternId); | ||
| } | ||
| }} | ||
| tabIndex={0} | ||
| aria-label="Edit form group" | ||
| > | ||
| <svg | ||
| className="usa-icon" | ||
| aria-hidden="true" | ||
| focusable="false" | ||
| role="img" | ||
| > | ||
| <use xlinkHref={`${uswdsRoot}img/sprite.svg#settings`}></use> | ||
| </svg> | ||
| </button> | ||
| ) : null} | ||
| </span> | ||
| </div> | ||
| ); | ||
| }; | ||
| return PatternPreviewComponent; | ||
| }; | ||
|
|
||
| const createPreviewComponents = ( | ||
| components: ComponentForPattern, | ||
| uswdsRoot: string | ||
| components: ComponentForPattern | ||
| ): ComponentForPattern => { | ||
| const previewComponents: ComponentForPattern = {}; | ||
| // TODO: Create a configurable way to to define preview components. | ||
| for (const [patternType, Component] of Object.entries(components)) { | ||
| previewComponents[patternType] = Component; | ||
| if (patternType === 'sequence') { | ||
| previewComponents[patternType] = createSequencePatternPreviewComponent( | ||
| Component, | ||
| previewComponents | ||
| ); | ||
| } | ||
| /* | ||
| } else if (patternType === 'form-summary') { | ||
| previewComponents[patternType] = Component; | ||
| previewComponents[patternType] = | ||
| PatternPreviewSequence as PatternComponent; | ||
| } else { | ||
| //previewComponents[patternType] = Component; | ||
| previewComponents[patternType] = createPatternPreviewComponent( | ||
| Component, | ||
| uswdsRoot | ||
| ); | ||
| previewComponents[patternType] = PreviewPattern; | ||
| } | ||
| */ | ||
| } | ||
| return previewComponents; | ||
| }; |
49 changes: 49 additions & 0 deletions
49
packages/design/src/FormManager/FormEdit/PreviewPattern.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { PatternComponent } from '../../Form'; | ||
| import { useFormEditStore } from './store'; | ||
|
|
||
| export const PreviewPattern: PatternComponent = function PreviewPattern(props) { | ||
| const context = useFormEditStore(state => state.context); | ||
| const selectedPattern = useFormEditStore(state => state.selectedPattern); | ||
| const handleEditClick = useFormEditStore(state => state.handleEditClick); | ||
|
|
||
| const isSelected = selectedPattern?.id === props._patternId; | ||
| const divClassNames = isSelected | ||
| ? 'form-group-row field-selected' | ||
| : 'form-group-row'; | ||
| const Component = context.components[props.type]; | ||
| const EditComponent = context.editComponents[props.type]; | ||
|
|
||
| return ( | ||
| <div className={divClassNames} data-id={props._patternId}> | ||
| <Component {...props} /> | ||
| <span className="edit-button-icon"> | ||
| {EditComponent ? ( | ||
| <button | ||
| className="usa-button usa-button--secondary usa-button--unstyled" | ||
| onClick={() => handleEditClick(props._patternId)} | ||
| onKeyDown={e => { | ||
| if (e.key === 'Enter') { | ||
| handleEditClick(props._patternId); | ||
| } | ||
| }} | ||
| tabIndex={0} | ||
| aria-label="Edit form group" | ||
| > | ||
| <svg | ||
| className="usa-icon" | ||
| aria-hidden="true" | ||
| focusable="false" | ||
| role="img" | ||
| > | ||
| <use | ||
| xlinkHref={`${context.uswdsRoot}img/sprite.svg#settings`} | ||
| ></use> | ||
| </svg> | ||
| </button> | ||
| ) : null} | ||
| </span> | ||
| </div> | ||
| ); | ||
| }; |
43 changes: 43 additions & 0 deletions
43
packages/design/src/FormManager/FormEdit/PreviewSequencePattern.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { PatternProps, getPattern } from '@atj/forms'; | ||
|
|
||
| import { PatternComponent } from '../../Form'; | ||
| import DraggableList from './DraggableList'; | ||
| import { useFormEditStore } from './store'; | ||
| import { SequencePattern } from '@atj/forms/src/patterns/sequence'; | ||
|
|
||
| // TODO: consider merging this component with DraggableList, to clean up | ||
| // sematics around how its children are handled. | ||
| export const PatternPreviewSequence: PatternComponent< | ||
| PatternProps<SequencePattern> | ||
| > = function PatternPreviewSequence(props) { | ||
| const form = useFormEditStore(state => state.form); | ||
| const setSelectedPattern = useFormEditStore( | ||
| state => state.setSelectedPattern | ||
| ); | ||
|
|
||
| const pattern = getPattern(form, props._patternId); | ||
|
|
||
| /** | ||
| * Here, we assume that we are rendering a "sequence" pattern, and that | ||
| * sequences have no styling of their own. If sequences were to get their | ||
| * own styling (like other components), this component would need to be | ||
| * updated to replicate the styles, or the wrapping structure would need to | ||
| * be updated to ensure that we pass the correct children to DraggableList. | ||
| * | ||
| * In other words, we'd want to render: | ||
| * const Component = context.components[props.type]; | ||
| * ... and then something like: | ||
| * <Component _patternId={pattern.id} {...pattern}>{props.children}</Component> | ||
| */ | ||
| return ( | ||
| <DraggableList | ||
| form={form} | ||
| pattern={pattern} | ||
| setSelectedPattern={setSelectedPattern} | ||
| > | ||
| {props.children} | ||
| </DraggableList> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters