@iobroker/adapter-react-v5 0.0.2

package/Components/loader.css

@@ -0,0 +1,222 @@
+/**
+ * Copyright 2018-2021 bluefox <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ **/
+
+.logo-background-light, .logo-background-colored {
+    background: white;
+}
+.logo-background-dark, .logo-background-blue {
+    background: black;
+}
+.logo-div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    overflow: hidden;
+    border-radius: 50%;
+    z-index: 2;
+}
+.logo-border {
+    /*border-color: #164477;*/
+    border-top-color: #3399CC;
+    border-left-color: #164477;
+    border-bottom-color: #164477;
+    border-right-color: #164477;
+    border-radius: 50%;
+    border-style: solid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+.logo-top {
+    position: absolute;
+    width: 4.5%;
+    height: 16%;
+    top: 0;
+    z-index: 2;
+}
+.logo-i {
+    position: absolute;
+    width: 14.5%;
+    height: 60%;
+    top: 20%;
+    left: 42%;
+    background: #3399CC;
+}
+.logo-i-top {
+    position: absolute;
+    width: 14.5%;
+    height: 4%;
+    left: 42%;
+    background: #3399CC;
+    border-radius: 100%;
+}
+.logo-back {
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+}
+@keyframes logo-grow {
+    0% {
+        width: 230px;
+        height: 230px;
+        transform: translate(-50%,-50%) scale(1);
+        opacity: 1
+    }
+    99% {
+        width: 230px;
+        height: 230px;
+        transform: translate(-50%,-50%) scale(10);
+        opacity: 0;
+    }
+    100% {
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+}
+@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+@keyframes logo-color-inside-light {
+    0% {
+        background: #FEFEFE;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-dark {
+    0% {
+        background: #030303;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-colored {
+    0% {
+        background: #FEFEFE;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-blue {
+    0% {
+        background: #030303;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+
+@keyframes logo-color-outside-light {
+    0% {
+        border-color: #FEFEFE;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-dark  {
+    0% {
+        border-color: #040404;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-colored {
+    0% {
+        border-color: #FEFEFE;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-blue  {
+    0% {
+        border-color: #040404;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+
+.logo-animate-wait {
+    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;
+}
+
+.logo-animate-grow-light {
+    background: #DDD;
+}
+.logo-animate-grow-dark {
+    background: #1d1d1d;
+}
+.logo-animate-grow-colored {
+    background: #DDD;
+}
+.logo-animate-grow-blue {
+    background: #1d1d1d;
+}
+
+.logo-animate-grow {
+    display: inline-block;
+    text-align: center;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    width: 245px;
+    height: 245px;
+    border-radius: 50%;
+    position: absolute;
+    animation: logo-grow 1s 1 ease forwards;
+}
+
+.logo-animate-color-inside-light {
+    animation: logo-color-inside-light 2.5s;
+}
+.logo-animate-color-inside-dark {
+    animation: logo-color-inside-dark 2.5s;
+}
+.logo-animate-color-inside-colored {
+    animation: logo-color-inside-colored 2.5s;
+}
+.logo-animate-color-inside-blue {
+    animation: logo-color-inside-blue 2.5s;
+}
+
+.logo-animate-color-outside-light {
+    animation: logo-color-outside-light 1.5s;
+}
+.logo-animate-color-outside-dark {
+    animation: logo-color-outside-dark 1.5s;
+}
+.logo-animate-color-outside-colored {
+    animation: logo-color-outside-colored 1.5s;
+}
+.logo-animate-color-outside-blue {
+    animation: logo-color-outside-blue 1.5s;
+}

package/Components/types.d.ts

@@ -0,0 +1,121 @@
+import { Translator, Width } from '../types';
+import Connection from '../Connection';
+import Router from './Router';
+
+export interface FileBrowserProps {
+    /** The key to identify this component. */
+    key?: string;
+    /** Additional styling for this component. */
+    style?: React.CSSProperties;
+    /** The CSS class name. */
+    className?: string;
+    /** Translation function. */
+    t: Translator;
+    /** The selected language. */
+    lang: ioBroker.Languages;
+    /** The socket connection. */
+    socket: Connection;
+    /** Is the component data ready. */
+    ready?: boolean;
+    /** Is expert mode enabled? (default: false) */
+    expertMode?: boolean;
+    /** Show the toolbar? (default: false) */
+    showToolbar?: boolean;
+    /** Allow upload of new files? (default: false) */
+    allowUpload?: boolean;
+    /** Allow download of files? (default: false) */
+    allowDownload?: boolean;
+    /** Allow creation of new folders? (default: false) */
+    allowCreateFolder?: boolean;
+    /** Allow deleting files? (default: false) */
+    allowDelete?: boolean;
+    /** Allow viewing files? (default: false) */
+    allowView?: boolean;
+    /** Prefix (default: '.') */
+    imagePrefix?: string;
+    /** Show the expert button? */
+    showExpertButton?: boolean;
+    /** Type of view */
+    viewType?: 'Table' | 'Tile';
+    /** Show the buttons to switch the view from table to tile? (default: false) */
+    showViewTypeButton?: boolean;
+    /** The ID of the selected file. */
+    selected?: string;
+    /** The file extensions to show, like ['png', 'svg', 'bmp', 'jpg', 'jpeg']. */
+    filterFiles?: string[];
+    /** The file extension categories to show. */
+    filterByType?: 'images' | 'code' | 'txt';
+    /** Callback for file selection. */
+    onSelect?: (id: string, isDoubleClick?: boolean) => void;
+}
+
+export interface ObjectBrowserTableFilter {
+    id?: string;
+    name?: string;
+    room?: string;
+    func?: string;
+    role?: string;
+    expertMode?: boolean;
+}
+
+export type ObjectBrowserColumn = 'name' | 'type' | 'role' | 'room' | 'func' | 'val' | 'buttons';
+
+export interface ObjectBrowserCustomFilter {
+    type: string;
+    common: { custom: string | boolean; };
+}
+
+export type ObjectBrowserType = 'state' | 'instance' | 'channel';
+
+export interface ObjectBrowserProps {
+    /** The title of the dialog. */
+    title: string;
+    /** The key to store state in the browser (default: 'App') */
+    key?: string;
+    /** The CSS classes. */
+    classes: Record<string, any>;
+    /** Default filters to be applied to the object table. */
+    defaultFilters?: ObjectBrowserTableFilter;
+    /** The selected ID or IDs. */
+    selected?: string | string[];
+    /** Callback when object is selected. */
+    onSelect?: (selectedItems: string[], name: string, isDouble?: boolean) => void;
+    /** The socket connection. */
+    socket: Connection;
+    /** Show the expert button? */
+    showExpertButton?: boolean;
+    /** Is expert mode enabled? (default: false) */
+    expertMode?: boolean;
+    /** Prefix (default: '.') */
+    imagePrefix?: string;
+    /** Theme name. */
+    themeName?: string;
+    /** Translation function. */
+    t: Translator;
+    /** The selected language. */
+    lang: ioBroker.Languages;
+    /** Allow to select multiple objects? (default: false) */
+    multiSelect?: boolean;
+    /** Can't objects be edited? (default: false) */
+    notEditable?: boolean;
+    /** Show folders first? (default: false) */
+    foldersFirst?: boolean;
+    /** Disable the column selector? (default: false) */
+    disableColumnSelector?: boolean;
+    /** The custom dialog React component to use */
+    objectCustomDialog?: any;
+    /** Custom filter. Optional {common: {custom: true}} or {common: {custom: 'sql.0'}} */
+    customFilter?: ObjectBrowserCustomFilter;
+    /** Custom value React component to use */
+    objectBrowserValue?: any;
+    /** Custom object editor React component to use */
+    objectBrowserEditObject?: any;
+    /** Router */
+    router?: Router<{}, {}>;
+    /** Object types to show */
+    types?: ObjectBrowserType[];
+    /** Columns to display */
+    columns?: ObjectBrowserColumn[];
+    /** The width of the dialog. */
+    width?: Width;
+}