@eeacms/react-chart-editor/lib/components/PanelMenuWrapper.js

plotly.js chart editor react component UI

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _SidebarGroup=_interopRequireDefault(require("./sidebar/SidebarGroup"));var _lib=require("../lib");var _sortMenu=_interopRequireDefault(require("../lib/sortMenu"));function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}(function(){var enterModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.enterModule:undefined;enterModule&&enterModule(module)})();var __signature__=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default.signature:function(a){return a};class PanelsWithSidebar extends _react.Component{constructor(props){super(props);const opts=this.computeMenuOptions(props);const firstSidebarGroup=opts.filter(o=>o.panels)[0];this.state={group:firstSidebarGroup.name,panel:firstSidebarGroup.panels[0]};this.setPanel=this.setPanel.bind(this);this.renderSection=this.renderSection.bind(this)}setPanel(group,panel){this.setState({group,panel})}getChildContext(){return{setPanel:this.setPanel}}renderSection(section,i){if(section.type&&(section.type.plotly_editor_traits||{}).sidebar_element){return(0,_react.cloneElement)(section,{key:i})}return _react.default.createElement(_SidebarGroup.default,{key:i,selectedGroup:this.state.group,selectedPanel:this.state.panel,group:section.name,panels:section.panels,onChangeGroup:this.setPanel})}computeMenuOptions(props){const{children,menuPanelOrder}=props;const sections=[];const groupLookup={};let groupIndex;const childrenArray=(0,_sortMenu.default)(_react.default.Children.toArray(children),menuPanelOrder);childrenArray.forEach(child=>{if(!child){return}const group=child.props.group;const name=child.props.name;if(group&&name){let obj;if(groupLookup.hasOwnProperty(group)){groupIndex=groupLookup[group];obj=sections[groupIndex]}else{groupLookup[group]=sections.length;obj={name:group,panels:[]};sections.push(obj)}obj.panels.push(name)}if((child.type.plotly_editor_traits||{}).sidebar_element){sections.push(child)}});return sections}render(){const menuOpts=this.computeMenuOptions(this.props);return _react.default.createElement("div",{className:(0,_lib.bem)("editor_controls","wrapper")},_react.default.createElement("div",{className:(0,_lib.bem)("sidebar")},menuOpts.map(this.renderSection)),_react.default.Children.map(this.props.children,(child,i)=>child===null||this.state.group!==child.props.group||this.state.panel!==child.props.name?null:(0,_react.cloneElement)(child,{key:i})))}__reactstandin__regenerateByEval(key,code){this[key]=eval(code)}}PanelsWithSidebar.propTypes={children:_propTypes.default.node,menuPanelOrder:_propTypes.default.array};PanelsWithSidebar.childContextTypes={setPanel:_propTypes.default.func};const _default=PanelsWithSidebar;var _default2=exports.default=_default;;(function(){var reactHotLoader=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default:undefined;if(!reactHotLoader){return}reactHotLoader.register(PanelsWithSidebar,"PanelsWithSidebar","/react-chart-editor/src/components/PanelMenuWrapper.js");reactHotLoader.register(_default,"default","/react-chart-editor/src/components/PanelMenuWrapper.js")})();;(function(){var leaveModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.leaveModule:undefined;leaveModule&&leaveModule(module)})();
//# sourceMappingURL=PanelMenuWrapper.js.map