@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
65 lines • 2.36 kB
JavaScript
import React, { useRef, useEffect } from 'react';
import { Typography, Box } from "@mui/material";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var SubContainer = function SubContainer(_ref) {
var title = _ref.title,
data = _ref.data;
var containerRef = useRef(null);
var scrollToBottom = function scrollToBottom() {
if (containerRef.current) {
containerRef.current.scrollTop += 170;
console.log("Current height", containerRef.current.scrollHeight);
}
};
var scrollToTop = function scrollToTop() {
if (containerRef.current) {
containerRef.current.scrollTop = 0;
}
};
useEffect(function () {
scrollToBottom();
});
return /*#__PURE__*/_jsxs("div", {
className: "flex-1 justify-center p-4 ml-[3px] pl-0 pr-0 rounded overflow-hidden max-h-64 relative",
children: [/*#__PURE__*/_jsx("div", {
ref: containerRef,
className: "max-h-64 overflow-y-hidden relative",
style: {
overflowY: 'auto',
scrollbarWidth: 'none'
},
children: !data.length ? /*#__PURE__*/_jsx(Typography, {
variant: "h5",
children: /*#__PURE__*/_jsxs("div", {
className: "flex flex-col gap-5",
children: [/*#__PURE__*/_jsx(Typography, {
variant: "h5",
children: "Pick Pallet 1"
}), /*#__PURE__*/_jsx(Typography, {
variant: "h5",
children: "Pick Pallet 1"
}), /*#__PURE__*/_jsx(Typography, {
variant: "h5",
children: "Pick Pallet 1"
})]
})
}) : /*#__PURE__*/_jsx("div", {
children: data.map(function (item, index) {
return /*#__PURE__*/_jsx(Typography, {
variant: "body1",
children: item
}, index);
})
})
}), /*#__PURE__*/_jsx("button", {
onClick: scrollToBottom,
className: "absolute top-4 right-[27px] mb-2 mr-2 text-gray-700 rounded-full w-6 h-6 flex items-center justify-center rotate-[267deg] text-2xl font-bold",
children: ">"
}), /*#__PURE__*/_jsx("button", {
onClick: scrollToTop,
className: "absolute top-10 right-[27px] mt-2 mr-2 text-gray-700 rounded-full w-6 h-6 flex items-center justify-center rotate-[267deg] text-2xl font-bold",
children: "<"
})]
});
};
export default SubContainer;