@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/base/TMLayout.js

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { FontSize, TMColors } from '../../utils/theme';
+const StyledLayoutContainer = styled.div `
+    width: 100%;
+    position: relative;
+    height: 100%;
+    /* min-height: max-content; */
+    /* min-width: max-content; */
+    display: flex;
+    flex-direction: ${props => props.$direction === 'horizontal' ? 'row' : 'column'};
+    justify-content: ${props => props.$justifyContent};
+    align-items: ${props => props.$alignItems};
+    /* overflow: ${props => props.$direction === 'horizontal' ? 'auto' : 'hidden'}; */
+    /* gap: 3px; */
+`;
+const StyledLayoutItem = styled.div `
+    width: ${props => props.$width};
+    min-width: ${props => props.$minWidth};
+    max-width: ${props => props.$maxWidth};
+    max-height: ${props => props.$maxHeight};
+    min-height: ${props => props.$minHeight};
+    height: ${props => props.$height};
+    position: relative;
+`;
+const StyledCardHeader = styled.div `
+    width:100% ;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 4px 5px;
+    background-color: ${props => props.$backgroundColor ?? TMColors.backgroundColorHeader};
+    color: ${props => props.$color ?? TMColors.colorHeader};
+    border-top-right-radius: ${props => props.$borderRadius && '3px'};
+    border-top-left-radius: ${props => props.$borderRadius && '3px'};
+    overflow: hidden;
+    position: sticky;
+    top: 0;
+    font-weight: ${props => props.$fontWeight ?? 'normal'};
+`;
+const StyledCardContext = styled.div `
+    width: 100%;
+    height: ${props => props.$showHeader ? 'calc(100% - 25px);' : '100%'} ;
+    overflow: ${props => props.$scroll && 'auto'};
+    overflow-y:  ${props => props.$scrollY && 'auto'};
+    overflow-x:  ${props => props.$scrollX && 'auto'};
+    background-color: white;
+    top: 0;
+    padding: ${props => props.$padding ? '5px' : '0'};
+`;
+const TMCard = ({ borderRadius = true, onClick, scrollX = false, scrollY = false, width = '100%', height = '100%', children, title = '', fontSize = FontSize.defaultFontSize, fontWeight, showBorder = true, padding = true, scroll = false, backgroundColor, color }) => {
+    return (_jsxs("div", { onClick: onClick, style: { width: width, height: height, fontSize: fontSize, overflow: 'hidden' }, children: [title.length > 0 && _jsx(StyledCardHeader, { "$borderRadius": borderRadius, "$fontWeight": fontWeight, "$backgroundColor": backgroundColor, "$color": color, children: title }), _jsxs(StyledCardContext, { "$scrollX": scrollX, "$scrollY": scrollY, "$scroll": scroll, "$padding": padding, "$showHeader": title.length > 0, style: { border: showBorder ? '2px solid #CAD9EB' : 'none', borderBottomLeftRadius: showBorder ? '3px' : '0', borderBottomRightRadius: showBorder ? '3px' : '0' }, children: [" ", children, " "] })] }));
+};
+const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorColor = '#e4e4e4', overflow = 'hidden', separatorActiveColor = 'orange', separatorSize = 4, direction = 'horizontal', children, start = ['50%', '50%'], min = ['150px', '150px'], }) => {
+    function isReactFragment(variableToInspect) {
+        return variableToInspect?.type === React.Fragment;
+    }
+    const sepRef = useRef(null);
+    const firstDivRef = useRef(null);
+    const containerRef = useRef(null);
+    const secondDivRef = useRef(null);
+    const [isFrag, setIsFrag] = useState(isReactFragment(React.Children.toArray(children)[1]));
+    const [separatorBgColor, setSeparatorBgColor] = useState(separatorColor);
+    const [isResizing, setIsResizing] = useState(false);
+    useEffect(() => {
+        setIsFrag(isReactFragment(React.Children.toArray(children)[1]));
+    }, [children]);
+    useEffect(() => {
+        const firstDiv = firstDivRef.current;
+        const secondDiv = secondDivRef.current;
+        const sepDiv = sepRef.current;
+        const containerDiv = containerRef.current;
+        let xCord = 0;
+        let yCord = 0;
+        let overlay = document.createElement('div');
+        let previewCont = document.getElementById('tm-preview-container');
+        overlay.style.width = '100%';
+        overlay.style.height = '100%';
+        overlay.style.position = 'absolute';
+        overlay.style.top = '0px';
+        overlay.style.left = '0px';
+        overlay.style.backgroundColor = 'transparent';
+        overlay.style.zIndex = '2000';
+        const minFirstSize = parseFloat(min[0]);
+        const minSecondSize = parseFloat(min[1]);
+        const updateDimensions = (tempX, tempY) => {
+            const containerSize = direction === 'horizontal' ? containerDiv.offsetWidth : containerDiv.offsetHeight;
+            const firstSize = direction === 'horizontal' ? firstDiv.offsetWidth : firstDiv.offsetHeight;
+            const secondSize = direction === 'horizontal' ? secondDiv.offsetWidth : secondDiv.offsetHeight;
+            if (direction === 'horizontal') {
+                const newFirstSize = firstSize + tempX;
+                const newSecondSize = secondSize - tempX;
+                if (newFirstSize >= minFirstSize && newSecondSize >= minSecondSize) {
+                    firstDiv.style.width = `${(newFirstSize / containerSize) * 100}%`;
+                    secondDiv.style.width = `${(newSecondSize / containerSize) * 100}%`;
+                }
+                xCord += tempX;
+            }
+            else {
+                const newFirstSize = firstSize + tempY;
+                const newSecondSize = secondSize - tempY;
+                if (newFirstSize >= minFirstSize && newSecondSize >= minSecondSize) {
+                    firstDiv.style.height = `${(newFirstSize / containerSize) * 100}%`;
+                    secondDiv.style.height = `${(newSecondSize / containerSize) * 100}%`;
+                }
+                yCord += tempY;
+            }
+        };
+        const onMouseMoveSep = (e) => {
+            const containerRect = containerDiv.getBoundingClientRect();
+            if (e.clientX < containerRect.left ||
+                e.clientX > containerRect.right ||
+                e.clientY < containerRect.top ||
+                e.clientY > containerRect.bottom) {
+                return;
+            }
+            if (direction === 'horizontal') {
+                const tempX = e.clientX - xCord;
+                updateDimensions(tempX, 0);
+                xCord = e.clientX;
+            }
+            else {
+                const tempY = e.clientY - yCord;
+                updateDimensions(0, tempY);
+                yCord = e.clientY;
+            }
+        };
+        const onTouchMoveSep = (e) => {
+            const containerRect = containerDiv.getBoundingClientRect();
+            const touch = e.touches[0];
+            if (touch.clientX < containerRect.left ||
+                touch.clientX > containerRect.right ||
+                touch.clientY < containerRect.top ||
+                touch.clientY > containerRect.bottom) {
+                return;
+            }
+            if (direction === 'horizontal') {
+                const tempX = touch.clientX - xCord;
+                updateDimensions(tempX, 0);
+                xCord = touch.clientX;
+            }
+            else {
+                const tempY = touch.clientY - yCord;
+                updateDimensions(0, tempY);
+                yCord = touch.clientY;
+            }
+        };
+        const onMouseUpSep = () => {
+            setSeparatorBgColor(separatorColor);
+            document.body.style.userSelect = 'auto';
+            if (animation) {
+                firstDiv.style.transition = 'ease 300ms';
+                secondDiv.style.transition = 'ease 300ms';
+            }
+            window.removeEventListener('mousemove', onMouseMoveSep);
+            window.removeEventListener('touchmove', onTouchMoveSep);
+            window.removeEventListener('mouseup', onMouseUpSep);
+            window.removeEventListener('touchend', onMouseUpSep);
+            overlay.remove();
+            setIsResizing(false);
+        };
+        const onMouseDownSep = (e) => {
+            setIsResizing(true);
+            if (previewCont) {
+                previewCont.appendChild(overlay);
+            }
+            xCord = 'clientX' in e ? e.clientX : e.touches[0].clientX;
+            yCord = 'clientY' in e ? e.clientY : e.touches[0].clientY;
+            setSeparatorBgColor(separatorActiveColor);
+            document.body.style.userSelect = 'none';
+            firstDiv.style.transition = 'none';
+            secondDiv.style.transition = 'none';
+            window.addEventListener('mousemove', onMouseMoveSep);
+            window.addEventListener('mouseup', onMouseUpSep);
+            window.addEventListener('touchmove', onTouchMoveSep);
+            window.addEventListener('touchend', onMouseUpSep);
+        };
+        sepDiv?.addEventListener('mousedown', onMouseDownSep);
+        sepDiv?.addEventListener('touchstart', onMouseDownSep, { passive: true });
+        return () => {
+            sepDiv?.removeEventListener('mousedown', onMouseDownSep);
+            sepDiv?.removeEventListener('touchstart', onMouseDownSep);
+            window.removeEventListener('mousemove', onMouseMoveSep);
+            window.removeEventListener('mouseup', onMouseUpSep);
+            window.removeEventListener('touchmove', onTouchMoveSep);
+            window.removeEventListener('touchend', onMouseUpSep);
+        };
+    }, [direction, isFrag, separatorColor, separatorActiveColor, min, animation]);
+    return (_jsxs("div", { ref: containerRef, style: { display: 'flex', width: '100%', height: '100%', flexDirection: direction === 'vertical' ? 'column' : 'row', position: 'relative', }, children: [_jsxs("div", { style: { position: 'relative', transition: animation ? 'ease 300ms' : 'none', overflow: overflow, height: direction === 'vertical' ? start[0] : '100%', width: direction === 'horizontal' ? start[0] : '100%', minHeight: direction === 'vertical' ? min[0] : '100%', minWidth: direction === 'horizontal' ? min[0] : '100%', }, ref: firstDivRef, children: [" ", React.Children.toArray(children)[0], " ", isResizing && _jsx("div", { style: { position: 'absolute', top: '0px', left: '0px', zIndex: 1000, backgroundColor: 'transparent', width: '100%', height: '100%', pointerEvents: 'none' } }), " "] }), !isFrag && (_jsx("div", { ref: sepRef, style: { display: showSeparator ? 'block' : 'none', backgroundColor: separatorBgColor, cursor: direction === 'vertical' ? 's-resize' : 'e-resize', minWidth: direction === 'horizontal' ? `${separatorSize}px` : '100%', minHeight: direction === 'vertical' ? `${separatorSize}px` : '100%', } })), _jsxs("div", { style: { position: 'relative', transition: animation ? 'ease 300ms' : 'none', overflow: overflow, height: direction === 'vertical' ? start[1] : '100%', width: direction === 'horizontal' ? start[1] : '100%', minHeight: direction === 'vertical' ? min[1] : '100%', minWidth: direction === 'horizontal' ? min[1] : '100%', }, ref: secondDivRef, children: [" ", React.Children.toArray(children)[1], " ", isResizing && _jsx("div", { style: { position: 'absolute', top: '0px', left: '0px', zIndex: 1000, backgroundColor: 'transparent', width: '100%', height: '100%', pointerEvents: 'none' } }), " "] })] }));
+};
+const TMLayoutItem = ({ onClick, children, width = '100%', minWidth, maxWidth, maxHeight, height = '100%', minHeight }) => {
+    return (_jsx(StyledLayoutItem, { onClick: onClick, "$height": height, "$maxHeight": maxHeight, "$minHeight": minHeight, "$width": width, "$minWidth": minWidth, "$maxWidth": maxWidth, children: children }));
+};
+const TMLayoutContainer = ({ gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical' }) => {
+    const renderedEls = () => { return (React.Children.map(children, child => (child))); };
+    return (_jsxs(StyledLayoutContainer, { "$alignItems": alignItems, "$justifyContent": justifyContent, onClick: onClick, "$direction": direction, style: { gap: gap }, children: [" ", renderedEls(), " "] }));
+};
+export { TMCard, TMLayoutItem, TMSplitterLayout };
+export default TMLayoutContainer;

package/lib/components/base/TMList.d.ts

@@ -0,0 +1,9 @@
+interface ITMListItem {
+    icon: any;
+    text?: string;
+    onClick?: () => void;
+}
+declare const TMList: ({ items }: {
+    items: ITMListItem[];
+}) => import("react/jsx-runtime").JSX.Element;
+export default TMList;

package/lib/components/base/TMList.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from 'styled-components';
+import { TMColors } from '../../utils/theme';
+const StyledListItem = styled.li `
+  display: flex; 
+  flex-direction: row; 
+  align-items: center; 
+  justify-content: flex-start;
+  gap: 10px;
+  position: relative;
+  color: ${TMColors.text_normal};
+  padding: 4px 5px;
+  height: 40px;
+  width: 100%;
+  font-size: 1rem;
+  letter-spacing: 0px;
+  background-color: ${({ $isSelected }) => ($isSelected ? '#d0e5fb' : 'transparent')};
+
+  &:hover {
+        background-color: ${TMColors.border_normal};
+        cursor: pointer;
+    }
+`;
+const StyledListContainer = styled.div `
+  height: 100%;
+  width: 100%;
+  background-color: ${TMColors.default_background};
+  padding: 3px;
+  border-radius: 2px;
+  box-shadow: 1px 1px 7px rgba(0,0,0,0.15);
+`;
+const StyledIconWrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+`;
+;
+const TMList = ({ items }) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const handleItemClick = (index, onClick) => {
+        setSelectedIndex(index); // Update the selected index
+        if (onClick)
+            onClick(); // Call the item's onClick handler if provided
+    };
+    return (_jsx(StyledListContainer, { children: items?.map((item, index) => {
+            return (_jsxs(StyledListItem, { "$isSelected": selectedIndex === index, onClick: () => handleItemClick(index, item.onClick), children: [_jsx(StyledIconWrapper, { children: item.icon }), _jsx("span", { children: item.text })] }, index));
+        }) }));
+};
+export default TMList;

package/lib/components/base/TMListView.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+interface ITMListViewHeader {
+    headerIcon?: React.ReactNode;
+    headerTitle?: string;
+    firstCounter?: React.ReactNode;
+    secondCounter?: React.ReactNode;
+    titleColor?: string;
+}
+interface ListProps<T> {
+    dataSource?: T[];
+    selectedItem?: T;
+    autoScrollToSelectedItem?: boolean;
+    exprKey?: string;
+    searchKeys?: string[];
+    customColor?: string;
+    searchable?: boolean;
+    id?: string;
+    scroll?: {
+        x: number;
+        y: number;
+    };
+    orderBy?: string;
+    grouping?: string;
+    showId?: boolean;
+    showSearch?: boolean;
+    header?: React.ReactNode;
+    headerBackGroundColor?: string;
+    customGroupingHeaders?: Array<React.ReactNode>;
+    setShowId?: React.Dispatch<React.SetStateAction<boolean>>;
+    setShowSearch?: React.Dispatch<React.SetStateAction<boolean>>;
+    onScrollChange?: (e: {
+        x: number;
+        y: number;
+    }) => void;
+    onSelectionChanged?: (item: T) => void;
+    onItemClick?: (item: T) => void;
+    onItemDblClick?: (item: T) => void;
+    itemTemplate?: (item: T) => JSX.Element;
+}
+declare const TMListView: <T>({ customGroupingHeaders, headerBackGroundColor, header, showId, setShowId, showSearch, setShowSearch, grouping, orderBy, id, onScrollChange, scroll, searchKeys, searchable, itemTemplate, customColor, dataSource, exprKey, onSelectionChanged, onItemClick, onItemDblClick, selectedItem, autoScrollToSelectedItem }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TMListView;
+export declare const CustomListViewHeader: React.FC<ITMListViewHeader>;