@vitrosoftware/common-ui-ts 1.0.0

package/README.md

@@ -0,0 +1,30 @@
+# common-ui-ts
+
+> Made with create-react-library
+
+[![NPM](https://img.shields.io/npm/v/common-ui-ts.svg)](https://www.npmjs.com/package/common-ui-ts) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save common-ui-ts
+```
+
+## Usage
+
+```tsx
+import React, { Component } from 'react'
+
+import MyComponent from 'common-ui-ts'
+import 'common-ui-ts/dist/index.css'
+
+class Example extends Component {
+  render() {
+    return <MyComponent />
+  }
+}
+```
+
+## License
+
+MIT © [](https://github.com/)

package/dist/EventConstants.d.ts

@@ -0,0 +1,4 @@
+export declare enum EVENTS {
+    MOUSEDOWN = "mousedown",
+    RESIZE = "resize"
+}

package/dist/control/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+interface BreadcrumbsItem {
+    id: string;
+    text: string;
+}
+export interface BreadcrumbsProps {
+    text: string;
+    itemList: BreadcrumbsItem[];
+    onClick: (item: BreadcrumbsItem) => void;
+    displayItemCount: number;
+}
+export declare const Breadcrumbs: (props: BreadcrumbsProps) => JSX.Element;
+interface BreadcrumbsItem {
+    name: string;
+    id: string;
+}
+interface BreadcrumbsItemProps {
+    onClick?: () => void;
+    text: string;
+    id: string;
+}
+declare const BreadcrumbsItem: (props: BreadcrumbsItemProps) => JSX.Element;
+export {};

package/dist/control/TopLevelMenu/TopLevelMenu.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface TopLevelMenuItem {
+    id: string;
+    text: string;
+    link: string;
+    isActive: boolean;
+    itemList: TopLevelMenuItem[];
+}
+interface TopLevelMenuProps {
+    itemList: TopLevelMenuItem[];
+    onClick: (item: TopLevelMenuItem) => void;
+    text: string;
+}
+export declare const TopLevelMenu: (props: TopLevelMenuProps) => JSX.Element;
+export {};

package/dist/control/TreeView/TreeView.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import 'jstree';
+export interface TreeViewEventHandler {
+    id: string;
+    process: (...params: any[]) => any;
+}
+export interface ITreeView {
+    setEventHandler(eventHandler: TreeViewEventHandler): void;
+    setContextMenu(func: any): void;
+    getFullPath(node: any): {
+        id: string;
+        name: string;
+    }[];
+    dispose(): void;
+    openAll(): void;
+    closeAll(node: any): void;
+    deselectAll(): void;
+    getSelected(): any;
+    getNode(nodeId: string): any;
+    deleteNode(node: any): void;
+    selectNode(node: any): void;
+    openNode(node: any): void;
+    editNode(): void;
+    createNewNode(parent: any, node: any): void;
+    redrawNode(node: any, deep?: boolean): void;
+    renameNode(node: any, newName: string): void;
+}
+interface TreeViewProps {
+    id: string;
+    getData: (obj: any, cb: any) => any;
+    onInit: (jsTreeView: ITreeView) => any;
+}
+export declare const TreeView: (props: TreeViewProps) => JSX.Element;
+export {};

package/dist/control/TreeView/TreeViewConfig.d.ts

@@ -0,0 +1,28 @@
+export declare class TreeViewConfig {
+    static getConfig(): {
+        core: {
+            check_callback: boolean;
+            themes: {
+                dots: boolean;
+            };
+            multiple: boolean;
+            data: (obj: any, cb: any) => any;
+        };
+        plugins: string[];
+        types: {
+            folder: {
+                icon: string;
+                new_node: string;
+            };
+            file: {
+                icon: string;
+                valid_children: string[];
+                new_node: string;
+            };
+        };
+        checkbox: {
+            three_state: boolean;
+        };
+        contextmenu: () => never[];
+    };
+}

package/dist/control/TreeView/constants.d.ts

@@ -0,0 +1,16 @@
+export declare enum TREE_VIEW {
+    GET_PATH = "get_path",
+    DESTROY = "destroy",
+    OPEN_ALL = "open_all",
+    CLOSE_ALL = "close_all",
+    DESELECT_ALL = "deselect_all",
+    GET_SELECTED = "get_selected",
+    GET_NODE = "get_node",
+    CREATE_NODE = "create_node",
+    RENAME_NODE = "rename_node",
+    REDRAW_NODE = "redraw_node",
+    DELETE_NODE = "delete_node",
+    SELECT_NODE = "select_node",
+    OPEN_NODE = "open_node",
+    EDIT = "edit"
+}

package/dist/index.css

@@ -0,0 +1,178 @@
+._1H9Sa ::-webkit-scrollbar {
+    width: 4px;
+}
+
+._1H9Sa ::-webkit-scrollbar-track {
+    background: #fff;
+    border-radius: 8px;
+}
+
+._1H9Sa ::-webkit-scrollbar-thumb {
+    background: #e0e0e0;
+    border-radius: 2px;
+    height: 20px;
+}
+
+._1H9Sa ::-webkit-scrollbar-thumb:hover {
+    background: #828282;
+}
+
+._1H9Sa {
+    height: 28px;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid #BDBDBD;
+    padding: 0 0 0 12px;
+    position: relative;
+}
+
+._1H9Sa ._2ToVu {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+}
+
+._1H9Sa ._1rbdA {
+    height: 12px;
+    width: 12px;
+    cursor: pointer;
+    margin-right: 8px;
+    position: relative;
+}
+
+._1H9Sa ._1rbdA::after {
+    content: '<<';
+    color: #828282;
+    display: inline-block;
+    font-size: 13px;
+    line-height: 10px;
+    height: 10px;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+._1H9Sa ._2EcJL {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+._1H9Sa ._2EcJL > li {
+    margin-right: 6px;
+    color: #828282;
+    font-size: 10px;
+    line-height: 10px;
+    cursor: pointer;
+}
+
+._1H9Sa ._3Tszw {
+    font-size: 13px;
+    line-height: 13px;
+    color: #4F4F4F;
+    margin-bottom: 4px;
+    align-self: flex-start;
+    cursor: pointer;
+}
+
+._1H9Sa ._3Tszw::after {
+    content: '>';
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 16px;
+    transform: rotate(90deg);
+}
+
+._1H9Sa ._3Tszw._20GYX::after {
+    display: inline-block;
+}
+
+._1H9Sa ._3Tszw._2nuvq::after {
+    display: none;
+}
+
+._1H9Sa ._2zSbI {
+    background: white;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 8px;
+    border-radius: 8px;
+    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
+    padding: 0;
+    overflow: hidden;
+}
+
+._1H9Sa ._2zSbI ul {
+    max-height: 172px;
+    padding: 0;
+    display: flex;
+    flex-direction: column-reverse;
+    list-style-type: none;
+    font-size: 10px;
+    color: #828282;
+    margin-bottom: 0px;
+    overflow-y: auto;
+}
+
+._1H9Sa ._2zSbI ul > li {
+    line-height: 24px;
+    cursor: pointer;
+    padding: 0 12px;
+    white-space: nowrap;
+}
+
+._1H9Sa ._2zSbI ul > li:hover {
+    background: #F5F6FA;
+}
+
+._1H9Sa ._2EcJL {
+    display: flex;
+}
+
+._1H9Sa ._2EcJL > li:not(:last-child)::after {
+    content: '>';
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 13px;
+}
+
+._1H9Sa ._2zSbI ul > li::after {
+    content: '>';
+    display: inline-block;
+    transform: rotate(-90deg);
+    margin-left: 8px;
+    font-size: 13px;
+}
+
+@media (max-width: 800px) {
+    ._1H9Sa ._2ToVu {
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    ._1H9Sa ._1rbdA {
+        margin-right: 0;
+        /* archive.svg URL-encoder for SVG */
+        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='12.000000pt' height='12.000000pt' viewBox='0 0 512.000000 512.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,512.000000) scale(0.100000,-0.100000)'%0Afill='%23000000' stroke='none'%3E%3Cpath d='M1485 4445 c-478 -117 -886 -222 -905 -232 -19 -10 -45 -36 -57 -58%0Al-23 -40 0 -1548 c0 -1298 2 -1553 14 -1581 22 -53 62 -83 135 -100 172 -41%0A2089 -426 2121 -426 42 0 92 30 124 73 19 26 21 45 24 187 l3 159 229 3 c251%0A3 254 4 304 72 21 27 21 36 24 911 l2 883 53 12 c78 17 177 28 320 36 l127 7%0A0 -94 c0 -76 4 -100 19 -123 42 -63 114 -74 177 -27 82 61 560 489 581 521 28%0A40 29 75 5 115 -25 40 -584 497 -627 512 -83 29 -155 -35 -155 -137 l0 -57%0A-67 -12 c-95 -17 -256 -72 -352 -120 l-80 -41 -3 399 c-3 386 -4 401 -24 427%0A-11 15 -33 37 -48 48 -27 20 -41 21 -446 24 l-419 3 -3 157 c-3 147 -5 159%0A-27 191 -26 36 -91 71 -131 70 -14 0 -416 -97 -895 -214z m923 -2192 c13 -18%0A90 -74 187 -135 l165 -103 0 -697 c0 -384 -2 -698 -4 -698 -2 0 -356 72 -787%0A159 -431 88 -902 184 -1046 213 l-263 53 0 1516 0 1516 333 81 c182 45 568%0A140 857 210 l525 128 5 -1105 5 -1106 23 -32z m912 1399 l0 -428 -46 -44%0Ac-105 -101 -205 -263 -252 -405 -25 -75 -52 -203 -52 -247 0 -49 32 -95 75%0A-107 69 -19 107 6 162 106 26 45 61 97 80 115 l33 32 0 -817 0 -817 -200 0%0A-199 0 -3 518 -3 517 -23 32 c-13 18 -90 74 -187 135 l-165 103 0 868 0 867%0A390 0 390 0 0 -428z m1050 -331 c118 -97 214 -181 213 -185 0 -5 -99 -95 -220%0A-201 l-218 -192 -5 71 c-9 126 -36 146 -197 146 -307 0 -554 -49 -691 -136%0Al-52 -34 26 53 c130 258 406 445 744 503 52 9 103 20 113 26 26 13 57 68 57%0A101 0 15 3 27 8 26 4 0 104 -80 222 -178z'/%3E%3C/g%3E%3C/svg%3E");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+    }
+
+    ._1H9Sa ._1rbdA::after {
+        display: none;
+    }
+
+    ._1H9Sa ._2zSbI {
+        right: 0;
+    }
+}
+
+@media (max-width: 414px) {
+    ._1H9Sa {
+        margin-left: 20px;
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { Breadcrumbs } from "./control/Breadcrumbs/Breadcrumbs";
+import { TopLevelMenu } from "./control/TopLevelMenu/TopLevelMenu";
+import { TreeView, ITreeView } from "./control/TreeView/TreeView";
+export { Breadcrumbs, TopLevelMenu, TreeView };
+export { ITreeView };