(feature) add ability to insert extra header components to left/right

bitfinexcom · Feb 25, 2020 · 7f50ae9 · 7f50ae9
1 parent 9502242
commit 7f50ae9
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 11 deletions.
diff --git a/dist/components/Chart/Chart.js b/dist/components/Chart/Chart.js
@@ -361,7 +361,10 @@ class Chart extends React.Component {
       disableTopbar,
       onDeleteIndicator,
       disableIndicators,
-      candleLoadingThreshold = 0
+      candleLoadingThreshold = 0,
+      extraHeaderComponentsLeft,
+      extraHeaderComponentsRight,
+      showMarketLabel
     } = this.props;
     const height = isFullscreen ? window.innerHeight : this.props.height;
     const width = isFullscreen ? window.innerWidth : this.props.width;
@@ -387,7 +390,7 @@ class Chart extends React.Component {
       }
     }), !disableTopbar && React.createElement("div", {
       className: "bfxc__topbar"
-    }, React.createElement("p", {
+    }, extraHeaderComponentsLeft, showMarketLabel && React.createElement("p", {
       className: "bfxcs__topbar-market"
     }, marketLabel), React.createElement("div", {
       className: "bfxcs__topbar-tfs bfxcs__topbar-section"
@@ -416,7 +419,7 @@ class Chart extends React.Component {
       onClick: this.onToggleFullscreen
     })), isSyncing && React.createElement("div", {
       className: "bfxc__topbar-spinner"
-    })), !disableToolbar && React.createElement("ul", {
+    }), extraHeaderComponentsRight), !disableToolbar && React.createElement("ul", {
       className: "bfxc__toolbar"
     }, React.createElement("li", {
       onClick: () => onAddDrawing && onAddDrawing(LineDrawing)

diff --git a/dist/components/Chart/Chart.props.js b/dist/components/Chart/Chart.props.js
@@ -1,6 +1,11 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired
+  height: PropTypes.number.isRequired,
+  showMarketLabel: PropTypes.bool,
+  extraHeaderComponentsLeft: PropTypes.any,
+  extraHeaderComponentsRight: PropTypes.any
 };
-export const defaultProps = {};
+export const defaultProps = {
+  showMarketLabel: true
+};
diff --git a/src/components/Chart/Chart.js b/src/components/Chart/Chart.js
@@ -332,7 +332,8 @@ class Chart extends React.Component {
     const {
       marketLabel, bgColor = '#000', candleWidth, candles, onTimeFrameChange,
       onAddDrawing, isSyncing, disableToolbar, disableTopbar, onDeleteIndicator,
-      disableIndicators, candleLoadingThreshold = 0
+      disableIndicators, candleLoadingThreshold = 0, extraHeaderComponentsLeft,
+      extraHeaderComponentsRight, showMarketLabel,
     } = this.props
 
     const height = isFullscreen ? window.innerHeight : this.props.height
@@ -365,9 +366,13 @@ class Chart extends React.Component {
 
         {!disableTopbar && (
           <div className='bfxc__topbar'>
-            <p className='bfxcs__topbar-market'>
-              {marketLabel}
-            </p>
+            {extraHeaderComponentsLeft}
+
+            {showMarketLabel && (
+              <p className='bfxcs__topbar-market'>
+                {marketLabel}
+              </p>
+            )}
 
             <div className='bfxcs__topbar-tfs bfxcs__topbar-section'>
               <Dropdown
@@ -420,6 +425,7 @@ class Chart extends React.Component {
             </div>
 
             {isSyncing && (<div className='bfxc__topbar-spinner' />)}
+            {extraHeaderComponentsRight}
           </div>
         )}
 

diff --git a/src/components/Chart/Chart.props.js b/src/components/Chart/Chart.props.js
@@ -2,7 +2,12 @@ import PropTypes from 'prop-types'
 
 export const propTypes = {
   width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired
+  height: PropTypes.number.isRequired,
+  showMarketLabel: PropTypes.bool,
+  extraHeaderComponentsLeft: PropTypes.any,
+  extraHeaderComponentsRight: PropTypes.any
 }
 
-export const defaultProps = {}
+export const defaultProps = {
+  showMarketLabel: true
+}