react-easy-edit/build/react-easy-edit.min.js

A react library for inline editing components

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["react-easy-edit"]={},e.React,e.PropTypes)}(this,(function(e,t,a){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(t),u=n(a);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},o.apply(this,arguments)}function r(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var n,l,u,o,r=[],s=!0,i=!1;try{if(u=(a=a.call(e)).next,0===t){if(Object(a)!==a)return;s=!1}else for(;!(s=(n=u.call(a)).done)&&(r.push(n.value),r.length!==t);s=!0);}catch(e){i=!0,l=e}finally{try{if(!s&&null!=a.return&&(o=a.return(),Object(o)!==o))return}finally{if(i)throw l}}return r}}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return s(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return s(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===a&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}(".easy-edit-button-wrapper{display:inline}.easy-edit-hover-on{cursor:pointer;font-style:italic}.easy-edit-radio-label{display:block}.easy-edit-not-allowed{cursor:not-allowed}.easy-edit-checkbox-label{display:block}.easy-edit-textarea{min-height:40px}.easy-edit-button{border:none;display:inline-block;margin:0 2px;padding:4px;text-align:center;text-decoration:none}.easy-edit-component-wrapper{display:inline-grid}.easy-edit-validation-error{color:red}.easy-edit-view-button-wrapper{display:inline;padding-left:4px}");var i=Object.freeze({DEFAULT_PLACEHOLDER:"Click to edit",DEFAULT_SELECT_PLACEHOLDER:"Select ...",DEFAULT_SAVE_BUTTON_LABEL:"Save",DEFAULT_CANCEL_BUTTON_LABEL:"Cancel",DEFAULT_DELETE_BUTTON_LABEL:"Delete",DEFAULT_EDIT_BUTTON_LABEL:"Edit",DEFAULT_BUTTON_CSS_CLASS:"easy-edit-button",DEFAULT_ON_HOVER_CSS_CLASS:"easy-edit-hover-on",ERROR_UNSUPPORTED_TYPE:"Unsupported component type, please review documentation for supported HTML component types",FAILED_VALIDATION_MESSAGE:"Please provide a valid value",POSITION_AFTER:"after",POSITION_BEFORE:"before"}),c=function(e){var t=e.options,a=e.value,n=e.onChange,u=e.placeholder,r=e.attributes,s=e.cssClassPrefix,i=e.onFocus,c=e.onBlur;return l.default.createElement("div",{className:s+"easy-edit-component-wrapper"},l.default.createElement("select",o({value:a||"",onChange:n,onFocus:i,onBlur:c},r),l.default.createElement("option",{key:"",value:"",disabled:"disabled"},u),t.map((function(e){return l.default.createElement("option",{value:e.value,key:e.value},e.label)}))))};c.propTypes={options:u.default.array.isRequired,onChange:u.default.func,value:u.default.oneOfType([u.default.string,u.default.number]),placeholder:u.default.oneOfType([u.default.string,u.default.element]),attributes:u.default.object,cssClassPrefix:u.default.string,onFocus:u.default.func,onBlur:u.default.func},c.defaultProps={attributes:{},placeholder:i.DEFAULT_SELECT_PLACEHOLDER};var d=function(e){var t=e.type,a=e.value,n=e.placeholder,u=e.onChange,r=e.attributes,s=e.cssClassPrefix,i=e.onFocus,c=e.onBlur;return l.default.createElement("div",{className:s+"easy-edit-component-wrapper"},l.default.createElement("input",o({autoFocus:r.autoFocus||!0,type:t,value:a||void 0,onChange:u,onFocus:i,onBlur:c,placeholder:r.placeholder||n,autoComplete:r.autoComplete||"off"},r)))};d.propTypes={type:u.default.string.isRequired,onChange:u.default.func,value:u.default.string,placeholder:u.default.oneOfType([u.default.string,u.default.element]),attributes:u.default.object,cssClassPrefix:u.default.string,onFocus:u.default.func,onBlur:u.default.func},d.defaultProps={attributes:{},placeholder:i.DEFAULT_PLACEHOLDER,onFocus:function(){}};var f=function(e){var t=e.value,a=e.placeholder,n=e.onChange,u=e.attributes,r=e.cssClassPrefix,s=e.onFocus,i=e.onBlur;return l.default.createElement("div",{className:r+"easy-edit-component-wrapper"},l.default.createElement("textarea",o({autoFocus:u.autoFocus||!0,value:t,onChange:n,onFocus:s,onBlur:i,placeholder:a},u,{className:void 0!==u.className?u.className+" easy-edit-textarea":"easy-edit-textarea"})))};f.propTypes={onChange:u.default.func,value:u.default.string,placeholder:u.default.oneOfType([u.default.string,u.default.element]),attributes:u.default.object,cssClassPrefix:u.default.string,onBlur:u.default.func,onFocus:u.default.func},f.defaultProps={attributes:{},placeholder:i.DEFAULT_PLACEHOLDER};var p=function(e){var t=e.options,a=e.value,n=e.onChange,u=e.attributes,r=e.cssClassPrefix,s=e.onFocus,i=e.onBlur,c=t.map((function(e){return l.default.createElement("label",{key:e.value,className:r+"easy-edit-radio-label"},l.default.createElement("input",o({type:"radio",value:e.value,onChange:n,onFocus:s,onBlur:i,checked:e.value===a},u)),e.label)}));return l.default.createElement("div",null,c)};p.propTypes={onChange:u.default.func,options:u.default.array,value:u.default.oneOfType([u.default.string,u.default.number]),attributes:u.default.object,cssClassPrefix:u.default.string,onFocus:u.default.func,onBlur:u.default.func},p.defaultProps={attributes:{}};var E=function(e){var t=e.options,a=e.value,n=e.onChange,u=e.attributes,r=e.cssClassPrefix,s=e.onFocus,i=e.onBlur;a=a||[];var c=t.map((function(e){return l.default.createElement("label",{key:e.value,className:r+"easy-edit-checkbox-label"},l.default.createElement("input",o({},u,{type:"checkbox",value:e.value,key:e.value,onChange:n,onFocus:s,onBlur:i,checked:a.includes(e.value)})),e.label)}));return l.default.createElement("div",null,c)};E.propTypes={onChange:u.default.func,options:u.default.array.isRequired,value:u.default.array,attributes:u.default.object,cssClassPrefix:u.default.string,onFocus:u.default.func,onBlur:u.default.func},E.defaultProps={attributes:{}};var v=function(e){var t=e.value,a=void 0===t?"":t,n=e.onChange,u=e.attributes,r=e.cssClassPrefix,s=e.onFocus,i=e.onBlur;return l.default.createElement("div",{className:r+"easy-edit-component-wrapper"},l.default.createElement("input",o({type:"color",defaultValue:a,onChange:n,onFocus:s,onBlur:i},u)))};v.propTypes={onChange:u.default.func,value:u.default.string,attributes:u.default.object,cssClassPrefix:u.default.string,onFocus:u.default.func,onBlur:u.default.func},v.defaultProps={attributes:{}};var b=function(e){var t=e.options,a=e.value,n=e.onChange,u=e.attributes,r=e.placeholder,s=e.cssClassPrefix,i=e.onFocus,c=e.onBlur,d="easy-datalist-id",f=t.map((function(e){return l.default.createElement("option",{key:e.value,value:e.value})}));return l.default.createElement("div",{className:s+"easy-edit-component-wrapper"},l.default.createElement("input",o({autoFocus:u.autoFocus||!0,value:a,onChange:n,onFocus:i,onBlur:c,placeholder:r,autoComplete:u.autoComplete||"off"},u,{list:d})),l.default.createElement("datalist",{id:d},f))};b.propTypes={options:u.default.arrayOf(u.default.object),placeholder:u.default.string,onChange:u.default.func,value:u.default.oneOfType([u.default.string,u.default.number]),attributes:u.default.object,cssClassPrefix:u.default.string,onFocus:u.default.func,onBlur:u.default.func},b.defaultProps={attributes:{}};var m=function(e){var a=e.children,n=e.cssClassPrefix,u=e.onBlur,o=e.onFocus,s=e.onSetValue,i=e.value,c=r(t.useState(i),2),d=c[0],f=c[1];t.useEffect((function(){f(i)}),[i]);var p=l.default.cloneElement(l.default.Children.only(a),{setParentValue:function(e){f(e),s(e)},onBlur:function(){u(d)},onFocus:function(){o()},value:d});return l.default.createElement("div",{className:n+"easy-edit-component-wrapper"},p)};m.propTypes={children:u.default.element,cssClassPrefix:u.default.string,onBlur:u.default.func,onFocus:u.default.func,onSetValue:u.default.func,value:u.default.oneOfType([u.default.string,u.default.number,u.default.array,u.default.object])};var y={CHECKBOX:"checkbox",COLOR:"color",DATALIST:"datalist",DATE:"date",DATETIME_LOCAL:"datetime-local",EMAIL:"email",FILE:"file",MONTH:"month",NUMBER:"number",PASSWORD:"password",RADIO:"radio",RANGE:"range",SELECT:"select",TEL:"tel",TEXT:"text",TEXTAREA:"textarea",TIME:"time",URL:"url",WEEK:"week"};Object.freeze(y);var C=function(e){return null==e||""===e};function T(e){var a=e.type,n=e.value,u=e.options,s=e.saveButtonLabel,T=e.saveButtonStyle,h=e.cancelButtonLabel,A=e.cancelButtonStyle,B=e.deleteButtonLabel,L=e.deleteButtonStyle,O=e.editButtonLabel,g=e.editButtonStyle,S=e.buttonsPosition,_=e.placeholder,F=e.onCancel,P=e.onDelete,D=e.onValidate,R=e.onFocus,N=e.onBlur,x=e.onSave,w=e.validationMessage,U=e.editable,I=e.inputAttributes,M=e.viewAttributes,H=e.instructions,k=e.editComponent,V=e.displayComponent,j=e.disableAutoSubmit,X=e.disableAutoCancel,K=e.cssClassPrefix,q=e.hideSaveButton,W=e.hideCancelButton,G=e.hideDeleteButton,Y=e.hideEditButton,z=e.onHoverCssClass,$=e.saveOnBlur,J=e.cancelOnBlur,Q=e.isEditing,Z=e.showEditViewButtonsOnHover,ee=e.showViewButtonsOnHover,te=function(){var e=r(t.useState(!1),2),a=e[0],n=e[1];return[a,function(){return n(!0)},function(){return n(!1)}]}(),ae=r(te,3),ne=ae[0],le=ae[1],ue=ae[2],oe=function(e,a,n,l,u){var o=r(t.useState(a||!1),2),s=o[0],i=o[1],c=r(t.useState(e),2),d=c[0],f=c[1],p=r(t.useState(e),2),E=p[0],v=p[1],b=r(t.useState(!0),2),m=b[0],y=b[1],C=r(t.useState(!1),2),T=C[0],h=C[1],A=t.useCallback((function(){u(E)?(i(!1),f(E),y(!0),n(E)):y(!1)}),[n,u,E]);return t.useEffect((function(){v(e),f(e)}),[e]),t.useEffect((function(){s!==a&&i(a)}),[a]),{editing:s,value:d,tempValue:E,setTempValue:v,isValid:m,isHidden:T,setIsHidden:h,handleSave:A,handleCancel:function(){i(!1),v(d),l()},setEditing:i}}(n,Q,x,F,D),re=oe.editing,se=oe.tempValue,ie=oe.setTempValue,ce=oe.value,de=oe.isValid,fe=oe.isHidden,pe=oe.setIsHidden,Ee=oe.handleSave,ve=oe.handleCancel,be=oe.setEditing,me=t.useRef(),ye=t.useRef(),Ce=t.useRef(),Te=t.useRef(),he=function(){$&&J&&console.warn("EasyEdit: You've set both `saveOnBlur` and `cancelOnBlur` to true, please set either one to false."),$?(N(se),Ee()):J?ve():N(se)},Ae=function(){R&&R(se)},Be=function(){be(!1),ie(ce),ue(),pe(!0),P()},Le=function(){be(!0)},Oe=function(e){ie(e.target?e.target.value:e)},ge=function(e){var t=se||[];e.target.checked&&!t.includes(e.target.value)?t.push(e.target.value):t.splice(t.indexOf(e.target.value),1);var a=u.map((function(e){return e.value}));t=t.filter((function(e){return a.includes(e)})),ie(t)},Se=function(){U&&be(!0)},_e=function(){if(!Z||Z&&ne)return l.default.createElement("div",{className:K+"easy-edit-button-wrapper"},!q&&De(me,Ee,s,Fe(T),"save",$),!W&&De(Ce,ve,h,Fe(A),"cancel",$),!G&&De(Te,Be,B,Fe(L),"delete",$))},Fe=function(e){return null===e?K+i.DEFAULT_BUTTON_CSS_CLASS:e},Pe=function(e){return M.class&&(e+=" "+M.class),M.className&&(e+=" "+M.className),U?ne?z===i.DEFAULT_ON_HOVER_CSS_CLASS?K+"easy-edit-hover-on "+e:z+" "+e:e:K+"easy-edit-not-allowed "+e},De=function(e,t,a,n,u,o){return o?"":l.default.createElement("button",{ref:e,onClick:t,className:n,name:u},a)},Re=function(e,t,a,n){if(!ee||ee&&ne)return!t&&l.default.createElement("div",{className:e+"easy-edit-view-button-wrapper"},De(ye,Le,a,Fe(n),"edit"))},Ne=function(e){return l.default.createElement(d,{value:e,placeholder:_,onChange:Oe,onFocus:Ae,onBlur:he,type:a,attributes:I,cssClassPrefix:K,onMouseEnter:le,onMouseLeave:ue})},xe=function(e){return l.default.createElement(f,{value:e,placeholder:_,onChange:Oe,onFocus:Ae,onBlur:he,attributes:I,cssClassPrefix:K})},we=function(e){return l.default.createElement(c,{value:e,onChange:Oe,onFocus:Ae,onBlur:he,options:u,placeholder:_===i.DEFAULT_PLACEHOLDER?i.DEFAULT_SELECT_PLACEHOLDER:_,attributes:I,cssClassPrefix:K})},Ue=function(e){return l.default.createElement(p,{value:e,onChange:Oe,onFocus:Ae,onBlur:he,options:u,attributes:I,cssClassPrefix:K})},Ie=function(e){return l.default.createElement(E,{value:e,onChange:ge,onFocus:Ae,onBlur:he,options:u,attributes:I,cssClassPrefix:K})},Me=function(e){return l.default.createElement(b,{value:e,onChange:Oe,onFocus:Ae,onBlur:he,options:u,attributes:I,cssClassPrefix:K})},He=function(e){return l.default.createElement(v,{value:e,onChange:Oe,onFocus:Ae,onBlur:he,attributes:I,cssClassPrefix:K})};return fe?null:re||Q?l.default.createElement("div",{className:K+"easy-edit-inline-wrapper",onMouseEnter:le,onMouseLeave:ue,onKeyDown:function(e){X||27!==e.keyCode||ve(),j||(13===e.keyCode&&a!==y.TEXTAREA||13===e.keyCode&&e.ctrlKey&&a===y.TEXTAREA)&&Ee()}},S===i.POSITION_BEFORE&&_e(),function(){var e=re?se:ce;if(l.default.isValidElement(k))return l.default.createElement(m,{onSetValue:Oe,onBlur:he,onFocus:Ae,value:se,cssClassPrefix:K},k);switch(a){case y.CHECKBOX:return Ie(e);case y.COLOR:return He(e);case y.DATALIST:return Me(e);case y.DATE:case y.DATETIME_LOCAL:case y.EMAIL:case y.FILE:case y.MONTH:case y.NUMBER:case y.PASSWORD:case y.RANGE:case y.TEL:case y.TEXT:case y.TIME:case y.URL:case y.WEEK:return Ne(e);case y.RADIO:return Ue(e);case y.SELECT:return we(e);case y.TEXTAREA:return xe(e);default:throw new Error(i.ERROR_UNSUPPORTED_TYPE)}}(),S===i.POSITION_AFTER&&_e(),function(){if((re||Q)&&null!==H)return l.default.createElement("div",{className:K+"easy-edit-instructions"},H)}(),function(){if(!de)return l.default.createElement("div",{className:K+"easy-edit-validation-error"},w)}()):function(){var t=K+"easy-edit-wrapper";if(l.default.isValidElement(V))return l.default.createElement("div",o({},M,{className:Pe(t),onClick:Se,onMouseEnter:le,onMouseLeave:ue}),C(ce)?_:l.default.cloneElement(V,{value:ce}),Re(K,Y,O,g));switch(a){case y.DATALIST:case y.DATE:case y.DATETIME_LOCAL:case y.EMAIL:case y.FILE:case y.TEXT:case y.TEL:case y.TEXTAREA:case y.NUMBER:case y.TIME:case y.MONTH:case y.RANGE:case y.WEEK:case y.URL:case y.PASSWORD:var n=a===y.PASSWORD?"••••••••":ce;return l.default.createElement("div",o({},M,{className:Pe(t),onClick:Se,onMouseEnter:le,onMouseLeave:ue}),C(ce)?_:n,Re(K,Y,O,g));case y.RADIO:case y.CHECKBOX:case y.SELECT:return l.default.createElement("div",o({},M,{className:Pe(t),onClick:Se,onMouseEnter:le,onMouseLeave:ue}),function(){var t,a=e.placeholder,n=e.options,l=e.type;return C(ce)?a:0!==(t=y.CHECKBOX===l?n.filter((function(e){return ce.includes(e.value)})):n.filter((function(e){return ce===e.value}))).length?t.map((function(e){return e.label})).join(", "):ce}(),Re(K,Y,O,g));case y.COLOR:return l.default.createElement("input",o({},M,{type:a,value:ce,onClick:Se,readOnly:!0}));default:throw new Error(i.ERROR_UNSUPPORTED_TYPE)}}()}T.propTypes={type:u.default.oneOf(["checkbox","color","datalist","date","datetime-local","email","file","month","number","password","radio","range","select","tel","text","textarea","time","url","week"]).isRequired,value:u.default.oneOfType([u.default.string,u.default.number,u.default.array,u.default.object]),options:u.default.array,saveButtonLabel:u.default.oneOfType([u.default.string,u.default.element]),saveButtonStyle:u.default.string,cancelButtonLabel:u.default.oneOfType([u.default.string,u.default.element]),cancelButtonStyle:u.default.string,deleteButtonLabel:u.default.oneOfType([u.default.string,u.default.element]),deleteButtonStyle:u.default.string,editButtonLabel:u.default.oneOfType([u.default.string,u.default.element]),editButtonStyle:u.default.string,buttonsPosition:u.default.oneOf(["after","before"]),placeholder:u.default.oneOfType([u.default.string,u.default.element]),onCancel:u.default.func,onDelete:u.default.func,onValidate:u.default.func,onFocus:u.default.func,onBlur:u.default.func,onSave:u.default.func.isRequired,validationMessage:u.default.string,editable:u.default.bool,inputAttributes:u.default.object,viewAttributes:u.default.object,instructions:u.default.string,editComponent:u.default.element,displayComponent:u.default.element,disableAutoSubmit:u.default.bool,disableAutoCancel:u.default.bool,cssClassPrefix:u.default.string,hideSaveButton:u.default.bool,hideCancelButton:u.default.bool,hideDeleteButton:u.default.bool,hideEditButton:u.default.bool,onHoverCssClass:u.default.string,saveOnBlur:u.default.bool,cancelOnBlur:u.default.bool,isEditing:u.default.bool,showEditViewButtonsOnHover:u.default.bool,showViewButtonsOnHover:u.default.bool},T.defaultProps={value:null,saveButtonLabel:i.DEFAULT_SAVE_BUTTON_LABEL,saveButtonStyle:null,cancelButtonLabel:i.DEFAULT_CANCEL_BUTTON_LABEL,cancelButtonStyle:null,deleteButtonLabel:i.DEFAULT_DELETE_BUTTON_LABEL,deleteButtonStyle:null,editButtonLabel:i.DEFAULT_EDIT_BUTTON_LABEL,editButtonStyle:null,buttonsPosition:i.POSITION_AFTER,placeholder:i.DEFAULT_PLACEHOLDER,editable:!0,onCancel:function(){},onDelete:function(){},onBlur:function(){},onValidate:function(e){return!0},validationMessage:i.FAILED_VALIDATION_MESSAGE,inputAttributes:{},viewAttributes:{},instructions:null,editComponent:null,disableAutoSubmit:!1,disableAutoCancel:!1,cssClassPrefix:"",hideSaveButton:!1,hideCancelButton:!1,hideDeleteButton:!0,hideEditButton:!0,onHoverCssClass:i.DEFAULT_ON_HOVER_CSS_CLASS,saveOnBlur:!1,cancelOnBlur:!1,isEditing:!1,showEditViewButtonsOnHover:!1,showViewButtonsOnHover:!1},e.Types=y,e.default=T,Object.defineProperty(e,"__esModule",{value:!0})}));