react-bootstrap-editable/dist/editable.js

Clean editable bootstrap components for react. Ajax support!

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=require("react"),a=e(t),n=e(require("prop-types")),l=e(require("react-dom")),r=require("react-popper");function o(){return(o=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){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var a=[],n=!0,l=!1,r=void 0;try{for(var o,i=e[Symbol.iterator]();!(n=(o=i.next()).done)&&(a.push(o.value),!t||a.length!==t);n=!0);}catch(e){l=!0,r=e}finally{try{n||null==i.return||i.return()}finally{if(l)throw r}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return c(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}function s(e){var t=e.className,n=e.children,l=e.type,r=e.value,o=e.invalid,i=e.onChange,c="form-control-sm form-control ";return o&&(c+="is-invalid "),t&&(c+=t),"select"===l?a.createElement("select",{className:c,value:r,onChange:function(e){return i(e.target.value)}},n):"textarea"===l?a.createElement("textarea",{className:c,value:r,onChange:function(e){return i(e.target.value)}}):a.createElement("input",{className:c,autoFocus:!0,type:l,value:r,onChange:function(e){return i(e.target.value,e)}})}function u(e){var t=e.validationText,n=e.value,l=e.setNewValue,r=e.controls;return a.createElement(a.Fragment,null,a.createElement(s,{className:"mr-1",type:"text",value:n||"",onChange:l,invalid:!!t}),r)}function m(e){var t=e.validationText,n=e.value,l=e.setNewValue;return a.createElement(a.Fragment,null,a.createElement(s,{className:"mb-1",invalid:!!t,value:n||"",onChange:l,type:"textarea"}))}function d(e){var t=e.value,n=e.setNewValue,l=e.controls,r=e.options.map((function(e,t){return a.createElement("option",{key:t+e},e)}));return a.createElement(a.Fragment,null,a.createElement(s,{value:t,onChange:n,type:"select",className:"mr-1"},r),l)}function f(e){var t=e.value,n=e.setNewValue,l=e.controls,r=t;if(r)if(r.toISOString)r=r.toISOString().slice(0,10);else try{r=new window.Date(r).toISOString().slice(0,10)}catch(e){console.error("Unable to parse provided date value to Date object: ".concat(e.message))}return a.createElement(a.Fragment,null,a.createElement(s,{value:r||"",type:"date",className:"mr-1",onChange:function(e,t){return n(t.target.valueAsDate)}}),l)}function p(e){var n=e.isOpen,o=e.triggerElement,c=e.placement,s=e.children,u=i(t.useState(null),2),m=u[0],d=u[1],f=r.usePopper(o.current,m,{placement:c}),p=f.styles,v=f.state,E=a.createElement("div",{className:"bs-popover-auto popover",ref:d,style:p.popper,"x-placement":null==v?void 0:v.placement},a.createElement("div",{className:"arrow","data-popper-arrow":!0,style:p.arrow}),a.createElement("div",{className:"popover-inner",role:"tooltip"},a.createElement("h3",{className:"popover-header"},s[0]),a.createElement("div",{className:"popover-body"},s[1])));return n?l.createPortal(E,document.getElementsByTagName("body")[0]):null}function v(e){var t=e.value,n=e.setNewValue,l=e.controls,r=e.label;return a.createElement(a.Fragment,null,a.createElement("div",{className:"custom-file"},a.createElement("input",{type:"file",className:"custom-file-input mr-1",onChange:function(e){return n(e.target.files[0])}}),a.createElement("label",{className:"custom-file-label"},t?t.name:r)),l)}var E={textAlign:"center",width:"1.25em",height:"1em",fill:"white",verticalAlign:"-0.25em"};function b(e){var n=i(t.useState(e.initialValue),2),l=n[0],r=n[1],c=i(t.useState(e.initialValue),2),s=c[0],b=c[1],g=i(t.useState(!1),2),y=g[0],h=g[1],w=i(t.useState(null),2),x=w[0],N=w[1],S=i(t.useState(!1),2),C=S[0],V=S[1],j=t.useRef(null);function O(){var t=a.createElement("button",{className:"btn btn-success btn-sm ml-auto mr-1"},a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",style:E},a.createElement("path",{color:"white",d:"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"}))),n=a.createElement("button",{className:"btn btn-danger btn-sm",onClick:k},a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 352 512",style:E},a.createElement("path",{d:"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"})));a.isValidElement(e.renderConfirmElement)&&(t=a.cloneElement(e.renderConfirmElement,{onClick:T})),a.isValidElement(e.renderCancelElement)&&(n=a.cloneElement(e.renderCancelElement,{onClick:function(e){e.preventDefault(),k()}}));var l=a.createElement(a.Fragment,null,t,n);C&&(l=a.createElement("div",{className:"my-auto mx-4"},a.createElement("div",{className:"spinner-border",style:{width:"1.5rem",height:"1.5rem"}})));var r,i={value:s,validationText:x,controls:l,setNewValue:b,onCancel:k};switch(e.type){case"textfield":r=a.createElement(u,i);break;case"select":r=a.createElement(d,o({},i,{options:e.options}));break;case"date":r=a.createElement(f,i);break;case"textarea":return a.createElement("form",{onSubmit:T},a.createElement(m,i),a.createElement("div",{className:"d-flex align-items-start"},a.createElement("small",{className:"mt-0 form-text text-muted"},x),l));case"file":r=a.createElement(v,o({},i,{label:e.label}));break;default:return console.error("Editable(".concat(e.id,'): "').concat(e.type,'" is not a valid value for the "type" prop')),null}return a.createElement("form",{onSubmit:T,className:e.className},a.createElement("div",{className:"align-items-baseline d-flex"},r),a.createElement("small",{className:"mt-0 form-text text-muted"},x))}function T(t){t.preventDefault(),function(t){var a=e.validate?e.validate(t):null;e.onSubmit&&e.onSubmit(t),a?N(a):e.validate?function(t){e.onValidated?e.onValidated(t):e.ajax||console.error("Editable(".concat(e.id,"): Specified a validate function without onValidated or ajax"));e.ajax&&t!==l?function(t){V(!0);var a=new XMLHttpRequest;e.ajax(a,t,e.id);var n=a.onreadystatechange?a.onreadystatechange:null;a.onreadystatechange=function(){n&&n(),4===a.readyState&&(200===a.status?(h(!1),r(t),N(null)):N("Ajax Response ".concat(a.status," Error")),V(!1))}}(t):(r(t),h(!1),N(null))}(t):(r(t),h(!1))}(s)}function k(){N(null),b(l),h(!1)}if(t.useEffect((function(){!e.ajax||e.validate||e.disabled||console.error("Editable(".concat(e.id,"): You provided an ajax prop without a validate prop;\n            ajax function will not be called"))}),[]),t.useEffect((function(){r(e.initialValue),b(e.initialValue)}),[e.initialValue]),(y||e.alwaysEditing)&&"inline"===e.mode)return O();var A=l||"No value";A="date"===e.type&&l?new window.Date(l).toUTCString().slice(5,16):l,A="file"===e.type&&l?l.name:A;var q="",D="";e.isValueClickable?e.disabled?q=A:D=A:(q=A,D=e.disabled?D:e.editText),q=e.label?"".concat(e.label,": ").concat(q):q;var F="popover"===e.mode?a.createElement(p,{isOpen:y,placement:e.placement,triggerElement:j},e.label,O()):null;return a.createElement("form",{className:"form-inline ".concat(e.className)},q&&e.showText&&a.createElement("p",{className:"my-0",style:{whiteSpace:"pre-wrap"}},q),D&&a.createElement("a",{ref:j,className:"ml-1 mt-auto",href:"#",onClick:function(e){e.preventDefault(),h(!0)}},D),F)}b.defaultProps={type:"textfield",mode:"inline",alwaysEditing:!1,className:null,initialValue:null,id:null,label:null,showText:!0,disabled:!1,isValueClickable:!1,editText:"Edit",renderConfirmElement:null,renderCancelElement:null,placement:"top",validate:null,ajax:null,onSubmit:null,onValidated:null,options:null},b.propTypes={type:n.oneOf(["textfield","textarea","select","date","file"]).isRequired,mode:n.oneOf(["inline","popover"]).isRequired,alwaysEditing:n.bool,className:n.string,initialValue:n.oneOfType([n.string,n.instanceOf(f)]),id:n.oneOfType([n.string,n.number]),label:n.string,showText:n.bool,disabled:n.bool,isValueClickable:n.bool,editText:n.string,renderConfirmElement:n.element,renderCancelElement:n.element,validate:n.func,ajax:n.func,onSubmit:n.func,onValidated:n.func,placement:n.oneOf(["auto","auto-start","auto-end","top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]),options:n.array},module.exports=b;
//# sourceMappingURL=editable.js.map