react-editext-with-ref/dist/index.min.js

Editable Text Component for React Applications

"use strict";var e=require("react"),t=function(){return t=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},t.apply(this,arguments)};function n(e,t,n,o){return new(n||(n=Promise))((function(i,a){function l(e){try{r(o.next(e))}catch(e){a(e)}}function s(e){try{r(o.throw(e))}catch(e){a(e)}}function r(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,s)}r((o=o.apply(e,t||[])).next())}))}function o(e,t){var n,o,i,a,l={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return a={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(a){return function(s){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;l;)try{if(n=1,o&&(i=2&a[0]?o.return:a[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,a[1])).done)return i;switch(o=0,i&&(a=[2&a[0],i.value]),a[0]){case 0:case 1:i=a;break;case 4:return l.label++,{value:a[1],done:!1};case 5:l.label++,o=a[1],a=[0];continue;case 7:a=l.ops.pop(),l.trys.pop();continue;default:if(!(i=l.trys,(i=i.length>0&&i[i.length-1])||6!==a[0]&&2!==a[0])){l=0;continue}if(3===a[0]&&(!i||a[1]>i[0]&&a[1]<i[3])){l.label=a[1];break}if(6===a[0]&&l.label<i[1]){l.label=i[1],i=a;break}if(i&&l.label<i[2]){l.label=i[2],l.ops.push(a);break}i[2]&&l.ops.pop(),l.trys.pop();continue}a=t.call(e,l)}catch(e){a=[6,e],o=0}finally{n=i=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,s])}}}var i="styles-module_Editext__button__sxYQX",a="styles-module_Editext__input__2-M50",l="styles-module_Editext__main_container__2azCD",s="styles-module_Editext__editing_container__1C4d6",r="styles-module_Editext__view_container__3oSYx",u="styles-module_Editext__buttons_container__2za5Q",c="styles-module_Editext__buttons_showButtonsOnHover__2Bfsd",d="styles-module_Editext__buttons_before_aligned__3Eg6w",_="styles-module_Editext__buttons_after_aligned__2ZHQz",f="styles-module_Editext__validation_message__1puii",m="styles-module_Editext__cancel_button__26sqr",v="styles-module_Editext__edit_button__310_J",p="styles-module_Editext__save_button__1Dlwo",x="styles-module_Editext__hide_default_icons__2k5RX",y="styles-module_Editext__hint__EGeV0";function b(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return Array.apply(void 0,e).filter((function(e){return e})).join(" ")}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}('.styles-module_Editext__button__sxYQX {\n  border-radius: 1px;\n  outline: none;\n  padding: 0.6em;\n  min-width: 30px;\n  height: 100%;\n  border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);\n  border-style: solid;\n  border-width: 1px;\n}\n\n.styles-module_Editext__button__sxYQX:hover {\n  cursor: pointer;\n  background-color: rgba(241, 241, 241, 1);\n}\n\n.styles-module_Editext__input__2-M50 {\n  width: 100%;\n  border: 1px solid rgb(212, 212, 212);\n  padding: 0.6em;\n  outline: none;\n}\n\n.styles-module_Editext__main_container__2azCD {\n  display: flex;\n  flex-direction: column;\n}\n\n.styles-module_Editext__editing_container__1C4d6 {\n  display: flex;\n  flex: 1;\n  align-items: center;\n}\n\n.styles-module_Editext__view_container__3oSYx {\n  display: flex;\n  align-items: center;\n}\n\n.styles-module_Editext__buttons_container__2za5Q {\n  display: flex;\n}\n\n.styles-module_Editext__buttons_showButtonsOnHover__2Bfsd .styles-module_Editext__buttons_container__2za5Q {\n  visibility: hidden;\n}\n\n.styles-module_Editext__buttons_showButtonsOnHover__2Bfsd:hover .styles-module_Editext__buttons_container__2za5Q {\n  visibility: visible;\n}\n\n.styles-module_Editext__buttons_before_aligned__3Eg6w {\n  margin-right: 5px;\n}\n\n.styles-module_Editext__buttons_after_aligned__2ZHQz {\n  margin-left: 5px;\n}\n\n.styles-module_Editext__validation_message__1puii {\n  font-weight: 500;\n  color: crimson;\n  font-size: 0.7em;\n  margin-top: 3px;\n}\n\n.styles-module_Editext__cancel_button__26sqr {\n  color: crimson;\n}\n\n.styles-module_Editext__cancel_button__26sqr::before {\n  content: "\\2715";\n  margin: 3px;\n}\n\n.styles-module_Editext__edit_button__310_J {\n  color: #000;\n}\n\n.styles-module_Editext__edit_button__310_J::before {\n  content: "\\270E";\n  margin: 3px;\n}\n\n.styles-module_Editext__save_button__1Dlwo {\n  color: darkgreen;\n  margin-right: 3px;\n}\n\n.styles-module_Editext__save_button__1Dlwo::before {\n  content: "\\2713";\n  margin: 3px;\n}\n\n.styles-module_Editext__hide_default_icons__2k5RX::before {\n  content: none;\n  margin: 0;\n}\n\n.styles-module_Editext__hint__EGeV0 {\n  font-weight: 500;\n  color: lightslategray;\n  font-size: 0.7em;\n  margin-top: 3px;\n  text-align: left;\n}\n');var E="main-container",h="view-container",g="edit-container",w="validation-container",C="edit-button",N="save-button",O="cancel-button",P="input",B="hint";var k=e.forwardRef((function(k,D){var S,I=e.useState(k.editing),z=I[0],U=I[1],F=e.useState(!0),Q=F[0],V=F[1],K=e.useState(k.value||""),T=K[0],H=K[1],R=e.useState(void 0),q=R[0],X=R[1],Y=e.useState(!1),A=Y[0],j=Y[1],G=e.createRef(),J=e.createRef(),M=e.createRef();function Z(e){var t,n=[13,"Enter"].some((function(t){return e.key===t||e.code===t})),o=[27,"Escape","Esc"].some((function(t){return e.code===t||e.key===t}));n&&(k.submitOnEnter&&oe(),null==e||e.preventDefault()),o&&(k.cancelOnEscape&&te(),e.preventDefault()),(null===(t=k.inputProps)||void 0===t?void 0:t.onKeyDown)&&k.inputProps.onKeyDown(e)}function L(e){var t,n,o=null===(t=M.current)||void 0===t?void 0:t.contains(null==e?void 0:e.relatedTarget);k.cancelOnUnfocus&&!o&&te(),k.submitOnUnfocus&&!o&&!k.cancelOnUnfocus&&oe(),(null===(n=k.inputProps)||void 0===n?void 0:n.onBlur)&&k.inputProps.onBlur(e)}function W(e){var t;j(!0),k.startEditingOnFocus&&U(!0),(null===(t=k.viewProps)||void 0===t?void 0:t.onFocus)&&k.viewProps.onFocus(e)}function $(e){var t,n=[13,"Enter"].some((function(t){return e.key===t||e.code===t}))&&A&&k.startEditingOnEnter;n&&e.preventDefault(),n&&U(!0),(null===(t=k.viewProps)||void 0===t?void 0:t.onKeyDown)&&k.viewProps.onKeyDown(e)}function ee(e){var t,n;V(!0),H(e.target.value),null===(n=null===(t=k.inputProps)||void 0===t?void 0:t.onChange)||void 0===n||n.call(t,e)}function te(){var e,t=null!=q?q:k.value;V(!0),U(!1),H(t),null===(e=k.onCancel)||void 0===e||e.call(k,t,k.inputProps)}function ne(){var e,t,n;if(void 0===(n=k.canEdit)||("function"==typeof n?n():n)){U(!0);var o=null===(e=J.current)||void 0===e?void 0:e.querySelector("input, textarea");o&&o.focus(),null===(t=k.onEditingStart)||void 0===t||t.call(k,T,k.inputProps)}}function oe(){var e;return n(this,void 0,void 0,(function(){return o(this,(function(t){switch(t.label){case 0:return"function"!=typeof k.validation?[3,3]:[4,k.validation(T)];case 1:return t.sent()?[3,3]:(V(!1),[4,null===(e=k.onValidationFail)||void 0===e?void 0:e.call(k,T)]);case 2:return t.sent(),[2];case 3:return U(!1),X(T),k.onSave(T,k.inputProps),[2]}}))}))}e.useEffect((function(){k.cancelOnUnfocus&&k.submitOnUnfocus&&console.warn("EdiText: Both `cancelOnUnfocus` and `submitOnUnfocus` are set to true. `submitOnUnfocus` is ignored in this case. Please remove one of these.")}),[k.cancelOnUnfocus,k.submitOnUnfocus]),e.useEffect((function(){void 0!==k.value&&(H(k.value),X(k.value)),void 0!==k.editing&&U(k.editing)}),[k.editing,k.value]);var ie,ae,le,se,re,ue,ce,de=z?function(){var n="textarea"===k.type?e.createElement("textarea",t({className:a,editext:P,tabIndex:k.tabIndex},k.inputProps,{onBlur:L,value:T,onChange:ee,autoFocus:z})):e.createElement("input",t({className:a,editext:P,tabIndex:k.tabIndex},k.inputProps,{onKeyDown:Z,onBlur:L,value:T,type:k.type||"text",onChange:ee,autoFocus:z})),o=b("".concat(i),"".concat(p),k.hideIcons&&"".concat(x)),l=k.saveButtonClassName||o,r=b("".concat(i),"".concat(m),k.hideIcons&&"".concat(x)),c=k.cancelButtonClassName||r,v=s;k.editContainerClassName&&(v=k.editContainerClassName),k.viewContainerClassName&&(v=k.viewContainerClassName);var E=k.buttonsAlign||"after",h=b(u,"before"===E&&"".concat(d),"after"===E&&"".concat(_));return e.createElement("div",null,e.createElement("div",{ref:J,className:v,editext:g},"after"===E&&n,e.createElement("div",{className:h,ref:M},e.createElement("button",{ref:G,editext:N,type:"button",className:l,onClick:oe},k.saveButtonContent),e.createElement("button",{type:"button",editext:O,className:c,onClick:te},k.cancelButtonContent)),"before"===E&&n),!Q&&!k.onValidationFail&&e.createElement("div",{className:f,editext:w},k.validationMessage||"Invalid Value"),k.hint&&e.createElement("div",{className:y,editext:B},k.hint))}():(ie=b("".concat(i),"".concat(v),k.hideIcons&&"".concat(x)),ae=k.editButtonClassName||ie,le=b(k.viewContainerClassName||r,k.showButtonsOnHover&&"".concat(c)),se=k.buttonsAlign||"after",re=b(u,"before"===se&&"".concat(d),"after"===se&&"".concat(_)),ue=k.editOnViewClick?ne:void 0,ce="function"==typeof k.renderValue?k.renderValue(T):T,e.createElement("div",{className:le,editext:h},"after"===se&&e.createElement("div",t({tabIndex:k.tabIndex},k.viewProps,{onKeyDown:$,onFocus:W,onClick:ue,editext:"view"}),ce),e.createElement("div",{className:re},e.createElement("button",t({type:"button",className:ae},k.editButtonProps,{editext:C,onClick:ne}),k.editButtonContent)),"before"===se&&e.createElement("div",t({tabIndex:k.tabIndex},k.viewProps,{onKeyDown:$,onFocus:W,onClick:ue,editext:h}),ce))),_e=b((null===(S=k.containerProps)||void 0===S?void 0:S.className)||k.mainContainerClassName||l,k.className);return e.createElement("div",t({},k.containerProps,{className:_e,editext:E,ref:D}),de)}));k.displayName="EdiText",module.exports=k;
//# sourceMappingURL=index.min.js.map