@babylonjs/shared-ui-components 7.27.3 → 7.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lines/draggableLineComponent.d.ts +1 -0
- package/lines/draggableLineComponent.js +1 -1
- package/lines/draggableLineComponent.js.map +1 -1
- package/lines/draggableLineWithButtonComponent.d.ts +14 -0
- package/lines/draggableLineWithButtonComponent.js +15 -0
- package/lines/draggableLineWithButtonComponent.js.map +1 -0
- package/lines/lineWithFileButtonComponent.d.ts +21 -0
- package/lines/lineWithFileButtonComponent.js +29 -0
- package/lines/lineWithFileButtonComponent.js.map +1 -0
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ export class DraggableLineComponent extends React.Component {
|
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
8
|
return (_jsx("div", { className: "draggableLine", title: this.props.tooltip, draggable: true, onDragStart: (event) => {
|
|
9
|
-
event.dataTransfer.setData(
|
|
9
|
+
event.dataTransfer.setData(this.props.format, this.props.data);
|
|
10
10
|
}, children: this.props.data.replace("Block", "") }));
|
|
11
11
|
}
|
|
12
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"draggableLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/draggableLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"draggableLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/draggableLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,OAAO,sBAAuB,SAAQ,KAAK,CAAC,SAAoC;IAClF,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAEQ,MAAM;QACX,OAAO,CACH,cACI,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EACzB,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;gBACnB,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACnE,CAAC,YAEA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,GACnC,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\n\r\nexport interface IButtonLineComponentProps {\r\n format: string;\r\n data: string;\r\n tooltip: string;\r\n}\r\n\r\nexport class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {\r\n constructor(props: IButtonLineComponentProps) {\r\n super(props);\r\n }\r\n\r\n override render() {\r\n return (\r\n <div\r\n className=\"draggableLine\"\r\n title={this.props.tooltip}\r\n draggable={true}\r\n onDragStart={(event) => {\r\n event.dataTransfer.setData(this.props.format, this.props.data);\r\n }}\r\n >\r\n {this.props.data.replace(\"Block\", \"\")}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export interface IDraggableLineWithButtonComponent {
|
|
3
|
+
format: string;
|
|
4
|
+
data: string;
|
|
5
|
+
tooltip: string;
|
|
6
|
+
iconImage: any;
|
|
7
|
+
onIconClick: (value: string) => void;
|
|
8
|
+
iconTitle: string;
|
|
9
|
+
lenSuffixToRemove?: number;
|
|
10
|
+
}
|
|
11
|
+
export declare class DraggableLineWithButtonComponent extends React.Component<IDraggableLineWithButtonComponent> {
|
|
12
|
+
constructor(props: IDraggableLineWithButtonComponent);
|
|
13
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
export class DraggableLineWithButtonComponent extends React.Component {
|
|
4
|
+
constructor(props) {
|
|
5
|
+
super(props);
|
|
6
|
+
}
|
|
7
|
+
render() {
|
|
8
|
+
return (_jsxs("div", { className: "draggableLine withButton", title: this.props.tooltip, draggable: true, onDragStart: (event) => {
|
|
9
|
+
event.dataTransfer.setData(this.props.format, this.props.data);
|
|
10
|
+
}, children: [this.props.data.substring(0, this.props.data.length - (this.props.lenSuffixToRemove ?? 6)), _jsx("div", { className: "icon", onClick: () => {
|
|
11
|
+
this.props.onIconClick(this.props.data);
|
|
12
|
+
}, title: this.props.iconTitle, children: _jsx("img", { className: "img", title: this.props.iconTitle, src: this.props.iconImage }) })] }));
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=draggableLineWithButtonComponent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"draggableLineWithButtonComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/draggableLineWithButtonComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,OAAO,gCAAiC,SAAQ,KAAK,CAAC,SAA4C;IACpG,YAAY,KAAwC;QAChD,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAEQ,MAAM;QACX,OAAO,CACH,eACI,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EACzB,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;gBACnB,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACnE,CAAC,aAEA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,CAAC,CAAC,CAAC,EAC3F,cACI,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,GAAG,EAAE;wBACV,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;oBAC5C,CAAC,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,YAE3B,cAAK,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAI,GAC7E,IACJ,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\n\r\nexport interface IDraggableLineWithButtonComponent {\r\n format: string;\r\n data: string;\r\n tooltip: string;\r\n iconImage: any;\r\n onIconClick: (value: string) => void;\r\n iconTitle: string;\r\n lenSuffixToRemove?: number;\r\n}\r\n\r\nexport class DraggableLineWithButtonComponent extends React.Component<IDraggableLineWithButtonComponent> {\r\n constructor(props: IDraggableLineWithButtonComponent) {\r\n super(props);\r\n }\r\n\r\n override render() {\r\n return (\r\n <div\r\n className=\"draggableLine withButton\"\r\n title={this.props.tooltip}\r\n draggable={true}\r\n onDragStart={(event) => {\r\n event.dataTransfer.setData(this.props.format, this.props.data);\r\n }}\r\n >\r\n {this.props.data.substring(0, this.props.data.length - (this.props.lenSuffixToRemove ?? 6))}\r\n <div\r\n className=\"icon\"\r\n onClick={() => {\r\n this.props.onIconClick(this.props.data);\r\n }}\r\n title={this.props.iconTitle}\r\n >\r\n <img className=\"img\" title={this.props.iconTitle} src={this.props.iconImage} />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
interface ILineWithFileButtonComponentProps {
|
|
3
|
+
title: string;
|
|
4
|
+
closed?: boolean;
|
|
5
|
+
multiple?: boolean;
|
|
6
|
+
label: string;
|
|
7
|
+
iconImage: any;
|
|
8
|
+
onIconClick: (file: File) => void;
|
|
9
|
+
accept: string;
|
|
10
|
+
uploadName?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare class LineWithFileButtonComponent extends React.Component<ILineWithFileButtonComponentProps, {
|
|
13
|
+
isExpanded: boolean;
|
|
14
|
+
}> {
|
|
15
|
+
private _uploadRef;
|
|
16
|
+
constructor(props: ILineWithFileButtonComponentProps);
|
|
17
|
+
onChange(evt: any): void;
|
|
18
|
+
switchExpandedState(): void;
|
|
19
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
}
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { DataStorage } from "@babylonjs/core/Misc/dataStorage.js";
|
|
4
|
+
export class LineWithFileButtonComponent extends React.Component {
|
|
5
|
+
constructor(props) {
|
|
6
|
+
super(props);
|
|
7
|
+
const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);
|
|
8
|
+
this.state = { isExpanded: initialState };
|
|
9
|
+
this._uploadRef = React.createRef();
|
|
10
|
+
}
|
|
11
|
+
onChange(evt) {
|
|
12
|
+
const files = evt.target.files;
|
|
13
|
+
if (files && files.length) {
|
|
14
|
+
for (const file of files) {
|
|
15
|
+
this.props.onIconClick(file);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
evt.target.value = "";
|
|
19
|
+
}
|
|
20
|
+
switchExpandedState() {
|
|
21
|
+
const newState = !this.state.isExpanded;
|
|
22
|
+
DataStorage.WriteBoolean(this.props.title, newState);
|
|
23
|
+
this.setState({ isExpanded: newState });
|
|
24
|
+
}
|
|
25
|
+
render() {
|
|
26
|
+
return (_jsxs("div", { className: "nonDraggableLine withButton", children: [this.props.label, _jsx("div", { className: "icon", title: this.props.title, children: _jsx("img", { className: "img", src: this.props.iconImage }) }), _jsxs("div", { className: "buttonLine", title: this.props.title, children: [_jsx("label", { htmlFor: this.props.uploadName ? this.props.uploadName : "file-upload", className: "file-upload" }), _jsx("input", { ref: this._uploadRef, id: this.props.uploadName ? this.props.uploadName : "file-upload", type: "file", multiple: this.props.multiple, accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] })] }));
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=lineWithFileButtonComponent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lineWithFileButtonComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/lineWithFileButtonComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,4CAA8B;AAapD,MAAM,OAAO,2BAA4B,SAAQ,KAAK,CAAC,SAAqE;IAExH,YAAY,KAAwC;QAChD,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,MAAM,YAAY,GAAG,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACnF,IAAI,CAAC,KAAK,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC;QAC1C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IACxC,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE;YACvB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACtB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;aAChC;SACJ;QACD,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,mBAAmB;QACf,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;QACxC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QACrD,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC5C,CAAC;IAEQ,MAAM;QACX,OAAO,CACH,eAAK,SAAS,EAAC,6BAA6B,aACvC,IAAI,CAAC,KAAK,CAAC,KAAK,EACjB,cAAK,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YACzC,cAAK,SAAS,EAAC,KAAK,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAI,GAChD,EACN,eAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aAC/C,gBAAO,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,EAAE,SAAS,EAAC,aAAa,GAAG,EACzG,gBACI,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,EACjE,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GACvC,IACA,IACJ,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { DataStorage } from \"core/Misc/dataStorage\";\r\n\r\ninterface ILineWithFileButtonComponentProps {\r\n title: string;\r\n closed?: boolean;\r\n multiple?: boolean;\r\n label: string;\r\n iconImage: any;\r\n onIconClick: (file: File) => void;\r\n accept: string;\r\n uploadName?: string;\r\n}\r\n\r\nexport class LineWithFileButtonComponent extends React.Component<ILineWithFileButtonComponentProps, { isExpanded: boolean }> {\r\n private _uploadRef: React.RefObject<HTMLInputElement>;\r\n constructor(props: ILineWithFileButtonComponentProps) {\r\n super(props);\r\n\r\n const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);\r\n this.state = { isExpanded: initialState };\r\n this._uploadRef = React.createRef();\r\n }\r\n\r\n onChange(evt: any) {\r\n const files: File[] = evt.target.files;\r\n if (files && files.length) {\r\n for (const file of files) {\r\n this.props.onIconClick(file);\r\n }\r\n }\r\n evt.target.value = \"\";\r\n }\r\n\r\n switchExpandedState(): void {\r\n const newState = !this.state.isExpanded;\r\n DataStorage.WriteBoolean(this.props.title, newState);\r\n this.setState({ isExpanded: newState });\r\n }\r\n\r\n override render() {\r\n return (\r\n <div className=\"nonDraggableLine withButton\">\r\n {this.props.label}\r\n <div className=\"icon\" title={this.props.title}>\r\n <img className=\"img\" src={this.props.iconImage} />\r\n </div>\r\n <div className=\"buttonLine\" title={this.props.title}>\r\n <label htmlFor={this.props.uploadName ? this.props.uploadName : \"file-upload\"} className=\"file-upload\" />\r\n <input\r\n ref={this._uploadRef}\r\n id={this.props.uploadName ? this.props.uploadName : \"file-upload\"}\r\n type=\"file\"\r\n multiple={this.props.multiple}\r\n accept={this.props.accept}\r\n onChange={(evt) => this.onChange(evt)}\r\n />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|