diff --git a/web/client/components/share/SharePanel.jsx b/web/client/components/share/SharePanel.jsx index 5a4358368c4..4b8a6d6371c 100644 --- a/web/client/components/share/SharePanel.jsx +++ b/web/client/components/share/SharePanel.jsx @@ -238,18 +238,17 @@ class SharePanel extends React.Component { } return orig; }; + + getEmbedEventKey = (tabs = []) => { + return tabs.length + 1; + }; - getEmbedEventKey = (itemTabs = []) => { - return itemTabs.length + 3; // 2 Default panels (direct, social) - } - - getShareTabs = (itemTabs = []) => { - return { - ...SHARE_TABS, - ...itemTabs?.map(({tabName} = {}, index) => ({[tabName]: 2 + (index + 1)})).reduce((f, c) => ({...f, ...c}), {}), - embed: this.getEmbedEventKey(itemTabs) - }; - } + getShareTabs = (tabs = []) => { + return tabs.reduce((acc, tab) => { + acc[tab.key] = tab.eventKey; + return acc; + }, {}); + }; getHideIntabs = (itemTabs = []) => { return [ @@ -257,14 +256,22 @@ class SharePanel extends React.Component { ...itemTabs?.map(({tabName, hideAdvancedSettingsInTab} = {}) => hideAdvancedSettingsInTab ? tabName : "") ]; } + + prepareTabs = (tabs, { hideTabs = [], tabsOrder = [] }) => { + const normalizedOrder = tabsOrder.map(t => t.toLowerCase()); - getCurrenTab = (itemTabs = []) => { - const embedEventKey = this.getEmbedEventKey(itemTabs); - return ( - (!this.props.embedPanel && this.state.eventKey === embedEventKey) - || (isEmpty(itemTabs) && this.state.eventKey > (this.props.embedPanel ? 3 : 2)) - ) ? 1 : this.state.eventKey; // fallback to tab link if embed is disabled and selected at the same time - } + return tabs + .filter(tab => !hideTabs.includes(tab.key.toLowerCase())) + .sort((a, b) => { + const ia = normalizedOrder.indexOf(a.key.toLowerCase()); + const ib = normalizedOrder.indexOf(b.key.toLowerCase()); + return (ia === -1 ? 999 : ia) - (ib === -1 ? 999 : ib); + }) + .map((tab, index) => ({ + ...tab, + eventKey: index + 1 + })); + }; render() { // ************************ CHANGE URL PARAMETER FOR EMBED CODE **************************** @@ -276,30 +283,79 @@ class SharePanel extends React.Component { shareEmbeddedUrl = this.generateUrl(shareEmbeddedUrl, this.props.shareUrlRegex, this.props.shareUrlReplaceString); } - const itemTabs = this.props.items?.filter(({target} = {}) => target === 'tabs') ?? []; - const embedEventKey = this.getEmbedEventKey(itemTabs); - const currentTab = this.getCurrenTab(itemTabs); const shareApiUrl = this.props.shareApiUrl || cleanShareUrl || location.href; const social = ; const direct =
; const code = (
{this.props.showAPI ? : null}
); + const itemTabs = this.props.items?.filter(({ target }) => target === 'tabs') ?? []; + const hideInTabs = this.getHideIntabs(itemTabs); + + const { + tabsOrder = ["permalink", "direct", "social", "embed"], + hideTabs = [] + } = this.props.options || {}; - const SHARE_TABS_UPDATED = this.getShareTabs(itemTabs); - const tabs = ( this.setState({ eventKey })}> - }>{currentTab === 1 && direct} - }>{currentTab === 2 && social} - {!isEmpty(itemTabs) - ? itemTabs.map(({title, component: Component}, index) => { - const eventKey = 2 + (index + 1); - return {currentTab === eventKey && }; - }) - : null + let baseTabs = [ + { + key: "direct", + label: , + content: direct + }, + { + key: "social", + label: , + content: social } - {/* Keep embed panel at the last */} - {this.props.embedPanel ? }>{currentTab === embedEventKey && code} : null} - ); - const hideInTabs = this.getHideIntabs(itemTabs); + ]; + + let allTabs = [ + ...baseTabs, + ...itemTabs.map(({ title, tabName, component: Component }, index) => ({ + key: (tabName || `custom-tab-${index}`), + label: title, + content: + })) + ]; + + allTabs = this.prepareTabs(allTabs, { hideTabs, tabsOrder }); + + const embedEventKey = this.getEmbedEventKey(allTabs); + + const isValidTab = + allTabs.some(t => t.eventKey === this.state.eventKey) || + this.state.eventKey === embedEventKey; + + const currentTab = isValidTab + ? this.state.eventKey + : allTabs[0]?.eventKey || 1; + + const SHARE_TABS_UPDATED = this.getShareTabs(allTabs); + + const tabs = ( + this.setState({ eventKey })} + > + {allTabs.map(tab => ( + + {currentTab === tab.eventKey && tab.content} + + ))} + + {this.props.embedPanel && ( + } + > + {currentTab === embedEventKey && code} + + )} + + ); + let sharePanel = (