@archbase/components 3.0.0

package/src/list/ArchbaseListItem.tsx

@@ -0,0 +1,161 @@
+/**
+ * ArchbaseListItem — item de lista com seleção, ícones e binding ao ArchbaseList.
+ * @status stable
+ */
+import { Image, Space } from '@mantine/core';
+import React, { ReactNode, useContext, useEffect, useRef } from 'react';
+import ArchbaseListContext, { ArchbaseListContextValue } from './ArchbaseList.context';
+
+export interface ArchbaseListItemProps<T, ID> {
+	/** Indicador se o item está ativo(selecionado) */
+	active: boolean;
+	/** Cor de fundo do item */
+	activeBackgroundColor?: string;
+	/** Cor do item se ele estiver ativo */
+	activeColor?: string;
+	/** Alinhamento do texto do item */
+	align?: 'left' | 'right' | 'center';
+	/** Cor de fundo do item não selecionado */
+	backgroundColor?: string;
+	/** Texto do item */
+	caption: string;
+	/** Cor da fonte do item */
+	color: string;
+	/** Filhos do item */
+	children?: ReactNode;
+	/** Indicador se o item está desabilitado */
+	disabled: boolean;
+	/** Icone a ser apresentado ao lado esquerdo do item */
+	icon?: ReactNode;
+	/** Id do item */
+	id: any;
+	/** Posição do item dentro da lista */
+	index: number;
+	/** Imagem a ser apresentada ao lado esquerdo do item */
+	image?: ReactNode | string;
+	/** Arredondamento da Imagem */
+	imageRadius?: string | number | undefined;
+	/** Altura da imagem */
+	imageHeight?: number | string;
+	/** Largura da Imagem */
+	imageWidth?: number | string;
+	/** Indicador se o conteúdo do item deve ser justificado */
+	justify?: 'flex-start' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+	/** Indicador se o item deve ter uma borda */
+	withBorder?: boolean;
+	/** Cor da borda */
+	borderColor?: string;
+	/** Arredondamento dos cantos da borda */
+	borderRadius?: string | number | undefined;
+	/** Dados do item a ser apresentado */
+	recordData?: T;
+	/** Indicador se o item está visivel na lista */
+	visible?: boolean;
+	/** Espaçamento entre os valores do item */
+	spacing?: string | number | undefined;
+}
+
+export function ArchbaseListItem<T, ID>({
+	active,
+	activeBackgroundColor,
+	activeColor,
+	//align,
+	backgroundColor,
+	caption,
+	color,
+	disabled,
+	icon,
+	id,
+	index,
+	image,
+	imageRadius,
+	imageHeight,
+	imageWidth,
+	justify = 'flex-start',
+	children,
+	recordData,
+	spacing = 'md',
+}: ArchbaseListItemProps<T, ID>) {
+	const listContextValue = useContext<ArchbaseListContextValue<T, ID>>(ArchbaseListContext);
+	const itemRef = useRef<any>(null);
+
+	useEffect(() => {
+		if (itemRef.current && active) {
+			itemRef.current.focus();
+		}
+	}, [active]);
+
+	const onClick = (event) => {
+		event.preventDefault();
+		if (!disabled) {
+			if (listContextValue.handleSelectItem) {
+				listContextValue.handleSelectItem(index, recordData!);
+			}
+		}
+	};
+
+	const handleMouseOver = (event: React.MouseEvent) => {
+		if (listContextValue.onItemEnter) {
+			listContextValue.onItemEnter(event, recordData!);
+		}
+	};
+
+	const handleMouseOut = (event: React.MouseEvent) => {
+		if (listContextValue.onItemLeave) {
+			listContextValue.onItemLeave(event, recordData!);
+		}
+	};
+
+	let style = {
+		display: 'flex',
+		backgroundColor: '',
+		color: '',
+		justifyContent: justify,
+		alignItems: 'center',
+	};
+	if (activeBackgroundColor && activeColor && active) {
+		style = { ...style, backgroundColor: activeBackgroundColor, color: activeColor };
+	} else if (backgroundColor && color && !active) {
+		style = { ...style, backgroundColor: backgroundColor, color: color };
+	}
+	const imageComp = image ? (
+		typeof image === 'string' ? (
+			<Image src={recordData![image]} radius={imageRadius} width={imageWidth} height={imageHeight} />
+		) : (
+			image
+		)
+	) : (
+		image
+	);
+
+	const ComponentItem =
+		listContextValue.type === 'ordered' ? 'ol' : listContextValue.type === 'unordered' ? 'ul' : 'div';
+	return (
+		<ComponentItem
+			tabIndex={-1}
+			ref={itemRef}
+			style={style}
+			onClick={onClick}
+			onMouseOver={handleMouseOver}
+			onMouseOut={handleMouseOut}
+			id={`stItem_${listContextValue.ownerId}_${id}`}
+			key={`lstItem_${listContextValue.ownerId}_${id}`}
+		>
+			{icon}
+			{icon ? <Space w={spacing} /> : null}
+			{imageComp}
+			{imageComp ? <Space w={spacing} /> : null}
+			{caption}
+			{children}
+		</ComponentItem>
+	);
+}
+
+ArchbaseListItem.defaultProps = {
+	align: 'left',
+	justify: false,
+	showBorder: false,
+	disabled: false,
+};
+
+ArchbaseListItem.displayName = 'ArchbaseListItem';

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAC/B,cAAc,YAAY,CAAC"}

package/src/list/index.ts

@@ -0,0 +1,9 @@
+import ArchbaseListContext from './ArchbaseList.context';
+
+export { ArchbaseList } from './ArchbaseList';
+export type { ArchbaseListProps, ArchbaseListCustomItemProps } from './ArchbaseList';
+export { ArchbaseListItem } from './ArchbaseListItem';
+export type { ArchbaseListItemProps } from './ArchbaseListItem';
+export type { ArchbaseListContextValue } from './ArchbaseList.context';
+export { ArchbaseListContext };
+export * from './treeview';

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseTreeView.d.ts","sourceRoot":"","sources":["ArchbaseTreeView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAqD,MAAM,OAAO,CAAC;AAE5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,MAAM,WAAW,qBAAqB;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uBAAuB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACxD,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACrH,gBAAgB,CAAC,EAAE,CAClB,UAAU,EAAE,gBAAgB,EAAE,EAC9B,IAAI,EAAE,gBAAgB,EACtB,aAAa,EAAE,gBAAgB,EAAE,KAC7B,IAAI,CAAC;IACV,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAC3E,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC/E,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC7F,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC9F,mBAAmB,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC/D,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,SAAS,CAAC;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6jB5D,CAAC"}

package/src/list/treeview/ArchbaseTreeView.module.css

@@ -0,0 +1,66 @@
+.treeview {
+  min-height: 100px;
+  padding: 4px;
+  margin-bottom: 20px;
+  font-size: 14px;
+  line-height: 20px;
+  height: 100%;
+};
+.treeviewUl {
+  padding-left: 28px;
+  margin: 0 0 0 0;
+};
+.treeviewLi {
+  list-style: none;
+  margin: 0px;
+  position: relative;
+  line-height: 16px;
+  &::before {
+    content: "";
+    left: -16px;
+    position: absolute;
+    right: auto;
+    border-left: 1px dotted #999;
+    bottom: 30px;
+    height: 100%;
+    top: -2px;
+    width: 1px;
+  };
+  &::after {
+    content: "";
+    left: -16px;
+    position: absolute;
+    right: auto;
+    border-top: 1px dotted #999;
+    height: 20px;
+    top: 15px;
+    width: 22px;
+  };
+};
+.treeviewSpan {
+  border-radius: 2px;
+  display: inline-block;
+  padding: 2px;
+  text-decoration: none;
+};
+.treeviewImg {
+  vertical-align: middle;
+  height: auto;
+  max-width: 100%;
+};
+.treeviewParentLiSpan {
+  cursor: pointer;
+};
+.treeviewLastChildBefore {
+  height: 18px;
+};
+.treeviewItem {
+  background: auto;
+  color: black;
+  margin: 1px 1px 1px 2px;
+  &:hover {
+    background: #e7f4f9;
+    color: black;
+    margin: 1px 1px 1px 2px;
+  };
+}