@blacktoolbox/react-form/umd/index.js

Form maker based on React.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("classnames")):"function"==typeof define&&define.amd?define(["exports","react","classnames"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["btblab-react-form"]={},e.React,e.classnames)}(this,(function(e,t,r){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(t),o=n(r);function l(e){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function u(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?u(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function d(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function f(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 r=[],n=!0,a=!1,o=void 0;try{for(var l,c=e[Symbol.iterator]();!(n=(l=c.next()).done)&&(r.push(l.value),!t||r.length!==t);n=!0);}catch(e){a=!0,o=e}finally{try{n||null==c.return||c.return()}finally{if(a)throw o}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return m(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return m(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 m(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var b=function(e,t){var r;return t.forEach((function(t){r=Object.assign({},r,p(e,t))})),r},p=function(e,t){var r={};return"object"===l(e)&&Object.keys(e).find((function(n){if(n===t)return r=Object.assign({},e[n]),!0})),r},y=function(e){var t={};return Object.keys(e).forEach((function(r){t[r]={},Object.keys(e[r]).forEach((function(n){var a=n.replace(/-(\w)/g,(function(e,t){return t.toUpperCase()}));t[r][a]=e[r][n]}))})),t},h=t.forwardRef((function(e,r){var n=e.className,l=e.prependNode,c=e.appendNode,u=e.beforeNode,s=e.afterNode,m=e.type,p=void 0===m?"text":m,h=e.autoComplete,v=void 0===h?"off":h,N=e.disabled,O=e.readOnly,_=d(e,["className","prependNode","appendNode","beforeNode","afterNode","type","autoComplete","disabled","readOnly"]),E=y(e.styleObj||{}),g=f(t.useState(!1),2),x=g[0],k=g[1];return a.default.createElement("div",{ref:r,className:o.default("btb-react-form","form-input",n,[{"input-disabled":N,"input-readonly":O,"input-focused":x}]),style:b(E,["btb-react-form","form-input",N?"input-disabled":"",O?"input-readonly":"",x?"input-focused":""])},a.default.createElement("div",{className:"input_outer",style:b(E,["input_outer"])},l?a.default.createElement("div",{className:"outer_item item-prepend",style:b(E,["outer_item","item-prepend"])},l):[],a.default.createElement("div",{className:"outer_item item-inner",style:b(E,["outer_item","item-inner"])},u?a.default.createElement("div",{className:"inner_item item-before",style:b(E,["inner_item","item-before"])},u):[],a.default.createElement("input",i({type:p,autoComplete:v,readOnly:O,disabled:N,className:"inner_item item-input",style:b(E,["inner_item","item-input"])},_,{onFocus:function(){k(!0)},onBlur:function(){k(!1)}})),s?a.default.createElement("div",{className:"inner_item item-after",style:b(E,["inner_item","item-after"])},s):[]),c?a.default.createElement("div",{className:"outer_item item-append",style:b(E,["outer_item","item-append"])},c):[]))})),v="--placeholder--",N=t.forwardRef((function(e,r){var n=e.className,l=e.children,c=e.prependNode,u=e.appendNode,s=e.beforeNode,m=e.placeholder,p=e.disabled,h=d(e,["className","children","prependNode","appendNode","beforeNode","placeholder","disabled"]),N=y(e.styleObj||{}),O=f(t.useState(!1),2),_=O[0],E=O[1],g=t.useRef(),x=function(){g.current.value===v?g.current.classList.add("select-unselect"):g.current.classList.remove("select-unselect")};return t.useEffect((function(){return x(),g.current.addEventListener("change",x),function(){g.current&&g.current.removeEventListener("change",x)}}),[]),a.default.createElement("div",{ref:r,className:o.default("btb-react-form","form-select",n,[{"select-disabled":p,"select-focused":_}]),style:b(N,["btb-react-form","form-select",p?"select-disabled":"",_?"select-focused":""])},a.default.createElement("div",{className:"select_outer",style:b(N,["select_outer"])},c?a.default.createElement("div",{className:"outer_item item-prepend",style:b(N,["outer_item","item-prepend"])},c):[],a.default.createElement("div",{className:"outer_item item-inner",style:b(N,["outer_item","item-inner"])},s?a.default.createElement("div",{className:"inner_item item-before",style:b(N,["inner_item","item-before"])},s):[],a.default.createElement("select",i({ref:g,className:"inner_item item-select",style:b(N,["inner_item","item-select"]),disabled:p},h,{onFocus:function(){E(!0)},onBlur:function(){E(!1)}}),m?a.default.createElement("option",{value:v,disabled:!0},m):[],l)),u?a.default.createElement("div",{className:"outer_item item-append",style:b(N,["outer_item","item-append"])},u):[]))})),O=t.forwardRef((function(e,r){var n=e.id,l=e.className,c=e.children,u=e.formValue,m=e.size,p=e.color,h=e.signColor,v=e.inline,N=e.disabled,O=d(e,["id","className","children","formValue","size","color","signColor","inline","disabled"]),_=y(e.styleObj||{}),E=f(t.useState(),2),g=E[0],x=E[1],k=f(t.useState(),2),j=k[0],w=k[1];return t.useEffect((function(){u&&w(u.includes(e.value))}),[u]),t.useEffect((function(){w(e.checked)}),[e.checked]),t.useEffect((function(){x(n||"checkbox-".concat(Date.now(),"-").concat(Math.ceil(1e3*Math.random())))}),[n]),a.default.createElement("div",{ref:r,className:o.default("btb-react-form","form-checkbox",l,[{"checkbox-disabled":N,"checkbox-inline":v}]),style:b(_,["btb-react-form","form-checkbox",N?"checkbox-disabled":"",v?"checkbox-inline":""])},a.default.createElement("input",i({id:g,className:"checkbox_input",style:b(_,["checkbox_input"]),disabled:N},O,{type:"checkbox",checked:j,onClick:function(){if(O.onClick){var t=[];u&&(t=t.concat(u)),t=!t.includes(e.value)&&e.value?t.concat(e.value):t.filter((function(t){return t!==e.value})),O.onClick(t,e.value)}}})),a.default.createElement("label",{className:"checkbox_item",style:s({width:m||"1rem",height:m||"1rem",color:p||"black",background:"currentColor"},b(_,["checkbox_item"])),htmlFor:g},a.default.createElement("div",{className:"item_button",style:s({color:h||"white"},b(_,["item_button"]))})),c?a.default.createElement("label",{className:"checkbox_label",style:b(_,["checkbox_label"]),htmlFor:g},c):[])})),_=t.forwardRef((function(e,r){var n=e.id,l=e.className,c=e.children,u=e.formValue,m=e.size,p=e.color,h=e.inline,v=e.disabled,N=d(e,["id","className","children","formValue","size","color","inline","disabled"]),O=y(e.styleObj||{}),_=f(t.useState(),2),E=_[0],g=_[1],x=f(t.useState(),2),k=x[0],j=x[1];return t.useEffect((function(){u&&j(u===e.value)}),[u]),t.useEffect((function(){j(e.checked)}),[e.checked]),t.useEffect((function(){g(n||"checkbox-".concat(Date.now(),"-").concat(Math.ceil(1e3*Math.random())))}),[n]),a.default.createElement("div",{ref:r,className:o.default("btb-react-form","form-radio",l,[{"radio-disabled":v,"radio-inline":h}]),style:b(O,["btb-react-form","form-radio",v?"radio-disabled":"",h?"radio-inline":""])},a.default.createElement("input",i({id:E,className:"radio_input",style:b(O,["radio_input"]),disabled:v},N,{type:"radio",checked:k,onClick:function(){N.onClick&&N.onClick(e.value)},onChange:function(){N.onChange&&N.onChange(e.value)}})),a.default.createElement("label",{className:"radio_item",style:s({width:m||"1rem",height:m||"1rem",color:p||"black"},b(O,["checkbox_item"])),htmlFor:E},a.default.createElement("div",{className:"item_button",style:b(O,["item_button"])})),c?a.default.createElement("label",{className:"radio_label",style:b(O,["radio_label"]),htmlFor:E},c):[])})),E=t.forwardRef((function(e,r){var n=e.className,l=e.showCounter,c=e.disabled,u=e.readOnly,s=d(e,["className","showCounter","disabled","readOnly"]),m=y(e.styleObj||{}),p=f(t.useState(!1),2),h=p[0],v=p[1],N=f(t.useState(""),2),O=N[0],_=N[1];return t.useEffect((function(){s.defaultValue&&_(s.defaultValue),s.value&&_(s.value)}),[]),a.default.createElement("div",{ref:r,className:o.default("btb-react-form","form-textarea",n,[{"textarea-disabled":c,"textarea-readonly":u,"textarea-focused":h}]),style:b(m,["btb-react-form","form-focused",c?"textarea-disabled":"",h?"textarea-focused":""])},a.default.createElement("textarea",i({className:"textarea_input",style:b(m,["textarea_input"]),disabled:c,readOnly:u},s,{onChange:function(e){_(e.target.value),s.onChange&&s.onChange()},onFocus:function(){v(!0)},onBlur:function(){v(!1)}})),l?a.default.createElement("div",{className:"textarea_counter",style:b(m,["textarea_counter"])},e.maxLength?"".concat(O.length," / ").concat(e.maxLength):"".concat(O.length)):[])}));e.Checkbox=O,e.Input=h,e.Radio=_,e.Select=N,e.Textarea=E,Object.defineProperty(e,"__esModule",{value:!0})}));