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

Editable Text Component for React Applications

import e,{forwardRef as t,useState as n,useEffect as o}from"react";var i=function(){return i=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},i.apply(this,arguments)};function a(e,t,n,o){return new(n||(n=Promise))((function(i,a){function l(e){try{s(o.next(e))}catch(e){a(e)}}function r(e){try{s(o.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,r)}s((o=o.apply(e,t||[])).next())}))}function l(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:r(0),throw:r(1),return:r(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function r(a){return function(r){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,r])}}}var r="styles-module_Editext__button__sxYQX",s="styles-module_Editext__input__2-M50",u="styles-module_Editext__main_container__2azCD",c="styles-module_Editext__editing_container__1C4d6",d="styles-module_Editext__view_container__3oSYx",_="styles-module_Editext__buttons_container__2za5Q",f="styles-module_Editext__buttons_showButtonsOnHover__2Bfsd",m="styles-module_Editext__buttons_before_aligned__3Eg6w",v="styles-module_Editext__buttons_after_aligned__2ZHQz",p="styles-module_Editext__validation_message__1puii",x="styles-module_Editext__cancel_button__26sqr",y="styles-module_Editext__edit_button__310_J",b="styles-module_Editext__save_button__1Dlwo",E="styles-module_Editext__hide_default_icons__2k5RX",h="styles-module_Editext__hint__EGeV0";function g(){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 w="main-container",C="view-container",N="edit-container",O="validation-container",P="edit-button",B="save-button",k="cancel-button",D="input",I="hint";var z=t((function(t,z){var U,F=n(t.editing),Q=F[0],S=F[1],V=n(!0),K=V[0],T=V[1],H=n(t.value||""),R=H[0],X=H[1],Y=n(void 0),q=Y[0],A=Y[1],j=n(!1),G=j[0],J=j[1],M=e.createRef(),Z=e.createRef(),L=e.createRef();function W(e){var n,o=[13,"Enter"].some((function(t){return e.key===t||e.code===t})),i=[27,"Escape","Esc"].some((function(t){return e.code===t||e.key===t}));o&&(t.submitOnEnter&&ae(),null==e||e.preventDefault()),i&&(t.cancelOnEscape&&oe(),e.preventDefault()),(null===(n=t.inputProps)||void 0===n?void 0:n.onKeyDown)&&t.inputProps.onKeyDown(e)}function $(e){var n,o,i=null===(n=L.current)||void 0===n?void 0:n.contains(null==e?void 0:e.relatedTarget);t.cancelOnUnfocus&&!i&&oe(),t.submitOnUnfocus&&!i&&!t.cancelOnUnfocus&&ae(),(null===(o=t.inputProps)||void 0===o?void 0:o.onBlur)&&t.inputProps.onBlur(e)}function ee(e){var n;J(!0),t.startEditingOnFocus&&S(!0),(null===(n=t.viewProps)||void 0===n?void 0:n.onFocus)&&t.viewProps.onFocus(e)}function te(e){var n,o=[13,"Enter"].some((function(t){return e.key===t||e.code===t}))&&G&&t.startEditingOnEnter;o&&e.preventDefault(),o&&S(!0),(null===(n=t.viewProps)||void 0===n?void 0:n.onKeyDown)&&t.viewProps.onKeyDown(e)}function ne(e){var n,o;T(!0),X(e.target.value),null===(o=null===(n=t.inputProps)||void 0===n?void 0:n.onChange)||void 0===o||o.call(n,e)}function oe(){var e,n=null!=q?q:t.value;T(!0),S(!1),X(n),null===(e=t.onCancel)||void 0===e||e.call(t,n,t.inputProps)}function ie(){var e,n,o;if(void 0===(o=t.canEdit)||("function"==typeof o?o():o)){S(!0);var i=null===(e=Z.current)||void 0===e?void 0:e.querySelector("input, textarea");i&&i.focus(),null===(n=t.onEditingStart)||void 0===n||n.call(t,R,t.inputProps)}}function ae(){var e;return a(this,void 0,void 0,(function(){return l(this,(function(n){switch(n.label){case 0:return"function"!=typeof t.validation?[3,3]:[4,t.validation(R)];case 1:return n.sent()?[3,3]:(T(!1),[4,null===(e=t.onValidationFail)||void 0===e?void 0:e.call(t,R)]);case 2:return n.sent(),[2];case 3:return S(!1),A(R),t.onSave(R,t.inputProps),[2]}}))}))}o((function(){t.cancelOnUnfocus&&t.submitOnUnfocus&&console.warn("EdiText: Both `cancelOnUnfocus` and `submitOnUnfocus` are set to true. `submitOnUnfocus` is ignored in this case. Please remove one of these.")}),[t.cancelOnUnfocus,t.submitOnUnfocus]),o((function(){void 0!==t.value&&(X(t.value),A(t.value)),void 0!==t.editing&&S(t.editing)}),[t.editing,t.value]);var le,re,se,ue,ce,de,_e,fe=Q?function(){var n="textarea"===t.type?e.createElement("textarea",i({className:s,editext:D,tabIndex:t.tabIndex},t.inputProps,{onBlur:$,value:R,onChange:ne,autoFocus:Q})):e.createElement("input",i({className:s,editext:D,tabIndex:t.tabIndex},t.inputProps,{onKeyDown:W,onBlur:$,value:R,type:t.type||"text",onChange:ne,autoFocus:Q})),o=g("".concat(r),"".concat(b),t.hideIcons&&"".concat(E)),a=t.saveButtonClassName||o,l=g("".concat(r),"".concat(x),t.hideIcons&&"".concat(E)),u=t.cancelButtonClassName||l,d=c;t.editContainerClassName&&(d=t.editContainerClassName),t.viewContainerClassName&&(d=t.viewContainerClassName);var f=t.buttonsAlign||"after",y=g(_,"before"===f&&"".concat(m),"after"===f&&"".concat(v));return e.createElement("div",null,e.createElement("div",{ref:Z,className:d,editext:N},"after"===f&&n,e.createElement("div",{className:y,ref:L},e.createElement("button",{ref:M,editext:B,type:"button",className:a,onClick:ae},t.saveButtonContent),e.createElement("button",{type:"button",editext:k,className:u,onClick:oe},t.cancelButtonContent)),"before"===f&&n),!K&&!t.onValidationFail&&e.createElement("div",{className:p,editext:O},t.validationMessage||"Invalid Value"),t.hint&&e.createElement("div",{className:h,editext:I},t.hint))}():(le=g("".concat(r),"".concat(y),t.hideIcons&&"".concat(E)),re=t.editButtonClassName||le,se=g(t.viewContainerClassName||d,t.showButtonsOnHover&&"".concat(f)),ue=t.buttonsAlign||"after",ce=g(_,"before"===ue&&"".concat(m),"after"===ue&&"".concat(v)),de=t.editOnViewClick?ie:void 0,_e="function"==typeof t.renderValue?t.renderValue(R):R,e.createElement("div",{className:se,editext:C},"after"===ue&&e.createElement("div",i({tabIndex:t.tabIndex},t.viewProps,{onKeyDown:te,onFocus:ee,onClick:de,editext:"view"}),_e),e.createElement("div",{className:ce},e.createElement("button",i({type:"button",className:re},t.editButtonProps,{editext:P,onClick:ie}),t.editButtonContent)),"before"===ue&&e.createElement("div",i({tabIndex:t.tabIndex},t.viewProps,{onKeyDown:te,onFocus:ee,onClick:de,editext:C}),_e))),me=g((null===(U=t.containerProps)||void 0===U?void 0:U.className)||t.mainContainerClassName||u,t.className);return e.createElement("div",i({},t.containerProps,{className:me,editext:w,ref:z}),fe)}));z.displayName="EdiText";export{z as default};
//# sourceMappingURL=index.es.js.map