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

Form maker based on React.

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