react-easy-edit - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

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,n){"use strict";var i="default"in t?t.default:t;function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function s(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function c(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&&o(e,t)}function p(e){return(p=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function o(e,t){return(o=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}n=n&&n.hasOwnProperty("default")?n.default:n;!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".easy-edit-button-wrapper {\r\n  display: inline;\r\n}\r\n\r\n.easy-edit-hover-on {\r\n  cursor: pointer;\r\n  font-style: italic;\r\n}\r\n\r\n.easy-edit-radio-label {\r\n  display: block;\r\n}\r\n\r\n.easy-edit-not-allowed{\r\n  cursor: not-allowed;\r\n}\r\n\r\n.easy-edit-checkbox-label {\r\n  display: block;\r\n}\r\n\r\n.easy-edit-textarea {\r\n  min-height: 40px;\r\n}\r\n\r\n.easy-edit-button {\r\n  border: none;\r\n  padding: 4px;\r\n  margin: 0 2px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n}\r\n\r\n.easy-edit-component-wrapper{\r\n  display: inline-grid;\r\n}\r\n\r\n.easy-edit-validation-error {\r\n  color: red;\r\n}\r\n");function v(e){var t=e.options,n=e.value,a=e.onChange,r=e.placeholder,o=e.attributes;return i.createElement("div",{className:"easy-edit-component-wrapper"},i.createElement("select",u({value:n||"",onChange:a},o),i.createElement("option",{key:"",value:"",disabled:"disabled"},r),t.map(function(e){return i.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_BUTTON_CSS_CLASS:"easy-edit-button",DEFAULT_CANCEL_BUTTON_LABEL:"Cancel",ERROR_UNSUPPORTED_TYPE:"Unsupported component type, please review documentation for supported HTML component types",FAILED_VALIDATION_MESSAGE:"Please provide a valid value"});v.propTypes={options:n.array.isRequired,onChange:n.func,value:n.oneOfType([n.string,n.number]),placeholder:n.string,attributes:n.object},v.defaultProps={attributes:{},placeholder:f.DEFAULT_SELECT_PLACEHOLDER};function E(e){var t=e.type,n=e.value,a=e.placeholder,r=e.onChange,o=e.attributes;return i.createElement("div",{className:"easy-edit-component-wrapper"},i.createElement("input",u({autoFocus:o.autoFocus||!0,type:t,value:n||void 0,onChange:r,placeholder:o.placeholder||a,autoComplete:o.autoComplete||"off"},o)))}E.propTypes={type:n.string.isRequired,onChange:n.func,value:n.string,placeholder:n.string,attributes:n.object},E.defaultProps={attributes:{},placeholder:f.DEFAULT_PLACEHOLDER};function m(e){var t=e.value,n=e.placeholder,a=e.onChange,r=e.attributes;return i.createElement("div",{className:"easy-edit-component-wrapper"},i.createElement("textarea",u({autoFocus:r.autoFocus||!0,className:"easy-edit-textarea",value:t,onChange:a,placeholder:n},r)))}m.propTypes={onChange:n.func,value:n.string,placeholder:n.string,attributes:n.object},m.defaultProps={attributes:{},placeholder:f.DEFAULT_PLACEHOLDER};function y(e){var t=e.options,n=e.value,a=e.onChange,r=e.attributes,o=t.map(function(e){return i.createElement("label",{key:e.value,className:"easy-edit-radio-label"},i.createElement("input",u({type:"radio",value:e.value,onChange:a,checked:e.value===n},r)),e.label)});return i.createElement("div",null,o)}y.propTypes={onChange:n.func,value:n.oneOfType([n.string,n.number]),attributes:n.object},y.defaultProps={attributes:{}};function C(e){var t=e.options,n=e.value,a=e.onChange,r=e.attributes;n=n||[];var o=t.map(function(e){return i.createElement("label",{key:e.value,className:"easy-edit-checkbox-label"},i.createElement("input",u({},r,{type:"checkbox",value:e.value,key:e.value,onChange:a,checked:n.includes(e.value)})),e.label)});return i.createElement("div",null,o)}C.propTypes={onChange:n.func,options:n.array.isRequired,value:n.array,attributes:n.object},C.defaultProps={attributes:{}};function b(e){var t=e.value,n=void 0===t?"":t,a=e.onChange,r=e.attributes;return i.createElement("div",{className:"easy-edit-component-wrapper"},i.createElement("input",u({type:"color",defaultValue:n,onChange:a},r)))}b.propTypes={onChange:n.func,value:n.string,attributes:n.object},b.defaultProps={attributes:{}};function T(e){var t=e.options,n=e.value,a=e.onChange,r=e.attributes,o=e.placeholder,s=i.createRef(),l=t.map(function(e){return i.createElement("option",{key:e.value,value:e.label})});return i.createElement("div",{className:"easy-edit-component-wrapper"},i.createElement("input",u({autoFocus:r.autoFocus||!0,value:n||void 0,onChange:a,placeholder:o,autoComplete:r.autoComplete||"off"},r,{list:s})),i.createElement("datalist",{id:s},l))}T.propTypes={onChange:n.func,value:n.oneOfType([n.string,n.number]),attributes:n.object},T.defaultProps={attributes:{}};var g=function(){function n(e){var t;return a(this,n),(t=h(this,p(n).call(this,e))).state={value:e.value},t.setValue=t.setValue.bind(d(t)),t}return c(n,t.Component),s(n,[{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.children,n=i.cloneElement(i.Children.only(t),{setParentValue:this.setValue,value:e});return i.createElement("div",{className:"easy-edit-component-wrapper"},n)}}]),n}(),A=function(){function o(e){var r;return a(this,o),l(d(r=h(this,p(o).call(this,e))),"onKeyDown",function(e){var t=r.props,n=t.type,a=t.disableAutoSubmit;t.disableAutoCancel||27!==e.keyCode||r._onCancel(),a||(13===e.keyCode&&n!==O.TEXTAREA||13===e.keyCode&&e.ctrlKey&&n===O.TEXTAREA)&&r._onSave()}),l(d(r),"_onSave",function(){var e=r.props,t=e.onSave,n=e.onValidate,a=r.state.tempValue;n(a)?r.setState({editing:!1,value:a},function(){return t(r.state.value)}):r.setState({isValid:!1})}),l(d(r),"_onCancel",function(){var e=r.props.onCancel,t=r.state.value;r.setState({editing:!1,tempValue:t},function(){return e()})}),l(d(r),"onChange",function(e){r.setState({tempValue:e.target?e.target.value:e})}),l(d(r),"onCheckboxChange",function(e){var t=r.props.options,n=r.state.tempValue||[];e.target.checked&&!n.includes(e.target.value)?n.push(e.target.value):n.splice(n.indexOf(e.target.value),1);var a=t.map(function(e){return e.value});n=n.filter(function(e){return a.includes(e)}),r.setState({tempValue:n})}),r.state={editing:!1,hover:!1,value:e.value,tempValue:e.value,isValid:!0},r.saveButton=i.createRef(),r.cancelButton=i.createRef(),r.onClick=r.onClick.bind(d(r)),r.hoverOn=r.hoverOn.bind(d(r)),r.hoverOff=r.hoverOff.bind(d(r)),r.onChange=r.onChange.bind(d(r)),r}return c(o,i.Component),s(o,[{key:"componentDidUpdate",value:function(e){this.props.value!==e.value&&this.setState({tempValue:this.props.value,value:this.props.value})}},{key:"onClick",value:function(){this.props.allowEdit&&this.setState({editing:!0})}},{key:"hoverOn",value:function(){this.props.allowEdit&&this.setState({hover:!0})}},{key:"hoverOff",value:function(){this.setState({hover:!1})}},{key:"renderInput",value:function(){var t=this,e=this.props,n=e.type,a=e.options,r=e.placeholder,o=e.attributes,s=e.editComponent,l=this.state.editing;if(this.cullAttributes(),i.isValidElement(s))return i.createElement(g,{setValue:function(e){t.onChange(e)},value:this.state.tempValue},s);switch(n){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 i.createElement(E,{value:l?this.state.tempValue:this.state.value,placeholder:r,onChange:this.onChange,type:n,attributes:o});case O.COLOR:return i.createElement(b,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,attributes:o});case O.TEXTAREA:return i.createElement(m,{value:l?this.state.tempValue:this.state.value,placeholder:r,onChange:this.onChange,attributes:o});case O.SELECT:return i.createElement(v,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,options:a,placeholder:r===f.DEFAULT_PLACEHOLDER?f.DEFAULT_SELECT_PLACEHOLDER:r,attributes:o});case O.RADIO:return i.createElement(y,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,options:a,attributes:o});case O.CHECKBOX:return i.createElement(C,{value:l?this.state.tempValue:this.state.value,onChange:this.onCheckboxChange,options:a,attributes:o});case O.DATALIST:return i.createElement(T,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,options:a,attributes:o});default:throw new Error(f.ERROR_UNSUPPORTED_TYPE)}}},{key:"renderButtons",value:function(){var e=this.props,t=e.saveButtonLabel,n=e.saveButtonStyle,a=e.cancelButtonLabel,r=e.cancelButtonStyle;return i.createElement("div",{className:"easy-edit-button-wrapper"},o.generateButton(this.saveButton,this._onSave,t,n,"save"),o.generateButton(this.cancelButton,this._onCancel,a,r,"cancel"))}},{key:"renderValidationMessage",value:function(){var e=this.props.validationMessage;if(!this.state.isValid)return i.createElement("div",{className:"easy-edit-validation-error"},e)}},{key:"renderInstructions",value:function(){var e=this.props.instructions;if(this.state.editing&&null!==e)return i.createElement("div",{className:"easy-edit-instructions"},e)}},{key:"setCssClasses",value:function(e){return this.props.allowEdit?this.state.hover?"easy-edit-hover-on "+e:e:"easy-edit-not-allowed "+e}},{key:"renderPlaceholder",value:function(){var e=this.props,t=e.type,n=e.placeholder,a=e.displayComponent;if(this.cullAttributes(),i.isValidElement(a))return i.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff},this.state.value?i.cloneElement(a,{value:this.state.value}):n);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 i.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff},this.state.value?t===O.PASSWORD?"••••••••":this.state.value:n);case O.RADIO:case O.CHECKBOX:case O.SELECT:return i.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff},this.renderComplexView());case O.COLOR:return i.createElement("input",{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,n=this.props,a=n.placeholder,r=n.options,o=n.type;return null===this.state.value||0===this.state.value.length?a:0!==(e=O.CHECKBOX===o?r.filter(function(e){return t.state.value.includes(e.value)}):r.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;void 0!==e&&(delete e.type,delete e.onChange,delete e.value)}},{key:"render",value:function(){var t=this;return this.state.editing?i.createElement("div",{className:"easy-edit-inline-wrapper",tabIndex:"0",onKeyDown:function(e){return t.onKeyDown(e)}},this.renderInput(),this.renderButtons(),this.renderInstructions(),this.renderValidationMessage()):this.renderPlaceholder()}}],[{key:"generateButton",value:function(e,t,n,a,r){return i.createElement("button",{ref:e,onClick:t,className:a,name:r},n)}}]),o}(),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:n.oneOf(["text","number","color","textarea","date","datetime-local","email","password","time","month","week","radio","checkbox","select","range","datalist"]).isRequired,value:n.oneOfType([n.string,n.number,n.array]),options:n.array,saveButtonLabel:n.oneOfType([n.string,n.element]),saveButtonStyle:n.string,cancelButtonLabel:n.oneOfType([n.string,n.element]),cancelButtonStyle:n.string,placeholder:n.string,onCancel:n.func,onValidate:n.func,validationMessage:n.string,onSave:n.func.isRequired,allowEdit:n.bool,attributes:n.object,instructions:n.string,editComponent:n.element,displayComponent:n.element,disableAutoSubmit:n.bool,disableAutoCancel:n.bool},A.defaultProps={value:null,saveButtonLabel:f.DEFAULT_SAVE_BUTTON_LABEL,saveButtonStyle:f.DEFAULT_BUTTON_CSS_CLASS,cancelButtonLabel:f.DEFAULT_CANCEL_BUTTON_LABEL,cancelButtonStyle:f.DEFAULT_BUTTON_CSS_CLASS,placeholder:f.DEFAULT_PLACEHOLDER,allowEdit:!0,onCancel:function(){},onValidate:function(){return!0},validationMessage:f.FAILED_VALIDATION_MESSAGE,instructions:null,editComponent:null,placeholderComponent:null,disableAutoSubmit:!1,disableAutoCancel:!1},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 i="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 r(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 s(e,t,a){return t&&r(e.prototype,t),a&&r(e,a),e}function l(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 n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function c(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&&o(e,t)}function p(e){return(p=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function o(e,t){return(o=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],r=document.createElement("style");r.type="text/css","top"===a&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".easy-edit-button-wrapper {\r\n  display: inline;\r\n}\r\n\r\n.easy-edit-hover-on {\r\n  cursor: pointer;\r\n  font-style: italic;\r\n}\r\n\r\n.easy-edit-radio-label {\r\n  display: block;\r\n}\r\n\r\n.easy-edit-not-allowed{\r\n  cursor: not-allowed;\r\n}\r\n\r\n.easy-edit-checkbox-label {\r\n  display: block;\r\n}\r\n\r\n.easy-edit-textarea {\r\n  min-height: 40px;\r\n}\r\n\r\n.easy-edit-button {\r\n  border: none;\r\n  padding: 4px;\r\n  margin: 0 2px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n}\r\n\r\n.easy-edit-component-wrapper{\r\n  display: inline-grid;\r\n}\r\n\r\n.easy-edit-validation-error {\r\n  color: red;\r\n}\r\n");function v(e){var t=e.options,a=e.value,n=e.onChange,r=e.placeholder,o=e.attributes;return i.createElement("div",{className:"easy-edit-component-wrapper"},i.createElement("select",u({value:a||"",onChange:n},o),i.createElement("option",{key:"",value:"",disabled:"disabled"},r),t.map(function(e){return i.createElement("option",{value:e.value,key:e.value},e.label)})))}var E=Object.freeze({DEFAULT_PLACEHOLDER:"Click to edit",DEFAULT_SELECT_PLACEHOLDER:"Select ...",DEFAULT_SAVE_BUTTON_LABEL:"Save",DEFAULT_BUTTON_CSS_CLASS:"easy-edit-button",DEFAULT_CANCEL_BUTTON_LABEL:"Cancel",ERROR_UNSUPPORTED_TYPE:"Unsupported component type, please review documentation for supported HTML component types",FAILED_VALIDATION_MESSAGE:"Please provide a valid value"});v.propTypes={options:a.array.isRequired,onChange:a.func,value:a.oneOfType([a.string,a.number]),placeholder:a.string,attributes:a.object},v.defaultProps={attributes:{},placeholder:E.DEFAULT_SELECT_PLACEHOLDER};function f(e){var t=e.type,a=e.value,n=e.placeholder,r=e.onChange,o=e.attributes;return i.createElement("div",{className:"easy-edit-component-wrapper"},i.createElement("input",u({autoFocus:o.autoFocus||!0,type:t,value:a||void 0,onChange:r,placeholder:o.placeholder||n,autoComplete:o.autoComplete||"off"},o)))}f.propTypes={type:a.string.isRequired,onChange:a.func,value:a.string,placeholder:a.string,attributes:a.object},f.defaultProps={attributes:{},placeholder:E.DEFAULT_PLACEHOLDER};function m(e){var t=e.value,a=e.placeholder,n=e.onChange,r=e.attributes;return i.createElement("div",{className:"easy-edit-component-wrapper"},i.createElement("textarea",u({autoFocus:r.autoFocus||!0,className:"easy-edit-textarea",value:t,onChange:n,placeholder:a},r)))}m.propTypes={onChange:a.func,value:a.string,placeholder:a.string,attributes:a.object},m.defaultProps={attributes:{},placeholder:E.DEFAULT_PLACEHOLDER};function y(e){var t=e.options,a=e.value,n=e.onChange,r=e.attributes,o=t.map(function(e){return i.createElement("label",{key:e.value,className:"easy-edit-radio-label"},i.createElement("input",u({type:"radio",value:e.value,onChange:n,checked:e.value===a},r)),e.label)});return i.createElement("div",null,o)}y.propTypes={onChange:a.func,value:a.oneOfType([a.string,a.number]),attributes:a.object},y.defaultProps={attributes:{}};function C(e){var t=e.options,a=e.value,n=e.onChange,r=e.attributes;a=a||[];var o=t.map(function(e){return i.createElement("label",{key:e.value,className:"easy-edit-checkbox-label"},i.createElement("input",u({},r,{type:"checkbox",value:e.value,key:e.value,onChange:n,checked:a.includes(e.value)})),e.label)});return i.createElement("div",null,o)}C.propTypes={onChange:a.func,options:a.array.isRequired,value:a.array,attributes:a.object},C.defaultProps={attributes:{}};function b(e){var t=e.value,a=void 0===t?"":t,n=e.onChange,r=e.attributes;return i.createElement("div",{className:"easy-edit-component-wrapper"},i.createElement("input",u({type:"color",defaultValue:a,onChange:n},r)))}b.propTypes={onChange:a.func,value:a.string,attributes:a.object},b.defaultProps={attributes:{}};function T(e){var t=e.options,a=e.value,n=e.onChange,r=e.attributes,o=e.placeholder,s=i.createRef(),l=t.map(function(e){return i.createElement("option",{key:e.value,value:e.label})});return i.createElement("div",{className:"easy-edit-component-wrapper"},i.createElement("input",u({autoFocus:r.autoFocus||!0,value:a||void 0,onChange:n,placeholder:o,autoComplete:r.autoComplete||"off"},r,{list:s})),i.createElement("datalist",{id:s},l))}T.propTypes={onChange:a.func,value:a.oneOfType([a.string,a.number]),attributes:a.object},T.defaultProps={attributes:{}};var g=function(){function a(e){var t;return n(this,a),(t=h(this,p(a).call(this,e))).state={value:e.value},t.setValue=t.setValue.bind(d(t)),t}return c(a,t.Component),s(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.children,a=i.cloneElement(i.Children.only(t),{setParentValue:this.setValue,value:e});return i.createElement("div",{className:"easy-edit-component-wrapper"},a)}}]),a}(),A=function(){function o(e){var r;return n(this,o),l(d(r=h(this,p(o).call(this,e))),"onKeyDown",function(e){var t=r.props,a=t.type,n=t.disableAutoSubmit;t.disableAutoCancel||27!==e.keyCode||r._onCancel(),n||(13===e.keyCode&&a!==O.TEXTAREA||13===e.keyCode&&e.ctrlKey&&a===O.TEXTAREA)&&r._onSave()}),l(d(r),"_onSave",function(){var e=r.props,t=e.onSave,a=e.onValidate,n=r.state.tempValue;a(n)?r.setState({editing:!1,value:n},function(){return t(r.state.value)}):r.setState({isValid:!1})}),l(d(r),"_onCancel",function(){var e=r.props.onCancel,t=r.state.value;r.setState({editing:!1,tempValue:t},function(){return e()})}),l(d(r),"onChange",function(e){r.setState({tempValue:e.target?e.target.value:e})}),l(d(r),"onCheckboxChange",function(e){var t=r.props.options,a=r.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)}),r.setState({tempValue:a})}),l(d(r),"onClick",function(){r.props.allowEdit&&r.setState({editing:!0})}),l(d(r),"hoverOn",function(){r.props.allowEdit&&r.setState({hover:!0})}),l(d(r),"hoverOff",function(){r.setState({hover:!1})}),r.state={editing:!1,hover:!1,value:e.value,tempValue:e.value,isValid:!0},r.saveButton=i.createRef(),r.cancelButton=i.createRef(),r}return c(o,i.Component),s(o,[{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 t=this,e=this.props,a=e.type,n=e.options,r=e.placeholder,o=e.attributes,s=e.editComponent,l=this.state.editing;if(this.cullAttributes(),i.isValidElement(s))return i.createElement(g,{setValue:function(e){t.onChange(e)},value:this.state.tempValue},s);switch(a){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 i.createElement(f,{value:l?this.state.tempValue:this.state.value,placeholder:r,onChange:this.onChange,type:a,attributes:o});case O.COLOR:return i.createElement(b,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,attributes:o});case O.TEXTAREA:return i.createElement(m,{value:l?this.state.tempValue:this.state.value,placeholder:r,onChange:this.onChange,attributes:o});case O.SELECT:return i.createElement(v,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,options:n,placeholder:r===E.DEFAULT_PLACEHOLDER?E.DEFAULT_SELECT_PLACEHOLDER:r,attributes:o});case O.RADIO:return i.createElement(y,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,options:n,attributes:o});case O.CHECKBOX:return i.createElement(C,{value:l?this.state.tempValue:this.state.value,onChange:this.onCheckboxChange,options:n,attributes:o});case O.DATALIST:return i.createElement(T,{value:l?this.state.tempValue:this.state.value,onChange:this.onChange,options:n,attributes:o});default:throw new Error(E.ERROR_UNSUPPORTED_TYPE)}}},{key:"renderButtons",value:function(){var e=this.props,t=e.saveButtonLabel,a=e.saveButtonStyle,n=e.cancelButtonLabel,r=e.cancelButtonStyle;return i.createElement("div",{className:"easy-edit-button-wrapper"},o.generateButton(this.saveButton,this._onSave,t,a,"save"),o.generateButton(this.cancelButton,this._onCancel,n,r,"cancel"))}},{key:"renderValidationMessage",value:function(){var e=this.props.validationMessage;if(!this.state.isValid)return i.createElement("div",{className:"easy-edit-validation-error"},e)}},{key:"renderInstructions",value:function(){var e=this.props.instructions;if(this.state.editing&&null!==e)return i.createElement("div",{className:"easy-edit-instructions"},e)}},{key:"setCssClasses",value:function(e){return this.props.allowEdit?this.state.hover?"easy-edit-hover-on "+e:e:"easy-edit-not-allowed "+e}},{key:"renderPlaceholder",value:function(){var e=this.props,t=e.type,a=e.placeholder,n=e.displayComponent;if(this.cullAttributes(),i.isValidElement(n))return i.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff},this.state.value?i.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 i.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),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 i.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff},this.renderComplexView());case O.COLOR:return i.createElement("input",{type:t,value:this.state.value,onClick:this.onClick,readOnly:!0});default:throw new Error(E.ERROR_UNSUPPORTED_TYPE)}}},{key:"renderComplexView",value:function(){var e,t=this,a=this.props,n=a.placeholder,r=a.options,o=a.type;return null===this.state.value||0===this.state.value.length?n:0!==(e=O.CHECKBOX===o?r.filter(function(e){return t.state.value.includes(e.value)}):r.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;void 0!==e&&(delete e.type,delete e.onChange,delete e.value)}},{key:"render",value:function(){var t=this;return this.state.editing?i.createElement("div",{className:"easy-edit-inline-wrapper",tabIndex:"0",onKeyDown:function(e){return t.onKeyDown(e)}},this.renderInput(),this.renderButtons(),this.renderInstructions(),this.renderValidationMessage()):this.renderPlaceholder()}}],[{key:"generateButton",value:function(e,t,a,n,r){return i.createElement("button",{ref:e,onClick:t,className:n,name:r},a)}}]),o}(),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]),options:a.array,saveButtonLabel:a.oneOfType([a.string,a.element]),saveButtonStyle:a.string,cancelButtonLabel:a.oneOfType([a.string,a.element]),cancelButtonStyle:a.string,placeholder:a.string,onCancel:a.func,onValidate:a.func,validationMessage:a.string,onSave:a.func.isRequired,allowEdit:a.bool,attributes:a.object,instructions:a.string,editComponent:a.element,displayComponent:a.element,disableAutoSubmit:a.bool,disableAutoCancel:a.bool},A.defaultProps={value:null,saveButtonLabel:E.DEFAULT_SAVE_BUTTON_LABEL,saveButtonStyle:E.DEFAULT_BUTTON_CSS_CLASS,cancelButtonLabel:E.DEFAULT_CANCEL_BUTTON_LABEL,cancelButtonStyle:E.DEFAULT_BUTTON_CSS_CLASS,placeholder:E.DEFAULT_PLACEHOLDER,allowEdit:!0,onCancel:function(){},onValidate:function(){return!0},validationMessage:E.FAILED_VALIDATION_MESSAGE,instructions:null,editComponent:null,placeholderComponent:null,disableAutoSubmit:!1,disableAutoCancel:!1},e.Types=O,e.default=A,Object.defineProperty(e,"__esModule",{value:!0})});

package.json

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

README.md

@@ -5,2 +5,3 @@ [![Test](https://img.shields.io/npm/v/react-easy-edit.svg?style=flat)](https://www.npmjs.com/package/react-easy-edit)
 [![install size](https://packagephobia.now.sh/badge?p=react-easy-edit@latest)](https://packagephobia.now.sh/result?p=react-easy-edit@latest)
+[![DeepScan grade](https://deepscan.io/api/teams/6030/projects/7886/branches/87202/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=6030&pid=7886&bid=87202)
 
@@ -52,3 +53,3 @@ ![](https://i.imgur.com/vwqcqeD.gif)
 #### A simple example - Textbox
-```
+```jsx
 import React, { Component } from 'react';
@@ -77,3 +78,3 @@ import EasyEdit from 'react-easy-edit';
 #### Radio buttons
-```
+```jsx
 <EasyEdit
@@ -91,3 +92,3 @@ type="radio"
 #### Date
-```
+```jsx
 <EasyEdit
@@ -101,3 +102,3 @@ type="date"
 #### Dropdown
-```
+```jsx
 <EasyEdit
@@ -115,3 +116,3 @@ type="select"
 #### Datalist
-```
+```jsx
 <EasyEdit
@@ -128,3 +129,3 @@ type="datalist"
 #### Checkboxes
-```
+```jsx
 <EasyEdit
@@ -143,3 +144,3 @@ type="checkbox"
 When using custom input components, they must be passed in as props, like so:
-```
+```jsx
 <EasyEdit
@@ -158,3 +159,3 @@ type="text"
 e.g.
-```
+```jsx
 // Inside your custom input
@@ -161,0 +162,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

188

increased by0.53%

Worsened metrics

Total package byte prevSize

35036

decreased by-90.46%

Number of package files

8

decreased by-83.33%

Lines of code

70

decreased by-91.23%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes