Skip to content

Commit 1d36a75

Browse files
eneufeldedgarmueller
eneufeld
authored and
edgarmueller
committed
Use Memo and PureComponent where it was missing
* Update functional components to use React.memo * Update components to extends React.PureComponent
1 parent 7f9145a commit 1d36a75

File tree

11 files changed

+312
-293
lines changed

11 files changed

+312
-293
lines changed

‎packages/material/src/controls/MaterialIntegerControl.tsx‎

Lines changed: 5 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -25,45 +25,19 @@
2525
import React from 'react';
2626
import {
2727
ControlProps,
28-
ControlState,
2928
isIntegerControl,
30-
mapDispatchToControlProps,
31-
mapStateToControlProps,
3229
RankedTester,
3330
rankWith
3431
} from '@jsonforms/core';
3532
import { MuiInputInteger } from '../mui-controls/MuiInputInteger';
3633
import { MaterialInputControl } from './MaterialInputControl';
37-
import { Control, JsonFormsContext } from '@jsonforms/react';
34+
import { withJsonFormsControlProps } from '@jsonforms/react';
3835

39-
export class MaterialIntegerControl extends Control<
40-
ControlProps,
41-
ControlState
42-
> {
43-
render() {
44-
return (
45-
<JsonFormsContext.Consumer>
46-
{({ core, dispatch, config }: any) => {
47-
const stateProps = mapStateToControlProps(
48-
{ jsonforms: { core } },
49-
this.props
50-
);
51-
const dispatchProps = mapDispatchToControlProps(dispatch);
52-
return (
53-
<MaterialInputControl
54-
{...stateProps}
55-
{...dispatchProps}
56-
input={MuiInputInteger}
57-
config={config}
58-
/>
59-
);
60-
}}
61-
</JsonFormsContext.Consumer>
62-
);
63-
}
64-
}
36+
export const MaterialIntegerControl = (props: ControlProps) => (
37+
<MaterialInputControl {...props} input={MuiInputInteger} />
38+
);
6539
export const materialIntegerControlTester: RankedTester = rankWith(
6640
2,
6741
isIntegerControl
6842
);
69-
export default MaterialIntegerControl;
43+
export default withJsonFormsControlProps(MaterialIntegerControl);

‎packages/material/src/layouts/MaterialArrayLayout.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,10 @@ const paperStyle = { padding: 10 };
4040
interface MaterialArrayLayoutState {
4141
expanded: string | boolean;
4242
}
43-
export class MaterialArrayLayout extends React.Component<
43+
export class MaterialArrayLayout extends React.PureComponent<
4444
ArrayLayoutProps,
4545
MaterialArrayLayoutState
46-
> {
46+
> {
4747
state: MaterialArrayLayoutState = {
4848
expanded: null
4949
};
@@ -101,8 +101,8 @@ export class MaterialArrayLayout extends React.Component<
101101
);
102102
})
103103
) : (
104-
<p>No data</p>
105-
)}
104+
<p>No data</p>
105+
)}
106106
</div>
107107
</Paper>
108108
);

‎packages/material/src/mui-controls/MuiCheckbox.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,13 @@
2323
THE SOFTWARE.
2424
*/
2525
import React from 'react';
26-
import {
27-
CellProps,
28-
WithClassname
29-
} from '@jsonforms/core';
26+
import { CellProps, WithClassname } from '@jsonforms/core';
3027
import Checkbox from '@material-ui/core/Checkbox';
28+
import { areEqual } from '@jsonforms/react';
3129

32-
export const MuiCheckbox = (props: CellProps & WithClassname) => {
30+
export const MuiCheckbox = React.memo((props: CellProps & WithClassname) => {
3331
const { data, className, id, enabled, uischema, path, handleChange } = props;
34-
const config = { 'autoFocus': uischema.options && uischema.options.focus };
32+
const config = { autoFocus: uischema.options && uischema.options.focus };
3533
// !! causes undefined value to be converted to false, otherwise has no effect
3634
const checked = !!data;
3735

@@ -45,4 +43,4 @@ export const MuiCheckbox = (props: CellProps & WithClassname) => {
4543
inputProps={config}
4644
/>
4745
);
48-
};
46+
}, areEqual);

‎packages/material/src/mui-controls/MuiInputInteger.tsx‎

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,36 @@
2525
import React from 'react';
2626
import { CellProps, WithClassname } from '@jsonforms/core';
2727
import Input from '@material-ui/core/Input';
28+
import { areEqual } from '@jsonforms/react';
2829

29-
export const MuiInputInteger = (props: CellProps & WithClassname) => {
30-
const { data, className, id, enabled, uischema, path, handleChange } = props;
31-
const config = { step: '1' };
32-
const toNumber = (value: string) =>
33-
value === '' ? undefined : parseInt(value, 10);
30+
export const MuiInputInteger = React.memo(
31+
(props: CellProps & WithClassname) => {
32+
const {
33+
data,
34+
className,
35+
id,
36+
enabled,
37+
uischema,
38+
path,
39+
handleChange
40+
} = props;
41+
const config = { step: '1' };
42+
const toNumber = (value: string) =>
43+
value === '' ? undefined : parseInt(value, 10);
3444

35-
return (
36-
<Input
37-
type='number'
38-
value={data !== undefined && data !== null ? data : ''}
39-
onChange={ev => handleChange(path, toNumber(ev.target.value))}
40-
className={className}
41-
id={id}
42-
disabled={!enabled}
43-
autoFocus={uischema.options && uischema.options.focus}
44-
inputProps={config}
45-
fullWidth={true}
46-
/>
47-
);
48-
};
45+
return (
46+
<Input
47+
type='number'
48+
value={data !== undefined && data !== null ? data : ''}
49+
onChange={ev => handleChange(path, toNumber(ev.target.value))}
50+
className={className}
51+
id={id}
52+
disabled={!enabled}
53+
autoFocus={uischema.options && uischema.options.focus}
54+
inputProps={config}
55+
fullWidth={true}
56+
/>
57+
);
58+
},
59+
areEqual
60+
);

‎packages/material/src/mui-controls/MuiInputNumber.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,9 @@
2525
import React from 'react';
2626
import { CellProps, WithClassname } from '@jsonforms/core';
2727
import Input from '@material-ui/core/Input';
28+
import { areEqual } from '@jsonforms/react';
2829

29-
export const MuiInputNumber = (props: CellProps & WithClassname) => {
30+
export const MuiInputNumber = React.memo((props: CellProps & WithClassname) => {
3031
const { data, className, id, enabled, uischema, path, handleChange } = props;
3132
const config = { step: '0.1' };
3233
const toNumber = (value: string) =>
@@ -45,4 +46,4 @@ export const MuiInputNumber = (props: CellProps & WithClassname) => {
4546
fullWidth={true}
4647
/>
4748
);
48-
};
49+
}, areEqual);

‎packages/material/src/mui-controls/MuiInputNumberFormat.tsx‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -23,52 +23,52 @@
2323
THE SOFTWARE.
2424
*/
2525
import React from 'react';
26-
import {
27-
CellProps,
28-
Formatted,
29-
WithClassname,
30-
} from '@jsonforms/core';
26+
import { CellProps, Formatted, WithClassname } from '@jsonforms/core';
3127
import Input from '@material-ui/core/Input';
28+
import { areEqual } from '@jsonforms/react';
3229

33-
export const MuiInputNumberFormat = (props: CellProps & WithClassname & Formatted<number>) => {
34-
const {
35-
className,
36-
id,
37-
enabled,
38-
uischema,
39-
isValid,
40-
path,
41-
handleChange,
42-
schema
43-
} = props;
44-
const maxLength = schema.maxLength;
45-
let config;
46-
if (uischema.options && uischema.options.restrict) {
47-
config = {'maxLength': maxLength};
48-
} else {
49-
config = {};
50-
}
51-
const trim = uischema.options && uischema.options.trim;
52-
const formattedNumber = props.toFormatted(props.data);
30+
export const MuiInputNumberFormat = React.memo(
31+
(props: CellProps & WithClassname & Formatted<number>) => {
32+
const {
33+
className,
34+
id,
35+
enabled,
36+
uischema,
37+
isValid,
38+
path,
39+
handleChange,
40+
schema
41+
} = props;
42+
const maxLength = schema.maxLength;
43+
let config;
44+
if (uischema.options && uischema.options.restrict) {
45+
config = { maxLength: maxLength };
46+
} else {
47+
config = {};
48+
}
49+
const trim = uischema.options && uischema.options.trim;
50+
const formattedNumber = props.toFormatted(props.data);
5351

54-
const onChange = (ev: any) => {
55-
const validStringNumber = props.fromFormatted(ev.currentTarget.value);
56-
handleChange(path, validStringNumber);
57-
};
52+
const onChange = (ev: any) => {
53+
const validStringNumber = props.fromFormatted(ev.currentTarget.value);
54+
handleChange(path, validStringNumber);
55+
};
5856

59-
return (
60-
<Input
61-
type='text'
62-
value={formattedNumber}
63-
onChange={onChange}
64-
className={className}
65-
id={id}
66-
disabled={!enabled}
67-
autoFocus={uischema.options && uischema.options.focus}
68-
multiline={uischema.options && uischema.options.multi}
69-
fullWidth={!trim || maxLength === undefined}
70-
inputProps={config}
71-
error={!isValid}
72-
/>
73-
);
74-
};
57+
return (
58+
<Input
59+
type='text'
60+
value={formattedNumber}
61+
onChange={onChange}
62+
className={className}
63+
id={id}
64+
disabled={!enabled}
65+
autoFocus={uischema.options && uischema.options.focus}
66+
multiline={uischema.options && uischema.options.multi}
67+
fullWidth={!trim || maxLength === undefined}
68+
inputProps={config}
69+
error={!isValid}
70+
/>
71+
);
72+
},
73+
areEqual
74+
);

‎packages/material/src/mui-controls/MuiInputText.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@ interface MuiInputTextStatus {
3636
}
3737

3838
interface MuiTextInputProps {
39-
muiInputProps? : React.HTMLAttributes<HTMLInputElement>
39+
muiInputProps?: React.HTMLAttributes<HTMLInputElement>;
4040
}
4141

42-
export class MuiInputText extends React.Component<
42+
export class MuiInputText extends React.PureComponent<
4343
CellProps & WithClassname & MuiTextInputProps,
4444
MuiInputTextStatus
4545
> {

‎packages/material/src/mui-controls/MuiInputTime.tsx‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,23 @@
2323
THE SOFTWARE.
2424
*/
2525
import React from 'react';
26-
import {
27-
CellProps,
28-
WithClassname
29-
} from '@jsonforms/core';
26+
import { CellProps, WithClassname } from '@jsonforms/core';
3027
import Input from '@material-ui/core/Input';
28+
import { areEqual } from '@jsonforms/react';
3129

32-
export const MuiInputTime = (props: CellProps & WithClassname) => {
33-
const { data, className, id, enabled, uischema, path, handleChange } = props;
30+
export const MuiInputTime = React.memo((props: CellProps & WithClassname) => {
31+
const { data, className, id, enabled, uischema, path, handleChange } = props;
3432

35-
return (
36-
<Input
37-
type='time'
38-
value={data || ''}
39-
onChange={ev => handleChange(path, ev.target.value)}
40-
className={className}
41-
id={id}
42-
disabled={!enabled}
43-
autoFocus={uischema.options && uischema.options.focus}
44-
fullWidth={true}
45-
/>
46-
);
47-
};
33+
return (
34+
<Input
35+
type='time'
36+
value={data || ''}
37+
onChange={ev => handleChange(path, ev.target.value)}
38+
className={className}
39+
id={id}
40+
disabled={!enabled}
41+
autoFocus={uischema.options && uischema.options.focus}
42+
fullWidth={true}
43+
/>
44+
);
45+
}, areEqual);

‎packages/material/src/mui-controls/MuiSelect.tsx‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,23 @@
2323
THE SOFTWARE.
2424
*/
2525
import React from 'react';
26-
import {
27-
EnumCellProps,
28-
WithClassname,
29-
} from '@jsonforms/core';
26+
import { EnumCellProps, WithClassname } from '@jsonforms/core';
3027

3128
import Select from '@material-ui/core/Select';
3229
import { MenuItem } from '@material-ui/core';
30+
import { areEqual } from '@jsonforms/react';
3331

34-
export const MuiSelect = (props: EnumCellProps & WithClassname) => {
35-
const { data, className, id, enabled, uischema, path, handleChange, options } = props;
32+
export const MuiSelect = React.memo((props: EnumCellProps & WithClassname) => {
33+
const {
34+
data,
35+
className,
36+
id,
37+
enabled,
38+
uischema,
39+
path,
40+
handleChange,
41+
options
42+
} = props;
3643

3744
return (
3845
<Select
@@ -44,17 +51,13 @@ export const MuiSelect = (props: EnumCellProps & WithClassname) => {
4451
onChange={ev => handleChange(path, ev.target.value)}
4552
fullWidth={true}
4653
>
47-
{
48-
[<MenuItem value='' key={'empty'} />]
49-
.concat(
50-
options.map(optionValue =>
51-
(
52-
<MenuItem value={optionValue} key={optionValue}>
53-
{optionValue}
54-
</MenuItem>
55-
)
56-
)
57-
)}
54+
{[<MenuItem value='' key={'empty'} />].concat(
55+
options.map(optionValue => (
56+
<MenuItem value={optionValue} key={optionValue}>
57+
{optionValue}
58+
</MenuItem>
59+
))
60+
)}
5861
</Select>
5962
);
60-
};
63+
}, areEqual);

0 commit comments

Comments
 (0)