moreButtonPlugin should set

moreButtonPlugin_buttonComponent option

Author: dev-javascript

src/plugins/moreButtonPlugin/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ShowMoreTabs from './show-more-tabs/index.js';
+import moreButtonPlugin_buttonComponent from './button/index.js';
 import PropTypes from 'prop-types';
 
 function ShowMoreButton(deps, props) {
@@ -13,7 +14,7 @@ ShowMoreButton.propTypes /* remove-proptypes */ = {
   children: PropTypes.element,
 };
 function setTablistOverflow(ctx, components) {
-  components.MoreButtonPlugin = ShowMoreButton.bind(undefined, {ctx, components});
+  components.MoreButtonPlugin = ShowMoreButton.bind(undefined, { ctx, components });
   if (!components.OriginalTablistOverflow) {
     components.OriginalTablistOverflow = components.TablistOverflow;
     components.TablistOverflow = function (props) {
@@ -29,13 +30,19 @@ function setTablistOverflow(ctx, components) {
 function setTablistView(ctx, components) {
   components.TablistView = components.TablistViewFactory.bind(undefined, (ins) => ({
     tablistViewPropsManager: () => {
-      let {className} = components.tablistViewPropsManager(ins);
+      let { className } = components.tablistViewPropsManager(ins);
       className += ' rc-dyn-tabs-responsive';
-      return {className};
+      return { className };
     },
   }));
 }
+function setDefaultOptions(ctx) {
+  ctx.optionsManager.options = Object.assign({
+    moreButtonPlugin_buttonComponent
+  }, ctx.optionsManager.options);
+};
 export default function ResponsiveFactory(ctx, components) {
+  setDefaultOptions(ctx);
   setTablistView(ctx, components);
   setTablistOverflow(ctx, components);
 }

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

@@ -1,12 +1,10 @@
 import React, { memo } from 'react';
 import ElManagement from '../elementManagement/index.js';
 import Api from './api.js';
-import Button from '../button/index.js';
 import resizeDetectorIns from './element-resize-detector-adapter.js';
 import ShowMoreTabs from './show-more-tabs.js';
 const getDeps = () => {
   return {
-    Button,
     resizeDetectorIns,
     getInstance: (ctx, setHiddenTabIDs) =>
       new Api({

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

@@ -1,20 +1,20 @@
-import React, {useState, useRef, useLayoutEffect} from 'react';
+import React, { useState, useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 export default function ShowMoreTabs(getDeps, props) {
   const {
     components,
-    components: {useRootState, useForceUpdate},
+    components: { useRootState, useForceUpdate },
     ctx,
     ctx: {
-      optionsManager: {options},
+      optionsManager: { options },
     },
   } = props;
   useForceUpdate();
-  const {openTabIDs, selectedTabID} = useRootState();
+  const { openTabIDs, selectedTabID } = useRootState();
   const [hiddenTabIDs, setHiddenTabIDs] = useState('');
-  const {getInstance, resizeDetectorIns, Button} = getDeps();
+  const { getInstance, resizeDetectorIns } = getDeps();
   const ref = useRef();
-  ref.current = ref.current || {ins: getInstance(ctx, setHiddenTabIDs)};
+  ref.current = ref.current || { ins: getInstance(ctx, setHiddenTabIDs) };
   const ins = ref.current.ins;
   const openTabIDsString = openTabIDs.toString();
   useLayoutEffect(() => {
@@ -30,10 +30,7 @@ export default function ShowMoreTabs(getDeps, props) {
     ins.resize();
   }, [openTabIDsString, selectedTabID]);
 
-  const ButtonComponent =
-    options.showMoreButtonComponent && typeof options.showMoreButtonComponent === 'function'
-      ? options.showMoreButtonComponent
-      : Button;
+  const ButtonComponent = ctx.optionsManager.options.moreButtonPlugin_buttonComponent;
   return (
     <div {...ins.btnContainerPropsGenerator()}>
       <ButtonComponent {...ins.btnPropsGenerator(hiddenTabIDs, components)} />