react-easy-edit - npm Package Compare versions

Comparing version 1.6.0 to 1.7.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 u="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 i(e,t,a){return 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||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 o(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&&l(e,t)}function p(e){return(p=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function l(e,t){return(l=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 {\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  display: inline-block;\r\n  margin: 0 2px;\r\n  padding: 4px;\r\n  text-align: center;\r\n  text-decoration: none;\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,s=e.placeholder,r=e.attributes,l=e.cssClassPrefix;return u.createElement("div",{className:l+"easy-edit-component-wrapper"},u.createElement("select",c({value:a||"",onChange:n},r),u.createElement("option",{key:"",value:"",disabled:"disabled"},s),t.map(function(e){return u.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:a.array.isRequired,onChange:a.func,value:a.oneOfType([a.string,a.number]),placeholder:a.string,attributes:a.object,cssClassPrefix:a.string},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,l=e.cssClassPrefix;return u.createElement("div",{className:l+"easy-edit-component-wrapper"},u.createElement("input",c({autoFocus:r.autoFocus||!0,type:t,value:a||void 0,onChange:s,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},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;return u.createElement("div",{className:r+"easy-edit-component-wrapper"},u.createElement("textarea",c({autoFocus:s.autoFocus||!0,value:t,onChange:n,placeholder:a},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},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,l=t.map(function(e){return u.createElement("label",{key:e.value,className:r+"easy-edit-radio-label"},u.createElement("input",c({type:"radio",value:e.value,onChange:n,checked:e.value===a},s)),e.label)});return u.createElement("div",null,l)}m.propTypes={onChange:a.func,value:a.oneOfType([a.string,a.number]),attributes:a.object,cssClassPrefix:a.string},m.defaultProps={attributes:{}};function y(e){var t=e.options,a=e.value,n=e.onChange,s=e.attributes,r=e.cssClassPrefix;a=a||[];var l=t.map(function(e){return u.createElement("label",{key:e.value,className:r+"easy-edit-checkbox-label"},u.createElement("input",c({},s,{type:"checkbox",value:e.value,key:e.value,onChange:n,checked:a.includes(e.value)})),e.label)});return u.createElement("div",null,l)}y.propTypes={onChange:a.func,options:a.array.isRequired,value:a.array,attributes:a.object,cssClassPrefix:a.string},y.defaultProps={attributes:{}};function b(e){var t=e.value,a=void 0===t?"":t,n=e.onChange,s=e.attributes,r=e.cssClassPrefix;return u.createElement("div",{className:r+"easy-edit-component-wrapper"},u.createElement("input",c({type:"color",defaultValue:a,onChange:n},s)))}b.propTypes={onChange:a.func,value:a.string,attributes:a.object,cssClassPrefix:a.string},b.defaultProps={attributes:{}};function g(e){var t=e.options,a=e.value,n=e.onChange,s=e.attributes,r=e.placeholder,l=e.cssClassPrefix,i=u.createRef(),o=t.map(function(e){return u.createElement("option",{key:e.value,value:e.label})});return u.createElement("div",{className:l+"easy-edit-component-wrapper"},u.createElement("input",c({autoFocus:s.autoFocus||!0,value:a||void 0,onChange:n,placeholder:r,autoComplete:s.autoComplete||"off"},s,{list:i})),u.createElement("datalist",{id:i},o))}g.propTypes={onChange:a.func,value:a.oneOfType([a.string,a.number]),attributes:a.object,cssClassPrefix:a.string},g.defaultProps={attributes:{}};var T=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 o(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=u.cloneElement(u.Children.only(a),{setParentValue:this.setValue,value:e});return u.createElement("div",{className:n+"easy-edit-component-wrapper"},s)}}]),a}(),A=function(){function l(e){var s;return n(this,l),i(d(s=h(this,p(l).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()}),i(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},function(){return t(s.state.value)}):s.setState({isValid:!1})}),i(d(s),"_onCancel",function(){var e=s.props.onCancel,t=s.state.value;s.setState({editing:!1,tempValue:t},function(){return e()})}),i(d(s),"onChange",function(e){s.setState({tempValue:e.target?e.target.value:e})}),i(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})}),i(d(s),"onClick",function(){s.props.allowEdit&&s.setState({editing:!0})}),i(d(s),"hoverOn",function(){s.props.allowEdit&&s.setState({hover:!0})}),i(d(s),"hoverOff",function(){s.setState({hover:!1})}),s.state={editing:!1,hover:!1,value:e.value,tempValue:e.value,isValid:!0},s.saveButton=u.createRef(),s.cancelButton=u.createRef(),s}return o(l,u.Component),r(l,[{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,l=e.cssClassPrefix,i=this.state.editing;if(this.cullAttributes(),u.isValidElement(r))return u.createElement(T,{setValue:this.onChange,value:this.state.tempValue,cssClassPrefix:l},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 u.createElement(E,{value:i?this.state.tempValue:this.state.value,placeholder:n,onChange:this.onChange,type:t,attributes:s,cssClassPrefix:l});case O.COLOR:return u.createElement(b,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,attributes:s,cssClassPrefix:l});case O.TEXTAREA:return u.createElement(C,{value:i?this.state.tempValue:this.state.value,placeholder:n,onChange:this.onChange,attributes:s,cssClassPrefix:l});case O.SELECT:return u.createElement(v,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,options:a,placeholder:n===f.DEFAULT_PLACEHOLDER?f.DEFAULT_SELECT_PLACEHOLDER:n,attributes:s,cssClassPrefix:l});case O.RADIO:return u.createElement(m,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,options:a,attributes:s,cssClassPrefix:l});case O.CHECKBOX:return u.createElement(y,{value:i?this.state.tempValue:this.state.value,onChange:this.onCheckboxChange,options:a,attributes:s,cssClassPrefix:l});case O.DATALIST:return u.createElement(g,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,options:a,attributes:s,cssClassPrefix:l});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;return u.createElement("div",{className:r+"easy-edit-button-wrapper"},l.generateButton(this.saveButton,this._onSave,t,null===a?r+f.DEFAULT_BUTTON_CSS_CLASS:a,"save"),l.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 u.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 u.createElement("div",{className:a+"easy-edit-instructions"},t)}},{key:"setCssClasses",value:function(e){var t=this.props,a=t.viewAttributes,n=t.cssClassPrefix;return a.class&&(e+=" "+a.class),a.className&&(e+=" "+a.className),this.props.allowEdit?this.state.hover?n+"easy-edit-hover-on "+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 l=r+"easy-edit-wrapper";if(u.isValidElement(n))return u.createElement("div",c({},s,{className:this.setCssClasses(l),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.state.value?u.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 u.createElement("div",c({},s,{className:this.setCssClasses(l),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 u.createElement("div",c({},s,{className:this.setCssClasses(l),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.renderComplexView());case O.COLOR:return u.createElement("input",c({},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.cssClassPrefix;return this.state.editing?u.createElement("div",{className:e+"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,s){return u.createElement("button",{ref:e,onClick:t,className:n,name:s},a)}}]),l}(),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,viewAttributes:a.object,instructions:a.string,editComponent:a.element,displayComponent:a.element,disableAutoSubmit:a.bool,disableAutoCancel:a.bool,cssClassPrefix:a.string},A.defaultProps={value:null,saveButtonLabel:f.DEFAULT_SAVE_BUTTON_LABEL,saveButtonStyle:null,cancelButtonLabel:f.DEFAULT_CANCEL_BUTTON_LABEL,cancelButtonStyle:null,placeholder:f.DEFAULT_PLACEHOLDER,allowEdit:!0,onCancel:function(){},onValidate:function(){return!0},validationMessage:f.FAILED_VALIDATION_MESSAGE,attributes:{},viewAttributes:{},instructions:null,editComponent:null,placeholderComponent:null,disableAutoSubmit:!1,disableAutoCancel:!1,cssClassPrefix:""},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 u="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 i(e,t,a){return 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||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&&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],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;return u.createElement("div",{className:o+"easy-edit-component-wrapper"},u.createElement("select",c({value:a||"",onChange:n},r),u.createElement("option",{key:"",value:"",disabled:"disabled"},s),t.map(function(e){return u.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",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},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;return u.createElement("div",{className:o+"easy-edit-component-wrapper"},u.createElement("input",c({autoFocus:r.autoFocus||!0,type:t,value:a||void 0,onChange:s,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},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;return u.createElement("div",{className:r+"easy-edit-component-wrapper"},u.createElement("textarea",c({autoFocus:s.autoFocus||!0,value:t,onChange:n,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},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=t.map(function(e){return u.createElement("label",{key:e.value,className:r+"easy-edit-radio-label"},u.createElement("input",c({type:"radio",value:e.value,onChange:n,checked:e.value===a},s)),e.label)});return u.createElement("div",null,o)}m.propTypes={onChange:a.func,value:a.oneOfType([a.string,a.number]),attributes:a.object,cssClassPrefix:a.string},m.defaultProps={attributes:{}};function y(e){var t=e.options,a=e.value,n=e.onChange,s=e.attributes,r=e.cssClassPrefix;a=a||[];var o=t.map(function(e){return u.createElement("label",{key:e.value,className:r+"easy-edit-checkbox-label"},u.createElement("input",c({},s,{type:"checkbox",value:e.value,key:e.value,onChange:n,checked:a.includes(e.value)})),e.label)});return u.createElement("div",null,o)}y.propTypes={onChange:a.func,options:a.array.isRequired,value:a.array,attributes:a.object,cssClassPrefix:a.string},y.defaultProps={attributes:{}};function b(e){var t=e.value,a=void 0===t?"":t,n=e.onChange,s=e.attributes,r=e.cssClassPrefix;return u.createElement("div",{className:r+"easy-edit-component-wrapper"},u.createElement("input",c({type:"color",defaultValue:a,onChange:n},s)))}b.propTypes={onChange:a.func,value:a.string,attributes:a.object,cssClassPrefix:a.string},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,i=u.createRef(),l=t.map(function(e){return u.createElement("option",{key:e.value,value:e.label})});return u.createElement("div",{className:o+"easy-edit-component-wrapper"},u.createElement("input",c({autoFocus:s.autoFocus||!0,value:a||void 0,onChange:n,placeholder:r,autoComplete:s.autoComplete||"off"},s,{list:i})),u.createElement("datalist",{id:i},l))}T.propTypes={onChange:a.func,value:a.oneOfType([a.string,a.number]),attributes:a.object,cssClassPrefix:a.string},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 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=u.cloneElement(u.Children.only(a),{setParentValue:this.setValue,value:e});return u.createElement("div",{className:n+"easy-edit-component-wrapper"},s)}}]),a}(),A=function(){function o(e){var s;return n(this,o),i(d(s=h(this,p(o).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()}),i(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},function(){return t(s.state.value)}):s.setState({isValid:!1})}),i(d(s),"_onCancel",function(){var e=s.props.onCancel,t=s.state.value;s.setState({editing:!1,tempValue:t},function(){return e()})}),i(d(s),"onChange",function(e){s.setState({tempValue:e.target?e.target.value:e})}),i(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})}),i(d(s),"onClick",function(){s.props.allowEdit&&s.setState({editing:!0})}),i(d(s),"hoverOn",function(){s.props.allowEdit&&s.setState({hover:!0})}),i(d(s),"hoverOff",function(){s.setState({hover:!1})}),s.state={editing:!1,hover:!1,value:e.value,tempValue:e.value,isValid:!0},s.saveButton=u.createRef(),s.cancelButton=u.createRef(),s}return l(o,u.Component),r(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 e=this.props,t=e.type,a=e.options,n=e.placeholder,s=e.attributes,r=e.editComponent,o=e.cssClassPrefix,i=this.state.editing;if(this.cullAttributes(),u.isValidElement(r))return u.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 u.createElement(E,{value:i?this.state.tempValue:this.state.value,placeholder:n,onChange:this.onChange,type:t,attributes:s,cssClassPrefix:o});case O.COLOR:return u.createElement(b,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,attributes:s,cssClassPrefix:o});case O.TEXTAREA:return u.createElement(C,{value:i?this.state.tempValue:this.state.value,placeholder:n,onChange:this.onChange,attributes:s,cssClassPrefix:o});case O.SELECT:return u.createElement(v,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,options:a,placeholder:n===f.DEFAULT_PLACEHOLDER?f.DEFAULT_SELECT_PLACEHOLDER:n,attributes:s,cssClassPrefix:o});case O.RADIO:return u.createElement(m,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,options:a,attributes:s,cssClassPrefix:o});case O.CHECKBOX:return u.createElement(y,{value:i?this.state.tempValue:this.state.value,onChange:this.onCheckboxChange,options:a,attributes:s,cssClassPrefix:o});case O.DATALIST:return u.createElement(T,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,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;return u.createElement("div",{className:r+"easy-edit-button-wrapper"},o.generateButton(this.saveButton,this._onSave,t,null===a?r+f.DEFAULT_BUTTON_CSS_CLASS:a,"save"),o.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 u.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 u.createElement("div",{className:a+"easy-edit-instructions"},t)}},{key:"setCssClasses",value:function(e){var t=this.props,a=t.viewAttributes,n=t.cssClassPrefix;return a.class&&(e+=" "+a.class),a.className&&(e+=" "+a.className),this.props.allowEdit?this.state.hover?n+"easy-edit-hover-on "+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(u.isValidElement(n))return u.createElement("div",c({},s,{className:this.setCssClasses(o),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.state.value?u.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 u.createElement("div",c({},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 u.createElement("div",c({},s,{className:this.setCssClasses(o),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff}),this.renderComplexView());case O.COLOR:return u.createElement("input",c({},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?u.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 u.createElement("button",{ref:e,onClick:t,className:n,name:s},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,buttonsPosition:a.oneOf(["after","before"]),placeholder:a.string,onCancel:a.func,onValidate:a.func,validationMessage:a.string,onSave:a.func.isRequired,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},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(){},onValidate:function(){return!0},validationMessage:f.FAILED_VALIDATION_MESSAGE,attributes:{},viewAttributes:{},instructions:null,editComponent:null,placeholderComponent:null,disableAutoSubmit:!1,disableAutoCancel:!1,cssClassPrefix:""},e.Types=O,e.default=A,Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "react-easy-edit",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "A react library for inline editing components",
@@ -41,4 +41,4 @@ "homepage": "https://github.com/giorgosart/react-easy-edit#readme",
   "peerDependencies": {
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0"
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
   },
@@ -55,7 +55,7 @@ "eslintConfig": {
   "devDependencies": {
-    "@babel/cli": "^7.7.0",
-    "@babel/core": "^7.7.2",
-    "@babel/plugin-proposal-class-properties": "^7.7.0",
-    "@babel/preset-env": "^7.7.1",
-    "@babel/preset-react": "^7.7.0",
+    "@babel/cli": "^7.7.4",
+    "@babel/core": "^7.7.4",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/preset-env": "^7.7.4",
+    "@babel/preset-react": "^7.7.4",
     "enzyme": "3.10.0",
@@ -67,3 +67,3 @@ "enzyme-adapter-react-16": "1.15.1",
     "react-scripts": "^3.2.0",
-    "rollup": "^1.27.4",
+    "rollup": "^1.27.5",
     "rollup-plugin-babel": "^4.3.3",
@@ -70,0 +70,0 @@ "rollup-plugin-postcss": "^2.0.3",

README.md

@@ -39,2 +39,3 @@ [![Test](https://img.shields.io/npm/v/react-easy-edit.svg?style=flat)](https://www.npmjs.com/package/react-easy-edit)
 | cancelButtonStyle | string                    | No       | easy-edit-button| One or more CSS classes to be used to style the "Cancel" button                                                                                                                               |
+| buttonsPosition   | string                    | No       | after           | The position for both save and cancel buttons, accepts `before` and `after`                                                                                                                               |
 | placeholder       | string                    | No       | Click to edit   | The text to be shown as a hint that describes the expected value of the input element                                                                                                         |
@@ -41,0 +42,0 @@ | onCancel          | function                  | No       | () => {}        | A function that will be called when editing is cancelled. Also called when the <kbd>Esc</kbd> button is pressed                                                                               |

No alert changes

Improved metrics

Number of lines in readme file

193

increased by0.52%

Worsened metrics

Total package byte prevSize

31124

decreased by-15.08%

Number of package files

5

decreased by-37.5%

Lines of code

59

decreased by-20.27%

No dependency changes