@babylonjs/shared-ui-components 7.52.1 → 7.52.2
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/textLineComponent.d.ts +1 -0
- package/lines/textLineComponent.js +12 -1
- package/lines/textLineComponent.js.map +1 -1
- package/package.json +1 -1
- package/styleHelper.d.ts +11 -0
- package/styleHelper.js +20 -0
- package/styleHelper.js.map +1 -1
|
@@ -11,6 +11,7 @@ interface ITextLineComponentProps {
|
|
|
11
11
|
icon?: string;
|
|
12
12
|
iconLabel?: string;
|
|
13
13
|
tooltip?: string;
|
|
14
|
+
onCopy?: true | (() => string);
|
|
14
15
|
}
|
|
15
16
|
export declare class TextLineComponent extends React.Component<ITextLineComponentProps> {
|
|
16
17
|
constructor(props: ITextLineComponentProps);
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import * as React from "react";
|
|
3
|
+
import copyIcon from "shared-ui-components/imgs/copy.svg";
|
|
4
|
+
import { copyCommandToClipboard } from "shared-ui-components/copyCommandToClipboard";
|
|
5
|
+
import { MergeClassNames } from "shared-ui-components/styleHelper";
|
|
3
6
|
export class TextLineComponent extends React.Component {
|
|
4
7
|
constructor(props) {
|
|
5
8
|
super(props);
|
|
@@ -24,7 +27,15 @@ export class TextLineComponent extends React.Component {
|
|
|
24
27
|
return (_jsx("div", { className: "value", title: this.props.tooltip ?? this.props.label ?? "", style: { color: this.props.color ? this.props.color : "" }, children: this.props.value || "no name" }));
|
|
25
28
|
}
|
|
26
29
|
render() {
|
|
27
|
-
return (_jsxs("div", { className:
|
|
30
|
+
return (_jsxs("div", { className: MergeClassNames(["textLine", ["underline", this.props.underline], this.props.additionalClass, ["icon", this.props.onCopy]]), children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "label", title: this.props.tooltip ?? this.props.label ?? "", children: this.props.label ?? "" }), this.renderContent(), this.props.onCopy && (_jsx("div", { className: "copy hoverIcon", onClick: () => {
|
|
31
|
+
const onCopy = this.props.onCopy;
|
|
32
|
+
if (onCopy === true && this.props.value !== undefined) {
|
|
33
|
+
copyCommandToClipboard(this.props.value);
|
|
34
|
+
}
|
|
35
|
+
else if (typeof onCopy === "function") {
|
|
36
|
+
copyCommandToClipboard(onCopy());
|
|
37
|
+
}
|
|
38
|
+
}, title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) }))] }));
|
|
28
39
|
}
|
|
29
40
|
}
|
|
30
41
|
//# sourceMappingURL=textLineComponent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/textLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"textLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/textLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport copyIcon from \"shared-ui-components/imgs/copy.svg\";\r\nimport { copyCommandToClipboard } from \"shared-ui-components/copyCommandToClipboard\";\r\nimport { MergeClassNames } from \"shared-ui-components/styleHelper\";\r\n\r\ninterface ITextLineComponentProps {\r\n label?: string;\r\n value?: string;\r\n color?: string;\r\n underline?: boolean;\r\n onLink?: () => void;\r\n url?: string;\r\n ignoreValue?: boolean;\r\n additionalClass?: string;\r\n icon?: string;\r\n iconLabel?: string;\r\n tooltip?: string;\r\n onCopy?: true | (() => string);\r\n}\r\n\r\nexport class TextLineComponent extends React.Component<ITextLineComponentProps> {\r\n constructor(props: ITextLineComponentProps) {\r\n super(props);\r\n }\r\n\r\n onLink() {\r\n if (this.props.url) {\r\n window.open(this.props.url, \"_blank\");\r\n return;\r\n }\r\n if (!this.props.onLink) {\r\n return;\r\n }\r\n\r\n this.props.onLink();\r\n }\r\n\r\n renderContent() {\r\n if (this.props.ignoreValue) {\r\n return null;\r\n }\r\n\r\n if (this.props.onLink || this.props.url) {\r\n return (\r\n <div className=\"link-value\" title={this.props.tooltip ?? this.props.label ?? \"\"} onClick={() => this.onLink()}>\r\n {this.props.url ? \"doc\" : this.props.value || \"no name\"}\r\n </div>\r\n );\r\n }\r\n return (\r\n <div className=\"value\" title={this.props.tooltip ?? this.props.label ?? \"\"} style={{ color: this.props.color ? this.props.color : \"\" }}>\r\n {this.props.value || \"no name\"}\r\n </div>\r\n );\r\n }\r\n\r\n override render() {\r\n return (\r\n <div className={MergeClassNames([\"textLine\", [\"underline\", this.props.underline], this.props.additionalClass, [\"icon\", this.props.onCopy]])}>\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n <div className=\"label\" title={this.props.tooltip ?? this.props.label ?? \"\"}>\r\n {this.props.label ?? \"\"}\r\n </div>\r\n {this.renderContent()}\r\n {this.props.onCopy && (\r\n <div\r\n className=\"copy hoverIcon\"\r\n onClick={() => {\r\n const onCopy = this.props.onCopy;\r\n if (onCopy === true && this.props.value !== undefined) {\r\n copyCommandToClipboard(this.props.value);\r\n } else if (typeof onCopy === \"function\") {\r\n copyCommandToClipboard(onCopy());\r\n }\r\n }}\r\n title=\"Copy to clipboard\"\r\n >\r\n <img src={copyIcon} alt=\"Copy\" />\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
package/package.json
CHANGED
package/styleHelper.d.ts
CHANGED
|
@@ -4,3 +4,14 @@
|
|
|
4
4
|
* @param target document or shadow root to copy styles to
|
|
5
5
|
*/
|
|
6
6
|
export declare function CopyStyles(source: Document, target: DocumentOrShadowRoot): void;
|
|
7
|
+
/**
|
|
8
|
+
* Merges classNames by array of strings or conditions
|
|
9
|
+
* @param classNames Array of className strings or truthy conditions
|
|
10
|
+
* @returns A concatenated string, suitable for the className attribute
|
|
11
|
+
*/
|
|
12
|
+
export declare function MergeClassNames(classNames: ClassNameCondition[]): string;
|
|
13
|
+
/**
|
|
14
|
+
* className (replicating React type) or a tuple with the second member being any truthy value ["className", true]
|
|
15
|
+
*/
|
|
16
|
+
type ClassNameCondition = string | undefined | [string, any];
|
|
17
|
+
export {};
|
package/styleHelper.js
CHANGED
|
@@ -28,4 +28,24 @@ export function CopyStyles(source, target) {
|
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
|
+
/**
|
|
32
|
+
* Merges classNames by array of strings or conditions
|
|
33
|
+
* @param classNames Array of className strings or truthy conditions
|
|
34
|
+
* @returns A concatenated string, suitable for the className attribute
|
|
35
|
+
*/
|
|
36
|
+
export function MergeClassNames(classNames) {
|
|
37
|
+
return classNames
|
|
38
|
+
.reduce((accumulator, className) => {
|
|
39
|
+
if (typeof className === "string") {
|
|
40
|
+
accumulator.push(className);
|
|
41
|
+
}
|
|
42
|
+
else if (className) {
|
|
43
|
+
if (className[1]) {
|
|
44
|
+
accumulator.push(className[0]);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
return accumulator;
|
|
48
|
+
}, [])
|
|
49
|
+
.join(" ");
|
|
50
|
+
}
|
|
31
51
|
//# sourceMappingURL=styleHelper.js.map
|
package/styleHelper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styleHelper.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/styleHelper.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAgB,EAAE,MAA4B;IACrE,4BAA4B;IAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QAC3D,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC/C,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;QACzC,IAAK,MAAmB,CAAC,IAAI,EAAE,CAAC;YAC3B,MAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACpD,CAAC;aAAM,CAAC;YACH,MAAqB,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACjD,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,2CAA2C;IAC3C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC3E,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7C,OAAO,CAAC,GAAG,GAAG,YAAY,CAAC;QAC3B,OAAO,CAAC,IAAI,GAAI,IAAwB,CAAC,IAAI,CAAC;QAC9C,IAAK,MAAmB,CAAC,IAAI,EAAE,CAAC;YAC3B,MAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACnD,CAAC;aAAM,CAAC;YACH,MAAqB,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChD,CAAC;IACL,CAAC,CAAC,CAAC;AACP,CAAC","sourcesContent":["/**\r\n * Copy all styles from a document to another document or shadow root\r\n * @param source document to copy styles from\r\n * @param target document or shadow root to copy styles to\r\n */\r\nexport function CopyStyles(source: Document, target: DocumentOrShadowRoot) {\r\n // Copy all <style> elements\r\n Array.from(source.querySelectorAll(\"style\")).forEach((style) => {\r\n const newStyle = source.createElement(\"style\");\r\n newStyle.textContent = style.textContent;\r\n if ((target as Document).head) {\r\n (target as Document).head.appendChild(newStyle);\r\n } else {\r\n (target as ShadowRoot).appendChild(newStyle);\r\n }\r\n });\r\n\r\n // Copy all <link> elements for stylesheets\r\n Array.from(source.querySelectorAll('link[rel=\"stylesheet\"]')).forEach((link) => {\r\n const newLink = source.createElement(\"link\");\r\n newLink.rel = \"stylesheet\";\r\n newLink.href = (link as HTMLLinkElement).href;\r\n if ((target as Document).head) {\r\n (target as Document).head.appendChild(newLink);\r\n } else {\r\n (target as ShadowRoot).appendChild(newLink);\r\n }\r\n });\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"styleHelper.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/styleHelper.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAgB,EAAE,MAA4B;IACrE,4BAA4B;IAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QAC3D,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC/C,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;QACzC,IAAK,MAAmB,CAAC,IAAI,EAAE,CAAC;YAC3B,MAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACpD,CAAC;aAAM,CAAC;YACH,MAAqB,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACjD,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,2CAA2C;IAC3C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC3E,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7C,OAAO,CAAC,GAAG,GAAG,YAAY,CAAC;QAC3B,OAAO,CAAC,IAAI,GAAI,IAAwB,CAAC,IAAI,CAAC;QAC9C,IAAK,MAAmB,CAAC,IAAI,EAAE,CAAC;YAC3B,MAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACnD,CAAC;aAAM,CAAC;YACH,MAAqB,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChD,CAAC;IACL,CAAC,CAAC,CAAC;AACP,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,UAAgC;IAC5D,OAAO,UAAU;SACZ,MAAM,CAAC,CAAC,WAAqB,EAAE,SAA6B,EAAE,EAAE;QAC7D,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;YAChC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAChC,CAAC;aAAM,IAAI,SAAS,EAAE,CAAC;YACnB,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;gBACf,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;QACL,CAAC;QACD,OAAO,WAAW,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC;SACL,IAAI,CAAC,GAAG,CAAC,CAAC;AACnB,CAAC","sourcesContent":["/**\r\n * Copy all styles from a document to another document or shadow root\r\n * @param source document to copy styles from\r\n * @param target document or shadow root to copy styles to\r\n */\r\nexport function CopyStyles(source: Document, target: DocumentOrShadowRoot) {\r\n // Copy all <style> elements\r\n Array.from(source.querySelectorAll(\"style\")).forEach((style) => {\r\n const newStyle = source.createElement(\"style\");\r\n newStyle.textContent = style.textContent;\r\n if ((target as Document).head) {\r\n (target as Document).head.appendChild(newStyle);\r\n } else {\r\n (target as ShadowRoot).appendChild(newStyle);\r\n }\r\n });\r\n\r\n // Copy all <link> elements for stylesheets\r\n Array.from(source.querySelectorAll('link[rel=\"stylesheet\"]')).forEach((link) => {\r\n const newLink = source.createElement(\"link\");\r\n newLink.rel = \"stylesheet\";\r\n newLink.href = (link as HTMLLinkElement).href;\r\n if ((target as Document).head) {\r\n (target as Document).head.appendChild(newLink);\r\n } else {\r\n (target as ShadowRoot).appendChild(newLink);\r\n }\r\n });\r\n}\r\n\r\n/**\r\n * Merges classNames by array of strings or conditions\r\n * @param classNames Array of className strings or truthy conditions\r\n * @returns A concatenated string, suitable for the className attribute\r\n */\r\nexport function MergeClassNames(classNames: ClassNameCondition[]): string {\r\n return classNames\r\n .reduce((accumulator: string[], className: ClassNameCondition) => {\r\n if (typeof className === \"string\") {\r\n accumulator.push(className);\r\n } else if (className) {\r\n if (className[1]) {\r\n accumulator.push(className[0]);\r\n }\r\n }\r\n return accumulator;\r\n }, [])\r\n .join(\" \");\r\n}\r\n\r\n/**\r\n * className (replicating React type) or a tuple with the second member being any truthy value [\"className\", true]\r\n */\r\ntype ClassNameCondition = string | undefined | [string, any];\r\n"]}
|