@bizhermit/react-sdk/elements/button.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(n,t,c,e){void 0===e&&(e=c);var r=Object.getOwnPropertyDescriptor(t,c);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[c]}}),Object.defineProperty(n,e,r)}:function(n,t,c,e){void 0===e&&(e=c),n[e]=t[c]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(n,t){Object.defineProperty(n,"default",{enumerable:!0,value:t})}:function(n,t){n.default=t}),__importStar=this&&this.__importStar||function(n){if(n&&n.__esModule)return n;var t={};if(null!=n)for(var c in n)"default"!==c&&Object.prototype.hasOwnProperty.call(n,c)&&__createBinding(t,n,c);return __setModuleDefault(t,n),t},__importDefault=this&&this.__importDefault||function(n){return n&&n.__esModule?n:{default:n}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useButton=exports.buttonCn=void 0;const string_utils_1=__importDefault(require("@bizhermit/basic-utils/dist/string-utils")),react_1=__importStar(require("react")),css_var_1=__importStar(require("../styles/css-var")),jsx_style_1=__importDefault(require("../styles/jsx-style")),attributes_1=require("../utils/attributes"),icon_1=__importStar(require("./icon")),label_1=__importDefault(require("./label")),cn="bh-btn";exports.buttonCn=cn;const Button=react_1.default.forwardRef(((n,t)=>{const c=(0,react_1.useRef)();(0,react_1.useImperativeHandle)(t,(()=>c.current));const[e,r]=(0,react_1.useState)(n.disabled??!1),a=n=>{r(!1),!0!==n&&c.current?.focus()};return(0,react_1.useEffect)((()=>{a(!0)}),[n.disabled]),(0,react_1.useEffect)((()=>{n.$hook?._set({focus:()=>c.current?.focus()})}),[n.$hook?._set]),react_1.default.createElement("button",{...(0,attributes_1.attributesWithoutChildren)(n,cn),ref:c,disabled:n.disabled||e,onClick:t=>{n.disabled||e||(n.$stopPropagation&&t.stopPropagation(),r(!0),(async()=>{const c=n.$click?.((n=>a(n)),t);null==c&&a(!0)})())}},react_1.default.createElement("div",{className:`${cn}-body`,"data-signal":n.$signal,"data-round":n.$round,"data-content":null!=n.children,"data-icon":null!=n.$icon,"data-iconright":n.$iconRight,"data-filllabel":n.$fillLabel,"data-trp":(0,attributes_1.dBool)(n.$transparent),"data-bdl":n.$borderless},null==n.$icon?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement(icon_1.default,{...string_utils_1.default.isString(n.$icon)?{$image:n.$icon}:n.$icon}),string_utils_1.default.isString(n.children)?react_1.default.createElement(label_1.default,{className:`${cn}-lbl`},n.children):n.children),ButtonStyle)})),useButton=()=>{const n=(0,react_1.useRef)({});return{focus:(0,react_1.useCallback)((()=>{n.current.focus?.()}),[]),_set:(0,react_1.useCallback)((t=>{n.current=t}),[])}};exports.useButton=useButton;const ButtonStyle=react_1.default.createElement(jsx_style_1.default,{id:cn,depsDesign:!0},(({design:n})=>`\n.${cn},\n.${cn}-body {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  flex: none;\n}\n.${cn} {\n  justify-content: stretch;\n  align-items: stretch;\n  background: transparent;\n  color: inherit;\n  border: none;\n  box-shadow: none;\n  font-size: inherit;\n  cursor: pointer;\n  user-select: none;\n  overflow: visible;\n${(0,css_var_1.switchDesign)(n,{_:`\n  padding: 0px;\n  min-height: ${css_var_1.default.size};\n  min-width: ${css_var_1.default.size};\n`,c:`\n  padding: ${css_var_1.default.pdy} ${css_var_1.default.pdx};\n  min-height: calc(${css_var_1.default.size} + ${css_var_1.default.pdy} * 2);\n  min-width: calc(${css_var_1.default.size} + ${css_var_1.default.pdx} * 2);\n`,neumorphism:"background: inherit;"})}\n}\n.${cn}-body {\n  justify-content: center;\n  align-items: center;\n  min-height: 100%;\n  width: 100%;\n  color: inherit;\n  border-radius: ${css_var_1.default.bdr};\n  overflow: hidden;\n${(0,css_var_1.switchDesign)(n,{flat:`\n  border: 1.5px solid ${css_var_1.default.bdc};\n  transition: background 0.1s, color 0.1s, border-color 0.1s;\n`,material:`\n  border: 1.5px solid ${css_var_1.default.bdc};\n  box-shadow: 0px 3px 4px -2px ${css_var_1.default.sdw.c};\n  transition: background 0.1s, color 0.1s, box-shadow 0.1s, top 0.1s, border-color 0.1s;\n`,neumorphism:`\n  box-shadow: ${css_var_1.CssPV.cvxSd};\n  transition: background 0.1s, color 0.1s, box-shadow 0.1s, margin-top 0.1s, margin-bottom 0.1s;\n`})}\n}\n.${cn}-body[data-iconright="true"] {\n  flex-direction: row-reverse;\n}\n.${cn}-body[data-icon="false"][data-content="true"],\n.${cn}-body[data-icon="true"][data-content="true"] {\n  padding-left: 5px;\n  padding-right: 5px;\n}\n.${icon_1.iconCn} + .${cn}-lbl {\n  padding-left: 3px;\n}\n.${cn}-body[data-iconright="true"] > .${icon_1.iconCn} + .${cn}-lbl {\n  padding-right: 3px;\n}\n.${cn}-body[data-filllabel="true"] > .${cn}-lbl {\n  flex: 1;\n}\n.${cn}-body[data-round="true"] {\n  border-radius: calc(${css_var_1.default.size} / 2 + 1px);\n}\n.${cn}:disabled {\n  ${css_var_1.CssPV.inactOpacity}\n  cursor: inherit;\n  pointer-events: none;\n}\n.${cn}-body > .${icon_1.iconCn} {\n  max-height: calc(${css_var_1.default.size} - 4px);\n  max-width: calc(${css_var_1.default.size}  - 4px);\n}\n${(0,css_var_1.switchDesign)(n,{flat:`\n.${cn}:hover > .${cn}-body {\n  background: ${css_var_1.default.hvrBgc};\n}\n.${cn}:hover:active > .${cn}-body {\n  background: ${css_var_1.default.actBgc};\n}\n${(0,css_var_1.signalIterator)(((n,t,c)=>`\n.${cn}-body${c} {\n  background: ${t.btn.base.bgc};\n  color: ${t.btn.base.fc};\n  border-color: ${t.btn.base.bdc};\n}\n.${cn}-body[data-trp="true"]${c} {\n  background: transparent;\n  color: ${t.fc};\n}\n.${cn}-body[data-trp="true"]${c}:not([data-bdl="true"]) {\n  border-color: ${t.bdc};\n}\n.${cn}-body${c} .${icon_1.iconCn} {\n  --bh-icon-fc: ${t.btn.base.fc};\n  --bh-icon-bc: ${t.btn.base.bgc};\n}\n.${cn}-body[data-trp="true"]${c} .${icon_1.iconCn} {\n  --bh-icon-fc: ${t.fc};\n}\n.${cn}:hover > .${cn}-body${c} {\n  background: ${t.btn.hvr.bgc};\n  color: ${t.btn.hvr.fc};\n  border-color: ${t.btn.hvr.bdc};\n}\n.${cn}:hover > .${cn}-body${c} .${icon_1.iconCn} {\n  --bh-icon-fc: ${t.btn.hvr.fc};\n  --bh-icon-bc: ${t.btn.hvr.bgc};\n}\n.${cn}:hover:active > .${cn}-body${c} {\n  background: ${t.btn.act.bgc};\n  color: ${t.btn.act.fc};\n  border-color: ${t.btn.act.bdc};\n}\n.${cn}:hover:active > .${cn}-body${c} .${icon_1.iconCn} {\n  --bh-icon-fc: ${t.btn.act.fc};\n  --bh-icon-bc: ${t.btn.act.bgc};\n}`)).join("")}\n.${cn}-body[data-bdl="true"] {\n  border-color: transparent;\n}`,material:`\n.${cn}:hover > .${cn}-body {\n  background: ${css_var_1.default.hvrBgc};\n}\n.${cn}-body[data-trp="true"] {\n  box-shadow: 0px 1px 2px ${css_var_1.default.sdw.d}, 1px 1px 2px ${css_var_1.default.sdw.d} inset;\n}\n${(0,css_var_1.signalIterator)(((n,t,c)=>`\n.${cn}-body${c} {\n  background: ${t.btn.base.bgc};\n  color: ${t.btn.base.fc};\n  border-color: ${t.btn.base.bdc};\n}\n.${cn}-body[data-trp="true"]${c} {\n  background: transparent;\n  color: ${t.fc};\n}\n.${cn}-body[data-trp="true"]${c}:not([data-bdl="true"]) {\n  border-color: ${t.bdc};\n}\n.${cn}-body${c} .${icon_1.iconCn} {\n  --bh-icon-fc: ${t.btn.base.fc};\n  --bh-icon-bc: ${t.btn.base.bgc};\n}\n.${cn}-body[data-trp="true"]${c} .${icon_1.iconCn} {\n  --bh-icon-fc: ${t.bdc};\n}\n.${cn}:hover > .${cn}-body${c} {\n  background: ${t.btn.hvr.bgc};\n  color: ${t.btn.hvr.fc};\n  border-color: ${t.btn.hvr.bdc};\n}\n.${cn}:hover > .${cn}-body${c} .${icon_1.iconCn} {\n  --bh-icon-fc: ${t.btn.hvr.fc};\n  --bh-icon-bc: ${t.btn.hvr.bgc};\n}`)).join("")}\n.${cn}:hover:active > .${cn}-body {\n  top: 1px;\n}\n.${cn}:hover:active > .${cn}-body,\n.${cn}:disabled > .${cn}-body {\n  box-shadow: none;\n}\n.${cn}-body[data-bdl="true"] {\n  border-color: transparent;\n}\n.${cn}-body[data-bdl="true"][data-trp="true"] {\n  box-shadow: none;\n}\n.${cn}:hover > .${cn}-body {\n  box-shadow: 0px 4px 4px -2px ${css_var_1.default.sdw.c};\n}`,neumorphism:`\n.${cn}-body[data-trp="true"] {\n  background: transparent;\n  box-shadow: 0 0 0px 1px ${css_var_1.default.bdc} inset, 0.5px 0.5px 2px ${css_var_1.default.sdw.d}, -0.5px -0.5px 2px ${css_var_1.default.sdw.b}, 1px 1px 2px ${css_var_1.default.sdw.d} inset, -1px -1px 2px ${css_var_1.default.sdw.b} inset;\n}\n.${cn}-body .${icon_1.iconCn} {\n  --bh-icon-bc: ${css_var_1.default.bgc};\n}\n.${cn}:hover > .${cn}-body,\n.${cn}:hover > .${cn}-body[data-trp="true"] {\n  background: inherit;\n  box-shadow: ${css_var_1.CssPV.cvxSdD};\n}\n.${cn}:hover:active > .${cn}-body {\n  box-shadow: ${css_var_1.CssPV.ccvSd};\n  margin-top: 1px;\n  margin-bottom: -1px;\n}\n.${cn}:disabled > .${cn}-body {\n  box-shadow: ${css_var_1.CssPV.ccvSdS};\n}\n.${cn}:disabled > .${cn}-body[data-trp="true"] {\n  box-shadow: 0 0 0px 1px ${css_var_1.default.bdc} inset, ${css_var_1.CssPV.ccvSdS};\n}\n${(0,css_var_1.signalIterator)(((n,t,c)=>`\n.${cn}-body${c}[data-bdl="true"]:not([data-trp="true"]) {\n  background: ${t.btn.base.bgc};\n  color: ${t.btn.base.fc};\n}\n.${cn}-body${c}:not([data-trp="true"]) {\n  background: ${t.bgc};\n  color: ${t.fc};\n}\n.${cn}:hover > .${cn}-body${c},\n.${cn}:hover > .${cn}-body${c}[data-trp="true"] {\n  background: ${t.bgc};\n  color: ${t.fc};\n}\n.${cn}-body[data-trp="true"]${c} {\n  box-shadow: 0 0 0px 1px ${t.bdc} inset, 0.5px 0.5px 2px ${css_var_1.default.sdw.d}, -0.5px -0.5px 2px ${css_var_1.default.sdw.b}, 1px 1px 2px ${css_var_1.default.sdw.d} inset, -1px -1px 2px ${css_var_1.default.sdw.b} inset;\n  color: ${t.fc};\n}\n.${cn}-body${c} .${icon_1.iconCn} {\n  --bh-icon-fc: ${t.fc};\n}\n.${cn}-body${c}:not([data-trp="true"]) .${icon_1.iconCn} {\n  --bh-icon-bc: ${t.bgc};\n}\n.${cn}:disabled > .${cn}-body[data-trp="true"]${c} {\n  box-shadow: 0 0 0px 1px ${t.btn.base.bdc} inset, ${css_var_1.CssPV.ccvSdS};\n}`)).join("")}\n.${cn}-body[data-bdl="true"],\n.${cn}-body[data-bdl="true"][data-trp="true"] {\n  box-shadow: none;\n}`})}\n.${cn}-body[data-trp="true"] .${icon_1.iconCn} {\n  --bh-icon-bc: ${css_var_1.default.bgc};\n}\n.${cn}:disabled > .${cn}-body[data-bdl="true"] {\n  box-shadow: none !important;\n}\n`));exports.default=Button;