Merge pull request #129 from GenaDrop/stagging

Stagging
GenaDrop · Feb 22, 2024 · 2727ed6 · 2727ed6
2 parents 973f07b + cfcc8d5
commit 2727ed6
Show file tree

Hide file tree

Showing 12 changed files with 312 additions and 318 deletions.
diff --git a/apps/BosGenaDrop/widget/Mintbase/MbButton.jsx b/apps/BosGenaDrop/widget/Mintbase/MbButton.jsx
@@ -216,64 +216,59 @@ const Container = styled.div`
     }
   }
 `;
-
-const MbButton = () => {
-  return (
-    <Container>
-      <button
-        type="button"
-        className={`button ${btnType} ${state} ${
-          customStyle ? customStyle : `${size}` //
-        }`}
-        disabled={state === EState.DISABLED}
-        {...props}
+return (
+  <Container>
+    <button
+      type="button"
+      className={`button ${btnType} ${state} ${
+        customStyle ? customStyle : `${size}` //
+      }`}
+      disabled={state === EState.DISABLED}
+      {...props}
+    >
+      <span style={{ visibility: isLoading ? "hidden" : "visible" }}>
+        {label}
+      </span>
+      {isLoading && <LoadingAnimation btnType={btnType} size={size} />}
+    </button>
+    {dropDownItems && (
+      <div
+        className="relative"
+        onClick={() => {
+          if (state !== EState.DISABLED && state !== EState.LOADING) {
+            setIsDropdownOpen(!isDropdownOpen);
+          }
+        }}
       >
-        <span style={{ visibility: isLoading ? "hidden" : "visible" }}>
-          {label}
-        </span>
-        {isLoading && <LoadingAnimation btnType={btnType} size={size} />}
-      </button>
-      {dropDownItems && (
-        <div
-          className="relative"
-          onClick={() => {
-            if (state !== EState.DISABLED && state !== EState.LOADING) {
-              setIsDropdownOpen(!isDropdownOpen);
-            }
-          }}
-        >
-          <MbMenuWrapper setIsOpen={setIsDropdownOpen}>
-            <div>
-              <button
-                type="button"
-                className={`button ${btnType} ${
-                  state === EState.LOADING ? EState.DISABLED : state
-                } dropdown-btn ${size}-icon`}
-              >
-                <div className="pointer-events-none	">
-                  <MbIcon
-                    name={
-                      isDropdownOpen
-                        ? EIconName.ARROW_DROP_UP
-                        : EIconName.ARROW_DROP_DOWN
-                    }
-                    size="18px"
-                    color={dropdownIconColors?.light ?? "black"}
-                    darkColor={dropdownIconColors?.dark}
-                  />
-                </div>
-              </button>
-            </div>
-            <MbDropdownMenu
-              items={dropDownItems}
-              isOpen={isDropdownOpen}
-              className="right-0 md:left-0 md:right-auto"
-            />
-          </MbMenuWrapper>
-        </div>
-      )}
-    </Container>
-  );
-};
-
-return { MbButton };
+        <MbMenuWrapper setIsOpen={setIsDropdownOpen}>
+          <div>
+            <button
+              type="button"
+              className={`button ${btnType} ${
+                state === EState.LOADING ? EState.DISABLED : state
+              } dropdown-btn ${size}-icon`}
+            >
+              <div className="pointer-events-none	">
+                <MbIcon
+                  name={
+                    isDropdownOpen
+                      ? EIconName.ARROW_DROP_UP
+                      : EIconName.ARROW_DROP_DOWN
+                  }
+                  size="18px"
+                  color={dropdownIconColors?.light ?? "black"}
+                  darkColor={dropdownIconColors?.dark}
+                />
+              </div>
+            </button>
+          </div>
+          <MbDropdownMenu
+            items={dropDownItems}
+            isOpen={isDropdownOpen}
+            className="right-0 md:left-0 md:right-auto"
+          />
+        </MbMenuWrapper>
+      </div>
+    )}
+  </Container>
+);
diff --git a/apps/BosGenaDrop/widget/Mintbase/MbChip.jsx b/apps/BosGenaDrop/widget/Mintbase/MbChip.jsx
@@ -2,7 +2,7 @@ const accountId = props.accountId || "bos.genadrop.near";
 
 const { getFontType } = VM.require(`${accountId}/widget/Mintbase.Theme`);
 
-const { label, isChecked, disabled, handleClick } = props;
+// const { label, isChecked, disabled, handleClick } = props;
 
 const Chip = styled.div`
     .chip {
@@ -53,7 +53,7 @@ const Chip = styled.div`
     }
 `;
 
-const MbChip = () => {
+const MbChip = ({ isChecked, disabled, onClick, children }) => {
   return (
     <Chip>
       <div
@@ -62,7 +62,7 @@ const MbChip = () => {
         }`}
         onClick={() => {
           if (disabled) return;
-          handleClick();
+          onClick();
         }}
       >
         {isChecked && (
@@ -74,7 +74,7 @@ const MbChip = () => {
           </div>
         )}
         <div className={`label ${isChecked ? "checked" : "unchecked"}`}>
-          {label}
+          {children || "Label"}
         </div>
       </div>
     </Chip>

diff --git a/apps/BosGenaDrop/widget/Mintbase/MbDropdownMenu.jsx b/apps/BosGenaDrop/widget/Mintbase/MbDropdownMenu.jsx
@@ -6,6 +6,8 @@ const { isOpen, items } = props;
 const customStyle = props.customStyle || "";
 const mode = props.mode || Storage.get("mode");
 
+console.log("props", items);
+
 const isDarkModeOn = mode === "dark";
 
 const DropdownMenu = styled.div`
@@ -16,7 +18,9 @@ const DropdownMenu = styled.div`
   z-index: 10;
   border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
-  min-width: ${items?.find((item) => item.icon) ? "12rem" : "max-content"};
+  min-width: ${items && items?.find((item) => item.icon)
+    ? "12rem"
+    : "max-content"};
   ${customStyle}
   .dropdown-item {
     display: flex;
@@ -54,7 +58,6 @@ const DropdownMenu = styled.div`
   }
 `;
 
-const MbDropdownMenu = () => {
   return !isOpen ? null : (
     <DropdownMenu>
       {items.map(({ content, selected, icon, onClick }, index) => {
@@ -71,6 +74,3 @@ const MbDropdownMenu = () => {
       })}
     </DropdownMenu>
   );
-};
-
-return { MbDropdownMenu };
diff --git a/apps/BosGenaDrop/widget/Mintbase/MbIcon.jsx b/apps/BosGenaDrop/widget/Mintbase/MbIcon.jsx
@@ -45,14 +45,9 @@ useEffect(() => {
   }
 }, []);
 
-// useEffect(() => {}, [svgUrl]);
-const MbIcon = () => {
-  return (
-    <Container>
-      {/* {testSvg} */}
-      <img src={svg} alt={svg} />
-    </Container>
-  );
-};
-
-return { MbIcon };
+return (
+  <Container>
+    {/* {testSvg} */}
+    <img src={svg} alt={svg} />
+  </Container>
+);
diff --git a/apps/BosGenaDrop/widget/Mintbase/MbTabs.jsx b/apps/BosGenaDrop/widget/Mintbase/MbTabs.jsx
@@ -1,3 +1,6 @@
+const { MbDropdownMenu } = VM.require(
+  "bos.genadrop.near/widget/Mintbase.MbDropdownMenu"
+);
 const activeIndex = props?.activeIndex;
 const filterOptions = props?.filterOptions;
 const firstElement = props?.firstElement;
@@ -135,32 +138,35 @@ useEffect(() => {
   setSelectedFilter(!!props?.tabsWithFilters[tab]?.isExtraFilterSelected);
 }, [tab]);
 
-const options = filterOptions?.options.map((filter) => {
-  return {
-    content: <span>{filter.label}</span>,
-    onClick: () => handleOptionSelect(filter.id),
-    selected: selectedOrder === filter.id,
-    icon:
-      selectedOrder === filter.id ? (
-        <Widget
-          src="bos.genadrop.near/widget/Mintbase.MbIcon"
-          props={{
-            color: `${isDarkModeOn ? "blue-300" : "blue-100"}`,
-            size: "16px",
-            name: "check",
-          }}
-        />
-      ) : undefined,
-  };
-});
+const options =
+  filterOptions &&
+  filterOptions?.options.map((filter) => {
+    return {
+      content: <span>{filter.label}</span>,
+      onClick: () => handleOptionSelect(filter.id),
+      selected: selectedOrder === filter.id,
+      icon:
+        selectedOrder === filter.id ? (
+          <Widget
+            src="bos.genadrop.near/widget/Mintbase.MbIcon"
+            props={{
+              color: `${isDarkModeOn ? "blue-300" : "blue-100"}`,
+              size: "16px",
+              name: "check",
+            }}
+          />
+        ) : undefined,
+    };
+  });
 
 const getExtraFiltersIndex = (array) => {
   const indexes = [];
-  array.map((tab, index) => {
-    if (labels?.includes(tab?.tab) && tab?.extraFilter) {
-      indexes.push(index);
-    }
-  });
+  array &&
+    array.map((tab, index) => {
+      if (labels?.includes(tab?.tab) && tab?.extraFilter) {
+        indexes.push(index);
+      }
+    });
 
   return indexes;
 };
@@ -175,12 +181,15 @@ const handleOptionSelect = (option) => {
 
 if (!labels.length) return <></>;
 
-const MbTabs = () => {
-  return (
-    <Tabs>
-      <ul>
-        {labels.map((data, index) => (
-          <li onClick={() => setTab(index)} key={index}>
+return (
+  <Tabs>
+    <ul>
+      {labels &&
+        labels.map((data, index) => (
+          <li
+            onClick={() => onTabChange(index) || setTab(index)}
+            key={index}
+          >
             <Widget
               src="bos.genadrop.near/widget/Mintbase.Tab"
               props={{
@@ -192,40 +201,37 @@ const MbTabs = () => {
             />
           </li>
         ))}
+      {props?.tabsWithFilters ? (
         <div className="right-tabs">
-          {tabsWithExtraFilter?.length
-            ? tabsWithExtraFilter.map((tabIndex) => {
-                const currentTab = props.tabsWithFilters[tab];
-                const { extraFilter, onExtraFilterChange } = currentTab;
-                if (!extraFilter) return;
-                if (tabIndex === tab)
-                  return (
-                    <li
-                      className={`order-by-f ${
-                        selectedFilter ? "selected" : "unselected"
-                      }`}
-                      onClick={() => {
-                        if (!onExtraFilterChange) return;
-                        setSelectedFilter(!selectedFilter);
-                        onExtraFilterChange(!selectedFilter);
-                      }}
-                      key={tabIndex}
+          {tabsWithExtraFilter.map((tabIndex) => {
+            const currentTab = props.tabsWithFilters[tab];
+            const { extraFilter, onExtraFilterChange } = currentTab;
+            if (!extraFilter) return;
+            if (tabIndex === tab)
+              return (
+                <li
+                  className={`order-by-f ${
+                    selectedFilter ? "selected" : "unselected"
+                  }`}
+                  onClick={() => {
+                    if (!onExtraFilterChange) return;
+                    setSelectedFilter(!selectedFilter);
+                    onExtraFilterChange(!selectedFilter);
+                  }}
+                  key={tabIndex}
+                >
+                  <div className="extraFilter">
+                    <div
+                      className={`${
+                        selectedFilter ? "selectedFilter" : "unSelectedFilter"
+                      } p-med-90 pr-10 whitespace-nowrap`}
                     >
-                      <div className="extraFilter">
-                        <div
-                          className={`${
-                            selectedFilter
-                              ? "selectedFilter"
-                              : "unSelectedFilter"
-                          } p-med-90 pr-10 whitespace-nowrap`}
-                        >
-                          {extraFilter}
-                        </div>
-                      </div>
-                    </li>
-                  );
-              })
-            : null}
+                      {extraFilter}
+                    </div>
+                  </div>
+                </li>
+              );
+          })}
           <Dropdown onClick={() => setIsOpen(!isOpen)}>
             <li
               className={`order-by ${
@@ -252,15 +258,14 @@ const MbTabs = () => {
             </li>
           </Dropdown>
         </div>
-      </ul>
-      {filterOptions && options && (
-        <Widget
-          src="bos.genadrop.near/widget/Mintbase.MbDropdownMenu"
-          props={{ isOpen, items: options, customStyle: "right: 0;" }}
-        />
-      )}
-    </Tabs>
-  );
-};
-
-return { MbTabs };
+      ) : null}
+    </ul>
+    {filterOptions && options && (
+      <Widget
+        src="bos.genadrop.near/widget/Mintbase.MbDropdownMenu"
+        props={{ isOpen, items: options, customStyle: "right: 0;" }}
+      />
+      /* <MbDropdownMenu isOpen={true} items={options} customStyle="right : 0;" /> */
+    )}
+  </Tabs>
+);