Skip to content

Commit

Permalink
slightly better syntax than previous while retaining indentation
Browse files Browse the repository at this point in the history
Signed-off-by: Anton Gilgur <[email protected]>
  • Loading branch information
Anton Gilgur committed Aug 22, 2024
1 parent 460c1b3 commit ae3a40f
Showing 1 changed file with 36 additions and 33 deletions.
69 changes: 36 additions & 33 deletions stories/popup.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,12 @@ export const Prompt = () => {
<FormField label='Last Name' formApi={api} field='lastName' component={Text} />
</div>
</React.Fragment>
), { validate: (vals) => ({
firstName: !vals.firstName && 'First Name is required',
lastName: !vals.lastName && 'Last Name is required',
})});
), {
validate: (vals) => ({
firstName: !vals.firstName && 'First Name is required',
lastName: !vals.lastName && 'Last Name is required',
})
});

action('Prompt values')(values);
}}>Click me</button>
Expand Down Expand Up @@ -273,36 +275,37 @@ export const PromptWithReactCheckboxThatIsCheckedByDefaultUsernameDefaultSetToAd
<App>
{(apis) => (
<button className='argo-button argo-button--base' onClick={async () => {
const values = await apis.popup.prompt('Setting default values in popup example', (api) => (
<React.Fragment>
<div className='argo-form-row'>
<FormField label='Username' formApi={api} field='username' component={Text} />
</div>
<div className='argo-form-row'>
<FormField label='Password' formApi={api} field='password' component={Text} componentProps={{type: 'password'}} />
</div>
<div className='argo-form-row'>
<ReactCheckbox id='popup-react-checkbox' field='checkboxField' />{' '}
<label htmlFor='popup-react-checkbox'>This is a React Checkbox</label>
</div>
</React.Fragment>
), {
validate: (vals) => ({
username: !vals.username && 'Username is required',
password: !vals.password && 'Password is required',
}),
submit: (vals, api, close) => {
if (vals.username === 'admin' && vals.password === 'test') {
close();
action('Prompt values')(vals);
} else {
api.setError('password', 'Username or password is invalid');
}
const values = await apis.popup.prompt('Setting default values in popup example',
(api) => (
<React.Fragment>
<div className='argo-form-row'>
<FormField label='Username' formApi={api} field='username' component={Text} />
</div>
<div className='argo-form-row'>
<FormField label='Password' formApi={api} field='password' component={Text} componentProps={{type: 'password'}} />
</div>
<div className='argo-form-row'>
<ReactCheckbox id='popup-react-checkbox' field='checkboxField' />{' '}
<label htmlFor='popup-react-checkbox'>This is a React Checkbox</label>
</div>
</React.Fragment>
), {
validate: (vals) => ({
username: !vals.username && 'Username is required',
password: !vals.password && 'Password is required',
}),
submit: (vals, api, close) => {
if (vals.username === 'admin' && vals.password === 'test') {
close();
action('Prompt values')(vals);
} else {
api.setError('password', 'Username or password is invalid');
}
},
},
},
undefined,
undefined,
{checkboxField: true, username: 'admin'});
undefined,
undefined,
{checkboxField: true, username: 'admin'});
action('Prompt values')(values);
}}>Click me</button>
)}
Expand Down

0 comments on commit ae3a40f

Please sign in to comment.