react-easy-edit2
Version:
A react library for inline editing components
2 lines (1 loc) • 20.4 kB
JavaScript
!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),o=n(a);function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,E(n.key),n)}}function r(e,t,a){return t&&u(e.prototype,t),a&&u(e,a),Object.defineProperty(e,"prototype",{writable:!1}),e}function i(e,t,a){return(t=E(t))in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function c(){return c=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},c.apply(this,arguments)}function d(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&p(e,t)}function f(e){return f=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},f(e)}function p(e,t){return p=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},p(e,t)}function h(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function v(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,n=f(e);if(t){var l=f(this).constructor;a=Reflect.construct(n,arguments,l)}else a=n.apply(this,arguments);return function(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return h(e)}(this,a)}}function E(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var a=e[Symbol.toPrimitive];if(void 0!==a){var n=a.call(e,t||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}!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}");var C=function(e){var t=e.options,a=e.value,n=e.onChange,o=e.attributes,s=e.cssClassPrefix,u=e.onFocus,r=e.onBlur;a=a||[];var i=t.map((function(e){return l.default.createElement("label",{key:e.value,className:s+"easy-edit-checkbox-label"},l.default.createElement("input",c({},o,{type:"checkbox",value:e.value,key:e.value,onChange:n,onFocus:u,onBlur:r,checked:a.includes(e.value)})),e.label)}));return l.default.createElement("div",null,i)};C.propTypes={onChange:o.default.func,options:o.default.array.isRequired,value:o.default.array,attributes:o.default.object,cssClassPrefix:o.default.string,onFocus:o.default.func,onBlur:o.default.func},C.defaultProps={attributes:{}};var y=function(e){var t=e.value,a=void 0===t?"":t,n=e.onChange,o=e.attributes,s=e.cssClassPrefix,u=e.onFocus,r=e.onBlur;return l.default.createElement("div",{className:s+"easy-edit-component-wrapper"},l.default.createElement("input",c({type:"color",defaultValue:a,onChange:n,onFocus:u,onBlur:r},o)))};y.propTypes={onChange:o.default.func,value:o.default.string,attributes:o.default.object,cssClassPrefix:o.default.string,onFocus:o.default.func,onBlur:o.default.func},y.defaultProps={attributes:{}};var m=function(e){d(a,e);var t=v(a);function a(e){var n;return s(this,a),(n=t.call(this,e)).state={value:e.value},n.setValue=n.setValue.bind(h(n)),n}return r(a,[{key:"setValue",value:function(e){var t=this;this.setState({value:e},(function(){return t.props.setValue(e)}))}},{key:"render",value:function(){var e=this.state.value,t=this.props,a=t.children,n=t.cssClassPrefix,o=t.onBlur,s=t.onFocus,u=l.default.cloneElement(l.default.Children.only(a),{setParentValue:this.setValue,onBlur:o,onFocus:s,value:e});return l.default.createElement("div",{className:n+"easy-edit-component-wrapper"},u)}}]),a}(t.Component),b=function(e){var t=e.options,a=e.value,n=e.onChange,o=e.attributes,s=e.placeholder,u=e.cssClassPrefix,r=e.onFocus,i=e.onBlur,d=l.default.createRef(),f=t.map((function(e){return l.default.createElement("option",{key:e.value,value:e.label})}));return l.default.createElement("div",{className:u+"easy-edit-component-wrapper"},l.default.createElement("input",c({autoFocus:o.autoFocus||!0,value:a||void 0,onChange:n,onFocus:r,onBlur:i,placeholder:s,autoComplete:o.autoComplete||"off"},o,{list:d})),l.default.createElement("datalist",{id:d},f))};b.propTypes={onChange:o.default.func,value:o.default.oneOfType([o.default.string,o.default.number]),attributes:o.default.object,cssClassPrefix:o.default.string,onFocus:o.default.func,onBlur:o.default.func},b.defaultProps={attributes:{}};var T=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"}),O=function(e){var t=e.options,a=e.value,n=e.onChange,o=e.placeholder,s=e.attributes,u=e.cssClassPrefix,r=e.onFocus,i=e.onBlur;return l.default.createElement("div",{className:u+"easy-edit-component-wrapper"},l.default.createElement("select",c({value:a||"",onChange:n,onFocus:r,onBlur:i},s),l.default.createElement("option",{key:"",value:"",disabled:"disabled"},o),t.map((function(e){return l.default.createElement("option",{value:e.value,key:e.value},e.label)}))))};O.propTypes={options:o.default.array.isRequired,onChange:o.default.func,value:o.default.oneOfType([o.default.string,o.default.number]),placeholder:o.default.oneOfType([o.default.string,o.default.element]),attributes:o.default.object,cssClassPrefix:o.default.string,onFocus:o.default.func,onBlur:o.default.func},O.defaultProps={attributes:{},placeholder:T.DEFAULT_SELECT_PLACEHOLDER};var B=function(e){var t=e.type,a=e.value,n=e.placeholder,o=e.onChange,s=e.attributes,u=e.cssClassPrefix,r=e.onFocus,i=e.onBlur;return l.default.createElement("div",{className:u+"easy-edit-component-wrapper"},l.default.createElement("input",c({autoFocus:s.autoFocus||!0,type:t,value:a||void 0,onChange:o,onFocus:r,onBlur:i,placeholder:s.placeholder||n,autoComplete:s.autoComplete||"off"},s)))};B.propTypes={type:o.default.string.isRequired,onChange:o.default.func,value:o.default.string,placeholder:o.default.oneOfType([o.default.string,o.default.element]),attributes:o.default.object,cssClassPrefix:o.default.string,onFocus:o.default.func,onBlur:o.default.func},B.defaultProps={attributes:{},placeholder:T.DEFAULT_PLACEHOLDER,onfocus:function(){}};var g=function(e){var t=e.value,a=e.placeholder,n=e.onChange,o=e.attributes,s=e.cssClassPrefix,u=e.onFocus,r=e.onBlur;return l.default.createElement("div",{className:s+"easy-edit-component-wrapper"},l.default.createElement("textarea",c({autoFocus:o.autoFocus||!0,value:t,onChange:n,onFocus:u,onBlur:r,placeholder:a},o,{className:void 0!==o.className?o.className+" easy-edit-textarea":"easy-edit-textarea"})))};g.propTypes={onChange:o.default.func,value:o.default.string,placeholder:o.default.oneOfType([o.default.string,o.default.element]),attributes:o.default.object,cssClassPrefix:o.default.string,onBlur:o.default.func,onFocus:o.default.func},g.defaultProps={attributes:{},placeholder:T.DEFAULT_PLACEHOLDER};var _=function(e){var t=e.options,a=e.value,n=e.onChange,o=e.attributes,s=e.cssClassPrefix,u=e.onFocus,r=e.onBlur,i=t.map((function(e){return l.default.createElement("label",{key:e.value,className:s+"easy-edit-radio-label"},l.default.createElement("input",c({type:"radio",value:e.value,onChange:n,onFocus:u,onBlur:r,checked:e.value===a},o)),e.label)}));return l.default.createElement("div",null,i)};_.propTypes={onChange:o.default.func,value:o.default.oneOfType([o.default.string,o.default.number]),attributes:o.default.object,cssClassPrefix:o.default.string,onFocus:o.default.func,onBlur:o.default.func},_.defaultProps={attributes:{}};var A=function(e){d(a,e);var t=v(a);function a(e){var n;return s(this,a),i(h(n=t.call(this,e)),"onKeyDown",(function(e){var t=n.props,a=t.type,l=t.disableAutoSubmit;t.disableAutoCancel||27!==e.keyCode||n._onCancel(),l||(13===e.keyCode&&a!==L.TEXTAREA||13===e.keyCode&&e.ctrlKey&&a===L.TEXTAREA)&&n._onSave()})),i(h(n),"_onSave",(function(){var e=n.props,t=e.onSave,a=e.onValidate,l=n.state.tempValue;a(l)?n.setState({editing:!1,value:l,isValid:!0,hover:!1},(function(){return t(n.state.value)})):n.setState({isValid:!1})})),i(h(n),"_onBlur",(function(){var e=n.props,t=e.onBlur,a=e.saveOnBlur,l=e.cancelOnBlur;a&&l&&console.warn("EasyEdit: You've set both `saveOnBlur` and `cancelOnBlur` to true, please set either one to false."),a?(t(n.state.tempValue),n._onSave()):l?n._onCancel():t(n.state.tempValue)})),i(h(n),"_onFocus",(function(){var e=n.props.onFocus;e&&e(n.state.tempValue)})),i(h(n),"_onCancel",(function(){var e=n.props.onCancel,t=n.state.value;n.setState({editing:!1,tempValue:t,hover:!1},(function(){return e()}))})),i(h(n),"_onDelete",(function(){var e=n.props.onDelete,t=n.state.value;n.setState({editing:!1,tempValue:t,hover:!1,isHidden:!0},(function(){return e()}))})),i(h(n),"onChange",(function(e){n.setState({tempValue:e.target?e.target.value:e})})),i(h(n),"onCheckboxChange",(function(e){var t=n.props.options,a=n.state.tempValue||[];e.target.checked&&!a.includes(e.target.value)?a.push(e.target.value):a.splice(a.indexOf(e.target.value),1);var l=t.map((function(e){return e.value}));a=a.filter((function(e){return l.includes(e)})),n.setState({tempValue:a})})),i(h(n),"onClick",(function(){n.props.allowEdit&&n.setState({editing:!0})})),i(h(n),"hoverOn",(function(){n.props.allowEdit&&n.setState({hover:!0})})),i(h(n),"hoverOff",(function(){n.setState({hover:!1})})),n.state={editing:e.editMode||!1,hover:!1,value:e.value,tempValue:e.value,isValid:!0,isHidden:!1},n.saveButton=l.default.createRef(),n.cancelButton=l.default.createRef(),n.deleteButton=l.default.createRef(),n}return r(a,[{key:"isNullish",value:function(e){return null==e}},{key:"componentDidUpdate",value:function(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()}},{key:"renderInput",value:function(){var e=this.props,t=e.type,a=e.options,n=e.placeholder,o=e.attributes,s=e.editComponent,u=e.cssClassPrefix,r=this.state.editing;if(this.cullAttributes(),l.default.isValidElement(s))return l.default.createElement(m,{setValue:this.onChange,onBlur:this._onBlur,onFocus:this._onFocus,value:this.state.tempValue,cssClassPrefix:u},s);switch(t){case L.TEXT:case L.FILE:case L.PASSWORD:case L.EMAIL:case L.NUMBER:case L.DATE:case L.DATETIME_LOCAL:case L.TIME:case L.MONTH:case L.WEEK:case L.RANGE:return l.default.createElement(B,{value:r?this.state.tempValue:this.state.value,placeholder:n,onChange:this.onChange,onFocus:this._onFocus(),onBlur:this._onBlur,type:t,attributes:o,cssClassPrefix:u});case L.COLOR:return l.default.createElement(y,{value:r?this.state.tempValue:this.state.value,onChange:this.onChange,onFocus:this._onFocus(),onBlur:this._onBlur,attributes:o,cssClassPrefix:u});case L.TEXTAREA:return l.default.createElement(g,{value:r?this.state.tempValue:this.state.value,placeholder:n,onChange:this.onChange,onFocus:this._onFocus(),onBlur:this._onBlur,attributes:o,cssClassPrefix:u});case L.SELECT:return l.default.createElement(O,{value:r?this.state.tempValue:this.state.value,onChange:this.onChange,onFocus:this._onFocus(),onBlur:this._onBlur,options:a,placeholder:n===T.DEFAULT_PLACEHOLDER?T.DEFAULT_SELECT_PLACEHOLDER:n,attributes:o,cssClassPrefix:u});case L.RADIO:return l.default.createElement(_,{value:r?this.state.tempValue:this.state.value,onChange:this.onChange,onFocus:this._onFocus(),onBlur:this._onBlur,options:a,attributes:o,cssClassPrefix:u});case L.CHECKBOX:return l.default.createElement(C,{value:r?this.state.tempValue:this.state.value,onChange:this.onCheckboxChange,onFocus:this._onFocus(),onBlur:this._onBlur,options:a,attributes:o,cssClassPrefix:u});case L.DATALIST:return l.default.createElement(b,{value:r?this.state.tempValue:this.state.value,onChange:this.onChange,onFocus:this._onFocus(),onBlur:this._onBlur,options:a,attributes:o,cssClassPrefix:u});default:throw new Error(T.ERROR_UNSUPPORTED_TYPE)}}},{key:"renderButtons",value:function(){var e=this.props,t=e.saveOnBlur,n=e.saveButtonLabel,o=e.saveButtonStyle,s=e.cancelButtonLabel,u=e.cancelButtonStyle,r=e.deleteButtonLabel,i=e.deleteButtonStyle,c=e.cssClassPrefix,d=e.hideSaveButton,f=e.hideCancelButton,p=e.hideDeleteButton;return l.default.createElement("div",{className:c+"easy-edit-button-wrapper"},!d&&a.generateButton(this.saveButton,this._onSave,n,null===o?c+T.DEFAULT_BUTTON_CSS_CLASS:o,"save",t),!f&&a.generateButton(this.cancelButton,this._onCancel,s,null===u?c+T.DEFAULT_BUTTON_CSS_CLASS:u,"cancel",t),!p&&a.generateButton(this.deleteButton,this._onDelete,r,null===i?c+T.DEFAULT_BUTTON_CSS_CLASS:i,"delete",t))}},{key:"renderValidationMessage",value:function(){var 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)}},{key:"renderInstructions",value:function(){var e=this.props,t=e.instructions,a=e.cssClassPrefix,n=e.editMode;if((this.state.editing||n)&&null!==t)return l.default.createElement("div",{className:a+"easy-edit-instructions"},t)}},{key:"setCssClasses",value:function(e){var t=this.props,a=t.viewAttributes,n=t.cssClassPrefix,l=t.onHoverCssClass;return a.class&&(e+=" "+a.class),a.className&&(e+=" "+a.className),this.props.allowEdit?this.state.hover?l===T.DEFAULT_ON_HOVER_CSS_CLASS?n+"easy-edit-hover-on "+e:l+" "+e:e:n+"easy-edit-not-allowed "+e}},{key:"renderPlaceholder",value:function(){var e=this.props,t=e.type,a=e.placeholder,n=e.displayComponent,o=e.viewAttributes,s=e.cssClassPrefix;this.cullAttributes();var u=s+"easy-edit-wrapper";if(l.default.isValidElement(n))return l.default.createElement("div",c({},o,{className:this.setCssClasses(u),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.isNullish(this.state.value)?a:l.default.cloneElement(n,{value:this.state.value}));switch(t){case L.TEXT:case L.FILE:case L.DATALIST:case L.EMAIL:case L.TEXTAREA:case L.NUMBER:case L.DATE:case L.DATETIME_LOCAL:case L.TIME:case L.MONTH:case L.WEEK:case L.RANGE:case L.PASSWORD:return l.default.createElement("div",c({},o,{className:this.setCssClasses(u),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.isNullish(this.state.value)?a:t===L.PASSWORD?"••••••••":this.state.value);case L.RADIO:case L.CHECKBOX:case L.SELECT:return l.default.createElement("div",c({},o,{className:this.setCssClasses(u),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.renderComplexView());case L.COLOR:return l.default.createElement("input",c({},o,{type:t,value:this.state.value,onClick:this.onClick,readOnly:!0}));default:throw new Error(T.ERROR_UNSUPPORTED_TYPE)}}},{key:"renderComplexView",value:function(){var e,t=this,a=this.props,n=a.placeholder,l=a.options,o=a.type;return this.isNullish(this.state.value)||0===this.state.value.length?n:0!==(e=L.CHECKBOX===o?l.filter((function(e){return t.state.value.includes(e.value)})):l.filter((function(e){return t.state.value===e.value}))).length?e.map((function(e){return e.label})).join(", "):this.state.value}},{key:"cullAttributes",value:function(){var e=this.props.attributes;delete e.type,delete e.onChange,delete e.value}},{key:"render",value:function(){var e=this,t=this.props,a=t.cssClassPrefix,n=t.buttonsPosition,o=t.editMode;return this.state.isHidden?"":this.state.editing||o?l.default.createElement("div",{className:a+"easy-edit-inline-wrapper",tabIndex:"0",onKeyDown:function(t){return e.onKeyDown(t)}},n===T.POSITION_BEFORE&&this.renderButtons(),this.renderInput(),n===T.POSITION_AFTER&&this.renderButtons(),this.renderInstructions(),this.renderValidationMessage()):this.renderPlaceholder()}}],[{key:"generateButton",value:function(e,t,a,n,o,s){return s?"":l.default.createElement("button",{ref:e,onClick:t,className:n,name:o},a)}}]),a}(l.default.Component),L={COLOR:"color",CHECKBOX:"checkbox",DATALIST:"datalist",DATE:"date",DATETIME_LOCAL:"datetime-local",EMAIL:"email",FILE:"file",MONTH:"month",NUMBER:"number",PASSWORD:"password",RADIO:"radio",RANGE:"range",SELECT:"select",TEXT:"text",TEXTAREA:"textarea",TIME:"time",WEEK:"week"};Object.freeze(L),A.propTypes={type:o.default.oneOf(["text","number","color","textarea","date","datetime-local","email","password","time","month","week","radio","checkbox","select","range","datalist","file"]).isRequired,value:o.default.oneOfType([o.default.string,o.default.number,o.default.array,o.default.object]),options:o.default.array,saveButtonLabel:o.default.oneOfType([o.default.string,o.default.element]),saveButtonStyle:o.default.string,cancelButtonLabel:o.default.oneOfType([o.default.string,o.default.element]),cancelButtonStyle:o.default.string,deleteButtonLabel:o.default.oneOfType([o.default.string,o.default.element]),deleteButtonStyle:o.default.string,buttonsPosition:o.default.oneOf(["after","before"]),placeholder:o.default.oneOfType([o.default.string,o.default.element]),onCancel:o.default.func,onDelete:o.default.func,onValidate:o.default.func,onFocus:o.default.func,onBlur:o.default.func,onSave:o.default.func.isRequired,validationMessage:o.default.string,allowEdit:o.default.bool,attributes:o.default.object,viewAttributes:o.default.object,instructions:o.default.string,editComponent:o.default.element,displayComponent:o.default.element,disableAutoSubmit:o.default.bool,disableAutoCancel:o.default.bool,cssClassPrefix:o.default.string,hideSaveButton:o.default.bool,hideCancelButton:o.default.bool,hideDeleteButton:o.default.bool,onHoverCssClass:o.default.string,saveOnBlur:o.default.bool,cancelOnBlur:o.default.bool,editMode:o.default.bool},A.defaultProps={value:null,saveButtonLabel:T.DEFAULT_SAVE_BUTTON_LABEL,saveButtonStyle:null,cancelButtonLabel:T.DEFAULT_CANCEL_BUTTON_LABEL,cancelButtonStyle:null,deleteButtonLabel:T.DEFAULT_DELETE_BUTTON_LABEL,deleteButtonStyle:null,buttonsPosition:T.POSITION_AFTER,placeholder:T.DEFAULT_PLACEHOLDER,allowEdit:!0,onCancel:function(){},onDelete:function(){},onfocus:function(){},onBlur:function(){},onValidate:function(e){return!0},validationMessage:T.FAILED_VALIDATION_MESSAGE,attributes:{},viewAttributes:{},instructions:null,editComponent:null,placeholderComponent:null,disableAutoSubmit:!1,disableAutoCancel:!1,cssClassPrefix:"",hideSaveButton:!1,hideCancelButton:!1,hideDeleteButton:!0,onHoverCssClass:T.DEFAULT_ON_HOVER_CSS_CLASS,saveOnBlur:!1,cancelOnBlur:!1,editMode:!1},e.Types=L,e.default=A,Object.defineProperty(e,"__esModule",{value:!0})}));