@epam/uui 5.3.0-rc.1 → 5.3.0

package/components/datePickers/index.ts

@@ -0,0 +1,5 @@
+export * from './DatePicker';
+export * from './DatePickerBody';
+export * from './Calendar';
+export * from './RangeDatePicker';
+export * from './RangeDatePickerBody';

package/components/dnd/DropMarker.module.scss

@@ -0,0 +1,62 @@
+.root {
+    --uui-drop_marker: var(--uui-primary-50);
+
+    --uui-drop_marker-offset: -1px;
+    --uui-drop_marker-width: 2px;
+}
+
+.blocker {
+    opacity: 0.1;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.marker {
+    position: absolute;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.top {
+    top: var(--uui-drop_marker-offset);
+    left: 0;
+    right: 0;
+    height: var(--uui-drop_marker-width);
+    background-color: var(--uui-drop_marker);
+}
+
+.bottom {
+    bottom: var(--uui-drop_marker-offset);
+    left: 0;
+    right: 0;
+    height: var(--uui-drop_marker-width);
+    background-color: var(--uui-drop_marker);
+}
+
+.left {
+    top: 0;
+    bottom: 0;
+    left: var(--uui-drop_marker-offset);
+    width: var(--uui-drop_marker-width);
+    background-color: var(--uui-drop_marker);
+}
+
+.right {
+    top: 0;
+    bottom: 0;
+    right: var(--uui-drop_marker-offset);
+    width: var(--uui-drop_marker-width);
+    background-color: var(--uui-drop_marker);
+}
+
+.inside {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border: var(--uui-drop_marker-width) solid var(--uui-drop_marker);
+    background-color: color-mix(in srgb, var(--uui-surface-highest) 50%, transparent);;
+}

package/components/dnd/DropMarker.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { DndActorRenderParams, IHasCX } from '@epam/uui-core';
+import css from './DropMarker.module.scss';
+
+export interface DropMarkerProps extends DndActorRenderParams, IHasCX {
+    enableBlocker?: boolean;
+}
+
+export function DropMarker(props: DropMarkerProps) {
+    return props.isDndInProgress
+        ? (
+            <>
+                { props.enableBlocker && <div className={ css.blocker } /> }
+                <div className={ cx([
+                    css.root,
+                    css.marker,
+                    css[props.position],
+                    props?.cx,
+                ]) }
+                />
+            </>
+        )
+        : null;
+}

package/components/dnd/__tests__/DropMarker.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { DropMarker } from '../DropMarker';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('DropMarker', () => {
+    it('should be rendered correctly', () => {
+        const mockEventHandlers: any = {};
+        mockEventHandlers.onMouseDown = jest.fn();
+        mockEventHandlers.onMouseEnter = jest.fn();
+        mockEventHandlers.onMouseMove = jest.fn();
+        mockEventHandlers.onMouseLeave = jest.fn();
+        mockEventHandlers.onMouseUp = jest.fn();
+
+        const tree = renderer
+            .create(
+                <DropMarker
+                    classNames={ ['test-class'] }
+                    eventHandlers={ mockEventHandlers }
+                    isDndInProgress
+                    isDraggable
+                    isDraggedOut
+                    isDraggedOver
+                    isDragGhost
+                    isDropAccepted
+                    position="top"
+                />,
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/dnd/__tests__/__snapshots__/DropMarker.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropMarker should be rendered correctly 1`] = `
+<div
+  className="root marker top"
+/>
+`;

package/components/dnd/index.tsx

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

package/components/fileUpload/DropSpot.module.scss

@@ -0,0 +1,47 @@
+.root {
+    --uui-dropspot-border: var(--uui-control-border);
+    --uui-dropspot-border-dropstart: var(--uui-primary-50);
+    --uui-dropspot-background-dropstart: var(--uui-primary-10);
+    --uui-dropspot-icon: var(--uui-primary-50);
+    //
+    position: relative;
+    min-height: 104px;
+    border: 2px dashed var(--uui-dropspot-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: pre;
+
+    &.drop-start {
+        border: 2px dashed var(--uui-dropspot-border-dropstart);
+    }
+
+    &.drop-over {
+        background-color: var(--uui-dropspot-background-dropstart);
+    }
+
+    .link {
+        color: var(--uui-link);
+
+        &:hover {
+            color: var(--uui-link-hover);
+        }
+    }
+
+    .drop-area {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .icon-blue {
+        fill: var(--uui-dropspot-icon);
+        margin-right: 6px;
+    }
+}

package/components/fileUpload/DropSpot.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { cx, IHasRawProps } from '@epam/uui-core';
+import { DropSpot as UuiDropSpot, DropSpotRenderParams, UploadFileToggler } from '@epam/uui-components';
+import { FlexRow, IconContainer } from '../layout';
+import { Anchor } from '../navigation';
+import { RichTextView, Text } from '../typography';
+import { ReactComponent as ShapeIcon } from '../../icons/fileUpload/shape.svg';
+import { i18n } from '../../i18n';
+import css from './DropSpot.module.scss';
+
+export interface DropSpotProps extends IHasRawProps<React.HTMLAttributes<HTMLDivElement>> {
+    cx?: string;
+    infoText?: string;
+    onUploadFiles(files: File[]): any;
+    accept?: string;
+    single?: boolean;
+}
+
+export class DropSpot extends React.Component<DropSpotProps> {
+    renderAttachmentArea = (props: DropSpotRenderParams) => {
+        return (
+            <div className={ cx(css.root, this.props.cx, props.isDragStart && css.dropStart, props.isDraggingOver && css.dropOver) } { ...this.props.rawProps }>
+                <div { ...props.eventHandlers } className={ css.dropArea }>
+                    <FlexRow size="24">
+                        <IconContainer icon={ ShapeIcon } cx={ css.iconBlue } />
+                        <Text lineHeight="24" size="24" fontSize="14">
+                            {' '}
+                            {i18n.fileUpload.labelStart}
+                            {' '}
+                        </Text>
+                        <UploadFileToggler
+                            onFilesAdded={ this.props.onUploadFiles }
+                            render={ (props) => (
+                                <RichTextView>
+                                    <Anchor { ...props } cx={ css.link }>
+                                        {i18n.fileUpload.browse}
+                                    </Anchor>
+                                </RichTextView>
+                            ) }
+                            accept={ this.props.accept }
+                            single={ this.props.single }
+                        />
+                    </FlexRow>
+                    {this.props.infoText && (
+                        <Text lineHeight="24" size="24" fontSize="14" color="secondary">
+                            {this.props.infoText}
+                        </Text>
+                    )}
+                </div>
+            </div>
+        );
+    };
+
+    render() {
+        return <UuiDropSpot render={ this.renderAttachmentArea } onFilesDropped={ this.props.onUploadFiles } />;
+    }
+}

package/components/fileUpload/FileCard.module.scss

@@ -0,0 +1,88 @@
+.root {
+    --uui-file_card-border: var(--uui-control-border);
+    --uui-file_card-border-error: var(--uui-error-50);
+    --uui-file_card-text-error: var(--uui-error-70);
+    --uui-file_card-icon-default: var(--uui-icon);
+    --uui-file_card-icon-error: var(--uui-error-50);
+    --uui-file_card-icon-doc: #2B579A;
+    --uui-file_card-icon-xls: #217346;
+    --uui-file_card-icon-pdf: #FA0F01;
+    --uui-file_card-icon-mov: #5214CC;
+    --uui-file_card-icon-img: #E67E17;
+
+    --uui-file_card-border-radius: var(--uui-border-radius);
+
+    --uui-file_card-font-error: var(--uui-font);
+
+    &:global(.uui-file_card) {
+        box-sizing: border-box;
+        min-height: 48px;
+        padding: 5px;
+        border: 1px solid var(--uui-file_card-border);
+        border-radius: var(--uui-file_card-border-radius);
+
+        .file-name {
+            white-space: nowrap;
+        }
+    }
+
+    &:global(.uui-loading) {
+        .default-color,
+        .doc-color,
+        .xls-color,
+        .pdf-color,
+        .movie-color,
+        .img-color {
+            fill: var(--uui-icon-disabled);
+        }
+    }
+
+    &:global(.uui-error) {
+        border: 1px solid var(--uui-file_card-border-error);
+    }
+
+    .default-color {
+        fill: var(--uui-file_card-icon-default);
+    }
+
+    .doc-color {
+        fill: var(--uui-file_card-icon-doc);
+    }
+
+    .xls-color {
+        fill: var(--uui-file_card-icon-xls);
+    }
+
+    .pdf-color {
+        fill: var(--uui-file_card-icon-pdf);
+    }
+
+    .mov-color {
+        fill: var(--uui-file_card-icon-mov);
+    }
+
+    .img-color {
+        fill: var(--uui-file_card-icon-img);
+    }
+
+    .error-block {
+        font-family: var(--uui-file_card-font-error);
+        font-weight: 400;
+        font-size: 12px;
+        color: var(--uui-file_card-text-error);
+        display: inline-flex;
+        align-items: center;
+        padding: 0;
+        cursor: pointer;
+
+        svg {
+            margin-right: 4px;
+            fill: var(--uui-file_card-icon-error);
+        }
+    }
+
+    .icons-block {
+        min-width: 18px;
+        flex-basis: 0;
+    }
+}

package/components/fileUpload/FileCard.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import css from './FileCard.module.scss';
+import { i18n } from '../../i18n';
+import { cx, FileUploadResponse, formatBytes, IClickable, IHasCX, uuiMod } from '@epam/uui-core';
+import { SvgCircleProgress } from './SvgCircleProgress';
+import { IconContainer } from '@epam/uui-components';
+import { FlexCell, FlexRow } from '../../components/layout';
+import { IconButton } from '../../components/buttons';
+import { Text } from '../../components/typography';
+import { Tooltip } from '../../components/overlays';
+import { fileIcons } from '../../icons/icons';
+import { ReactComponent as RemoveIcon } from '@epam/assets/icons/common/navigation-close-18.svg';
+import { ReactComponent as ErrorIcon } from '../../icons/notification-error-fill-10.svg';
+
+export interface FileCardItem extends Partial<File & FileUploadResponse> {
+    progress?: number;
+    abortXHR?: () => void;
+}
+
+export interface FileCardProps extends IClickable, IHasCX {
+    file: FileCardItem;
+    width?: number;
+}
+
+export const FileCard = React.forwardRef<HTMLDivElement, FileCardProps>((props, ref) => {
+    const [isLoadingShow, setIsLoadingShow] = React.useState<boolean>(true);
+
+    const { file } = props;
+
+    const getIcon = (extension: string) => {
+        switch (extension) {
+            case 'doc':
+            case 'docx':
+                return <IconContainer size={ 24 } icon={ fileIcons.docIcon } cx={ css.docColor } />;
+            case 'xls':
+            case 'xlsx':
+                return <IconContainer size={ 24 } icon={ fileIcons.exelIcon } cx={ css.xlsColor } />;
+            case 'pdf':
+                return <IconContainer size={ 24 } icon={ fileIcons.pdfIcon } cx={ css.pdfColor } />;
+            case 'gif':
+            case 'jpg':
+            case 'jpeg':
+            case 'svg':
+            case 'png':
+            case 'webp':
+                return <IconContainer size={ 24 } icon={ fileIcons.imgIcon } cx={ css.imgColor } />;
+            case 'avi':
+            case 'mov':
+            case 'mp4':
+            case 'wmw':
+            case 'mkv':
+                return <IconContainer size={ 24 } icon={ fileIcons.videoIcon } cx={ css.movColor } />;
+            case 'csv':
+            case 'xml':
+                return <IconContainer size={ 24 } icon={ fileIcons.tableIcon } cx={ css.defaultColor } />;
+            case 'rtf':
+            case 'txt':
+                return <IconContainer size={ 24 } icon={ fileIcons.textIcon } cx={ css.defaultColor } />;
+            case 'eml':
+            case 'emlx':
+                return <IconContainer size={ 24 } icon={ fileIcons.mailIcon } cx={ css.defaultColor } />;
+            default:
+                return <IconContainer size={ 24 } icon={ fileIcons.fileIcon } cx={ css.defaultColor } />;
+        }
+    };
+
+    const {
+        cx: componentCx,
+        width,
+        file: {
+            progress, size, name, extension, error, abortXHR,
+        },
+        onClick,
+    } = props;
+    const fileExtension = extension || name?.split('.').pop();
+    const fileName = name?.split('.').slice(0, -1).join('');
+    const isLoading = progress < 100;
+    const isCrossShow = ((!isLoadingShow && isLoading) || !isLoading) && onClick;
+
+    const mouseLeaveHandler = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        setIsLoadingShow(() => true);
+    };
+
+    const mouseEnterHandler = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        setIsLoadingShow(() => false);
+    };
+
+    const renderErrorContent = () => (
+        <Tooltip content={ file.error.message } placement="bottom-start">
+            <div className={ css.errorBlock }>
+                <ErrorIcon />
+                Upload failed
+            </div>
+        </Tooltip>
+    );
+
+    const renderSuccessfulContent = () => (
+        <Text size="18" fontSize="14" lineHeight="18" color="secondary">
+            {fileExtension && `${fileExtension.toUpperCase()}, `}
+            {isLoading && formatBytes((size / 100) * progress, 2, false) + i18n.fileCard.fileSizeProgress}
+            {formatBytes(size)}
+        </Text>
+    );
+
+    const removeHandler = () => {
+        progress && progress < 100 && abortXHR();
+        onClick();
+    };
+
+    return (
+        <FlexCell
+            ref={ ref }
+            cx={ cx(css.root, 'uui-file_card', (isLoading || error?.isError) && uuiMod.loading, componentCx, error?.isError && uuiMod.error) }
+            minWidth={ width }
+            width={ !width ? '100%' : undefined }
+        >
+            <FlexRow size="36" alignItems="top" spacing="6">
+                {fileExtension && getIcon(fileExtension)}
+                <FlexCell width="100%">
+                    <Text size="18" fontSize="14" lineHeight="18" color={ progress < 100 ? 'secondary' : 'primary' } cx={ css.fileName }>
+                        {fileName}
+                    </Text>
+                    {error?.isError ? renderErrorContent() : renderSuccessfulContent()}
+                </FlexCell>
+                <div className={ cx(css.iconsBlock) } onMouseEnter={ mouseEnterHandler } onMouseLeave={ mouseLeaveHandler }>
+                    {isLoadingShow && isLoading && <SvgCircleProgress progress={ progress } size={ 18 } />}
+                    {isCrossShow && <IconButton icon={ RemoveIcon } onClick={ removeHandler } />}
+                </div>
+            </FlexRow>
+        </FlexCell>
+    );
+});

package/components/fileUpload/SvgCircleProgress.module.scss

@@ -0,0 +1,8 @@
+.root {
+    circle {
+        transition: stroke-dashoffset 0.35s;
+        transform: rotate(-90deg);
+        transform-origin: 50% 50%;
+        stroke: var(--uui-icon-disabled);
+    }
+}

package/components/fileUpload/SvgCircleProgress.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { IHasCX, IHasRawProps } from '@epam/uui-core';
+import css from './SvgCircleProgress.module.scss';
+
+interface SvgCircleProgressProps extends IHasCX, IHasRawProps<React.SVGAttributes<SVGSVGElement>> {
+    size: number;
+    progress: number;
+}
+
+export const SvgCircleProgress = React.forwardRef<SVGSVGElement, SvgCircleProgressProps>((props, ref) => {
+    const outsetRadius = props.size / 2 - 1;
+    const insetRadius = props.size / 2 - 3;
+    const circumference = insetRadius * Math.PI;
+
+    return (
+        <svg className={ css.root } width={ props.size } height={ props.size } ref={ ref } { ...props.rawProps }>
+            <circle
+                strokeDasharray={ circumference }
+                strokeDashoffset={ circumference - (props.progress / 100) * circumference }
+                strokeWidth={ insetRadius }
+                fill="transparent"
+                r={ insetRadius / 2 }
+                cx={ props.size / 2 }
+                cy={ props.size / 2 }
+            />
+            <circle
+                strokeWidth={ 1 }
+                fill="transparent"
+                r={ outsetRadius }
+                cx={ props.size / 2 }
+                cy={ props.size / 2 }
+            />
+        </svg>
+    );
+});

package/components/fileUpload/__tests__/DropSpot.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DropSpot } from '../DropSpot';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('DropSpot', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<DropSpot onUploadFiles={ jest.fn } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly with props', () => {
+        const tree = renderer.create(<DropSpot onUploadFiles={ jest.fn } infoText="Test info" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/fileUpload/__tests__/FileCard.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { FileCard } from '../FileCard';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('FileCard', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer
+            .create(
+                <FileCard
+                    file={ {
+                        id: 1,
+                        name: 'Test.xls',
+                        size: 12546,
+                        progress: 0,
+                    } }
+                />,
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer
+            .create(
+                <FileCard
+                    file={ {
+                        id: 1,
+                        name: 'Test.doc',
+                        size: 12546,
+                        progress: 0,
+                    } }
+                    width={ 140 }
+                    onClick={ jest.fn }
+                />,
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer
+            .create(
+                <FileCard
+                    file={ {
+                        id: 1,
+                        name: 'Test.gif',
+                        size: 12546,
+                        progress: 100,
+                    } }
+                    width={ 140 }
+                    onClick={ jest.fn }
+                />,
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/fileUpload/__tests__/SvgCircleProgress.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SvgCircleProgress } from '../SvgCircleProgress';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('SvgCircleProgress', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<SvgCircleProgress progress={ 35 } size={ 30 } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});