chore: migrate Fieldset component from jsx to tsx (#17474)

* migrate Fieldset component from jsx to tsx

* update type check for fieldKey

* remove unused css class called fieldset
This commit is contained in:
Daman Arora 2021-11-29 17:17:54 -05:00 committed by GitHub
parent a959e6df45
commit bfba4f1689
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 19 deletions

View File

@ -17,31 +17,33 @@
* under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Form } from 'src/components/Form';
import { recurseReactClone } from './utils';
import Field from './Field';
const propTypes = {
children: PropTypes.node.isRequired,
onChange: PropTypes.func,
item: PropTypes.object,
title: PropTypes.node,
compact: PropTypes.bool,
};
const defaultProps = {
compact: false,
title: null,
};
interface FieldsetProps {
children: React.ReactNode;
onChange: Function;
item: Record<string, any>;
title: React.ReactNode;
compact: boolean;
}
export default class Fieldset extends React.PureComponent {
constructor(props) {
type fieldKeyType = string | number;
export default class Fieldset extends React.PureComponent<FieldsetProps> {
static defaultProps = {
compact: false,
title: null,
};
constructor(props: FieldsetProps) {
super(props);
this.onChange = this.onChange.bind(this);
}
onChange(fieldKey, val) {
onChange(fieldKey: fieldKeyType, val: any) {
return this.props.onChange({
...this.props.item,
[fieldKey]: val,
@ -50,18 +52,16 @@ export default class Fieldset extends React.PureComponent {
render() {
const { title } = this.props;
const propExtender = field => ({
const propExtender = (field: { props: { fieldKey: fieldKeyType } }) => ({
onChange: this.onChange,
value: this.props.item[field.props.fieldKey],
compact: this.props.compact,
});
return (
<Form componentClass="fieldset" className="CRUD" layout="vertical">
<Form className="CRUD" layout="vertical">
{title && <legend>{title}</legend>}
{recurseReactClone(this.props.children, Field, propExtender)}
</Form>
);
}
}
Fieldset.propTypes = propTypes;
Fieldset.defaultProps = defaultProps;