(Tree): define FormItem

Author: msmx-mnakagawa

src/scripts/Form.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes } from 'react';
+import React, { useContext, FC, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { FormElement } from './FormElement';
 
@@ -20,6 +20,32 @@ export const FormTypeContext =
  */
 const IsFormContext = React.createContext<boolean>(false);
 
+/**
+ *
+ */
+export const FormItem: FC<{
+  commonClassNames?: string;
+  children: (commonClassName: string) => JSX.Element;
+}> = ({ commonClassNames, children }) => {
+  const isForm = useContext(IsFormContext);
+  const type = useContext(FormTypeContext);
+
+  if (!isForm || type === 'inline') {
+    return children(commonClassNames ?? '');
+  }
+
+  return (
+    <div
+      className={classnames('slds-form__item', commonClassNames)}
+      role='listitem'
+    >
+      <IsFormContext.Provider value={false}>
+        {children('')}
+      </IsFormContext.Provider>
+    </div>
+  );
+};
+
 /**
  *
  */