3.0.0-beta.1

Author: vip-git

package-lock.json

@@ -174,7 +174,7 @@
   "peerDependencies": {
     "immutability-helper": "^2.6.5 || ^3.0.0"
   },
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.1",
   "directories": {
     "doc": "docs"
   },

package.json

@@ -5,7 +5,6 @@ import isEqual from 'lodash/isEqual';
 import has from 'lodash/has';
 
 // Material UI
-import { withStyles } from '@mui/styles';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 
@@ -32,31 +31,30 @@ export const shouldHideTitle = (uiSchema, schema) => isPageLayoutSet(uiSchema) |
 export const RawFieldSetContent = (props) => {
   const { schema = {}, uiSchema = {}, xhrSchema = {} } = props;
   const { type } = schema;
+  const classes = fieldSetStyles.fieldSetContent();
   const SchemaTypeComponents = RENDER_BASED_ON_SCHEMA_TYPE({
     schema,
     uiSchema,
     xhrSchema,
-    props,
+    props: { ...props, classes },
   });
   return Utils.callFunctionIfExists(SchemaTypeComponents, type);
 };
 
-export const FieldSetContent = withStyles(fieldSetStyles.fieldSetContent)(RawFieldSetContent);
+export const FieldSetContent = RawFieldSetContent;
 
 // for unit testing
-class RawFieldSet extends React.Component<FieldSetProps, {}> {
-  shouldComponentUpdate = (nextProps) => !isEqual(this.props, nextProps)
-
-  render() {
+const RawFieldSet = React.memo(
+  (props: FieldSetProps) => {
     const {
       className,
       path,
-      classes,
       schema = {},
       hideTitle, 
       noTitle, 
       validation,
-    } = this.props;
+    } = props;
+    const classes = fieldSetStyles.fieldSet();
     const LegendTitle = () => ((
       !hideTitle 
       || path === '' 
@@ -88,10 +86,9 @@ class RawFieldSet extends React.Component<FieldSetProps, {}> {
         {!noTitle && (<LegendTitle />)}
         {!noTitle && (<LegendSubTitle />)}
         {path === '' && <ValidationMessages validation={validation} />}
-        <FieldSetContent path={path} {...this.props} />
+        <FieldSetContent path={path} {...props} />
       </fieldset>
     );
-  }
-}
+  }, (prevProps, nextProps) => isEqual(prevProps, nextProps));
 
-export default withStyles(fieldSetStyles.fieldSet)(RawFieldSet);
+export default RawFieldSet;

src/FieldSet/FieldSet.tsx

@@ -23,7 +23,6 @@ export const RawFieldSetArray = (props: FieldSetArrayProps) => {
   const {
     startIdx = 0,
     className,
-    classes,
     schema = {},
     uiSchema = {},
     definitions = {},
@@ -34,7 +33,7 @@ export const RawFieldSetArray = (props: FieldSetArrayProps) => {
     onDeleteItem,
     ...rest
   } = props;
-  // const schema = { ...givenSchema };
+  const classes = fieldSetStyles.fieldSetArray();
   const canReorder = uiSchema && uiSchema['ui:options'] && uiSchema['ui:options'].canReorder;
   const allowRecursive = uiSchema && uiSchema['ui:options'] && uiSchema['ui:options'].allowRecursive;
   const hasSelectWidget = uiSchema && uiSchema['ui:widget'];
@@ -118,4 +117,4 @@ export const RawFieldSetArray = (props: FieldSetArrayProps) => {
     </div>
   );
 };
-export default withStyles(fieldSetStyles.fieldSetArray)(RawFieldSetArray);
+export default RawFieldSetArray;

src/FieldSet/FieldSetArray.tsx

@@ -29,7 +29,6 @@ const classNames = require('classnames');
 
 export const RawFieldSetObject = ({ 
   className, 
-  classes,
   schema: givenSchema = {},
   uiSchema = {},
   xhrSchema = {},
@@ -44,6 +43,7 @@ export const RawFieldSetObject = ({
   tabKey,
   ...rest 
 }: FieldSetObjectProps) => {
+  const classes = fieldSetStyles.fieldSetObject();
   const schema = { ...givenSchema };
   const orientation = (uiSchema['ui:orientation'] === 'row' ? classes.row : null);
   if (isTabContent) {
@@ -192,4 +192,4 @@ export const RawFieldSetObject = ({
     </div>
   );
 };
-export default withStyles(fieldSetStyles.fieldSetObject)(RawFieldSetObject);
+export default RawFieldSetObject;

src/FieldSet/FieldSetObject.tsx

@@ -6,7 +6,6 @@ import IconButton from '@mui/material/IconButton';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import RemoveCircle from '@mui/icons-material/Close';
-import { withStyles } from '@mui/styles';
 
 // Styles
 import { ReorderControlsProps } from '@core-types/ReorderControls.type';
@@ -18,33 +17,35 @@ export const RawReorderControls = (
   { 
     first,
     last,
-    classes,
     onMoveItemUp,
     onMoveItemDown,
     onDeleteItem,
     canReorder,
   }: ReorderControlsProps,
-) => (
-  <div className={classes.root}>
-    {canReorder && (
-      <div>
-        <IconButton data-testid='upButton' className={classes.up} onClick={onMoveItemUp} disabled={first}>
-          <ArrowUpward />
-        </IconButton>
-        <IconButton data-testid='downButton' className={classes.down} onClick={onMoveItemDown} disabled={last}>
-          <ArrowDownward />
-        </IconButton>
-      </div>
-    )}
-    <IconButton
-      data-testid='closeButton'
-      className={
-        canReorder ? [classes.remove, classes.removeCanReorder].join(' ') : classes.remove
-      }
-      onClick={onDeleteItem}
-    >
-      <RemoveCircle />
-    </IconButton>
-  </div>
-);
-export default withStyles(fieldSetStyles.reorderControls)(RawReorderControls);
+) => {
+  const classes = fieldSetStyles.reorderControls();
+  return (
+    <div className={classes.root}>
+      {canReorder && (
+        <div>
+          <IconButton data-testid='upButton' onClick={onMoveItemUp} disabled={first}>
+            <ArrowUpward />
+          </IconButton>
+          <IconButton data-testid='downButton' onClick={onMoveItemDown} disabled={last}>
+            <ArrowDownward />
+          </IconButton>
+        </div>
+      )}
+      <IconButton
+        data-testid='closeButton'
+        className={
+          canReorder ? [classes.remove, classes.removeCanReorder].join(' ') : classes.remove
+        }
+        onClick={onDeleteItem}
+      >
+        <RemoveCircle />
+      </IconButton>
+    </div>
+  );
+};
+export default RawReorderControls;

src/FieldSet/ReorderControls.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import { withStyles } from '@mui/styles';
 import FormField from '../FormField';
 import fieldSetStyles from './field-set-styles';
 import ReorderControls from './ReorderControls';
@@ -14,7 +13,6 @@ export const RawReorderableFormField = ({
   first, 
   last, 
   className, 
-  classes, 
   path, 
   onMoveItemUp, 
   onMoveItemDown, 
@@ -24,32 +22,35 @@ export const RawReorderableFormField = ({
   recursiveDeleteItem,
   schema,
   ...rest
-}: ReorderableFormFieldProps) => (
-  <div className={classNames(className, classes.root)}>
-    {dynamicKeyField && (
-      <FormField
-        path={path}
-        {...rest}
-        schema={{ ...schema, type: 'string' }}
-        data={dynamicKeyField}
-        dynamicKeyField={'key'}
-      />
-    )}
-    <FormField
-      path={path}
-      {...rest}
-      schema={schema}
-      onDeleteItem={recursiveDeleteItem}
-    />
-    <ReorderControls
-      first={first}
-      last={last}
-      onMoveItemUp={onMoveItemUp}
-      onMoveItemDown={onMoveItemDown}
-      onDeleteItem={onDeleteItem}
-      canReorder={canReorder}
-    />
-  </div>
-);
+}: ReorderableFormFieldProps) => { 
+  const classes = fieldSetStyles.reorderable();
+  return (
+      <div className={classNames(className, classes.root)}>
+        {dynamicKeyField && (
+          <FormField
+            path={path}
+            {...rest}
+            schema={{ ...schema, type: 'string' }}
+            data={dynamicKeyField}
+            dynamicKeyField={'key'}
+          />
+        )}
+        <FormField
+          path={path}
+          {...rest}
+          schema={schema}
+          onDeleteItem={recursiveDeleteItem}
+        />
+        <ReorderControls
+          first={first}
+          last={last}
+          onMoveItemUp={onMoveItemUp}
+          onMoveItemDown={onMoveItemDown}
+          onDeleteItem={onDeleteItem}
+          canReorder={canReorder}
+        />
+      </div>
+    );
+}
 
-export default withStyles(fieldSetStyles.reorderable)(RawReorderableFormField);
+export default RawReorderableFormField;