@lumx/react 3.1.0 → 3.1.2

package/dist/src/components/table/Table.tsx

@@ -1,59 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import classNames from 'classnames';
-
-import { Theme } from '@lumx/react';
-
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export interface TableProps extends GenericProps, HasTheme {
-    /** Whether the table has checkbox or thumbnail on first cell or not. */
-    hasBefore?: boolean;
-    /** Whether the table has dividers or not. */
-    hasDividers?: boolean;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Table';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TableProps> = {
-    theme: Theme.light,
-};
-
-/**
- * Table component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Table: Comp<TableProps, HTMLTableElement> = forwardRef((props, ref) => {
-    const { children, className, hasBefore, hasDividers, theme, ...forwardedProps } = props;
-
-    return (
-        <table
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, hasBefore, hasDividers, theme }))}
-        >
-            {children}
-        </table>
-    );
-});
-Table.displayName = COMPONENT_NAME;
-Table.className = CLASSNAME;
-Table.defaultProps = DEFAULT_PROPS;

package/dist/src/components/table/TableBody.test.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite } from '@lumx/react/testing/utils';
-
-import { TableBody, TableBodyProps } from './TableBody';
-
-const CLASSNAME = TableBody.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<TableBodyProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<TableBody {...(props as any)} />);
-    return { props, wrapper };
-};
-
-describe(`<${TableBody.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

package/dist/src/components/table/TableBody.tsx

@@ -1,44 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import classNames from 'classnames';
-
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export type TableBodyProps = GenericProps;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TableBody';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
-
-/**
- * TableBody component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const TableBody: Comp<TableBodyProps, HTMLTableSectionElement> = forwardRef((props, ref) => {
-    const { children, className, ...forwardedProps } = props;
-
-    return (
-        <tbody
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        >
-            {children}
-        </tbody>
-    );
-});
-TableBody.displayName = COMPONENT_NAME;
-TableBody.className = CLASSNAME;

package/dist/src/components/table/TableCell.test.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite } from '@lumx/react/testing/utils';
-
-import { TableCell, TableCellProps } from './TableCell';
-
-const CLASSNAME = TableCell.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<TableCellProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<TableCell {...(props as any)} />);
-    const cell = wrapper.find(`.${CLASSNAME}`);
-    return { props, wrapper, cell };
-};
-
-describe(`<${TableCell.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'cell', prop: 'cell' }, { className: CLASSNAME });
-});

package/dist/src/components/table/TableCell.tsx

@@ -1,125 +0,0 @@
-import React, { forwardRef, useCallback } from 'react';
-
-import classNames from 'classnames';
-
-import { Icon, Size } from '@lumx/react';
-import { Comp, GenericProps, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { onEnterPressed } from '@lumx/react/utils/event';
-
-import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';
-
-import isFunction from 'lodash/isFunction';
-
-/**
- * Table head cell sort order.
- */
-export const ThOrder = { asc: 'asc', desc: 'desc' } as const;
-export type ThOrder = ValueOf<typeof ThOrder>;
-
-/**
- * Table cell variants.
- */
-export const TableCellVariant = { body: 'body', head: 'head' } as const;
-export type TableCellVariant = ValueOf<typeof TableCellVariant>;
-
-/**
- * Defines the props of the component.
- */
-export interface TableCellProps extends GenericProps {
-    /** Icon (SVG path).(thead only). */
-    icon?: string;
-    /** Whether the column is sortable or not (thead only). */
-    isSortable?: boolean;
-    /** Sort order displayed as icon (sortable thead only). */
-    sortOrder?: ThOrder;
-    /** Variant. */
-    variant?: TableCellVariant;
-    /** On header cell click callback. */
-    onHeaderClick?(): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TableCell';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TableCellProps> = {
-    variant: TableCellVariant.body,
-};
-
-/**
- * TableCell component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const TableCell: Comp<TableCellProps, HTMLTableCellElement> = forwardRef((props, ref) => {
-    const { children, className, icon, isSortable, onHeaderClick, sortOrder, variant, ...forwardedProps } = props;
-
-    /**
-     * Handle click on the ordered thead.
-     */
-    const handleOnHeaderClick = useCallback(() => {
-        if (isFunction(onHeaderClick)) {
-            onHeaderClick();
-        }
-    }, [onHeaderClick]);
-
-    return (
-        <>
-            {variant === TableCellVariant.head && (
-                <th
-                    ref={ref}
-                    {...forwardedProps}
-                    className={classNames(
-                        handleBasicClasses({ prefix: CLASSNAME, isSortable }),
-                        className,
-                        `${CLASSNAME}--head`,
-                        {
-                            [`${CLASSNAME}--is-sorted`]: isSortable && sortOrder,
-                        },
-                    )}
-                    tabIndex={isSortable && isFunction(onHeaderClick) ? 0 : -1}
-                    onClick={handleOnHeaderClick}
-                    onKeyDown={onEnterPressed(handleOnHeaderClick)}
-                >
-                    <div className={`${CLASSNAME}-wrapper`}>
-                        {icon && !isSortable && <Icon className={`${CLASSNAME}-icon`} icon={icon} size={Size.xxs} />}
-
-                        {isSortable && sortOrder === ThOrder.asc && (
-                            <Icon className={`${CLASSNAME}-icon`} icon={mdiArrowUp} size={Size.xxs} />
-                        )}
-
-                        {isSortable && sortOrder === ThOrder.desc && (
-                            <Icon className={`${CLASSNAME}-icon`} icon={mdiArrowDown} size={Size.xxs} />
-                        )}
-
-                        <div className={`${CLASSNAME}-content`}>{children}</div>
-                    </div>
-                </th>
-            )}
-
-            {variant === TableCellVariant.body && (
-                <td
-                    {...forwardedProps}
-                    className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }), `${CLASSNAME}--body`)}
-                >
-                    <div className={`${CLASSNAME}-content`}>{children}</div>
-                </td>
-            )}
-        </>
-    );
-});
-TableCell.displayName = COMPONENT_NAME;
-TableCell.className = CLASSNAME;
-TableCell.defaultProps = DEFAULT_PROPS;

package/dist/src/components/table/TableHeader.test.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite } from '@lumx/react/testing/utils';
-
-import { TableHeader, TableHeaderProps } from './TableHeader';
-
-const CLASSNAME = TableHeader.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<TableHeaderProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<TableHeader {...(props as any)} />);
-    return { props, wrapper };
-};
-
-describe(`<${TableHeader.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

package/dist/src/components/table/TableHeader.tsx

@@ -1,50 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import classNames from 'classnames';
-
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export type TableHeaderProps = GenericProps;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TableHeader';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TableHeaderProps> = {};
-
-/**
- * TableHeader component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const TableHeader: Comp<TableHeaderProps, HTMLTableSectionElement> = forwardRef((props, ref) => {
-    const { children, className, ...forwardedProps } = props;
-
-    return (
-        <thead
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        >
-            {children}
-        </thead>
-    );
-});
-TableHeader.displayName = COMPONENT_NAME;
-TableHeader.className = CLASSNAME;
-TableHeader.defaultProps = DEFAULT_PROPS;

package/dist/src/components/table/TableRow.test.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite } from '@lumx/react/testing/utils';
-
-import { TableRow, TableRowProps } from './TableRow';
-
-const CLASSNAME = TableRow.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<TableRowProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<TableRow {...(props as any)} />);
-    return { props, wrapper };
-};
-
-describe(`<${TableRow.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

package/dist/src/components/table/TableRow.tsx

@@ -1,68 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import classNames from 'classnames';
-
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export interface TableRowProps extends GenericProps {
-    /** Whether the component is clickable or not. */
-    isClickable?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the component is selected or not. */
-    isSelected?: boolean;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TableRow';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TableRowProps> = {};
-
-/**
- * TableRow component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const TableRow: Comp<TableRowProps, HTMLTableRowElement> = forwardRef((props, ref) => {
-    const { children, className, disabled, isClickable, isDisabled = disabled, isSelected, ...forwardedProps } = props;
-
-    return (
-        <tr
-            ref={ref}
-            tabIndex={isClickable && !isDisabled ? 0 : -1}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    isClickable: isClickable && !isDisabled,
-                    isDisabled,
-                    isSelected: isSelected && !isDisabled,
-                    prefix: CLASSNAME,
-                }),
-            )}
-            aria-disabled={isDisabled}
-        >
-            {children}
-        </tr>
-    );
-});
-
-TableRow.displayName = COMPONENT_NAME;
-TableRow.className = CLASSNAME;
-TableRow.defaultProps = DEFAULT_PROPS;