105 lines
4.9 KiB
JavaScript
105 lines
4.9 KiB
JavaScript
|
"use strict";
|
||
|
|
exports.id = 5449;
|
||
|
|
exports.ids = [5449];
|
||
|
|
exports.modules = {
|
||
|
|
|
||
|
|
/***/ 5449:
|
||
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||
|
|
|
||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
||
|
|
/* harmony export */ "Z": () => (/* binding */ ButtonGroup)
|
||
|
|
/* harmony export */ });
|
||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
||
|
|
// @ts-check
|
||
|
|
/**
|
||
|
|
* Imports
|
||
|
|
* ==============================================================================
|
||
|
|
*/
|
||
|
|
|
||
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
|
||
|
|
* Main Component { Functional }
|
||
|
|
* ==============================================================================
|
||
|
|
* @param {{
|
||
|
|
* children: React.ReactNode,
|
||
|
|
* column?: boolean,
|
||
|
|
* className?: string,
|
||
|
|
* }} props - React component props including { children }
|
||
|
|
*/ function ButtonGroup({ children , column , className }) {
|
||
|
|
/**
|
||
|
|
* Get Contexts
|
||
|
|
*
|
||
|
|
* @abstract { React.useContext }
|
||
|
|
*/ ////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
/**
|
||
|
|
* Javascript Variables
|
||
|
|
*
|
||
|
|
* @abstract Non hook variables and functions
|
||
|
|
*/ ////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
/**
|
||
|
|
* React Hooks
|
||
|
|
*
|
||
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
||
|
|
*/ const btnGroupRef = react__WEBPACK_IMPORTED_MODULE_1___default().useRef();
|
||
|
|
react__WEBPACK_IMPORTED_MODULE_1___default().useEffect(()=>{
|
||
|
|
try {
|
||
|
|
/** @type {HTMLDivElement & *} */ const buttonGroupWrapper = btnGroupRef.current;
|
||
|
|
/** @type {any} */ const children = buttonGroupWrapper.childNodes;
|
||
|
|
const allAvailableBtns = Array.from(children);
|
||
|
|
if (allAvailableBtns?.length === 1) return;
|
||
|
|
allAvailableBtns.forEach((btn, index)=>{
|
||
|
|
let targetElement = btn;
|
||
|
|
if (targetElement.classList.contains("dropdown-wrapper")) {
|
||
|
|
const targetClild = Array.from(btn.childNodes).filter((node)=>node?.nodeName?.match(/button/i) || node.classList.contains("button"));
|
||
|
|
if (targetClild && targetClild[0]) {
|
||
|
|
targetElement = targetClild[0];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const targetBorderSide = column ? "borderTop" : "borderLeft";
|
||
|
|
const targetBorderRadiusStart = column ? "borderBottomRightRadius" : "borderTopRightRadius";
|
||
|
|
const targetBorderRadiusEnd = column ? "borderBottomLeftRadius" : "borderBottomRightRadius";
|
||
|
|
const targetBorderOppositeRadiusStart = column ? "borderTopRightRadius" : "borderTopLeftRadius";
|
||
|
|
const targetBorderOppositeRadiusEnd = column ? "borderTopLeftRadius" : "borderBottomLeftRadius";
|
||
|
|
if (index < allAvailableBtns.length - 1) {
|
||
|
|
targetElement.style[targetBorderRadiusStart] = 0;
|
||
|
|
targetElement.style[targetBorderRadiusEnd] = 0;
|
||
|
|
}
|
||
|
|
if (index > 0) {
|
||
|
|
targetElement.style[targetBorderSide] = "none";
|
||
|
|
targetElement.style[targetBorderOppositeRadiusStart] = 0;
|
||
|
|
targetElement.style[targetBorderOppositeRadiusEnd] = 0;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} catch (/** @type {any} */ error) {
|
||
|
|
console.log(error.message);
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
/**
|
||
|
|
* Function Return
|
||
|
|
*
|
||
|
|
* @abstract Main Function Return
|
||
|
|
*/ return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
||
|
|
className: "items-stretch gap-0" + (column ? " flex-col" : " flex-wrap xl:flex-nowrap") + (className ? " " + className : ""),
|
||
|
|
// @ts-ignore
|
||
|
|
ref: btnGroupRef,
|
||
|
|
children: children
|
||
|
|
});
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/***/ })
|
||
|
|
|
||
|
|
};
|
||
|
|
;
|