fix(Form): Use shared context for Form and FormItem (#275)

every form item had his own context as it was part of the bundled file. Now the Form shares a context with the FormItems.

Fixes #274

Author: MarcusNotheis

packages/main/src/components/Form/CurrentViewportRangeContext.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+import { createContext } from 'react';
 
-const CurrentRange = React.createContext(null);
+const CurrentViewportRangeContext = createContext(null);
 
-export { CurrentRange };
+export { CurrentViewportRangeContext };

packages/main/src/components/Form/FormItem/index.tsx

@@ -1,7 +1,7 @@
+import { CurrentViewportRangeContext } from '@ui5/webcomponents-react/lib/CurrentViewportRangeContext';
 import { Label } from '@ui5/webcomponents-react/lib/Label';
 import React, { FC, forwardRef, ReactNode, ReactNodeArray, Ref, useContext, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
-import { CurrentRange } from '../CurrentViewportRangeContext';
 import { styles } from '../Form.jss';
 
 export interface FormItemProps {
@@ -22,7 +22,7 @@ const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { nam
 const FormItem: FC<FormItemProps> = forwardRef((props: FormItemProps, ref: Ref<HTMLDivElement>) => {
   const { labelText, children } = props;
 
-  const currentRange = useContext(CurrentRange);
+  const currentRange = useContext(CurrentViewportRangeContext);
 
   const classes = useStyles();
   const topDivClass = classes.formItemTopDiv;

packages/main/src/components/Form/index.tsx

@@ -1,12 +1,12 @@
 import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
 import { useViewportRange } from '@ui5/webcomponents-react-base/lib/useViewportRange';
+import { CurrentViewportRangeContext } from '@ui5/webcomponents-react/lib/CurrentViewportRangeContext';
 import { Grid } from '@ui5/webcomponents-react/lib/Grid';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
 import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import React, { FC, forwardRef, ReactElement, ReactNode, ReactNodeArray, Ref, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
-import { CurrentRange } from './CurrentViewportRangeContext';
 import { styles } from './Form.jss';
 import { FormGroup } from './FormGroup';
 
@@ -68,7 +68,7 @@ const Form: FC<FormPropTypes> = forwardRef((props: FormPropTypes, ref: Ref<HTMLD
   const passThroughProps = usePassThroughHtmlProps(props);
 
   return (
-    <CurrentRange.Provider value={currentRange}>
+    <CurrentViewportRangeContext.Provider value={currentRange}>
       {updatedTitle && (
         <>
           <Title level={TitleLevel.H3} className={classes.formTitle}>
@@ -78,7 +78,7 @@ const Form: FC<FormPropTypes> = forwardRef((props: FormPropTypes, ref: Ref<HTMLD
         </>
       )}
       <Grid ref={ref} children={formGroups} defaultSpan={'XL6 L12 M12 S12'} {...passThroughProps} />
-    </CurrentRange.Provider>
+    </CurrentViewportRangeContext.Provider>
   );
 });
 

packages/main/src/index.ts

@@ -25,6 +25,7 @@ import { Carousel } from './lib/Carousel';
 import { CarouselArrowsPlacement } from './lib/CarouselArrowsPlacement';
 import { CheckBox } from './lib/CheckBox';
 import { ContentDensity } from './lib/ContentDensity';
+import { CurrentViewportRangeContext } from './lib/CurrentViewportRangeContext';
 import { CustomListItem } from './lib/CustomListItem';
 import { DatePicker } from './lib/DatePicker';
 import { DeviationIndicator } from './lib/DeviationIndicator';
@@ -98,13 +99,13 @@ import { StandardListItem } from './lib/StandardListItem';
 import { Switch } from './lib/Switch';
 import { Tab } from './lib/Tab';
 import { TabContainer } from './lib/TabContainer';
+import { TabSeparator } from './lib/TabSeparator';
 import { Table } from './lib/Table';
 import { TableCell } from './lib/TableCell';
 import { TableColumn } from './lib/TableColumn';
 import { TablePlaceholder } from './lib/TablePlaceholder';
 import { TableRow } from './lib/TableRow';
 import { TableSelectionMode } from './lib/TableSelectionMode';
-import { TabSeparator } from './lib/TabSeparator';
 import { Text } from './lib/Text';
 import { TextAlign } from './lib/TextAlign';
 import { TextArea } from './lib/TextArea';
@@ -145,6 +146,7 @@ export {
   CarouselArrowsPlacement,
   CheckBox,
   ContentDensity,
+  CurrentViewportRangeContext,
   CustomListItem,
   DatePicker,
   DeviationIndicator,

packages/main/src/lib/CurrentViewportRangeContext.ts

@@ -0,0 +1,3 @@
+import { CurrentViewportRangeContext } from '../components/Form/CurrentViewportRangeContext';
+
+export { CurrentViewportRangeContext };

scripts/rollup/results.json

@@ -18,29 +18,29 @@
       "filename": "base.development.js",
       "bundleType": "NODE_DEV",
       "packageName": "base",
-      "size": 56207,
-      "gzip": 12373
+      "size": 56211,
+      "gzip": 12372
     },
     {
       "filename": "base.production.min.js",
       "bundleType": "NODE_PROD",
       "packageName": "base",
-      "size": 56207,
-      "gzip": 12373
+      "size": 56211,
+      "gzip": 12372
     },
     {
       "filename": "main.development.js",
       "bundleType": "NODE_DEV",
       "packageName": "main",
-      "size": 135289,
-      "gzip": 35285
+      "size": 135494,
+      "gzip": 35351
     },
     {
       "filename": "main.production.min.js",
       "bundleType": "NODE_PROD",
       "packageName": "main",
-      "size": 135289,
-      "gzip": 35285
+      "size": 135494,
+      "gzip": 35351
     }
   ]
 }