-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
UI: Use form attribite with a form in doc root to prevent outer form …
…submit (#4283) * Use form attribite with a form in doc root to prevent outer form submit * Fix Unsplash a11y bug — don't focus on hidden links * Combine search and filter into one SearchFilterInput component for Unsplash * Refactor Browser and ProviderView * Refactor FileCard to hooks * Finish SearchFilterInput, add reset labels and no results copy, better styles * don't use debounce for now * combine useEffects, named export, extract RenderMetaFields component * inputCSSClassName --> inputClassName * Remove typo * 🤦 * Patch Preact to work with Jest * tabs vs spaces --------- Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
- Loading branch information
Showing
21 changed files
with
533 additions
and
475 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
46 changes: 46 additions & 0 deletions
46
packages/@uppy/dashboard/src/components/FileCard/RenderMetaFields.jsx
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,46 @@ | ||
| import { h } from 'preact' | ||
|
|
||
| export default function RenderMetaFields (props) { | ||
| const { | ||
| computedMetaFields, | ||
| requiredMetaFields, | ||
| updateMeta, | ||
| form, | ||
| formState, | ||
| } = props | ||
|
|
||
| const fieldCSSClasses = { | ||
| text: 'uppy-u-reset uppy-c-textInput uppy-Dashboard-FileCard-input', | ||
| } | ||
|
|
||
| return computedMetaFields.map((field) => { | ||
| const id = `uppy-Dashboard-FileCard-input-${field.id}` | ||
| const required = requiredMetaFields.includes(field.id) | ||
| return ( | ||
| <fieldset key={field.id} className="uppy-Dashboard-FileCard-fieldset"> | ||
| <label className="uppy-Dashboard-FileCard-label" htmlFor={id}>{field.name}</label> | ||
| {field.render !== undefined | ||
| ? field.render({ | ||
| value: formState[field.id], | ||
| onChange: (newVal) => updateMeta(newVal, field.id), | ||
| fieldCSSClasses, | ||
| required, | ||
| form: form.id, | ||
| }, h) | ||
| : ( | ||
| <input | ||
| className={fieldCSSClasses.text} | ||
| id={id} | ||
| form={form.id} | ||
| type={field.type || 'text'} | ||
| required={required} | ||
| value={formState[field.id]} | ||
| placeholder={field.placeholder} | ||
| onInput={ev => updateMeta(ev.target.value, field.id)} | ||
| data-uppy-super-focusable | ||
| /> | ||
| )} | ||
| </fieldset> | ||
| ) | ||
| }) | ||
| } |
Oops, something went wrong.