fix(Form): Accept common props (#291)

SAP · Jan 24, 2020 · 12c3d79 · 12c3d79
1 parent 49d125e
commit 12c3d79
Show file tree

Hide file tree

Showing 5 changed files with 448 additions and 479 deletions.
diff --git a/packages/main/src/components/Form/Form.test.tsx b/packages/main/src/components/Form/Form.test.tsx
@@ -88,5 +88,11 @@ describe('Create a Form', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
-  createPassThroughPropsTest(Form);
+  createPassThroughPropsTest(Form, {
+    children: (
+      <FormItem labelText={'item 1'}>
+        <Input type={InputType.Text}></Input>
+      </FormItem>
+    )
+  });
 });
diff --git a/packages/main/src/components/Form/FormGroup/index.tsx b/packages/main/src/components/Form/FormGroup/index.tsx
@@ -6,12 +6,12 @@ import { Title } from '@ui5/webcomponents-react/lib/Title';
 import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import React, { Children, FC, forwardRef, ReactNode, ReactNodeArray, Ref } from 'react';
 import { createUseStyles } from 'react-jss';
+import { CommonProps } from '../../../interfaces/CommonProps';
 import { styles } from '../Form.jss';
 
-export interface FormGroupProps {
+export interface FormGroupProps extends CommonProps {
   title?: string;
   children: ReactNode | ReactNodeArray;
-  type?: string;
 }
 
 const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'FormGroup' });
@@ -20,12 +20,12 @@ const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { nam
  * <code>import { FormGroup } from '@ui5/webcomponents-react/lib/FormGroup';</code>
  */
 const FormGroup: FC<FormGroupProps> = forwardRef((props: FormGroupProps, ref: Ref<HTMLDivElement>) => {
-  const { title, children } = props;
+  const { title, children, tooltip, style, className, slot } = props;
 
   const classes = useStyles();
 
   return (
-    <div ref={ref}>
+    <div ref={ref} style={style} className={className} title={tooltip} slot={slot}>
       {title && (
         <Title level={TitleLevel.H5} className={classes.formPaddingBottom}>
           {title}
@@ -49,8 +49,6 @@ const FormGroup: FC<FormGroupProps> = forwardRef((props: FormGroupProps, ref: Re
   );
 });
 
-FormGroup.defaultProps = {
-  type: 'formGroup'
-};
+FormGroup.displayName = 'FormGroup';
 
 export { FormGroup };
diff --git a/packages/main/src/components/Form/FormItem/index.tsx b/packages/main/src/components/Form/FormItem/index.tsx
@@ -2,12 +2,12 @@ import { CurrentViewportRangeContext } from '@ui5/webcomponents-react/lib/Curren
 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 { CommonProps } from '../../../interfaces/CommonProps';
 import { styles } from '../Form.jss';
 
-export interface FormItemProps {
+export interface FormItemProps extends CommonProps {
   labelText?: string;
   children: ReactNode | ReactNodeArray;
-  type?: string;
 }
 
 const calculateWidth = (rate) => {
@@ -20,14 +20,11 @@ const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { nam
  * <code>import { FormItem } from '@ui5/webcomponents-react/lib/FormItem';</code>
  */
 const FormItem: FC<FormItemProps> = forwardRef((props: FormItemProps, ref: Ref<HTMLDivElement>) => {
-  const { labelText, children } = props;
+  const { labelText, children, tooltip, style, className, slot } = props;
 
   const currentRange = useContext(CurrentViewportRangeContext);
 
   const classes = useStyles();
-  const topDivClass = classes.formItemTopDiv;
-  const labelClass = classes.formLabel;
-  const elementClass = classes.formElement;
 
   const memoizedStyles = useMemo(() => {
     let labelWidth;
@@ -55,7 +52,8 @@ const FormItem: FC<FormItemProps> = forwardRef((props: FormItemProps, ref: Ref<H
 
     return {
       topDivStyle: {
-        display: display
+        display: display,
+        ...style
       },
       labelStyle: {
         width: labelWidth,
@@ -65,24 +63,25 @@ const FormItem: FC<FormItemProps> = forwardRef((props: FormItemProps, ref: Ref<H
         width: elementWidth
       }
     };
-  }, [children, currentRange]);
+  }, [children, currentRange, style]);
+
+  let classNames = `${classes.formItemTopDiv}`;
+  if (className) {
+    classNames += ` ${className}`;
+  }
 
   return (
-    <div ref={ref}>
-      <div style={memoizedStyles.topDivStyle} className={topDivClass}>
-        <Label style={memoizedStyles.labelStyle} className={labelClass}>
-          {labelText ? labelText : ''}
-        </Label>
-        <div style={memoizedStyles.elementStyle} className={elementClass}>
-          {children}
-        </div>
+    <div ref={ref} style={memoizedStyles.topDivStyle} className={classNames} title={tooltip} slot={slot}>
+      <Label style={memoizedStyles.labelStyle} className={classes.formLabel}>
+        {labelText ? labelText : ''}
+      </Label>
+      <div style={memoizedStyles.elementStyle} className={classes.formElement}>
+        {children}
       </div>
     </div>
   );
 });
 
-FormItem.defaultProps = {
-  type: 'formItem'
-};
+FormItem.displayName = 'FormItem';
 
 export { FormItem };