riec
Version:
Modern React component for inline edit of text/select values, written in Typescript
3 lines (2 loc) • 5.36 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,n=require("react"),a=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,i=require("@xstate/react"),r=require("xstate");!function(e){e.Text="text",e.Number="number",e.Email="email",e.Password="password",e.Date="date",e.Range="range",e.TextArea="textarea",e.Select="select"}(t||(t={}));var o=t,l=function(e){var t=e.value,i=e.type,r=e.editProps,l=e.editClassProp,u=e.options,s=e.valueKey,d=e.labelKey,c=e.handleChange,v=e.handleKeyDown,g=e.handleBlur,f=n.useRef(null),C=n.useRef(null),E=n.useRef(null),p=n.useCallback((function(){return i===o.Select?E:i===o.TextArea?C:f}),[i]);return n.useEffect((function(){var e=p();e.current&&setTimeout((function(){e.current&&(e.current.focus(),e!==f&&e!==C||e.current.select())}),10)}),[p]),i===o.Select?a.createElement("select",Object.assign({},r,l,{ref:E,value:t,onChange:function(e){return c(e.target.value)},onKeyDown:v,onBlur:g}),u.map((function(e){return a.createElement("option",{key:e[s],value:e[s]},e[d])}))):i===o.TextArea?a.createElement("textarea",Object.assign({},r,l,{ref:C,value:t,onChange:function(e){return c(e.target.value)},onKeyDown:v,onBlur:g})):a.createElement("input",Object.assign({},r,l,{ref:f,type:i,value:t,onChange:function(e){return c(e.target.value)},onKeyDown:v,onBlur:g}))};exports.InputType=o,exports.default=function(e){var t=e.value,a=e.type,u=void 0===a?o.Text:a,s=e.format,d=e.render,c=e.isDisabled,v=void 0!==c&&c,g=e.allowEditWhileLoading,f=e.optimisticUpdate,C=e.saveTimeout,E=e.savedDuration,p=e.errorDuration,h=e.editProps,m=e.viewClass,y=e.editClass,w=e.disabledClass,b=e.loadingClass,D=e.invalidClass,S=e.savedClass,V=e.errorClass,A=e.showNewLines,T=void 0===A||A,x=e.options,R=void 0===x?[]:x,O=e.valueKey,U=void 0===O?"value":O,K=e.labelKey,L=void 0===K?"label":K,I=i.useMachine(function(e){var t=e.value,n=e.isDisabled,a=e.allowEditWhileLoading,i=e.optimisticUpdate,o=e.validate,l=e.onChange,u=e.saveTimeout,s=e.savedDuration,d=e.errorDuration;return r.Machine({id:"inlineEdit",initial:"view",context:{value:t,newValue:"",oldValue:"",isValid:!o||"function"!=typeof o||o(t)},states:{view:{entry:"reset",on:{CLICK:{target:"edit",cond:"isEnabled"},FOCUS:{target:"edit",cond:"isEnabled"},SAVED:{target:"saved",actions:"commitChange"}}},edit:{entry:"validate",on:{CHANGE:{target:"edit",actions:"change"},ESC:"view",ENTER:[{target:"loading",cond:"shouldSend"},{target:"view"}],BLUR:[{target:"loading",cond:"shouldSend"},{target:"view"}]}},loading:{entry:[i?"optimisticUpdate":"noAction","sendChange"],on:{CLICK:{target:"edit",cond:"canEditWhileLoading"},FOCUS:{target:"edit",cond:"canEditWhileLoading"},SAVED:{target:"saved",actions:"commitChange"}},after:{SAVE_TIMEOUT:{target:"error",actions:i?"cancelChange":"noAction"}}},saved:{on:{CLICK:{target:"edit",cond:"isEnabled"},FOCUS:{target:"edit",cond:"isEnabled"},SAVED:{target:"saved",actions:"commitChange"}},after:{SAVED_DURATION:{target:"view"}}},error:{on:{CLICK:{target:"edit",cond:"isEnabled"},FOCUS:{target:"edit",cond:"isEnabled"},SAVED:{target:"saved",actions:"commitChange"}},after:{ERROR_DURATION:{target:"view"}}}}},{actions:{change:r.assign({newValue:function(e,t){return t.value}}),reset:r.assign({newValue:function(e){return e.value}}),optimisticUpdate:r.assign({oldValue:function(e){return e.value},value:function(e){return e.newValue}}),noAction:function(){},sendChange:function(e){l(e.newValue)},commitChange:r.assign({value:function(e,t){return t.value}}),cancelChange:r.assign({value:function(e){return e.oldValue}}),validate:o&&"function"==typeof o?r.assign({isValid:function(e){return o(e.newValue)}}):function(){}},guards:{shouldSend:function(e){return e.isValid&&e.newValue!==e.value},isEnabled:function(){return!n},canEditWhileLoading:function(){return!n&&a}},delays:{SAVE_TIMEOUT:u,SAVED_DURATION:s,ERROR_DURATION:d}})}({value:t,isDisabled:v,allowEditWhileLoading:void 0!==g&&g,optimisticUpdate:void 0===f||f,validate:e.validate,onChange:e.onChange,saveTimeout:void 0===C?2e3:C,savedDuration:void 0===E?700:E,errorDuration:void 0===p?1e3:p})),N=I[0],j=I[1],_=n.useRef(!0);n.useEffect((function(){_.current?_.current=!1:j({type:"SAVED",value:t})}),[t]);var B=[];m&&B.push(m),b&&"loading"===N.value&&B.push(b),S&&"saved"===N.value&&B.push(S),V&&"error"===N.value&&B.push(V),w&&v&&B.push(w);var F=B.length>0?{className:B.join(" ")}:{},P=[];y&&P.push(y),D&&!N.context.isValid&&P.push(D);var k=P.length>0?{className:P.join(" ")}:{},W=N.context.value;if(u===o.Select){var M=R.find((function(e){return e[U]+""===N.context.value}));M&&(W=M[L])}return s&&(W=s(W)),u===o.TextArea&&T&&(W=W.split("\n").map((function(e,t){return n.createElement("span",{key:t},e,n.createElement("br",null))}))),n.createElement(n.Fragment,null,("view"===N.value||"loading"===N.value||"saved"===N.value||"error"===N.value)&&n.createElement("span",Object.assign({},F,{onClick:function(){return j("CLICK")},onFocus:function(){return j("FOCUS")},tabIndex:0}),d?d(W):W),"edit"===N.value&&n.createElement(l,{type:u,value:N.context.newValue,editProps:h,editClassProp:k,options:R,valueKey:U,labelKey:L,handleChange:function(e){j({type:"CHANGE",value:e}),u===o.Select&&j("ENTER")},handleKeyDown:function(e){13===e.keyCode&&u!==o.TextArea?j("ENTER"):27===e.keyCode&&j("ESC")},handleBlur:function(){j("BLUR")}}))};
//# sourceMappingURL=riec.cjs.production.min.js.map