Updating Form to use hooks
This commit is contained in:
parent
3105371954
commit
42b3d0a9d8
@ -3,7 +3,7 @@
|
|||||||
exports[`App removing rendered expression 1`] = `
|
exports[`App removing rendered expression 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<span
|
<span
|
||||||
data-component="withI18nextTranslation(Form)"
|
data-component="Form"
|
||||||
data-props="{
|
data-props="{
|
||||||
\\"syntax\\": \\"js\\",
|
\\"syntax\\": \\"js\\",
|
||||||
\\"expr\\": \\"test expression\\",
|
\\"expr\\": \\"test expression\\",
|
||||||
@ -36,7 +36,7 @@ exports[`App removing rendered expression 1`] = `
|
|||||||
exports[`App removing rendered expression 2`] = `
|
exports[`App removing rendered expression 2`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<span
|
<span
|
||||||
data-component="withI18nextTranslation(Form)"
|
data-component="Form"
|
||||||
data-props="{
|
data-props="{
|
||||||
\\"syntax\\": \\"js\\",
|
\\"syntax\\": \\"js\\",
|
||||||
\\"expr\\": \\"\\",
|
\\"expr\\": \\"\\",
|
||||||
@ -58,7 +58,7 @@ exports[`App removing rendered expression 2`] = `
|
|||||||
exports[`App rendering 1`] = `
|
exports[`App rendering 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<span
|
<span
|
||||||
data-component="withI18nextTranslation(Form)"
|
data-component="Form"
|
||||||
data-props="{
|
data-props="{
|
||||||
\\"syntax\\": \\"js\\",
|
\\"syntax\\": \\"js\\",
|
||||||
\\"expr\\": \\"\\",
|
\\"expr\\": \\"\\",
|
||||||
@ -80,7 +80,7 @@ exports[`App rendering 1`] = `
|
|||||||
exports[`App rendering an expression 1`] = `
|
exports[`App rendering an expression 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<span
|
<span
|
||||||
data-component="withI18nextTranslation(Form)"
|
data-component="Form"
|
||||||
data-props="{
|
data-props="{
|
||||||
\\"syntax\\": \\"js\\",
|
\\"syntax\\": \\"js\\",
|
||||||
\\"expr\\": \\"\\",
|
\\"expr\\": \\"\\",
|
||||||
@ -102,7 +102,7 @@ exports[`App rendering an expression 1`] = `
|
|||||||
exports[`App rendering an expression 2`] = `
|
exports[`App rendering an expression 2`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<span
|
<span
|
||||||
data-component="withI18nextTranslation(Form)"
|
data-component="Form"
|
||||||
data-props="{
|
data-props="{
|
||||||
\\"syntax\\": \\"js\\",
|
\\"syntax\\": \\"js\\",
|
||||||
\\"expr\\": \\"test expression\\",
|
\\"expr\\": \\"test expression\\",
|
||||||
@ -128,7 +128,7 @@ exports[`App rendering an expression 2`] = `
|
|||||||
exports[`App rendering an expression 3`] = `
|
exports[`App rendering an expression 3`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<span
|
<span
|
||||||
data-component="withI18nextTranslation(Form)"
|
data-component="Form"
|
||||||
data-props="{
|
data-props="{
|
||||||
\\"syntax\\": \\"js\\",
|
\\"syntax\\": \\"js\\",
|
||||||
\\"expr\\": \\"test expression\\",
|
\\"expr\\": \\"test expression\\",
|
||||||
@ -161,7 +161,7 @@ exports[`App rendering an expression 3`] = `
|
|||||||
exports[`App rendering with an invalid syntax 1`] = `
|
exports[`App rendering with an invalid syntax 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<span
|
<span
|
||||||
data-component="withI18nextTranslation(Form)"
|
data-component="Form"
|
||||||
data-props="{
|
data-props="{
|
||||||
\\"syntax\\": \\"invalid\\",
|
\\"syntax\\": \\"invalid\\",
|
||||||
\\"expr\\": \\"\\",
|
\\"expr\\": \\"\\",
|
||||||
@ -183,7 +183,7 @@ exports[`App rendering with an invalid syntax 1`] = `
|
|||||||
exports[`App rendering with an invalid syntax 2`] = `
|
exports[`App rendering with an invalid syntax 2`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<span
|
<span
|
||||||
data-component="withI18nextTranslation(Form)"
|
data-component="Form"
|
||||||
data-props="{
|
data-props="{
|
||||||
\\"syntax\\": \\"invalid\\",
|
\\"syntax\\": \\"invalid\\",
|
||||||
\\"expr\\": \\"test expression\\",
|
\\"expr\\": \\"test expression\\",
|
||||||
@ -209,7 +209,7 @@ exports[`App rendering with an invalid syntax 2`] = `
|
|||||||
exports[`App rendering with an invalid syntax 3`] = `
|
exports[`App rendering with an invalid syntax 3`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<span
|
<span
|
||||||
data-component="withI18nextTranslation(Form)"
|
data-component="Form"
|
||||||
data-props="{
|
data-props="{
|
||||||
\\"syntax\\": \\"invalid\\",
|
\\"syntax\\": \\"invalid\\",
|
||||||
\\"expr\\": \\"test expression\\",
|
\\"expr\\": \\"test expression\\",
|
||||||
|
@ -1,13 +1,62 @@
|
|||||||
import React from 'react';
|
import React, { useState, useCallback } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { withTranslation, Trans } from 'react-i18next';
|
import { useTranslation, Trans } from 'react-i18next';
|
||||||
|
|
||||||
import ExpandIcon from 'react-feather/dist/icons/chevrons-down';
|
import ExpandIcon from 'react-feather/dist/icons/chevrons-down';
|
||||||
|
|
||||||
import style from './style.module.css';
|
import style from './style.module.css';
|
||||||
|
|
||||||
class Form extends React.PureComponent {
|
const Form = ({ syntaxList, children, onSubmit, ...props }) => {
|
||||||
static propTypes = {
|
const { t } = useTranslation();
|
||||||
|
const [ expr, exprUpdate ] = useState(props.expr);
|
||||||
|
const [ syntax, syntaxUpdate ] = useState(props.syntax);
|
||||||
|
|
||||||
|
const handleExprChange = useCallback(event => {
|
||||||
|
exprUpdate(event.target.value);
|
||||||
|
}, [exprUpdate]);
|
||||||
|
const handleSyntaxChange = useCallback(event => {
|
||||||
|
syntaxUpdate(event.target.value);
|
||||||
|
}, [syntaxUpdate]);
|
||||||
|
const handleSubmit = useCallback(event => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
onSubmit({ expr, syntax });
|
||||||
|
}, [expr, syntax, onSubmit]);
|
||||||
|
const handleKeyPress = useCallback(event => {
|
||||||
|
if (event.charCode === 13 && event.shiftKey) {
|
||||||
|
handleSubmit(event);
|
||||||
|
}
|
||||||
|
}, [handleSubmit]);
|
||||||
|
|
||||||
|
return <div className={ style.form } data-requires-js>
|
||||||
|
<form data-testid="form" onSubmit={ handleSubmit }>
|
||||||
|
<textarea
|
||||||
|
data-testid="expr-input"
|
||||||
|
name="expr"
|
||||||
|
value={ expr }
|
||||||
|
onKeyPress={ handleKeyPress }
|
||||||
|
onChange={ handleExprChange }
|
||||||
|
autoFocus
|
||||||
|
placeholder={ t('Enter regular expression to display') }></textarea>
|
||||||
|
<button type="submit"><Trans>Display</Trans></button>
|
||||||
|
<div className={ style.select }>
|
||||||
|
<select
|
||||||
|
data-testid="syntax-select"
|
||||||
|
name="syntax"
|
||||||
|
value={ syntax }
|
||||||
|
onChange={ handleSyntaxChange } >
|
||||||
|
{ syntaxList.map(({ id, label }) => (
|
||||||
|
<option value={ id } key={ id }>{ t(label) }</option>
|
||||||
|
)) }
|
||||||
|
</select>
|
||||||
|
<ExpandIcon />
|
||||||
|
</div>
|
||||||
|
{ children }
|
||||||
|
</form>
|
||||||
|
</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
Form.propTypes = {
|
||||||
expr: PropTypes.string,
|
expr: PropTypes.string,
|
||||||
syntax: PropTypes.string,
|
syntax: PropTypes.string,
|
||||||
syntaxList: PropTypes.arrayOf(PropTypes.shape({
|
syntaxList: PropTypes.arrayOf(PropTypes.shape({
|
||||||
@ -18,69 +67,7 @@ class Form extends React.PureComponent {
|
|||||||
children: PropTypes.oneOfType([
|
children: PropTypes.oneOfType([
|
||||||
PropTypes.arrayOf(PropTypes.node),
|
PropTypes.arrayOf(PropTypes.node),
|
||||||
PropTypes.node
|
PropTypes.node
|
||||||
]),
|
])
|
||||||
t: PropTypes.func.isRequired
|
};
|
||||||
}
|
|
||||||
|
|
||||||
state = {
|
export default Form;
|
||||||
expr: this.props.expr,
|
|
||||||
syntax: this.props.syntax
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSubmit = event => {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
const { expr, syntax } = this.state;
|
|
||||||
|
|
||||||
this.props.onSubmit({ expr, syntax });
|
|
||||||
}
|
|
||||||
|
|
||||||
handleKeyPress = event => {
|
|
||||||
if (event.charCode === 13 && event.shiftKey) {
|
|
||||||
this.handleSubmit(event);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleChange = event => this.setState({
|
|
||||||
[event.target.name]: event.target.value
|
|
||||||
})
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
syntaxList,
|
|
||||||
children,
|
|
||||||
t
|
|
||||||
} = this.props;
|
|
||||||
const { expr, syntax } = this.state;
|
|
||||||
|
|
||||||
return <div className={ style.form } data-requires-js>
|
|
||||||
<form data-testid="form" onSubmit={ this.handleSubmit }>
|
|
||||||
<textarea
|
|
||||||
data-testid="expr-input"
|
|
||||||
name="expr"
|
|
||||||
value={ expr }
|
|
||||||
onKeyPress={ this.handleKeyPress }
|
|
||||||
onChange={ this.handleChange }
|
|
||||||
autoFocus
|
|
||||||
placeholder={ t('Enter regular expression to display') }></textarea>
|
|
||||||
<button type="submit"><Trans>Display</Trans></button>
|
|
||||||
<div className={ style.select }>
|
|
||||||
<select
|
|
||||||
data-testid="syntax-select"
|
|
||||||
name="syntax"
|
|
||||||
value={ syntax }
|
|
||||||
onChange={ this.handleChange } >
|
|
||||||
{ syntaxList.map(({ id, label }) => (
|
|
||||||
<option value={ id } key={ id }>{ t(label) }</option>
|
|
||||||
)) }
|
|
||||||
</select>
|
|
||||||
<ExpandIcon />
|
|
||||||
</div>
|
|
||||||
{ children }
|
|
||||||
</form>
|
|
||||||
</div>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Form };
|
|
||||||
export default withTranslation()(Form);
|
|
||||||
|
@ -5,14 +5,13 @@ jest.mock('react-feather/dist/icons/chevrons-down', () =>
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render, fireEvent } from 'react-testing-library';
|
import { render, fireEvent } from 'react-testing-library';
|
||||||
|
|
||||||
import { mockT } from 'i18n';
|
import Form from 'components/Form';
|
||||||
import { Form } from 'components/Form';
|
|
||||||
|
|
||||||
const syntaxList = [
|
const syntaxList = [
|
||||||
{ id: 'testJS', label: 'Testing JS' },
|
{ id: 'testJS', label: 'Testing JS' },
|
||||||
{ id: 'other', label: 'Other' }
|
{ id: 'other', label: 'Other' }
|
||||||
];
|
];
|
||||||
const commonProps = { syntaxList, t: mockT };
|
const commonProps = { syntaxList };
|
||||||
|
|
||||||
describe('Form', () => {
|
describe('Form', () => {
|
||||||
test('rendering', () => {
|
test('rendering', () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user