New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-easy-edit

Package Overview
Dependencies
Maintainers
1
Versions
42
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-easy-edit - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

2

build/react-easy-edit.min.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self)["react-easy-edit"]=t(e.React,e.PropTypes)}(this,function(t,e){"use strict";var l="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 a(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 i(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 c(e){return(c=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 p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function d(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?p(e):t}e=e&&e.hasOwnProperty("default")?e.default:e;!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 h(e){var t=e.options,a=e.value,n=e.onChange,r=e.placeholder,o=e.attributes;return l.createElement("div",{className:"easy-edit-component-wrapper"},l.createElement("select",u({value:a||"",onChange:n},o),l.createElement("option",{key:"",value:"",disabled:"disabled"},r),t.map(function(e){return l.createElement("option",{value:e.value,key:e.value},e.label)})))}var v=Object.freeze({DEFAULT_PLACEHOLDER:"Click to edit",DEFAULT_SELECT_PLACEHOLDER:"Select ...",DEFAULT_SAVE_BUTTON_LABEL:"Save",DEFAULT_CANCEL_BUTTON_LABEL:"Cancel",ERROR_UNSUPPORTED_TYPE:"Unsupported component type EasyEdit type, please review documentation for supported HTML component types",FAILED_VALIDATION_MESSAGE:"Please provide a valid value"});h.propTypes={options:e.array.isRequired,onChange:e.func,value:e.oneOfType([e.string,e.number]),placeholder:e.string,attributes:e.object},h.defaultProps={attributes:{},placeholder:v.DEFAULT_SELECT_PLACEHOLDER};function f(e){var t=e.type,a=e.value,n=e.placeholder,r=e.onChange,o=e.attributes;return l.createElement("div",{className:"easy-edit-component-wrapper"},l.createElement("input",u({autoFocus:o.autoFocus||!0,type:t,value:a||void 0,onChange:r,placeholder:n,autoComplete:o.autoComplete||"off"},o)))}f.propTypes={type:e.string.isRequired,onChange:e.func,value:e.string,placeholder:e.string,attributes:e.object},f.defaultProps={attributes:{},placeholder:v.DEFAULT_PLACEHOLDER};function m(e){var t=e.value,a=e.placeholder,n=e.onChange,r=e.attributes;return l.createElement("div",{className:"easy-edit-component-wrapper"},l.createElement("textarea",u({autoFocus:r.autoFocus||!0,className:"easy-edit-textarea",value:t,onChange:n,placeholder:a},r)))}m.propTypes={onChange:e.func,value:e.string,placeholder:e.string,attributes:e.object},m.defaultProps={attributes:{},placeholder:v.DEFAULT_PLACEHOLDER};function y(e){var t=e.options,a=e.value,n=e.onChange,r=e.attributes,o=t.map(function(e){return l.createElement("label",{key:e.value,className:"easy-edit-radio-label"},l.createElement("input",u({type:"radio",className:"easy-edit-radio-button",value:e.value,onChange:n,checked:e.value===a},r)),e.label)});return l.createElement("div",null,o)}y.propTypes={onChange:e.func,value:e.oneOfType([e.string,e.number]),attributes:e.object},y.defaultProps={attributes:{}};function E(e){var t=e.options,a=e.value,n=e.onChange,r=e.attributes;a=a||[];var o=t.map(function(e){return l.createElement("label",{key:e.value,className:"easy-edit-checkbox-label"},l.createElement("input",u({},r,{type:"checkbox",className:"easy-edit-radio-button",value:e.value,key:e.value,onChange:n,checked:a.includes(e.value)})),e.label)});return l.createElement("div",null,o)}E.propTypes={onChange:e.func,options:e.array.isRequired,value:e.array,attributes:e.object},E.defaultProps={attributes:{}};function b(e){var t=e.value,a=void 0===t?"":t,n=e.onChange,r=e.attributes;return l.createElement("div",{className:"easy-edit-component-wrapper"},l.createElement("input",u({type:"color",defaultValue:a,onChange:n},r)))}b.propTypes={onChange:e.func,value:e.string,attributes:e.object},b.defaultProps={attributes:{}};function C(e){var t=e.options,a=e.value,n=e.onChange,r=e.attributes,o=e.placeholder,s=l.createRef(),i=t.map(function(e){return l.createElement("option",{value:e.label})});return l.createElement("div",{className:"easy-edit-component-wrapper"},l.createElement("input",u({autoFocus:r.autoFocus||!0,value:a||void 0,onChange:n,placeholder:o,autoComplete:r.autoComplete||"off"},r,{list:s})),l.createElement("datalist",{id:s},i))}C.propTypes={onChange:e.func,value:e.oneOfType([e.string,e.number]),attributes:e.object},C.defaultProps={attributes:{}};var g=function(e){function a(e){var t;return n(this,a),(t=d(this,c(a).call(this,e))).state={value:e.value},t.setValue=t.setValue.bind(p(t)),t}return i(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=l.cloneElement(l.Children.only(t),{setParentValue:this.setValue,value:e});return l.createElement("div",{className:"easy-edit-component-wrapper"},a)}}]),a}(),O=function(e){function o(e){var r;return n(this,o),a(p(r=d(this,c(o).call(this,e))),"onKeyDown",function(e){var t=r.props.type;27===e.keyCode&&r._onCancel(),13===e.keyCode&&"textarea"!==t&&r._onSave()}),a(p(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})}),a(p(r),"_onCancel",function(){var e=r.props.onCancel,t=r.state.value;r.setState({editing:!1,tempValue:t},function(){return e()})}),a(p(r),"onChange",function(e){r.setState({tempValue:e.target?e.target.value:e})}),a(p(r),"onCheckboxChange",function(e){var t=r.state.tempValue||[];e.target.checked?t.includes(e.target.value)||t.push(e.target.value):t.splice(t.indexOf(e.target.value),1),r.setState({tempValue:t})}),r.state={editing:!1,hover:!1,value:e.value,tempValue:e.value,isValid:!0},r.saveButton=l.createRef(),r.cancelButton=l.createRef(),r.onClick=r.onClick.bind(p(r)),r.hoverOn=r.hoverOn.bind(p(r)),r.hoverOff=r.hoverOff.bind(p(r)),r.onChange=r.onChange.bind(p(r)),r}return i(o,l.Component),s(o,[{key:"componentDidUpdate",value:function(e){this.props.value!==e.value&&this.setState({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,a=e.type,n=e.options,r=e.placeholder,o=e.attributes,s=e.editComponent,i=this.state.editing;if(l.isValidElement(s))return l.createElement(g,{setValue:function(e){t.onChange(e)},value:this.state.tempValue},s);switch(a){case"text":case"number":case"date":case"datetime-local":case"time":case"month":case"week":case"range":return l.createElement(f,{value:i?this.state.tempValue:this.state.value,placeholder:r,onChange:this.onChange,type:a,attributes:o});case"color":return l.createElement(b,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,attributes:o});case"textarea":return l.createElement(m,{value:i?this.state.tempValue:this.state.value,placeholder:r,onChange:this.onChange,attributes:o});case"select":return l.createElement(h,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,options:n,placeholder:r===v.DEFAULT_PLACEHOLDER?v.DEFAULT_SELECT_PLACEHOLDER:r,attributes:o});case"radio":return l.createElement(y,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,options:n,attributes:o});case"checkbox":return l.createElement(E,{value:i?this.state.tempValue:this.state.value,onChange:this.onCheckboxChange,options:n,attributes:o});case"datalist":return l.createElement(C,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,options:n,attributes:o});default:throw new Error(v.ERROR_UNSUPPORTED_TYPE)}}},{key:"renderButtons",value:function(){var e=this.props,t=e.saveButtonLabel,a=e.saveButtonStyle,n=e.cancelButtonLabel,r=e.cancelButtonStyle;return l.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 l.createElement("div",{className:"easy-edit-validation-error"},e)}},{key:"renderInstructions",value:function(){var e=this.props.instructions;if(this.state.editing&&null!==e)return l.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 t=this,e=this.props,a=e.type,n=e.placeholder,r=e.options,o=e.displayComponent;if(l.isValidElement(o))return l.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff},this.state.value?l.cloneElement(o,{value:this.state.value}):n);switch(a){case"text":case"datalist":case"email":case"textarea":case"number":case"date":case"datetime-local":case"time":case"month":case"week":case"range":return l.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff},this.state.value?this.state.value:n);case"radio":case"select":var s;return this.state.value&&(s=r.filter(function(e){return t.state.value.includes(e.value)})),l.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff},this.state.value?s?this.state.value:s[0].label:n);case"color":return l.createElement("input",{type:a,value:this.state.value,onClick:this.onClick,readOnly:!0});case"checkbox":var i;return this.state.value&&(i=r.filter(function(e){return t.state.value.includes(e.value)})),l.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff},this.state.value&&0!==this.state.value.length?i.map(function(e){return e.label}).join(", "):n);default:throw new Error(v.ERROR_UNSUPPORTED_TYPE)}}},{key:"render",value:function(){var t=this;return this.state.editing?l.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 l.createElement("button",{ref:e,onClick:t,className:n,name:r},a)}}]),o}();return O.propTypes={type:e.oneOf(["text","number","color","textarea","date","datetime-local","time","month","week","radio","checkbox","select","range","datalist"]).isRequired,value:e.oneOfType([e.string,e.number,e.array]),options:e.array,saveButtonLabel:e.string,saveButtonStyle:e.string,cancelButtonLabel:e.string,cancelButtonStyle:e.string,placeholder:e.string,onCancel:e.func,onValidate:e.func,validationMessage:e.string,onSave:e.func.isRequired,allowEdit:e.bool,attributes:e.object,instructions:e.string,editComponent:e.element,displayComponent:e.element},O.defaultProps={value:null,saveButtonLabel:v.DEFAULT_SAVE_BUTTON_LABEL,saveButtonStyle:"easy-edit-button",cancelButtonLabel:v.DEFAULT_CANCEL_BUTTON_LABEL,cancelButtonStyle:"easy-edit-button",placeholder:v.DEFAULT_PLACEHOLDER,allowEdit:!0,onCancel:function(){},onValidate:function(e){return!0},validationMessage:v.FAILED_VALIDATION_MESSAGE,instructions:null,editComponent:null,placeholderComponent:null},O});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self)["react-easy-edit"]=t(e.React,e.PropTypes)}(this,function(t,e){"use strict";var l="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 a(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 i(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 c(e){return(c=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 p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function d(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?p(e):t}e=e&&e.hasOwnProperty("default")?e.default:e;!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 h(e){var t=e.options,a=e.value,n=e.onChange,r=e.placeholder,o=e.attributes;return l.createElement("div",{className:"easy-edit-component-wrapper"},l.createElement("select",u({value:a||"",onChange:n},o),l.createElement("option",{key:"",value:"",disabled:"disabled"},r),t.map(function(e){return l.createElement("option",{value:e.value,key:e.value},e.label)})))}var v=Object.freeze({DEFAULT_PLACEHOLDER:"Click to edit",DEFAULT_SELECT_PLACEHOLDER:"Select ...",DEFAULT_SAVE_BUTTON_LABEL:"Save",DEFAULT_CANCEL_BUTTON_LABEL:"Cancel",ERROR_UNSUPPORTED_TYPE:"Unsupported component type EasyEdit type, please review documentation for supported HTML component types",FAILED_VALIDATION_MESSAGE:"Please provide a valid value"});h.propTypes={options:e.array.isRequired,onChange:e.func,value:e.oneOfType([e.string,e.number]),placeholder:e.string,attributes:e.object},h.defaultProps={attributes:{},placeholder:v.DEFAULT_SELECT_PLACEHOLDER};function f(e){var t=e.type,a=e.value,n=e.placeholder,r=e.onChange,o=e.attributes;return l.createElement("div",{className:"easy-edit-component-wrapper"},l.createElement("input",u({autoFocus:o.autoFocus||!0,type:t,value:a||void 0,onChange:r,placeholder:n,autoComplete:o.autoComplete||"off"},o)))}f.propTypes={type:e.string.isRequired,onChange:e.func,value:e.string,placeholder:e.string,attributes:e.object},f.defaultProps={attributes:{},placeholder:v.DEFAULT_PLACEHOLDER};function m(e){var t=e.value,a=e.placeholder,n=e.onChange,r=e.attributes;return l.createElement("div",{className:"easy-edit-component-wrapper"},l.createElement("textarea",u({autoFocus:r.autoFocus||!0,className:"easy-edit-textarea",value:t,onChange:n,placeholder:a},r)))}m.propTypes={onChange:e.func,value:e.string,placeholder:e.string,attributes:e.object},m.defaultProps={attributes:{},placeholder:v.DEFAULT_PLACEHOLDER};function y(e){var t=e.options,a=e.value,n=e.onChange,r=e.attributes,o=t.map(function(e){return l.createElement("label",{key:e.value,className:"easy-edit-radio-label"},l.createElement("input",u({type:"radio",className:"easy-edit-radio-button",value:e.value,onChange:n,checked:e.value===a},r)),e.label)});return l.createElement("div",null,o)}y.propTypes={onChange:e.func,value:e.oneOfType([e.string,e.number]),attributes:e.object},y.defaultProps={attributes:{}};function E(e){var t=e.options,a=e.value,n=e.onChange,r=e.attributes;a=a||[];var o=t.map(function(e){return l.createElement("label",{key:e.value,className:"easy-edit-checkbox-label"},l.createElement("input",u({},r,{type:"checkbox",className:"easy-edit-radio-button",value:e.value,key:e.value,onChange:n,checked:a.includes(e.value)})),e.label)});return l.createElement("div",null,o)}E.propTypes={onChange:e.func,options:e.array.isRequired,value:e.array,attributes:e.object},E.defaultProps={attributes:{}};function b(e){var t=e.value,a=void 0===t?"":t,n=e.onChange,r=e.attributes;return l.createElement("div",{className:"easy-edit-component-wrapper"},l.createElement("input",u({type:"color",defaultValue:a,onChange:n},r)))}b.propTypes={onChange:e.func,value:e.string,attributes:e.object},b.defaultProps={attributes:{}};function C(e){var t=e.options,a=e.value,n=e.onChange,r=e.attributes,o=e.placeholder,s=l.createRef(),i=t.map(function(e){return l.createElement("option",{value:e.label})});return l.createElement("div",{className:"easy-edit-component-wrapper"},l.createElement("input",u({autoFocus:r.autoFocus||!0,value:a||void 0,onChange:n,placeholder:o,autoComplete:r.autoComplete||"off"},r,{list:s})),l.createElement("datalist",{id:s},i))}C.propTypes={onChange:e.func,value:e.oneOfType([e.string,e.number]),attributes:e.object},C.defaultProps={attributes:{}};var g=function(e){function a(e){var t;return n(this,a),(t=d(this,c(a).call(this,e))).state={value:e.value},t.setValue=t.setValue.bind(p(t)),t}return i(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=l.cloneElement(l.Children.only(t),{setParentValue:this.setValue,value:e});return l.createElement("div",{className:"easy-edit-component-wrapper"},a)}}]),a}(),O=function(e){function o(e){var r;return n(this,o),a(p(r=d(this,c(o).call(this,e))),"onKeyDown",function(e){var t=r.props.type;27===e.keyCode&&r._onCancel(),13===e.keyCode&&"textarea"!==t&&r._onSave()}),a(p(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})}),a(p(r),"_onCancel",function(){var e=r.props.onCancel,t=r.state.value;r.setState({editing:!1,tempValue:t},function(){return e()})}),a(p(r),"onChange",function(e){r.setState({tempValue:e.target?e.target.value:e})}),a(p(r),"onCheckboxChange",function(e){var t=r.state.tempValue||[];e.target.checked?t.includes(e.target.value)||t.push(e.target.value):t.splice(t.indexOf(e.target.value),1),r.setState({tempValue:t})}),r.state={editing:!1,hover:!1,value:e.value,tempValue:e.value,isValid:!0},r.saveButton=l.createRef(),r.cancelButton=l.createRef(),r.onClick=r.onClick.bind(p(r)),r.hoverOn=r.hoverOn.bind(p(r)),r.hoverOff=r.hoverOff.bind(p(r)),r.onChange=r.onChange.bind(p(r)),r}return i(o,l.Component),s(o,[{key:"componentDidUpdate",value:function(e){this.props.value!==e.value&&this.setState({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,a=e.type,n=e.options,r=e.placeholder,o=e.attributes,s=e.editComponent,i=this.state.editing;if(l.isValidElement(s))return l.createElement(g,{setValue:function(e){t.onChange(e)},value:this.state.tempValue},s);switch(a){case"text":case"number":case"date":case"datetime-local":case"time":case"month":case"week":case"range":return l.createElement(f,{value:i?this.state.tempValue:this.state.value,placeholder:r,onChange:this.onChange,type:a,attributes:o});case"color":return l.createElement(b,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,attributes:o});case"textarea":return l.createElement(m,{value:i?this.state.tempValue:this.state.value,placeholder:r,onChange:this.onChange,attributes:o});case"select":return l.createElement(h,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,options:n,placeholder:r===v.DEFAULT_PLACEHOLDER?v.DEFAULT_SELECT_PLACEHOLDER:r,attributes:o});case"radio":return l.createElement(y,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,options:n,attributes:o});case"checkbox":return l.createElement(E,{value:i?this.state.tempValue:this.state.value,onChange:this.onCheckboxChange,options:n,attributes:o});case"datalist":return l.createElement(C,{value:i?this.state.tempValue:this.state.value,onChange:this.onChange,options:n,attributes:o});default:throw new Error(v.ERROR_UNSUPPORTED_TYPE)}}},{key:"renderButtons",value:function(){var e=this.props,t=e.saveButtonLabel,a=e.saveButtonStyle,n=e.cancelButtonLabel,r=e.cancelButtonStyle;return l.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 l.createElement("div",{className:"easy-edit-validation-error"},e)}},{key:"renderInstructions",value:function(){var e=this.props.instructions;if(this.state.editing&&null!==e)return l.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 t=this,e=this.props,a=e.type,n=e.placeholder,r=e.options,o=e.displayComponent;if(l.isValidElement(o))return l.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff},this.state.value?l.cloneElement(o,{value:this.state.value}):n);switch(a){case"text":case"datalist":case"email":case"textarea":case"number":case"date":case"datetime-local":case"time":case"month":case"week":case"range":return l.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff},this.state.value?this.state.value:n);case"radio":case"select":var s;return this.state.value&&(s=r.filter(function(e){return t.state.value.includes(e.value)})),l.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff},this.state.value?s?this.state.value:s[0].label:n);case"color":return l.createElement("input",{type:a,value:this.state.value,onClick:this.onClick,readOnly:!0});case"checkbox":var i;return this.state.value&&(i=r.filter(function(e){return t.state.value.includes(e.value)})),l.createElement("div",{className:this.setCssClasses("easy-edit-wrapper"),onClick:this.onClick,onMouseEnter:this.hoverOn,onMouseLeave:this.hoverOff},this.state.value&&0!==this.state.value.length?i.map(function(e){return e.label}).join(", "):n);default:throw new Error(v.ERROR_UNSUPPORTED_TYPE)}}},{key:"render",value:function(){var t=this;return this.state.editing?l.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 l.createElement("button",{ref:e,onClick:t,className:n,name:r},a)}}]),o}();return O.propTypes={type:e.oneOf(["text","number","color","textarea","date","datetime-local","time","month","week","radio","checkbox","select","range","datalist"]).isRequired,value:e.oneOfType([e.string,e.number,e.array]),options:e.array,saveButtonLabel:e.oneOfType([e.string,e.element]),saveButtonStyle:e.string,cancelButtonLabel:e.oneOfType([e.string,e.element]),cancelButtonStyle:e.string,placeholder:e.string,onCancel:e.func,onValidate:e.func,validationMessage:e.string,onSave:e.func.isRequired,allowEdit:e.bool,attributes:e.object,instructions:e.string,editComponent:e.element,displayComponent:e.element},O.defaultProps={value:null,saveButtonLabel:v.DEFAULT_SAVE_BUTTON_LABEL,saveButtonStyle:"easy-edit-button",cancelButtonLabel:v.DEFAULT_CANCEL_BUTTON_LABEL,cancelButtonStyle:"easy-edit-button",placeholder:v.DEFAULT_PLACEHOLDER,allowEdit:!0,onCancel:function(){},onValidate:function(e){return!0},validationMessage:v.FAILED_VALIDATION_MESSAGE,instructions:null,editComponent:null,placeholderComponent:null},O});

10

package.json
{
"name": "react-easy-edit",
"version": "1.2.0",
"version": "1.2.1",
"description": "A react library for inline editing components",

@@ -52,8 +52,8 @@ "homepage": "https://github.com/giorgosart/react-easy-edit#readme",

"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.4",
"@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"enzyme": "3.9.0",
"enzyme-adapter-react-16": "1.13.0",
"enzyme-adapter-react-16": "1.13.2",
"prop-types": "^15.7.2",

@@ -63,3 +63,3 @@ "react": "^16.8.6",

"react-scripts": "^3.0.1",
"rollup": "^1.11.3",
"rollup": "^1.12.4",
"rollup-plugin-babel": "^4.3.2",

@@ -66,0 +66,0 @@ "rollup-plugin-postcss": "^2.0.3",

4

README.md

@@ -24,5 +24,5 @@ [![Test](https://img.shields.io/npm/v/react-easy-edit.svg?style=flat)](https://www.npmjs.com/package/react-easy-edit)

| options | array | No | | A key value pair object that is used as available options for select, radio and checkbox.``` options = [{label:'Test One', value: '1'},{label:'Test Two', value: '2'}]; ``` |
| saveButtonLabel | string | No | Save | The label to be used for the "Save" button |
| saveButtonLabel | string or element | No | Save | The label to be used for the "Save" button |
| saveButtonStyle | string | No | easy-edit-button| One or more CSS classes to be used to style the "Save" button |
| cancelButtonLabel | string | No | Cancel | The label to be used for the "Cancel" button |
| cancelButtonLabel | string or element | No | Cancel | The label to be used for the "Cancel" button |
| cancelButtonStyle | string | No | easy-edit-button| One or more CSS classes to be used to style the "Cancel" button |

@@ -29,0 +29,0 @@ | placeholder | string | No | Click to edit | The text to be shown as a hint that describes the expected value of the input element |

.idea/workspace.xml

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc