adding moreButtonPlugin_iconComponent option

Author: dev-javascript

src/plugins/moreButtonPlugin/button/button.js

@@ -1,7 +1,7 @@
-import React, {useState, useCallback, useRef, useEffect, useLayoutEffect} from 'react';
+import React, { useState, useCallback, useRef, useEffect, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 export default function Button(getDeps, props) {
-  const {Popper, Api} = getDeps();
+  const { Popper, Api } = getDeps();
   const [open, setOpen] = useState(false);
   const closePopper = useCallback(() => setOpen(false), []);
   const btnRef = useRef();
@@ -18,24 +18,20 @@ export default function Button(getDeps, props) {
   const onClick = useCallback(
     (ev) => {
       ev.stopPropagation();
-      window.document.removeEventListener('click', closePopper, {once: true});
-      window.document.addEventListener('click', closePopper, {once: true});
+      window.document.removeEventListener('click', closePopper, { once: true });
+      window.document.addEventListener('click', closePopper, { once: true });
       setOpen(!open);
       return () => {
-        window.document.removeEventListener('click', closePopper, {once: true});
+        window.document.removeEventListener('click', closePopper, { once: true });
       };
     },
     [open],
   );
+  const IconComponent = props.instance.optionsManager.options.moreButtonPlugin_iconComponent;
   return (
     <>
       <div {...ref.current.btnPropsGenerator(onClick, btnRef, open)}>
-        <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" title="More tabs">
-          <path
-            fill="gray"
-            d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"
-          />
-        </svg>
+        <IconComponent instance={props.instance} />
       </div>
       {open ? <Popper {...props} TabsComponent={ref.current.TabsComponent} ref={popperRef} btnRef={btnRef} /> : null}
     </>

src/plugins/moreButtonPlugin/icon.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export default function MoreButtonPlugin_iconComponent(props) {
+    const style = {};
+    if (props.instance.optionsManager.options.direction === 'rtl') {
+        style.transform = 'rotate(180deg)';
+    }
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" title="More tabs" style={style}>
+            <path
+                fill="gray"
+                d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"
+            />
+        </svg>
+    );
+}
+MoreButtonPlugin_iconComponent.propTypes /* remove-proptypes */ = {
+    instance: PropTypes.object,
+};

src/plugins/moreButtonPlugin/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ShowMoreTabs from './show-more-tabs/index.js';
 import moreButtonPlugin_buttonComponent from './button/index.js';
+import moreButtonPlugin_iconComponent from './icon.js';
 import PropTypes from 'prop-types';
 
 function ShowMoreButton(deps, props) {
@@ -38,7 +39,8 @@ function setTablistView(ctx, components) {
 }
 function setDefaultOptions(ctx) {
   ctx.optionsManager.options = Object.assign({
-    moreButtonPlugin_buttonComponent
+    moreButtonPlugin_buttonComponent,
+    moreButtonPlugin_iconComponent
   }, ctx.optionsManager.options);
 };
 export default function ResponsiveFactory(ctx, components) {

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

@@ -4,10 +4,7 @@ export default function ShowMoreTabs(getDeps, props) {
   const {
     components,
     components: { useRootState, useForceUpdate },
-    ctx,
-    ctx: {
-      optionsManager: { options },
-    },
+    ctx
   } = props;
   useForceUpdate();
   const { openTabIDs, selectedTabID } = useRootState();