@epam/uui 5.3.0-rc.0 → 5.3.0

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

@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropSpot should be rendered correctly 1`] = `
+<div
+  className="root"
+>
+  <div
+    className="dropArea"
+    onDragEnter={[Function]}
+    onDragLeave={[Function]}
+    onDragOver={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      className="uui-flex-row root size-24 container align-items-center"
+      style={
+        Object {
+          "columnGap": undefined,
+          "rowGap": undefined,
+        }
+      }
+    >
+      <div
+        className="container uui-icon uui-enabled iconBlue"
+        style={Object {}}
+      >
+        <svg
+          className=""
+        />
+      </div>
+      <div
+        className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-24 font-size-14 v-padding-0 container"
+      >
+         
+        Drop files to attach or
+         
+      </div>
+      <div>
+        <input
+          className="fileInput"
+          multiple={true}
+          onChange={[Function]}
+          type="file"
+        />
+        <div
+          className="uui-typography uui-typography-size-14"
+        >
+          <a
+            className="container uui-anchor uui-enabled -clickable root link"
+            href={null}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="link"
+            tabIndex={0}
+          >
+            browse
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DropSpot should be rendered correctly with props 1`] = `
+<div
+  className="root"
+>
+  <div
+    className="dropArea"
+    onDragEnter={[Function]}
+    onDragLeave={[Function]}
+    onDragOver={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      className="uui-flex-row root size-24 container align-items-center"
+      style={
+        Object {
+          "columnGap": undefined,
+          "rowGap": undefined,
+        }
+      }
+    >
+      <div
+        className="container uui-icon uui-enabled iconBlue"
+        style={Object {}}
+      >
+        <svg
+          className=""
+        />
+      </div>
+      <div
+        className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-24 font-size-14 v-padding-0 container"
+      >
+         
+        Drop files to attach or
+         
+      </div>
+      <div>
+        <input
+          className="fileInput"
+          multiple={true}
+          onChange={[Function]}
+          type="file"
+        />
+        <div
+          className="uui-typography uui-typography-size-14"
+        >
+          <a
+            className="container uui-anchor uui-enabled -clickable root link"
+            href={null}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="link"
+            tabIndex={0}
+          >
+            browse
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      className="root uui-text uui-color-secondary uui-font-weight-400 uui-font-style-normal uui-typography line-height-24 font-size-14 v-padding-0 container"
+    >
+      Test info
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,266 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileCard should be rendered correctly 1`] = `
+<div
+  className="flexCell root uui-file_card uui-loading"
+  style={
+    Object {
+      "alignSelf": undefined,
+      "flexBasis": "100%",
+      "flexGrow": undefined,
+      "flexShrink": undefined,
+      "minWidth": 0,
+      "textAlign": undefined,
+    }
+  }
+>
+  <div
+    className="uui-flex-row root size-36 spacing-6 container align-items-top"
+    style={
+      Object {
+        "columnGap": undefined,
+        "rowGap": undefined,
+      }
+    }
+  >
+    <div
+      className="container uui-icon uui-enabled xlsColor"
+      style={Object {}}
+    >
+      <svg
+        className=""
+        height={24}
+        width={24}
+      />
+    </div>
+    <div
+      className="flexCell"
+      style={
+        Object {
+          "alignSelf": undefined,
+          "flexBasis": "100%",
+          "flexGrow": undefined,
+          "flexShrink": undefined,
+          "minWidth": 0,
+          "textAlign": undefined,
+        }
+      }
+    >
+      <div
+        className="root uui-text uui-color-secondary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-0 fileName container"
+      >
+        Test
+      </div>
+      <div
+        className="root uui-text uui-color-secondary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-0 container"
+      >
+        XLS, 
+        0 Bytes of 
+        12.25 KB
+      </div>
+    </div>
+    <div
+      className="iconsBlock"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <svg
+        className="root"
+        height={18}
+        width={18}
+      >
+        <circle
+          cx={9}
+          cy={9}
+          fill="transparent"
+          r={3}
+          strokeDasharray={18.84955592153876}
+          strokeDashoffset={18.84955592153876}
+          strokeWidth={6}
+        />
+        <circle
+          cx={9}
+          cy={9}
+          fill="transparent"
+          r={8}
+          strokeWidth={1}
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`FileCard should be rendered correctly 2`] = `
+<div
+  className="flexCell root uui-file_card uui-loading"
+  style={
+    Object {
+      "alignSelf": undefined,
+      "flexBasis": "0",
+      "flexGrow": undefined,
+      "flexShrink": undefined,
+      "minWidth": "140px",
+      "textAlign": undefined,
+    }
+  }
+>
+  <div
+    className="uui-flex-row root size-36 spacing-6 container align-items-top"
+    style={
+      Object {
+        "columnGap": undefined,
+        "rowGap": undefined,
+      }
+    }
+  >
+    <div
+      className="container uui-icon uui-enabled docColor"
+      style={Object {}}
+    >
+      <svg
+        className=""
+        height={24}
+        width={24}
+      />
+    </div>
+    <div
+      className="flexCell"
+      style={
+        Object {
+          "alignSelf": undefined,
+          "flexBasis": "100%",
+          "flexGrow": undefined,
+          "flexShrink": undefined,
+          "minWidth": 0,
+          "textAlign": undefined,
+        }
+      }
+    >
+      <div
+        className="root uui-text uui-color-secondary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-0 fileName container"
+      >
+        Test
+      </div>
+      <div
+        className="root uui-text uui-color-secondary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-0 container"
+      >
+        DOC, 
+        0 Bytes of 
+        12.25 KB
+      </div>
+    </div>
+    <div
+      className="iconsBlock"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <svg
+        className="root"
+        height={18}
+        width={18}
+      >
+        <circle
+          cx={9}
+          cy={9}
+          fill="transparent"
+          r={3}
+          strokeDasharray={18.84955592153876}
+          strokeDashoffset={18.84955592153876}
+          strokeWidth={6}
+        />
+        <circle
+          cx={9}
+          cy={9}
+          fill="transparent"
+          r={8}
+          strokeWidth={1}
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`FileCard should be rendered correctly 3`] = `
+<div
+  className="flexCell root uui-file_card"
+  style={
+    Object {
+      "alignSelf": undefined,
+      "flexBasis": "0",
+      "flexGrow": undefined,
+      "flexShrink": undefined,
+      "minWidth": "140px",
+      "textAlign": undefined,
+    }
+  }
+>
+  <div
+    className="uui-flex-row root size-36 spacing-6 container align-items-top"
+    style={
+      Object {
+        "columnGap": undefined,
+        "rowGap": undefined,
+      }
+    }
+  >
+    <div
+      className="container uui-icon uui-enabled imgColor"
+      style={Object {}}
+    >
+      <svg
+        className=""
+        height={24}
+        width={24}
+      />
+    </div>
+    <div
+      className="flexCell"
+      style={
+        Object {
+          "alignSelf": undefined,
+          "flexBasis": "100%",
+          "flexGrow": undefined,
+          "flexShrink": undefined,
+          "minWidth": 0,
+          "textAlign": undefined,
+        }
+      }
+    >
+      <div
+        className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-0 fileName container"
+      >
+        Test
+      </div>
+      <div
+        className="root uui-text uui-color-secondary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-0 container"
+      >
+        GIF, 
+        12.25 KB
+      </div>
+    </div>
+    <div
+      className="iconsBlock"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <button
+        className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root"
+        onClick={[Function]}
+        tabIndex={0}
+        type="button"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SvgCircleProgress should be rendered correctly 1`] = `
+<svg
+  className="root"
+  height={30}
+  width={30}
+>
+  <circle
+    cx={15}
+    cy={15}
+    fill="transparent"
+    r={6}
+    strokeDasharray={37.69911184307752}
+    strokeDashoffset={24.504422698000386}
+    strokeWidth={12}
+  />
+  <circle
+    cx={15}
+    cy={15}
+    fill="transparent"
+    r={14}
+    strokeWidth={1}
+  />
+</svg>
+`;

package/components/fileUpload/index.ts

@@ -0,0 +1,3 @@
+export * from './DropSpot';
+export * from './FileCard';
+export * from './SvgCircleProgress';

package/components/filters/FilterDatePickerBody.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { i18n } from '../../i18n';
+import { DatePickerCoreProps, IDropdownBodyProps } from '@epam/uui-core';
+import { BaseDatePicker, DatePickerState } from '@epam/uui-components';
+import { FlexSpacer, FlexRow, FlexCell } from '../layout';
+import { LinkButton } from '../buttons';
+import { Text } from '../typography';
+import { DatePickerBody } from '../datePickers';
+
+export interface DatePickerProps extends DatePickerCoreProps, IDropdownBodyProps {}
+
+export class FilterDatePickerBody extends BaseDatePicker<DatePickerProps> {
+    state: DatePickerState = {
+        ...super.getValue(),
+        isOpen: false,
+        inputValue: null,
+    };
+
+    renderInput = (): any => {
+        return null;
+    };
+
+    onToggleHandler = (val: boolean) => {
+        this.onToggle(val);
+        this.props.onClose();
+    };
+
+    handleCancel = () => {
+        this.handleValueChange(undefined);
+        this.setState({ inputValue: null, selectedDate: null });
+    };
+
+    renderBody() {
+        return (
+            <>
+                <FlexRow borderBottom={ true }>
+                    <DatePickerBody
+                        filter={ this.props.filter }
+                        value={ this.getValue() }
+                        setSelectedDate={ this.setSelectedDate }
+                        setDisplayedDateAndView={ this.setDisplayedDateAndView }
+                        changeIsOpen={ this.onToggleHandler }
+                        renderDay={ this.props.renderDay }
+                        isHoliday={ this.props.isHoliday }
+                        rawProps={ this.props.rawProps?.body }
+                    />
+                </FlexRow>
+                <FlexCell alignSelf="stretch">
+                    <FlexRow padding="24" vPadding="12">
+                        <Text>{this.state.selectedDate ? dayjs(this.state.selectedDate).format('MMM DD, YYYY') : ''}</Text>
+                        <FlexSpacer />
+                        <LinkButton isDisabled={ !this.state.selectedDate } caption={ i18n.filterToolbar.datePicker.clearCaption } onClick={ this.handleCancel } />
+                    </FlexRow>
+                </FlexCell>
+            </>
+        );
+    }
+
+    render() {
+        return this.renderBody();
+    }
+}

package/components/filters/FilterItemBody.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FilterPickerBody } from './FilterPickerBody';
+import { FilterDatePickerBody } from './FilterDatePickerBody';
+import { FilterRangeDatePickerBody } from './FilterRangeDatePickerBody';
+import { IFilterItemBodyProps } from '@epam/uui-core';
+import { FilterNumericBody } from './FilterNumericBody';
+
+export function FilterItemBody(props: IFilterItemBodyProps<any>) {
+    switch (props.type) {
+        case 'singlePicker':
+            return <FilterPickerBody { ...props } selectionMode="single" valueType="id" />;
+        case 'numeric':
+            return <FilterNumericBody { ...props } />;
+        case 'multiPicker':
+            return <FilterPickerBody { ...props } selectionMode="multi" valueType="id" />;
+        case 'datePicker':
+            return <FilterDatePickerBody { ...props } format={ props.format || 'DD/MM/YYYY' } />;
+        case 'rangeDatePicker':
+            return <FilterRangeDatePickerBody { ...props } format={ props.format || 'DD/MM/YYYY' } value={ props.value || { from: null, to: null } } />;
+        case 'custom':
+            return props.render(props);
+    }
+}

package/components/filters/FilterNumericBody.module.scss

@@ -0,0 +1,4 @@
+.container {
+    margin-top: 12px;
+    padding-bottom: 12px;
+}

package/components/filters/FilterNumericBody.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { FlexSpacer } from '@epam/uui-components';
+import { NumericInput } from '../inputs';
+import { DropdownBodyProps, isMobile } from '@epam/uui-core';
+import { FlexCell, FlexRow } from '../layout';
+import { LinkButton } from '../buttons';
+import { i18n } from '../../i18n';
+import css from './FilterNumericBody.module.scss';
+
+interface INumericRangeValue {
+    from: number | null;
+    to: number | null;
+}
+
+interface IFilterNumericBodyProps extends DropdownBodyProps {
+    onValueChange: (value: number | INumericRangeValue) => void;
+    value: undefined | number | INumericRangeValue;
+    selectedPredicate?: string;
+}
+
+export function FilterNumericBody(props: IFilterNumericBodyProps) {
+    const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
+
+    const rangeValueHandler = (type: 'from' | 'to') => (val: number) => {
+        const value = props.value as INumericRangeValue;
+        switch (type) {
+            case 'from': {
+                props.onValueChange({
+                    from: val,
+                    to: value?.to ?? null,
+                });
+                break;
+            }
+            case 'to': {
+                props.onValueChange({
+                    from: value?.from ?? null,
+                    to: val,
+                });
+                break;
+            }
+        }
+    };
+
+    const renderFooter = () => {
+        const size = isMobile() ? '48' : '36';
+        const clearSelection = () => {
+            if (isInRangePredicate) {
+                props.onValueChange({ from: null, to: null });
+            } else {
+                props.onValueChange(null);
+            }
+        };
+
+        const isClearDisabled = typeof props.value !== 'number' && typeof props.value !== 'object';
+
+        return (
+            <FlexRow padding="12">
+                <FlexSpacer />
+                <FlexCell width="auto" alignSelf="center">
+                    <LinkButton isDisabled={ isClearDisabled } size={ size } caption={ i18n.pickerInput.clearSelectionButtonSingle } onClick={ clearSelection } />
+                </FlexCell>
+            </FlexRow>
+        );
+    };
+
+    if (isInRangePredicate) {
+        const value = props.value as INumericRangeValue;
+        return (
+            <div>
+                <FlexRow padding="12" alignItems="center" spacing="12" borderBottom={ true } cx={ css.container }>
+                    <FlexCell width="100%">
+                        <NumericInput
+                            value={ value?.from ?? null }
+                            onValueChange={ rangeValueHandler('from') }
+                            size="36"
+                            placeholder="Min"
+                            formatOptions={ { maximumFractionDigits: 2 } }
+                        />
+                    </FlexCell>
+                    <FlexCell width="100%">
+                        <NumericInput
+                            value={ value?.to ?? null }
+                            onValueChange={ rangeValueHandler('to') }
+                            size="36"
+                            placeholder="Max"
+                            formatOptions={ { maximumFractionDigits: 2 } }
+                        />
+                    </FlexCell>
+                </FlexRow>
+                {renderFooter()}
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            <FlexRow padding="12" alignItems="center" borderBottom={ true } cx={ css.container }>
+                <FlexCell width={ 130 }>
+                    <NumericInput
+                        value={ typeof props.value === 'number' ? props.value : null }
+                        onValueChange={ props.onValueChange }
+                        size="36"
+                        placeholder="Enter a number"
+                        formatOptions={ { maximumFractionDigits: 2 } }
+                    />
+                </FlexCell>
+            </FlexRow>
+            {renderFooter()}
+        </div>
+    );
+}