del className prop of popper com

Author: dev-javascript

src/plugins/moreButtonPlugin/show-more-tabs/button/api.js

@@ -82,17 +82,6 @@ export default function Api(components) {
           })),
         );
       },
-      getPopperClassName: function () {
-        const {showMorePopperClass, tablistViewClass, verticalClass, rtlClass} = this._api.optionsManager.setting;
-        return (
-          tablistViewClass +
-          ' ' +
-          verticalClass +
-          ' ' +
-          (this._api.getOption('direction') == 'rtl' ? rtlClass + ' ' : '') +
-          showMorePopperClass
-        );
-      },
     },
   ))(this);
 }

src/plugins/moreButtonPlugin/show-more-tabs/button/button.js

@@ -37,15 +37,7 @@ export default function Button(getDeps, props) {
           />
         </svg>
       </div>
-      {open ? (
-        <Popper
-          {...props}
-          TabsComponent={ref.current.TabsComponent}
-          ref={popperRef}
-          btnRef={btnRef}
-          className={ref.current.getPopperClassName()}
-        />
-      ) : null}
+      {open ? <Popper {...props} TabsComponent={ref.current.TabsComponent} ref={popperRef} btnRef={btnRef} /> : null}
     </>
   );
 }

src/plugins/moreButtonPlugin/show-more-tabs/button/popper/getClassName.js

@@ -0,0 +1,11 @@
+export default function getClassName(ins) {
+  const {showMorePopperClass, tablistViewClass, verticalClass, rtlClass} = ins.optionsManager.setting;
+  return (
+    tablistViewClass +
+    ' ' +
+    verticalClass +
+    ' ' +
+    (ins.getOption('direction') == 'rtl' ? rtlClass + ' ' : '') +
+    showMorePopperClass
+  );
+}

src/plugins/moreButtonPlugin/show-more-tabs/button/popper/index.js

@@ -1,13 +1,15 @@
 import {forwardRef} from 'react';
 import createPopper from './createPopper.js';
 import getPopperMaxHeight from './getPopperMaxHeight.js';
+import getClassName from './getClassName.js';
 import Popper from './popper.js';
 const clk = (e) => {
   e.nativeEvent.stopImmediatePropagation();
 };
 const getDeps = () => ({
   createPopper,
   getPopperMaxHeight,
+  getClassName,
   clk,
 });
 export default forwardRef(Popper.bind(null, getDeps));

src/plugins/moreButtonPlugin/show-more-tabs/button/popper/popper.js

@@ -1,8 +1,8 @@
 import React, {useLayoutEffect} from 'react';
 import PropTypes from 'prop-types';
 export default function Popper(getDeps, props, popperRef) {
-  const {createPopper, getPopperMaxHeight, clk} = getDeps();
-  const {TabsComponent, instance, hiddenTabIDs, btnRef, className} = props;
+  const {createPopper, getPopperMaxHeight, getClassName, clk} = getDeps();
+  const {TabsComponent, instance, hiddenTabIDs, btnRef} = props;
   useLayoutEffect(() => {
     popperRef.current.style.maxHeight = getPopperMaxHeight(btnRef.current, 15) + 'px';
     const popperIns = createPopper(btnRef.current, popperRef.current);
@@ -14,7 +14,7 @@ export default function Popper(getDeps, props, popperRef) {
   const openedTabIDs = hiddenTabIDs ? hiddenTabIDs.split(',') : [];
   return (
     <>
-      <div onClick={clk} ref={popperRef} className={className}>
+      <div onClick={clk} ref={popperRef} className={getClassName(instance)}>
         <TabsComponent
           selectedTabID={selectedTabID}
           openTabIDs={openedTabIDs}
@@ -26,7 +26,6 @@ export default function Popper(getDeps, props, popperRef) {
   );
 }
 Popper.propTypes /* remove-proptypes */ = {
-  className: PropTypes.string,
   hiddenTabIDs: PropTypes.string,
   instance: PropTypes.object,
   btnRef: PropTypes.object,