react-editext
Version:
Editable Text Component for React Applications
3 lines (2 loc) • 10.1 kB
JavaScript
;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 r(e){try{s(o.next(e))}catch(e){a(e)}}function l(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(r,l)}s((o=o.apply(e,t||[])).next())}))}function o(e,t){var n,o,i,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]},r=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return r.next=l(0),r.throw=l(1),r.return=l(2),"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function l(l){return function(s){return function(l){if(n)throw new TypeError("Generator is already executing.");for(;r&&(r=0,l[0]&&(a=0)),a;)try{if(n=1,o&&(i=2&l[0]?o.return:l[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,l[1])).done)return i;switch(o=0,i&&(l=[2&l[0],i.value]),l[0]){case 0:case 1:i=l;break;case 4:return a.label++,{value:l[1],done:!1};case 5:a.label++,o=l[1],l=[0];continue;case 7:l=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==l[0]&&2!==l[0])){a=0;continue}if(3===l[0]&&(!i||l[1]>i[0]&&l[1]<i[3])){a.label=l[1];break}if(6===l[0]&&a.label<i[1]){a.label=i[1],i=l;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(l);break}i[2]&&a.ops.pop(),a.trys.pop();continue}l=t.call(e,a)}catch(e){l=[6,e],o=0}finally{n=i=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,s])}}}"function"==typeof SuppressedError&&SuppressedError;var i="styles-module_Editext__button__Grp1Q",a="styles-module_Editext__input__A3MR3",r="styles-module_Editext__main_container__l3HTD",l="styles-module_Editext__editing_container__YSnDG",s="styles-module_Editext__view_container__jVjjF",u="styles-module_Editext__buttons_container__IgjX4",c="styles-module_Editext__buttons_showButtonsOnHover__zLbdn",d="styles-module_Editext__buttons_before_aligned__-ldJr",_="styles-module_Editext__buttons_after_aligned__q6xsx",f="styles-module_Editext__validation_message__0xkJe",m="styles-module_Editext__cancel_button__F5EL2",v="styles-module_Editext__edit_button__weU4W",p="styles-module_Editext__save_button__UKkhN",b="styles-module_Editext__hide_default_icons__kr3mJ",x="styles-module_Editext__hint__aG-W3";function y(){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("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__Grp1Q {\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__Grp1Q:hover {\n cursor: pointer;\n background-color: rgba(241, 241, 241, 1);\n}\n\n.styles-module_Editext__input__A3MR3 {\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__l3HTD {\n display: flex;\n flex-direction: column;\n}\n\n.styles-module_Editext__editing_container__YSnDG {\n display: flex;\n flex: 1;\n align-items: center;\n}\n\n.styles-module_Editext__view_container__jVjjF {\n display: flex;\n align-items: center;\n}\n\n.styles-module_Editext__buttons_container__IgjX4 {\n display: flex;\n}\n\n.styles-module_Editext__buttons_showButtonsOnHover__zLbdn .styles-module_Editext__buttons_container__IgjX4 {\n visibility: hidden;\n}\n\n.styles-module_Editext__buttons_showButtonsOnHover__zLbdn:hover .styles-module_Editext__buttons_container__IgjX4 {\n visibility: visible;\n}\n\n.styles-module_Editext__buttons_before_aligned__-ldJr {\n margin-right: 5px;\n}\n\n.styles-module_Editext__buttons_after_aligned__q6xsx {\n margin-left: 5px;\n}\n\n.styles-module_Editext__validation_message__0xkJe {\n font-weight: 500;\n color: crimson;\n font-size: 0.7em;\n margin-top: 3px;\n}\n\n.styles-module_Editext__cancel_button__F5EL2 {\n color: crimson;\n}\n\n.styles-module_Editext__cancel_button__F5EL2::before {\n content: "\\2715";\n margin: 3px;\n}\n\n.styles-module_Editext__edit_button__weU4W {\n color: #000;\n}\n\n.styles-module_Editext__edit_button__weU4W::before {\n content: "\\270E";\n margin: 3px;\n}\n\n.styles-module_Editext__save_button__UKkhN {\n color: darkgreen;\n margin-right: 3px;\n}\n\n.styles-module_Editext__save_button__UKkhN::before {\n content: "\\2713";\n margin: 3px;\n}\n\n.styles-module_Editext__hide_default_icons__kr3mJ::before {\n content: none;\n margin: 0;\n}\n\n.styles-module_Editext__hint__aG-W3 {\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="button-container",w="edit-container",C="validation-container",N="edit-button",O="save-button",P="cancel-button",k="input",B="hint";module.exports=function(I){var U,j=e.useState(I.editing),S=j[0],D=j[1],F=e.useState(!0),K=F[0],G=F[1],T=e.useState(I.value||""),V=T[0],A=T[1],H=e.useState(void 0),J=H[0],L=H[1],z=e.useState(!1),R=z[0],W=z[1],X=e.createRef(),q=e.createRef(),M=e.createRef();function Q(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&&(I.submitOnEnter&&oe(),null==e||e.preventDefault()),o&&(I.cancelOnEscape&&te(),e.preventDefault()),(null===(t=I.inputProps)||void 0===t?void 0:t.onKeyDown)&&I.inputProps.onKeyDown(e)}function Y(e){var t,n,o=null===(t=M.current)||void 0===t?void 0:t.contains(null==e?void 0:e.relatedTarget);I.cancelOnUnfocus&&!o&&te(),I.submitOnUnfocus&&!o&&!I.cancelOnUnfocus&&oe(),(null===(n=I.inputProps)||void 0===n?void 0:n.onBlur)&&I.inputProps.onBlur(e)}function Z(e){var t;W(!0),I.startEditingOnFocus&&D(!0),(null===(t=I.viewProps)||void 0===t?void 0:t.onFocus)&&I.viewProps.onFocus(e)}function $(e){var t,n=[13,"Enter"].some((function(t){return e.key===t||e.code===t}))&&R&&I.startEditingOnEnter;n&&e.preventDefault(),n&&D(!0),(null===(t=I.viewProps)||void 0===t?void 0:t.onKeyDown)&&I.viewProps.onKeyDown(e)}function ee(e){var t,n;G(!0),A(e.target.value),null===(n=null===(t=I.inputProps)||void 0===t?void 0:t.onChange)||void 0===n||n.call(t,e)}function te(){var e,t=null!=J?J:I.value;G(!0),D(!1),A(t),null===(e=I.onCancel)||void 0===e||e.call(I,t,I.inputProps)}function ne(){var e,t;(void 0===(t=I.canEdit)||("function"==typeof t?t():t))&&(D(!0),null===(e=I.onEditingStart)||void 0===e||e.call(I,V,I.inputProps))}function oe(){return n(this,void 0,void 0,(function(){var e;return o(this,(function(t){switch(t.label){case 0:return"function"!=typeof I.validation?[3,3]:[4,I.validation(V)];case 1:return t.sent()?[3,3]:(G(!1),[4,null===(e=I.onValidationFail)||void 0===e?void 0:e.call(I,V)]);case 2:return t.sent(),[2];case 3:return D(!1),L(V),I.onSave(V,I.inputProps),[2]}}))}))}e.useEffect((function(){I.cancelOnUnfocus&&I.submitOnUnfocus&&console.warn("EdiText: Both `cancelOnUnfocus` and `submitOnUnfocus` are set to true. `submitOnUnfocus` is ignored in this case. Please remove one of these.")}),[I.cancelOnUnfocus,I.submitOnUnfocus]),e.useEffect((function(){void 0!==I.value&&(A(I.value),L(I.value)),void 0!==I.editing&&D(I.editing)}),[I.editing,I.value]);var ie,ae,re,le,se,ue,ce,de,_e=S?(ie="textarea"===I.type?e.createElement("textarea",t({className:a,editext:k,tabIndex:I.tabIndex},I.inputProps,{onBlur:Y,value:V,onChange:ee,autoFocus:S})):e.createElement("input",t({className:a,editext:k,tabIndex:I.tabIndex},I.inputProps,{onKeyDown:Q,onBlur:Y,value:V,type:I.type||"text",onChange:ee,autoFocus:S})),ae=y("".concat(i),"".concat(p),I.hideIcons&&"".concat(b)),re=I.saveButtonClassName||ae,le=y("".concat(i),"".concat(m),I.hideIcons&&"".concat(b)),se=I.cancelButtonClassName||le,ue=I.editContainerClassName||I.viewContainerClassName||l,ce=I.buttonsAlign||"after",de=y(u,"before"===ce&&"".concat(d),"after"===ce&&"".concat(_)),e.createElement("div",null,e.createElement("div",{ref:q,className:ue,editext:w},"after"===ce&&ie,e.createElement("div",t({className:de},I.buttonsContainerProps,{ref:M,editext:g}),e.createElement("button",{ref:X,editext:O,type:"button",className:re,onClick:oe},I.saveButtonContent),e.createElement("button",{type:"button",editext:P,className:se,onClick:te},I.cancelButtonContent)),"before"===ce&&ie),!K&&!I.onValidationFail&&e.createElement("div",{className:f,editext:C},I.validationMessage||"Invalid Value"),I.hint&&e.createElement("div",{className:x,editext:B},I.hint))):function(){var n=y("".concat(i),"".concat(v),I.hideIcons&&"".concat(b)),o=I.editButtonClassName||n,a=y(I.viewContainerClassName||s,I.showButtonsOnHover&&"".concat(c)),r=I.buttonsAlign||"after",l=y(u,"before"===r&&"".concat(d),"after"===r&&"".concat(_)),f=I.editOnViewClick?ne:void 0,m="function"==typeof I.renderValue?I.renderValue(V):V;return e.createElement("div",{className:a,editext:h},"after"===r&&e.createElement("div",t({tabIndex:I.tabIndex},I.viewProps,{onKeyDown:$,onFocus:Z,onClick:f,editext:"view"}),m),e.createElement("div",t({className:l},I.buttonsContainerProps,{editext:g}),e.createElement("button",t({type:"button",className:o},I.editButtonProps,{editext:N,onClick:ne}),I.editButtonContent)),"before"===r&&e.createElement("div",t({tabIndex:I.tabIndex},I.viewProps,{onKeyDown:$,onFocus:Z,onClick:f,editext:h}),m))}(),fe=y((null===(U=I.containerProps)||void 0===U?void 0:U.className)||r,I.className);return e.createElement("div",t({},I.containerProps,{className:fe,editext:E}),_e)};
//# sourceMappingURL=index.min.js.map