@archbase/components 3.0.0

package/src/list/treeview/ArchbaseTreeViewItem.tsx

@@ -0,0 +1,210 @@
+/**
+ * ArchbaseTreeViewItem — linha da árvore com checks, ícones e suporte a carregamento preguiçoso.
+ * @status stable
+ */
+import { ActionIcon, Space, Text } from '@mantine/core';
+import { useForceUpdate } from '@mantine/hooks';
+import { IconChevronDown, IconChevronRight, IconSquare, IconSquareCheck } from '@tabler/icons-react';
+import React, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { ArchbaseTreeNode, ArchbaseTreeViewOptions } from './ArchbaseTreeView.types';
+
+export interface ArchbaseTreeViewItemProps {
+	id: string;
+	node: ArchbaseTreeNode;
+	options: ArchbaseTreeViewOptions;
+	level: number;
+	onLoadDataSource: (id: string) => void;
+	onSelectedStatusChanged: (id: string, selected: boolean) => void;
+	onExpandedCollapsedChanged: (id: string, expanded: boolean) => void;
+	onFocusedChanged: (id: string) => void;
+	getFocused: () => ArchbaseTreeNode | undefined;
+	onNodeDoubleClicked: (id: string, selected: boolean) => void;
+	addNode: (id: string, text: string) => void;
+	removeNode: (id: string) => void;
+	customRenderText?: (node: ArchbaseTreeNode) => ReactNode;
+	update: number;
+}
+
+export const ArchbaseTreeViewItem: React.FC<ArchbaseTreeViewItemProps> = ({
+	node,
+	options,
+	level,
+	onSelectedStatusChanged,
+	onExpandedCollapsedChanged,
+	onFocusedChanged,
+	getFocused,
+	onNodeDoubleClicked,
+	onLoadDataSource,
+	addNode,
+	removeNode,
+	id,
+	customRenderText,
+	update,
+}: ArchbaseTreeViewItemProps) => {
+	const [expanded, setExpanded] = useState(false);
+	const [selected, setSelected] = useState(false);
+	const forceUpdate = useForceUpdate();
+
+	const toggleExpanded = useCallback(
+		(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+			const newExpanded = !expanded;
+			setExpanded(newExpanded);
+			onExpandedCollapsedChanged(node.id, newExpanded);
+			event.stopPropagation();
+		},
+		[expanded, node.id, onExpandedCollapsedChanged, node.state.expanded],
+	);
+
+	useEffect(() => {
+		if (node.state) {
+			setExpanded(node.state.expanded);
+		}
+		if (node.state) {
+			setSelected(node.state.selected);
+		}
+	}, [node.state.expanded, node.state.selected]);
+
+	const toggleSelected = useCallback(
+		(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+			const newSelected = !selected;
+			setSelected(newSelected);
+			onSelectedStatusChanged(node.id, newSelected);
+			event.stopPropagation();
+			forceUpdate();
+		},
+		[selected, node.id, onSelectedStatusChanged, node.state.selected],
+	);
+
+	const toggleFocused = useCallback(
+		(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+			onFocusedChanged(node.id);
+			forceUpdate();
+			event.stopPropagation();
+		},
+		[node.id, onFocusedChanged],
+	);
+
+	const doubleClicked = useCallback(
+		(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+			onNodeDoubleClicked(node.id, selected);
+			event.stopPropagation();
+		},
+		[node.id, selected, onNodeDoubleClicked],
+	);
+
+	const style = useMemo(() => {
+		const itemStyle: React.CSSProperties = {};
+		if (options.highlightSelected && selected) {
+			itemStyle.color = options.selectedColor;
+			itemStyle.backgroundColor = options.selectedBackgroundColor;
+		} else {
+			itemStyle.color = node.color || options.color;
+			itemStyle.backgroundColor = node.backgroundColor || options.backgroundColor;
+		}
+		return itemStyle;
+	}, [selected, node, options]);
+
+	const checkSelectedIcon = useMemo(() => {
+		if (options.selectable) {
+			return selected ? (
+				<ActionIcon onClick={toggleSelected} variant="transparent">
+					<IconSquareCheck size="1.2rem" style={style} />
+				</ActionIcon>
+			) : (
+				<ActionIcon onClick={toggleSelected} variant="transparent">
+					<IconSquare size="1.2rem" style={style} />
+				</ActionIcon>
+			);
+		}
+	}, [options.selectable, selected, style, toggleSelected]);
+
+	const expandCollapseIcon = useMemo(() => {
+		if (!expanded) {
+			return (
+				<ActionIcon onClick={toggleExpanded} variant="transparent">
+					<IconChevronRight size="1.2rem" style={{ ...style }} />
+				</ActionIcon>
+			);
+		} else {
+			if (node.state?.loading === true) {
+				return <i style={{ ...style, width: '1rem' }} className="svg-inline--fa fa-spinner fa-w-16 fa-spin fa-lg"></i>;
+			} else {
+				return (
+					<ActionIcon onClick={toggleExpanded} variant="transparent">
+						<IconChevronDown size="1.2rem" style={{ ...style }} />
+					</ActionIcon>
+				);
+			}
+		}
+	}, [expanded, selected, node, style, toggleExpanded, toggleSelected]);
+
+	const styleFocused = useMemo(() => {
+		const focusedNode = getFocused();
+		if (focusedNode && focusedNode.id === node.id) {
+			return {
+				color: options.focusedColor,
+				backgroundColor: options.focusedBackgroundColor,
+			};
+		}
+		return {};
+	}, [node.id, getFocused, options.focusedColor, options.focusedBackgroundColor, expanded, selected]);
+
+	const children = useMemo(() => {
+		const renderedChildren: React.JSX.Element[] = [];
+		if (node.nodes && node.state.expanded) {
+			node.nodes.forEach((childNode) => {
+				renderedChildren.push(
+					<ArchbaseTreeViewItem
+						id={`${options.id}_${childNode.id}`}
+						key={childNode.id}
+						node={childNode}
+						level={level + 1}
+						onSelectedStatusChanged={onSelectedStatusChanged}
+						onExpandedCollapsedChanged={onExpandedCollapsedChanged}
+						onFocusedChanged={onFocusedChanged}
+						getFocused={getFocused}
+						onNodeDoubleClicked={onNodeDoubleClicked}
+						addNode={addNode}
+						removeNode={removeNode}
+						options={options}
+						onLoadDataSource={onLoadDataSource}
+						customRenderText={customRenderText}
+						update={update}
+					/>,
+				);
+			});
+		}
+		return renderedChildren;
+	}, [
+		node.nodes,
+		node.state,
+		node,
+		expanded,
+		selected,
+		level,
+		onSelectedStatusChanged,
+		onExpandedCollapsedChanged,
+		onFocusedChanged,
+		getFocused,
+		onNodeDoubleClicked,
+		addNode,
+		removeNode,
+		options,
+		update,
+	]);
+
+	return (
+		<li style={style} onDoubleClick={doubleClicked} id={id} key={`${options.id}_${node.id}`}>
+			<div style={{ display: 'flex' }}>
+				{!node.isleaf ? expandCollapseIcon : <Space w="md" />}
+				{checkSelectedIcon}
+				<span style={{ ...styleFocused, display: 'flex' }} className="archbase-treeview-item" onClick={toggleFocused}>
+					{node.icon}
+					{node.image ? <img alt="" style={{ padding: '0.2rem' }} src={node.image} /> : null}
+					{customRenderText ? customRenderText(node) : <Text truncate>{node.text}</Text>}
+				</span>
+			</div>
+			<ul>{children}</ul>
+		</li>
+	);
+};

package/src/list/treeview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC"}

package/src/list/treeview/index.ts

@@ -0,0 +1,5 @@
+export type { ArchbaseTreeViewProps } from './ArchbaseTreeView';
+export type { ArchbaseTreeViewItemProps } from './ArchbaseTreeViewItem';
+export { ArchbaseTreeView } from './ArchbaseTreeView';
+export { ArchbaseTreeViewItem } from './ArchbaseTreeViewItem';
+export type { ArchbaseTreeNode, ArchbaseTreeViewOptions } from './ArchbaseTreeView.types';

package/src/list-view/ArchbaseListViewTable.tsx

@@ -0,0 +1,150 @@
+import React, { ReactNode } from 'react';
+import { ListViewTable } from '@gfazioli/mantine-list-view-table';
+
+export interface ArchbaseListViewColumn<T = any> {
+  /**
+   * Identificador único da coluna (key)
+   */
+  key: keyof T | (string & NonNullable<unknown>);
+  /**
+   * Título da coluna
+   */
+  title?: ReactNode;
+  /**
+   * Largura da coluna em pixels
+   */
+  width?: string | number;
+  /**
+   * Renderizador customizado para a célula
+   */
+  renderCell?: (record: T, index: number) => ReactNode;
+  /**
+   * Alinhamento do conteúdo
+   */
+  textAlign?: 'left' | 'center' | 'right';
+  /**
+   * Se a coluna é ordenável
+   */
+  sortable?: boolean;
+  /**
+   * Se a coluna é redimensionável
+   */
+  resizable?: boolean;
+}
+
+export interface ArchbaseListViewProps<T = any> {
+  /**
+   * Dados a serem exibidos
+   */
+  data: T[];
+  /**
+   * Colunas da tabela
+   */
+  columns: ArchbaseListViewColumn<T>[];
+  /**
+   * Callback quando uma linha é clicada
+   */
+  onRowClick?: (record: T, index: number) => void;
+  /**
+   * Callback quando uma linha é duplamente clicada
+   */
+  onRowDoubleClick?: (record: T, index: number) => void;
+  /**
+   * Altura da tabela em pixels
+   */
+  height?: number | string;
+  /**
+   * Largura da tabela
+   */
+  width?: number | string;
+  /**
+   * Borda ao redor da tabela
+   */
+  withTableBorder?: boolean;
+  /**
+   * Borda nas colunas
+   */
+  withColumnBorders?: boolean;
+  /**
+   * Borda nas linhas
+   */
+  withRowBorders?: boolean;
+  /**
+   * Row key (para identificar linhas únicas)
+   */
+  rowKey?: keyof T | ((record: T, index: number) => React.Key);
+  /**
+   * Estilo adicional do container
+   */
+  style?: React.CSSProperties;
+  /**
+   * ClassName adicional
+   */
+  className?: string;
+}
+
+/**
+ * Componente ArchbaseListViewTable
+ *
+ * Wrapper sobre @gfazioli/mantine-list-view-table para criar tabelas no estilo
+ * Finder do macOS, com suporte a ordenação, redimensionamento de colunas e mais.
+ *
+ * @example
+ * ```tsx
+ * interface FileSystemItem {
+ *   id: string;
+ *   name: string;
+ *   size: number;
+ *   type: 'file' | 'folder';
+ * }
+ *
+ * const columns: ArchbaseListViewColumn<FileSystemItem>[] = [
+ *   { key: 'name', title: 'Nome', width: 200 },
+ *   { key: 'size', title: 'Tamanho', width: 100, textAlign: 'right' },
+ *   { key: 'type', title: 'Tipo', width: 100 },
+ * ];
+ *
+ * <ArchbaseListViewTable
+ *   data={fileSystemData}
+ *   columns={columns}
+ *   onRowClick={(item, index) => console.log('Clicked:', item)}
+ *   height={400}
+ * />
+ * ```
+ */
+export function ArchbaseListViewTable<T = any>({
+  data,
+  columns,
+  onRowClick,
+  onRowDoubleClick,
+  height,
+  width,
+  withTableBorder = true,
+  withColumnBorders = true,
+  withRowBorders = false,
+  rowKey,
+  style,
+  className,
+}: ArchbaseListViewProps<T>) {
+  // Converter colunas para o formato esperado pelo ListViewTable
+  const listViewColumns = columns.map((col) => ({
+    ...col,
+  }));
+
+  return (
+    <ListViewTable
+      columns={listViewColumns}
+      data={data}
+      onRowClick={onRowClick}
+      onRowDoubleClick={onRowDoubleClick}
+      height={height}
+      width={width}
+      withTableBorder={withTableBorder}
+      withColumnBorders={withColumnBorders}
+      withRowBorders={withRowBorders}
+      rowKey={rowKey}
+      style={style}
+      className={className}
+    />
+  );
+}

package/src/list-view/index.ts

@@ -0,0 +1,2 @@
+export { ArchbaseListViewTable } from './ArchbaseListViewTable';
+export type { ArchbaseListViewProps, ArchbaseListViewColumn } from './ArchbaseListViewTable';