@eeacms/react-chart-editor/lib/components/widgets/Dropzone.js

plotly.js chart editor react component UI

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactDropzone=_interopRequireDefault(require("react-dropzone"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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(){var enterModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.enterModule:undefined;enterModule&&enterModule(module)})();function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}var __signature__=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default.signature:function(a){return a};class Dropzone extends _react.Component{constructor(props,context){super(props,context);this.state={content:""};this.validFiletypes={image:["image/jpeg","image/jpg","image/svg","image/svg+xml","image/png","image/gif","image/bmp","image/webp"],geojson:["application/json"]};this.onDrop=this.onDrop.bind(this);this.parsingError=this.parsingError.bind(this);this.renderSuccess=this.renderSuccess.bind(this)}renderSuccess(value){const _=this.context.localize;if(this.props.fileType==="image"){return _react.default.createElement("div",{className:"dropzone-container__image",style:{backgroundImage:"url(".concat(value,")")}})}if(this.props.fileType==="geojson"){return _react.default.createElement("div",{className:"dropzone-container__message"},_react.default.createElement("p",null,_("GeoJSON loaded!")),_react.default.createElement("p",null,value.features.length+_(" features detected.")))}return _react.default.createElement("div",{className:"dropzone-container__message"},_("File loaded!"))}UNSAFE_componentWillMount(){const _=this.context.localize;if(this.props.value&&this.props.value!==""){this.setState({content:this.renderSuccess(this.props.value)});return}this.setState({content:_react.default.createElement("div",{className:"dropzone-container__message"},_react.default.createElement("p",null,_("Drop the ")+this.props.fileType+_(" to upload here or click to choose a file from your computer.")),this.validFiletypes[this.props.fileType]?_react.default.createElement("p",null,_("Supported formats are: ")+this.validFiletypes[this.props.fileType].join(", ").replaceAll("image/","").toUpperCase()+"."):null)})}parsingError(optionalError){const _=this.context.localize;const supportedFileTypes=this.props.fileType==="image"?this.validFiletypes[this.props.fileType].join(", ").replaceAll("image/","").toUpperCase():this.validFiletypes[this.props.fileType][0];return _react.default.createElement("div",{className:"dropzone-container__message"},_("Yikes! This doesn't look like a valid ")+this.props.fileType,_react.default.createElement("p",null,_("Try again with a supported file format: ")+supportedFileTypes+"."),optionalError&&_react.default.createElement("p",null,optionalError))}onLoad(e){try{const payload=e.target.result;const parsedValue=this.props.fileType==="image"?payload:JSON.parse(payload);this.props.onUpdate(parsedValue);this.setState({content:this.renderSuccess(parsedValue)})}catch(error){console.warn(error);this.setState({content:this.parsingError()})}}onDrop(accepted,rejections){const _=this.context.localize;const reader=new FileReader;if(accepted.length){if(accepted.length>1){this.setState({content:_react.default.createElement("div",{className:"dropzone-container__message"},_react.default.createElement("p",null,_("Yikes! You can only upload one file at a time.")))});return}this.setState({content:_("Loading...")});reader.onload=e=>this.onLoad(e);if(this.props.fileType==="image"){reader.readAsDataURL(accepted[0])}else if(this.props.fileType==="geojson"){reader.readAsText(accepted[0])}}if(rejections.length){this.setState({content:this.parsingError(rejections.map(r=>r.errors.map(e=>e.message)))})}}render(){return _react.default.createElement(_reactDropzone.default,{accept:this.validFiletypes[this.props.fileType],onDrop:this.onDrop,activeClassName:"dropzone-container--active",rejectClassName:"dropzone-container--rejected"},_ref=>{let{getRootProps,getInputProps}=_ref;return _react.default.createElement("div",_extends({},getRootProps(),{className:"dropzone-container"}),_react.default.createElement("input",getInputProps()),_react.default.createElement("div",{className:"dropzone-container__content"},this.state.content))})}__reactstandin__regenerateByEval(key,code){this[key]=eval(code)}}Dropzone.propTypes={fileType:_propTypes.default.string.isRequired,onUpdate:_propTypes.default.func,value:_propTypes.default.any};Dropzone.contextTypes={localize:_propTypes.default.func};const _default=Dropzone;var _default2=exports.default=_default;;(function(){var reactHotLoader=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default:undefined;if(!reactHotLoader){return}reactHotLoader.register(Dropzone,"Dropzone","/react-chart-editor/src/components/widgets/Dropzone.js");reactHotLoader.register(_default,"default","/react-chart-editor/src/components/widgets/Dropzone.js")})();;(function(){var leaveModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.leaveModule:undefined;leaveModule&&leaveModule(module)})();
//# sourceMappingURL=Dropzone.js.map