Fixed alignemnt of interactive method (#15)

BelfordZ · web-flow · commit 190e12bce909 · 2023-06-13T10:20:39.000-07:00
diff --git a/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -35,54 +35,50 @@ export default function ArrayFieldItemTemplate<
     fontWeight: 'bold',
   };
   return (
-    <div className={className + ' row'}>
+    <div className={className + ' row'} >
       <div className={hasToolbar ? 'col col--9' : 'col col--12'}>{children}</div>
       {hasToolbar && (
-        <div className='col col--3 array-item-toolbox'>
-          <div
-            className='btn-group'
-            style={{
-              display: 'flex',
-              justifyContent: 'space-around',
-            }}
-          >
-            {(hasMoveUp || hasMoveDown) && (
-              <MoveUpButton
-                style={btnStyle}
-                disabled={disabled || readonly || !hasMoveUp}
-                onClick={onReorderClick(index, index - 1)}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {(hasMoveUp || hasMoveDown) && (
-              <MoveDownButton
-                style={btnStyle}
-                disabled={disabled || readonly || !hasMoveDown}
-                onClick={onReorderClick(index, index + 1)}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {hasCopy && (
-              <CopyButton
-                style={btnStyle}
-                disabled={disabled || readonly}
-                onClick={onCopyIndexClick(index)}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {hasRemove && (
-              <RemoveButton
-                style={btnStyle}
-                disabled={disabled || readonly}
-                onClick={onDropIndexClick(index)}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-          </div>
+        <div className='col col--3 array-item-toolbox' style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+          {(hasMoveDown || hasMoveUp) && (
+            <MoveUpButton
+              style={btnStyle}
+              disabled={disabled || readonly || !hasMoveUp}
+              onClick={onReorderClick(index, index - 1)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {(hasMoveUp || hasMoveDown) && (
+            <MoveDownButton
+              style={btnStyle}
+              disabled={disabled || readonly || !hasMoveDown}
+              onClick={onReorderClick(index, index + 1)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {hasCopy && (
+            <CopyButton
+              style={btnStyle}
+              disabled={disabled || readonly}
+              onClick={onCopyIndexClick(index)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {hasRemove && (
+            <RemoveButton
+              style={btnStyle}
+              disabled={disabled || readonly}
+              onClick={onDropIndexClick(index)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
         </div>
       )}
     </div>
diff --git a/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -64,24 +64,18 @@ T = any,
           registry={registry}
         />
 
-        {/* <ArrayFieldDescriptionTemplate
-            idSchema={idSchema}
-            description={uiOptions.description || schema.description}
-            schema={schema}
-            uiSchema={uiSchema}
-            registry={registry}
-            /> */}
-        <div className='col col--12 array-item-list'>
-          <div className='container'>
-            {items &&
-             items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
-               <ArrayFieldItemTemplate key={key} {...itemProps} />
-            ))}
-          </div>
+        <div className='array-item-list'>
+          {items &&
+           items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+             <ArrayFieldItemTemplate key={key} {...itemProps} />
+          ))}
         </div>
 
         {canAdd && (
-          <div className="col col--12">
+          <div className="col col--12" style={{
+            justifyContent: 'end',
+            display: 'flex'
+          }}>
             <AddButton
               className='array-item-add'
               onClick={onAddClick}
diff --git a/src/ContentDescriptor/ContentDescriptor.css b/src/ContentDescriptor/ContentDescriptor.css
@@ -1,25 +1,3 @@
-.MuiExpansionPanelSummary-expandIcon.Mui-expanded {
-  transform: rotate(0deg) !important;
-}
-.MuiExpansionPanelSummary-expandIcon {
-  order: -1;
-  transform: rotate(-90deg) !important;
-  margin-right: 0px !important;
-}
-
-.MuiExpansionPanelSummary-content {
-  align-items: center;
-}
-
-.MuiExpansionPanelSummary-root {
-  padding: 0 24px 0 0px !important;
-}
-
-/* #interactive-box input {
-  border: 1px solid black;
-  border-radius: 5px;
-} */
-
 .glyphicon-plus {
   --b: 4px; /* the thickness */
   width: 40px; /* the size */
@@ -39,14 +17,18 @@ select, input {
   padding: 0.8rem;
   background: var(--docsearch-searchbox-focus-background);
   color: var(--docsearch-text-color);
-  margin-bottom: 0.5rem;
   transition: border var(--ifm-transition-fast) ease;
 }
 
-#interactive-box input[type=text] {
+#interactive-box input {
   width: 100%
 }
 
+#interactive-box .form-group {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
 .method section {
   margin-bottom: var(--ifm-heading-margin-bottom);
 }
diff --git a/src/FieldErrorTemplate/FieldErrorTemplate.tsx b/src/FieldErrorTemplate/FieldErrorTemplate.tsx
@@ -16,7 +16,7 @@ export default function FieldErrorTemplate<
   const id = errorId<T>(idSchema);
 
   return (
-    <div>
+    <div className="col col--12">
       {errors
         .filter((elem) => !!elem)
         .map((error, index: number) => {
diff --git a/src/FieldTemplate/Label.tsx b/src/FieldTemplate/Label.tsx
@@ -19,8 +19,11 @@ export default function Label(props: LabelProps) {
   if (!label) {
     return null;
   }
+  if (/-\d+/.test(label) && id && /_\d+/.test(id)) {
+    return null;
+  }
   return (
-    <label className='control-label col col--2' htmlFor={id}>
+    <label className='control-label' htmlFor={id}>
       {label}
       {required && <span className='required'><b> (required)</b></span>}
     </label>
diff --git a/src/InteractiveMethod/InteractiveMethod.tsx b/src/InteractiveMethod/InteractiveMethod.tsx
@@ -8,6 +8,7 @@ import ArrayFieldTemplate from '../ArrayFieldTemplate/ArrayFieldTemplate';
 import ArrayFieldItemTemplate from '../ArrayFieldItemTemplate/ArrayFieldItemTemplate';
 import FieldErrorTemplate from "../FieldErrorTemplate/FieldErrorTemplate";
 import FieldTemplate from "../FieldTemplate/FieldTemplate";
+import ObjectFieldTemplate from "../ObjectFieldTemplate/ObjectFieldTemplate";
 const qs = require('qs');
 const { useHistory, useLocation } = require('@docusaurus/router');
 
@@ -27,55 +28,46 @@ interface Props {
   };
 }
 
-
-/* function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
- *   console.log(props);
- *   const ArrayFieldItemTemplateFromProps
- *   return (
- *     <div className="container">
- *       <div className="row">
- *         {props.title && <b className="col col--9">{props.title}</b>}
- *         {
- *           props.canAdd &&
- *           <div className="col col--3">
- *             <button className="button button--block button--outline button--primary" type='button' onClick={props.onAddClick}>+</button>
- *           </div>
- *         }
- *       </div>
- *
- *       <div className="row">
- *         <div className="col col--12">
- *           {props.items.map((element) => element.children)}
- *         </div>
- *       </div>
- *     </div>
- *   );
- * } */
-
 function AddButton(props: IconButtonProps) {
   const { icon, iconType, ...btnProps } = props;
   return (
-    <button {...btnProps} className={btnProps.className + " button button--outline button--primary"} type='button'>+</button>
+    <button {...btnProps} className={btnProps.className + " button button--primary"} type='button'>+</button>
   );
 }
 
 function RemoveButton(props: IconButtonProps) {
   const { icon, iconType, ...btnProps } = props;
+  const style = {
+    ...btnProps.style,
+    minWidth: '35px',
+    maxWidth: '36px',
+    border: undefined
+  };
   return (
-    <button {...btnProps} className="button button--outline button--primary" type='button'>-</button>
+    <button {...btnProps} style={style} className="button button--outline button--primary" type='button'>-</button>
   );
 }
 function MoveUpButton(props: IconButtonProps) {
   const { icon, iconType, ...btnProps } = props;
+  const style = {
+    ...btnProps.style,
+    minWidth: '35px',
+    maxWidth: '36px',
+  };
   return (
-    <button {...btnProps} className="button button--outline button--primary" type='button'>▲</button>
+    <button {...btnProps}  style={style} className="button button--outline button--primary" type='button'>▲</button>
   );
 }
 
 function MoveDownButton(props: IconButtonProps) {
   const { icon, iconType, ...btnProps } = props;
+  const style = {
+    ...btnProps.style,
+    minWidth: '35px',
+    maxWidth: '36px',
+  };
   return (
-    <button {...btnProps} className="button button--outline button--primary" type='button'>▼</button>
+    <button {...btnProps} style={style} className="button button--outline button--primary" type='button'>▼</button>
   );
 }
 
@@ -110,7 +102,14 @@ const InteractiveMethodParam: React.FC<ParamProps> = (props) => {
       uiSchema={uiSchema}
       validator={validator}
       ref={refref}
-      templates={{ArrayFieldItemTemplate, ArrayFieldTemplate, FieldErrorTemplate, FieldTemplate, ButtonTemplates:{ AddButton, RemoveButton, MoveUpButton, MoveDownButton } }}
+      templates={{
+        ArrayFieldItemTemplate,
+        ArrayFieldTemplate,
+        FieldErrorTemplate,
+        FieldTemplate,
+        ButtonTemplates:{ AddButton, RemoveButton, MoveUpButton, MoveDownButton },
+        ObjectFieldTemplate
+      }}
       onChange={props.onChange}
       onError={log('errors')}
       liveValidate
@@ -205,53 +204,59 @@ const InteractiveMethod: React.FC<Props> = (props) => {
   const jsCode = `await window.ethereum.request(${JSON.stringify(methodCall, null, "  ")});`;
 
   return (
-    <>
+    <div className="container">
       {method.params.length > 0 &&
       <>
-        <div>
+        <div className="row">
           <h3>Params</h3>
-          {method.params.map((p, i) => (
-            <>
-              <h4>{(p as ContentDescriptorObject).name}</h4>
-              <InteractiveMethodParam
-                refref={formRefs[i]}
-                formData={requestParams[(p as ContentDescriptorObject).name]}
-                onChange={(change) => handleChange(change, i)}
-                param={p as ContentDescriptorObject} />
-            </>
-          ))}
+          <div className="col col--12">
+            {method.params.map((p, i) => (
+              <>
+                <h4>{(p as ContentDescriptorObject).name}</h4>
+                <InteractiveMethodParam
+                  refref={formRefs[i]}
+                  formData={requestParams[(p as ContentDescriptorObject).name]}
+                  onChange={(change) => handleChange(change, i)}
+                  param={p as ContentDescriptorObject} />
+              </>
+            ))}
+          </div>
         </div>
         <br />
       </>
       }
-      <div>
+      <div className="row">
         <h3>Request</h3>
-        {components && components.CodeBlock && <components.CodeBlock className="language-js">{jsCode}</components.CodeBlock>}
-        {!components?.CodeBlock &&
-          <pre>
-            <code>
-              {jsCode}
-            </code>
-          </pre>
-        }
+        <div className="col col--12">
+          {components && components.CodeBlock && <components.CodeBlock className="language-js">{jsCode}</components.CodeBlock>}
+          {!components?.CodeBlock &&
+           <pre>
+             <code>
+               {jsCode}
+             </code>
+           </pre>
+          }
+        </div>
       </div>
-      {executionResult !== undefined && <div>
+      {executionResult !== undefined && <div className="row">
         <h3>Response</h3>
-        {components && components.CodeBlock && <components.CodeBlock className="language-json">{JSON.stringify(executionResult, null, '  ')}</components.CodeBlock>}
-        {!components?.CodeBlock &&
-          <pre>
-              <code>
-              {JSON.stringify(executionResult, null, '  ')}
-            </code>
-          </pre>
-        }
+        <div className="col col--12">
+          {components && components.CodeBlock && <components.CodeBlock className="language-json">{JSON.stringify(executionResult, null, '  ')}</components.CodeBlock>}
+          {!components?.CodeBlock &&
+           <pre>
+             <code>
+               {JSON.stringify(executionResult, null, '  ')}
+             </code>
+           </pre>
+          }
+        </div>
       </div>}
-      <div>
+      <div className="row">
         <button className="button button--primary button--block" onClick={handleExec}>
           Send Request
         </button>
       </div>
-    </>
+    </div>
   );
 
 }
diff --git a/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
