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

A react library for inline editing components (patched for React 19 compatibility)

!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 l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(t),u=l(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 l in a)({}).hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e},o.apply(null,arguments)}!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===a&&l.firstChild?l.insertBefore(n,l.firstChild):l.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.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 s=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"});const r=e=>{const{options:t,value:a,onChange:l,placeholder:u,attributes:s,cssClassPrefix:r,onFocus:d,onBlur:i}=e;return n.default.createElement("div",{className:r+"easy-edit-component-wrapper"},n.default.createElement("select",o({value:a||"",onChange:l,onFocus:d,onBlur:i},s),n.default.createElement("option",{key:"",value:"",disabled:"disabled"},u),t.map(e=>n.default.createElement("option",{value:e.value,key:e.value},e.label))))};r.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},r.defaultProps={attributes:{},placeholder:s.DEFAULT_SELECT_PLACEHOLDER};const d=e=>{const{type:t,value:a,placeholder:l,onChange:u,attributes:s,cssClassPrefix:r,onFocus:d,onBlur:i}=e;return n.default.createElement("div",{className:r+"easy-edit-component-wrapper"},n.default.createElement("input",o({autoFocus:s.autoFocus||!0,type:t,value:a||void 0,onChange:u,onFocus:d,onBlur:i,placeholder:s.placeholder||l,autoComplete:s.autoComplete||"off"},s)))};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:s.DEFAULT_PLACEHOLDER,onFocus:()=>{}};const i=e=>{const{value:t,placeholder:a,onChange:l,attributes:u,cssClassPrefix:s,onFocus:r,onBlur:d}=e;return n.default.createElement("div",{className:s+"easy-edit-component-wrapper"},n.default.createElement("textarea",o({autoFocus:u.autoFocus||!0,value:t,onChange:l,onFocus:r,onBlur:d,placeholder:a},u,{className:void 0!==u.className?u.className+" easy-edit-textarea":"easy-edit-textarea"})))};i.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},i.defaultProps={attributes:{},placeholder:s.DEFAULT_PLACEHOLDER};const c=e=>{const{options:t,value:a,onChange:l,attributes:u,cssClassPrefix:s,onFocus:r,onBlur:d}=e;let i=t.map(e=>n.default.createElement("label",{key:e.value,className:s+"easy-edit-radio-label"},n.default.createElement("input",o({type:"radio",value:e.value,onChange:l,onFocus:r,onBlur:d,checked:e.value===a},u)),e.label));return n.default.createElement("div",null,i)};c.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},c.defaultProps={attributes:{}};const f=e=>{let{options:t,value:a,onChange:l,attributes:u,cssClassPrefix:s,onFocus:r,onBlur:d}=e;a=a||[];let i=t.map(e=>n.default.createElement("label",{key:e.value,className:s+"easy-edit-checkbox-label"},n.default.createElement("input",o({},u,{type:"checkbox",value:e.value,key:e.value,onChange:l,onFocus:r,onBlur:d,checked:a.includes(e.value)})),e.label));return n.default.createElement("div",null,i)};f.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},f.defaultProps={attributes:{}};const p=e=>{const{value:t="",onChange:a,attributes:l,cssClassPrefix:u,onFocus:s,onBlur:r}=e;return n.default.createElement("div",{className:u+"easy-edit-component-wrapper"},n.default.createElement("input",o({type:"color",defaultValue:t,onChange:a,onFocus:s,onBlur:r},l)))};p.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},p.defaultProps={attributes:{}};const E=e=>{const{options:t,value:a,onChange:l,attributes:u,placeholder:s,cssClassPrefix:r,onFocus:d,onBlur:i}=e,c="easy-datalist-id";let f=t.map(e=>n.default.createElement("option",{key:e.value,value:e.value}));return n.default.createElement("div",{className:r+"easy-edit-component-wrapper"},n.default.createElement("input",o({autoFocus:u.autoFocus||!0,value:a,onChange:l,onFocus:d,onBlur:i,placeholder:s,autoComplete:u.autoComplete||"off"},u,{list:c})),n.default.createElement("datalist",{id:c},f))};E.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},E.defaultProps={attributes:{}};const C=e=>{let{children:a,cssClassPrefix:l,onBlur:u,onFocus:o,onSetValue:s,value:r}=e;const[d,i]=t.useState(r);t.useEffect(()=>{i(r)},[r]);const c=n.default.cloneElement(n.default.Children.only(a),{setParentValue:e=>{i(e),s(e)},onBlur:()=>{u(d)},onFocus:()=>{o()},value:d});return n.default.createElement("div",{className:l+"easy-edit-component-wrapper"},c)};C.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])};const T={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(T);const v=e=>null==e||""===e;function m(e){const{type:a,value:l,options:u,saveButtonLabel:m,saveButtonStyle:b,cancelButtonLabel:y,cancelButtonStyle:B,deleteButtonLabel:L,deleteButtonStyle:h,editButtonLabel:A,editButtonStyle:O,buttonsPosition:g,placeholder:S,onCancel:_,onDelete:F,onValidate:P,onFocus:D,onBlur:R,onSave:N,validationMessage:x,editable:w,inputAttributes:U,viewAttributes:I,instructions:H,editComponent:M,displayComponent:k,disableAutoSubmit:V,disableAutoCancel:j,cssClassPrefix:X,hideSaveButton:K,hideCancelButton:q,hideDeleteButton:W,hideEditButton:G,onHoverCssClass:Y,saveOnBlur:z,cancelOnBlur:J,isEditing:Q,showEditViewButtonsOnHover:Z,showViewButtonsOnHover:$}=e,[ee,te,ae]=(()=>{const[e,a]=t.useState(!1);return[e,()=>a(!0),()=>a(!1)]})(),{editing:le,tempValue:ne,setTempValue:ue,value:oe,isValid:se,isHidden:re,setIsHidden:de,handleSave:ie,handleCancel:ce,setEditing:fe}=((e,a,l,n,u)=>{const[o,s]=t.useState(a||!1),[r,d]=t.useState(e),[i,c]=t.useState(e),[f,p]=t.useState(!0),[E,C]=t.useState(!1),T=t.useCallback(()=>{u(i)?(s(!1),d(i),p(!0),l(i)):p(!1)},[l,u,i]);return t.useEffect(()=>{c(e),d(e)},[e]),t.useEffect(()=>{o!==a&&s(a)},[a]),{editing:o,value:r,tempValue:i,setTempValue:c,isValid:f,isHidden:E,setIsHidden:C,handleSave:T,handleCancel:()=>{s(!1),c(r),n()},setEditing:s}})(l,Q,N,_,P),pe=t.useRef(),Ee=t.useRef(),Ce=t.useRef(),Te=t.useRef(),ve=e=>{j||27!==e.keyCode||ce(),V||(13===e.keyCode&&a!==T.TEXTAREA||13===e.keyCode&&e.ctrlKey&&a===T.TEXTAREA)&&ie()},me=()=>{z&&J&&console.warn("EasyEdit: You've set both `saveOnBlur` and `cancelOnBlur` to true, please set either one to false."),z?(R(ne),ie()):J?ce():R(ne)},be=()=>{D&&D(ne)},ye=()=>{fe(!1),ue(oe),ae(),de(!0),F()},Be=()=>{fe(!0)},Le=e=>{ue(e.target?e.target.value:e)},he=e=>{let t=ne||[];e.target.checked&&!t.includes(e.target.value)?t.push(e.target.value):t.splice(t.indexOf(e.target.value),1);let a=u.map(e=>e.value);t=t.filter(e=>a.includes(e)),ue(t)},Ae=()=>{w&&fe(!0)},Oe=()=>{if(!Z||Z&&ee)return n.default.createElement("div",{className:X+"easy-edit-button-wrapper"},!K&&_e(pe,ie,m,ge(b),"save",z),!q&&_e(Ce,ce,y,ge(B),"cancel",z),!W&&_e(Te,ye,L,ge(h),"delete",z))},ge=e=>null===e?X+s.DEFAULT_BUTTON_CSS_CLASS:e,Se=e=>(I.class&&(e+=" "+I.class),I.className&&(e+=" "+I.className),w?ee?Y===s.DEFAULT_ON_HOVER_CSS_CLASS?X+"easy-edit-hover-on "+e:Y+" "+e:e:X+"easy-edit-not-allowed "+e),_e=(e,t,a,l,u,o)=>o?"":n.default.createElement("button",{ref:e,onClick:t,className:l,name:u},a),Fe=(e,t,a,l)=>{if(!$||$&&ee)return!t&&n.default.createElement("div",{className:e+"easy-edit-view-button-wrapper"},_e(Ee,Be,a,ge(l),"edit"))},Pe=e=>n.default.createElement(d,{value:e,placeholder:S,onChange:Le,onFocus:be,onBlur:me,type:a,attributes:U,cssClassPrefix:X,onMouseEnter:te,onMouseLeave:ae}),De=e=>n.default.createElement(i,{value:e,placeholder:S,onChange:Le,onFocus:be,onBlur:me,attributes:U,cssClassPrefix:X}),Re=e=>n.default.createElement(r,{value:e,onChange:Le,onFocus:be,onBlur:me,options:u,placeholder:S===s.DEFAULT_PLACEHOLDER?s.DEFAULT_SELECT_PLACEHOLDER:S,attributes:U,cssClassPrefix:X}),Ne=e=>n.default.createElement(c,{value:e,onChange:Le,onFocus:be,onBlur:me,options:u,attributes:U,cssClassPrefix:X}),xe=e=>n.default.createElement(f,{value:e,onChange:he,onFocus:be,onBlur:me,options:u,attributes:U,cssClassPrefix:X}),we=e=>n.default.createElement(E,{value:e,onChange:Le,onFocus:be,onBlur:me,options:u,attributes:U,cssClassPrefix:X}),Ue=e=>n.default.createElement(p,{value:e,onChange:Le,onFocus:be,onBlur:me,attributes:U,cssClassPrefix:X});return re?null:le||Q?n.default.createElement("div",{className:X+"easy-edit-inline-wrapper",onMouseEnter:te,onMouseLeave:ae,onKeyDown:ve},g===s.POSITION_BEFORE&&Oe(),(()=>{const e=le?ne:oe;if(n.default.isValidElement(M))return n.default.createElement(C,{onSetValue:Le,onBlur:me,onFocus:be,value:ne,cssClassPrefix:X},M);switch(a){case T.CHECKBOX:return xe(e);case T.COLOR:return Ue(e);case T.DATALIST:return we(e);case T.DATE:case T.DATETIME_LOCAL:case T.EMAIL:case T.FILE:case T.MONTH:case T.NUMBER:case T.PASSWORD:case T.RANGE:case T.TEL:case T.TEXT:case T.TIME:case T.URL:case T.WEEK:return Pe(e);case T.RADIO:return Ne(e);case T.SELECT:return Re(e);case T.TEXTAREA:return De(e);default:throw new Error(s.ERROR_UNSUPPORTED_TYPE)}})(),g===s.POSITION_AFTER&&Oe(),(()=>{if((le||Q)&&null!==H)return n.default.createElement("div",{className:X+"easy-edit-instructions"},H)})(),(()=>{if(!se)return n.default.createElement("div",{className:X+"easy-edit-validation-error"},x)})()):(()=>{const t=X+"easy-edit-wrapper";if(n.default.isValidElement(k))return n.default.createElement("div",o({},I,{className:Se(t),onClick:Ae,onMouseEnter:te,onMouseLeave:ae}),v(oe)?S:n.default.cloneElement(k,{value:oe}),Fe(X,G,A,O));switch(a){case T.DATALIST:case T.DATE:case T.DATETIME_LOCAL:case T.EMAIL:case T.FILE:case T.TEXT:case T.TEL:case T.TEXTAREA:case T.NUMBER:case T.TIME:case T.MONTH:case T.RANGE:case T.WEEK:case T.URL:case T.PASSWORD:{let e=a===T.PASSWORD?"••••••••":oe;return n.default.createElement("div",o({},I,{className:Se(t),onClick:Ae,onMouseEnter:te,onMouseLeave:ae}),v(oe)?S:e,Fe(X,G,A,O))}case T.RADIO:case T.CHECKBOX:case T.SELECT:return n.default.createElement("div",o({},I,{className:Se(t),onClick:Ae,onMouseEnter:te,onMouseLeave:ae}),(()=>{const{placeholder:t,options:a,type:l}=e;if(v(oe))return t;let n;return n=T.CHECKBOX===l?a.filter(e=>oe.includes(e.value)):a.filter(e=>oe===e.value),0!==n.length?n.map(e=>e.label).join(", "):oe})(),Fe(X,G,A,O));case T.COLOR:return n.default.createElement("input",o({},I,{type:a,value:oe,onClick:Ae,readOnly:!0}));default:throw new Error(s.ERROR_UNSUPPORTED_TYPE)}})()}m.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},m.defaultProps={value:null,saveButtonLabel:s.DEFAULT_SAVE_BUTTON_LABEL,saveButtonStyle:null,cancelButtonLabel:s.DEFAULT_CANCEL_BUTTON_LABEL,cancelButtonStyle:null,deleteButtonLabel:s.DEFAULT_DELETE_BUTTON_LABEL,deleteButtonStyle:null,editButtonLabel:s.DEFAULT_EDIT_BUTTON_LABEL,editButtonStyle:null,buttonsPosition:s.POSITION_AFTER,placeholder:s.DEFAULT_PLACEHOLDER,editable:!0,onCancel:()=>{},onDelete:()=>{},onBlur:()=>{},onValidate:e=>!0,validationMessage:s.FAILED_VALIDATION_MESSAGE,inputAttributes:{},viewAttributes:{},instructions:null,editComponent:null,disableAutoSubmit:!1,disableAutoCancel:!1,cssClassPrefix:"",hideSaveButton:!1,hideCancelButton:!1,hideDeleteButton:!0,hideEditButton:!0,onHoverCssClass:s.DEFAULT_ON_HOVER_CSS_CLASS,saveOnBlur:!1,cancelOnBlur:!1,isEditing:!1,showEditViewButtonsOnHover:!1,showViewButtonsOnHover:!1},e.Types=T,e.default=m,Object.defineProperty(e,"__esModule",{value:!0})});