@eeacms/react-chart-editor/lib/components/containers/PlotlyFold.js

plotly.js chart editor react component UI

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.Fold=void 0;var _FoldEmpty=_interopRequireDefault(require("./FoldEmpty"));var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _classnames=_interopRequireDefault(require("classnames"));var _plotlyIcons=require("plotly-icons");var _lib=require("../../lib");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)})();function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==typeof i?i:i+""}function _toPrimitive(t,r){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}var __signature__=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default.signature:function(a){return a};class Fold extends _react.Component{constructor(){super();this.foldVisible=true;this.resetEl=_react.default.createRef();this.getResettableAttrs=this.getResettableAttrs.bind(this)}getChildContext(){return{resettable:this.props.resettable,foldInfo:this.props.foldInfo?this.props.foldInfo:null}}getResettableAttrs(children){let attrs={};if(!children){return attrs}_react.default.Children.forEach(children,child=>{var _child$type,_child$type2,_child$type3;if(!child){return}const{container_section,visibility_select}=((_child$type=child.type)===null||_child$type===void 0?void 0:_child$type.plotly_editor_traits)||{};if((container_section||visibility_select)&&child.props.resettable!==true){return}if(!container_section&&child.props.resettable!==false&&child.props.attr){attrs[child.props.attr]=null}if((_child$type2=child.type)!==null&&_child$type2!==void 0&&(_child$type2=_child$type2.plotly_editor_traits)!==null&&_child$type2!==void 0&&_child$type2.container_section||(_child$type3=child.type)!==null&&_child$type3!==void 0&&(_child$type3=_child$type3.plotly_editor_traits)!==null&&_child$type3!==void 0&&_child$type3.visibility_select){attrs=_objectSpread(_objectSpread({},attrs),this.getResettableAttrs(child.props.children))}});return attrs}render(){if(!this.foldVisible&&!this.props.messageIfEmpty){return null}const{canFold=true,canReorder=true,canDelete,children,className,foldInfo,toggleFold,hideHeader,icon:Icon,messageIfEmpty,name,canMoveUp,canMoveDown}=this.props;const moveContainer=this.props.moveContainer||this.context.moveContainer;const deleteContainer=this.props.deleteContainer||this.context.deleteContainer;const folded=canFold?this.props.folded:false;const contentClass=(0,_classnames.default)("fold__content",{"fold__content--noheader":hideHeader});const headerClass=(0,_classnames.default)("fold__top",{"fold__top--open":!folded});const arrowClass=(0,_classnames.default)("fold__top__arrow",{"fold__top__arrow--open":!folded});const arrowDownIcon=_react.default.createElement("div",{className:arrowClass},_react.default.createElement("div",{className:"fold__top__arrow__wrapper"},_react.default.createElement(_plotlyIcons.AngleDownIcon,null)));const icon=Icon?_react.default.createElement(Icon,{className:"fold__top__icon"}):null;const deleteButton=canDelete&&typeof deleteContainer==="function"?_react.default.createElement("div",{className:"fold__top__delete js-fold__delete",onClick:e=>{e.stopPropagation();deleteContainer(foldInfo)}},_react.default.createElement(_plotlyIcons.CloseIcon,null)):null;const movingControls=(canMoveDown||canMoveUp)&&_react.default.createElement("div",{className:"fold__top__moving-controls"},_react.default.createElement("span",{className:"fold__top__moving-controls--up".concat(canMoveUp?"":"--disabled"),onClick:e=>{e.stopPropagation();if(canMoveUp){if(!moveContainer||typeof moveContainer!=="function"){throw new Error("moveContainer must be a function")}moveContainer("up")}}},_react.default.createElement(_plotlyIcons.AngleDownIcon,null)),_react.default.createElement("span",{className:"fold__top__moving-controls--down".concat(canMoveDown?"":"--disabled"),onClick:e=>{e.stopPropagation();if(canMoveDown){if(!moveContainer||typeof moveContainer!=="function"){throw new Error("moveContainer must be a function")}moveContainer("down")}}},_react.default.createElement(_plotlyIcons.AngleDownIcon,null)));const resetControls=this.props.resettable&&_react.default.createElement("div",{className:"fold__top__reset js-fold__reset","aria-label":"Reset settings","data-microtip-position":"top-left","data-microtip-size":"max-content",role:"tooltip",onClick:e=>{e.stopPropagation();const el=this.resetEl.current;if(el){el.style.transition="rotate 0.5s ease-in-out";el.style.rotate="360deg";setTimeout(()=>{el.style.transition="none";el.style.rotate="0deg"},510)}const resettableAttrs=this.getResettableAttrs(this.props.children);this.context.updateContainer(resettableAttrs)}},_react.default.createElement("div",{ref:this.resetEl},_react.default.createElement(_plotlyIcons.RefreshIcon,null)));const foldHeader=!hideHeader&&_react.default.createElement("div",{className:headerClass,onClick:toggleFold},_react.default.createElement("div",{className:"fold__top__arrow-title"},canFold&&arrowDownIcon,icon,_react.default.createElement("div",{className:"fold__top__title"},(0,_lib.striptags)(name))),canReorder&&movingControls,resetControls,deleteButton);let foldContent=null;if(!folded){if(this.foldVisible){foldContent=_react.default.createElement("div",{className:contentClass},children)}else{foldContent=_react.default.createElement("div",{className:contentClass},_react.default.createElement(_FoldEmpty.default,{icon:Icon,messagePrimary:messageIfEmpty}))}}const classes=className?" "+className:"";return _react.default.createElement("div",{className:"fold".concat(classes)},foldHeader,foldContent)}__reactstandin__regenerateByEval(key,code){this[key]=eval(code)}}exports.Fold=Fold;Fold.plotly_editor_traits={foldable:true};Fold.propTypes={canDelete:_propTypes.default.bool,canFold:_propTypes.default.bool,canReorder:_propTypes.default.bool,children:_propTypes.default.node,className:_propTypes.default.string,folded:_propTypes.default.bool,foldInfo:_propTypes.default.object,toggleFold:_propTypes.default.func,moveContainer:_propTypes.default.func,deleteContainer:_propTypes.default.func,hideHeader:_propTypes.default.bool,icon:_propTypes.default.oneOfType([_propTypes.default.node,_propTypes.default.func]),messageIfEmpty:_propTypes.default.string,name:_propTypes.default.string,canMoveUp:_propTypes.default.bool,canMoveDown:_propTypes.default.bool,resettable:_propTypes.default.bool};Fold.contextTypes={updateContainer:_propTypes.default.func,deleteContainer:_propTypes.default.func};Fold.childContextTypes={resettable:_propTypes.default.bool,foldInfo:_propTypes.default.object};class PlotlyFold extends Fold{constructor(props,context){super(props,context);this.foldVisible=false;this.determineVisibility(props,context)}UNSAFE_componentWillReceiveProps(nextProps,nextContext){this.determineVisibility(nextProps,nextContext)}determineVisibility(nextProps,nextContext){this.foldVisible=false;_react.default.Children.forEach(nextProps.children,child=>{if(!child||this.foldVisible){return}if(child.props.attr){const plotProps=(0,_lib.unpackPlotProps)(child.props,nextContext);if(child.type.modifyPlotProps){child.type.modifyPlotProps(child.props,nextContext,plotProps)}this.foldVisible=this.foldVisible||plotProps.isVisible;return}if(!(child.type.plotly_editor_traits||{}).no_visibility_forcing){this.foldVisible=true;return}})}__reactstandin__regenerateByEval(key,code){this[key]=eval(code)}}PlotlyFold.plotly_editor_traits={container_fold:true,foldable:true};PlotlyFold.contextTypes=Object.assign({deleteContainer:_propTypes.default.func,moveContainer:_propTypes.default.func},_lib.containerConnectedContextTypes);const _default=PlotlyFold;var _default2=exports.default=_default;;(function(){var reactHotLoader=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default:undefined;if(!reactHotLoader){return}reactHotLoader.register(Fold,"Fold","/react-chart-editor/src/components/containers/PlotlyFold.js");reactHotLoader.register(PlotlyFold,"PlotlyFold","/react-chart-editor/src/components/containers/PlotlyFold.js");reactHotLoader.register(_default,"default","/react-chart-editor/src/components/containers/PlotlyFold.js")})();;(function(){var leaveModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.leaveModule:undefined;leaveModule&&leaveModule(module)})();
//# sourceMappingURL=PlotlyFold.js.map