scorer-ui-kit 1.7.4 → 1.8.0-beta.1

package/README.md

@@ -1,5 +1,12 @@
 # scorer-ui-kit
 
+This project is prefered to be run using npm 6, usually you can find it in node version 12 [(Why?)](https://github.com/nodejs/node/discussions/37689) [(How to downgrade?)](https://www.geeksforgeeks.org/how-to-install-the-previous-version-of-node-js-and-npm/).
+
+```bash
+npm --version # verify your npm version
+```
+
+
 ## Development
 
 Local development is broken into two parts (ideally using two tabs).
@@ -7,6 +14,7 @@ Local development is broken into two parts (ideally using two tabs).
 First, run rollup to watch your `src/` module and automatically recompile it into `dist/` whenever you make changes.
 
 ```bash
+npm ci # if you are missing or need to update node modules
 npm start # runs rollup with watch flag
 ```
 
@@ -15,6 +23,7 @@ The second part will be running the `example/` create-react-app that's linked to
 ```bash
 # (in another tab)
 cd example
+npm ci # if you are missing or need to update node modules
 npm start # runs create-react-app dev server
 ```
 

package/dist/Filters/FilterTypes.d.ts

@@ -1,12 +1,51 @@
-export declare const isFilterItem: (item: any) => item is IFilterItem;
+import { IInputOptionsType } from '../Form';
+import { IBasicSearchInput } from '../Misc/atoms/BasicSearchInput';
+import { DateInterval } from './molecules/DatePicker';
+import { IDropdownDatePicker } from './molecules/DropdownDatePicker';
+import { IFilterDropdown } from './molecules/FilterDropdown';
 declare type IFilterItem = {
     text: string;
     value: string | number;
 };
 declare type IFilterValue = IFilterItem | IFilterItem[] | null;
+declare type IFilterType = 'search' | 'dropdown' | 'datepicker';
+declare const isFilterItem: (item: any) => item is IFilterItem;
 interface IFilterResult {
     id: string;
-    selected: IFilterValue;
+    type: IFilterType;
+    selected: IFilterItem | IFilterItem[] | DateInterval | Date | null;
 }
-declare type IFilterType = 'search' | 'dropdown';
-export type { IFilterType, IFilterItem, IFilterResult, IFilterValue, };
+interface ISearchFilter extends IBasicSearchInput {
+    id: string;
+    canHide?: boolean;
+    showFieldText?: string;
+    selected?: IFilterItem;
+}
+interface IFilterDropdownExt extends IFilterDropdown {
+    id: string;
+    canHide?: boolean;
+}
+interface IFilterDatePicker extends IDropdownDatePicker {
+    id: string;
+    canHide?: boolean;
+    name?: string;
+}
+interface IFilterDropdownConfig {
+    id: string;
+    canHide?: boolean;
+    buttonIcon: string;
+    buttonText: string;
+    list: IFilterItem[];
+    selected?: IFilterValue;
+    disabled?: boolean;
+    optionType?: IInputOptionsType;
+    isLoading?: boolean;
+    loadingText?: string;
+    hasOptionsFilter?: boolean;
+    searchPlaceholder?: string;
+    maxDisplayedItems?: number;
+    searchResultText?: string;
+    name?: string;
+}
+export { isFilterItem };
+export type { IFilterType, IFilterItem, IFilterResult, IFilterValue, ISearchFilter, IFilterDropdownExt, IFilterDatePicker, IFilterDropdownConfig };

package/dist/Filters/atoms/FilterDropHandler.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface IFilterDropHandler {
+    buttonIcon: string;
+    buttonText: string;
+    disabled?: boolean;
+    min_width?: number;
+    min_height?: number;
+    onToggleOpenCallback?: (isOpen: boolean) => void;
+    onCloseCallback?: () => void;
+}
+declare const FilterDropHandler: React.FC<IFilterDropHandler>;
+export default FilterDropHandler;

package/dist/Filters/index.d.ts

@@ -1,10 +1,10 @@
-import DatePicker from './molecules/DatePicker';
+import DatePicker, { DateInterval, isDateInterval } from './molecules/DatePicker';
 import FilterDropdownContainer from './atoms/FilterDropdownContainer';
 import FilterButton from './atoms/FilterButton';
 import FilterDropdown from './molecules/FilterDropdown';
-import FilterInputs, { ISearchFilter, IFilterInputs, IFilterDropdownExt } from './molecules/FilterInputs';
+import FilterInputs, { IFilterInputs } from './molecules/FilterInputs';
 import FiltersResults, { IFilterLabel } from './molecules/FiltersResults';
-import FilterBar, { IFilterDropdownConfig } from './organisms/FilterBar';
-import { IFilterType, IFilterItem, IFilterResult, IFilterValue, isFilterItem } from './FilterTypes';
-export { DatePicker, FilterDropdownContainer, FilterButton, FilterDropdown, FilterInputs, FiltersResults, FilterBar, isFilterItem, };
-export type { ISearchFilter, IFilterInputs, IFilterDropdownExt, IFilterLabel, IFilterDropdownConfig, IFilterType, IFilterItem, IFilterResult, IFilterValue, };
+import FilterBar from './organisms/FilterBar';
+import { IFilterType, IFilterItem, IFilterResult, IFilterValue, ISearchFilter, IFilterDropdownExt, IFilterDropdownConfig, IFilterDatePicker, isFilterItem } from './FilterTypes';
+export { DatePicker, FilterDropdownContainer, FilterButton, FilterDropdown, FilterInputs, FiltersResults, FilterBar, isFilterItem, isDateInterval, };
+export type { ISearchFilter, IFilterInputs, IFilterDropdownExt, IFilterLabel, IFilterDropdownConfig, IFilterType, IFilterItem, IFilterResult, IFilterValue, DateInterval, IFilterDatePicker };

package/dist/Filters/molecules/DatePicker.d.ts

@@ -1,15 +1,19 @@
 import React from 'react';
 declare type DateMode = "single" | "interval";
 declare type TimeMode = "off" | "single" | "interval";
-interface DateInterval {
+export declare const isDateInterval: (value: any) => value is DateInterval;
+export interface DateInterval {
     start: Date;
     end: Date;
 }
-interface IProps {
+export interface IDatePicker {
     initialValue?: Date | DateInterval;
     dateMode?: DateMode;
     timeMode?: TimeMode;
+    hasEmptyValue?: boolean;
+    dateTimeTextUpper?: string;
+    dateTimeTextLower?: string;
     updateCallback?: (data: DateInterval | Date) => void;
 }
-declare const DatePicker: React.FC<IProps>;
+declare const DatePicker: React.FC<IDatePicker>;
 export default DatePicker;

package/dist/Filters/molecules/DropdownDatePicker.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DateInterval, IDatePicker } from './DatePicker';
+export interface IDropdownDatePicker extends IDatePicker {
+    buttonIcon: string;
+    buttonText: string;
+    disabled?: boolean;
+    selected?: DateInterval | Date | null;
+    onCloseCallback?: (value: DateInterval | Date | null) => void;
+    onUpdateCallback?: (value: DateInterval | Date | null) => void;
+    onToggleCallback?: (value: DateInterval | Date | null, isOpen: boolean) => void;
+}
+declare const DropdownDatePicker: React.FC<IDropdownDatePicker>;
+export default DropdownDatePicker;

package/dist/Filters/molecules/FilterInputs.d.ts

@@ -1,18 +1,9 @@
 import React from 'react';
-import { IBasicSearchInput } from '../../Misc/atoms/BasicSearchInput';
-import { IFilterDropdown } from '../../Filters/molecules/FilterDropdown';
-export interface ISearchFilter extends IBasicSearchInput {
-    id: string;
-    canHide?: boolean;
-    showFieldText?: string;
-}
-export interface IFilterDropdownExt extends IFilterDropdown {
-    id: string;
-    canHide?: boolean;
-}
+import { IFilterDatePicker, IFilterDropdownExt, ISearchFilter } from '../FilterTypes';
 export interface IFilterInputs {
-    searchFilters: ISearchFilter[];
-    dropdownFilters: IFilterDropdownExt[];
+    searchFilters?: ISearchFilter[];
+    dropdownFilters?: IFilterDropdownExt[];
+    datePickerFilters?: IFilterDatePicker[];
     hasShowMore?: boolean;
     showMoreText?: string;
     showLessText?: string;

package/dist/Filters/molecules/FiltersResults.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { IFilterItem, IFilterType } from '../index';
+import { IFilterItem, IFilterType } from '../FilterTypes';
+import { DateInterval } from './DatePicker';
 export interface IFilterLabel {
     filterId: string;
-    item: IFilterItem;
+    item: IFilterItem | Date | DateInterval;
     type: IFilterType;
     icon?: string;
     filterName?: string;
@@ -12,7 +13,8 @@ interface IFilterResults {
     totalResults: number;
     resultTextTemplate?: string;
     clearText?: string;
-    onRemoveFilter?: (filterId: string, type: IFilterType, item: IFilterItem) => void;
+    resultsDateFormat?: string;
+    onRemoveFilter?: (filterId: string, type: IFilterType, item: IFilterItem | Date | DateInterval) => void;
     onClearAll?: () => void;
 }
 declare const FiltersResults: React.FC<IFilterResults>;

package/dist/Filters/organisms/FilterBar.d.ts

@@ -1,24 +1,11 @@
 import React from 'react';
-import { IFilterItem, IFilterResult } from '../FilterTypes';
-import { IInputOptionsType } from '../../Form';
-import { ISearchFilter } from '../molecules/FilterInputs';
-export interface IFilterDropdownConfig {
-    id: string;
-    canHide?: boolean;
-    buttonIcon: string;
-    buttonText: string;
-    list: IFilterItem[];
-    disabled?: boolean;
-    optionType?: IInputOptionsType;
-    loadingText?: string;
-    searchPlaceholder?: string;
-    maxDisplayedItems?: number;
-    searchResultText?: string;
-}
+import { IFilterResult, IFilterDropdownConfig } from '../FilterTypes';
+import { ISearchFilter, IFilterDatePicker } from '../FilterTypes';
 interface IFilterBar {
     filtersTitle?: string;
-    searchersConfig: ISearchFilter[];
-    dropdownsConfig: IFilterDropdownConfig[];
+    searchersConfig?: ISearchFilter[];
+    dropdownsConfig?: IFilterDropdownConfig[];
+    datePickersConfig?: IFilterDatePicker[];
     hasShowMore?: boolean;
     showMoreText?: string;
     showLessText?: string;
@@ -26,7 +13,8 @@ interface IFilterBar {
     totalResults: number;
     clearText?: string;
     isLoading?: boolean;
-    allowMultiFilter?: boolean;
+    singleFilter?: boolean;
+    resultsDateFormat?: string;
     onChangeCallback?: (currentSelected: IFilterResult[]) => void;
 }
 declare const FilterBar: React.FC<IFilterBar>;

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import lightTheme from './themes/light/light';
-import darkTheme from './themes/dark';
+import darkTheme from './themes/dark/dark';
 import themeFallbackHelper from './themes/themeFallbackHelper';
 import { AlertBar, Notification, INotificationProps, AlertWrapper } from './Alerts';
 import { Form, Button, ButtonWithIcon, ButtonWithLoading, IconButton, IconButtonData, ActionButtons, SmallInput, Input, Label, Switch, Checkbox, PasswordField, TextField, TextArea, TextAreaField, SliderInput, ISliderMark, DurationSlider, PercentageSlider, InputFileButton, DropArea, CropTool, AvatarUploader, SelectField, SelectWrapper, AreaUploadManager, RadioButton } from './Form';
-import { DatePicker, FilterDropdownContainer, FilterButton, FilterDropdown, FilterInputs, ISearchFilter, IFilterDropdownExt, FiltersResults, IFilterLabel, FilterBar, IFilterDropdownConfig, IFilterType, IFilterItem, IFilterValue, IFilterResult, isFilterItem } from './Filters';
+import { DatePicker, DateInterval, isDateInterval, IFilterDatePicker, FilterDropdownContainer, FilterButton, FilterDropdown, FilterInputs, ISearchFilter, IFilterDropdownExt, FiltersResults, IFilterLabel, FilterBar, IFilterDropdownConfig, IFilterType, IFilterItem, IFilterValue, IFilterResult, isFilterItem } from './Filters';
 import Icon, { IconSVGs } from './Icons/Icon';
 import StatusIcon from './Icons/StatusIcon';
 import { LineUI, LineUIVideo, LineUIRTC, LineSetContext, LineReducer } from './LineUI';
@@ -19,7 +19,7 @@ import Spinner from './Indicators/Spinner';
 import WebRTCClient from './WebRTCClient';
 import { MainMenu, TopBar, Content, Layout, MainContainer, SidebarBox, SidebarLink, SidebarHeading, Logo, SidebarLinkHeading, BackLink, Sidebar, GlobalUI, INotificationItem, INotificationsHistory, ICustomDrawer } from './Global';
 import { Tabs, Tab, TabList, TabContent, TabWithIcon, TabsWithIconBar, ITabIcon } from './Tabs';
-export { darkTheme, lightTheme, themeFallbackHelper, AlertBar, Notification, AlertWrapper, LineUI, LineUIVideo, LineUIRTC, LineSetContext, LineReducer, Form, Button, ButtonWithIcon, ButtonWithLoading, IconButton, ActionButtons, Input, SmallInput, Label, Switch, Checkbox, PasswordField, TextField, TextArea, TextAreaField, SliderInput, DurationSlider, PercentageSlider, InputFileButton, DropArea, CropTool, AvatarUploader, SelectField, SelectWrapper, AreaUploadManager, RadioButton, ConfirmationModal, DatePicker, FilterDropdownContainer, FilterButton, FilterDropdown, FilterInputs, FiltersResults, FilterBar, isFilterItem, Icon, IconSVGs, StatusIcon, IntroductionText, PageHeader, PageTitle, MultilineContent, Controls, PTZProvider, PTZContext, PTZReducer, usePTZ, TypeTable, TableRowThumbnail, TableHeaderTitle, EditCell, useInterval, useTo, useTitle, useCopyToClipboard, useClickOutside, usePoll, useMediaModal, resetButtonStyles, Spinner, WebRTCClient, MainMenu, TopBar, MainContainer, Layout, Content, SidebarBox, SidebarLink, SidebarHeading, Logo, SidebarLinkHeading, BackLink, Sidebar, GlobalUI, Tabs, Tab, TabList, TabContent, TabWithIcon, TabsWithIconBar, Tag, TagList, TagListWrapper, MediaBox, BasicSearchInput, NotificationProvider, useNotification, ModalContext, ModalProvider, useModal };
+export { darkTheme, lightTheme, themeFallbackHelper, AlertBar, Notification, AlertWrapper, LineUI, LineUIVideo, LineUIRTC, LineSetContext, LineReducer, Form, Button, ButtonWithIcon, ButtonWithLoading, IconButton, ActionButtons, Input, SmallInput, Label, Switch, Checkbox, PasswordField, TextField, TextArea, TextAreaField, SliderInput, DurationSlider, PercentageSlider, InputFileButton, DropArea, CropTool, AvatarUploader, SelectField, SelectWrapper, AreaUploadManager, RadioButton, ConfirmationModal, DatePicker, FilterDropdownContainer, FilterButton, FilterDropdown, FilterInputs, FiltersResults, FilterBar, isFilterItem, isDateInterval, Icon, IconSVGs, StatusIcon, IntroductionText, PageHeader, PageTitle, MultilineContent, Controls, PTZProvider, PTZContext, PTZReducer, usePTZ, TypeTable, TableRowThumbnail, TableHeaderTitle, EditCell, useInterval, useTo, useTitle, useCopyToClipboard, useClickOutside, usePoll, useMediaModal, resetButtonStyles, Spinner, WebRTCClient, MainMenu, TopBar, MainContainer, Layout, Content, SidebarBox, SidebarLink, SidebarHeading, Logo, SidebarLinkHeading, BackLink, Sidebar, GlobalUI, Tabs, Tab, TabList, TabContent, TabWithIcon, TabsWithIconBar, Tag, TagList, TagListWrapper, MediaBox, BasicSearchInput, NotificationProvider, useNotification, ModalContext, ModalProvider, useModal };
 /**
  * Values based on colors.feedback from theme
  */
@@ -27,4 +27,4 @@ export declare type IFeedbackColor = 'error' | 'warning' | 'info' | 'success' |
 export declare type ITimeUnit = 'seconds' | 'minutes' | 'hours';
 export declare type IMediaType = 'img' | 'video';
 export declare type IStatusDot = 'caution' | 'danger' | 'good' | 'neutral' | 'highlight';
-export type { IModal, INotificationProps, IconButtonData, ITag, ITagList, ISliderMark, INotificationItem, INotificationsHistory, ICustomDrawer, ISearchFilter, IFilterDropdownExt, IFilterLabel, IFilterDropdownConfig, ITabIcon, IFilterType, IFilterItem, IFilterValue, IFilterResult, };
+export type { IModal, INotificationProps, IconButtonData, ITag, ITagList, ISliderMark, INotificationItem, INotificationsHistory, ICustomDrawer, ISearchFilter, IFilterDropdownExt, IFilterLabel, IFilterDropdownConfig, ITabIcon, IFilterType, IFilterItem, IFilterValue, IFilterResult, DateInterval, IFilterDatePicker, };