wip

src/client/js/components/Admin/SlackIntegration/BotSettingsAccordion.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Collapse } from 'reactstrap';
+
+const Group = ({children}) => (
+  <div className="card border-0 rounded-lg mb-0">{children}</div>
+)
+
+const Header = ({children}) => (
+  // <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(0)}>
+  <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(0)}>
+    <p className="mb-0 text-primary">{children}</p>
+    {/* {currentlyOpenAccordionIndex === 0
+      ? <i className="fa fa-chevron-up" />
+      : <i className="fa fa-chevron-down" />
+    } */}
+  </div>
+)
+
+const Body = ({children}) => (
+  // <Collapse isOpen={currentlyOpenAccordionIndex === 0}>
+  <Collapse isOpen={true}>
+    <div className="card-body">
+      {children}
+    </div>
+  </Collapse>
+)
+
+const BotSettingsAccordion = (props) => {
+  return (
+    <div className="card border-0 rounded-lg shadow overflow-hidden">
+      {props.children}
+    </div>
+  )
+
+}
+
+BotSettingsAccordion.Group = Group;
+BotSettingsAccordion.Header = Header;
+BotSettingsAccordion.Body = Body;
+
+export default BotSettingsAccordion;

src/client/js/components/Admin/SlackIntegration/CustomBotWithoutProxySettingsAccordion.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Collapse } from 'reactstrap';
+import BotSettingsAccordion from './BotSettingsAccordion';
 
 const CustomBotWithoutSettingsAccordion = () => {
   const { t } = useTranslation('admin');
@@ -14,87 +15,110 @@ const CustomBotWithoutSettingsAccordion = () => {
   };
 
   return (
-    <div className="card border-0 rounded-lg shadow overflow-hidden" id="customBotWithoutProxySettingsAccordion">
-
-      <div className="card border-0 rounded-lg mb-0">
-        <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(0)}>
-          <p className="mb-0 text-primary">{`① ${t('slack_integration.without_proxy.create_bot')}`}</p>
-          {currentlyOpenAccordionIndex === 0
-            ? <i className="fa fa-chevron-up" />
-            : <i className="fa fa-chevron-down" />
-          }
-        </div>
-        <Collapse isOpen={currentlyOpenAccordionIndex === 0}>
-          <div className="card-body">
-
-            <div className="row my-5">
-              <div className="mx-auto">
-                <div>
-                  <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
-                    {t('slack_integration.without_proxy.create_bot')}
-                    <i className="fa fa-external-link ml-2" aria-hidden="true" />
-                  </button>
-                </div>
-                <a href="#">
-                  <p className="text-center mt-1">
-                    <small>
-                      {t('slack_integration.without_proxy.how_to_create_a_bot')}
-                      <i className="fa fa-external-link ml-2" aria-hidden="true" />
-                    </small>
-                  </p>
-                </a>
-              </div>
-            </div>
-          </div>
-        </Collapse>
-      </div>
-
-      <div className="card border-0 rounded-lg mb-0">
-        <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(1)}>
-          <p className="mb-0 text-primary">{`② ${t('slack_integration.without_proxy.install_bot_to_slack')}`}</p>
-          {currentlyOpenAccordionIndex === 1
-            ? <i className="fa fa-chevron-up" />
-            : <i className="fa fa-chevron-down" />
-          }
-        </div>
-        <Collapse isOpen={currentlyOpenAccordionIndex === 1}>
-          <div className="card-body">
-            BODY2
-          </div>
-        </Collapse>
-      </div>
-
-      <div className="card border-0 rounded-lg mb-0">
-        <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(2)}>
-          <p className="mb-0 text-primary">{`③ ${t('slack_integration.without_proxy.register_secret_and_token')}`}</p>
-          {currentlyOpenAccordionIndex === 2
-            ? <i className="fa fa-chevron-up" />
-            : <i className="fa fa-chevron-down" />
-          }
-        </div>
-        <Collapse isOpen={currentlyOpenAccordionIndex === 2}>
-          <div className="card-body">
-            BODY 3
-          </div>
-        </Collapse>
-      </div>
-
-      <div className="card border-0 rounded-lg mb-0">
-        <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(3)}>
-          <p className="mb-0 text-primary">{`④ ${t('slack_integration.without_proxy.test_connection')}`}</p>
-          {currentlyOpenAccordionIndex === 3
-            ? <i className="fa fa-chevron-up" />
-            : <i className="fa fa-chevron-down" />
-          }
-        </div>
-        <Collapse isOpen={currentlyOpenAccordionIndex === 3}>
-          <div className="card-body">
-            BODY 4
-          </div>
-        </Collapse>
-      </div>
-
-    </div>
+
+    <BotSettingsAccordion>
+
+      <BotSettingsAccordion.Group>
+        <BotSettingsAccordion.Header>
+          ヘッダー0
+        </BotSettingsAccordion.Header>
+        <BotSettingsAccordion.Body>
+          ボディー0
+        </BotSettingsAccordion.Body>
+      </BotSettingsAccordion.Group>
+
+      <BotSettingsAccordion.Group>
+        <BotSettingsAccordion.Header>
+          ヘッダー1
+        </BotSettingsAccordion.Header>
+        <BotSettingsAccordion.Body>
+          ボディー1
+        </BotSettingsAccordion.Body>
+      </BotSettingsAccordion.Group>
+      
+    </BotSettingsAccordion>
+
+    // <div className="card border-0 rounded-lg shadow overflow-hidden" id="customBotWithoutProxySettingsAccordion">
+
+    //   <div className="card border-0 rounded-lg mb-0">
+    //     <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(0)}>
+    //       <p className="mb-0 text-primary">{`① ${t('slack_integration.without_proxy.create_bot')}`}</p>
+    //       {currentlyOpenAccordionIndex === 0
+    //         ? <i className="fa fa-chevron-up" />
+    //         : <i className="fa fa-chevron-down" />
+    //       }
+    //     </div>
+    //     <Collapse isOpen={currentlyOpenAccordionIndex === 0}>
+    //       <div className="card-body">
+
+    //         <div className="row my-5">
+    //           <div className="mx-auto">
+    //             <div>
+    //               <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
+    //                 {t('slack_integration.without_proxy.create_bot')}
+    //                 <i className="fa fa-external-link ml-2" aria-hidden="true" />
+    //               </button>
+    //             </div>
+    //             <a href="#">
+    //               <p className="text-center mt-1">
+    //                 <small>
+    //                   {t('slack_integration.without_proxy.how_to_create_a_bot')}
+    //                   <i className="fa fa-external-link ml-2" aria-hidden="true" />
+    //                 </small>
+    //               </p>
+    //             </a>
+    //           </div>
+    //         </div>
+    //       </div>
+    //     </Collapse>
+    //   </div>
+
+    //   <div className="card border-0 rounded-lg mb-0">
+    //     <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(1)}>
+    //       <p className="mb-0 text-primary">{`② ${t('slack_integration.without_proxy.install_bot_to_slack')}`}</p>
+    //       {currentlyOpenAccordionIndex === 1
+    //         ? <i className="fa fa-chevron-up" />
+    //         : <i className="fa fa-chevron-down" />
+    //       }
+    //     </div>
+    //     <Collapse isOpen={currentlyOpenAccordionIndex === 1}>
+    //       <div className="card-body">
+    //         BODY2
+    //       </div>
+    //     </Collapse>
+    //   </div>
+
+    //   <div className="card border-0 rounded-lg mb-0">
+    //     <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(2)}>
+    //       <p className="mb-0 text-primary">{`③ ${t('slack_integration.without_proxy.register_secret_and_token')}`}</p>
+    //       {currentlyOpenAccordionIndex === 2
+    //         ? <i className="fa fa-chevron-up" />
+    //         : <i className="fa fa-chevron-down" />
+    //       }
+    //     </div>
+    //     <Collapse isOpen={currentlyOpenAccordionIndex === 2}>
+    //       <div className="card-body">
+    //         BODY 3
+    //       </div>
+    //     </Collapse>
+    //   </div>
+
+    //   <div className="card border-0 rounded-lg mb-0">
+    //     <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(3)}>
+    //       <p className="mb-0 text-primary">{`④ ${t('slack_integration.without_proxy.test_connection')}`}</p>
+    //       {currentlyOpenAccordionIndex === 3
+    //         ? <i className="fa fa-chevron-up" />
+    //         : <i className="fa fa-chevron-down" />
+    //       }
+    //     </div>
+    //     <Collapse isOpen={currentlyOpenAccordionIndex === 3}>
+    //       <div className="card-body">
+    //         BODY 4
+    //       </div>
+    //     </Collapse>
+    //   </div>
+
+    // </div>
 
   );