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

Form maker based on React.

import e,{forwardRef as t,useState as r,useRef as n,useEffect as a}from"react";import o from"classnames";function c(e){return(c="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 i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(){return(l=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 s(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 u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?s(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):s(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function m(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 d(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 c,i=e[Symbol.iterator]();!(n=(c=i.next()).done)&&(r.push(c.value),!t||r.length!==t);n=!0);}catch(e){a=!0,o=e}finally{try{n||null==i.return||i.return()}finally{if(a)throw o}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return f(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 f(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 f(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"===c(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((function(t,n){var a=t.className,c=t.prependNode,i=t.appendNode,s=t.beforeNode,u=t.afterNode,f=t.type,p=void 0===f?"text":f,h=t.autoComplete,v=void 0===h?"off":h,N=t.disabled,O=t.readOnly,_=m(t,["className","prependNode","appendNode","beforeNode","afterNode","type","autoComplete","disabled","readOnly"]),g=y(t.styleObj||{}),E=d(r(!1),2),k=E[0],x=E[1];return e.createElement("div",{ref:n,className:o("btb-react-form","form-input",a,[{"input-disabled":N,"input-readonly":O,"input-focused":k}]),style:b(g,["btb-react-form","form-input",N?"input-disabled":"",O?"input-readonly":"",k?"input-focused":""])},e.createElement("div",{className:"input_outer",style:b(g,["input_outer"])},c?e.createElement("div",{className:"outer_item item-prepend",style:b(g,["outer_item","item-prepend"])},c):[],e.createElement("div",{className:"outer_item item-inner",style:b(g,["outer_item","item-inner"])},s?e.createElement("div",{className:"inner_item item-before",style:b(g,["inner_item","item-before"])},s):[],e.createElement("input",l({type:p,autoComplete:v,readOnly:O,disabled:N,className:"inner_item item-input",style:b(g,["inner_item","item-input"])},_,{onFocus:function(){x(!0)},onBlur:function(){x(!1)}})),u?e.createElement("div",{className:"inner_item item-after",style:b(g,["inner_item","item-after"])},u):[]),i?e.createElement("div",{className:"outer_item item-append",style:b(g,["outer_item","item-append"])},i):[]))})),v=t((function(t,c){var i=t.className,s=t.children,u=t.prependNode,f=t.appendNode,p=t.beforeNode,h=t.placeholder,v=t.disabled,N=m(t,["className","children","prependNode","appendNode","beforeNode","placeholder","disabled"]),O=y(t.styleObj||{}),_=d(r(!1),2),g=_[0],E=_[1],k=n(),x=function(){"--placeholder--"===k.current.value?k.current.classList.add("select-unselect"):k.current.classList.remove("select-unselect")};return a((function(){return x(),k.current.addEventListener("change",x),function(){k.current&&k.current.removeEventListener("change",x)}}),[]),e.createElement("div",{ref:c,className:o("btb-react-form","form-select",i,[{"select-disabled":v,"select-focused":g}]),style:b(O,["btb-react-form","form-select",v?"select-disabled":"",g?"select-focused":""])},e.createElement("div",{className:"select_outer",style:b(O,["select_outer"])},u?e.createElement("div",{className:"outer_item item-prepend",style:b(O,["outer_item","item-prepend"])},u):[],e.createElement("div",{className:"outer_item item-inner",style:b(O,["outer_item","item-inner"])},p?e.createElement("div",{className:"inner_item item-before",style:b(O,["inner_item","item-before"])},p):[],e.createElement("select",l({ref:k,className:"inner_item item-select",style:b(O,["inner_item","item-select"]),disabled:v},N,{onFocus:function(){E(!0)},onBlur:function(){E(!1)}}),h?e.createElement("option",{value:"--placeholder--",disabled:!0},h):[],s)),f?e.createElement("div",{className:"outer_item item-append",style:b(O,["outer_item","item-append"])},f):[]))})),N=t((function(t,n){var c=t.id,i=t.className,s=t.children,f=t.formValue,p=t.size,h=t.color,v=t.signColor,N=t.inline,O=t.disabled,_=m(t,["id","className","children","formValue","size","color","signColor","inline","disabled"]),g=y(t.styleObj||{}),E=d(r(),2),k=E[0],x=E[1],j=d(r(),2),C=j[0],w=j[1];return a((function(){f&&w(f.includes(t.value))}),[f]),a((function(){w(t.checked)}),[t.checked]),a((function(){x(c||"checkbox-".concat(Date.now(),"-").concat(Math.ceil(1e3*Math.random())))}),[c]),e.createElement("div",{ref:n,className:o("btb-react-form","form-checkbox",i,[{"checkbox-disabled":O,"checkbox-inline":N}]),style:b(g,["btb-react-form","form-checkbox",O?"checkbox-disabled":"",N?"checkbox-inline":""])},e.createElement("input",l({id:k,className:"checkbox_input",style:b(g,["checkbox_input"]),disabled:O},_,{type:"checkbox",checked:C,onClick:function(){if(_.onClick){var e=[];f&&(e=e.concat(f)),e=!e.includes(t.value)&&t.value?e.concat(t.value):e.filter((function(e){return e!==t.value})),_.onClick(e,t.value)}}})),e.createElement("label",{className:"checkbox_item",style:u({width:p||"1rem",height:p||"1rem",color:h||"black",background:"currentColor"},b(g,["checkbox_item"])),htmlFor:k},e.createElement("div",{className:"item_button",style:u({color:v||"white"},b(g,["item_button"]))})),s?e.createElement("label",{className:"checkbox_label",style:b(g,["checkbox_label"]),htmlFor:k},s):[])})),O=t((function(t,n){var c=t.id,i=t.className,s=t.children,f=t.formValue,p=t.size,h=t.color,v=t.inline,N=t.disabled,O=m(t,["id","className","children","formValue","size","color","inline","disabled"]),_=y(t.styleObj||{}),g=d(r(),2),E=g[0],k=g[1],x=d(r(),2),j=x[0],C=x[1];return a((function(){f&&C(f===t.value)}),[f]),a((function(){C(t.checked)}),[t.checked]),a((function(){k(c||"checkbox-".concat(Date.now(),"-").concat(Math.ceil(1e3*Math.random())))}),[c]),e.createElement("div",{ref:n,className:o("btb-react-form","form-radio",i,[{"radio-disabled":N,"radio-inline":v}]),style:b(_,["btb-react-form","form-radio",N?"radio-disabled":"",v?"radio-inline":""])},e.createElement("input",l({id:E,className:"radio_input",style:b(_,["radio_input"]),disabled:N},O,{type:"radio",checked:j,onClick:function(){O.onClick&&O.onClick(t.value)},onChange:function(){O.onChange&&O.onChange(t.value)}})),e.createElement("label",{className:"radio_item",style:u({width:p||"1rem",height:p||"1rem",color:h||"black"},b(_,["checkbox_item"])),htmlFor:E},e.createElement("div",{className:"item_button",style:b(_,["item_button"])})),s?e.createElement("label",{className:"radio_label",style:b(_,["radio_label"]),htmlFor:E},s):[])})),_=t((function(t,n){var c=t.className,i=t.showCounter,s=t.disabled,u=t.readOnly,f=m(t,["className","showCounter","disabled","readOnly"]),p=y(t.styleObj||{}),h=d(r(!1),2),v=h[0],N=h[1],O=d(r(""),2),_=O[0],g=O[1];return a((function(){f.defaultValue&&g(f.defaultValue),f.value&&g(f.value)}),[]),e.createElement("div",{ref:n,className:o("btb-react-form","form-textarea",c,[{"textarea-disabled":s,"textarea-readonly":u,"textarea-focused":v}]),style:b(p,["btb-react-form","form-focused",s?"textarea-disabled":"",v?"textarea-focused":""])},e.createElement("textarea",l({className:"textarea_input",style:b(p,["textarea_input"]),disabled:s,readOnly:u},f,{onChange:function(e){g(e.target.value),f.onChange&&f.onChange()},onFocus:function(){N(!0)},onBlur:function(){N(!1)}})),i?e.createElement("div",{className:"textarea_counter",style:b(p,["textarea_counter"])},t.maxLength?"".concat(_.length," / ").concat(t.maxLength):"".concat(_.length)):[])}));export{N as Checkbox,h as Input,O as Radio,v as Select,_ as Textarea};