react-easy-edit - npm Package Compare versions

Comparing version 1.9.0 to 1.10.0

build/react-easy-edit.min.js

@@ -1,1 +0,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=e||self)["react-easy-edit"]={},e.React,e.PropTypes)}(this,function(e,t,a){"use strict";var c="default"in t?t.default:t;function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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,n.key,n)}}function r(e,t,a){return t&&s(e.prototype,t),a&&s(e,a),e}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 p(){return(p=Object.assign||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}).apply(this,arguments)}function l(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}}),t&&i(e,t)}function u(e){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function i(e,t){return(i=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function d(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function h(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?d(e):t}a=a&&a.hasOwnProperty("default")?a.default:a;!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===a&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.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}");function v(e){var t=e.options,a=e.value,n=e.onChange,s=e.placeholder,r=e.attributes,o=e.cssClassPrefix,l=e.onBlur;return c.createElement("div",{className:o+"easy-edit-component-wrapper"},c.createElement("select",p({value:a||"",onChange:n,onBlur:l},r),c.createElement("option",{key:"",value:"",disabled:"disabled"},s),t.map(function(e){return c.createElement("option",{value:e.value,key:e.value},e.label)})))}var f=Object.freeze({DEFAULT_PLACEHOLDER:"Click to edit",DEFAULT_SELECT_PLACEHOLDER:"Select ...",DEFAULT_SAVE_BUTTON_LABEL:"Save",DEFAULT_CANCEL_BUTTON_LABEL:"Cancel",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"});v.propTypes={options:a.array.isRequired,onChange:a.func,value:a.oneOfType([a.string,a.number]),placeholder:a.string,attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},v.defaultProps={attributes:{},placeholder:f.DEFAULT_SELECT_PLACEHOLDER};function E(e){var t=e.type,a=e.value,n=e.placeholder,s=e.onChange,r=e.attributes,o=e.cssClassPrefix,l=e.onBlur;return c.createElement("div",{className:o+"easy-edit-component-wrapper"},c.createElement("input",p({autoFocus:r.autoFocus||!0,type:t,value:a||void 0,onChange:s,onBlur:l,placeholder:r.placeholder||n,autoComplete:r.autoComplete||"off"},r)))}E.propTypes={type:a.string.isRequired,onChange:a.func,value:a.string,placeholder:a.string,attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},E.defaultProps={attributes:{},placeholder:f.DEFAULT_PLACEHOLDER};function C(e){var t=e.value,a=e.placeholder,n=e.onChange,s=e.attributes,r=e.cssClassPrefix,o=e.onBlur;return c.createElement("div",{className:r+"easy-edit-component-wrapper"},c.createElement("textarea",p({autoFocus:s.autoFocus||!0,value:t,onChange:n,onBlur:o,placeholder:a},s,{className:void 0!==s.className?s.className+" easy-edit-textarea":"easy-edit-textarea"})))}C.propTypes={onChange:a.func,value:a.string,placeholder:a.string,attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},C.defaultProps={attributes:{},placeholder:f.DEFAULT_PLACEHOLDER};function m(e){var t=e.options,a=e.value,n=e.onChange,s=e.attributes,r=e.cssClassPrefix,o=e.onBlur,l=t.map(function(e){return c.createElement("label",{key:e.value,className:r+"easy-edit-radio-label"},c.createElement("input",p({type:"radio",value:e.value,onChange:n,onBlur:o,checked:e.value===a},s)),e.label)});return c.createElement("div",null,l)}m.propTypes={onChange:a.func,value:a.oneOfType([a.string,a.number]),attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},m.defaultProps={attributes:{}};function y(e){var t=e.options,a=e.value,n=e.onChange,s=e.attributes,r=e.cssClassPrefix,o=e.onBlur;a=a||[];var l=t.map(function(e){return c.createElement("label",{key:e.value,className:r+"easy-edit-checkbox-label"},c.createElement("input",p({},s,{type:"checkbox",value:e.value,key:e.value,onChange:n,onBlur:o,checked:a.includes(e.value)})),e.label)});return c.createElement("div",null,l)}y.propTypes={onChange:a.func,options:a.array.isRequired,value:a.array,attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},y.defaultProps={attributes:{}};function b(e){var t=e.value,a=void 0===t?"":t,n=e.onChange,s=e.attributes,r=e.cssClassPrefix,o=e.onBlur;return c.createElement("div",{className:r+"easy-edit-component-wrapper"},c.createElement("input",p({type:"color",defaultValue:a,onChange:n,onBlur:o},s)))}b.propTypes={onChange:a.func,value:a.string,attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},b.defaultProps={attributes:{}};function T(e){var t=e.options,a=e.value,n=e.onChange,s=e.attributes,r=e.placeholder,o=e.cssClassPrefix,l=e.onBlur,i=c.createRef(),u=t.map(function(e){return c.createElement("option",{key:e.value,value:e.label})});return c.createElement("div",{className:o+"easy-edit-component-wrapper"},c.createElement("input",p({autoFocus:s.autoFocus||!0,value:a||void 0,onChange:n,onBlur:l,placeholder:r,autoComplete:s.autoComplete||"off"},s,{list:i})),c.createElement("datalist",{id:i},u))}T.propTypes={onChange:a.func,value:a.oneOfType([a.string,a.number]),attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},T.defaultProps={attributes:{}};var g=function(){function a(e){var t;return n(this,a),(t=h(this,u(a).call(this,e))).state={value:e.value},t.setValue=t.setValue.bind(d(t)),t}return l(a,t.Component),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,s=c.cloneElement(c.Children.only(a),{setParentValue:this.setValue,value:e});return c.createElement("div",{className:n+"easy-edit-component-wrapper"},s)}}]),a}(),A=function(){function i(e){var s;return n(this,i),o(d(s=h(this,u(i).call(this,e))),"onKeyDown",function(e){var t=s.props,a=t.type,n=t.disableAutoSubmit;t.disableAutoCancel||27!==e.keyCode||s._onCancel(),n||(13===e.keyCode&&a!==O.TEXTAREA||13===e.keyCode&&e.ctrlKey&&a===O.TEXTAREA)&&s._onSave()}),o(d(s),"_onSave",function(){var e=s.props,t=e.onSave,a=e.onValidate,n=s.state.tempValue;a(n)?s.setState({editing:!1,value:n,isValid:!0,hover:!1},function(){return t(s.state.value)}):s.setState({isValid:!1})}),o(d(s),"_onBlur",function(){(0,s.props.onBlur)(s.state.tempValue)}),o(d(s),"_onCancel",function(){var e=s.props.onCancel,t=s.state.value;s.setState({editing:!1,tempValue:t,hover:!1},function(){return e()})}),o(d(s),"onChange",function(e){s.setState({tempValue:e.target?e.target.value:e})}),o(d(s),"onCheckboxChange",function(e){var t=s.props.options,a=s.state.tempValue||[];e.target.checked&&!a.includes(e.target.value)?a.push(e.target.value):a.splice(a.indexOf(e.target.value),1);var n=t.map(function(e){return e.value});a=a.filter(function(e){return n.includes(e)}),s.setState({tempValue:a})}),o(d(s),"onClick",function(){s.props.allowEdit&&s.setState({editing:!0})}),o(d(s),"hoverOn",function(){s.props.allowEdit&&s.setState({hover:!0})}),o(d(s),"hoverOff",function(){s.setState({hover:!1})}),s.state={editing:!1,hover:!1,value:e.value,tempValue:e.value,isValid:!0},s.saveButton=c.createRef(),s.cancelButton=c.createRef(),s}return l(i,c.Component),r(i,[{key:"componentDidUpdate",value:function(e){this.props.value!==e.value&&this.setState({tempValue:this.props.value,value:this.props.value})}},{key:"renderInput",value:function(){var e=this.props,t=e.type,a=e.options,n=e.placeholder,s=e.attributes,r=e.editComponent,o=e.cssClassPrefix,l=this.state.editing;if(this.cullAttributes(),c.isValidElement(r))return c.createElement(g,{setValue:this.onChange,value:this.state.tempValue,cssClassPrefix:o},r);switch(t){case O.TEXT:case O.PASSWORD:case O.EMAIL:case O.NUMBER:case O.DATE:case O.DATETIME_LOCAL:case O.TIME:case O.MONTH:case O.WEEK:case O.RANGE:return c.createElement(E,{value:l?this.state.tempValue:this.state.value,placeholder:n,onChange:this.onChange,onBlur:this._onBlur,type:t,attributes:s,cssClassPrefix:o});case O.COLOR:return c.createElement(b,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,onBlur:this._onBlur,attributes:s,cssClassPrefix:o});case O.TEXTAREA:return c.createElement(C,{value:l?this.state.tempValue:this.state.value,placeholder:n,onChange:this.onChange,onBlur:this._onBlur,attributes:s,cssClassPrefix:o});case O.SELECT:return c.createElement(v,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,onBlur:this._onBlur,options:a,placeholder:n===f.DEFAULT_PLACEHOLDER?f.DEFAULT_SELECT_PLACEHOLDER:n,attributes:s,cssClassPrefix:o});case O.RADIO:return c.createElement(m,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,onBlur:this._onBlur,options:a,attributes:s,cssClassPrefix:o});case O.CHECKBOX:return c.createElement(y,{value:l?this.state.tempValue:this.state.value,onChange:this.onCheckboxChange,onBlur:this._onBlur,options:a,attributes:s,cssClassPrefix:o});case O.DATALIST:return c.createElement(T,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,onBlur:this._onBlur,options:a,attributes:s,cssClassPrefix:o});default:throw new Error(f.ERROR_UNSUPPORTED_TYPE)}}},{key:"renderButtons",value:function(){var e=this.props,t=e.saveButtonLabel,a=e.saveButtonStyle,n=e.cancelButtonLabel,s=e.cancelButtonStyle,r=e.cssClassPrefix,o=e.hideSaveButton,l=e.hideCancelButton;return c.createElement("div",{className:r+"easy-edit-button-wrapper"},!o&&i.generateButton(this.saveButton,this._onSave,t,null===a?r+f.DEFAULT_BUTTON_CSS_CLASS:a,"save"),!l&&i.generateButton(this.cancelButton,this._onCancel,n,null===s?r+f.DEFAULT_BUTTON_CSS_CLASS:s,"cancel"))}},{key:"renderValidationMessage",value:function(){var e=this.props,t=e.validationMessage,a=e.cssClassPrefix;if(!this.state.isValid)return c.createElement("div",{className:a+"easy-edit-validation-error"},t)}},{key:"renderInstructions",value:function(){var e=this.props,t=e.instructions,a=e.cssClassPrefix;if(this.state.editing&&null!==t)return c.createElement("div",{className:a+"easy-edit-instructions"},t)}},{key:"setCssClasses",value:function(e){var t=this.props,a=t.viewAttributes,n=t.cssClassPrefix,s=t.onHoverCssClass;return a.class&&(e+=" "+a.class),a.className&&(e+=" "+a.className),this.props.allowEdit?this.state.hover?s===f.DEFAULT_ON_HOVER_CSS_CLASS?n+"easy-edit-hover-on "+e:s+" "+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,s=e.viewAttributes,r=e.cssClassPrefix;this.cullAttributes();var o=r+"easy-edit-wrapper";if(c.isValidElement(n))return c.createElement("div",p({},s,{className:this.setCssClasses(o),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.state.value?c.cloneElement(n,{value:this.state.value}):a);switch(t){case O.TEXT:case O.DATALIST:case O.EMAIL:case O.TEXTAREA:case O.NUMBER:case O.DATE:case O.DATETIME_LOCAL:case O.TIME:case O.MONTH:case O.WEEK:case O.RANGE:case O.PASSWORD:return c.createElement("div",p({},s,{className:this.setCssClasses(o),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.state.value?t===O.PASSWORD?"••••••••":this.state.value:a);case O.RADIO:case O.CHECKBOX:case O.SELECT:return c.createElement("div",p({},s,{className:this.setCssClasses(o),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.renderComplexView());case O.COLOR:return c.createElement("input",p({},s,{type:t,value:this.state.value,onClick:this.onClick,readOnly:!0}));default:throw new Error(f.ERROR_UNSUPPORTED_TYPE)}}},{key:"renderComplexView",value:function(){var e,t=this,a=this.props,n=a.placeholder,s=a.options,r=a.type;return null===this.state.value||0===this.state.value.length?n:0!==(e=O.CHECKBOX===r?s.filter(function(e){return t.state.value.includes(e.value)}):s.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 t=this,e=this.props,a=e.cssClassPrefix,n=e.buttonsPosition;return this.state.editing?c.createElement("div",{className:a+"easy-edit-inline-wrapper",tabIndex:"0",onKeyDown:function(e){return t.onKeyDown(e)}},n===f.POSITION_BEFORE&&this.renderButtons(),this.renderInput(),n===f.POSITION_AFTER&&this.renderButtons(),this.renderInstructions(),this.renderValidationMessage()):this.renderPlaceholder()}}],[{key:"generateButton",value:function(e,t,a,n,s){return c.createElement("button",{ref:e,onClick:t,className:n,name:s},a)}}]),i}(),O={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(O),A.propTypes={type:a.oneOf(["text","number","color","textarea","date","datetime-local","email","password","time","month","week","radio","checkbox","select","range","datalist"]).isRequired,value:a.oneOfType([a.string,a.number,a.array,a.object]),options:a.array,saveButtonLabel:a.oneOfType([a.string,a.element]),saveButtonStyle:a.string,cancelButtonLabel:a.oneOfType([a.string,a.element]),cancelButtonStyle:a.string,buttonsPosition:a.oneOf(["after","before"]),placeholder:a.string,onCancel:a.func,onValidate:a.func,onBlur:a.func,onSave:a.func.isRequired,validationMessage:a.string,allowEdit:a.bool,attributes:a.object,viewAttributes:a.object,instructions:a.string,editComponent:a.element,displayComponent:a.element,disableAutoSubmit:a.bool,disableAutoCancel:a.bool,cssClassPrefix:a.string,hideSaveButton:a.bool,hideCancelButton:a.bool,onHoverCssClass:a.string},A.defaultProps={value:null,saveButtonLabel:f.DEFAULT_SAVE_BUTTON_LABEL,saveButtonStyle:null,cancelButtonLabel:f.DEFAULT_CANCEL_BUTTON_LABEL,cancelButtonStyle:null,buttonsPosition:f.POSITION_AFTER,placeholder:f.DEFAULT_PLACEHOLDER,allowEdit:!0,onCancel:function(){},onBlur:function(){},onValidate:function(){return!0},validationMessage:f.FAILED_VALIDATION_MESSAGE,attributes:{},viewAttributes:{},instructions:null,editComponent:null,placeholderComponent:null,disableAutoSubmit:!1,disableAutoCancel:!1,cssClassPrefix:"",hideSaveButton:!1,hideCancelButton:!1,onHoverCssClass:f.DEFAULT_ON_HOVER_CSS_CLASS},e.Types=O,e.default=A,Object.defineProperty(e,"__esModule",{value:!0})});
+!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=e||self)["react-easy-edit"]={},e.React,e.PropTypes)}(this,function(e,t,a){"use strict";var c="default"in t?t.default:t;function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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,n.key,n)}}function r(e,t,a){return t&&s(e.prototype,t),a&&s(e,a),e}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 p(){return(p=Object.assign||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}).apply(this,arguments)}function l(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}}),t&&u(e,t)}function i(e){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function d(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function h(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?d(e):t}a=a&&a.hasOwnProperty("default")?a.default:a;!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===a&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.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}");function v(e){var t=e.options,a=e.value,n=e.onChange,s=e.placeholder,r=e.attributes,o=e.cssClassPrefix,l=e.onBlur;return c.createElement("div",{className:o+"easy-edit-component-wrapper"},c.createElement("select",p({value:a||"",onChange:n,onBlur:l},r),c.createElement("option",{key:"",value:"",disabled:"disabled"},s),t.map(function(e){return c.createElement("option",{value:e.value,key:e.value},e.label)})))}var f=Object.freeze({DEFAULT_PLACEHOLDER:"Click to edit",DEFAULT_SELECT_PLACEHOLDER:"Select ...",DEFAULT_SAVE_BUTTON_LABEL:"Save",DEFAULT_CANCEL_BUTTON_LABEL:"Cancel",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"});v.propTypes={options:a.array.isRequired,onChange:a.func,value:a.oneOfType([a.string,a.number]),placeholder:a.string,attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},v.defaultProps={attributes:{},placeholder:f.DEFAULT_SELECT_PLACEHOLDER};function E(e){var t=e.type,a=e.value,n=e.placeholder,s=e.onChange,r=e.attributes,o=e.cssClassPrefix,l=e.onBlur;return c.createElement("div",{className:o+"easy-edit-component-wrapper"},c.createElement("input",p({autoFocus:r.autoFocus||!0,type:t,value:a||void 0,onChange:s,onBlur:l,placeholder:r.placeholder||n,autoComplete:r.autoComplete||"off"},r)))}E.propTypes={type:a.string.isRequired,onChange:a.func,value:a.string,placeholder:a.string,attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},E.defaultProps={attributes:{},placeholder:f.DEFAULT_PLACEHOLDER};function C(e){var t=e.value,a=e.placeholder,n=e.onChange,s=e.attributes,r=e.cssClassPrefix,o=e.onBlur;return c.createElement("div",{className:r+"easy-edit-component-wrapper"},c.createElement("textarea",p({autoFocus:s.autoFocus||!0,value:t,onChange:n,onBlur:o,placeholder:a},s,{className:void 0!==s.className?s.className+" easy-edit-textarea":"easy-edit-textarea"})))}C.propTypes={onChange:a.func,value:a.string,placeholder:a.string,attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},C.defaultProps={attributes:{},placeholder:f.DEFAULT_PLACEHOLDER};function m(e){var t=e.options,a=e.value,n=e.onChange,s=e.attributes,r=e.cssClassPrefix,o=e.onBlur,l=t.map(function(e){return c.createElement("label",{key:e.value,className:r+"easy-edit-radio-label"},c.createElement("input",p({type:"radio",value:e.value,onChange:n,onBlur:o,checked:e.value===a},s)),e.label)});return c.createElement("div",null,l)}m.propTypes={onChange:a.func,value:a.oneOfType([a.string,a.number]),attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},m.defaultProps={attributes:{}};function y(e){var t=e.options,a=e.value,n=e.onChange,s=e.attributes,r=e.cssClassPrefix,o=e.onBlur;a=a||[];var l=t.map(function(e){return c.createElement("label",{key:e.value,className:r+"easy-edit-checkbox-label"},c.createElement("input",p({},s,{type:"checkbox",value:e.value,key:e.value,onChange:n,onBlur:o,checked:a.includes(e.value)})),e.label)});return c.createElement("div",null,l)}y.propTypes={onChange:a.func,options:a.array.isRequired,value:a.array,attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},y.defaultProps={attributes:{}};function b(e){var t=e.value,a=void 0===t?"":t,n=e.onChange,s=e.attributes,r=e.cssClassPrefix,o=e.onBlur;return c.createElement("div",{className:r+"easy-edit-component-wrapper"},c.createElement("input",p({type:"color",defaultValue:a,onChange:n,onBlur:o},s)))}b.propTypes={onChange:a.func,value:a.string,attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},b.defaultProps={attributes:{}};function T(e){var t=e.options,a=e.value,n=e.onChange,s=e.attributes,r=e.placeholder,o=e.cssClassPrefix,l=e.onBlur,i=c.createRef(),u=t.map(function(e){return c.createElement("option",{key:e.value,value:e.label})});return c.createElement("div",{className:o+"easy-edit-component-wrapper"},c.createElement("input",p({autoFocus:s.autoFocus||!0,value:a||void 0,onChange:n,onBlur:l,placeholder:r,autoComplete:s.autoComplete||"off"},s,{list:i})),c.createElement("datalist",{id:i},u))}T.propTypes={onChange:a.func,value:a.oneOfType([a.string,a.number]),attributes:a.object,cssClassPrefix:a.string,onBlur:a.func},T.defaultProps={attributes:{}};var g=function(){function a(e){var t;return n(this,a),(t=h(this,i(a).call(this,e))).state={value:e.value},t.setValue=t.setValue.bind(d(t)),t}return l(a,t.Component),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,s=c.cloneElement(c.Children.only(a),{setParentValue:this.setValue,value:e});return c.createElement("div",{className:n+"easy-edit-component-wrapper"},s)}}]),a}(),O=function(){function u(e){var s;return n(this,u),o(d(s=h(this,i(u).call(this,e))),"onKeyDown",function(e){var t=s.props,a=t.type,n=t.disableAutoSubmit;t.disableAutoCancel||27!==e.keyCode||s._onCancel(),n||(13===e.keyCode&&a!==A.TEXTAREA||13===e.keyCode&&e.ctrlKey&&a===A.TEXTAREA)&&s._onSave()}),o(d(s),"_onSave",function(){var e=s.props,t=e.onSave,a=e.onValidate,n=s.state.tempValue;a(n)?s.setState({editing:!1,value:n,isValid:!0,hover:!1},function(){return t(s.state.value)}):s.setState({isValid:!1})}),o(d(s),"_onBlur",function(){var e=s.props,t=e.onBlur;e.saveOnBlur?(t(s.state.tempValue),s._onSave()):t(s.state.tempValue)}),o(d(s),"_onCancel",function(){var e=s.props.onCancel,t=s.state.value;s.setState({editing:!1,tempValue:t,hover:!1},function(){return e()})}),o(d(s),"onChange",function(e){s.setState({tempValue:e.target?e.target.value:e})}),o(d(s),"onCheckboxChange",function(e){var t=s.props.options,a=s.state.tempValue||[];e.target.checked&&!a.includes(e.target.value)?a.push(e.target.value):a.splice(a.indexOf(e.target.value),1);var n=t.map(function(e){return e.value});a=a.filter(function(e){return n.includes(e)}),s.setState({tempValue:a})}),o(d(s),"onClick",function(){s.props.allowEdit&&s.setState({editing:!0})}),o(d(s),"hoverOn",function(){s.props.allowEdit&&s.setState({hover:!0})}),o(d(s),"hoverOff",function(){s.setState({hover:!1})}),s.state={editing:!1,hover:!1,value:e.value,tempValue:e.value,isValid:!0},s.saveButton=c.createRef(),s.cancelButton=c.createRef(),s}return l(u,c.Component),r(u,[{key:"componentDidUpdate",value:function(e){this.props.value!==e.value&&this.setState({tempValue:this.props.value,value:this.props.value})}},{key:"renderInput",value:function(){var e=this.props,t=e.type,a=e.options,n=e.placeholder,s=e.attributes,r=e.editComponent,o=e.cssClassPrefix,l=this.state.editing;if(this.cullAttributes(),c.isValidElement(r))return c.createElement(g,{setValue:this.onChange,value:this.state.tempValue,cssClassPrefix:o},r);switch(t){case A.TEXT:case A.PASSWORD:case A.EMAIL:case A.NUMBER:case A.DATE:case A.DATETIME_LOCAL:case A.TIME:case A.MONTH:case A.WEEK:case A.RANGE:return c.createElement(E,{value:l?this.state.tempValue:this.state.value,placeholder:n,onChange:this.onChange,onBlur:this._onBlur,type:t,attributes:s,cssClassPrefix:o});case A.COLOR:return c.createElement(b,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,onBlur:this._onBlur,attributes:s,cssClassPrefix:o});case A.TEXTAREA:return c.createElement(C,{value:l?this.state.tempValue:this.state.value,placeholder:n,onChange:this.onChange,onBlur:this._onBlur,attributes:s,cssClassPrefix:o});case A.SELECT:return c.createElement(v,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,onBlur:this._onBlur,options:a,placeholder:n===f.DEFAULT_PLACEHOLDER?f.DEFAULT_SELECT_PLACEHOLDER:n,attributes:s,cssClassPrefix:o});case A.RADIO:return c.createElement(m,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,onBlur:this._onBlur,options:a,attributes:s,cssClassPrefix:o});case A.CHECKBOX:return c.createElement(y,{value:l?this.state.tempValue:this.state.value,onChange:this.onCheckboxChange,onBlur:this._onBlur,options:a,attributes:s,cssClassPrefix:o});case A.DATALIST:return c.createElement(T,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,onBlur:this._onBlur,options:a,attributes:s,cssClassPrefix:o});default:throw new Error(f.ERROR_UNSUPPORTED_TYPE)}}},{key:"renderButtons",value:function(){var e=this.props,t=e.saveOnBlur,a=e.saveButtonLabel,n=e.saveButtonStyle,s=e.cancelButtonLabel,r=e.cancelButtonStyle,o=e.cssClassPrefix,l=e.hideSaveButton,i=e.hideCancelButton;return c.createElement("div",{className:o+"easy-edit-button-wrapper"},!l&&u.generateButton(this.saveButton,this._onSave,a,null===n?o+f.DEFAULT_BUTTON_CSS_CLASS:n,"save",t),!i&&u.generateButton(this.cancelButton,this._onCancel,s,null===r?o+f.DEFAULT_BUTTON_CSS_CLASS:r,"cancel",t))}},{key:"renderValidationMessage",value:function(){var e=this.props,t=e.validationMessage,a=e.cssClassPrefix;if(!this.state.isValid)return c.createElement("div",{className:a+"easy-edit-validation-error"},t)}},{key:"renderInstructions",value:function(){var e=this.props,t=e.instructions,a=e.cssClassPrefix;if(this.state.editing&&null!==t)return c.createElement("div",{className:a+"easy-edit-instructions"},t)}},{key:"setCssClasses",value:function(e){var t=this.props,a=t.viewAttributes,n=t.cssClassPrefix,s=t.onHoverCssClass;return a.class&&(e+=" "+a.class),a.className&&(e+=" "+a.className),this.props.allowEdit?this.state.hover?s===f.DEFAULT_ON_HOVER_CSS_CLASS?n+"easy-edit-hover-on "+e:s+" "+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,s=e.viewAttributes,r=e.cssClassPrefix;this.cullAttributes();var o=r+"easy-edit-wrapper";if(c.isValidElement(n))return c.createElement("div",p({},s,{className:this.setCssClasses(o),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.state.value?c.cloneElement(n,{value:this.state.value}):a);switch(t){case A.TEXT:case A.DATALIST:case A.EMAIL:case A.TEXTAREA:case A.NUMBER:case A.DATE:case A.DATETIME_LOCAL:case A.TIME:case A.MONTH:case A.WEEK:case A.RANGE:case A.PASSWORD:return c.createElement("div",p({},s,{className:this.setCssClasses(o),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.state.value?t===A.PASSWORD?"••••••••":this.state.value:a);case A.RADIO:case A.CHECKBOX:case A.SELECT:return c.createElement("div",p({},s,{className:this.setCssClasses(o),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.renderComplexView());case A.COLOR:return c.createElement("input",p({},s,{type:t,value:this.state.value,onClick:this.onClick,readOnly:!0}));default:throw new Error(f.ERROR_UNSUPPORTED_TYPE)}}},{key:"renderComplexView",value:function(){var e,t=this,a=this.props,n=a.placeholder,s=a.options,r=a.type;return null===this.state.value||0===this.state.value.length?n:0!==(e=A.CHECKBOX===r?s.filter(function(e){return t.state.value.includes(e.value)}):s.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 t=this,e=this.props,a=e.cssClassPrefix,n=e.buttonsPosition;return this.state.editing?c.createElement("div",{className:a+"easy-edit-inline-wrapper",tabIndex:"0",onKeyDown:function(e){return t.onKeyDown(e)}},n===f.POSITION_BEFORE&&this.renderButtons(),this.renderInput(),n===f.POSITION_AFTER&&this.renderButtons(),this.renderInstructions(),this.renderValidationMessage()):this.renderPlaceholder()}}],[{key:"generateButton",value:function(e,t,a,n,s,r){return r?"":c.createElement("button",{ref:e,onClick:t,className:n,name:s},a)}}]),u}(),A={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(A),O.propTypes={type:a.oneOf(["text","number","color","textarea","date","datetime-local","email","password","time","month","week","radio","checkbox","select","range","datalist"]).isRequired,value:a.oneOfType([a.string,a.number,a.array,a.object]),options:a.array,saveButtonLabel:a.oneOfType([a.string,a.element]),saveButtonStyle:a.string,cancelButtonLabel:a.oneOfType([a.string,a.element]),cancelButtonStyle:a.string,buttonsPosition:a.oneOf(["after","before"]),placeholder:a.string,onCancel:a.func,onValidate:a.func,onBlur:a.func,onSave:a.func.isRequired,validationMessage:a.string,allowEdit:a.bool,attributes:a.object,viewAttributes:a.object,instructions:a.string,editComponent:a.element,displayComponent:a.element,disableAutoSubmit:a.bool,disableAutoCancel:a.bool,cssClassPrefix:a.string,hideSaveButton:a.bool,hideCancelButton:a.bool,onHoverCssClass:a.string,saveOnBlur:a.bool},O.defaultProps={value:null,saveButtonLabel:f.DEFAULT_SAVE_BUTTON_LABEL,saveButtonStyle:null,cancelButtonLabel:f.DEFAULT_CANCEL_BUTTON_LABEL,cancelButtonStyle:null,buttonsPosition:f.POSITION_AFTER,placeholder:f.DEFAULT_PLACEHOLDER,allowEdit:!0,onCancel:function(){},onBlur:function(){},onValidate:function(){return!0},validationMessage:f.FAILED_VALIDATION_MESSAGE,attributes:{},viewAttributes:{},instructions:null,editComponent:null,placeholderComponent:null,disableAutoSubmit:!1,disableAutoCancel:!1,cssClassPrefix:"",hideSaveButton:!1,hideCancelButton:!1,onHoverCssClass:f.DEFAULT_ON_HOVER_CSS_CLASS,saveOnBlur:!1},e.Types=A,e.default=O,Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "react-easy-edit",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "A react library for inline editing components",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/giorgosart/react-easy-edit#readme",

README.md

@@ -31,3 +31,3 @@ [![Test](https://img.shields.io/npm/v/react-easy-edit.svg?style=flat)](https://www.npmjs.com/package/react-easy-edit)
 ## :cool: Props
-For the full list of props, please visit this **[our online documentation](https://giorgosart.gitbook.io/react-easy-edit/props)**.
+For the full list of props, please visit **[our documentation](https://giorgosart.gitbook.io/react-easy-edit/props)**.
 
@@ -34,0 +34,0 @@ ## :page_facing_up: Examples

No alert changes

Improved metrics

Total package byte prevSize

25108

increased by0.41%

Lines of code

63

increased by1.61%

No dependency changes