](https://www.linkedin.com/in/denimar-moraes/?locale=en_US)
105 |
--------------------------------------------------------------------------------
/dist/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.
20 |
--------------------------------------------------------------------------------
/dist/README.md:
--------------------------------------------------------------------------------
1 | # deni-react-treeview
2 | A modern, themable and configurable treeview for React
3 |
4 |
5 | [live examples](https://deni-react-treeview.vercel.app/)
6 |
7 |
8 | 
9 |
10 |
11 | TODO: Implement unit tests, E2E tests, CI.
12 |
13 | ## Installing with NPM
14 |
15 | npm install deni-react-treeview --save
16 |
17 | ## Usage
18 |
19 | Added to your react component
20 | ```html
21 | ](https://www.linkedin.com/in/denimar-moraes/?locale=en_US)
105 |
--------------------------------------------------------------------------------
/dist/deni-react-treeview-1.1.11.tgz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/denimar/deni-react-treeview/a157c9a39f13065465df9512f51e39083658954a/dist/deni-react-treeview-1.1.11.tgz
--------------------------------------------------------------------------------
/dist/libs/components/deni-react-treeview-item/DeniReactTreeViewItem.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './DeniReactTreeViewItem.scss';
3 | import { DeniReactTreeviewItemProps } from './DeniReactTreeViewItemProps';
4 | declare class DeniReactTreeViewItem extends React.Component
46 |
50 |
51 |
55 |
56 |
64 | )
65 | }
66 |
67 | }
68 |
69 | export default DeniReactTreeViewItem;
--------------------------------------------------------------------------------
/src/components/deni-react-treeview-item/DeniReactTreeViewItemProps.ts:
--------------------------------------------------------------------------------
1 | import DeniReactTreeView from '../deni-react-treeview/DeniReactTreeView';
2 |
3 | export interface DeniReactTreeviewItemProps {
4 | treeview: DeniReactTreeView,
5 | item: number,
6 | parent?: any,
7 | level: number,
8 | root?: any,
9 | selectRow?: boolean,
10 | expandAll?: boolean
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/deni-react-treeview-item/DeniReactTreeviewItemConsts.ts:
--------------------------------------------------------------------------------
1 | export const CHECKBOX_STATE = {
2 | CHECKED: 1,
3 | UNCHECKED: 2,
4 | UNDETERMINED: 3
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/deni-react-treeview-item/action-buttons/ActionButtons.scss:
--------------------------------------------------------------------------------
1 | .action-buttons-container {
2 | display: flex;
3 | flex: 1;
4 | justify-content: space-around;
5 |
6 | .action-buttons-container-text {
7 | flex: 1;
8 | justify-content: space-around;
9 | }
10 |
11 | .action-button {
12 | margin-right: 5px;
13 | cursor: pointer;
14 | opacity: 0.3;
15 | visibility: hidden;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/deni-react-treeview-item/action-buttons/ActionButtons.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './ActionButtons.scss'
3 | import { ActionButtonsProps } from './ActionButtonsProps';
4 |
5 | class ActionButtons extends React.Component
57 |
58 |
62 |
63 |
59 | {getInnerText(treeview, item)}
60 |
61 |
33 | {this.props.item.text}
34 | {actionButtons}
35 |
36 | )
37 | }
38 |
39 | }
40 |
41 | export default ActionButtons;
--------------------------------------------------------------------------------
/src/components/deni-react-treeview-item/action-buttons/ActionButtonsProps.ts:
--------------------------------------------------------------------------------
1 | export interface ActionButtonsProps {
2 | buttons: any[],
3 | item: any,
4 | onActionButtonClick?: (item: any, actionButton: any) => void
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/deni-react-treeview-item/action-buttons/index.ts:
--------------------------------------------------------------------------------
1 | import ActionButtons from './ActionButtons'
2 |
3 | export default ActionButtons;
4 |
--------------------------------------------------------------------------------
/src/components/deni-react-treeview/DeniReactTreeView.scss:
--------------------------------------------------------------------------------
1 | @import '../styles/style-base.scss';
2 |
3 | .deni-react-treeview-container {
4 | font-family: tahoma,arial;
5 | font-size: 12px;
6 | padding: 0px;
7 | overflow-x: auto;
8 | overflow-y: auto;
9 | border: solid 1px;
10 | border-color: lighten($base-color, 2%);
11 | width: 400px;
12 | height: 350px;
13 | background-color: lighten(#f2f2f2, 3%);
14 |
15 | * {
16 | box-sizing: border-box;
17 |
18 | &.unselectable {
19 | @include unselectable;
20 | }
21 |
22 | }
23 |
24 | &.loading {
25 | background-image: url('data:image/gif;base64,R0lGODlhEAAQALMMAKqooJGOhp2bk7e1rZ2bkre1rJCPhqqon8PBudDOxXd1bISCef///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAMACwAAAAAEAAQAAAET5DJyYyhmAZ7sxQEs1nMsmACGJKmSaVEOLXnK1PuBADepCiMg/DQ+/2GRI8RKOxJfpTCIJNIYArS6aRajWYZCASDa41Ow+Fx2YMWOyfpTAQAIfkEBQAADAAsAAAAABAAEAAABE6QyckEoZgKe7MEQMUxhoEd6FFdQWlOqTq15SlT9VQM3rQsjMKO5/n9hANixgjc9SQ/CgKRUSgw0ynFapVmGYkEg3v1gsPibg8tfk7CnggAIfkEBQAADAAsAAAAABAAEAAABE2QycnOoZjaA/IsRWV1goCBoMiUJTW8A0XMBPZmM4Ug3hQEjN2uZygahDyP0RBMEpmTRCKzWGCkUkq1SsFOFQrG1tr9gsPc3jnco4A9EQAh+QQFAAAMACwAAAAAEAAQAAAETpDJyUqhmFqbJ0LMIA7McWDfF5LmAVApOLUvLFMmlSTdJAiM3a73+wl5HYKSEET2lBSFIhMIYKRSimFriGIZiwWD2/WCw+Jt7xxeU9qZCAAh+QQFAAAMACwAAAAAEAAQAAAETZDJyRCimFqbZ0rVxgwF9n3hSJbeSQ2rCWIkpSjddBzMfee7nQ/XCfJ+OQYAQFksMgQBxumkEKLSCfVpMDCugqyW2w18xZmuwZycdDsRACH5BAUAAAwALAAAAAAQABAAAARNkMnJUqKYWpunUtXGIAj2feFIlt5JrWybkdSydNNQMLaND7pC79YBFnY+HENHMRgyhwPGaQhQotGm00oQMLBSLYPQ9QIASrLAq5x0OxEAIfkEBQAADAAsAAAAABAAEAAABE2QycmUopham+da1cYkCfZ94UiW3kmtbJuRlGF0E4Iwto3rut6tA9wFAjiJjkIgZAYDTLNJgUIpgqyAcTgwCuACJssAdL3gpLmbpLAzEQA7');
26 | background-repeat: no-repeat;
27 | background-position-x: 6px;
28 | background-position-y: 6px;
29 | // &:before {
30 | // content: ' '
31 | // }
32 | }
33 |
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/deni-react-treeview/DeniReactTreeView.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './DeniReactTreeView.scss'
3 | import DeniReactTreeViewItem from '../deni-react-treeview-item/DeniReactTreeViewItem'
4 | import { deniReactTreeviewApi } from './DeniReactTreeviewApi'
5 | import { loadingSetup, setTheme } from './DeniReactTreeviewHelper'
6 | import { DeniReactTreeviewProps } from './DeniReactTreeviewProps';
7 |
8 |
9 | interface DeniReactTreeviewState {
10 | loading: boolean,
11 | theme: string,
12 | expandAll?: boolean,
13 | }
14 |
15 | class DeniReactTreeView extends React.Component this.container = elem} className={className} style={style} >
74 | {domTreeviewItem}
75 | {_createComponentsChildren(this, domTreeviewItem, 1, children, this.state.expandAll)}
76 |
77 | ) :
78 | )
79 | }
80 |
81 | }
82 |
83 | //DeniReactTreeView.propTypes = treeviewProps.propTypes;
84 | //DeniReactTreeView.defaultProps = treeviewProps.defaultProps;
85 |
86 | function _createComponentsChildren(treeview, parent, level, children, expandAll = false) {
87 | if (expandAll) {
88 | children = children.map(c => {
89 | c.expanded = true;
90 | return c;
91 | });
92 | }
93 | return (
94 |
95 | {
96 | (parent.props.item && parent.props.item.expanded && children && children.length) ?
97 | children.map(function (child) {
98 | const domTreeviewItem =
115 | );
116 | }
117 |
118 | export default DeniReactTreeView;
--------------------------------------------------------------------------------
/src/components/deni-react-treeview/DeniReactTreeviewApi.ts:
--------------------------------------------------------------------------------
1 | import DeniReactTreeviewApiImpl from './DeniReactTreeviewApiImpl'
2 | import { load, loadData, setTheme } from './DeniReactTreeviewHelper'
3 |
4 | const deniReactTreeviewApi = scope => {
5 | return {
6 |
7 | //
8 | //
9 | //
10 | addItem: (text, isLeaf, parentNode) => {
11 | return DeniReactTreeviewApiImpl.addItem(scope, text, isLeaf, parentNode);
12 | },
13 |
14 | //
15 | // folderToFind can be passed as a "id" or as a "object" ex:
16 | //
17 | // treeviewEl.api.findFolder(456) //456 is a id value or
18 | // treeviewEl.api.findFolder({name: 'Brazil'}) //it will searches for the first folder that match the passed data and leaf is not true
19 | //
20 | findFolder: (folderToFind) => {
21 | return DeniReactTreeviewApiImpl.findFolder(scope, folderToFind);
22 | },
23 |
24 | //
25 | // Expand all the children from the rootItem recursively
26 | expandAll: () => {
27 | DeniReactTreeviewApiImpl.expandAll(scope);
28 | },
29 | //
30 | // folderToFind can be passed as a "id" or as a "object" ex:
31 | //
32 | // treeviewEl.api.findFolder(456) //456 is a id value or
33 | // treeviewEl.api.findFolder({name: 'Brazil'}) //it will searches for the first folder that match the passed data and leaf is not true
34 | //
35 | findNode: (nodeToFind) => {
36 | return DeniReactTreeviewApiImpl.findNode(scope, nodeToFind);
37 | },
38 |
39 | //
40 | // itemToFind can be passed as a "id" or as a "object" ex:
41 | //
42 | // treeviewEl.api.findItem(357) //357 is a id value or
43 | // treeviewEl.api.findItem({name: 'Dog'}) //it will searches for the first item that match the passed data and leaf is true
44 | //
45 | findItem: (itemToFind) => {
46 | return DeniReactTreeviewApiImpl.findItem(scope, itemToFind);
47 | },
48 |
49 | //
50 | //
51 | //
52 | getItems: () => {
53 | return DeniReactTreeviewApiImpl.getItems(scope);
54 | },
55 |
56 | //
57 | //
58 | //
59 | getParentNode: (item) => {
60 | return DeniReactTreeviewApiImpl.getParentNode(scope, item);
61 | },
62 |
63 |
64 | //
65 | //
66 | //
67 | getRootItem: () => {
68 | return DeniReactTreeviewApiImpl.getRootItem(scope);
69 | },
70 |
71 | //
72 | //
73 | //
74 | getSelectedItem: () => {
75 | return DeniReactTreeviewApiImpl.getSelectedItem(scope);
76 | },
77 |
78 | //
79 | //
80 | //
81 | load: item => load(scope, item),
82 |
83 | //
84 | //
85 | //
86 | loadData: loadData.bind(scope),
87 |
88 | //
89 | //
90 | //
91 | removeItem: (id) => {
92 | DeniReactTreeviewApiImpl.removeItem(scope, id);
93 | },
94 |
95 | //
96 | // itemToFind can be passed as a "id" or as a "object" ex:
97 | //
98 | // treeviewEl.api.selectItem(357) //357 is a id value or
99 | // treeviewEl.api.selectItem({name: 'Dog'}) //it will searches for the first item that match the passed data and leaf is true
100 | //
101 | selectItem: (itemToFind) => {
102 | DeniReactTreeviewApiImpl.selectItem(scope, itemToFind);
103 | },
104 |
105 | //
106 | //
107 | //
108 | setTheme: (newTheme) => {
109 | setTheme(scope, newTheme);
110 | },
111 |
112 | }
113 |
114 | }
115 |
116 | export {
117 | deniReactTreeviewApi
118 | };
--------------------------------------------------------------------------------
/src/components/deni-react-treeview/DeniReactTreeviewConsts.ts:
--------------------------------------------------------------------------------
1 | export const ROOT_ITEM = {
2 | id: -1,
3 | text: 'root',
4 | expanded: true,
5 | root: true
6 | }
--------------------------------------------------------------------------------
/src/components/deni-react-treeview/DeniReactTreeviewHelper.ts:
--------------------------------------------------------------------------------
1 | import {ROOT_ITEM} from './DeniReactTreeviewConsts'
2 | import axios from 'axios';
3 |
4 | const loadingSetup = treeview => {
5 | //by props.url
6 | if (treeview.props.url || treeview.props.json || treeview.props.lazyLoad) {
7 | if (treeview.props.autoLoad !== false) {
8 | treeview.api.load();
9 | }
10 | } else {
11 | //by props.items
12 | if (treeview.props.items) {
13 | treeview.api.loadData(treeview, treeview.props.items);
14 | }
15 | }
16 | }
17 |
18 | const setTheme = (treeview, newTheme) => {
19 | const theme = newTheme || 'classic';
20 | require('../styles/themes/' + theme + '-theme.scss')
21 | treeview.setState({ theme });
22 | }
23 |
24 | const load = (treeview, item) => {
25 | treeview.setState({
26 | loading: true
27 | });
28 |
29 | return new Promise(function(success, reject) {
30 |
31 | if (treeview.props.url || treeview.props.json) {
32 | let urlToLoad = treeview.props.url || treeview.props.json;
33 | if (treeview.props.lazyLoad) {
34 | const currentItem = item || treeview.state.rootItem || ROOT_ITEM;
35 | delete currentItem['children'];
36 | urlToLoad += '?lazyLoad=true&item=' + JSON.stringify(currentItem);
37 | }
38 |
39 | axios.get(urlToLoad)
40 | .then(res => {
41 | treeview.setState({
42 | loading: false
43 | });
44 | treeview.api.loadData(treeview, res.data, item);
45 | success(res.data);
46 | })
47 | .catch(error => {
48 | console.error(`Error loading data: ${error.message}`)
49 | })
50 | } else if (treeview.props.lazyLoad) {
51 | treeview.setState({
52 | loading: false
53 | });
54 | reject('TODO: under construction');
55 | } else {
56 | treeview.setState({
57 | loading: false
58 | });
59 | const msg = 'To use load function you must define lazyLoad:true or a valid url.';
60 | console.error(msg);
61 | reject(msg);
62 | }
63 | });
64 | }
65 |
66 | //
67 | // item is a optional param that when it is set data must be an array (children)
68 | //
69 | const loadData = (treeview, data, item) => {
70 | //
71 | const dataToLoad = data || [];
72 |
73 | //onBeforeLoad event
74 | if (treeview.props.onBeforeLoad) {
75 | treeview.props.onBeforeLoad(dataToLoad, item);
76 | }
77 |
78 | //
79 | if (item) {
80 | //
81 | if (dataToLoad instanceof Array) {
82 | item.children = dataToLoad;
83 | } else {
84 | throw new Error('When item param is set the data must be an array.');
85 | }
86 | } else {
87 | treeview.setState({
88 | rootItem: _resolveRootItem(dataToLoad)
89 | });
90 | }
91 |
92 | //onAfterLoad event
93 | if (treeview.props.onAfterLoad) {
94 | treeview.props.onAfterLoad(dataToLoad, item);
95 | }
96 |
97 | }
98 |
99 | function _resolveRootItem(items) {
100 | let rootItem = Object.assign({}, ROOT_ITEM);
101 |
102 | if (items) {
103 | if (items instanceof Array) {
104 | rootItem['children'] = items;
105 | } else if (items instanceof Object) {
106 | rootItem = items;
107 | } else {
108 | throw new Error('Parameter "items" adjusted in a wrong way.');
109 | }
110 | return rootItem;
111 | }
112 | return null;
113 | }
114 |
115 | export {
116 | loadingSetup,
117 | setTheme,
118 | load,
119 | loadData
120 | };
--------------------------------------------------------------------------------
/src/components/deni-react-treeview/DeniReactTreeviewProps.ts:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from "react";
2 | import DeniReactTreeView from "./DeniReactTreeView";
3 |
4 | export interface DeniReactTreeviewProps {
5 | className?: string,
6 | style?: CSSProperties,
7 | actionButtons?: JSX.Element[],
8 | autoLoad?: boolean,
9 | json?: string,
10 | items?: any[],
11 | lazyLoad?: boolean,
12 | expandAll?: boolean,
13 | marginItems?: string | number,
14 | onAfterLoad?: (data: any, item: any) => void;
15 | onBeforeLoad?: (data: any, item: any) => void;
16 | onRenderItem?: (item: any, treeview: DeniReactTreeView) => JSX.Element;
17 | onSelectItem?: (item: any) => void;
18 | onCheckItem?: void,
19 | selectRow?: boolean,
20 | showCheckbox?: boolean,
21 | showIcon?: boolean,
22 | showRoot?: boolean,
23 | theme?: string,
24 | url?: string,
25 |
26 | onActionButtonClick?: (item: any, actionButton: any) => void;
27 | }
--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | import DeniReactTreeView from './deni-react-treeview/DeniReactTreeView';
2 | export default DeniReactTreeView
--------------------------------------------------------------------------------
/src/components/styles/style-base.scss:
--------------------------------------------------------------------------------
1 | $blue: #9DC2E1;
2 | $red: #ff8080;
3 | $green: #9ce2da; //#80ff80;
4 | $silver: #bfbfbf;
5 | $moonlight: #bfbfbf;
6 | $orange: #ffd280;
7 | $purple: #ff80ff;
8 | $metro: #b1b8cd;
9 | $base-color: $blue;
10 |
11 | @mixin unselectable {
12 | -webkit-touch-callout: none; /* iOS Safari */
13 | -webkit-user-select: none; /* Chrome/Safari/Opera */
14 | -khtml-user-select: none; /* Konqueror */
15 | -moz-user-select: none; /* Firefox */
16 | -ms-user-select: none; /* Internet Explorer/Edge */
17 | user-select: none; /* Non-prefixed version, currently
18 | not supported by any browser */
19 | }
20 |
21 | @mixin gradient-background ($end-color) {
22 | $selection-background-start-color: lighten($end-color, 20%);
23 | background: $selection-background-start-color; /* Old browsers */
24 | background: -moz-linear-gradient(top, $selection-background-start-color 0%, $end-color 100%); /* FF3.6-15 */
25 | background: -webkit-linear-gradient(top, $selection-background-start-color 0%,$end-color 100%); /* Chrome10-25,Safari5.1-6 */
26 | background: linear-gradient(to bottom, $selection-background-start-color 0%, $end-color 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
27 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$selection-background-start-color, endColorstr=$end-color,GradientType=0 ); /* IE6-9 */
28 | }
29 |
30 | @mixin base-color($color: $blue) {
31 | $base-color: $color;
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/styles/themes/base-theme.scss:
--------------------------------------------------------------------------------
1 | @import '../style-base.scss';
2 | @import './icons-theme.scss';
3 |
4 | @mixin set-theme($theme-base-color: $base-color) {
5 | $base-color: $theme-base-color;
6 | color: darken($base-color, 45%) !important;
7 |
8 | border-color: darken($base-color, 10%) !important;
9 |
10 | &:hover {
11 | &.select-row {
12 | background-color: lighten($base-color, 20%);
13 | }
14 | &:not(.select-row) {
15 | background-color: transparent;
16 | }
17 | }
18 |
19 | &.selected {
20 | @include gradient-background($base-color);
21 | outline-color: lighten($base-color, 10%) !important;
22 | }
23 | .checkbox {
24 | border-color: lighten($base-color, 4%) !important;
25 | &.selected {
26 | border-color: darken($base-color, 8%) !important;
27 | }
28 | }
29 | .expand-button {
30 | color: darken($base-color, 45%) !important;
31 | }
32 |
33 | .icon-and-text {
34 | &:hover {
35 | &.select-row {
36 | background-color: transparent;
37 | }
38 | &:not(.select-row) {
39 | background-color: lighten($base-color, 20%);
40 | }
41 | }
42 | &.select-row {
43 | border: 0;
44 | padding: 1px;
45 | }
46 | &.selected {
47 | @include gradient-background($base-color);
48 | }
49 |
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/styles/themes/classic-theme.scss:
--------------------------------------------------------------------------------
1 | @import '../style-base.scss';
2 | @import './base-theme.scss';
3 |
4 | .deni-react-treeview-container.classic {
5 | border-color: lighten($blue, 2%);
6 |
7 | .deni-react-treeview-item-container.classic {
8 | @include set-theme($blue);
9 |
10 | .icon-and-text {
11 | .icon {
12 | background-image: $closed-folder-icon-blue-16;
13 |
14 | &.isleaf {
15 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACjElEQVR42o2SW0hUURSG/32OhnhAqJDCzF6kN0lLGtJCtLQyKIMotRjBy1sqVEZS9mKZBdKFHBJpJEKD0urBvAchhqY5kp6MHkRlMhpHR2fOHuZybu3KxhEr+/fL3g/rWx9rL4Kl1La+ta0XwiNUTVf9sgJF0yB5FVCfAqt9Lnx8yt7Ph4Qc6btVtIigkN+XJ28s9MTeHQLPETipF3aXB7NOJ2wLXnyamYVlwgq/jN5Fj+9QX3WhZxXg8ethmpMSzwA666rDxSBOKsHhViBa7XC5ndgWuRH1PSP9XlnJZJDFFYBHXe/p6bQEIanoGTZECJDhh98jg6gc5ue+oqwkBXlp8TB3WfBiYLx3yuYwiqbS6QDA3DVEjWk7BZ7n8Kc09IzAEBsFm+RG6+BndFsmhsdMxYkBwIO2d7QwI1HIrmgH0XmEMo7MA5qiQ9PZQF0SrDNOpBq2YPPWcLT0i+KYqTQuALjzvJeePZr8V4Nf0fHF4cD49DzKHnaKo7Uly4Cqpg568WS6kH21GxpREIZQEKKxEo4ZaXDJfrgWJBwwxGBPfDTONbxigOJlQLm5jVYaD65hAHgUP77ZKY5fbxI/BAPOm9vpTWOGkH2lExzHIKwrYYcnPNQwnhnpkKjGukciddcm5N9tFkdNJasBaxnouo5J2wKOVTaKYjDggrmDVhvThVOX2S9wPOu8tGnk5+zAMRPqk7HfEI2kuEjk32tmvxAEKK1rpTUFh9c00JjBFDPIYgYrAAW3W2hdcZaQU9GGdWwJOMIFCnRNxY+X5FaxLyEK6ckxOFPzdCUg90YjbbyUK+A/Mk89yCyvFwfvBy1SbF6VLWF7TIRPUdV/FRNNh6qowsDHyaG5l9d2fwfyXD4gAGnljAAAAABJRU5ErkJggg==');
16 | }
17 |
18 | &.expanded {
19 | background-image: $opened-folder-icon-blue-16;
20 | }
21 | }
22 | }
23 |
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/styles/themes/green-theme.scss:
--------------------------------------------------------------------------------
1 | @import '../style-base.scss';
2 | @import './base-theme.scss';
3 |
4 | .deni-react-treeview-container.green {
5 | border-color: lighten($green, 2%);
6 |
7 | .deni-react-treeview-item-container.green {
8 | @include set-theme($green);
9 |
10 | .icon-and-text {
11 | .icon {
12 | background-image: $closed-folder-icon-green-16;
13 |
14 | &.isleaf {
15 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACjElEQVR42o2SW0hUURSG/32OhnhAqJDCzF6kN0lLGtJCtLQyKIMotRjBy1sqVEZS9mKZBdKFHBJpJEKD0urBvAchhqY5kp6MHkRlMhpHR2fOHuZybu3KxhEr+/fL3g/rWx9rL4Kl1La+ta0XwiNUTVf9sgJF0yB5FVCfAqt9Lnx8yt7Ph4Qc6btVtIigkN+XJ28s9MTeHQLPETipF3aXB7NOJ2wLXnyamYVlwgq/jN5Fj+9QX3WhZxXg8ethmpMSzwA666rDxSBOKsHhViBa7XC5ndgWuRH1PSP9XlnJZJDFFYBHXe/p6bQEIanoGTZECJDhh98jg6gc5ue+oqwkBXlp8TB3WfBiYLx3yuYwiqbS6QDA3DVEjWk7BZ7n8Kc09IzAEBsFm+RG6+BndFsmhsdMxYkBwIO2d7QwI1HIrmgH0XmEMo7MA5qiQ9PZQF0SrDNOpBq2YPPWcLT0i+KYqTQuALjzvJeePZr8V4Nf0fHF4cD49DzKHnaKo7Uly4Cqpg568WS6kH21GxpREIZQEKKxEo4ZaXDJfrgWJBwwxGBPfDTONbxigOJlQLm5jVYaD65hAHgUP77ZKY5fbxI/BAPOm9vpTWOGkH2lExzHIKwrYYcnPNQwnhnpkKjGukciddcm5N9tFkdNJasBaxnouo5J2wKOVTaKYjDggrmDVhvThVOX2S9wPOu8tGnk5+zAMRPqk7HfEI2kuEjk32tmvxAEKK1rpTUFh9c00JjBFDPIYgYrAAW3W2hdcZaQU9GGdWwJOMIFCnRNxY+X5FaxLyEK6ckxOFPzdCUg90YjbbyUK+A/Mk89yCyvFwfvBy1SbF6VLWF7TIRPUdV/FRNNh6qowsDHyaG5l9d2fwfyXD4gAGnljAAAAABJRU5ErkJggg==');
16 | }
17 |
18 | &.expanded {
19 | background-image: $opened-folder-icon-green-16;
20 | }
21 | }
22 | }
23 |
24 | }
25 |
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/styles/themes/metro-theme.scss:
--------------------------------------------------------------------------------
1 | @import '../style-base.scss';
2 | @import './base-theme.scss';
3 |
4 | .deni-react-treeview-container.metro {
5 | background-color: darken($metro, 50%) !important;
6 | border-color: lighten($metro, 2%);
7 |
8 | .deni-react-treeview-item-container.metro {
9 | color: lighten($base-color, 15%) !important;
10 |
11 | &:hover {
12 | background-color: transparent !important;
13 | }
14 |
15 | &.selected {
16 | @include gradient-background(darken($base-color, 52%));
17 | outline-color: darken($base-color, 5%) !important;
18 | }
19 | .checkbox {
20 | border-color: lighten($base-color, 4%) !important;
21 | &.selected {
22 | border-color: darken($base-color, 15%) !important;
23 | background-color: transparent;
24 | }
25 | }
26 | .expand-button {
27 | color: lighten($base-color, 15%) !important;
28 | }
29 | .icon-and-text {
30 | &:hover {
31 | background-color: transparent !important;
32 | }
33 | &.selected {
34 | @include gradient-background(darken($base-color, 42%));
35 | border-color: darken($base-color, 2%);
36 | }
37 | .icon {
38 | background-image: $closed-folder-icon-metro-16;
39 |
40 | &.isleaf {
41 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACjElEQVR42o2SW0hUURSG/32OhnhAqJDCzF6kN0lLGtJCtLQyKIMotRjBy1sqVEZS9mKZBdKFHBJpJEKD0urBvAchhqY5kp6MHkRlMhpHR2fOHuZybu3KxhEr+/fL3g/rWx9rL4Kl1La+ta0XwiNUTVf9sgJF0yB5FVCfAqt9Lnx8yt7Ph4Qc6btVtIigkN+XJ28s9MTeHQLPETipF3aXB7NOJ2wLXnyamYVlwgq/jN5Fj+9QX3WhZxXg8ethmpMSzwA666rDxSBOKsHhViBa7XC5ndgWuRH1PSP9XlnJZJDFFYBHXe/p6bQEIanoGTZECJDhh98jg6gc5ue+oqwkBXlp8TB3WfBiYLx3yuYwiqbS6QDA3DVEjWk7BZ7n8Kc09IzAEBsFm+RG6+BndFsmhsdMxYkBwIO2d7QwI1HIrmgH0XmEMo7MA5qiQ9PZQF0SrDNOpBq2YPPWcLT0i+KYqTQuALjzvJeePZr8V4Nf0fHF4cD49DzKHnaKo7Uly4Cqpg568WS6kH21GxpREIZQEKKxEo4ZaXDJfrgWJBwwxGBPfDTONbxigOJlQLm5jVYaD65hAHgUP77ZKY5fbxI/BAPOm9vpTWOGkH2lExzHIKwrYYcnPNQwnhnpkKjGukciddcm5N9tFkdNJasBaxnouo5J2wKOVTaKYjDggrmDVhvThVOX2S9wPOu8tGnk5+zAMRPqk7HfEI2kuEjk32tmvxAEKK1rpTUFh9c00JjBFDPIYgYrAAW3W2hdcZaQU9GGdWwJOMIFCnRNxY+X5FaxLyEK6ckxOFPzdCUg90YjbbyUK+A/Mk89yCyvFwfvBy1SbF6VLWF7TIRPUdV/FRNNh6qowsDHyaG5l9d2fwfyXD4gAGnljAAAAABJRU5ErkJggg==');
42 | }
43 |
44 | &.expanded {
45 | background-image: $opened-folder-icon-metro-16;
46 | }
47 | }
48 | }
49 |
50 | }
51 |
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/styles/themes/moonlight-theme.scss:
--------------------------------------------------------------------------------
1 | @import '../style-base.scss';
2 | @import './base-theme.scss';
3 |
4 | .deni-react-treeview-container.moonlight {
5 | background-color: darken($moonlight, 50%) !important;
6 | border-color: lighten($moonlight, 2%);
7 |
8 | .deni-react-treeview-item-container.moonlight {
9 | color: lighten($base-color, 15%) !important;
10 |
11 | &:hover {
12 | background-color: transparent !important;
13 | }
14 |
15 | &.selected {
16 | @include gradient-background(#E59E06);
17 | outline-color: darken($base-color, 5%) !important;
18 | color: darken($base-color, 80%) !important;
19 | }
20 | .checkbox {
21 | border-color: lighten($base-color, 30%) !important;
22 | &.selected {
23 | //border-color: darken($base-color, 20%) !important;
24 | background-color: transparent;
25 | }
26 | }
27 | .expand-button {
28 | color: lighten($base-color, 15%) !important;
29 | }
30 | .icon-and-text {
31 | &:hover {
32 | background-color: transparent !important;
33 | }
34 | &.selected {
35 | @include gradient-background(#E59E06);
36 | border-color: darken($base-color, 2%);
37 | color: darken($base-color, 65%);
38 | }
39 | .icon {
40 | background-image: $closed-folder-icon-metro-16;
41 |
42 | &.isleaf {
43 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACjElEQVR42o2SW0hUURSG/32OhnhAqJDCzF6kN0lLGtJCtLQyKIMotRjBy1sqVEZS9mKZBdKFHBJpJEKD0urBvAchhqY5kp6MHkRlMhpHR2fOHuZybu3KxhEr+/fL3g/rWx9rL4Kl1La+ta0XwiNUTVf9sgJF0yB5FVCfAqt9Lnx8yt7Ph4Qc6btVtIigkN+XJ28s9MTeHQLPETipF3aXB7NOJ2wLXnyamYVlwgq/jN5Fj+9QX3WhZxXg8ethmpMSzwA666rDxSBOKsHhViBa7XC5ndgWuRH1PSP9XlnJZJDFFYBHXe/p6bQEIanoGTZECJDhh98jg6gc5ue+oqwkBXlp8TB3WfBiYLx3yuYwiqbS6QDA3DVEjWk7BZ7n8Kc09IzAEBsFm+RG6+BndFsmhsdMxYkBwIO2d7QwI1HIrmgH0XmEMo7MA5qiQ9PZQF0SrDNOpBq2YPPWcLT0i+KYqTQuALjzvJeePZr8V4Nf0fHF4cD49DzKHnaKo7Uly4Cqpg568WS6kH21GxpREIZQEKKxEo4ZaXDJfrgWJBwwxGBPfDTONbxigOJlQLm5jVYaD65hAHgUP77ZKY5fbxI/BAPOm9vpTWOGkH2lExzHIKwrYYcnPNQwnhnpkKjGukciddcm5N9tFkdNJasBaxnouo5J2wKOVTaKYjDggrmDVhvThVOX2S9wPOu8tGnk5+zAMRPqk7HfEI2kuEjk32tmvxAEKK1rpTUFh9c00JjBFDPIYgYrAAW3W2hdcZaQU9GGdWwJOMIFCnRNxY+X5FaxLyEK6ckxOFPzdCUg90YjbbyUK+A/Mk89yCyvFwfvBy1SbF6VLWF7TIRPUdV/FRNNh6qowsDHyaG5l9d2fwfyXD4gAGnljAAAAABJRU5ErkJggg==');
44 | }
45 |
46 | &.expanded {
47 | background-image: $opened-folder-icon-metro-16;
48 | }
49 | }
50 | }
51 |
52 | }
53 |
54 | }
55 |
--------------------------------------------------------------------------------
/src/components/styles/themes/orange-theme.scss:
--------------------------------------------------------------------------------
1 | @import '../style-base.scss';
2 | @import './base-theme.scss';
3 |
4 | .deni-react-treeview-container.orange {
5 | border-color: lighten($orange, 2%);
6 |
7 | .deni-react-treeview-item-container.orange {
8 | @include set-theme($orange);
9 |
10 | .icon-and-text {
11 | .icon {
12 | background-image: $closed-folder-icon-orange-16;
13 |
14 | &.isleaf {
15 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACjElEQVR42o2SW0hUURSG/32OhnhAqJDCzF6kN0lLGtJCtLQyKIMotRjBy1sqVEZS9mKZBdKFHBJpJEKD0urBvAchhqY5kp6MHkRlMhpHR2fOHuZybu3KxhEr+/fL3g/rWx9rL4Kl1La+ta0XwiNUTVf9sgJF0yB5FVCfAqt9Lnx8yt7Ph4Qc6btVtIigkN+XJ28s9MTeHQLPETipF3aXB7NOJ2wLXnyamYVlwgq/jN5Fj+9QX3WhZxXg8ethmpMSzwA666rDxSBOKsHhViBa7XC5ndgWuRH1PSP9XlnJZJDFFYBHXe/p6bQEIanoGTZECJDhh98jg6gc5ue+oqwkBXlp8TB3WfBiYLx3yuYwiqbS6QDA3DVEjWk7BZ7n8Kc09IzAEBsFm+RG6+BndFsmhsdMxYkBwIO2d7QwI1HIrmgH0XmEMo7MA5qiQ9PZQF0SrDNOpBq2YPPWcLT0i+KYqTQuALjzvJeePZr8V4Nf0fHF4cD49DzKHnaKo7Uly4Cqpg568WS6kH21GxpREIZQEKKxEo4ZaXDJfrgWJBwwxGBPfDTONbxigOJlQLm5jVYaD65hAHgUP77ZKY5fbxI/BAPOm9vpTWOGkH2lExzHIKwrYYcnPNQwnhnpkKjGukciddcm5N9tFkdNJasBaxnouo5J2wKOVTaKYjDggrmDVhvThVOX2S9wPOu8tGnk5+zAMRPqk7HfEI2kuEjk32tmvxAEKK1rpTUFh9c00JjBFDPIYgYrAAW3W2hdcZaQU9GGdWwJOMIFCnRNxY+X5FaxLyEK6ckxOFPzdCUg90YjbbyUK+A/Mk89yCyvFwfvBy1SbF6VLWF7TIRPUdV/FRNNh6qowsDHyaG5l9d2fwfyXD4gAGnljAAAAABJRU5ErkJggg==');
16 | }
17 |
18 | &.expanded {
19 | background-image: $opened-folder-icon-orange-16;
20 | }
21 | }
22 | }
23 |
24 | }
25 |
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/styles/themes/purple-theme.scss:
--------------------------------------------------------------------------------
1 | @import '../style-base.scss';
2 | @import './base-theme.scss';
3 |
4 | .deni-react-treeview-container.purple {
5 | border-color: lighten($purple, 2%);
6 |
7 | .deni-react-treeview-item-container.purple {
8 | @include set-theme($purple);
9 |
10 | .icon-and-text {
11 | .icon {
12 | background-image: $closed-folder-icon-purple-16;
13 |
14 | &.isleaf {
15 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACjElEQVR42o2SW0hUURSG/32OhnhAqJDCzF6kN0lLGtJCtLQyKIMotRjBy1sqVEZS9mKZBdKFHBJpJEKD0urBvAchhqY5kp6MHkRlMhpHR2fOHuZybu3KxhEr+/fL3g/rWx9rL4Kl1La+ta0XwiNUTVf9sgJF0yB5FVCfAqt9Lnx8yt7Ph4Qc6btVtIigkN+XJ28s9MTeHQLPETipF3aXB7NOJ2wLXnyamYVlwgq/jN5Fj+9QX3WhZxXg8ethmpMSzwA666rDxSBOKsHhViBa7XC5ndgWuRH1PSP9XlnJZJDFFYBHXe/p6bQEIanoGTZECJDhh98jg6gc5ue+oqwkBXlp8TB3WfBiYLx3yuYwiqbS6QDA3DVEjWk7BZ7n8Kc09IzAEBsFm+RG6+BndFsmhsdMxYkBwIO2d7QwI1HIrmgH0XmEMo7MA5qiQ9PZQF0SrDNOpBq2YPPWcLT0i+KYqTQuALjzvJeePZr8V4Nf0fHF4cD49DzKHnaKo7Uly4Cqpg568WS6kH21GxpREIZQEKKxEo4ZaXDJfrgWJBwwxGBPfDTONbxigOJlQLm5jVYaD65hAHgUP77ZKY5fbxI/BAPOm9vpTWOGkH2lExzHIKwrYYcnPNQwnhnpkKjGukciddcm5N9tFkdNJasBaxnouo5J2wKOVTaKYjDggrmDVhvThVOX2S9wPOu8tGnk5+zAMRPqk7HfEI2kuEjk32tmvxAEKK1rpTUFh9c00JjBFDPIYgYrAAW3W2hdcZaQU9GGdWwJOMIFCnRNxY+X5FaxLyEK6ckxOFPzdCUg90YjbbyUK+A/Mk89yCyvFwfvBy1SbF6VLWF7TIRPUdV/FRNNh6qowsDHyaG5l9d2fwfyXD4gAGnljAAAAABJRU5ErkJggg==');
16 | }
17 |
18 | &.expanded {
19 | background-image: $opened-folder-icon-purple-16;
20 | }
21 | }
22 | }
23 |
24 | }
25 |
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/styles/themes/red-theme.scss:
--------------------------------------------------------------------------------
1 | @import '../style-base.scss';
2 | @import './base-theme.scss';
3 |
4 | .deni-react-treeview-container.red {
5 | border-color: lighten($red, 2%);
6 |
7 | .deni-react-treeview-item-container.red {
8 | @include set-theme($red);
9 |
10 | .icon-and-text {
11 | .icon {
12 | background-image: $closed-folder-icon-red-16;
13 |
14 | &.isleaf {
15 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACjElEQVR42o2SW0hUURSG/32OhnhAqJDCzF6kN0lLGtJCtLQyKIMotRjBy1sqVEZS9mKZBdKFHBJpJEKD0urBvAchhqY5kp6MHkRlMhpHR2fOHuZybu3KxhEr+/fL3g/rWx9rL4Kl1La+ta0XwiNUTVf9sgJF0yB5FVCfAqt9Lnx8yt7Ph4Qc6btVtIigkN+XJ28s9MTeHQLPETipF3aXB7NOJ2wLXnyamYVlwgq/jN5Fj+9QX3WhZxXg8ethmpMSzwA666rDxSBOKsHhViBa7XC5ndgWuRH1PSP9XlnJZJDFFYBHXe/p6bQEIanoGTZECJDhh98jg6gc5ue+oqwkBXlp8TB3WfBiYLx3yuYwiqbS6QDA3DVEjWk7BZ7n8Kc09IzAEBsFm+RG6+BndFsmhsdMxYkBwIO2d7QwI1HIrmgH0XmEMo7MA5qiQ9PZQF0SrDNOpBq2YPPWcLT0i+KYqTQuALjzvJeePZr8V4Nf0fHF4cD49DzKHnaKo7Uly4Cqpg568WS6kH21GxpREIZQEKKxEo4ZaXDJfrgWJBwwxGBPfDTONbxigOJlQLm5jVYaD65hAHgUP77ZKY5fbxI/BAPOm9vpTWOGkH2lExzHIKwrYYcnPNQwnhnpkKjGukciddcm5N9tFkdNJasBaxnouo5J2wKOVTaKYjDggrmDVhvThVOX2S9wPOu8tGnk5+zAMRPqk7HfEI2kuEjk32tmvxAEKK1rpTUFh9c00JjBFDPIYgYrAAW3W2hdcZaQU9GGdWwJOMIFCnRNxY+X5FaxLyEK6ckxOFPzdCUg90YjbbyUK+A/Mk89yCyvFwfvBy1SbF6VLWF7TIRPUdV/FRNNh6qowsDHyaG5l9d2fwfyXD4gAGnljAAAAABJRU5ErkJggg==');
16 | }
17 |
18 | &.expanded {
19 | background-image: $opened-folder-icon-red-16;
20 | }
21 | }
22 | }
23 |
24 | }
25 |
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/styles/themes/silver-theme.scss:
--------------------------------------------------------------------------------
1 | @import '../style-base.scss';
2 | @import './base-theme.scss';
3 |
4 | .deni-react-treeview-container.silver {
5 | border-color: lighten($silver, 2%);
6 |
7 | .deni-react-treeview-item-container.silver {
8 | @include set-theme($silver);
9 |
10 | .icon-and-text {
11 | .icon {
12 | background-image: $closed-folder-icon-silver-16;
13 |
14 | &.isleaf {
15 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACjElEQVR42o2SW0hUURSG/32OhnhAqJDCzF6kN0lLGtJCtLQyKIMotRjBy1sqVEZS9mKZBdKFHBJpJEKD0urBvAchhqY5kp6MHkRlMhpHR2fOHuZybu3KxhEr+/fL3g/rWx9rL4Kl1La+ta0XwiNUTVf9sgJF0yB5FVCfAqt9Lnx8yt7Ph4Qc6btVtIigkN+XJ28s9MTeHQLPETipF3aXB7NOJ2wLXnyamYVlwgq/jN5Fj+9QX3WhZxXg8ethmpMSzwA666rDxSBOKsHhViBa7XC5ndgWuRH1PSP9XlnJZJDFFYBHXe/p6bQEIanoGTZECJDhh98jg6gc5ue+oqwkBXlp8TB3WfBiYLx3yuYwiqbS6QDA3DVEjWk7BZ7n8Kc09IzAEBsFm+RG6+BndFsmhsdMxYkBwIO2d7QwI1HIrmgH0XmEMo7MA5qiQ9PZQF0SrDNOpBq2YPPWcLT0i+KYqTQuALjzvJeePZr8V4Nf0fHF4cD49DzKHnaKo7Uly4Cqpg568WS6kH21GxpREIZQEKKxEo4ZaXDJfrgWJBwwxGBPfDTONbxigOJlQLm5jVYaD65hAHgUP77ZKY5fbxI/BAPOm9vpTWOGkH2lExzHIKwrYYcnPNQwnhnpkKjGukciddcm5N9tFkdNJasBaxnouo5J2wKOVTaKYjDggrmDVhvThVOX2S9wPOu8tGnk5+zAMRPqk7HfEI2kuEjk32tmvxAEKK1rpTUFh9c00JjBFDPIYgYrAAW3W2hdcZaQU9GGdWwJOMIFCnRNxY+X5FaxLyEK6ckxOFPzdCUg90YjbbyUK+A/Mk89yCyvFwfvBy1SbF6VLWF7TIRPUdV/FRNNh6qowsDHyaG5l9d2fwfyXD4gAGnljAAAAABJRU5ErkJggg==');
16 | }
17 |
18 | &.expanded {
19 | background-image: $opened-folder-icon-silver-16;
20 | }
21 | }
22 | }
23 |
24 | }
25 |
26 | }
27 |
--------------------------------------------------------------------------------
/src/examples/ExampleUnderConstruction.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const ExampleUnderConstruction: React.FC = () => {
4 | const style = { color: 'gray', fontSize: '22px', margin: '20px' }
5 | return
107 | {domTreeviewItem}
108 | {_createComponentsChildren(treeview, domTreeviewItem, level + 1, child.children)}
109 |
110 | )
111 | })
112 | : undefined
113 | }
114 | Example Under Development
6 | }
7 |
8 | export default ExampleUnderConstruction
--------------------------------------------------------------------------------
/src/examples/api/AddItemAndSubitemApi/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import DeniReactTreeView from '../../../components'
3 |
4 | const AddItemAndSubitemApi: React.FC = () => {
5 | const treeviewRef = useRef
19 |
20 |
25 | )
26 | }
27 |
28 | export default AddItemAndSubitemApi
--------------------------------------------------------------------------------
/src/examples/api/AddItemAndSubitemApi/source.md:
--------------------------------------------------------------------------------
1 | ```javascript
2 | import React, { useRef } from 'react'
3 | import DeniReactTreeView from 'deni-react-treeview'
4 |
5 | const AddItemAndSubitemApi: React.FC = () => {
6 | const treeviewRef = useRef
20 |
21 |
26 | )
27 | }
28 |
29 | export default AddItemAndSubitemApi
30 | ```
31 |
--------------------------------------------------------------------------------
/src/examples/api/RemoveItemApi/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import DeniReactTreeView from '../../../components'
3 |
4 | const RemoveItemApi: React.FC = () => {
5 | const treeviewRef = useRef
20 |
21 |
26 | )
27 | }
28 |
29 | export default RemoveItemApi
--------------------------------------------------------------------------------
/src/examples/api/RemoveItemApi/source.md:
--------------------------------------------------------------------------------
1 | ```javascript
2 | import React, { useRef } from 'react'
3 | import DeniReactTreeView from 'deni-react-treeview'
4 |
5 | const RemoveItemApi: React.FC = () => {
6 | const treeviewRef = useRef
21 |
22 |
27 | )
28 | }
29 |
30 | export default RemoveItemApi
31 | ```
32 |
--------------------------------------------------------------------------------
/src/examples/api/api.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import ExampleUnderConstruction from '../ExampleUnderConstruction'
5 |
6 | import AddItemAndSubitemApi from './AddItemAndSubitemApi'
7 | import RemoveItemApi from './RemoveItemApi'
8 |
9 | storiesOf('4 - Api', module)
10 | .add('addItem and subitem', () =>
12 |
13 |
20 | )
21 | }
22 |
23 | export default OnAfterLoadEvent
--------------------------------------------------------------------------------
/src/examples/events/OnAfterLoadEvent/source.md:
--------------------------------------------------------------------------------
1 | ```javascript
2 | import React, { useRef } from 'react'
3 | import DeniReactTreeView from 'deni-react-treeview';
4 |
5 | const OnAfterLoadEvent: React.FC = () => {
6 | const treeviewRef = useRef
13 |
14 |
21 | )
22 | }
23 |
24 | export default OnAfterLoadEvent
25 | ```
26 |
--------------------------------------------------------------------------------
/src/examples/events/OnBeforeLoadEvent/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import DeniReactTreeView from '../../../components';
3 |
4 | const OnBeforeLoadEvent: React.FC = () => {
5 | const treeviewRef = useRef
12 |
13 |
20 | )
21 | }
22 |
23 | export default OnBeforeLoadEvent
--------------------------------------------------------------------------------
/src/examples/events/OnBeforeLoadEvent/source.md:
--------------------------------------------------------------------------------
1 | ```javascript
2 | import React, { useRef } from 'react'
3 | import DeniReactTreeView from 'deni-react-treeview';
4 |
5 | const OnBeforeLoadEvent: React.FC = () => {
6 | const treeviewRef = useRef
13 |
14 |
21 | )
22 | }
23 |
24 | export default OnBeforeLoadEvent
25 | ```
26 |
--------------------------------------------------------------------------------
/src/examples/events/OnRenderItemEvent/OnRenderItemEvent.scss:
--------------------------------------------------------------------------------
1 | .onrenderitem-example {
2 |
3 | .deni-react-treeview-item-container {
4 |
5 | .icon-and-text {
6 | cursor: default !important;
7 | }
8 |
9 | .treeview-item-example {
10 | display: flex;
11 | flex: 1;
12 |
13 | .treeview-item-example-text {
14 | flex: 1;
15 | }
16 |
17 | .actionButton {
18 | margin-right: 5px;
19 | cursor: pointer;
20 | opacity: 0.5;
21 |
22 | &.trash {
23 | color: #ff6666;
24 | }
25 |
26 | &.edit {
27 | color: #006699; //#00cc44;
28 | margin-top: 1px;
29 | }
30 | }
31 | }
32 |
33 | &:hover {
34 | .actionButton {
35 | visibility: visible;
36 | opacity: 1;
37 | }
38 | }
39 |
40 | }
41 | }
--------------------------------------------------------------------------------
/src/examples/events/OnRenderItemEvent/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import { FaTrash, FaEdit } from 'react-icons/fa';
3 | import DeniReactTreeView from '../../../components'
4 | import './OnRenderItemEvent.scss'
5 |
6 | const OnRenderItemEvent: React.FC = () => {
7 | const treeviewRef = useRef
20 | {item.text}
21 | deleteItemClick(item.id)}>
24 | )
25 | }
26 |
27 | return (
28 | <>
29 | 37 | OnRenderItemEvent.scss 38 | 39 | ) 40 | } 41 | 42 | export default OnRenderItemEvent -------------------------------------------------------------------------------- /src/examples/events/OnRenderItemEvent/source.md: -------------------------------------------------------------------------------- 1 | ```javascript 2 | import React, { useRef } from 'react' 3 | import { FaTrash, FaEdit } from 'react-icons/fa'; 4 | import DeniReactTreeView from 'deni-react-treeview' 5 | import './OnRenderItemEvent.scss' 6 | 7 | const OnRenderItemEvent: React.FC = () => { 8 | const treeviewRef = useRef
21 | {item.text}
22 | deleteItemClick(item.id)}>
25 | )
26 | }
27 |
28 | return (
29 |
10 |
11 |
17 | )
18 |
19 | }
20 |
21 | export default AutoLoadFalseOption
--------------------------------------------------------------------------------
/src/examples/options/AutoLoadFalseOption/source.md:
--------------------------------------------------------------------------------
1 | ```javascript
2 | import React, { useRef } from 'react'
3 | import DeniReactTreeView from 'deni-react-treeview'
4 |
5 | const AutoLoadFalseOption: React.FC = () => {
6 | const treeviewRef = useRef
11 |
12 |
18 | )
19 |
20 | }
21 |
22 | export default AutoLoadFalseOption
23 | ```
24 |
--------------------------------------------------------------------------------
/src/examples/options/LazyLoadTrueOption/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import DeniReactTreeView from '../../../components'
3 |
4 | const LazyLoadTrueOption: React.FC = () => {
5 | return
9 |
12 |
13 |
14 | )
15 | }
16 |
17 | export default CustomeziedTheme
18 | ```
19 |
--------------------------------------------------------------------------------
/src/examples/theming/CustomizedTheme/theming-customizations.scss:
--------------------------------------------------------------------------------
1 | .theme-customization {
2 | height: 100%;
3 |
4 | .deni-react-treeview-container {
5 | background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)), url("images/menu-background.jpg");
6 | background-size: 100% 100%;
7 | background-repeat: no-repeat;
8 | border-color: #004D40;// rgba(96, 214, 111, 1) !important;
9 | font-family: tahoma;
10 | font-size: 14px;
11 | width: 350px;
12 | height: 500px;
13 | opacity: 1;
14 | //box-shadow: 2px 2px 2px #E0F7FA, 2px -2px 2px #E0F7FA, -2px -2px 2px #E0F7FA, -2px 2px 2px #E0F7FA;
15 | box-shadow: 3px 3px 4px #B2DFDB;
16 | border-radius: 5px;
17 |
18 |
19 | &::-webkit-scrollbar {
20 | width: 8px;
21 | }
22 |
23 | /* Track */
24 | &::-webkit-scrollbar-track {
25 | background: rgba(144, 164, 174, .1);
26 | }
27 |
28 | /* Handle */
29 | &::-webkit-scrollbar-thumb {
30 | background: rgba(144, 164, 174, .3);
31 | }
32 |
33 | /* Handle on hover */
34 | &::-webkit-scrollbar-thumb:hover {
35 | background: rgba(144, 164, 174, .6);
36 | }
37 |
38 |
39 | /* changing the font color, font size and line's height */
40 | .deni-react-treeview-item-container {
41 | height: 28px;
42 |
43 | /* changing the font color, and padding top and bottom (left is not recommended) */
44 | .icon-and-text {
45 | color: #00695C;
46 | padding-top: 13px;
47 | padding-bottom: 13px;
48 | display: flex;
49 | flex-direction: row;
50 | align-items: center;
51 |
52 | /* changing the selected item properties */
53 | &.selected {
54 | color: #004D40 !important;
55 | border-color: #80CBC4;
56 | background: linear-gradient(to bottom, #E0F2F1 0%, #80CBC4 100%) !important;
57 | }
58 |
59 | /* changing the icons of the folders expanded */
60 | .icon {
61 | width: 24px !important;
62 | height: 24px !important;
63 |
64 | /* changing the icons of the folders colapsed */
65 | //&.colapsed {
66 | background-image: url(images/folder-green.png) !important;
67 | background-size: 24px 24px;
68 | //}
69 | /* changing the icons of the folders expanded */
70 | &.expanded {
71 | background-image: url(images/folder-green.png) !important;
72 | }
73 |
74 | /* changing the icons of the items */
75 | &.isleaf {
76 | background-image: url(images/dog.png) !important;
77 | }
78 |
79 | }
80 |
81 |
82 | }
83 |
84 | }
85 |
86 | }
87 |
88 | }
--------------------------------------------------------------------------------
/src/examples/theming/PredefinedThemes/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import DeniReactTreeView from "../../../components"
3 |
4 | const themes = [ 'classic', 'metro', 'moonlight', 'purple', 'green', 'orange', 'red', 'silver' ]
5 |
6 | const PredefinedThemes = () => {
7 | return (
8 |
9 | {
10 | themes.map((theme, index) => {
11 | return
21 | )
22 | }
23 |
24 | export default PredefinedThemes
--------------------------------------------------------------------------------
/src/examples/theming/PredefinedThemes/source.md:
--------------------------------------------------------------------------------
1 | ```javascript
2 | import React from 'react'
3 | import DeniReactTreeView from "deni-react-treeview"
4 |
5 | const themes = [ 'classic', 'metro', 'moonlight', 'purple', 'green', 'orange', 'red', 'silver' ]
6 |
7 | const PredefinedThemes = () => {
8 | return (
9 |
10 | {
11 | themes.map((theme, index) => {
12 | return (
13 |
24 | )
25 | }
26 |
27 | export default PredefinedThemes
28 | ```
29 |
--------------------------------------------------------------------------------
/src/examples/theming/theming.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { storiesOf } from '@storybook/react';
3 | import PredefinedThemes from './PredefinedThemes'
4 | import CustomizedTheme from './CustomizedTheme'
5 |
6 | storiesOf('1 - Theming', module)
7 | .add('predefined themes', () =>