59 | {_( 60 | 'Annotations are text and arrows you can use to point out specific parts of your figure.' 61 | )} 62 |
63 |{_('Click on the + button above to add an annotation.')}
64 |
10 | {Icon ? (
11 |
23 | );
24 | }
25 | }
26 |
27 | FoldEmpty.propTypes = {
28 | messagePrimary: PropTypes.string,
29 | messageSecondary: PropTypes.string,
30 | children: PropTypes.node,
31 | icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
32 | };
33 |
--------------------------------------------------------------------------------
/src/components/containers/ImageAccordion.js:
--------------------------------------------------------------------------------
1 | import PlotlyFold from './PlotlyFold';
2 | import {LayoutPanel} from './derived';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectImageToLayout} from 'lib';
6 | import {PanelMessage} from './PanelEmpty';
7 |
8 | const ImageFold = connectImageToLayout(PlotlyFold);
9 |
10 | class ImageAccordion extends Component {
11 | render() {
12 | const {
13 | layout: {images = []},
14 | localize: _,
15 | } = this.context;
16 | const {canAdd, children, canReorder} = this.props;
17 |
18 | const content =
19 | images.length &&
20 | images.map((img, i) => (
21 |
12 |
14 | ) : null}
15 | {messagePrimary ? (
16 | {messagePrimary}
17 | ) : null}
18 | {messageSecondary ? (
19 | {messageSecondary}
20 | ) : null}
21 | {children ? children : null}
22 | 57 | {_( 58 | 'Embed images in your figure to make the data more readable or to brand your content.' 59 | )} 60 |
61 |{_('Click on the + button above to add an image.')}
62 |
51 | {children} }
58 |
59 | );
60 | }
61 | }
62 |
63 | MenuPanel.propTypes = {
64 | children: PropTypes.node,
65 | icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
66 | label: PropTypes.string,
67 | ownline: PropTypes.bool,
68 | question: PropTypes.bool,
69 | show: PropTypes.bool,
70 | };
71 |
--------------------------------------------------------------------------------
/src/components/containers/Modal.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import PropTypes from 'prop-types';
3 | import {CloseIcon} from 'plotly-icons';
4 |
5 | const ModalHeader = ({title, handleClose}) => (
6 |
52 |
57 | {isOpen && {label}
53 |
54 | {icon}
55 |
56 |
7 | {title ?
14 | );
15 |
16 | const ModalContent = ({children}) => {title}
: null}
8 | {handleClose ? (
9 | handleClose() : null}>
10 |
12 | ) : null}
13 | {children}
;
17 |
18 | class Modal extends Component {
19 | constructor(props) {
20 | super(props);
21 | this.escFunction = this.escFunction.bind(this);
22 | }
23 |
24 | escFunction(event) {
25 | const escKeyCode = 27;
26 | if (event.keyCode === escKeyCode) {
27 | this.context.handleClose();
28 | }
29 | }
30 |
31 | componentDidMount() {
32 | document.addEventListener('keydown', this.escFunction, false);
33 | }
34 |
35 | componentWillUnmount() {
36 | document.removeEventListener('keydown', this.escFunction, false);
37 | }
38 |
39 | render() {
40 | const {children, title} = this.props;
41 | let classes = 'modal';
42 | if (this.context.isAnimatingOut) {
43 | classes += ' modal--animate-out';
44 | }
45 | return (
46 |
47 |
39 | {children}
40 |
41 | ));
42 |
43 | const addAction = {
44 | label: _('Button'),
45 | handler: (context) => {
46 | const {fullContainer, updateContainer} = context;
47 | if (updateContainer) {
48 | const rangeselectorIndex = Array.isArray(fullContainer.rangeselector.buttons)
49 | ? fullContainer.rangeselector.buttons.length
50 | : 0;
51 |
52 | updateContainer({
53 | [`rangeselector.buttons[${rangeselectorIndex}]`]: {},
54 | });
55 | }
56 | },
57 | };
58 |
59 | return {content ? content : null} ;
60 | }
61 | }
62 |
63 | RangeSelectorAccordion.contextTypes = {
64 | fullContainer: PropTypes.object,
65 | localize: PropTypes.func,
66 | layout: PropTypes.object,
67 | };
68 |
69 | RangeSelectorAccordion.propTypes = {
70 | children: PropTypes.node,
71 | };
72 |
73 | RangeSelectorAccordion.plotly_editor_traits = {
74 | no_visibility_forcing: true,
75 | };
76 |
77 | export default RangeSelectorAccordion;
78 |
--------------------------------------------------------------------------------
/src/components/containers/ShapeAccordion.js:
--------------------------------------------------------------------------------
1 | import PlotlyFold from './PlotlyFold';
2 | import {LayoutPanel} from './derived';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectShapeToLayout} from 'lib';
6 | import {COLORS} from 'lib/constants';
7 | import {PanelMessage} from './PanelEmpty';
8 |
9 | const ShapeFold = connectShapeToLayout(PlotlyFold);
10 |
11 | class ShapeAccordion extends Component {
12 | render() {
13 | const {
14 | layout: {shapes = []},
15 | localize: _,
16 | } = this.context;
17 | const {canAdd, children, canReorder} = this.props;
18 |
19 | const content =
20 | shapes.length &&
21 | shapes.map((shp, i) => (
22 |
23 | {children}
24 |
25 | ));
26 |
27 | const addAction = {
28 | label: _('Shape'),
29 | handler: ({layout, updateContainer}) => {
30 | let shapeIndex;
31 | if (Array.isArray(layout.shapes)) {
32 | shapeIndex = layout.shapes.length;
33 | } else {
34 | shapeIndex = 0;
35 | }
36 |
37 | const key = `shapes[${shapeIndex}]`;
38 | const value = {
39 | line: {color: COLORS.charcoal},
40 | fillcolor: COLORS.middleGray,
41 | opacity: 0.3,
42 | };
43 |
44 | if (updateContainer) {
45 | updateContainer({[key]: value});
46 | }
47 | },
48 | };
49 |
50 | return (
51 |
52 | {content ? (
53 | content
54 | ) : (
55 |
56 |
63 | )}
64 |
65 | );
66 | }
67 | }
68 |
69 | ShapeAccordion.contextTypes = {
70 | layout: PropTypes.object,
71 | localize: PropTypes.func,
72 | };
73 |
74 | ShapeAccordion.propTypes = {
75 | children: PropTypes.node,
76 | canAdd: PropTypes.bool,
77 | canReorder: PropTypes.bool,
78 | };
79 |
80 | export default ShapeAccordion;
81 |
--------------------------------------------------------------------------------
/src/components/containers/SingleSidebarItem.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React, {Component} from 'react';
3 |
4 | export default class SingleSidebarItem extends Component {
5 | render() {
6 | return this.props.children ? (
7 |
21 | {children}
22 |
23 | ));
24 |
25 | return {content ? content : null} ;
26 | }
27 | }
28 |
29 | SliderAccordion.contextTypes = {
30 | layout: PropTypes.object,
31 | localize: PropTypes.func,
32 | };
33 |
34 | SliderAccordion.propTypes = {
35 | children: PropTypes.node,
36 | };
37 |
38 | export default SliderAccordion;
39 |
--------------------------------------------------------------------------------
/src/components/containers/TraceMarkerSection.js:
--------------------------------------------------------------------------------
1 | import PlotlySection from './PlotlySection';
2 | import React, {Component} from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | class TraceMarkerSection extends Component {
6 | constructor(props, context) {
7 | super(props, context);
8 | this.setLocals(context);
9 | }
10 |
11 | UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
12 | this.setLocals(nextContext);
13 | }
14 |
15 | setLocals(context) {
16 | const _ = this.context.localize;
17 | const traceType = context.fullContainer.type;
18 | if (['bar', 'histogram', 'funnel', 'waterfall'].includes(traceType)) {
19 | this.name = _('Bars');
20 | } else if (['funnelarea', 'pie', 'sunburst', 'treemap'].includes(traceType)) {
21 | this.name = _('Segments');
22 | } else {
23 | this.name = _('Points');
24 | }
25 | }
26 |
27 | render() {
28 | return {this.props.children} ;
29 | }
30 | }
31 |
32 | TraceMarkerSection.propTypes = {
33 | children: PropTypes.node,
34 | name: PropTypes.string,
35 | };
36 |
37 | TraceMarkerSection.contextTypes = {
38 | fullContainer: PropTypes.object,
39 | localize: PropTypes.func,
40 | };
41 |
42 | export default TraceMarkerSection;
43 |
--------------------------------------------------------------------------------
/src/components/containers/TraceRequiredPanel.js:
--------------------------------------------------------------------------------
1 | import PanelEmpty from './PanelEmpty';
2 | import PropTypes from 'prop-types';
3 | import React, {Component} from 'react';
4 | import {LayoutPanel} from './derived';
5 |
6 | class TraceRequiredPanel extends Component {
7 | hasTrace() {
8 | return this.context.fullData.filter((trace) => trace.visible).length > 0;
9 | }
10 |
11 | render() {
12 | const {localize: _} = this.context;
13 | const {children, ...rest} = this.props;
14 |
15 | if (!this.props.visible) {
16 | return null;
17 | }
18 |
19 | return this.hasTrace() ? (
20 | {children}
21 | ) : (
22 |
23 |
29 | );
30 | }
31 | }
32 |
33 | TraceRequiredPanel.propTypes = {
34 | children: PropTypes.node,
35 | visible: PropTypes.bool,
36 | };
37 |
38 | TraceRequiredPanel.defaultProps = {
39 | visible: true,
40 | };
41 |
42 | TraceRequiredPanel.contextTypes = {
43 | fullData: PropTypes.array,
44 | localize: PropTypes.func,
45 | setPanel: PropTypes.func,
46 | };
47 |
48 | export default TraceRequiredPanel;
49 |
--------------------------------------------------------------------------------
/src/components/containers/UpdateMenuAccordion.js:
--------------------------------------------------------------------------------
1 | import PlotlyFold from './PlotlyFold';
2 | import TraceRequiredPanel from './TraceRequiredPanel';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectUpdateMenuToLayout} from 'lib';
6 |
7 | const UpdateMenuFold = connectUpdateMenuToLayout(PlotlyFold);
8 |
9 | class UpdateMenuAccordion extends Component {
10 | render() {
11 | const {
12 | fullLayout: {updatemenus = []},
13 | localize: _,
14 | } = this.context;
15 | const {children} = this.props;
16 |
17 | const content =
18 | updatemenus.length > 0 &&
19 | updatemenus.map((upd, i) => {
20 | const localizedType = {
21 | dropdown: _('Dropdown'),
22 | buttons: _('Buttons'),
23 | };
24 | const menuType = localizedType[upd.type] || localizedType.dropdown;
25 | const activeBtn = upd.buttons.filter((b) => b._index === upd.active)[0];
26 | const foldName = menuType + (activeBtn ? ': ' + activeBtn.label : '');
27 |
28 | return (
29 |
30 | {children}
31 |
32 | );
33 | });
34 |
35 | return {content ? content : null} ;
36 | }
37 | }
38 |
39 | UpdateMenuAccordion.contextTypes = {
40 | fullLayout: PropTypes.object,
41 | localize: PropTypes.func,
42 | };
43 |
44 | UpdateMenuAccordion.propTypes = {
45 | children: PropTypes.node,
46 | };
47 |
48 | export default UpdateMenuAccordion;
49 |
--------------------------------------------------------------------------------
/src/components/containers/__tests__/AnnotationAccordion-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {AnnotationAccordion, PlotlyPanel, PlotlyFold} from '..';
3 | import {Numeric} from '../../fields';
4 | import {TestEditor, fixtures, mount} from 'lib/test-utils';
5 | import {connectLayoutToPlot} from 'lib';
6 |
7 | const LayoutPanel = connectLayoutToPlot(PlotlyPanel);
8 |
9 | describe('', () => {
10 | it('generates annotation PlotlyFolds with name == text', () => {
11 | const fixture = fixtures.scatter({
12 | layout: {annotations: [{text: 'hodor'}, {text: 'rodoh'}]},
13 | });
14 |
15 | const folds = mount(
16 |
17 |
18 |
19 |
21 |
22 |
23 | ).find(PlotlyFold);
24 |
25 | expect(folds.length).toBe(2);
26 | expect(folds.at(0).prop('name')).toBe('hodor');
27 | expect(folds.at(1).prop('name')).toBe('rodoh');
28 | });
29 |
30 | it('can add annotations', () => {
31 | const fixture = fixtures.scatter();
32 | const beforeUpdateLayout = jest.fn();
33 | const editor = mount(
34 |
35 |
36 |
37 |
39 |
40 |
41 | );
42 |
43 | editor.find('button.js-add-button').simulate('click');
44 |
45 | const payload = beforeUpdateLayout.mock.calls[0][0];
46 | expect(payload.update).toEqual({'annotations[0]': {text: 'new text'}});
47 | });
48 |
49 | it('can delete annotations', () => {
50 | const fixture = fixtures.scatter({
51 | layout: {annotations: [{text: 'hodor'}, {text: 'rodoh'}]},
52 | });
53 | const beforeDeleteAnnotation = jest.fn();
54 | const editor = mount(
55 |
56 |
57 |
58 |
60 |
61 |
62 | );
63 | editor.find('.js-fold__delete').at(0).simulate('click');
64 |
65 | const update = beforeDeleteAnnotation.mock.calls[0][0];
66 | expect(update.annotationIndex).toBe(0);
67 | });
68 | });
69 |
--------------------------------------------------------------------------------
/src/components/containers/__tests__/Fold-test.js:
--------------------------------------------------------------------------------
1 | import {Numeric} from '../../fields';
2 | import {PlotlyFold, PlotlyPanel} from '..';
3 | import React from 'react';
4 | import {TestEditor, fixtures, mount} from 'lib/test-utils';
5 | import {connectTraceToPlot} from 'lib';
6 |
7 | const TraceFold = connectTraceToPlot(PlotlyFold);
8 |
9 | describe('', () => {
10 | it('shows deleteContainer button when deleteContainer function present and canDelete is true', () => {
11 | const withoutDelete = mount(
12 |
13 |
14 |
15 |
17 |
18 |
19 | ).find('.js-fold__delete');
20 | expect(withoutDelete.exists()).toBe(false);
21 |
22 | const withDelete = mount(
23 |
24 |
25 |
26 |
28 |
29 |
30 | ).find('.js-fold__delete');
31 | expect(withDelete.exists()).toBe(true);
32 | });
33 |
34 | it('calls deleteContainer when function present and canDelete is true', () => {
35 | const beforeDeleteTrace = jest.fn();
36 | mount(
37 |
38 |
39 |
40 |
42 |
43 |
44 | )
45 | .find('.js-fold__delete')
46 | .simulate('click');
47 |
48 | const payload = beforeDeleteTrace.mock.calls[0][0];
49 | expect(payload).toEqual({
50 | axesToBeGarbageCollected: [],
51 | subplotToBeGarbageCollected: null,
52 | traceIndexes: [0],
53 | });
54 | });
55 | });
56 |
--------------------------------------------------------------------------------
/src/components/containers/__tests__/Layout-test.js:
--------------------------------------------------------------------------------
1 | import {Numeric} from '../../fields';
2 | import {PlotlyFold, PlotlyPanel, PlotlySection} from '..';
3 | import NumericInput from '../../widgets/NumericInput';
4 | import React from 'react';
5 | import {TestEditor, fixtures} from 'lib/test-utils';
6 | import {connectLayoutToPlot} from 'lib';
7 | import {mount} from 'enzyme';
8 |
9 | const Layouts = [PlotlyPanel, PlotlyFold, PlotlySection].map(connectLayoutToPlot);
10 | const Editor = (props) =>
17 |
18 |
19 |
21 |
22 |
23 | )
24 | .find('[attr="height"]')
25 | .find(NumericInput);
26 | expect(wrapper.prop('value')).toBe(100);
27 | });
28 |
29 | it(`sends updates to gd._layout`, () => {
30 | const beforeUpdateLayout = jest.fn();
31 | const wrapper = mount(
32 |
36 |
37 |
38 |
40 |
41 |
42 | )
43 | .find('[attr="height"]')
44 | .find(NumericInput);
45 |
46 | const heightUpdate = 200;
47 | wrapper.prop('onChange')(heightUpdate);
48 | const payload = beforeUpdateLayout.mock.calls[0][0];
49 | expect(payload).toEqual({update: {height: heightUpdate}});
50 | });
51 | });
52 | });
53 |
--------------------------------------------------------------------------------
/src/components/containers/__tests__/TraceAccordion-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {TraceAccordion, PlotlyFold, LayoutPanel} from '..';
3 | import {TextEditor} from '../../fields';
4 | import {TestEditor, fixtures, mount} from 'lib/test-utils';
5 |
6 | describe('', () => {
7 | it('generates trace PlotlyFolds with name == text', () => {
8 | const fixture = fixtures.scatter({data: [{name: 'hodor'}]});
9 |
10 | const folds = mount(
11 |
12 |
13 |
14 |
16 |
17 |
18 | ).find(PlotlyFold);
19 |
20 | expect(folds.at(0).prop('name')).toBe('hodor');
21 | });
22 |
23 | it('can add traces', () => {
24 | const fixture = fixtures.scatter({data: [{name: 'hodor'}]});
25 | const beforeAddTrace = jest.fn();
26 | const editor = mount(
27 |
28 |
29 |
30 |
32 |
33 |
34 | );
35 |
36 | editor.find('button.js-add-button').simulate('click');
37 |
38 | expect(beforeAddTrace).toBeCalled();
39 | });
40 |
41 | it('can delete traces', () => {
42 | const fixture = fixtures.scatter({data: [{name: 'hodor'}]});
43 | const beforeDeleteTrace = jest.fn();
44 | const editor = mount(
45 |
46 |
47 |
48 |
50 |
51 |
52 | );
53 |
54 | editor.find('.js-fold__delete').at(0).simulate('click');
55 |
56 | expect(beforeDeleteTrace).toBeCalled();
57 | const update = beforeDeleteTrace.mock.calls[0][0];
58 | expect(update.traceIndexes[0]).toBe(0);
59 | });
60 | });
61 |
--------------------------------------------------------------------------------
/src/components/containers/derived.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PlotlyPanel from './PlotlyPanel';
3 | import PlotlySection from './PlotlySection';
4 | import PropTypes from 'prop-types';
5 |
6 | import {connectLayoutToPlot, containerConnectedContextTypes} from 'lib';
7 |
8 | const LayoutPanel = connectLayoutToPlot(PlotlyPanel);
9 | const LayoutSection = connectLayoutToPlot(PlotlySection);
10 |
11 | const TraceTypeSection = (props, context) => {
12 | const {fullContainer, fullData} = context;
13 | const {mode, traceTypes} = props;
14 |
15 | const ifConnectedToTrace =
16 | mode === 'trace' && fullContainer && traceTypes.includes(fullContainer.type);
17 |
18 | const ifConnectedToLayout =
19 | mode === 'layout' && fullData && fullData.some((t) => traceTypes.includes(t.type));
20 |
21 | if (ifConnectedToTrace || ifConnectedToLayout) {
22 | return
47 |
54 | ) : (
55 |
56 |
62 | );
63 | }
64 | }
65 |
66 | AxesSelector.contextTypes = {
67 | axesTargetHandler: PropTypes.func,
68 | axesTarget: PropTypes.string,
69 | fullLayout: PropTypes.object,
70 | localize: PropTypes.func,
71 | };
72 |
73 | AxesSelector.propTypes = {
74 | axesOptions: PropTypes.array,
75 | };
76 |
77 | export default AxesSelector;
78 |
--------------------------------------------------------------------------------
/src/components/fields/AxisRangeValue.js:
--------------------------------------------------------------------------------
1 | import Field from './Field';
2 | import {UnconnectedNumeric} from './Numeric';
3 | import {UnconnectedDateTimePicker} from './DateTimePicker';
4 | import PropTypes from 'prop-types';
5 | import React, {Component} from 'react';
6 | import {connectToContainer} from 'lib';
7 | import Info from './Info';
8 | import {MULTI_VALUED} from 'lib/constants';
9 |
10 | export class UnconnectedAxisRangeValue extends Component {
11 | render() {
12 | // only when all axes have the type date, can we output an UnconnectedDateTimePicker
13 | if (this.props.fullContainer && this.props.fullContainer.type === 'date') {
14 | return
21 |
34 | );
35 | }
36 |
37 | return (
38 |
39 |
44 | );
45 | }
46 | }
47 |
48 | UnconnectedColorPicker.propTypes = {
49 | fullValue: PropTypes.any,
50 | updatePlot: PropTypes.func,
51 | handleEmpty: PropTypes.bool,
52 | defaultColor: PropTypes.string,
53 | ...Field.propTypes,
54 | };
55 |
56 | UnconnectedColorPicker.contextTypes = {
57 | localize: PropTypes.func,
58 | };
59 |
60 | UnconnectedColorPicker.displayName = 'UnconnectedColorPicker';
61 |
62 | export default connectToContainer(UnconnectedColorPicker);
63 |
--------------------------------------------------------------------------------
/src/components/fields/ColorscalePicker.js:
--------------------------------------------------------------------------------
1 | import ColorscalePickerWidget from '../widgets/ColorscalePicker';
2 | import Field from './Field';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectToContainer} from 'lib';
6 | import {EDITOR_ACTIONS} from 'lib/constants';
7 |
8 | export class UnconnectedColorscalePicker extends Component {
9 | constructor() {
10 | super();
11 | this.onUpdate = this.onUpdate.bind(this);
12 | }
13 |
14 | onUpdate(colorscale, colorscaleType) {
15 | if (Array.isArray(colorscale)) {
16 | this.props.updatePlot(
17 | colorscale.map((c, i) => {
18 | let step = i / (colorscale.length - 1);
19 | if (i === 0) {
20 | step = 0;
21 | }
22 | return [step, c];
23 | }),
24 | colorscaleType
25 | );
26 | this.context.onUpdate({
27 | type: EDITOR_ACTIONS.UPDATE_TRACES,
28 | payload: {
29 | update: {autocolorscale: false},
30 | traceIndexes: [this.props.fullContainer.index],
31 | },
32 | });
33 | }
34 | }
35 |
36 | render() {
37 | const {fullValue} = this.props;
38 | const colorscale = Array.isArray(fullValue) ? fullValue.map((v) => v[1]) : null;
39 |
40 | return (
41 |
42 |
49 | );
50 | }
51 | }
52 |
53 | UnconnectedColorscalePicker.propTypes = {
54 | labelWidth: PropTypes.number,
55 | fullValue: PropTypes.any,
56 | fullContainer: PropTypes.object,
57 | updatePlot: PropTypes.func,
58 | initialCategory: PropTypes.string,
59 | ...Field.propTypes,
60 | };
61 |
62 | UnconnectedColorscalePicker.contextTypes = {
63 | container: PropTypes.object,
64 | graphDiv: PropTypes.object,
65 | onUpdate: PropTypes.func,
66 | };
67 |
68 | UnconnectedColorscalePicker.displayName = 'UnconnectedColorscalePicker';
69 |
70 | export default connectToContainer(UnconnectedColorscalePicker);
71 |
--------------------------------------------------------------------------------
/src/components/fields/ColorwayPicker.js:
--------------------------------------------------------------------------------
1 | import ColorscalePickerWidget from '../widgets/ColorscalePicker';
2 | import Field from './Field';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectToContainer} from 'lib';
6 |
7 | class UnconnectedColorwayPicker extends Component {
8 | render() {
9 | return (
10 |
11 |
18 | );
19 | }
20 | }
21 |
22 | UnconnectedColorwayPicker.propTypes = {
23 | fullValue: PropTypes.any,
24 | updatePlot: PropTypes.func,
25 | ...Field.propTypes,
26 | };
27 |
28 | UnconnectedColorwayPicker.displayName = 'UnconnectedColorwayPicker';
29 |
30 | export default connectToContainer(UnconnectedColorwayPicker);
31 |
--------------------------------------------------------------------------------
/src/components/fields/DateTimePicker.js:
--------------------------------------------------------------------------------
1 | import Field from './Field';
2 | import Picker from '../widgets/DateTimePicker';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectToContainer} from 'lib';
6 |
7 | export class UnconnectedDateTimePicker extends Component {
8 | render() {
9 | return (
10 |
11 |
17 | );
18 | }
19 | }
20 |
21 | UnconnectedDateTimePicker.propTypes = {
22 | fullValue: PropTypes.string,
23 | updatePlot: PropTypes.func,
24 | placeholder: PropTypes.string,
25 | ...Field.propTypes,
26 | };
27 |
28 | UnconnectedDateTimePicker.displayName = 'UnconnectedDateTimePicker';
29 |
30 | export default connectToContainer(UnconnectedDateTimePicker);
31 |
--------------------------------------------------------------------------------
/src/components/fields/Dropdown.js:
--------------------------------------------------------------------------------
1 | import DropdownWidget from '../widgets/Dropdown';
2 | import Field from './Field';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectToContainer} from 'lib';
6 |
7 | export class UnconnectedDropdown extends Component {
8 | render() {
9 | let placeholder;
10 | if (this.props.multiValued) {
11 | placeholder = this.props.fullValue;
12 | }
13 |
14 | return (
15 |
16 |
27 | );
28 | }
29 | }
30 |
31 | UnconnectedDropdown.propTypes = {
32 | backgroundDark: PropTypes.bool,
33 | components: PropTypes.object,
34 | clearable: PropTypes.bool,
35 | fullValue: PropTypes.any,
36 | options: PropTypes.array.isRequired,
37 | updatePlot: PropTypes.func,
38 | disabled: PropTypes.bool,
39 | ...Field.propTypes,
40 | };
41 |
42 | UnconnectedDropdown.displayName = 'UnconnectedDropdown';
43 |
44 | export default connectToContainer(UnconnectedDropdown);
45 |
--------------------------------------------------------------------------------
/src/components/fields/Dropzone.js:
--------------------------------------------------------------------------------
1 | import Drop from '../widgets/Dropzone';
2 | import Field from './Field';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectToContainer} from 'lib';
6 |
7 | export class UnconnectedDropzone extends Component {
8 | render() {
9 | return (
10 |
11 |
17 | );
18 | }
19 | }
20 |
21 | UnconnectedDropzone.propTypes = {
22 | value: PropTypes.any,
23 | onUpdate: PropTypes.func,
24 | ...Field.propTypes,
25 | };
26 |
27 | UnconnectedDropzone.displayName = 'UnconnectedDropzone';
28 |
29 | function modifyPlotProps(props, context, plotProps) {
30 | if (context.container.type === 'choroplethmapbox' || context.container.type === 'choropleth') {
31 | plotProps.isVisible = true;
32 | }
33 | }
34 |
35 | export default connectToContainer(UnconnectedDropzone, {modifyPlotProps});
36 |
--------------------------------------------------------------------------------
/src/components/fields/Flaglist.js:
--------------------------------------------------------------------------------
1 | import Field from './Field';
2 | import FlaglistCheckboxGroup from '../widgets/FlaglistCheckboxGroup';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectToContainer} from 'lib';
6 |
7 | export class UnconnectedFlaglist extends Component {
8 | render() {
9 | return (
10 |
11 |
17 | );
18 | }
19 | }
20 |
21 | UnconnectedFlaglist.propTypes = {
22 | fullValue: PropTypes.any,
23 | options: PropTypes.array.isRequired,
24 | updatePlot: PropTypes.func,
25 | ...Field.propTypes,
26 | };
27 |
28 | UnconnectedFlaglist.displayName = 'UnconnectedFlaglist';
29 |
30 | export default connectToContainer(UnconnectedFlaglist);
31 |
--------------------------------------------------------------------------------
/src/components/fields/FontSelector.js:
--------------------------------------------------------------------------------
1 | import Dropdown from './Dropdown';
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | const FontSelector = (props, context) => (
6 | ({
9 | label: {label},
10 | value,
11 | }))}
12 | />
13 | );
14 |
15 | FontSelector.propTypes = {
16 | ...Dropdown.propTypes,
17 | };
18 |
19 | FontSelector.defaultProps = {clearable: false};
20 |
21 | FontSelector.contextTypes = {
22 | fontOptions: PropTypes.array,
23 | };
24 |
25 | export default FontSelector;
26 |
--------------------------------------------------------------------------------
/src/components/fields/Info.js:
--------------------------------------------------------------------------------
1 | import Field from './Field';
2 | import React, {Component} from 'react';
3 |
4 | export default class Info extends Component {
5 | render() {
6 | return (
7 |
8 |
12 | );
13 | }
14 | }
15 |
16 | Info.plotly_editor_traits = {
17 | no_visibility_forcing: true,
18 | };
19 |
20 | Info.propTypes = {
21 | ...Field.propTypes,
22 | };
23 |
--------------------------------------------------------------------------------
/src/components/fields/Numeric.js:
--------------------------------------------------------------------------------
1 | import Field from './Field';
2 | import NumericInput from '../widgets/NumericInput';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectToContainer} from 'lib';
6 |
7 | export class UnconnectedNumeric extends Component {
8 | render() {
9 | let fullValue = this.props.fullValue;
10 | let placeholder;
11 | if (this.props.multiValued) {
12 | placeholder = fullValue;
13 | fullValue = '';
14 | }
15 |
16 | return (
17 |
18 |
32 | );
33 | }
34 | }
35 |
36 | UnconnectedNumeric.propTypes = {
37 | defaultValue: PropTypes.any,
38 | fullValue: PropTypes.any,
39 | min: PropTypes.number,
40 | max: PropTypes.number,
41 | multiValued: PropTypes.bool,
42 | hideArrows: PropTypes.bool,
43 | showSlider: PropTypes.bool,
44 | step: PropTypes.number,
45 | stepmode: PropTypes.string,
46 | updatePlot: PropTypes.func,
47 | ...Field.propTypes,
48 | };
49 |
50 | UnconnectedNumeric.displayName = 'UnconnectedNumeric';
51 |
52 | export default connectToContainer(UnconnectedNumeric);
53 |
--------------------------------------------------------------------------------
/src/components/fields/NumericOrDate.js:
--------------------------------------------------------------------------------
1 | import Field from './Field';
2 | import {UnconnectedNumeric} from './Numeric';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectToContainer} from 'lib';
6 | import {isDateTime} from 'plotly.js/src/lib';
7 | import {isJSDate} from 'plotly.js/src/lib/dates';
8 | import {UnconnectedDateTimePicker} from './DateTimePicker';
9 |
10 | export class UnconnectedNumericOrDate extends Component {
11 | render() {
12 | const date = typeof this.props.fullValue === 'string' && this.props.fullValue.split(' ')[0];
13 | const fullValueIsDate =
14 | typeof this.props.fullValue === 'string' && date && (isDateTime(date) || isJSDate(date));
15 |
16 | return fullValueIsDate ? (
17 |
29 |
35 | );
36 | }
37 | }
38 |
39 | UnconnectedPieColorscalePicker.propTypes = {
40 | fullValue: PropTypes.any,
41 | updatePlot: PropTypes.func,
42 | ...Field.propTypes,
43 | };
44 |
45 | UnconnectedPieColorscalePicker.contextTypes = {
46 | container: PropTypes.object,
47 | graphDiv: PropTypes.object,
48 | };
49 |
50 | UnconnectedPieColorscalePicker.displayName = 'UnconnectedPieColorscalePicker';
51 |
52 | export default connectToContainer(UnconnectedPieColorscalePicker, {
53 | modifyPlotProps: (props, context, plotProps) => {
54 | if (
55 | context &&
56 | context.container &&
57 | context.graphDiv &&
58 | (!plotProps.fullValue ||
59 | (Array.isArray(plotProps.fullValue) && !plotProps.fullValue.length)) &&
60 | context.graphDiv.calcdata
61 | ) {
62 | plotProps.fullValue = context.graphDiv.calcdata[0].map((d) => d.color);
63 | }
64 |
65 | if (context.traceIndexes.length > 1) {
66 | plotProps.isVisible = false;
67 | }
68 | },
69 | });
70 |
--------------------------------------------------------------------------------
/src/components/fields/Radio.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React, {Component} from 'react';
3 | import RadioBlocks from '../widgets/RadioBlocks';
4 | import Field from './Field';
5 | import {connectToContainer} from 'lib';
6 |
7 | export class UnconnectedRadio extends Component {
8 | render() {
9 | return (
10 |
11 |
17 | );
18 | }
19 | }
20 |
21 | UnconnectedRadio.propTypes = {
22 | center: PropTypes.bool,
23 | fullValue: PropTypes.any,
24 | options: PropTypes.array.isRequired,
25 | updatePlot: PropTypes.func,
26 | ...Field.propTypes,
27 | };
28 |
29 | // for better appearance overrides {center: false}
30 | // default prop. This can be overridden manually using props for .
31 | UnconnectedRadio.defaultProps = {
32 | center: true,
33 | };
34 |
35 | UnconnectedRadio.displayName = 'UnconnectedRadio';
36 |
37 | export default connectToContainer(UnconnectedRadio);
38 |
--------------------------------------------------------------------------------
/src/components/fields/Text.js:
--------------------------------------------------------------------------------
1 | import Field from './Field';
2 | import TextInput from '../widgets/TextInput';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectToContainer} from 'lib';
6 |
7 | export class UnconnectedText extends Component {
8 | render() {
9 | let fullValue = this.props.fullValue;
10 | let placeholder;
11 | if (this.props.multiValued) {
12 | placeholder = fullValue;
13 | fullValue = '';
14 | }
15 |
16 | return (
17 |
18 |
26 | );
27 | }
28 | }
29 |
30 | UnconnectedText.propTypes = {
31 | defaultValue: PropTypes.any,
32 | fullValue: PropTypes.any,
33 | multiValued: PropTypes.bool,
34 | updatePlot: PropTypes.func,
35 | onChange: PropTypes.func,
36 | ...Field.propTypes,
37 | };
38 |
39 | UnconnectedText.displayName = 'UnconnectedText';
40 |
41 | export default connectToContainer(UnconnectedText);
42 |
--------------------------------------------------------------------------------
/src/components/fields/UpdateMenuButtons.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React, {Component} from 'react';
3 | import {Dropdown, TextEditor} from '../index';
4 | import Field from './Field';
5 | import {connectToContainer} from 'lib';
6 |
7 | class UpdateMenuButtons extends Component {
8 | constructor(props, context) {
9 | super(props, context);
10 | this.state = {
11 | currentButtonIndex: 0,
12 | };
13 | }
14 |
15 | renderDropdown() {
16 | const _ = this.context.localize;
17 | const options = this.props.fullValue.map((button, index) => {
18 | return {label: _('Button') + ` ${index + 1}`, value: index};
19 | });
20 | return (
21 | this.setState({currentButtonIndex: index})}
26 | clearable={false}
27 | fullValue={this.state.currentButtonIndex}
28 | />
29 | );
30 | }
31 |
32 | render() {
33 | return (
34 |
35 | {this.renderDropdown()}
36 |
38 | );
39 | }
40 | }
41 |
42 | UpdateMenuButtons.propTypes = {
43 | attr: PropTypes.string,
44 | fullValue: PropTypes.array,
45 | updatePlot: PropTypes.func,
46 | };
47 |
48 | UpdateMenuButtons.contextTypes = {
49 | localize: PropTypes.func,
50 | };
51 |
52 | export default connectToContainer(UpdateMenuButtons);
53 |
--------------------------------------------------------------------------------
/src/components/fields/__tests__/ArrowSelector-test.js:
--------------------------------------------------------------------------------
1 | import ArrowSelector from '../ArrowSelector';
2 | import Dropdown from '../Dropdown';
3 | import React from 'react';
4 | import {shallow} from 'lib/test-utils';
5 |
6 | describe('', () => {
7 | // test mostly an insurance policy against plotly.js changing arrow_paths on us.
8 | it('pulls arrow_paths from plotly.js and sets as options', () => {
9 | const minNumberOfArrowsExpected = 4;
10 | const options = shallow(', () => {
12 | it('enables centering by default', () => {
13 | const wrapper = mount(
14 |
15 |
16 |
25 |
26 | ).find(Field);
27 |
28 | expect(wrapper.prop('center')).toBe(true);
29 | });
30 |
31 | it('permits centering to be disabled', () => {
32 | const wrapper = mount(
33 |
34 |
35 |
45 |
46 | ).find(Field);
47 |
48 | expect(wrapper.prop('center')).toBe(false);
49 | });
50 | });
51 |
--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | import {Button} from './widgets';
2 | import PanelMenuWrapper from './PanelMenuWrapper';
3 |
4 | export {Button, PanelMenuWrapper};
5 |
6 | export * from './fields';
7 | export * from './containers';
8 |
--------------------------------------------------------------------------------
/src/components/sidebar/SidebarGroup.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React, {Component} from 'react';
3 | import {bem} from 'lib';
4 | import {AngleRightIcon} from 'plotly-icons';
5 | import SidebarItem from './SidebarItem';
6 |
7 | export default class SidebarGroup extends Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.state = {
12 | expanded: this.props.group === this.props.selectedGroup,
13 | };
14 |
15 | this.toggleExpanded = this.toggleExpanded.bind(this);
16 | this.onChangeGroup = this.onChangeGroup.bind(this);
17 | this.renderSubItem = this.renderSubItem.bind(this);
18 | }
19 |
20 | toggleExpanded() {
21 | this.setState({expanded: !this.state.expanded});
22 | }
23 |
24 | onChangeGroup(panel) {
25 | this.props.onChangeGroup(this.props.group, panel);
26 | }
27 |
28 | renderSubItem(panel, i) {
29 | const isActive =
30 | this.props.selectedPanel === panel && this.props.group === this.props.selectedGroup;
31 |
32 | return (
33 | this.onChangeGroup(panel)}
37 | label={panel}
38 | />
39 | );
40 | }
41 |
42 | render() {
43 | const {group, panels, selectedGroup} = this.props;
44 | const {expanded} = this.state;
45 | return (
46 | 
;
8 | return link ? {image} : image;
9 | }
10 | }
11 |
12 | Logo.plotly_editor_traits = {sidebar_element: true};
13 |
14 | Logo.propTypes = {
15 | src: PropTypes.string,
16 | link: PropTypes.string,
17 | };
18 |
--------------------------------------------------------------------------------
/src/components/widgets/RadioBlocks.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import PropTypes from 'prop-types';
3 | import classnames from 'classnames';
4 |
5 | class RadioBlocks extends Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {activeOption: this.props.activeOption};
9 | this.handleChange = this.handleChange.bind(this);
10 | this.renderOption = this.renderOption.bind(this);
11 | }
12 |
13 | UNSAFE_componentWillReceiveProps(nextProps) {
14 | // Reset the value to the graph's actual value
15 | if (nextProps.activeOption !== this.state.activeOption) {
16 | this.setState({
17 | activeOption: nextProps.activeOption,
18 | });
19 | }
20 | }
21 |
22 | handleChange(newValue) {
23 | this.setState({activeOption: newValue});
24 | this.props.onOptionChange(newValue);
25 | }
26 |
27 | renderOption(optionName) {
28 | const {label, value, icon: Icon} = optionName;
29 | const defaultActive = this.state.activeOption === value;
30 |
31 | const optionClass = classnames('radio-block__option', {
32 | 'radio-block__option--active': defaultActive,
33 | });
34 |
35 | return (
36 | {
26 | if (this.props.onChange) {
27 | this.props.onChange(value);
28 | }
29 | this.setState({value});
30 | }}
31 | onUpdate={this.props.onUpdate}
32 | />
33 | );
34 | }
35 | }
36 |
37 | TextInput.propTypes = {
38 | defaultValue: PropTypes.any,
39 | editableClassName: PropTypes.string,
40 | onUpdate: PropTypes.func.isRequired,
41 | onChange: PropTypes.func,
42 | placeholder: PropTypes.string,
43 | value: PropTypes.any,
44 | };
45 |
--------------------------------------------------------------------------------
/src/components/widgets/index.js:
--------------------------------------------------------------------------------
1 | import Button from './Button';
2 | import RadioBlocks from './RadioBlocks';
3 | import DateTimePicker from './DateTimePicker';
4 | import TraceTypeSelector, {TraceTypeSelectorButton} from './TraceTypeSelector';
5 |
6 | export {Button, RadioBlocks, TraceTypeSelector, TraceTypeSelectorButton, DateTimePicker};
7 |
--------------------------------------------------------------------------------
/src/components/widgets/text_editors/HTML.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import TextArea from '../TextArea';
4 |
5 | class HTML extends TextArea {
6 | render() {
7 | const {className} = this.props;
8 | const editorClassNames = className ? className : 'text-editor__html';
9 | return (
10 |
16 | );
17 | }
18 | }
19 |
20 | HTML.propTypes = {
21 | className: PropTypes.string,
22 | };
23 |
24 | HTML.defaultProps = {
25 | placeholder: '',
26 | };
27 |
28 | export default HTML;
29 |
--------------------------------------------------------------------------------
/src/components/widgets/text_editors/LaTeX.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import TextArea from '../TextArea';
3 | import PropTypes from 'prop-types';
4 |
5 | import {isLaTeXExpr as isWrapped} from './convertFormats';
6 |
7 | export default class LaTeX extends TextArea {
8 | constructor(props) {
9 | super(props);
10 |
11 | // Internally, represesent the LaTeX document without the
12 | // wrapping `$...$` characters.
13 | const unwrappedValue = this.unwrap(props.value);
14 |
15 | this.state = {
16 | value: unwrappedValue,
17 | };
18 | this.onChange = this.onChange.bind(this);
19 | this.onBlur = this.onBlur.bind(this);
20 | }
21 |
22 | UNSAFE_componentWillReceiveProps(nextProps) {
23 | const unwrappedNextValue = this.unwrap(nextProps.value);
24 |
25 | if (unwrappedNextValue !== this.state.value) {
26 | this.setState({
27 | value: unwrappedNextValue,
28 | });
29 | }
30 | }
31 |
32 | // Return a new value with wrapping `$...$` removed.
33 | unwrap(value) {
34 | if (isWrapped(value)) {
35 | return value.substr(1, value.length - 2);
36 | }
37 |
38 | return value;
39 | }
40 |
41 | // Wrap value in `$...$`.
42 | wrap(value) {
43 | if (!isWrapped(value)) {
44 | return `$${value}$`;
45 | }
46 |
47 | return value;
48 | }
49 |
50 | onChange(e) {
51 | this.setState({
52 | value: e.target.value,
53 | });
54 | }
55 |
56 | onBlur(e) {
57 | const value = this.wrap(e.target.value);
58 | this.props.onChange(value);
59 | }
60 |
61 | render() {
62 | const {className} = this.props;
63 | const editorClassNames = className ? className : 'text-editor__latex';
64 | return (
65 |
72 | );
73 | }
74 | }
75 |
76 | LaTeX.propTypes = {
77 | className: PropTypes.string,
78 | onChange: PropTypes.func.isRequired,
79 | placeholder: PropTypes.string,
80 | value: PropTypes.string,
81 | };
82 |
83 | LaTeX.defaultProps = {
84 | value: '',
85 | placeholder: '',
86 | };
87 |
--------------------------------------------------------------------------------
/src/components/widgets/text_editors/RichText/LinkDecorator.js:
--------------------------------------------------------------------------------
1 | /*
2 | * A DecoratorComponent is used by `draft-js` to render rich content
3 | * beyond inline styles. This Decorator renders LINK entities.
4 | *
5 | * See
6 | * https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html#decorator-components
7 | */
8 |
9 | import React from 'react';
10 | import PropTypes from 'prop-types';
11 |
12 | const LinkDecorator = (props) => {
13 | return (
14 |
15 | {props.children}
16 |
17 | );
18 | };
19 |
20 | LinkDecorator.propTypes = {
21 | style: PropTypes.object.isRequired,
22 | children: PropTypes.oneOfType([PropTypes.array, PropTypes.element]).isRequired,
23 | };
24 |
25 | export default LinkDecorator;
26 |
--------------------------------------------------------------------------------
/src/components/widgets/text_editors/RichText/StyleButton.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import PropTypes from 'prop-types';
3 | import classnames from 'classnames';
4 |
5 | class StyleButton extends Component {
6 | constructor(props) {
7 | super(props);
8 |
9 | this.onToggle = this.onToggle.bind(this);
10 | }
11 |
12 | onToggle(ev) {
13 | // Prevent focus moving from editor to button
14 | ev.preventDefault();
15 | this.props.onToggle(this.props.value);
16 | }
17 |
18 | render() {
19 | const {active, label, value} = this.props;
20 |
21 | const className = classnames(
22 | 'rich-text-editor__styleButton',
23 | `rich-text-editor__styleButton__${value}`,
24 | {
25 | 'rich-text-editor__styleButton--active': active,
26 | }
27 | );
28 |
29 | return (
30 |
31 |
37 | {label}
38 |
39 |
40 | );
41 | }
42 | }
43 |
44 | StyleButton.propTypes = {
45 | active: PropTypes.bool,
46 |
47 | // A (styled) React element to display as label
48 | label: PropTypes.element.isRequired,
49 |
50 | // Callback for clicks
51 | onToggle: PropTypes.func.isRequired,
52 |
53 | // The value passed to `onToggle` when clicked
54 | value: PropTypes.string.isRequired,
55 | };
56 |
57 | export default StyleButton;
58 |
--------------------------------------------------------------------------------
/src/components/widgets/text_editors/RichText/StyleButtonGroup.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import PropTypes from 'prop-types';
3 | import StyleButton from './StyleButton';
4 | import {LINK} from './configuration';
5 |
6 | class StyleButtonGroup extends Component {
7 | render() {
8 | const {currentStyle, linkIsSelected, styles, onToggle} = this.props;
9 |
10 | const isActive = (currentStyle, value) => {
11 | if (value === LINK) {
12 | return linkIsSelected;
13 | }
14 |
15 | if (typeof currentStyle.has === 'function') {
16 | return currentStyle.has(value);
17 | }
18 |
19 | return Boolean(currentStyle.value);
20 | };
21 |
22 | return (
23 |
'); 33 | }; 34 | 35 | const wrapLaTeX = (value) => (value ? `$${value}$` : '$$'); 36 | 37 | const wrapText = (value) => (value ? `\\text{${value}}` : '\\text{}'); 38 | 39 | // Exports 40 | // ------- 41 | 42 | export const isLaTeXExpr = (value) => getLaTeXWrappedRegExp().test(value); 43 | 44 | export const hasTextExpression = (laTeX) => { 45 | const regExp = getTextBlockRegExp(); 46 | const stringifiedLaTeX = JSON.stringify(laTeX); 47 | 48 | return regExp.test(stringifiedLaTeX); 49 | }; 50 | 51 | export const htmlToLaTeX = (html) => { 52 | const breakTag = '
'; 53 | const trimmedHTML = html.trim(); 54 | 55 | // Handle empty input 56 | if (trimmedHTML === '') { 57 | return wrapLaTeX(wrapText()); 58 | } 59 | 60 | // Handle input with only linebreaks 61 | if (trimmedHTML.replace(breakTag, '') === '') { 62 | return wrapLaTeX(wrapText()); 63 | } 64 | 65 | return wrapLaTeX( 66 | trimmedHTML 67 | .split(breakTag) 68 | 69 | // Ignore empty linebreaks 70 | .map((para) => (para.length ? wrapText(stripHTMLTags(para)) : '')) 71 | .join('\n') 72 | ); 73 | }; 74 | 75 | export const laTeXToHTML = (laTeX) => { 76 | const trimmedLaTeX = laTeX.trim(); 77 | 78 | return extractTextBlocks(trimmedLaTeX); 79 | }; 80 | -------------------------------------------------------------------------------- /src/default_panels/StyleImagesPanel.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | ImageAccordion, 5 | Radio, 6 | Dropzone, 7 | PositioningNumeric, 8 | PlotlySection, 9 | PositioningRef, 10 | Dropdown, 11 | } from '../components'; 12 | 13 | const StyleImagesPanel = (props, {localize: _}) => ( 14 |
15 |
46 |
59 |
60 |
61 |
74 |
75 | );
76 |
77 | StyleImagesPanel.contextTypes = {
78 | localize: PropTypes.func,
79 | };
80 |
81 | export default StyleImagesPanel;
82 |
--------------------------------------------------------------------------------
/src/default_panels/StyleShapesPanel.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | ShapeAccordion,
5 | Radio,
6 | PlotlySection,
7 | PositioningRef,
8 | PositioningNumeric,
9 | Numeric,
10 | NumericFraction,
11 | ColorPicker,
12 | LineDashSelector,
13 | } from '../components';
14 |
15 | const StyleShapesPanel = (props, {localize: _}) => (
16 |
17 |
34 |
38 |
39 |
40 |
44 |
45 |
49 |
50 |
53 |
54 | );
55 |
56 | StyleShapesPanel.contextTypes = {
57 | localize: PropTypes.func,
58 | };
59 |
60 | export default StyleShapesPanel;
61 |
--------------------------------------------------------------------------------
/src/default_panels/index.js:
--------------------------------------------------------------------------------
1 | export {default as GraphCreatePanel} from './GraphCreatePanel';
2 | export {default as GraphTransformsPanel} from './GraphTransformsPanel';
3 | export {default as StyleLayoutPanel} from './StyleLayoutPanel';
4 | export {default as StyleAxesPanel} from './StyleAxesPanel';
5 | export {default as StyleMapsPanel} from './StyleMapsPanel';
6 | export {default as StyleLegendPanel} from './StyleLegendPanel';
7 | export {default as StyleNotesPanel} from './StyleNotesPanel';
8 | export {default as StyleShapesPanel} from './StyleShapesPanel';
9 | export {default as StyleSlidersPanel} from './StyleSlidersPanel';
10 | export {default as StyleImagesPanel} from './StyleImagesPanel';
11 | export {default as StyleTracesPanel} from './StyleTracesPanel';
12 | export {default as StyleColorbarsPanel} from './StyleColorbarsPanel';
13 | export {default as StyleUpdateMenusPanel} from './StyleUpdateMenusPanel';
14 | export {default as GraphSubplotsPanel} from './GraphSubplotsPanel';
15 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import PlotlyEditor from './PlotlyEditor';
2 | import DefaultEditor from './DefaultEditor';
3 | import EditorControls from './EditorControls';
4 | import {EDITOR_ACTIONS} from './lib/constants';
5 |
6 | export {DefaultEditor, EditorControls, EDITOR_ACTIONS};
7 |
8 | export * from './lib';
9 | export * from './components';
10 | export * from './default_panels';
11 |
12 | export default PlotlyEditor;
13 |
--------------------------------------------------------------------------------
/src/lib/__tests__/connectAnnotationToLayout-test.js:
--------------------------------------------------------------------------------
1 | import NumericInput from '../../components/widgets/NumericInput';
2 | import React from 'react';
3 | import {Numeric} from '../../components/fields';
4 | import {TestEditor, fixtures, mount} from '../test-utils';
5 | import {connectLayoutToPlot, connectAnnotationToLayout} from '..';
6 |
7 | describe('connectAnnotationToLayout', () => {
8 | it('sends update to layout.annotation[index]', () => {
9 | const beforeUpdateLayout = jest.fn();
10 | const fixture = fixtures.scatter({
11 | layout: {annotations: [{text: 'hodor'}]},
12 | });
13 | const ConnectedNumeric = connectLayoutToPlot(connectAnnotationToLayout(Numeric));
14 |
15 | mount(
16 |
17 |
19 | )
20 | .find(NumericInput)
21 | .find('.js-numeric-increase')
22 | .simulate('click');
23 |
24 | const payload = beforeUpdateLayout.mock.calls[0][0];
25 | expect(payload.update).toEqual({'annotations[0].textangle': 1});
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/src/lib/__tests__/maybeAdjustSrc-test.js:
--------------------------------------------------------------------------------
1 | import {maybeAdjustSrc} from '../index';
2 | /* eslint-disable no-magic-numbers */
3 | describe('maybeAdjustSrc', () => {
4 | it('uses custom parsing function if one is provided', () => {
5 | const custom = (srcs) => srcs.join('$');
6 | const adjusted = maybeAdjustSrc(['z1', 'z2'], 'zsrc', 'heatmap', {
7 | fromSrc: custom,
8 | });
9 | expect(adjusted).toBe('z1$z2');
10 | });
11 |
12 | it('reduces src to string for special table case', () => {
13 | const adjusted = maybeAdjustSrc(['z1'], 'header.valuessrc', 'table');
14 | expect(adjusted).toBe('z1');
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/lib/__tests__/maybeTransposeData-test.js:
--------------------------------------------------------------------------------
1 | import {maybeTransposeData} from '../index';
2 | /* eslint-disable no-magic-numbers */
3 | describe('maybeTransposeData', () => {
4 | it('transposes 2d data for row based traceTypes', () => {
5 | const transposed = maybeTransposeData(
6 | [
7 | [1, 2, 3],
8 | [4, 5, 6],
9 | ],
10 | 'zsrc',
11 | 'heatmap'
12 | );
13 |
14 | // [[1, 4], [2, 5], [3, 6]]
15 | expect(transposed.length).toBe(3);
16 | });
17 |
18 | it('transposes 1d data for row based traceTypes', () => {
19 | const transposed = maybeTransposeData([1, 2, 3], 'zsrc', 'heatmap');
20 |
21 | // [[1], [2], [3]]
22 | expect(transposed.length).toBe(3);
23 | });
24 |
25 | it('does not transpose data for column based traceTypes', () => {
26 | const transposed = maybeTransposeData(
27 | [
28 | [1, 2, 3],
29 | [4, 5, 6],
30 | ],
31 | 'header.valuessrc',
32 | 'table'
33 | );
34 |
35 | // [[1, 2, 3], [4, 5, 6]]
36 | expect(transposed.length).toBe(2);
37 | });
38 |
39 | it('removes extra array wrapping for special cases in tables', () => {
40 | const transposed = maybeTransposeData([[1, 2, 3]], 'header.valuessrc', 'table');
41 |
42 | // [1, 2, 3]
43 | expect(Array.isArray(transposed[0])).toBe(false);
44 | expect(transposed.length).toBe(3);
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/src/lib/__tests__/multiValued-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Numeric} from '../../components';
3 | import {TestEditor, fixtures, plotly} from '../test-utils';
4 | import {connectLayoutToPlot, connectAxesToLayout} from '..';
5 | import {mount} from 'enzyme';
6 |
7 | describe('multiValued Numeric', () => {
8 | it('uses multiValued defaultContainer as default increment value', () => {
9 | const beforeUpdateLayout = jest.fn();
10 | const xaxisLowerRange = -30;
11 | const fixtureProps = fixtures.scatter({
12 | layout: {xaxis: {range: [xaxisLowerRange, 3]}, yaxis: {range: [0, 3]}},
13 | });
14 | const AxesNumeric = connectLayoutToPlot(connectAxesToLayout(Numeric));
15 |
16 | mount(
17 |
18 |
20 | )
21 | .find('.js-numeric-increase')
22 | .simulate('click');
23 |
24 | expect(beforeUpdateLayout).toBeCalled();
25 | const payload = beforeUpdateLayout.mock.calls[0][0];
26 | expect(payload.update).toEqual({
27 | 'xaxis.range[0]': xaxisLowerRange + 1,
28 | });
29 | });
30 | });
31 |
--------------------------------------------------------------------------------
/src/lib/__tests__/transpose-test.js:
--------------------------------------------------------------------------------
1 | import {transpose} from '../index';
2 | /* eslint-disable no-magic-numbers */
3 | describe('transpose', () => {
4 | it('correctly transposes 1d arrays', () => {
5 | const originalArray = [1, 2, 3];
6 | const transposedArray = transpose(originalArray);
7 |
8 | expect(transposedArray.length).toBe(3);
9 |
10 | transposedArray.forEach((subArray) => {
11 | expect(Array.isArray(subArray)).toBe(true);
12 | expect(subArray.length).toBe(1);
13 | });
14 |
15 | expect(transposedArray[0][0]).toBe(1);
16 | expect(transposedArray[1][0]).toBe(2);
17 | expect(transposedArray[2][0]).toBe(3);
18 | });
19 |
20 | it('correctly transposes 2d arrays', () => {
21 | const originalArray = [
22 | [1, 2, 3],
23 | [9, 8, 0],
24 | ];
25 | const transposedArray = transpose(originalArray);
26 |
27 | expect(transposedArray.length).toBe(3);
28 | transposedArray.forEach((subArray) => {
29 | expect(Array.isArray(subArray)).toBe(true);
30 | expect(subArray.length).toBe(2);
31 | });
32 |
33 | expect(transposedArray[0][0]).toBe(1);
34 | expect(transposedArray[0][1]).toBe(9);
35 | expect(transposedArray[1][0]).toBe(2);
36 | expect(transposedArray[1][1]).toBe(8);
37 | expect(transposedArray[2][0]).toBe(3);
38 | expect(transposedArray[2][1]).toBe(0);
39 | });
40 |
41 | it('correctly fills non symmetrical 2d arrays', () => {
42 | const originalArray = [
43 | [1, 2],
44 | [9, 8, 7],
45 | ];
46 | const transposedArray = transpose(originalArray);
47 |
48 | expect(transposedArray.length).toBe(3);
49 | transposedArray.forEach((subArray) => {
50 | expect(Array.isArray(subArray)).toBe(true);
51 | expect(subArray.length).toBe(2);
52 | });
53 |
54 | expect(transposedArray[0][0]).toBe(1);
55 | expect(transposedArray[0][1]).toBe(9);
56 | expect(transposedArray[1][0]).toBe(2);
57 | expect(transposedArray[1][1]).toBe(8);
58 | expect(transposedArray[2][0]).toBe(null);
59 | expect(transposedArray[2][1]).toBe(7);
60 | });
61 | });
62 |
--------------------------------------------------------------------------------
/src/lib/bem.js:
--------------------------------------------------------------------------------
1 | //
2 | // BEM helper
3 | //
4 | // bem() => 'plotly-editor'
5 | // bem('foo') => 'foo'
6 | // bem('foo', 'bar') => 'foo__bar'
7 | // bem('foo', ['mod']) => 'foo foo--mod'
8 | // bem('foo', 'bar', ['mod']) => 'foo__bar foo__bar--mod'
9 | // bem('foo', ['mod1', mod2']) => 'foo foo--mod1 foo--mod2'
10 |
11 | /* eslint-disable no-param-reassign */
12 | import {baseClass} from './constants';
13 |
14 | export default function bem(block, element, modifiers) {
15 | let i, modifier;
16 | const out = [];
17 |
18 | if (!block) {
19 | return baseClass;
20 | }
21 | if (Array.isArray(block)) {
22 | throw new Error('bem error: Argument `block` cannot be an array');
23 | } else if (Array.isArray(element)) {
24 | modifiers = element;
25 | element = null;
26 | }
27 |
28 | let className = block;
29 |
30 | if (element && element.length) {
31 | className += '__' + element;
32 | }
33 |
34 | out.push(className);
35 | if (modifiers) {
36 | for (i = 0; i < modifiers.length; i++) {
37 | modifier = modifiers[i];
38 | if (modifier && modifier.length) {
39 | out.push(className + '--' + modifier);
40 | }
41 | }
42 | }
43 |
44 | return out.join(' ');
45 | }
46 |
--------------------------------------------------------------------------------
/src/lib/connectLayoutToPlot.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import PropTypes from 'prop-types';
3 | import nestedProperty from 'plotly.js/src/lib/nested_property';
4 | import {getDisplayName} from '../lib';
5 | import {EDITOR_ACTIONS} from './constants';
6 |
7 | export default function connectLayoutToPlot(WrappedComponent) {
8 | class LayoutConnectedComponent extends Component {
9 | getChildContext() {
10 | const {layout, fullLayout, plotly, onUpdate} = this.context;
11 |
12 | const updateContainer = (update) => {
13 | if (!onUpdate) {
14 | return;
15 | }
16 | onUpdate({
17 | type: EDITOR_ACTIONS.UPDATE_LAYOUT,
18 | payload: {
19 | update,
20 | },
21 | });
22 | };
23 |
24 | return {
25 | getValObject: (attr) =>
26 | !plotly
27 | ? null
28 | : plotly.PlotSchema.getLayoutValObject(fullLayout, nestedProperty({}, attr).parts),
29 | updateContainer,
30 | container: layout,
31 | fullContainer: fullLayout,
32 | };
33 | }
34 |
35 | render() {
36 | return
48 | this.context.handleClose()} />
49 | {children}
50 |
51 | this.context.handleClose()} />
52 |
53 | );
54 | }
55 | }
56 |
57 | ModalHeader.propTypes = {
58 | title: PropTypes.node,
59 | handleClose: PropTypes.func.isRequired,
60 | };
61 |
62 | ModalContent.propTypes = {
63 | children: PropTypes.node.isRequired,
64 | };
65 |
66 | Modal.propTypes = {
67 | children: PropTypes.node.isRequired,
68 | title: PropTypes.node,
69 | };
70 |
71 | Modal.contextTypes = {
72 | handleClose: PropTypes.func,
73 | isAnimatingOut: PropTypes.bool,
74 | };
75 |
76 | export default Modal;
77 |
78 | export {ModalHeader, ModalContent};
79 |
--------------------------------------------------------------------------------
/src/components/containers/ModalBox.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import PropTypes from 'prop-types';
3 | import classnames from 'classnames';
4 |
5 | export default class ModalBox extends Component {
6 | render() {
7 | const {backgroundDark, children, onClose, relative} = this.props;
8 | const modalboxClass = classnames('modalbox', {
9 | 'modalbox--dark': backgroundDark,
10 | 'modalbox--relative': relative,
11 | });
12 | return (
13 |
14 |
15 |
17 | );
18 | }
19 | }
20 |
21 | ModalBox.propTypes = {
22 | backgroundDark: PropTypes.bool,
23 | relative: PropTypes.bool,
24 | children: PropTypes.node,
25 | onClose: PropTypes.func,
26 | };
27 |
--------------------------------------------------------------------------------
/src/components/containers/ModalProvider.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | class ModalProvider extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.state = {
8 | component: null,
9 | componentProps: {},
10 | open: false,
11 | isAnimatingOut: false,
12 | };
13 | }
14 |
15 | componentDidUpdate() {
16 | const body = document.body;
17 | const {open} = this.state;
18 |
19 | // Toggle scroll on document body if modal is open
20 | const hasClass = body.classList.contains('no-scroll');
21 |
22 | if (open && !hasClass) {
23 | body.classList.add('no-scroll');
24 | }
25 | if (!open && hasClass) {
26 | body.classList.remove('no-scroll');
27 | }
28 | }
29 |
30 | openModal(component, componentProps) {
31 | const {localize: _} = this.context;
32 | if (!component) {
33 | throw Error(_('You need to provide a component for the modal to open!'));
34 | }
35 | const {open} = this.state;
36 |
37 | if (!open) {
38 | this.setState({
39 | component: component,
40 | componentProps: componentProps,
41 | open: true,
42 | });
43 | }
44 | }
45 |
46 | closeModal() {
47 | const {open} = this.state;
48 | if (open) {
49 | this.setState({
50 | open: false,
51 | component: null,
52 | });
53 | }
54 | }
55 | handleClose() {
56 | this.setState({isAnimatingOut: true});
57 | const animationDuration = 600;
58 | setTimeout(() => {
59 | this.setState({isAnimatingOut: false});
60 | this.closeModal();
61 | }, animationDuration);
62 | }
63 |
64 | getChildContext() {
65 | return {
66 | openModal: (c, p) => this.openModal(c, p),
67 | closeModal: () => this.closeModal(),
68 | handleClose: () => this.handleClose(),
69 | isAnimatingOut: this.state.isAnimatingOut,
70 | };
71 | }
72 |
73 | render() {
74 | const {component: Component, componentProps, isAnimatingOut} = this.state;
75 | return (
76 | <>
77 | {this.props.children}
78 | {this.state.open ? {children}
16 |
13 | {Boolean(Icon) && (
14 |
21 | );
22 | }
23 | }
24 |
25 | PanelMessage.defaultProps = {
26 | icon: ChartLineIcon,
27 | };
28 |
29 | PanelMessage.propTypes = {
30 | heading: PropTypes.string,
31 | children: PropTypes.node,
32 | icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
33 | };
34 |
35 | class PanelEmpty extends Component {
36 | render() {
37 | return (
38 |
15 |
17 | )}
18 | {Boolean(heading) && {heading}
}
19 | {children}
20 |
39 |
41 | );
42 | }
43 | }
44 |
45 | PanelEmpty.propTypes = {
46 | heading: PropTypes.string,
47 | children: PropTypes.node,
48 | icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
49 | };
50 |
51 | export default PanelEmpty;
52 |
--------------------------------------------------------------------------------
/src/components/containers/RangeSelectorAccordion.js:
--------------------------------------------------------------------------------
1 | import PlotlyFold from './PlotlyFold';
2 | import PlotlyPanel from './PlotlyPanel';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectRangeSelectorToAxis, getParsedTemplateString} from 'lib';
6 |
7 | const RangeSelectorFold = connectRangeSelectorToAxis(PlotlyFold);
8 |
9 | class RangeSelectorAccordion extends Component {
10 | render() {
11 | if (
12 | !this.context.fullContainer ||
13 | !this.context.fullContainer.rangeselector ||
14 | !this.context.fullContainer.rangeselector.visible ||
15 | // next line checks for "all" case
16 | this.context.fullContainer._axisGroup === 0
17 | ) {
18 | return null;
19 | }
20 |
21 | const {
22 | fullContainer: {
23 | rangeselector: {buttons = []},
24 | },
25 | localize: _,
26 | layout: meta,
27 | } = this.context;
28 | const {children} = this.props;
29 |
30 | const content =
31 | buttons.length &&
32 | buttons.map((btn, i) => (
33 | 57 | {_( 58 | 'Add shapes to a figure to highlight points or periods in time, thresholds, or areas of interest.' 59 | )} 60 |
61 |{_('Click on the + button above to add a shape.')}
62 |{this.props.children}
8 | ) : null;
9 | }
10 | }
11 |
12 | SingleSidebarItem.plotly_editor_traits = {sidebar_element: true};
13 |
14 | SingleSidebarItem.propTypes = {
15 | children: PropTypes.any,
16 | };
17 |
--------------------------------------------------------------------------------
/src/components/containers/SliderAccordion.js:
--------------------------------------------------------------------------------
1 | import PlotlyFold from './PlotlyFold';
2 | import TraceRequiredPanel from './TraceRequiredPanel';
3 | import PropTypes from 'prop-types';
4 | import React, {Component} from 'react';
5 | import {connectSliderToLayout} from 'lib';
6 |
7 | const SliderFold = connectSliderToLayout(PlotlyFold);
8 |
9 | class SliderAccordion extends Component {
10 | render() {
11 | const {
12 | layout: {sliders = []},
13 | localize: _,
14 | } = this.context;
15 | const {children} = this.props;
16 |
17 | const content =
18 | sliders.length > 0 &&
19 | sliders.map((sli, i) => (
20 | 24 | {_('Go to the ')} 25 | this.context.setPanel('Structure', 'Traces')}>{_('Traces')} 26 | {_(' panel under Structure to define traces.')} 27 |
28 |
22 | {_('This color is computed from other parts of the figure but you can')}{' '}
23 | {
25 | this.setState({empty: false});
26 | this.props.updatePlot(this.props.defaultColor);
27 | }}
28 | >
29 | {_('override it')}
30 |
31 | .
32 |
33 |
9 | {this.props.children}
10 |
11 |
52 |
60 | );
61 | }
62 | }
63 |
64 | SidebarGroup.propTypes = {
65 | group: PropTypes.string,
66 | onChangeGroup: PropTypes.func,
67 | panels: PropTypes.array,
68 | selectedGroup: PropTypes.string,
69 | selectedPanel: PropTypes.string,
70 | };
71 |
--------------------------------------------------------------------------------
/src/components/sidebar/SidebarItem.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React, {Component} from 'react';
3 | import {bem} from 'lib';
4 |
5 | export default class SidebarItem extends Component {
6 | render() {
7 | const {onClick, label, active} = this.props;
8 | return (
9 |
53 |
58 | {expanded && panels.map(this.renderSubItem)}
59 |
54 |
56 | {group}
57 |
10 |
14 | );
15 | }
16 | }
17 |
18 | SidebarItem.propTypes = {
19 | active: PropTypes.bool,
20 | label: PropTypes.string,
21 | onClick: PropTypes.func,
22 | };
23 |
--------------------------------------------------------------------------------
/src/components/widgets/Button.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React, {Component} from 'react';
3 | import {bem} from 'lib';
4 |
5 | class Button extends Component {
6 | constructor(props) {
7 | super(props);
8 | }
9 |
10 | render() {
11 | const {children, className, icon, label, variant, ...rest} = this.props;
12 |
13 | let classes = `button`;
14 |
15 | if (variant) {
16 | classes += ` button--${variant}`;
17 | } else {
18 | classes += ` button--default`;
19 | }
20 |
21 | if (className) {
22 | classes += ` ${className}`;
23 | }
24 |
25 | const Icon = icon ?
11 |
13 | {label}
12 | {icon}
: null;
26 |
27 | return (
28 |
34 | );
35 | }
36 | }
37 |
38 | Button.propTypes = {
39 | children: PropTypes.node,
40 | className: PropTypes.any,
41 | icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
42 | label: PropTypes.any,
43 | variant: PropTypes.string,
44 | };
45 |
46 | export default Button;
47 |
--------------------------------------------------------------------------------
/src/components/widgets/CheckboxGroup.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import PropTypes from 'prop-types';
3 | import classnames from 'classnames';
4 | import {CheckIcon} from 'plotly-icons';
5 |
6 | class CheckboxGroup extends Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {options: this.props.options};
10 | this.handleChange = this.handleChange.bind(this);
11 | }
12 |
13 | UNSAFE_componentWillReceiveProps(nextProps) {
14 | this.setState({options: nextProps.options});
15 | }
16 |
17 | handleChange(i) {
18 | var newOptions = this.props.options.slice();
19 | newOptions[i] = Object.assign(newOptions[i], {
20 | checked: !newOptions[i].checked,
21 | });
22 | this.props.onChange(newOptions);
23 | }
24 |
25 | renderOptions() {
26 | return this.state.options.map((option, i) => {
27 | const checkClass = classnames(['checkbox__check', 'icon'], {
28 | 'checkbox__check--checked': option.checked,
29 | });
30 |
31 | const itemClass = classnames('checkbox__item', {
32 | 'checkbox__item--vertical': this.props.orientation === 'vertical',
33 | 'checkbox__item--horizontal': this.props.orientation === 'horizontal',
34 | });
35 |
36 | return (
37 |
38 |
52 | );
53 | });
54 | }
55 |
56 | render() {
57 | const boxClass = classnames('checkbox__group', this.props.className, {
58 | checkbox__group_horizontal: this.props.orientation === 'horizontal',
59 | });
60 |
61 | return this.handleChange(i)}
41 | >
42 | {option.checked && (
43 |
48 |
44 |
46 | )}
47 | this.handleChange(i)}>
49 | {option.label}
50 |
51 | {this.renderOptions()}
;
62 | }
63 | }
64 |
65 | CheckboxGroup.propTypes = {
66 | options: PropTypes.arrayOf(
67 | PropTypes.shape({
68 | label: PropTypes.string.isRequired,
69 | value: PropTypes.string.isRequired,
70 | checked: PropTypes.bool.isRequired,
71 | })
72 | ).isRequired,
73 | onChange: PropTypes.func,
74 | className: PropTypes.string,
75 | orientation: PropTypes.string,
76 | };
77 |
78 | CheckboxGroup.defaultProps = {
79 | className: '',
80 | };
81 |
82 | export default CheckboxGroup;
83 |
--------------------------------------------------------------------------------
/src/components/widgets/Logo.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React, {Component} from 'react';
3 |
4 | export default class Logo extends Component {
5 | render() {
6 | const {link, src} = this.props;
7 | const image = this.handleChange(value)}>
37 | {Icon ?
40 | );
41 | }
42 |
43 | render() {
44 | const optionList = this.props.options.map(this.renderOption);
45 |
46 | const groupClass = classnames('radio-block', 'radio-block__group', {
47 | 'radio-block__group--center': this.props.alignment === 'center',
48 | });
49 |
50 | return {optionList}
;
51 | }
52 | }
53 |
54 | RadioBlocks.propTypes = {
55 | options: PropTypes.arrayOf(
56 | PropTypes.shape({
57 | value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]).isRequired,
58 | label: PropTypes.string,
59 | icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
60 | disabled: PropTypes.bool,
61 | })
62 | ),
63 | onOptionChange: PropTypes.func.isRequired,
64 | activeOption: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
65 | radioClassName: PropTypes.string,
66 |
67 | // One of right, left, center
68 | alignment: PropTypes.string,
69 | };
70 |
71 | export default RadioBlocks;
72 |
--------------------------------------------------------------------------------
/src/components/widgets/TextArea.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export default class TextArea extends Component {
5 | constructor(props) {
6 | super(props);
7 |
8 | this.state = {
9 | value: this.props.value,
10 | };
11 |
12 | this.onChange = this.onChange.bind(this);
13 | }
14 |
15 | UNSAFE_componentWillReceiveProps(nextProps) {
16 | // Reset the value to the graph's actual value
17 | if (nextProps.value !== this.state.value) {
18 | this.setState({
19 | value: nextProps.value,
20 | });
21 | }
22 | }
23 |
24 | onChange(e) {
25 | const newValue = e.target.value;
26 | this.setState({value: newValue});
27 | this.props.onChange(newValue);
28 | }
29 |
30 | render() {
31 | return (
32 |
33 |
41 |
42 | );
43 | }
44 | }
45 |
46 | TextArea.propTypes = {
47 | value: PropTypes.string.isRequired,
48 | onChange: PropTypes.func.isRequired,
49 | placeholder: PropTypes.string.isRequired,
50 | visibleRows: PropTypes.number,
51 | areaWidth: PropTypes.number,
52 | textareaClass: PropTypes.string,
53 | };
54 |
55 | TextArea.defaultProps = {
56 | visibleRows: 10,
57 | areaWidth: 30,
58 | };
59 |
--------------------------------------------------------------------------------
/src/components/widgets/TextInput.js:
--------------------------------------------------------------------------------
1 | import EditableText from './EditableText';
2 | import React, {Component} from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | export default class TextInput extends Component {
6 | constructor(props) {
7 | super(props);
8 |
9 | this.state = {value: props.value};
10 | }
11 |
12 | UNSAFE_componentWillReceiveProps(nextProps) {
13 | if (nextProps.value !== this.state.value) {
14 | this.setState({value: nextProps.value});
15 | }
16 | }
17 |
18 | render() {
19 | return (
20 |
24 | {styles.map(({label, value}) => (
25 |
34 | );
35 | }
36 | }
37 |
38 | StyleButtonGroup.propTypes = {
39 | onToggle: PropTypes.func.isRequired,
40 | styles: PropTypes.arrayOf(
41 | PropTypes.shape({
42 | label: PropTypes.element.isRequired,
43 | value: PropTypes.string.isRequired,
44 | })
45 | ).isRequired,
46 |
47 | // A draft-js DraftInlineStyle instance
48 | // https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#getcurrentinlinestyle
49 | currentStyle: PropTypes.object,
50 | linkIsSelected: PropTypes.bool,
51 | };
52 |
53 | export default StyleButtonGroup;
54 |
--------------------------------------------------------------------------------
/src/components/widgets/text_editors/RichText/configuration.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {INLINE_STYLE} from 'draft-js-utils';
3 | import {LinkIcon} from 'plotly-icons';
4 | import {COLORS} from 'lib/constants';
5 |
6 | export const SUPERSCRIPT = 'SUPERSCRIPT';
7 | export const SUBSCRIPT = 'SUBSCRIPT';
8 | export const LINK = 'LINK';
9 |
10 | export const {BOLD, ITALIC} = INLINE_STYLE;
11 |
12 | export const STYLES_TO_HTML_TAGS = {
13 | [BOLD]: {element: 'b'},
14 | [ITALIC]: {element: 'i'},
15 | [SUPERSCRIPT]: {element: 'sup'},
16 | [SUBSCRIPT]: {element: 'sub'},
17 | [LINK]: {element: 'a'},
18 | };
19 |
20 | export const STYLE_MAP = {
21 | [BOLD]: {
22 | fontWeight: 'bolder',
23 | },
24 | [ITALIC]: {
25 | fontStyle: 'italic',
26 | },
27 | [SUBSCRIPT]: {
28 | /*
29 | * Can't use text-align; IE renders `text-bottom` properly, but
30 | * FF doesn't (same height as `bottom`). Chrome doesn't understand
31 | * `text-align: bottom`. Use relative positioning instead.
32 | */
33 | lineHeight: 0,
34 | fontSize: '65%',
35 | position: 'relative',
36 | bottom: '-3px',
37 | },
38 | [SUPERSCRIPT]: {
39 | /*
40 | * Can't use text-align; IE renders `text-top` properly, but
41 | * FF doesn't (same height as `top`). Chrome doesn't understand
42 | * `text-align: top`. Use relative positioning instead.
43 | */
44 | lineHeight: 0,
45 | fontSize: '65%',
46 | position: 'relative',
47 | top: '-5px',
48 | },
49 | [LINK]: {
50 | color: COLORS.editorLink,
51 | linkDecoration: 'none',
52 | cursor: 'pointer',
53 | },
54 | };
55 |
56 | export const INLINE_STYLES = [
57 | {
58 | label: B,
59 | value: BOLD,
60 | },
61 | {
62 | label: I,
63 | value: ITALIC,
64 | },
65 | {
66 | label: (
67 |
68 | x2
69 |
70 | ),
71 | value: SUBSCRIPT,
72 | },
73 | {
74 | label: (
75 |
76 | x2
77 |
78 | ),
79 | value: SUPERSCRIPT,
80 | },
81 | {
82 | label: (
83 |
84 | '); 33 | }; 34 | 35 | const wrapLaTeX = (value) => (value ? `$${value}$` : '$$'); 36 | 37 | const wrapText = (value) => (value ? `\\text{${value}}` : '\\text{}'); 38 | 39 | // Exports 40 | // ------- 41 | 42 | export const isLaTeXExpr = (value) => getLaTeXWrappedRegExp().test(value); 43 | 44 | export const hasTextExpression = (laTeX) => { 45 | const regExp = getTextBlockRegExp(); 46 | const stringifiedLaTeX = JSON.stringify(laTeX); 47 | 48 | return regExp.test(stringifiedLaTeX); 49 | }; 50 | 51 | export const htmlToLaTeX = (html) => { 52 | const breakTag = '
'; 53 | const trimmedHTML = html.trim(); 54 | 55 | // Handle empty input 56 | if (trimmedHTML === '') { 57 | return wrapLaTeX(wrapText()); 58 | } 59 | 60 | // Handle input with only linebreaks 61 | if (trimmedHTML.replace(breakTag, '') === '') { 62 | return wrapLaTeX(wrapText()); 63 | } 64 | 65 | return wrapLaTeX( 66 | trimmedHTML 67 | .split(breakTag) 68 | 69 | // Ignore empty linebreaks 70 | .map((para) => (para.length ? wrapText(stripHTMLTags(para)) : '')) 71 | .join('\n') 72 | ); 73 | }; 74 | 75 | export const laTeXToHTML = (laTeX) => { 76 | const trimmedLaTeX = laTeX.trim(); 77 | 78 | return extractTextBlocks(trimmedLaTeX); 79 | }; 80 | -------------------------------------------------------------------------------- /src/default_panels/StyleImagesPanel.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | ImageAccordion, 5 | Radio, 6 | Dropzone, 7 | PositioningNumeric, 8 | PlotlySection, 9 | PositioningRef, 10 | Dropdown, 11 | } from '../components'; 12 | 13 | const StyleImagesPanel = (props, {localize: _}) => ( 14 |