Skip to content

Commit 46d506b

Browse files
nicolaskruchtennicolaskruchten
authored
remove MenuPanel from public API and SectionHeader (#425)
1 parent 6bc3c86 commit 46d506b

File tree

13 files changed

+141
-264
lines changed

13 files changed

+141
-264
lines changed

‎README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ The [custom editor example](https://github.com/plotly/react-chart-editor/tree/ma
7070
* `<Fold />`: collapsable container within a `<Panel />`
7171
* `<Section />`: uncollapsable container within a `<Panel />` or `<Fold />`
7272
* `<SectionHeader/>`: a `SectionHeader` to use separately with custom layouts.
73-
* `<MenuPanel />`: container child of `<Section />` that appears when a cog icon in the section title is clicked on
7473
* `<SingleSidebarItem/>`: wraps any item you would like to see appear in the sidebar menu.
7574

7675
### General-purpose Fields

‎examples/custom/src/CustomEditor.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
Section,
1313
Numeric,
1414
LayoutPanel,
15-
MenuPanel,
1615
Button,
1716
SingleSidebarItem,
1817
TraceAccordion,
@@ -44,9 +43,6 @@ export default class CustomEditor extends Component {
4443
</p>
4544
</Info>
4645
<Section name="Section">
47-
<MenuPanel>
48-
<Info> MenuPanel </Info>
49-
</MenuPanel>
5046
<Numeric label="Numeric" attr="width" show units="units" />
5147
<Dropdown
5248
label="Dropdown"

‎src/components/containers/MenuPanel.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,5 +68,3 @@ MenuPanel.propTypes = {
6868
question: PropTypes.bool,
6969
show: PropTypes.bool,
7070
};
71-
72-
MenuPanel.plotly_editor_traits = {is_menu_panel: true};

‎src/components/containers/Section.js

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ class Section extends Component {
1212
super(props, context);
1313

1414
this.children = null;
15-
this.menuPanel = null;
1615
this.sectionVisible = false;
1716

1817
this.processAndSetChildren(props, context);
@@ -27,15 +26,6 @@ class Section extends Component {
2726
this.sectionVisible = isVisible === true;
2827

2928
this.children = React.Children.map(nextProps.children, child => {
30-
if ((child.type.plotly_editor_traits || {}).is_menu_panel) {
31-
// Process the first menuPanel. Ignore the rest. MenuPanel does
32-
// not affect visibility.
33-
if (!this.menuPanel) {
34-
this.menuPanel = child;
35-
}
36-
return null;
37-
}
38-
3929
if (child.props.attr) {
4030
let plotProps;
4131
if (child.type.supplyPlotProps) {
@@ -69,7 +59,7 @@ class Section extends Component {
6959
}
7060
return (
7161
<div className="section">
72-
<SectionHeader name={this.props.name} menuPanel={this.menuPanel} />
62+
<SectionHeader name={this.props.name} />
7363
{this.children}
7464
</div>
7565
);

‎src/components/containers/SectionHeader.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,11 @@ export default class SectionHeader extends Component {
66
return (
77
<div className="section__heading">
88
<div className="section__heading__text">{this.props.name}</div>
9-
{this.props.menuPanel}
109
</div>
1110
);
1211
}
1312
}
1413

1514
SectionHeader.propTypes = {
1615
name: PropTypes.string,
17-
menuPanel: PropTypes.node,
1816
};

‎src/components/containers/__tests__/Section-test.js

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import Section from '../Section';
33
import {TraceTypeSection} from '../derived';
4-
import MenuPanel from '../MenuPanel';
54
import {Flaglist, Info, Numeric} from '../../fields';
65
import {TestEditor, fixtures} from 'lib/test-utils';
76
import {connectTraceToPlot} from 'lib';
@@ -59,44 +58,6 @@ describe('Section', () => {
5958
expect(wrapper.find(Numeric).exists()).toBe(false);
6059
});
6160

62-
it('will render first menuPanel', () => {
63-
const TraceSection = connectTraceToPlot(Section);
64-
const wrapper = mount(
65-
<TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
66-
<TraceSection name="test-section" traceIndexes={[0]}>
67-
<Numeric attr="opacity" traceIndexes={[0]} />
68-
<MenuPanel show>
69-
<Info>INFO</Info>
70-
</MenuPanel>
71-
<MenuPanel show>
72-
<Info>MISINFORMATION</Info>
73-
</MenuPanel>
74-
</TraceSection>
75-
</TestEditor>
76-
).find(Section);
77-
78-
expect(wrapper.find(MenuPanel).length).toBe(1);
79-
expect(wrapper.find(Info).length).toBe(1);
80-
expect(wrapper.find(Info).text()).toBe('INFO');
81-
});
82-
83-
it('will hide with MenuPanel children when attrs not defined', () => {
84-
const TraceSection = connectTraceToPlot(Section);
85-
const wrapper = mount(
86-
<TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
87-
<TraceSection name="test-section" traceIndexes={[0]}>
88-
<Numeric attr="badattr" traceIndexes={[0]} />
89-
<MenuPanel show>
90-
<Info>INFO</Info>
91-
</MenuPanel>
92-
</TraceSection>
93-
</TestEditor>
94-
).find(Section);
95-
96-
expect(wrapper.find(MenuPanel).length).toBe(0);
97-
expect(wrapper.find(Info).length).toBe(0);
98-
});
99-
10061
it('will hide with Info children when attrs not defined', () => {
10162
const TraceSection = connectTraceToPlot(Section);
10263
const wrapper = mount(

‎src/components/index.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ import {
5757
AxesFold,
5858
Fold,
5959
LayoutPanel,
60-
MenuPanel,
6160
Panel,
6261
Section,
6362
TraceAccordion,
@@ -118,7 +117,6 @@ export {
118117
LayoutPanel,
119118
LineDashSelector,
120119
LineShapeSelector,
121-
MenuPanel,
122120
Numeric,
123121
AxisRangeValue,
124122
Text,

‎src/default_panels/StyleAxesPanel.js

Lines changed: 46 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,13 @@ import {
1515
NumericFractionDomain,
1616
Radio,
1717
TextEditor,
18-
MenuPanel,
1918
Section,
2019
TraceRequiredPanel,
2120
AxesFold,
2221
TraceTypeSection,
2322
RangesliderVisible,
2423
RangeselectorVisible,
2524
RangeSelectorAccordion,
26-
Info,
2725
} from '../components';
2826

2927
import {localize} from '../lib';
@@ -228,31 +226,7 @@ class StyleAxesPanel extends Component {
228226
/>
229227
</Section>
230228

231-
<Section name={_('Label Formatting')}>
232-
<MenuPanel>
233-
<Section name={_('Prefix')}>
234-
<Radio
235-
attr="showtickprefix"
236-
options={[
237-
{label: _('Every'), value: 'all'},
238-
{label: _('First'), value: 'first'},
239-
{label: _('Last'), value: 'last'},
240-
{label: _('None'), value: 'none'},
241-
]}
242-
/>
243-
</Section>
244-
<Section name={_('Suffix')}>
245-
<Radio
246-
attr="showticksuffix"
247-
options={[
248-
{label: _('Every'), value: 'all'},
249-
{label: _('First'), value: 'first'},
250-
{label: _('Last'), value: 'last'},
251-
{label: _('None'), value: 'none'},
252-
]}
253-
/>
254-
</Section>
255-
</MenuPanel>
229+
<Section name={_('Label Prefix')}>
256230
<Dropdown
257231
label={_('Prefix')}
258232
attr="tickprefix"
@@ -264,6 +238,17 @@ class StyleAxesPanel extends Component {
264238
{label: _('custom'), value: 'custom'},
265239
]}
266240
/>
241+
<Radio
242+
attr="showtickprefix"
243+
options={[
244+
{label: _('Every'), value: 'all'},
245+
{label: _('First'), value: 'first'},
246+
{label: _('Last'), value: 'last'},
247+
{label: _('None'), value: 'none'},
248+
]}
249+
/>
250+
</Section>
251+
<Section name={_('Label Suffix')}>
267252
<Dropdown
268253
label={_('Suffix')}
269254
attr="ticksuffix"
@@ -274,6 +259,15 @@ class StyleAxesPanel extends Component {
274259
{label: _('custom'), value: 'custom'},
275260
]}
276261
/>
262+
<Radio
263+
attr="showticksuffix"
264+
options={[
265+
{label: _('Every'), value: 'all'},
266+
{label: _('First'), value: 'first'},
267+
{label: _('Last'), value: 'last'},
268+
{label: _('None'), value: 'none'},
269+
]}
270+
/>
277271
</Section>
278272

279273
<Section name={_('Spacing')} attr="dtick">
@@ -413,46 +407,33 @@ class StyleAxesPanel extends Component {
413407
attr="rangeselector.bordercolor"
414408
/>
415409
</Section>
416-
<Section name={_('Positioning')}>
417-
<MenuPanel>
418-
<Section name={_('Anchor Point')}>
419-
<Info>
420-
{_(
421-
'The positioning inputs are relative to the ' +
422-
'anchor points on the text box.'
423-
)}
424-
</Info>
425-
<Radio
426-
attr="rangeselector.xanchor"
427-
options={[
428-
{label: _('Auto'), value: 'auto'},
429-
{label: _('Left'), value: 'left'},
430-
{label: _('Center'), value: 'center'},
431-
{label: _('Right'), value: 'right'},
432-
]}
433-
/>
434-
<Radio
435-
attr="rangeselector.yanchor"
436-
options={[
437-
{label: _('Auto'), value: 'auto'},
438-
{label: _('Top'), value: 'top'},
439-
{label: _('Middle'), value: 'middle'},
440-
{label: _('Bottom'), value: 'bottom'},
441-
]}
442-
/>
443-
</Section>
444-
</MenuPanel>
445-
<Numeric
446-
label={_('X Position')}
447-
step={0.02}
448-
attr="rangeselector.x"
410+
<Section name={_('Horizontal Positioning')}>
411+
<Dropdown
412+
label={_('Anchor Point')}
413+
clearable={false}
414+
attr="rangeselector.xanchor"
415+
options={[
416+
{label: _('Auto'), value: 'auto'},
417+
{label: _('Left'), value: 'left'},
418+
{label: _('Center'), value: 'center'},
419+
{label: _('Right'), value: 'right'},
420+
]}
449421
/>
450-
451-
<Numeric
452-
label={_('Y Position')}
453-
step={0.02}
454-
attr="rangeselector.y"
422+
<Numeric label={_('Position')} step={0.02} attr="rangeselector.x" />
423+
</Section>
424+
<Section name={_('Vertical Positioning')}>
425+
<Dropdown
426+
label={_('Anchor Point')}
427+
clearable={false}
428+
attr="rangeselector.yanchor"
429+
options={[
430+
{label: _('Auto'), value: 'auto'},
431+
{label: _('Top'), value: 'top'},
432+
{label: _('Middle'), value: 'middle'},
433+
{label: _('Bottom'), value: 'bottom'},
434+
]}
455435
/>
436+
<Numeric label={_('Position')} step={0.02} attr="rangeselector.y" />
456437
</Section>
457438
</AxesFold>
458439

‎src/default_panels/StyleColorbarsPanel.js

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
Dropdown,
1313
FontSelector,
1414
ColorPicker,
15-
MenuPanel,
1615
} from '..';
1716

1817
import {localize} from '../lib';
@@ -187,31 +186,7 @@ const StyleColorBarsPanel = ({localize: _}) => {
187186
{label: _('k/M/B'), value: 'B'},
188187
]}
189188
/>
190-
<Section name={_('Label Formatting')}>
191-
<MenuPanel>
192-
<Section name={_('Prefix')}>
193-
<Radio
194-
attr={prefix + 'colorbar.showtickprefix'}
195-
options={[
196-
{label: _('Every'), value: 'all'},
197-
{label: _('First'), value: 'first'},
198-
{label: _('Last'), value: 'last'},
199-
{label: _('None'), value: 'none'},
200-
]}
201-
/>
202-
</Section>
203-
<Section name={_('Suffix')}>
204-
<Radio
205-
attr={prefix + 'colorbar.showticksuffix'}
206-
options={[
207-
{label: _('Every'), value: 'all'},
208-
{label: _('First'), value: 'first'},
209-
{label: _('Last'), value: 'last'},
210-
{label: _('None'), value: 'none'},
211-
]}
212-
/>
213-
</Section>
214-
</MenuPanel>
189+
<Section name={_('Label Prefix')}>
215190
<Dropdown
216191
label={_('Prefix')}
217192
attr={prefix + 'colorbar.tickprefix'}
@@ -223,6 +198,17 @@ const StyleColorBarsPanel = ({localize: _}) => {
223198
{label: _('custom'), value: 'custom'},
224199
]}
225200
/>
201+
<Radio
202+
attr={prefix + 'colorbar.showtickprefix'}
203+
options={[
204+
{label: _('Every'), value: 'all'},
205+
{label: _('First'), value: 'first'},
206+
{label: _('Last'), value: 'last'},
207+
{label: _('None'), value: 'none'},
208+
]}
209+
/>
210+
</Section>
211+
<Section name={_('Label Suffix')}>
226212
<Dropdown
227213
label={_('Suffix')}
228214
attr={prefix + 'colorbar.ticksuffix'}
@@ -233,6 +219,15 @@ const StyleColorBarsPanel = ({localize: _}) => {
233219
{label: _('custom'), value: 'custom'},
234220
]}
235221
/>
222+
<Radio
223+
attr={prefix + 'colorbar.showticksuffix'}
224+
options={[
225+
{label: _('Every'), value: 'all'},
226+
{label: _('First'), value: 'first'},
227+
{label: _('Last'), value: 'last'},
228+
{label: _('None'), value: 'none'},
229+
]}
230+
/>
236231
</Section>
237232
<Section name={_('Number of Labels')}>
238233
<Radio

0 commit comments

Comments
 (0)