@splunk/dynamic-editors 0.36.1 → 0.36.2

package/containers/EditorLayout.js

@@ -9,7 +9,7 @@
 `,Q={marginBottom:10},ee={width:"100%"},te=V().span`
     font-size: smaller;
     font-style: italic;
-`,ae=(0,N._)("Note: Uploaded image files can be accessed and deleted by others in your organization"),oe=(0,Z.memoize)(((e,t)=>{const a=e.slice();if(t)-1===a.indexOf("svg")&&a.push("svg");else{const e=a.indexOf("svg");e>-1&&a.splice(e,1)}return a}),((e,t)=>`${t}-${e.join("-")}`));class re extends l.Component{constructor(e){super(e),L()(this,"violationHandler",(e=>{e.blockedURI!==this.state.urlValue&&e.blockedURI!==`${this.state.urlValue}/`||"enforce"!==e.disposition?e.blockedURI!==this.state.urlValue&&e.blockedURI!==`${this.state.urlValue}/`||"report"!==e.disposition||this.setState({violationType:"warning"}):this.setState({violationType:"error"})})),L()(this,"checkImage",(e=>{if(!e)return;const t=new Image;t.onload=()=>{this.props.handleImageUpload({src:e})},t.onerror=()=>{this.setState((e=>e.urlValue?{validUrl:!1}:void 0))},t.src=e})),L()(this,"handleURLChange",((e,{value:t})=>{this.setState({urlValue:t,validUrl:!0,violationType:"none"})})),L()(this,"handleTextKeyDown",(e=>{"Enter"===e.key&&(e.preventDefault(),this.checkImage(this.state.urlValue))})),L()(this,"handleBlur",(e=>{var t;null!==(t=this.inputRef.current)&&void 0!==t&&t.contains(e.relatedTarget)||this.checkImage(this.state.urlValue)})),L()(this,"trackInputRef",(e=>{this.inputRef.current=e,e&&e.addEventListener("focusout",this.handleBlur)})),L()(this,"handleOnImageChange",(({filename:e,imageDataURI:t})=>{e&&t?this.props.handleImageUpload({filename:e,imageDataURI:t}):this.props.handleImageUpload({filename:null,imageDataURI:null})})),this.state={urlValue:"",validUrl:!0,violationType:"none"},this.inputRef=n().createRef()}componentDidMount(){document.addEventListener("securitypolicyviolation",this.violationHandler)}componentWillUnmount(){document.removeEventListener("securitypolicyviolation",this.violationHandler),this.inputRef.current&&this.inputRef.current.removeEventListener("focusout",this.handleBlur)}render(){const{enableImageFileUpload:e,enableSVGImageUpload:t,enableSvgHttpDownloader:a,enableGallerySharingWarning:o}=this.context||{},r=oe(this.props.validImageTypes,t),l=r.indexOf("svg")<0||this.props.svgRenderAsDom&&r.indexOf("svg")>-1&&a||!this.props.svgRenderAsDom&&r.indexOf("svg")>-1,i="none"!==this.state.violationType?n().createElement(X.CSPMessage,{type:this.state.violationType}):n().createElement(W(),{appearance:"fill",type:"error"},(0,N._)("We can't find an image with this URL. Please enter a new URL."));return n().createElement(J,null,l&&n().createElement(z(),{canClear:!0,value:this.state.urlValue,onChange:this.handleURLChange,onKeyDown:this.handleTextKeyDown,style:Q,elementRef:this.trackInputRef}),this.state.validUrl?e&&n().createElement(n().Fragment,null,n().createElement(Y(),{style:ee,defaultFilename:null,defaultImageDataURI:null,onImageChange:this.handleOnImageChange,allowExtensions:r}),o&&n().createElement(te,{"data-test":"gallery-sharing-warning"},ae)):i)}}L()(re,"contextType",G()),re.propTypes={handleImageUpload:s().func,validImageTypes:s().array,svgRenderAsDom:s().bool},re.defaultProps={handleImageUpload:()=>{},validImageTypes:["gif","jpeg","jpg","png","webp"],svgRenderAsDom:!1};const le=re;var ne=a(8855),ie=a.n(ne),se=a(7020),ue=a.n(se),ce=a(3563),de=a(5135),fe=a(137);const pe=n().createElement(ie(),{"aria-label":(0,N._)("Remove image")}),me=V().div`
+`,ae=(0,N._)("Note: Uploaded image files can be accessed and deleted by others in your organization"),oe=(0,Z.memoize)(((e,t)=>{const a=e.slice();if(t)-1===a.indexOf("svg")&&a.push("svg");else{const e=a.indexOf("svg");e>-1&&a.splice(e,1)}return a}),((e,t)=>`${t}-${e.join("-")}`));class re extends l.Component{constructor(e){super(e),L()(this,"violationHandler",(e=>{e.blockedURI!==this.state.urlValue&&e.blockedURI!==`${this.state.urlValue}/`||"enforce"!==e.disposition?e.blockedURI!==this.state.urlValue&&e.blockedURI!==`${this.state.urlValue}/`||"report"!==e.disposition||this.setState({violationType:"warning"}):this.setState({violationType:"error"})})),L()(this,"checkImage",(e=>{if(!e)return;const t=new Image;t.onload=()=>{this.props.handleImageUpload({src:e})},t.onerror=()=>{this.setState((e=>e.urlValue?{validUrl:!1}:void 0))},t.src=e})),L()(this,"handleURLChange",((e,{value:t})=>{this.setState({urlValue:t,validUrl:!0,violationType:"none"})})),L()(this,"handleTextKeyDown",(e=>{"Enter"===e.key&&(e.preventDefault(),this.checkImage(this.state.urlValue))})),L()(this,"handleBlur",(e=>{var t;null!==(t=this.inputRef.current)&&void 0!==t&&t.contains(e.relatedTarget)||this.checkImage(this.state.urlValue)})),L()(this,"trackInputRef",(e=>{this.inputRef.current=e,e&&e.addEventListener("focusout",this.handleBlur)})),L()(this,"handleOnImageChange",(({filename:e,imageDataURI:t})=>{e&&t?this.props.handleImageUpload({filename:e,imageDataURI:t}):this.props.handleImageUpload({filename:null,imageDataURI:null})})),this.state={urlValue:"",validUrl:!0,violationType:"none"},this.inputRef=n().createRef()}componentDidMount(){document.addEventListener("securitypolicyviolation",this.violationHandler)}componentWillUnmount(){document.removeEventListener("securitypolicyviolation",this.violationHandler),this.inputRef.current&&this.inputRef.current.removeEventListener("focusout",this.handleBlur)}render(){const{enableImageFileUpload:e,enableSVGImageUpload:t,enableSvgHttpDownloader:a,enableGallerySharingWarning:o}=this.context||{},r=oe(this.props.validImageTypes,t),l=r.indexOf("svg")<0||this.props.svgRenderAsDom&&r.indexOf("svg")>-1&&a||!this.props.svgRenderAsDom&&r.indexOf("svg")>-1,i="none"!==this.state.violationType?n().createElement(X.CSPMessage,{type:this.state.violationType}):n().createElement(W(),{appearance:"fill",type:"error"},(0,N._)("We can't find an image with this URL. Please enter a new URL."));return n().createElement(J,null,l&&n().createElement(z(),{canClear:!0,value:this.state.urlValue,onChange:this.handleURLChange,onKeyDown:this.handleTextKeyDown,style:Q,elementRef:this.trackInputRef}),this.state.validUrl?e&&n().createElement(n().Fragment,null,n().createElement(Y(),{style:ee,defaultFilename:null,defaultImageDataURI:null,onImageChange:this.handleOnImageChange,allowExtensions:r}),o&&n().createElement(te,{"data-test":"gallery-sharing-warning"},ae)):i)}}L()(re,"contextType",G()),re.propTypes={handleImageUpload:s().func,validImageTypes:s().array,svgRenderAsDom:s().bool},re.defaultProps={handleImageUpload:()=>{},validImageTypes:["gif","jpeg","jpg","png","webp"],svgRenderAsDom:!1};const le=re;var ne=a(8855),ie=a.n(ne),se=a(7020),ue=a.n(se),ce=a(3563),de=a(5135),fe=a(137);const pe=n().createElement(ie(),null),me=V().div`
     width: 100%;
     padding-bottom: 5px;
 `,be=V().div`
@@ -44,7 +44,7 @@
     margin: 0 auto;
     max-width: 100%;
     max-height: 180px;
-`,Ce=({filename:e,imageDataURI:t,onImageRemove:a,overrideCSPViolation:o})=>{const r=(0,de.useCSPViolationObserver)(t,o);return n().createElement(me,null,n().createElement(be,null,n().createElement(ge,null,n().createElement(he,null,e),n().createElement(ye,{appearance:"subtle",icon:pe,onClick:a})),n().createElement(ve,{alt:e,src:t})),"none"!==r&&n().createElement(fe.MessageContainer,null,n().createElement(X.CSPMessage,{type:r})))};Ce.propTypes={filename:s().string,imageDataURI:s().string,onImageRemove:s().func,overrideCSPViolation:s().string},Ce.defaultProps={onImageRemove:()=>{},filename:null,imageDataURI:null};const _e=Ce,Oe=({onChange:e,name:t,value:a,labelPosition:o,labelWidth:r,label:i,validMediaTypes:s,svgRenderAsDom:u,overrideCSPViolation:c})=>{const d=(0,l.useContext)(A()),[f,p]=(0,l.useState)(null),[m,b]=(0,l.useState)(null),g=(0,l.useCallback)((async(a,o)=>{try{const r=await d.upload(o,{name:a},null,s);e(null,t,r)}catch(e){console.warn(e)}}),[d,s,e,t]),y=(0,l.useCallback)((({src:a,filename:o,imageDataURI:r})=>a?e(null,t,a):null!==o&&null!==r?g(o,r):e(null,t,null)),[g,e,t]),v=(0,l.useCallback)((a=>e(a,t,null)),[e,t]);return(0,l.useEffect)((()=>{(async()=>{if(a){const e=await(async(e,t)=>null!=e&&e.isResourceURL(t)?e.getByURL(t):{dataURI:t,metaData:{name:t}})(d,a);p(e.dataURI),b(e.metaData.name)}})()}),[a,d]),n().createElement(h(),{label:i,labelPosition:o,labelWidth:r},a?n().createElement(_e,{filename:m,imageDataURI:f,onImageRemove:v,overrideCSPViolation:c}):n().createElement(le,{svgRenderAsDom:u,validImageTypes:s,handleImageUpload:y}))};Oe.propTypes={onChange:s().func.isRequired,name:s().string.isRequired,label:s().string.isRequired,value:s().string,labelPosition:s().oneOf(["top","left"]),labelWidth:s().number,validMediaTypes:s().array,svgRenderAsDom:s().bool,overrideCSPViolation:s().string},Oe.defaultProps={labelPosition:"top"};const Ee=Oe;var Pe=a(1785),je=a.n(Pe),xe=a(5777),Te=a.n(xe),De=a(4566),we=a.n(De);const Se=V().div.attrs((()=>({"data-test":"threshold-error"})))`
+`,Ce=({filename:e,imageDataURI:t,onImageRemove:a,overrideCSPViolation:o})=>{const r=(0,de.useCSPViolationObserver)(t,o);return n().createElement(me,null,n().createElement(be,null,n().createElement(ge,null,n().createElement(he,null,e),n().createElement(ye,{"aria-label":(0,N._)("Remove image"),appearance:"subtle",icon:pe,onClick:a})),n().createElement(ve,{alt:e,src:t})),"none"!==r&&n().createElement(fe.MessageContainer,null,n().createElement(X.CSPMessage,{type:r})))};Ce.propTypes={filename:s().string,imageDataURI:s().string,onImageRemove:s().func,overrideCSPViolation:s().string},Ce.defaultProps={onImageRemove:()=>{},filename:null,imageDataURI:null};const _e=Ce,Oe=({onChange:e,name:t,value:a,labelPosition:o,labelWidth:r,label:i,validMediaTypes:s,svgRenderAsDom:u,overrideCSPViolation:c})=>{const d=(0,l.useContext)(A()),[f,p]=(0,l.useState)(null),[m,b]=(0,l.useState)(null),g=(0,l.useCallback)((async(a,o)=>{try{const r=await d.upload(o,{name:a},null,s);e(null,t,r)}catch(e){console.warn(e)}}),[d,s,e,t]),y=(0,l.useCallback)((({src:a,filename:o,imageDataURI:r})=>a?e(null,t,a):null!==o&&null!==r?g(o,r):e(null,t,null)),[g,e,t]),v=(0,l.useCallback)((a=>e(a,t,null)),[e,t]);return(0,l.useEffect)((()=>{(async()=>{if(a){const e=await(async(e,t)=>null!=e&&e.isResourceURL(t)?e.getByURL(t):{dataURI:t,metaData:{name:t}})(d,a);p(e.dataURI),b(e.metaData.name)}})()}),[a,d]),n().createElement(h(),{label:i,labelPosition:o,labelWidth:r},a?n().createElement(_e,{filename:m,imageDataURI:f,onImageRemove:v,overrideCSPViolation:c}):n().createElement(le,{svgRenderAsDom:u,validImageTypes:s,handleImageUpload:y}))};Oe.propTypes={onChange:s().func.isRequired,name:s().string.isRequired,label:s().string.isRequired,value:s().string,labelPosition:s().oneOf(["top","left"]),labelWidth:s().number,validMediaTypes:s().array,svgRenderAsDom:s().bool,overrideCSPViolation:s().string},Oe.defaultProps={labelPosition:"top"};const Ee=Oe;var Pe=a(1785),je=a.n(Pe),xe=a(5777),Te=a.n(xe),De=a(4566),we=a.n(De);const Se=V().div.attrs((()=>({"data-test":"threshold-error"})))`
     color: ${we().contentColorNegative};
     padding-top: 5px;
     font-size: 12px;