Merge pull request #698 from plotly/fonts-as-props

Add fontOptions prop to api

Author: VeraZab

dev/App.js

@@ -147,6 +147,7 @@ class App extends Component {
           // glByDefault
           // traceTypesConfig={traceTypesConfig}
           // makeDefaultTrace={() => ({type: 'scattergl', mode: 'markers'})}
+          // fontOptions={[{label:'Arial', value: 'arial'}]}
         >
           <DefaultEditor>
             <Panel group="Dev" name="JSON">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-chart-editor",
   "description": "plotly.js chart editor react component UI",
-  "version": "0.26.1",
+  "version": "0.27.0",
   "author": "Plotly, Inc.",
   "bugs": {
     "url": "https://github.com/plotly/react-chart-editor/issues"

src/EditorControls.js

@@ -15,6 +15,7 @@ import isNumeric from 'fast-isnumeric';
 import nestedProperty from 'plotly.js/src/lib/nested_property';
 import {categoryLayout, traceTypes} from 'lib/traceTypes';
 import {ModalProvider} from 'components/containers';
+import {DEFAULT_FONTS} from 'lib/constants';
 
 class EditorControls extends Component {
   constructor(props, context) {
@@ -55,6 +56,7 @@ class EditorControls extends Component {
       showFieldTooltips: this.props.showFieldTooltips,
       glByDefault: this.props.glByDefault,
       mapBoxAccess: this.props.mapBoxAccess,
+      fontOptions: this.props.fontOptions,
     };
   }
 
@@ -344,6 +346,7 @@ EditorControls.propTypes = {
   makeDefaultTrace: PropTypes.func,
   glByDefault: PropTypes.bool,
   mapBoxAccess: PropTypes.bool,
+  fontOptions: PropTypes.array,
 };
 
 EditorControls.defaultProps = {
@@ -354,6 +357,7 @@ EditorControls.defaultProps = {
     traces: _ => traceTypes(_),
     complex: true,
   },
+  fontOptions: DEFAULT_FONTS,
 };
 
 EditorControls.childContextTypes = {
@@ -383,6 +387,7 @@ EditorControls.childContextTypes = {
   showFieldTooltips: PropTypes.bool,
   glByDefault: PropTypes.bool,
   mapBoxAccess: PropTypes.bool,
+  fontOptions: PropTypes.array,
 };
 
 export default EditorControls;

src/PlotlyEditor.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import createPlotComponent from 'react-plotly.js/factory';
 import EditorControls from './EditorControls';
 import PropTypes from 'prop-types';
+import {DEFAULT_FONTS} from 'lib/constants';
 
 class PlotlyEditor extends Component {
   constructor(props) {
@@ -31,6 +32,7 @@ class PlotlyEditor extends Component {
             mapBoxAccess={Boolean(
               this.props.config && this.props.config.mapboxAccessToken
             )}
+            fontOptions={this.props.fontOptions}
           >
             {this.props.children}
           </EditorControls>
@@ -82,11 +84,13 @@ PlotlyEditor.propTypes = {
   }),
   makeDefaultTrace: PropTypes.func,
   glByDefault: PropTypes.bool,
+  fontOptions: PropTypes.array,
 };
 
 PlotlyEditor.defaultProps = {
   hideControls: false,
   showFieldTooltips: false,
+  fontOptions: DEFAULT_FONTS,
 };
 
 export default PlotlyEditor;

src/components/fields/FontSelector.js

@@ -1,24 +1,18 @@
 import Dropdown from './Dropdown';
 import React from 'react';
-import {DEFAULT_FONTS} from 'lib/constants';
+import PropTypes from 'prop-types';
 
 /* eslint-disable react/prop-types */
 const styledRenderer = ({value, label}) => (
   <span style={{fontFamily: value}}>{label}</span>
 );
 /* eslint-enable react/prop-types */
 
-const FontSelector = props => {
-  let options;
-  if (Array.isArray(props.options)) {
-    options = props.options;
-  } else {
-    options = [...DEFAULT_FONTS];
-  }
+const FontSelector = (props, context) => {
   return (
     <Dropdown
       {...props}
-      options={options}
+      options={context.fontOptions}
       valueRenderer={styledRenderer}
       optionRenderer={styledRenderer}
     />
@@ -33,4 +27,8 @@ FontSelector.defaultProps = {
   clearable: false,
 };
 
+FontSelector.contextTypes = {
+  fontOptions: PropTypes.array,
+};
+
 export default FontSelector;