This repository was archived by the owner on Jul 9, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 374
refactor creation flow[WIP] #1288
Closed
Closed
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
fa30e8a
factor creation flow
liweitian 8e6a312
update location set function
liweitian daca8b2
remove wrong commited code
liweitian a32c458
only read into defined template
liweitian d7f8502
update default folder if changed
liweitian a653f74
Merge branch 'master' into factorCreationFlow
liweitian File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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
40 changes: 40 additions & 0 deletions
40
Composer/packages/client/src/CreationFlow/DialogModal/index.js
This file contains hidden or 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,40 @@ | ||
| import React, { Fragment } from 'react'; | ||
| import formatMessage from 'format-message'; | ||
| import { Stack, StackItem, TextField } from 'office-ui-fabric-react'; | ||
|
|
||
| import { styles as wizardStyles } from '../StepWizard/styles'; | ||
|
|
||
| import { name, description } from './styles'; | ||
|
|
||
| export function DialogModal(props) { | ||
| const { horizontal, formData, updateForm, getErrorMessage } = props; | ||
|
|
||
| return ( | ||
| <Fragment> | ||
| <input type="submit" style={{ display: 'none' }} /> | ||
| <Stack horizontal={horizontal} gap="2rem" styles={wizardStyles.stackinput}> | ||
| <StackItem grow={0} styles={wizardStyles.halfstack}> | ||
| <TextField | ||
| label={formatMessage('Name')} | ||
| value={formData.name} | ||
| styles={name} | ||
| onChange={updateForm('name')} | ||
| errorMessage={formData.errors.name} | ||
| onGetErrorMessage={getErrorMessage} | ||
| data-testid="NewDialogName" | ||
| /> | ||
| </StackItem> | ||
| <StackItem grow={0} styles={wizardStyles.halfstack}> | ||
| <TextField | ||
| styles={description} | ||
| value={formData.description} | ||
| label={formatMessage('Description')} | ||
| multiline | ||
| resizable={false} | ||
| onChange={updateForm('description')} | ||
| /> | ||
| </StackItem> | ||
| </Stack> | ||
| </Fragment> | ||
| ); | ||
| } | ||
File renamed without changes.
This file contains hidden or 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
89 changes: 80 additions & 9 deletions
89
Composer/packages/client/src/pages/design/new-dialog-modal.js
This file contains hidden or 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,20 +1,91 @@ | ||
| import React from 'react'; | ||
| import React, { useState } from 'react'; | ||
| import { DialogFooter, PrimaryButton, DefaultButton } from 'office-ui-fabric-react'; | ||
| import formatMessage from 'format-message'; | ||
|
|
||
| import { DialogCreationCopy } from '../../constants'; | ||
| import { DefineConversation } from '../../CreationFlow/DefineConversation/index'; | ||
| import { DialogModal } from '../../CreationFlow/DialogModal/index'; | ||
| import { DialogWrapper } from '../../components/DialogWrapper/index'; | ||
|
|
||
| const nameRegex = /^[a-zA-Z0-9-_.]+$/; | ||
|
|
||
| const validateForm = data => { | ||
| const errors = {}; | ||
| const { name } = data; | ||
|
|
||
| if (!name || !nameRegex.test(name)) { | ||
| errors.name = formatMessage( | ||
| 'Spaces and special characters are not allowed. Use letters, numbers, -, or _., numbers, -, and _' | ||
| ); | ||
| } | ||
|
|
||
| return errors; | ||
| }; | ||
|
|
||
| export default function NewDialogModal(props) { | ||
| const { isOpen, onDismiss, onSubmit, onGetErrorMessage } = props; | ||
| const [formData, setFormData] = useState({ errors: {} }); | ||
| const [disable, setDisable] = useState(false); | ||
| const updateForm = field => (e, newValue) => { | ||
| setFormData({ | ||
| ...formData, | ||
| errors: {}, | ||
| [field]: newValue, | ||
| }); | ||
| }; | ||
|
|
||
| const getErrorMessage = text => { | ||
| if (typeof onGetErrorMessage === 'function') { | ||
| const result = onGetErrorMessage(text); | ||
| if (result === '' && disable) { | ||
| setDisable(false); | ||
| } | ||
|
|
||
| if (result !== '' && !disable) { | ||
| setDisable(true); | ||
| } | ||
|
|
||
| return result; | ||
| } else { | ||
| return ''; | ||
| } | ||
| }; | ||
|
|
||
| const onClickCancel = () => { | ||
| setFormData({ errors: {} }); | ||
| onDismiss(); | ||
| }; | ||
|
|
||
| const handleSubmit = e => { | ||
| e.preventDefault(); | ||
| const errors = validateForm(formData); | ||
|
|
||
| if (Object.keys(errors).length) { | ||
| setFormData({ | ||
| ...formData, | ||
| errors, | ||
| }); | ||
| return; | ||
| } | ||
|
|
||
| onSubmit({ | ||
| ...formData, | ||
| }); | ||
| }; | ||
| return ( | ||
| <DialogWrapper isOpen={isOpen} onDismiss={onDismiss} {...DialogCreationCopy.DEFINE_CONVERSATION_OBJECTIVE}> | ||
| <DefineConversation | ||
| onSubmit={onSubmit} | ||
| onDismiss={onDismiss} | ||
| onGetErrorMessage={onGetErrorMessage} | ||
| enableLocationBrowse={false} | ||
| /> | ||
| <DialogWrapper isOpen={isOpen} onDismiss={onClickCancel} {...DialogCreationCopy.DEFINE_CONVERSATION_OBJECTIVE}> | ||
| <form onSubmit={handleSubmit}> | ||
| <DialogModal | ||
| onGetErrorMessage={onGetErrorMessage} | ||
| horizontal={false} | ||
| getErrorMessage={getErrorMessage} | ||
| updateForm={updateForm} | ||
| formData={formData} | ||
| /> | ||
| <DialogFooter> | ||
| <DefaultButton onClick={onClickCancel} text={formatMessage('Cancel')} /> | ||
| <PrimaryButton onClick={handleSubmit} text={formatMessage('Next')} disabled={disable} /> | ||
| </DialogFooter> | ||
| </form> | ||
| </DialogWrapper> | ||
| ); | ||
| } |
This file contains hidden or 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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's good to see that, you are towards the direction to make more pure component.
But the interface here needs a bit rework, for example,
think about what's your "DialogModal“ component is designed for, then looks at this props.
Multiple problems, what do you mean by form? What should in the form? if your form only holds one data field, it's probably should be called field?
then this "updateForm, getErrorMessage", if you look at the naming, it's not in the same level, i think you mean onChange, onError?
But you know, if you delegate onChange, there should not be an on Error, because onChange tells everything, if you want to design an onError, you want to put a validator here, right?
Let's talk about this tomorrow.