@archbase/components 3.0.0

package/src/buttons/ActionsDemo.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import {
+	IconDeviceFloppy,
+	IconDownload,
+	IconPencil,
+	IconPrinter,
+	IconRefresh,
+	IconSettings,
+	IconTableExport,
+	IconTableImport,
+	IconTrash,
+	IconUpload,
+} from '@tabler/icons-react';
+import React from 'react';
+import { ArchbaseAction } from './ArchbaseActionButtons';
+
+export const ActionsDemo: ArchbaseAction[] = [
+	{
+		id: '1',
+		icon: <IconDeviceFloppy />,
+		color: 'green.5',
+		label: 'Salvar',
+		executeAction: () => {},
+		enabled: true,
+		hint: 'Clique para salvar.',
+	},
+	{
+		id: '2',
+		icon: <IconTrash />,
+		color: 'red.5',
+		label: 'Remover',
+		executeAction: () => {},
+		enabled: true,
+		hint: 'Clique para remover.',
+	},
+	{
+		id: '3',
+		icon: <IconPrinter />,
+		color: 'blue.5',
+		label: 'Imprimir',
+		executeAction: () => {},
+		enabled: true,
+		hint: 'Clique para imprimir.',
+	},
+	{
+		id: '4',
+		icon: <IconDownload />,
+		color: 'orange.5',
+		label: 'Baixar',
+		executeAction: () => {},
+		enabled: true,
+		hint: 'Clique para baixar.',
+	},
+	{
+		id: '5',
+		icon: <IconUpload />,
+		color: 'yellow.5',
+		label: 'Carregar',
+		executeAction: () => {},
+		enabled: true,
+		hint: 'Clique para carregar.',
+	},
+	{
+		id: '6',
+		icon: <IconTableImport />,
+		color: 'lime.5',
+		label: 'Importar',
+		executeAction: () => {},
+		enabled: true,
+		hint: 'Clique para importar.',
+	},
+	{
+		id: '7',
+		icon: <IconTableExport />,
+		color: 'teal.5',
+		label: 'Exportar',
+		executeAction: () => {},
+		enabled: true,
+		hint: 'Clique para exportar.',
+	},
+	{
+		id: '8',
+		icon: <IconPencil />,
+		color: 'cyan.5',
+		label: 'Editar',
+		executeAction: () => {},
+		enabled: true,
+		hint: 'Clique para editar.',
+	},
+	{
+		id: '9',
+		icon: <IconRefresh />,
+		color: 'indigo.5',
+		label: 'Recarregar',
+		executeAction: () => {},
+		enabled: true,
+		hint: 'Clique para recarregar.',
+	},
+	{
+		id: '10',
+		icon: <IconSettings />,
+		color: 'grape.5',
+		label: 'Opções',
+		executeAction: () => {},
+		enabled: true,
+	},
+];

package/src/buttons/ArchbaseActionButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseActionButtons.d.ts","sourceRoot":"","sources":["ArchbaseActionButtons.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAoB,SAAS,EAAuD,MAAM,OAAO,CAAC;AAIhH,MAAM,WAAW,uCAAuC;IACvD,eAAe,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACpC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,gBAAgB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACrC,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,eAAe,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACpC,gBAAgB,CAAC,EAAE,GAAG,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC9B,mBAAmB;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,wEAAwE;IACxE,OAAO,EAAE,OAAO,CAAC;IACjB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,4BAA4B;IAC5C,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iCAAiC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,8BAA8B;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,+BAA+B;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2BAA2B;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kCAAkC;IAClC,oBAAoB,CAAC,EAClB,QAAQ,GACR,MAAM,GACN,OAAO,GACP,KAAK,GACL,YAAY,GACZ,cAAc,GACd,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,SAAS,GACT,WAAW,CAAC;IACf,sBAAsB;IACtB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,MAAM,WAAW,0BAA0B;IAC1C,qBAAqB;IACrB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,6GAA6G;IAC7G,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,4BAA4B,CAAC;IACvC,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,uCAAuC,CAAC;CAC3D;AAqID,wBAAgB,qBAAqB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAAE,0BAA0B,2CAwKhH"}

package/src/buttons/ArchbaseActionButtons.tsx

@@ -0,0 +1,387 @@
+/**
+ * ArchbaseActionButtons — grupo de ações padrão para fluxos CRUD.
+ * @status stable
+ */
+import { ActionIcon, Button, Menu, px, Space, Text, Tooltip, useMantineTheme } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+import { IconMenu2 } from '@tabler/icons-react';
+import React, { MutableRefObject, ReactNode, Ref, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { isLastElementOfArray } from '@archbase/core';
+import { useArchbaseSize } from '@archbase/core';
+
+export interface ActionButtonsCustomComponentsDefinition {
+	largeButtonType?: React.ElementType;
+	largeButtonProps?: any;
+	mediumButtonType?: React.ElementType;
+	mediumButtonProps?: any;
+	smallButtonType?: React.ElementType;
+	smallButtonProps?: any;
+}
+
+export interface ArchbaseAction {
+	/** Id da Action */
+	id: string;
+	/** Ícone do Action Button */
+	icon?: ReactNode;
+	/** Cor do Action Button */
+	color?: string;
+	/** Título da Action Button */
+	label: string;
+	/** Ação a ser executada ao clicar no Action Button */
+	executeAction: () => void;
+	/** Indicador se o Action Button está habilitado para executar a ação */
+	enabled: boolean;
+	/** Detalhamento da ação para ajudar o usuário*/
+	hint?: string;
+}
+
+export interface ArchbaseActionButtonsOptions {
+	/** Limite que determina a partir de quantos px o botão maior será renderizado*/
+	largerBreakPoint?: string;
+	/** Limite que determina a partir de quantos px o botão menor será renderizado*/
+	smallerBreakPoint?: string;
+	/** Espaçamento do botão maior */
+	largerSpacing?: string;
+	/** Espaçamento do botão menor */
+	smallerSpacing?: string;
+	/** Variação do botão maior */
+	largerButtonVariant?: string;
+	/** Variação do botão menor */
+	smallerButtonVariant?: string;
+	/** Variação do item do menu */
+	menuItemVariant?: string;
+	/** Variação do botão do menu */
+	menuButtonVariant?: string;
+	/** Cor do botão do menu */
+	menuButtonColor?: string;
+	/** Posição do dropdown do menu */
+	menuDropdownPosition?:
+		| 'bottom'
+		| 'left'
+		| 'right'
+		| 'top'
+		| 'bottom-end'
+		| 'bottom-start'
+		| 'left-end'
+		| 'left-start'
+		| 'right-end'
+		| 'right-start'
+		| 'top-end'
+		| 'top-start';
+	/** Posição do menu */
+	menuPosition?: 'right' | 'left';
+	menuItemApplyActionColor?: boolean;
+}
+
+export interface ArchbaseActionButtonsProps {
+	/** Lista de ações */
+	actions: ArchbaseAction[];
+	/**  Variação padrão para todo o componente, que será sobrescrito pela variação mais específica de options */
+	variant?: string;
+	/** Opções de personalização */
+	options?: ArchbaseActionButtonsOptions;
+	/** Definição dos componentes personalizados */
+	customComponents?: ActionButtonsCustomComponentsDefinition;
+}
+
+interface ArchbaseActionButtonProps {
+	/** Ação */
+	action: ArchbaseAction;
+	/**  Variação padrão */
+	variant?: string;
+	/** Opções de personalização */
+	options?: ArchbaseActionButtonsOptions;
+	/** Definição dos componentes personalizados */
+	customComponents?: ActionButtonsCustomComponentsDefinition;
+	/** Ação a ser executada ao clicar no Action Button */
+	handleExecuteAction: (action: ArchbaseAction) => void;
+}
+
+function buildLargeActionButton(
+	{ action, options, variant, handleExecuteAction, customComponents }: ArchbaseActionButtonProps,
+	buttonRef: Ref<any>,
+) {
+	const LargeActionButton = customComponents ? customComponents.largeButtonType : null;
+	if (LargeActionButton) {
+		let largeButtonProps = {};
+		if (customComponents && customComponents.largeButtonProps) {
+			largeButtonProps = customComponents.largeButtonProps;
+		}
+
+		return (
+			<LargeActionButton
+				ref={buttonRef}
+				action={action}
+				variant={options && options.largerButtonVariant ? options.largerButtonVariant : variant}
+				key={action.id}
+				disabled={!action.enabled}
+				onClick={() => handleExecuteAction(action)}
+				{...largeButtonProps}
+			/>
+		);
+	} else {
+		return (
+			<Button
+				ref={buttonRef}
+				color={action.color}
+				variant={options && options.largerButtonVariant ? options.largerButtonVariant : variant}
+				key={action.id}
+				disabled={!action.enabled}
+				onClick={() => handleExecuteAction(action)}
+			>
+				{action.icon}
+				<Text>{action.label}</Text>
+			</Button>
+		);
+	}
+}
+
+function buildMediumActionButton(
+	{ action, options, variant, handleExecuteAction, customComponents }: ArchbaseActionButtonProps,
+	buttonRef: Ref<any>,
+) {
+	const MediumActionButton = customComponents ? customComponents.mediumButtonType : null;
+	if (MediumActionButton) {
+		let mediumButtonProps = {};
+		if (customComponents && customComponents.mediumButtonProps) {
+			mediumButtonProps = customComponents.mediumButtonProps;
+		}
+
+		return (
+			<MediumActionButton
+				ref={buttonRef}
+				action={action}
+				variant={options && options.smallerButtonVariant ? options.smallerButtonVariant : variant}
+				key={action.id}
+				disabled={!action.enabled}
+				onClick={() => handleExecuteAction(action)}
+				{...mediumButtonProps}
+			/>
+		);
+	} else {
+		return (
+			<ActionIcon
+				ref={buttonRef}
+				color={action.color}
+				variant={options && options.smallerButtonVariant ? options.smallerButtonVariant : variant}
+				key={action.id}
+				disabled={!action.enabled}
+				onClick={() => handleExecuteAction(action)}
+			>
+				{action.icon}
+			</ActionIcon>
+		);
+	}
+}
+
+function buildHiddenActionButton({
+	action,
+	options,
+	variant,
+	handleExecuteAction,
+	customComponents,
+}: ArchbaseActionButtonProps) {
+	const SmallActionButton = customComponents ? customComponents.smallButtonType : null;
+
+	return (
+		<Menu.Item
+			leftSection={action.icon}
+			key={action.id}
+			disabled={!action.enabled}
+			color={options && options.menuItemApplyActionColor ? action.color : undefined}
+			onClick={() => handleExecuteAction(action)}
+		>
+			<Tooltip withinPortal withArrow disabled={!action.hint} label={action.hint}>
+				{SmallActionButton ? (
+					<div>
+						<SmallActionButton
+							action={action}
+							variant={options && options.menuItemVariant ? options.menuItemVariant : variant}
+						/>
+					</div>
+				) : (
+					<Text variant={options && options.menuItemVariant ? options.menuItemVariant : variant}>{action.label}</Text>
+				)}
+			</Tooltip>
+		</Menu.Item>
+	);
+}
+
+function buildVisibleActionButton(props: ArchbaseActionButtonProps, isLarge: boolean, buttonRef: Ref<any>) {
+	if (isLarge) {
+		return buildLargeActionButton(props, buttonRef);
+	} else {
+		return buildMediumActionButton(props, buttonRef);
+	}
+}
+
+export function ArchbaseActionButtons({ actions, variant, customComponents, options }: ArchbaseActionButtonsProps) {
+	const buttonRefsRef = useRef<MutableRefObject<any>[]>([]);
+	const buttonMenuRef = useRef<any>(null);
+	const largerButtonWidthRef = useRef<any>([]);
+	const smallerButtonWidthRef = useRef<any>([]);
+	const [visibleActionsLength, setVisibleActionsLength] = useState(actions.length);
+	const [hiddenActions, setHiddenActions] = useState<ArchbaseAction[]>([]);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [containerWidth] = useArchbaseSize(containerRef);
+	const [opened, setOpened] = useState(false);
+
+	const theme = useMantineTheme();
+	const _largerBreakPoint = options && options.largerBreakPoint ? options.largerBreakPoint : theme.breakpoints.md;
+	const _smallerBreakPoint = options && options.smallerBreakPoint ? options.smallerBreakPoint : theme.breakpoints.sm;
+
+	const isLarge = useMediaQuery(`(min-width: ${_largerBreakPoint})`);
+	const isSmall = useMediaQuery(`(max-width: ${_smallerBreakPoint})`);
+
+	const largerSpacingPx = Number(options && options.largerSpacing ? px(options.largerSpacing) : px('1rem'));
+	const smallerSpacingPx = Number(options && options.smallerSpacing ? px(options.smallerSpacing) : px('0.25rem'));
+	const spacingPx = isLarge ? largerSpacingPx : smallerSpacingPx;
+
+	const _menuPosition = options && options.menuPosition ? options.menuPosition : 'right';
+
+	const currentButtonWidthRef = isLarge ? largerButtonWidthRef : smallerButtonWidthRef;
+
+	const calculateVisibleActions = useCallback(() => {
+		const container = containerRef.current;
+		if (container) {
+			const containerWidth = container.clientWidth;
+			let totalWidth = 0;
+			let menuWidth = 0;
+			let maxVisibleActions = 0;
+
+			menuWidth += buttonMenuRef.current ? buttonMenuRef.current.offsetWidth : 50;
+			if (
+				buttonRefsRef.current.filter((value) => value.current).length === actions.length &&
+				currentButtonWidthRef.current.length === 0
+			) {
+				currentButtonWidthRef.current = [];
+				buttonRefsRef.current.forEach((buttonRef) => {
+					currentButtonWidthRef.current = [...currentButtonWidthRef.current, buttonRef.current.offsetWidth];
+				});
+			}
+
+			currentButtonWidthRef.current.forEach((buttonWidth: number, index: number) => {
+				totalWidth += buttonWidth + (isLastElementOfArray(actions, index) ? 0 : spacingPx);
+
+				if (totalWidth <= containerWidth - (menuWidth + Number(spacingPx))) {
+					maxVisibleActions++;
+				}
+			});
+
+			if (isSmall) {
+				setHiddenActions(actions);
+				setVisibleActionsLength(0);
+			} else {
+				setHiddenActions(actions.slice(maxVisibleActions));
+				setVisibleActionsLength(maxVisibleActions);
+			}
+		}
+	}, [actions, isSmall, currentButtonWidthRef, spacingPx]);
+
+	useLayoutEffect(() => {
+		calculateVisibleActions();
+	}, [actions, containerWidth, calculateVisibleActions]);
+
+	function handleExecuteAction(action: ArchbaseAction) {
+		if (action.enabled) {
+			action.executeAction();
+		}
+	}
+
+	function buildMenu() {
+		buttonMenuRef.current = null;
+		return (
+			hiddenActions.length > 0 && (
+				<>
+					{visibleActionsLength !== 0 && _menuPosition === 'right' ? <Space w={spacingPx} /> : undefined}
+					<div ref={buttonMenuRef}>
+						<Menu
+							opened={opened}
+							onChange={setOpened}
+							withinPortal={true}
+							position={
+								options && options.menuDropdownPosition
+									? options.menuDropdownPosition
+									: _menuPosition === 'right'
+									? 'bottom-end'
+									: 'bottom-start'
+							}
+						>
+							<Menu.Target>
+								{isLarge ? (
+									<Button
+										color={options && options.menuButtonColor ? options.menuButtonColor : 'blue.5'}
+										variant={options && options.menuButtonVariant ? options.menuButtonVariant : variant}
+										px={'10px'}
+									>
+										<IconMenu2 />
+									</Button>
+								) : (
+									<ActionIcon
+										color={options && options.menuButtonColor ? options.menuButtonColor : 'blue.5'}
+										variant={options && options.menuButtonVariant ? options.menuButtonVariant : variant}
+									>
+										<IconMenu2 />
+									</ActionIcon>
+								)}
+							</Menu.Target>
+							<Menu.Dropdown>
+								{hiddenActions.map((action) =>
+									buildHiddenActionButton({
+										action,
+										options,
+										variant,
+										handleExecuteAction,
+										customComponents,
+									}),
+								)}
+							</Menu.Dropdown>
+						</Menu>
+					</div>
+					{visibleActionsLength !== 0 && _menuPosition === 'left' ? <Space w={spacingPx} /> : undefined}
+				</>
+			)
+		);
+	}
+	buttonRefsRef.current = [];
+	return (
+		<div
+			style={{
+				width: '100%',
+				display: 'flex',
+				justifyContent: _menuPosition === 'right' ? 'flex-end' : 'flex-start',
+			}}
+			ref={containerRef}
+		>
+			{_menuPosition === 'left' ? buildMenu() : undefined}
+			{actions.map((action, index) => {
+				const buttonRef = React.createRef();
+				buttonRefsRef.current = [...buttonRefsRef.current, buttonRef];
+				if (index >= visibleActionsLength) {
+					return undefined;
+				}
+				return (
+					<>
+						<Tooltip withArrow withinPortal={true} disabled={!action.hint} label={action.hint}>
+							<div>
+								{buildVisibleActionButton(
+									{
+										action,
+										options,
+										variant,
+										handleExecuteAction,
+										customComponents,
+									},
+									isLarge,
+									buttonRef,
+								)}
+							</div>
+						</Tooltip>
+						{visibleActionsLength === index + 1 ? undefined : <Space w={spacingPx} key={index} />}
+					</>
+				);
+			})}
+			{_menuPosition === 'right' ? buildMenu() : undefined}
+		</div>
+	);
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,0BAA0B,EAC1B,4BAA4B,EAC5B,cAAc,EACd,uCAAuC,GACxC,MAAM,yBAAyB,CAAC"}

package/src/buttons/index.ts

@@ -0,0 +1,7 @@
+export { ArchbaseActionButtons } from './ArchbaseActionButtons';
+export type {
+  ArchbaseActionButtonsProps,
+  ArchbaseActionButtonsOptions,
+  ArchbaseAction,
+  ActionButtonsCustomComponentsDefinition,
+} from './ArchbaseActionButtons';

package/src/charts/ArchbaseTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseTimeline.d.ts","sourceRoot":"","sources":["ArchbaseTimeline.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,oBAAoB;IACpC,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,qBAAqB;IACrC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,oBAAoB,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACnC;AAED,wBAAgB,gBAAgB,CAAC,EAChC,IAAI,EACJ,UAAU,EACV,KAAK,EACL,MAAM,EACN,KAAK,EAAE,WAAe,EACtB,aAAiB,EACjB,SAAS,EACT,OAAO,EACP,QAAY,EACZ,UAAe,EACf,YAAoB,EACpB,uBAA+B,EAC/B,cAAkB,EAClB,iBAAyB,EACzB,uBAA2B,EAC3B,yBAA6B,GAC7B,EAAE,qBAAqB,2CAmRvB"}