| 1 | !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 s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=s(t),n=s(a);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var s in a)Object.prototype.hasOwnProperty.call(a,s)&&(e[s]=a[s])}return e}).apply(this,arguments)}!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===a&&s.firstChild?s.insertBefore(l,s.firstChild):s.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}");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_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 t=e.options,a=e.value,s=e.onChange,n=e.placeholder,o=e.attributes,i=e.cssClassPrefix,r=e.onFocus,c=e.onBlur;return l.default.createElement("div",{className:i+"easy-edit-component-wrapper"},l.default.createElement("select",u({value:a||"",onChange:s,onFocus:r,onBlur:c},o),l.default.createElement("option",{key:"",value:"",disabled:"disabled"},n),t.map((e=>l.default.createElement("option",{value:e.value,key:e.value},e.label)))))};r.propTypes={options:n.default.array.isRequired,onChange:n.default.func,value:n.default.oneOfType([n.default.string,n.default.number]),placeholder:n.default.string,attributes:n.default.object,cssClassPrefix:n.default.string,onFocus:n.default.func,onBlur:n.default.func},r.defaultProps={attributes:{},placeholder:i.DEFAULT_SELECT_PLACEHOLDER};const c=e=>{const t=e.type,a=e.value,s=e.placeholder,n=e.onChange,o=e.attributes,i=e.cssClassPrefix,r=e.onFocus,c=e.onBlur;return l.default.createElement("div",{className:i+"easy-edit-component-wrapper"},l.default.createElement("input",u({autoFocus:o.autoFocus||!0,type:t,value:a||void 0,onChange:n,onFocus:r,onBlur:c,placeholder:o.placeholder||s,autoComplete:o.autoComplete||"off"},o)))};c.propTypes={type:n.default.string.isRequired,onChange:n.default.func,value:n.default.string,placeholder:n.default.string,attributes:n.default.object,cssClassPrefix:n.default.string,onFocus:n.default.func,onBlur:n.default.func},c.defaultProps={attributes:{},placeholder:i.DEFAULT_PLACEHOLDER,onfocus:()=>{}};const d=e=>{const t=e.value,a=e.placeholder,s=e.onChange,n=e.attributes,o=e.cssClassPrefix,i=e.onFocus,r=e.onBlur;return l.default.createElement("div",{className:o+"easy-edit-component-wrapper"},l.default.createElement("textarea",u({autoFocus:n.autoFocus||!0,value:t,onChange:s,onFocus:i,onBlur:r,placeholder:a},n,{className:void 0!==n.className?n.className+" easy-edit-textarea":"easy-edit-textarea"})))};d.propTypes={onChange:n.default.func,value:n.default.string,placeholder:n.default.string,attributes:n.default.object,cssClassPrefix:n.default.string,onBlur:n.default.func,onFocus:n.default.func},d.defaultProps={attributes:{},placeholder:i.DEFAULT_PLACEHOLDER};const f=e=>{const t=e.options,a=e.value,s=e.onChange,n=e.attributes,o=e.cssClassPrefix,i=e.onFocus,r=e.onBlur;let c=t.map((e=>l.default.createElement("label",{key:e.value,className:o+"easy-edit-radio-label"},l.default.createElement("input",u({type:"radio",value:e.value,onChange:s,onFocus:i,onBlur:r,checked:e.value===a},n)),e.label)));return l.default.createElement("div",null,c)};f.propTypes={onChange:n.default.func,value:n.default.oneOfType([n.default.string,n.default.number]),attributes:n.default.object,cssClassPrefix:n.default.string,onFocus:n.default.func,onBlur:n.default.func},f.defaultProps={attributes:{}};const h=e=>{let t=e.options,a=e.value,s=e.onChange,n=e.attributes,o=e.cssClassPrefix,i=e.onFocus,r=e.onBlur;a=a||[];let c=t.map((e=>l.default.createElement("label",{key:e.value,className:o+"easy-edit-checkbox-label"},l.default.createElement("input",u({},n,{type:"checkbox",value:e.value,key:e.value,onChange:s,onFocus:i,onBlur:r,checked:a.includes(e.value)})),e.label)));return l.default.createElement("div",null,c)};h.propTypes={onChange:n.default.func,options:n.default.array.isRequired,value:n.default.array,attributes:n.default.object,cssClassPrefix:n.default.string,onFocus:n.default.func,onBlur:n.default.func},h.defaultProps={attributes:{}};const p=e=>{const t=e.value,a=void 0===t?"":t,s=e.onChange,n=e.attributes,o=e.cssClassPrefix,i=e.onFocus,r=e.onBlur;return l.default.createElement("div",{className:o+"easy-edit-component-wrapper"},l.default.createElement("input",u({type:"color",defaultValue:a,onChange:s,onFocus:i,onBlur:r},n)))};p.propTypes={onChange:n.default.func,value:n.default.string,attributes:n.default.object,cssClassPrefix:n.default.string,onFocus:n.default.func,onBlur:n.default.func},p.defaultProps={attributes:{}};const E=e=>{const t=e.options,a=e.value,s=e.onChange,n=e.attributes,o=e.placeholder,i=e.cssClassPrefix,r=e.onFocus,c=e.onBlur,d=l.default.createRef();let f=t.map((e=>l.default.createElement("option",{key:e.value,value:e.label})));return l.default.createElement("div",{className:i+"easy-edit-component-wrapper"},l.default.createElement("input",u({autoFocus:n.autoFocus||!0,value:a||void 0,onChange:s,onFocus:r,onBlur:c,placeholder:o,autoComplete:n.autoComplete||"off"},n,{list:d})),l.default.createElement("datalist",{id:d},f))};E.propTypes={onChange:n.default.func,value:n.default.oneOfType([n.default.string,n.default.number]),attributes:n.default.object,cssClassPrefix:n.default.string,onFocus:n.default.func,onBlur:n.default.func},E.defaultProps={attributes:{}};class C extends t.Component{constructor(e){super(e),this.state={value:e.value},this.setValue=this.setValue.bind(this),this.onBlur=this.onBlur.bind(this)}setValue(e){this.setState({value:e},(()=>this.props.setValue(e)))}onBlur(){this.props.onBlur()}render(){const e=this.state.value,t=this.props,a=t.children,s=t.cssClassPrefix,n=l.default.cloneElement(l.default.Children.only(a),{setParentValue:this.setValue,onBlur:this.onBlur,value:e});return l.default.createElement("div",{className:s+"easy-edit-component-wrapper"},n)}}class v extends l.default.Component{constructor(e){super(e),o(this,"onKeyDown",(e=>{const t=this.props,a=t.type,s=t.disableAutoSubmit;t.disableAutoCancel||27!==e.keyCode||this._onCancel(),s||(13===e.keyCode&&a!==m.TEXTAREA||13===e.keyCode&&e.ctrlKey&&a===m.TEXTAREA)&&this._onSave()})),o(this,"_onSave",(()=>{const e=this.props,t=e.onSave,a=e.onValidate,s=this.state.tempValue;a(s)?this.setState({editing:!1,value:s,isValid:!0,hover:!1},(()=>t(this.state.value))):this.setState({isValid:!1})})),o(this,"_onBlur",(()=>{const e=this.props,t=e.onBlur,a=e.saveOnBlur,s=e.cancelOnBlur;a&&s&&console.warn("EasyEdit: You've set both `saveOnBlur` and `cancelOnBlur` to true, please set either one to false."),a?(t(this.state.tempValue),this._onSave()):s?this._onCancel():t(this.state.tempValue)})),o(this,"_onFocus",(()=>{const e=this.props.onFocus;e&&e(this.state.tempValue)})),o(this,"_onCancel",(()=>{const e=this.props.onCancel,t=this.state.value;this.setState({editing:!1,tempValue:t,hover:!1},(()=>e()))})),o(this,"_onDelete",(()=>{const e=this.props.onDelete,t=this.state.value;this.setState({editing:!1,tempValue:t,hover:!1,isHidden:!0},(()=>e()))})),o(this,"onChange",(e=>{this.setState({tempValue:e.target?e.target.value:e})})),o(this,"onCheckboxChange",(e=>{const t=this.props.options;let a=this.state.tempValue||[];e.target.checked&&!a.includes(e.target.value)?a.push(e.target.value):a.splice(a.indexOf(e.target.value),1);let s=t.map((e=>e.value));a=a.filter((e=>s.includes(e))),this.setState({tempValue:a})})),o(this,"onClick",(()=>{this.props.allowEdit&&this.setState({editing:!0})})),o(this,"hoverOn",(()=>{this.props.allowEdit&&this.setState({hover:!0})})),o(this,"hoverOff",(()=>{this.setState({hover:!1})})),this.state={editing:e.editMode||!1,hover:!1,value:e.value,tempValue:e.value,isValid:!0,isHidden:!1},this.saveButton=l.default.createRef(),this.cancelButton=l.default.createRef(),this.deleteButton=l.default.createRef()}componentDidUpdate(e){this.props.value!==e.value&&this.setState({tempValue:this.props.value,value:this.props.value}),this.props.editMode===e.editMode||this.props.editMode||this._onSave()}renderInput(){const e=this.props,t=e.type,a=e.options,s=e.placeholder,n=e.attributes,o=e.editComponent,u=e.cssClassPrefix,v=this.state.editing;if(this.cullAttributes(),l.default.isValidElement(o))return l.default.createElement(C,{setValue:this.onChange,onBlur:this._onBlur,value:this.state.tempValue,cssClassPrefix:u},o);switch(t){case m.TEXT:case m.PASSWORD:case m.EMAIL:case m.NUMBER:case m.DATE:case m.DATETIME_LOCAL:case m.TIME:case m.MONTH:case m.WEEK:case m.RANGE:return l.default.createElement(c,{value:v?this.state.tempValue:this.state.value,placeholder:s,onChange:this.onChange,onFocus:this._onFocus(),onBlur:this._onBlur,type:t,attributes:n,cssClassPrefix:u});case m.COLOR:return l.default.createElement(p,{value:v?this.state.tempValue:this.state.value,onChange:this.onChange,onFocus:this._onFocus(),onBlur:this._onBlur,attributes:n,cssClassPrefix:u});case m.TEXTAREA:return l.default.createElement(d,{value:v?this.state.tempValue:this.state.value,placeholder:s,onChange:this.onChange,onFocus:this._onFocus(),onBlur:this._onBlur,attributes:n,cssClassPrefix:u});case m.SELECT:return l.default.createElement(r,{value:v?this.state.tempValue:this.state.value,onChange:this.onChange,onFocus:this._onFocus(),onBlur:this._onBlur,options:a,placeholder:s===i.DEFAULT_PLACEHOLDER?i.DEFAULT_SELECT_PLACEHOLDER:s,attributes:n,cssClassPrefix:u});case m.RADIO:return l.default.createElement(f,{value:v?this.state.tempValue:this.state.value,onChange:this.onChange,onFocus:this._onFocus(),onBlur:this._onBlur,options:a,attributes:n,cssClassPrefix:u});case m.CHECKBOX:return l.default.createElement(h,{value:v?this.state.tempValue:this.state.value,onChange:this.onCheckboxChange,onFocus:this._onFocus(),onBlur:this._onBlur,options:a,attributes:n,cssClassPrefix:u});case m.DATALIST:return l.default.createElement(E,{value:v?this.state.tempValue:this.state.value,onChange:this.onChange,onFocus:this._onFocus(),onBlur:this._onBlur,options:a,attributes:n,cssClassPrefix:u});default:throw new Error(i.ERROR_UNSUPPORTED_TYPE)}}renderButtons(){const e=this.props,t=e.saveOnBlur,a=e.saveButtonLabel,s=e.saveButtonStyle,n=e.cancelButtonLabel,o=e.cancelButtonStyle,u=e.deleteButtonLabel,r=e.deleteButtonStyle,c=e.cssClassPrefix,d=e.hideSaveButton,f=e.hideCancelButton,h=e.hideDeleteButton;return l.default.createElement("div",{className:c+"easy-edit-button-wrapper"},!d&&v.generateButton(this.saveButton,this._onSave,a,null===s?c+i.DEFAULT_BUTTON_CSS_CLASS:s,"save",t),!f&&v.generateButton(this.cancelButton,this._onCancel,n,null===o?c+i.DEFAULT_BUTTON_CSS_CLASS:o,"cancel",t),!h&&v.generateButton(this.deleteButton,this._onDelete,u,null===r?c+i.DEFAULT_BUTTON_CSS_CLASS:r,"delete",t))}renderValidationMessage(){const e=this.props,t=e.validationMessage,a=e.cssClassPrefix;if(!this.state.isValid)return l.default.createElement("div",{className:a+"easy-edit-validation-error"},t)}renderInstructions(){const e=this.props,t=e.instructions,a=e.cssClassPrefix,s=e.editMode;if((this.state.editing||s)&&null!==t)return l.default.createElement("div",{className:a+"easy-edit-instructions"},t)}setCssClasses(e){const t=this.props,a=t.viewAttributes,s=t.cssClassPrefix,l=t.onHoverCssClass;return a.class&&(e+=" "+a.class),a.className&&(e+=" "+a.className),this.props.allowEdit?this.state.hover?l===i.DEFAULT_ON_HOVER_CSS_CLASS?s+"easy-edit-hover-on "+e:l+" "+e:e:s+"easy-edit-not-allowed "+e}static generateButton(e,t,a,s,n,o){return o?"":l.default.createElement("button",{ref:e,onClick:t,className:s,name:n},a)}renderPlaceholder(){const e=this.props,t=e.type,a=e.placeholder,s=e.displayComponent,n=e.viewAttributes,o=e.cssClassPrefix;this.cullAttributes();const r=o+"easy-edit-wrapper";if(l.default.isValidElement(s))return l.default.createElement("div",u({},n,{className:this.setCssClasses(r),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.state.value?l.default.cloneElement(s,{value:this.state.value}):a);switch(t){case m.TEXT:case m.DATALIST:case m.EMAIL:case m.TEXTAREA:case m.NUMBER:case m.DATE:case m.DATETIME_LOCAL:case m.TIME:case m.MONTH:case m.WEEK:case m.RANGE:case m.PASSWORD:return l.default.createElement("div",u({},n,{className:this.setCssClasses(r),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.state.value?t===m.PASSWORD?"••••••••":this.state.value:a);case m.RADIO:case m.CHECKBOX:case m.SELECT:return l.default.createElement("div",u({},n,{className:this.setCssClasses(r),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.renderComplexView());case m.COLOR:return l.default.createElement("input",u({},n,{type:t,value:this.state.value,onClick:this.onClick,readOnly:!0}));default:throw new Error(i.ERROR_UNSUPPORTED_TYPE)}}renderComplexView(){const e=this.props,t=e.placeholder,a=e.options,s=e.type;if(null===this.state.value||0===this.state.value.length)return t;let l;return l=m.CHECKBOX===s?a.filter((e=>this.state.value.includes(e.value))):a.filter((e=>this.state.value===e.value)),0!==l.length?l.map((e=>e.label)).join(", "):this.state.value}cullAttributes(){const e=this.props.attributes;delete e.type,delete e.onChange,delete e.value}render(){const e=this.props,t=e.cssClassPrefix,a=e.buttonsPosition,s=e.editMode;return this.state.isHidden?"":this.state.editing||s?l.default.createElement("div",{className:t+"easy-edit-inline-wrapper",tabIndex:"0",onKeyDown:e=>this.onKeyDown(e)},a===i.POSITION_BEFORE&&this.renderButtons(),this.renderInput(),a===i.POSITION_AFTER&&this.renderButtons(),this.renderInstructions(),this.renderValidationMessage()):this.renderPlaceholder()}}const m={COLOR:"color",CHECKBOX:"checkbox",DATALIST:"datalist",DATE:"date",DATETIME_LOCAL:"datetime-local",EMAIL:"email",MONTH:"month",NUMBER:"number",PASSWORD:"password",RADIO:"radio",RANGE:"range",SELECT:"select",TEXT:"text",TEXTAREA:"textarea",TIME:"time",WEEK:"week"};Object.freeze(m),v.propTypes={type:n.default.oneOf(["text","number","color","textarea","date","datetime-local","email","password","time","month","week","radio","checkbox","select","range","datalist"]).isRequired,value:n.default.oneOfType([n.default.string,n.default.number,n.default.array,n.default.object]),options:n.default.array,saveButtonLabel:n.default.oneOfType([n.default.string,n.default.element]),saveButtonStyle:n.default.string,cancelButtonLabel:n.default.oneOfType([n.default.string,n.default.element]),cancelButtonStyle:n.default.string,deleteButtonLabel:n.default.oneOfType([n.default.string,n.default.element]),deleteButtonStyle:n.default.string,buttonsPosition:n.default.oneOf(["after","before"]),placeholder:n.default.string,onCancel:n.default.func,onDelete:n.default.func,onValidate:n.default.func,onFocus:n.default.func,onBlur:n.default.func,onSave:n.default.func.isRequired,validationMessage:n.default.string,allowEdit:n.default.bool,attributes:n.default.object,viewAttributes:n.default.object,instructions:n.default.string,editComponent:n.default.element,displayComponent:n.default.element,disableAutoSubmit:n.default.bool,disableAutoCancel:n.default.bool,cssClassPrefix:n.default.string,hideSaveButton:n.default.bool,hideCancelButton:n.default.bool,hideDeleteButton:n.default.bool,onHoverCssClass:n.default.string,saveOnBlur:n.default.bool,cancelOnBlur:n.default.bool,editMode:n.default.bool},v.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,buttonsPosition:i.POSITION_AFTER,placeholder:i.DEFAULT_PLACEHOLDER,allowEdit:!0,onCancel:()=>{},onDelete:()=>{},onfocus:()=>{},onBlur:()=>{},onValidate:e=>!0,validationMessage:i.FAILED_VALIDATION_MESSAGE,attributes:{},viewAttributes:{},instructions:null,editComponent:null,placeholderComponent:null,disableAutoSubmit:!1,disableAutoCancel:!1,cssClassPrefix:"",hideSaveButton:!1,hideCancelButton:!1,hideDeleteButton:!0,onHoverCssClass:i.DEFAULT_ON_HOVER_CSS_CLASS,saveOnBlur:!1,cancelOnBlur:!1,editMode:!1},e.Types=m,e.default=v,Object.defineProperty(e,"__esModule",{value:!0})}));
|