@bizhermit/react-sdk/elements/list/list-view-columns/button-column.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,i){void 0===i&&(i=n);var l=Object.getOwnPropertyDescriptor(t,n);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,i,l)}:function(e,t,n,i){void 0===i&&(i=n),e[i]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const string_utils_1=__importDefault(require("@bizhermit/basic-utils/dist/string-utils")),react_1=__importDefault(require("react")),css_var_1=__importStar(require("../../../styles/css-var")),jsx_style_1=__importDefault(require("../../../styles/jsx-style")),dom_1=require("../../../utils/dom"),icon_1=require("../../icon"),list_view_1=require("../list-view"),cn="bh-lv_c-btn",ListViewButtonColumn=e=>{const t=string_utils_1.default.isString(e.icon)?{image:e.icon}:e.icon;return{sort:!1,resize:!1,cellTextAlign:"center",width:null==t||string_utils_1.default.isNotEmpty(e.buttonLabel)?e.width:-1,...e,initialize:()=>{const n=document.createElement("div");if(n.classList.add(cn),e.title&&(n.title=e.title),null!=t){const e=document.createElement("div");e.classList.add(`${icon_1.iconCn}`,`${icon_1.iconCn}-${t.image}`),e.innerHTML=`<div class="${icon_1.iconCn}_c" />`.repeat((0,icon_1.iconChildCount)(t.image)),t.signal&&e.setAttribute("data-signal",t.signal),"right"===t.position&&n.setAttribute("data-iconright",""),n.appendChild(e)}if(!string_utils_1.default.isEmpty(e.buttonLabel)){const t=document.createElement("div");t.classList.add(`${list_view_1.listViewCn}-lbl`),t.textContent=e.buttonLabel,n.appendChild(t)}return null==t||string_utils_1.default.isEmpty(e.buttonLabel)||n.setAttribute("data-icontext",""),{elem:n}},cellInitialize:(e,t)=>{e.element.classList.add(`${cn}-cell`);const n=(0,dom_1.cloneDomElement)(t.elem);e.contentElements.push(n),e.element.appendChild(n)},cellRender:null==e.valid||!0===e.disabled?null:t=>{const n=e.valid(t.row.item.data);t.element.setAttribute("data-disabled",String(!("boolean"==typeof n?n:!0===n.valid)))},clickCell:(t,n)=>{if(!e.disabled&&null!=e.clickCell){if(e.valid){const n=e.valid(t.data);if("boolean"==typeof n){if(!0!==n)return}else if(!0!==n.valid)return}return e.clickCell(t,n)}},jsxStyle:react_1.default.createElement(react_1.default.Fragment,null,Style,icon_1.IconStyle)}},Style=react_1.default.createElement(jsx_style_1.default,{id:cn,depsDesign:!0},(({design:e})=>`\n.${cn}-cell {\n  padding: 2px;\n  justify-content: center;\n}\n.${cn} {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  flex: none;\n  width: 100%;\n  height: 100%;\n  border-radius: ${css_var_1.default.bdr};\n${(0,css_var_1.switchDesign)(e,{fm:`border: 1px solid ${css_var_1.default.bdc};`,flat:"transition: background 0.1s;",material:"transition: box-shadow 0.1s, top 0.1s;",neumorphism:"transition: box-shadow 0.1s, margin-top 0.1s, margin-bottom 0.1s;"})}\n}\n.${cn}[data-iconright] {\n  flex-flow: row-reverse nowrap;\n}\n.${cn}[data-icontext] {\n  padding-left: 5px;\n  padding-right: 5px;\n}\n.${cn}[data-icontext]:not([data-iconright]) > .${list_view_1.listViewCn}-lbl {\n  padding-left: 3px;\n}\n.${cn}[data-icontext][data-iconright] > .${list_view_1.listViewCn}-lbl {\n  padding-right: 3px;\n}\n.${cn}-lbl {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  flex: 1;\n}\n.${cn}-cell[data-align="left"] > .${cn} > .${list_view_1.listViewCn}-lbl {\n  text-align: left;\n}\n.${cn}-cell[data-align="center"] > .${cn} > .${list_view_1.listViewCn}-lbl {\n  text-align: center;\n}\n.${cn}-cell[data-align="right"] > .${cn} > .${list_view_1.listViewCn}-lbl {\n  text-align: right;\n}\n.${cn}-cell[data-disabled="false"] {\n  cursor: pointer;\n}\n${(0,css_var_1.switchDesign)(e,{flat:`\n.${cn}-cell[data-disabled="false"] > .${cn} {\n  transition: background\n}\n.${cn}-cell[data-disabled="false"] > .${cn}:hover {\n  background: ${css_var_1.default.hvrBgc};\n}\n.${cn}-cell[data-disabled="false"] > .${cn}:hover:active {\n  background: ${css_var_1.default.actBgc};\n}`,material:`\n.${cn}-cell[data-disabled="false"] > .${cn} {\n  box-shadow: 0px 3px 4px -2px ${css_var_1.default.sdw.c};\n}\n.${cn}-cell[data-disabled="false"] > .${cn}:hover {\n  background: ${css_var_1.default.hvrBgc};\n  box-shadow: 0px 4px 4px -2px ${css_var_1.default.sdw.c};\n}\n.${cn}-cell[data-disabled="false"] > .${cn}:hover:active {\n  box-shadow: none;\n  top: 1px;\n}`,neumorphism:`\n.${cn}-cell[data-disabled="false"] > .${cn} {\n  box-shadow: ${css_var_1.CssPV.cvxSd};\n}\n.${cn}-cell[data-disabled="false"] > .${cn}:hover {\n  box-shadow: ${css_var_1.CssPV.cvxSdD};\n}\n.${cn}-cell[data-disabled="false"] > .${cn}:hover:active {\n  box-shadow: ${css_var_1.CssPV.ccvSd};\n  margin-top: 1px;\n  margin-bottom: -1px;\n}`})}\n.${cn}-cell[data-disabled="true"] > .${cn} {\n  ${css_var_1.CssPV.inactOpacity}\n${(0,css_var_1.switchDesign)(e,{neumorphism:`box-shadow: ${css_var_1.CssPV.ccvSdS};`})}\n}\n`));exports.default=ListViewButtonColumn;