@@ -63,15 +71,15 @@ export class Header extends Component {
this.props.onSize();
});
}
- public componentDitUnmount() {
+ public componentWillUnmount() {
const node = this.sliderRef.current!;
node.removeEventListener("move", this.onMove.bind(this));
}
public getWidth() {
- return this.state.width;
+ return Math.max(this.state.width,this.state.tempWidth);
}
- public setWidth(width:number) {
- return this.setState({width});
+ public getTempWidth() {
+ return this.state.tempWidth;
}
public getType() {
return this.type;
diff --git a/src/ListView/parts/Header/Headers.tsx b/src/ListView/parts/Header/Headers.tsx
index 791fe26..0e78179 100644
--- a/src/ListView/parts/Header/Headers.tsx
+++ b/src/ListView/parts/Header/Headers.tsx
@@ -6,67 +6,80 @@ interface HeadersProps {
onSize: (headers: number[]) => void;
onClick: (index: number) => void;
children: ReactNode;
+ clientWidth?: number;
}
+/**
+ *ListViewヘッダー管理クラス
+ *
+ * @export
+ * @class Headers
+ * @extends {Component}
+ */
export class Headers extends Component {
- headers: RefObject[] = [];
- values:ReactNode[] = [];
- componentDidMount() {
+ private headers: RefObject[] = [];
+ private values: ReactNode[] = [];
+ private rootRef = createRef();
+ public componentDidMount() {
this.values = React.Children.toArray(this.props.children);
this.onSize();
}
- componentDidUpdate(){
- const headerWidth = this.rootRef.current!.offsetWidth;
- const width = this.headers.reduce((a,b)=>{
- return a-b.current!.getWidth();
- },this.rootRef.current!.offsetWidth);
- console.log(headerWidth);
- const index = this.headers.length -1;
- if(index >= 0 && width){
- const header = this.headers[index].current!;
- header.setState({width:header.getWidth()+width},()=>{ this.onSize();});
+ public componentDidUpdate() {
+ const clientWidth = this.props.clientWidth;
+ if (this.props.clientWidth !== undefined) {
+ const width = this.headers.reduce((a, b) => {
+ const w = b.current!.getWidth();
+ if (w < 0) a = -9999999;
+ return a - b.current!.getWidth();
+ }, clientWidth!);
+ const index = this.headers.length - 1;
+ if (index >= 0) {
+ const header = this.headers[index].current!;
+ let tempWidth = header.getTempWidth() + width;
+ if (tempWidth < 0) tempWidth = 0;
+ if (header.state.tempWidth !== tempWidth) {
+ header.setState({ tempWidth });
+ }
+ }
}
}
- rootRef = createRef();
- render() {
+ public render() {
this.headers = [];
return (
- {this.values.map(
- (element: ReactNode, index) => {
- const refHeader = createRef();
- this.headers.push(refHeader);
- return (
- {
- this.onClick(index);
- }}
- onSize={() => this.onSize()}
- >
- {element}
-
- );
- }
- )}
+ {this.values.map((element: ReactNode, index) => {
+ const refHeader = createRef();
+ this.headers.push(refHeader);
+ return (
+ {
+ this.onClick(index);
+ }}
+ onSize={() => this.onSize()}
+ >
+ {element}
+
+ );
+ })}
);
}
- onSize() {
+ protected onSize() {
const headerSizes = this.headers.map(headerRef => {
if (headerRef.current) return headerRef.current.getWidth();
return -1;
});
if (headerSizes.indexOf(-1) === -1) this.props.onSize(headerSizes);
}
- onClick(index: number) {
+ protected onClick(index: number) {
this.props.onClick(index);
}
- getHeader(index: number) {
+ public getHeader(index: number) {
return this.headers[index];
}
- getTypes() {
+ public getTypes() {
return this.headers.map(header => {
return header.current!.getType();
});
diff --git a/src/ListView/parts/Header/Root.ts b/src/ListView/parts/Header/Root.ts
index 1a407e6..2af583b 100644
--- a/src/ListView/parts/Header/Root.ts
+++ b/src/ListView/parts/Header/Root.ts
@@ -13,28 +13,28 @@ export const Root = styled.div.attrs(p => ({
min-width: 100%;
background-image: linear-gradient(
180deg,
- rgba(144, 197, 240, 0.9) 0%,
- rgba(63, 164, 201, 0.9) 50%,
- rgba(100, 122, 221, 0.9) 100%
+ rgb(144, 197, 240) 0%,
+ rgb(63, 164, 201) 50%,
+ rgb(100, 122, 221) 100%
);
> div {
#back {
- display:flex;
+ display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: linear-gradient(
180deg,
- rgba(144, 197, 240, 0.9) 0%,
- rgba(63, 164, 201, 0.9) 50%,
- rgba(100, 122, 221, 0.9) 100%
+ rgb(144, 197, 240) 0%,
+ rgb(63, 164, 201) 50%,
+ rgb(100, 122, 221) 100%
);
&:hover {
background-image: linear-gradient(
0deg,
- rgba(144, 197, 240, 0.9) 0%,
- rgba(63, 164, 201, 0.9) 50%,
- rgba(100, 122, 221, 0.9) 100%
+ rgb(144, 197, 240) 0%,
+ rgb(63, 164, 201) 50%,
+ rgb(100, 122, 221) 100%
);
}
}
@@ -53,10 +53,16 @@ export const Root = styled.div.attrs(p => ({
cursor: ew-resize;
position: absolute;
top: 0px;
- right: -12px;
+ right: -16px;
width: 32px;
height: 100%;
// background-color: rgba(255, 255, 255, 0.4);
}
+ &:last-child {
+ > #slider {
+ right: 0;
+ width: 16px;
+ }
+ }
}
`;
diff --git a/src/ListView/parts/Item/Items.tsx b/src/ListView/parts/Item/Items.tsx
index 26cf320..7e60552 100644
--- a/src/ListView/parts/Item/Items.tsx
+++ b/src/ListView/parts/Item/Items.tsx
@@ -8,6 +8,7 @@ import React, {
} from "react";
import { Root } from "./Root";
import { Item } from "./Item";
+import imgFile from "../../../../images/file.png";
interface ItemColumnProps {
width: number;
@@ -27,9 +28,14 @@ interface ItemsProps {
sortOrder?: boolean;
sortIndex?: number;
sortType?: string;
- selectItems: Set;
+ selectItems: Set;
onClick: (e: React.MouseEvent, row: number, col: number) => void;
onDoubleClick: (e: React.MouseEvent, row: number, col: number) => void;
+ onItemDragStart?: (e: React.DragEvent, row: number, col: number) => void;
+ onItemDragEnter?: (e: React.DragEvent, row: number, col: number) => void;
+ onItemDragLeave?: (e: React.DragEvent, row: number, col: number) => void;
+ onItemDragOver?: (e: React.DragEvent, row: number, col: number) => void;
+ onItemDrop?: (e: React.DragEvent, row: number, col: number) => void;
}
interface State {
values: ReactNode[][];
@@ -37,15 +43,34 @@ interface State {
export class Items extends Component {
state: State = { values: [] };
- items: RefObject[][] = [];
- sortOrder?: boolean;
- sortIndex?: number;
- values: ReactNode[][] = [];
+ private rootRef: RefObject = createRef();
+ private columnsRef: RefObject[] = [];
+ private itemsRef: RefObject[][] = [];
+ private sortOrder?: boolean;
+ private sortIndex?: number;
+ private values: ReactNode[][] = [];
+ private fileImage?: HTMLImageElement;
- componentDidUpdate() {
- this.items.forEach((row, index) => {
+ public componentDidUpdate() {
+ //カラムのスクロールバー幅修正
+ if (this.columnsRef.length) {
+ const rootWidth = this.rootRef.current!.clientWidth + this.props.xScroll;
+ const columnWidth = this.columnsRef.reduce((a, b) => {
+ return a - b.current!.offsetWidth;
+ }, rootWidth);
+ if (columnWidth) {
+ const node = this.columnsRef[this.columnsRef.length - 1].current!;
+ node.style.width = node.offsetWidth + columnWidth + "px";
+ }
+ }
+
+ //アイテム選択と高さ設定
+ this.itemsRef.forEach((row, index) => {
let height = row.reduce((a, b) => {
- return Math.max(a, b.current!.offsetHeight);
+ return Math.max(
+ a,
+ (b.current!.childNodes[0] as HTMLDivElement).offsetHeight
+ );
}, 0);
const select = this.props.selectItems.has(index);
row.forEach(item => {
@@ -55,7 +80,11 @@ export class Items extends Component {
});
});
}
- componentDidMount() {
+ public componentDidMount() {
+ this.fileImage = document.createElement("img");
+ this.fileImage.src = imgFile;
+ this.fileImage.style.height = "64px";
+
const values: ReactNode[][] = [];
React.Children.forEach(this.props.children, children => {
const value: ReactNode[] = [];
@@ -73,7 +102,7 @@ export class Items extends Component {
this.sort();
}
- render() {
+ public render() {
if (
this.sortOrder !== this.props.sortOrder ||
this.sortIndex !== this.props.sortIndex
@@ -85,25 +114,28 @@ export class Items extends Component {
});
}
- this.items = [];
+ this.itemsRef = [];
+ this.columnsRef = [];
return (
-
+ e.preventDefault()}>
{this.props.headerSizes.map((size, cols) => {
+ this.columnsRef[cols] = createRef();
return (
-
+
{this.state.values.map((items, rows) => {
const ref = createRef();
- if (this.items[rows]) this.items[rows][cols] = ref;
- else this.items[rows] = [ref];
+ if (this.itemsRef[rows]) this.itemsRef[rows][cols] = ref;
+ else this.itemsRef[rows] = [ref];
let type = "flex-start";
- if(this.props.headerTypes[cols] === "number")
- type="flex-end";
+ if (this.props.headerTypes[cols] === "number")
+ type = "flex-end";
return (
- {
this.onOver(rows, true);
}}
@@ -116,8 +148,23 @@ export class Items extends Component
{
onDoubleClick={e => {
this.props.onDoubleClick(e, rows, cols);
}}
+ onDragStart={e => {
+ this.onDragStart(e, rows, cols);
+ }}
+ onDragLeave={e => {
+ this.onDragLeave(e, rows, cols);
+ }}
+ onDragEnter={e => {
+ this.onDragEnter(e, rows, cols);
+ }}
+ onDragOver={e => {
+ this.onDragOver(e, rows, cols);
+ }}
+ onDrop={e => {
+ this.onDrop(e, rows, cols);
+ }}
>
- {items[cols]}
+
);
})}
@@ -128,14 +175,14 @@ export class Items extends Component {
);
}
- onOver(index: number, flag: boolean) {
- const rows = this.items[index];
+ protected onOver(index: number, flag: boolean) {
+ const rows = this.itemsRef[index];
for (const item of rows) {
if (flag) item.current!.classList.add("Hover");
else item.current!.classList.remove("Hover");
}
}
- sort() {
+ protected sort() {
const sortIndex = this.props.sortIndex;
if (sortIndex === undefined || sortIndex < 0) return;
const sortOrder = this.props.sortOrder;
@@ -160,14 +207,45 @@ export class Items extends Component {
}
this.setState({ values: this.values });
}
- getItemValues() {
+
+ protected onDragStart(e: React.DragEvent, row: number, col: number) {
+ if (!this.props.selectItems.has(row)) {
+ e.preventDefault();
+ return;
+ }
+ if (this.props.onItemDragStart) this.props.onItemDragStart(e, row, col);
+ e.dataTransfer.effectAllowed = "move";
+ e.dataTransfer.setDragImage(this.fileImage!, 10, 10);
+ const rows = Array.from(this.props.selectItems.values());
+ const items = rows.map((item)=>{
+ return this.values[item];
+ })
+ e.dataTransfer.setData("text/plain",JSON.stringify(items));
+ }
+ protected onDragLeave(e: React.DragEvent, row: number, col: number) {
+ if (this.props.onItemDragLeave) this.props.onItemDragLeave(e, row, col);
+ }
+ protected onDragEnter(e: React.DragEvent, row: number, col: number) {
+ if (this.props.onItemDragEnter) this.props.onItemDragEnter(e, row, col);
+ e.preventDefault();
+ }
+ protected onDragOver(e: React.DragEvent, row: number, col: number) {
+ if (this.props.onItemDragOver) this.props.onItemDragOver(e, row, col);
+ e.preventDefault();
+ }
+ protected onDrop(e: React.DragEvent, row: number, col: number) {
+ if (this.props.onItemDrop) this.props.onItemDrop(e, row, col);
+ e.preventDefault();
+ }
+
+ public getItemValues() {
return this.state.values;
}
- addItem(item: ReactNode[]) {
+ public addItem(item: ReactNode[]) {
this.values.push(item);
this.setState({ values: this.values });
}
- removeItem(row: number) {
+ public removeItem(row: number) {
this.values.splice(row, 1);
this.setState({ values: this.values });
}
diff --git a/src/ListView/parts/Root.tsx b/src/ListView/parts/Root.tsx
index 2054249..fb0052e 100644
--- a/src/ListView/parts/Root.tsx
+++ b/src/ListView/parts/Root.tsx
@@ -1,16 +1,14 @@
import styled from "styled-components";
-interface StyleProps{
-
-}
+interface StyleProps {}
export const Root = styled.div.attrs(p => ({
style: {}
}))`
-position:absolute;
-overflow-x:auto;
-overflow-y:hidden;
-width:100%;
-height:100%;
-display:flex;
-flex-direction:column;
-`;
\ No newline at end of file
+ position: absolute;
+ overflow-x: auto;
+ overflow-y: hidden;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+`;
diff --git a/src/TreeView/Item/TreeItem.style.ts b/src/TreeView/Item/TreeItem.style.ts
new file mode 100644
index 0000000..3461aa6
--- /dev/null
+++ b/src/TreeView/Item/TreeItem.style.ts
@@ -0,0 +1,90 @@
+import styled from "styled-components";
+
+interface StyleProps {}
+
+const lineSize = 1.6;
+
+export const Root = styled.div.attrs(p => ({
+ style: {}
+}))`
+ position: relative;
+
+ #icon {
+ cursor: pointer;
+ box-sizing: border-box;
+ margin: ${lineSize*0.2}em;
+ width: ${lineSize*0.8}em;
+ }
+ #item {
+ border-radius: 4px;
+ cursor: default;
+ flex: 1;
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ &:hover {
+ background-color: rgba(200, 230, 250, 0.4);
+ }
+ &.select {
+ background-color: rgba(100, 150, 250, 0.4);
+ &:hover {
+ background-color: rgba(100, 150, 250, 0.5);
+ }
+ }
+ }
+ #label {
+ flex: 1;
+ flex-wrap: nowrap;
+ word-break: break-all;
+ margin: 0.1em;
+ }
+ #child {
+ position: relative;
+ > div {
+ display: flex;
+ }
+ }
+ #children{
+ flex:1;
+ }
+ #line {
+ width:${lineSize/2}em;
+ margin-right:${lineSize/2}em;
+ bottom: 0;
+ flex-grow: 0;
+ flex-shrink: 0;
+ border-right:solid 1px;
+ }
+
+ .close {
+ > div {
+ animation: treeClose 0.5s ease 0s forwards;
+ }
+ }
+ .open {
+ > div {
+ animation: treeOpen 0.1s ease 0s normal;
+ }
+ }
+
+ @keyframes treeOpen {
+ 0% {
+ margin-top: -100%;
+ }
+
+ 100% {
+ margin-top: 0%;
+ }
+ }
+
+ @keyframes treeClose {
+ 0% {
+ height: auto;
+ margin-top: 0;
+ }
+
+ 100% {
+ margin-top: -100%;
+ }
+ }
+`;
diff --git a/src/TreeView/Item/TreeItem.tsx b/src/TreeView/Item/TreeItem.tsx
new file mode 100644
index 0000000..e425e3e
--- /dev/null
+++ b/src/TreeView/Item/TreeItem.tsx
@@ -0,0 +1,226 @@
+import React, {
+ Component,
+ ReactNode,
+ ReactElement,
+ createRef,
+ RefObject
+} from "react";
+import imgAlone from "../../../images/talone.svg";
+import imgClose from "../../../images/tclose.svg";
+import imgOpen from "../../../images/topen.svg";
+import { Root } from "./TreeItem.style";
+import { TreeView } from "..";
+interface Props {
+ children?: ReactNode;
+ label?: ReactNode;
+ expand?: boolean;
+ value?: unknown;
+ treeView?: TreeView;
+ parent?: TreeItem;
+ onItemClick?: (item: TreeItem) => void;
+ onDoubleClick?: (item: TreeItem) => void;
+}
+interface State {
+ expand: boolean;
+ label: ReactNode;
+ value: unknown;
+ select: boolean;
+ checked: boolean;
+ items: TreeItem[];
+}
+
+export class TreeItem extends Component {
+ static defaultProps = { label: "", expand: true };
+
+ childRef: RefObject = createRef();
+ itemsRef: RefObject[] = [];
+ keepProps: Props;
+ constructor(props: Props) {
+ super(props);
+ this.keepProps = props;
+ //子アイテムの抽出
+ const items = React.Children.toArray(this.props.children).filter(item => {
+ return (item as ReactElement).type === TreeItem;
+ }) as TreeItem[];
+
+ this.state = {
+ items: items,
+ select: false,
+ checked: false,
+ expand: this.props.expand!,
+ label: this.props.label,
+ value: this.props.value
+ };
+ }
+ componentDidUpdate() {
+ if (this.keepProps.children !== this.props.children) {
+ const items = React.Children.toArray(this.props.children).filter(item => {
+ return (item as ReactElement).type === TreeItem;
+ }) as TreeItem[];
+ this.setState({items});
+ this.keepProps = this.props;
+ }
+ }
+ render() {
+ this.itemsRef = this.state.items.map(() => {
+ return createRef();
+ });
+ for (const item of this.state.items) console.log(item.props.label);
+ return (
+
+
+ );
+ }
+ getLabel() {
+ return this.state.label;
+ }
+ setLabel(label: ReactNode) {
+ this.setState({ label: label });
+ }
+ findItem(value: unknown): TreeItem | null {
+ if (this.state.value === value) return this;
+ for (const item of this.state.items) {
+ const target = item.findItem(value);
+ if (target) return target;
+ }
+ return null;
+ }
+ findItems(value: unknown): TreeItem[] {
+ const items: TreeItem[] = [];
+ if (this.state.value === value) items.push(this);
+ for (const item of this.state.items) {
+ items.push(...item.findItems(value));
+ }
+ return items;
+ }
+ addItem(props: Props) {
+ this.state.items.push(new TreeItem(props));
+ this.forceUpdate();
+ }
+ delItem(item: TreeItem) {
+ const index = this.itemsRef.findIndex(itemRef => {
+ return itemRef.current === item;
+ });
+ if (index >= 0) {
+ if (
+ this.props.treeView &&
+ this.props.treeView.getSelectItem() === this.itemsRef[index].current
+ )
+ this.props.treeView.selectItem(null);
+ this.itemsRef.splice(index, 1);
+ const items = this.state.items.slice();
+ items.splice(index, 1);
+ this.setState({ items });
+ this.forceUpdate();
+ return true;
+ } else {
+ for (const itemRef of this.itemsRef) {
+ if (itemRef.current!.delItem(item)) return true;
+ }
+ }
+ return false;
+ }
+ remove() {
+ if (this.props.parent) this.props.parent.delItem(this);
+ this.forceUpdate();
+ }
+ clear() {
+ this.setState({ items: [] });
+ this.forceUpdate();
+ }
+ getChildren() {
+ return this.state.items;
+ }
+ onSelect(select: boolean) {
+ this.setState({ select });
+ }
+ setChecked(checked: boolean) {
+ this.setState({ checked });
+ for (const item of this.itemsRef) {
+ item.current!.setChecked(checked);
+ }
+ }
+ getCheckItems() {
+ const checks: TreeItem[] = [];
+ if (this.state.checked) checks.push(this);
+ for (const item of this.itemsRef) {
+ checks.push(...item.current!.getCheckItems());
+ }
+ return checks;
+ }
+}
diff --git a/src/TreeView/Root.ts b/src/TreeView/Root.ts
new file mode 100644
index 0000000..b1ce779
--- /dev/null
+++ b/src/TreeView/Root.ts
@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+interface StyleProps {}
+
+export const Root = styled.div.attrs(p => ({
+ style: {}
+}))`
+ user-select:none;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow:auto;
+
+`;
diff --git a/src/TreeView/index.tsx b/src/TreeView/index.tsx
new file mode 100644
index 0000000..68c98ca
--- /dev/null
+++ b/src/TreeView/index.tsx
@@ -0,0 +1,63 @@
+import React, { Component, createRef, ReactElement } from "react";
+import { TreeItem } from "./Item/TreeItem";
+import { Root } from "./Root";
+
+interface Props {
+ onItemClick?: (item: TreeItem) => void;
+ onItemDoubleClick?: (item: TreeItem) => void;
+}
+interface State {}
+
+export class TreeView extends Component {
+ rootItemRef = createRef();
+ select: TreeItem | null = null;
+ render() {
+ const rootItem = this.props.children as ReactElement;
+ if (rootItem && rootItem.type === TreeItem) {
+ //TreeItemを再定義
+ return (
+
+
+ );
+ } else {
+ //データが存在しなかった場合は、デフォルトでrootアイテムを用意
+ return (
+
+
+ );
+ }
+ }
+ getItem(): TreeItem {
+ return this.rootItemRef.current!;
+ }
+ findItem(value: unknown) {
+ return this.rootItemRef.current!.findItem(value);
+ }
+ findItems(value: unknown) {
+ return this.rootItemRef.current!.findItems(value);
+ }
+ delItem(item: TreeItem) {
+ return this.rootItemRef.current!.delItem(item);
+ }
+ getSelectItem(): TreeItem | null {
+ return this.select;
+ }
+ selectItem(item: TreeItem | null) {
+ if (this.select) this.select.onSelect(false);
+ if (item) item.onSelect(true);
+ this.select = item;
+ }
+ getCheckItems(){
+ return this.rootItemRef.current!.getCheckItems();
+ }
+}
diff --git a/src/index.ts b/src/index.ts
index 7f1c12c..f6d03f1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,5 @@
export * from "./JSWindow";
export * from "./SplitView";
-export * from "./ListView";
\ No newline at end of file
+export * from "./ListView";
+export * from "./TreeView";
+export * from "./TreeView/Item/TreeItem";
\ No newline at end of file
diff --git a/src/splitView/index.tsx b/src/splitView/index.tsx
index fb89d46..f47b602 100644
--- a/src/splitView/index.tsx
+++ b/src/splitView/index.tsx
@@ -43,18 +43,17 @@ export class SplitView extends Component {
private resizeObserver?: ResizeObserver;
private rootRef = createRef();
private childRef = [createRef(), createRef()];
- private children: (ReactNode | undefined)[] = [undefined, undefined];
public constructor(props: SplitProps) {
super(props);
- this.state = { pos: props.pos!, activeMode: false, barOpen: true };
+ this.state = {
+ pos: props.pos!,
+ activeMode: false,
+ barOpen: true,
+ };
this.type = props.type!;
- if (props.children) {
- if (props.children instanceof Array) {
- this.children = props.children;
- }
- }
}
public render() {
+ const children = React.Children.toArray(this.props.children);
return (
{
this.closeBar();
}}
>
- {this.children[1]}
+ {children[1]}
(this.activeStop = true)}>
- {this.children[0]}
+ {children[0]}
{
}
}
- onOpen(open: boolean) {
+ protected onOpen(open: boolean) {
const children = [this.childRef[0].current!, this.childRef[1].current!];
if (open) {
children[0].style.animation =
@@ -251,7 +250,7 @@ export class SplitView extends Component {
}
this.setState({ barOpen: open });
}
- onMove(pos: number) {
+ protected onMove(pos: number) {
this.setState({ pos });
this.closeBar();
}
diff --git a/src/svg.d.ts b/src/svg.d.ts
index e1e62b7..d9f3b7c 100644
--- a/src/svg.d.ts
+++ b/src/svg.d.ts
@@ -1,4 +1,8 @@
declare module '*.svg' {
const value: string;
export = value;
+}
+declare module '*.png' {
+ const value: string;
+ export = value;
}
\ No newline at end of file
{items[cols]}
{
+ this.props.onItemClick && this.props.onItemClick(this);
+ if (this.props.treeView) {
+ this.props.treeView.selectItem(this);
+ this.props.treeView.props.onItemClick &&
+ this.props.treeView.props.onItemClick(this);
+ }
+ }}
+ onDoubleClick={() => {
+ this.props.onDoubleClick && this.props.onDoubleClick(this);
+ this.props.treeView &&
+ this.props.treeView.props.onItemDoubleClick &&
+ this.props.treeView.props.onItemDoubleClick(this);
+ }}
+ >
+ ![]()
{
+ const expand = !this.state.expand;
+ this.setState({ expand });
+ e.stopPropagation();
+ //e.preventDefault();
+ if (expand) this.childRef.current!.style.display = "block";
+ }}
+ id="icon"
+ src={
+ React.Children.count(this.props.children) === 0
+ ? imgAlone
+ : this.state.expand
+ ? imgOpen
+ : imgClose
+ }
+ />
+ {
+ e.stopPropagation();
+ }}
+ value=""
+ onChange={() => this.setChecked(!this.state.checked)}
+ />
+
+ {this.state.label}
+ {
+ this.childRef.current!.style.overflow = "hidden";
+ }}
+ onAnimationEnd={() => {
+ this.childRef.current!.style.overflow = "visible";
+ if (!this.state.expand)
+ this.childRef.current!.style.display = "none";
+ }}
+ >
+
+
+
+
+
+ {this.state.items.map((item, index) => (
+
+