forked from athenekilta/ilmomasiina
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #117 from Tietokilta/fix/editor-perf
Rewrite editor using react-final-form
- Loading branch information
Showing
31 changed files
with
1,609 additions
and
1,154 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
48 changes: 48 additions & 0 deletions
48
packages/ilmomasiina-components/src/components/BaseFieldRow/index.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,48 @@ | ||
| import React, { ReactNode } from 'react'; | ||
|
|
||
| import { Col, Form, Row } from 'react-bootstrap'; | ||
|
|
||
| export type BaseFieldRowProps = { | ||
| /** The name of the field in the Formik data. */ | ||
| name: string; | ||
| /** The label placed in the left column. */ | ||
| label?: string; | ||
| /** The help string placed below the field. */ | ||
| help?: ReactNode; | ||
| /** Whether the field is required. */ | ||
| required?: boolean; | ||
| /** Error message rendered below the field. */ | ||
| error?: ReactNode; | ||
| /** Extra feedback rendered below the field. Bring your own `Form.Control.Feedback`. */ | ||
| extraFeedback?: ReactNode; | ||
| /** `true` to adjust the vertical alignment of the left column label for checkboxes/radios. */ | ||
| checkAlign?: boolean; | ||
| children: ReactNode; | ||
| }; | ||
|
|
||
| export default function BaseFieldRow({ | ||
| name, | ||
| label = '', | ||
| help, | ||
| required = false, | ||
| extraFeedback, | ||
| checkAlign, | ||
| children, | ||
| error, | ||
| }: BaseFieldRowProps) { | ||
| return ( | ||
| <Form.Group as={Row} controlId={name}> | ||
| <Form.Label column sm="3" data-required={required} className={checkAlign ? 'pt-0' : ''}>{label}</Form.Label> | ||
| <Col sm="9"> | ||
| {children} | ||
| {error && ( | ||
| <Form.Control.Feedback type="invalid"> | ||
| {error} | ||
| </Form.Control.Feedback> | ||
| )} | ||
| {extraFeedback} | ||
| {help && <Form.Text muted>{help}</Form.Text>} | ||
| </Col> | ||
| </Form.Group> | ||
| ); | ||
| } |
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
63 changes: 63 additions & 0 deletions
63
packages/ilmomasiina-components/src/components/FinalFieldRow/index.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,63 @@ | ||
| import React, { ComponentType, ReactNode } from 'react'; | ||
|
|
||
| import { Form } from 'react-bootstrap'; | ||
| import { useField, UseFieldConfig } from 'react-final-form'; | ||
|
|
||
| import BaseFieldRow, { BaseFieldRowProps } from '../BaseFieldRow'; | ||
|
|
||
| type Props = Omit<BaseFieldRowProps, 'error' | 'children'> & Pick<UseFieldConfig<any>, 'type'> & { | ||
| /** Overrides the real error message if the field has errors. */ | ||
| alternateError?: string; | ||
| /** Passed as `label` to the field component. Intended for checkboxes. */ | ||
| checkLabel?: ReactNode; | ||
| /** The component or element to use as the field. Passed to Formik's `Field`. */ | ||
| as?: ComponentType<any> | string; | ||
| /** useField() config. */ | ||
| config?: UseFieldConfig<any>; | ||
| /** If given, this is used as the field. */ | ||
| children?: ReactNode; | ||
| }; | ||
|
|
||
| /** FieldRow for use with react-final-form */ | ||
| export default function FinalFieldRow<P = unknown>({ | ||
| name, | ||
| label = '', | ||
| help, | ||
| required = false, | ||
| alternateError, | ||
| extraFeedback, | ||
| checkAlign, | ||
| checkLabel, | ||
| as: Component = Form.Control, | ||
| children, | ||
| type, | ||
| config, | ||
| ...props | ||
| }: Props & P) { | ||
| const { input, meta: { error, invalid } } = useField(name, { type, ...config }); | ||
|
|
||
| let field: ReactNode; | ||
| if (children) { | ||
| field = children; | ||
| } else { | ||
| // Checkboxes have two labels: in the left column and next to the checkbox. Form.Check handles the latter for us | ||
| // and calls it "label", but we still want to call the other one "label" for all other types of field. Therefore | ||
| // we pass "checkLabel" to the field here. | ||
| const overrideProps = checkLabel !== undefined ? { label: checkLabel } : {}; | ||
| field = <Component required={required} {...props} {...input} {...overrideProps} />; | ||
| } | ||
|
|
||
| return ( | ||
| <BaseFieldRow | ||
| name={name} | ||
| label={label} | ||
| help={help} | ||
| required={required} | ||
| error={invalid && (alternateError || error)} | ||
| extraFeedback={extraFeedback} | ||
| checkAlign={checkAlign} | ||
| > | ||
| {field} | ||
| </BaseFieldRow> | ||
| ); | ||
| } |
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
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
27 changes: 0 additions & 27 deletions
27
packages/ilmomasiina-frontend/src/routes/Editor/components/Autocomplete.tsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.