@alfalab/core-components-table 2.2.41 → 2.3.0

package/src/components/texpandable-row/Component.tsx

@@ -0,0 +1,58 @@
+import React, { ReactNode, useState } from 'react';
+import cn from 'classnames';
+
+import { TRow, TRowProps } from '../trow';
+
+import styles from './index.module.css';
+
+export type TExpandableRowProps = TRowProps & {
+    defaultExpanded?: boolean;
+
+    expanded?: boolean;
+
+    onToggle?: (expanded: boolean) => void;
+
+    renderContent: (expanded: boolean) => ReactNode;
+};
+
+export const TExpandableRow = ({
+    className,
+    selected,
+    expanded,
+    defaultExpanded = false,
+    onToggle = () => null,
+    renderContent = () => null,
+    ...restProps
+}: TExpandableRowProps) => {
+    const [expandedState, setExpandedState] = useState<boolean>(defaultExpanded);
+
+    const uncontrolled = expanded === undefined;
+
+    const isExpanded = (uncontrolled ? expandedState : expanded) as boolean;
+
+    const handleToggle = () => {
+        if (uncontrolled) {
+            setExpandedState(!isExpanded);
+        }
+
+        onToggle(isExpanded);
+    };
+
+    return (
+        <React.Fragment>
+            <TRow
+                className={cn(styles.row, className, {
+                    [styles.selected]: selected,
+                    [styles.expanded]: isExpanded,
+                })}
+                selected={selected}
+                onClick={handleToggle}
+                {...restProps}
+            />
+
+            <tr className={cn(styles.expandable, { [styles.expanded]: isExpanded })}>
+                {renderContent(isExpanded)}
+            </tr>
+        </React.Fragment>
+    );
+};

package/src/components/texpandable-row/index.module.css

@@ -0,0 +1,25 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.row {
+    cursor: pointer;
+}
+
+.selected.expanded {
+    background-color: inherit;
+}
+
+.expanded {
+    &:hover {
+        background-color: inherit;
+    }
+}
+
+.expandable {
+    & td {
+        margin: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        border: none;
+        height: auto;
+    }
+}

package/src/components/texpandable-row/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/components/thead/Component.tsx

@@ -0,0 +1,33 @@
+import React, { HTMLAttributes } from 'react';
+import cn from 'classnames';
+
+import styles from './index.module.css';
+
+export type THeadProps = HTMLAttributes<HTMLTableSectionElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Дополнительный класс для tr
+     */
+    rowClassName?: string;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const THead: React.FC<THeadProps> = ({
+    className,
+    rowClassName,
+    children,
+    dataTestId,
+    ...restProps
+}) => (
+    <thead className={cn(styles.component, className)} data-test-id={dataTestId} {...restProps}>
+        <tr className={cn(styles.row, rowClassName)}>{children}</tr>
+    </thead>
+);

package/src/components/thead/index.module.css

@@ -0,0 +1,32 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+
+    & th:not(:last-child):not(:empty):after {
+        transition: opacity 0.2s;
+        position: absolute;
+        content: '';
+        display: block;
+
+        width: 1px;
+        right: 0;
+        top: var(--gap-xs);
+        bottom: var(--gap-xs);
+        background-color: var(--color-light-graphic-quaternary);
+    }
+
+    & th:after {
+        opacity: 0;
+    }
+
+    &:hover th:after {
+        opacity: 1;
+    }
+}
+
+.row {
+    height: 72px;
+}

package/src/components/thead/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/components/thead-cell/Component.tsx

@@ -0,0 +1,67 @@
+import React, { ThHTMLAttributes, useContext } from 'react';
+import cn from 'classnames';
+
+import { TextAlignProperty } from '../../typings';
+import { TableContext } from '../table-context';
+
+import styles from './index.module.css';
+
+export type THeadCellProps = ThHTMLAttributes<HTMLHeadingElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Ширина колонки
+     */
+    width?: string | number;
+
+    /**
+     * Скрытие колонки
+     */
+    hidden?: boolean;
+
+    /**
+     * Выравнивание текста в колонке
+     */
+    textAlign?: TextAlignProperty;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const THeadCell = ({
+    children,
+    className,
+    dataTestId,
+    style,
+    width,
+    textAlign,
+    hidden,
+    ...restProps
+}: THeadCellProps) => {
+    const { compactHorizontal, stickyHeader } = useContext(TableContext);
+
+    if (hidden) return null;
+
+    return (
+        <th
+            className={cn(
+                styles.component,
+                className,
+                compactHorizontal && styles.compactHorizontal,
+                {
+                    [styles.stickyHeader]: stickyHeader,
+                },
+            )}
+            style={{ ...style, width, textAlign }}
+            data-test-id={dataTestId}
+            {...restProps}
+        >
+            {children}
+        </th>
+    );
+};

package/src/components/thead-cell/index.module.css

@@ -0,0 +1,47 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    @mixin paragraph_caps;
+
+    line-height: 20px;
+    text-align: left;
+    color: var(--color-light-text-primary);
+    padding: var(--gap-2xl) var(--gap-s) var(--gap-2xs);
+    border-bottom: 1px solid var(--color-light-border-primary);
+    background: var(--color-light-bg-primary);
+    vertical-align: top;
+    box-sizing: border-box;
+
+    &:first-child {
+        padding-left: var(--gap-m);
+    }
+
+    &:last-child {
+        padding-right: var(--gap-m);
+    }
+
+    &:not(.stickyHeader) {
+        position: relative;
+    }
+}
+
+.sortable {
+    cursor: pointer;
+}
+
+.sorted {
+    color: var(--color-light-text-primary);
+}
+
+.stickyHeader {
+    top: 0;
+    position: sticky;
+    box-shadow: inset 0 -1px 0 0 rgba(11, 31, 53, 0.16);
+    border: none;
+    z-index: 1;
+}
+
+.compactHorizontal {
+    padding-left: 6px;
+    padding-right: 6px;
+}

package/src/components/thead-cell/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/components/trow/Component.tsx

@@ -0,0 +1,56 @@
+import React, { HTMLAttributes } from 'react';
+import cn from 'classnames';
+
+import { TCell, TCellProps } from '../tcell';
+
+import styles from './index.module.css';
+
+type TCellElement = React.ReactElement<TCellProps, typeof TCell>;
+
+export type TRowProps = HTMLAttributes<HTMLTableRowElement> & {
+    /**
+     * Компоненты ячеек
+     */
+    children: TCellElement | TCellElement[];
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Стиль выбранной строки
+     */
+    selected?: boolean;
+
+    /**
+     * Убирает нижнюю границу
+     */
+    withoutBorder?: boolean;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const TRow = ({
+    children,
+    className,
+    selected,
+    withoutBorder,
+    dataTestId,
+    ...restProps
+}: TRowProps) => (
+    <tr
+        className={cn(styles.component, className, {
+            [styles.clickable]: typeof restProps.onClick !== 'undefined',
+            [styles.selected]: selected,
+            [styles.withoutBorder]: withoutBorder,
+        })}
+        data-test-id={dataTestId}
+        {...restProps}
+    >
+        {React.Children.map(children, (child, index) => React.cloneElement(child, { index }))}
+    </tr>
+);

package/src/components/trow/index.module.css

@@ -0,0 +1,35 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    padding-top: 1px;
+    width: 100%;
+    transition: background-color 0.2s;
+    box-sizing: border-box;
+    background: var(--color-light-bg-primary);
+
+    &:first-child td {
+        border-top: 0;
+    }
+}
+
+.withoutBorder {
+    & td {
+        border: none;
+    }
+}
+
+.clickable {
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--color-light-bg-secondary);
+    }
+}
+
+.selected {
+    background-color: #f2f8ff; /* нет цвета в палитре */
+
+    &:hover {
+        background-color: var(--color-static-graphic-solitude);
+    }
+}

package/src/components/trow/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/components/tsortable-head-cell/Component.tsx

@@ -0,0 +1,50 @@
+import React, { useMemo } from 'react';
+import cn from 'classnames';
+
+import { THeadCell, THeadCellProps } from '../thead-cell';
+
+import { SortIconAsc } from './sort-icon-asc';
+import { SortIconDesc } from './sort-icon-desc';
+import { SortIconUnset } from './sort-icon-unset';
+
+import styles from './index.module.css';
+
+export type TSortableHeadCellProps = THeadCellProps & {
+    isSortedDesc?: boolean;
+    defaultIsSortedDesc?: boolean;
+    onSort?: () => void;
+};
+
+export const TSortableHeadCell = ({
+    children,
+    className,
+    defaultIsSortedDesc,
+    isSortedDesc,
+    textAlign,
+    onSort,
+    ...restProps
+}: TSortableHeadCellProps) => {
+    const SortIcon = useMemo(() => {
+        let value = isSortedDesc;
+
+        if (value === undefined) value = defaultIsSortedDesc;
+
+        if (typeof value === 'boolean') return value ? SortIconDesc : SortIconAsc;
+
+        return SortIconUnset;
+    }, [defaultIsSortedDesc, isSortedDesc]);
+
+    return (
+        <THeadCell className={className} {...restProps}>
+            <div className={cn(styles.content, { [styles.reverse]: textAlign === 'right' })}>
+                {children}
+                <SortIcon
+                    onClick={onSort}
+                    className={cn(styles.icon, {
+                        [styles.sorted]: isSortedDesc !== undefined,
+                    })}
+                />
+            </div>
+        </THeadCell>
+    );
+};

package/src/components/tsortable-head-cell/index.module.css

@@ -0,0 +1,41 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.content {
+    display: flex;
+    align-items: flex-start;
+}
+
+.icon {
+    cursor: pointer;
+    margin-left: var(--gap-xs);
+
+    /**
+     * иконка сортировки должна быть выровнена по верхнему краю,
+     * т.к. текст может быть в две строки
+     */
+    margin-top: 1px;
+    color: var(--color-light-graphic-secondary);
+    transition: color 0.2s ease;
+    flex-shrink: 0;
+
+    &:hover {
+        color: var(--color-light-graphic-primary);
+    }
+}
+
+.reverse {
+    flex-direction: row-reverse;
+
+    & .icon {
+        margin-left: 0;
+        margin-right: var(--gap-xs);
+    }
+}
+
+.sorted {
+    color: var(--color-light-graphic-link);
+
+    &:hover {
+        color: var(--color-light-graphic-link);
+    }
+}

package/src/components/tsortable-head-cell/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/components/tsortable-head-cell/sort-icon-asc.tsx

@@ -0,0 +1,16 @@
+import React, { SVGProps } from 'react';
+
+export const SortIconAsc: React.FC<SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        width='18'
+        height='18'
+        viewBox='0 0 18 18'
+        fill='currentColor'
+        xmlns='http://www.w3.org/2000/svg'
+        focusable='false'
+        role='img'
+        {...props}
+    >
+        <path d='M3.00004 10C3.00004 10 11.4477 10 12 10C12 9.33333 12.0001 8.16667 12.0001 7.5H3.0001C3.00006 8 3.0001 9.5 3.00004 10ZM3.0001 3.5C3.00003 4.16667 3 5.33333 3 6H9C9 5.33333 9 4.16667 9 3.5C9 3.5 3.55238 3.5 3.0001 3.5ZM3.00009 14C3.21041 14 15 14 15 14C15 13.5 15 12 15 11.5C15 11.5 3.55238 11.5 3.00009 11.5C3 12 3 13.5 3.00009 14Z' />
+    </svg>
+);

package/src/components/tsortable-head-cell/sort-icon-desc.tsx

@@ -0,0 +1,16 @@
+import React, { SVGProps } from 'react';
+
+export const SortIconDesc: React.FC<SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        width='18'
+        height='18'
+        viewBox='0 0 18 18'
+        fill='currentColor'
+        xmlns='http://www.w3.org/2000/svg'
+        focusable='false'
+        role='img'
+        {...props}
+    >
+        <path d='M3.00004 10C3.00004 10 11.4477 10 12 10C12 9.33333 12.0001 8.16667 12.0001 7.5H3.0001C3.00006 8 3.0001 9.5 3.00004 10ZM3.0001 3.5C3.00003 4.16667 3 5.33333 3 6H15C15 5.33333 15 4.16667 15 3.5C15 3.5 3.55238 3.5 3.0001 3.5ZM3.00009 14C3.21041 14 9 14 9 14C9 13.5 9 12 9 11.5C9 11.5 3.55238 11.5 3.00009 11.5C3 12 3 13.5 3.00009 14Z' />
+    </svg>
+);

package/src/components/tsortable-head-cell/sort-icon-unset.tsx

@@ -0,0 +1,16 @@
+import React, { SVGProps } from 'react';
+
+export const SortIconUnset: React.FC<SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        width='18'
+        height='18'
+        viewBox='0 0 18 18'
+        fill='currentColor'
+        xmlns='http://www.w3.org/2000/svg'
+        focusable='false'
+        role='img'
+        {...props}
+    >
+        <path d='M3 10C3 10 10.4477 10 11 10C11 9.33333 11.0001 8.16667 11.0001 7.5H3.00006C3.00002 8 3.00006 9.5 3 10ZM3.0001 3.5C3.00003 4.16667 3 5.33333 3 6H15C15 5.33333 15 4.16667 15 3.5C15 3.5 3.55238 3.5 3.0001 3.5ZM3 14C3.21032 14 14 14 14 14C14 13.5 14 12 14 11.5C14 11.5 3.55228 11.5 3 11.5C2.99991 12 2.99991 13.5 3 14Z' />
+    </svg>
+);

package/src/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/typings.ts

@@ -0,0 +1,8 @@
+export type TextAlignProperty =
+    | 'center'
+    | 'end'
+    | 'justify'
+    | 'left'
+    | 'match-parent'
+    | 'right'
+    | 'start';

package/src/utils.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export function isChildInstanceOf<P>(child: React.ReactElement, Component: React.ComponentType<P>) {
+    // мы не можем полагаться на child.type === Component, см. https://github.com/gaearon/react-hot-loader/issues/304
+    return child.type === React.createElement(Component).type;
+}