npm - @babylonjs/shared-ui-components - Versions diffs - 8.16.1 → 8.16.3 - Mend

@babylonjs/shared-ui-components 8.16.1 → 8.16.3

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.

Files changed (123) hide show

package/fluent/primitives/syncedSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"syncedSlider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGpD,MAAM,qBAAqB,GAAG,UAAU,CAAC;IACrC,YAAY,EAAE;QACV,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM;QACxC,KAAK,EAAE,MAAM,EAAE,4BAA4B;KAC9C;IACD,MAAM,EAAE;QACJ,QAAQ,EAAE,CAAC,EAAE,kBAAkB;QAC/B,QAAQ,EAAE,MAAM,EAAE,4CAA4C;KACjE;IACD,KAAK,EAAE;QACH,KAAK,EAAE,MAAM,EAAE,sCAAsC;QACrD,UAAU,EAAE,CAAC;KAChB;CACJ,CAAC,CAAC;AAaH;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAyC,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,OAAO,GAAG,qBAAqB,EAAE,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,KAAK,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,eAAe,GAAG,MAAM,CAAS,SAAS,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpC,iGAAiG;IACjG,8FAA8F;IAC9F,8EAA8E;IAC9E,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;IAC3B,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACX,CAAC,aAAa,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,uFAAuF;IAClJ,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,IAAwB,EAAE,EAAE;QACtF,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACnC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEnB,IAAI,KAAK,CAAC,mBAAmB,EAAE,CAAC;YAC5B,8CAA8C;YAC9C,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAC;~~YACnC~~,~~aAAa,~~CAAC~~,OAAO,GAAG,IAAI,CAAC~~;~~QACjC,CAAC;~~aAAM,CAAC;YACJ,kCAAkC;YAClC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC7B,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QAC/B,IAAI,KAAK,CAAC,mBAAmB,IAAI,aAAa,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC9F,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YACxC,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;~~YACpC~~,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;~~QAClC~~,CAAC~~;IACL~~,CAAC~~,CAAC~~;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAsB,EAAE,EAAE;QACjD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACnB,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,mCAAmC;QACjE,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,OAAO,CAAC,YAAY,aAC/B,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,CACnD,KAAC,MAAM,OACC,KAAK,EACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,GAAG,EAAE,GAAG,GAAG,IAAI,EACf,GAAG,EAAE,GAAG,GAAG,IAAI,EACf,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,QAAQ,EAAE,kBAAkB,EAC5B,WAAW,EAAE,qBAAqB,GACpC,CACL,EACD,KAAC,WAAW,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IACnI,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { SliderOnChangeData } from \"@fluentui/react-components\";\r\nimport { makeStyles, Slider, tokens } from \"@fluentui/react-components\";\r\nimport { NumberInput } from \"./input\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState, useRef } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useSyncedSliderStyles = makeStyles({\r\n syncedSlider: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: tokens.spacingHorizontalXXS, // 2px\r\n width: \"100%\", // Only fill available space\r\n },\r\n slider: {\r\n flexGrow: 1, // Let slider grow\r\n minWidth: \"40px\", // Minimum width for slider to remain usable\r\n },\r\n input: {\r\n width: \"40px\", // Fixed width for input - always 40px\r\n flexShrink: 0,\r\n },\r\n});\r\n\r\nexport type SyncedSliderProps = BaseComponentProps<number> & {\r\n /** Minimum value for the slider /\r\n min?: number;\r\n /* Maximum value for the slider /\r\n max?: number;\r\n /* Step size for the slider /\r\n step?: number;\r\n /* When true, onChange is only called when the user releases the slider, not during drag /\r\n notifyOnlyOnRelease?: boolean;\r\n};\r\n\r\n/\r\n Component which synchronizes a slider and an input field, allowing the user to change the value using either control\r\n * @param props\r\n * @returns SyncedSlider component\r\n /\r\nexport const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) => {\r\n const classes = useSyncedSliderStyles();\r\n const [value, setValue] = useState<number>(props.value);\r\n const pendingValueRef = useRef<number>(undefined);\r\n const isDraggingRef = useRef(false);\r\n\r\n // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.\r\n // To avoid this, we scale the min/max based on the step so we can always make step undefined.\r\n // The actual step size in the Fluent slider is 1 when it is ste to undefined.\r\n const min = props.min ?? 0;\r\n const max = props.max ?? 100;\r\n const step = props.step ?? 1;\r\n\r\n useEffect(() => {\r\n !isDraggingRef.current && setValue(props.value ?? \"\"); // Update local state when props.value changes as long as user is not actively dragging\r\n }, [props.value]);\r\n\r\n const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n const newValue = data.value step;\r\n setValue(newValue);\r\n\r\n if (props.notifyOnlyOnRelease) {\r\n // Store the value but don't notify parent yet\r\n pendingValueRef.current = newValue;\r\n ~~isDraggingRef.current = true;\r\n~~ } else {\r\n // Notify parent as slider changes\r\n props.onChange(newValue);\r\n }\r\n };\r\n\r\n const handleSliderPointerUp = () => {\r\n if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {\r\n props.onChange(pendingValueRef.current);\r\n pendingValueRef.current = undefined;\r\n isDraggingRef.current = false;\r\n ~~}\r\n~~ };\r\n\r\n const handleInputChange = (value: string \| number) => {\r\n const newValue = Number(value);\r\n if (!isNaN(newValue)) {\r\n setValue(newValue);\r\n props.onChange(newValue); // Input always updates immediately\r\n }\r\n };\r\n\r\n return (\r\n <div className={classes.syncedSlider}>\r\n {props.min !== undefined && props.max !== undefined && (\r\n <Slider\r\n {...props}\r\n size=\"small\"\r\n className={classes.slider}\r\n min={min / step}\r\n max={max / step}\r\n step={undefined}\r\n value={value / step}\r\n onChange={handleSliderChange}\r\n onPointerUp={handleSliderPointerUp}\r\n />\r\n )}\r\n <NumberInput {...props} className={classes.input} value={Math.round(value / step) * step} onChange={handleInputChange} step={step} />\r\n </div>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"syncedSlider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGpD,MAAM,qBAAqB,GAAG,UAAU,CAAC;IACrC,YAAY,EAAE;QACV,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM;QACxC,KAAK,EAAE,MAAM,EAAE,4BAA4B;KAC9C;IACD,MAAM,EAAE;QACJ,QAAQ,EAAE,CAAC,EAAE,kBAAkB;QAC/B,QAAQ,EAAE,MAAM,EAAE,4CAA4C;KACjE;IACD,KAAK,EAAE;QACH,KAAK,EAAE,MAAM,EAAE,sCAAsC;QACrD,UAAU,EAAE,CAAC;KAChB;CACJ,CAAC,CAAC;AAaH;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAyC,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,OAAO,GAAG,qBAAqB,EAAE,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,KAAK,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,eAAe,GAAG,MAAM,CAAS,SAAS,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpC,iGAAiG;IACjG,8FAA8F;IAC9F,8EAA8E;IAC9E,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;IAC3B,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACX,CAAC,aAAa,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,uFAAuF;IAClJ,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,IAAwB,EAAE,EAAE;QACtF,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACnC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEnB,IAAI,KAAK,CAAC,mBAAmB,EAAE,CAAC;YAC5B,8CAA8C;YAC9C,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAC;QACvC,CAAC;aAAM,CAAC;YACJ,kCAAkC;YAClC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC7B,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACjC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QAC/B,IAAI,KAAK,CAAC,mBAAmB,IAAI,aAAa,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC9F,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YACxC,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;QACxC,CAAC;QACD,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAsB,EAAE,EAAE;QACjD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACnB,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,mCAAmC;QACjE,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,OAAO,CAAC,YAAY,aAC/B,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,CACnD,KAAC,MAAM,OACC,KAAK,EACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,GAAG,EAAE,GAAG,GAAG,IAAI,EACf,GAAG,EAAE,GAAG,GAAG,IAAI,EACf,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,QAAQ,EAAE,kBAAkB,EAC5B,aAAa,EAAE,uBAAuB,EACtC,WAAW,EAAE,qBAAqB,GACpC,CACL,EACD,KAAC,WAAW,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IACnI,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { SliderOnChangeData } from \"@fluentui/react-components\";\r\nimport { makeStyles, Slider, tokens } from \"@fluentui/react-components\";\r\nimport { NumberInput } from \"./input\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState, useRef } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLines/propertyLine\";\r\n\r\nconst useSyncedSliderStyles = makeStyles({\r\n syncedSlider: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: tokens.spacingHorizontalXXS, // 2px\r\n width: \"100%\", // Only fill available space\r\n },\r\n slider: {\r\n flexGrow: 1, // Let slider grow\r\n minWidth: \"40px\", // Minimum width for slider to remain usable\r\n },\r\n input: {\r\n width: \"40px\", // Fixed width for input - always 40px\r\n flexShrink: 0,\r\n },\r\n});\r\n\r\nexport type SyncedSliderProps = BaseComponentProps<number> & {\r\n /** Minimum value for the slider /\r\n min?: number;\r\n /* Maximum value for the slider /\r\n max?: number;\r\n /* Step size for the slider /\r\n step?: number;\r\n /* When true, onChange is only called when the user releases the slider, not during drag /\r\n notifyOnlyOnRelease?: boolean;\r\n};\r\n\r\n/\r\n Component which synchronizes a slider and an input field, allowing the user to change the value using either control\r\n * @param props\r\n * @returns SyncedSlider component\r\n /\r\nexport const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) => {\r\n const classes = useSyncedSliderStyles();\r\n const [value, setValue] = useState<number>(props.value);\r\n const pendingValueRef = useRef<number>(undefined);\r\n const isDraggingRef = useRef(false);\r\n\r\n // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.\r\n // To avoid this, we scale the min/max based on the step so we can always make step undefined.\r\n // The actual step size in the Fluent slider is 1 when it is ste to undefined.\r\n const min = props.min ?? 0;\r\n const max = props.max ?? 100;\r\n const step = props.step ?? 1;\r\n\r\n useEffect(() => {\r\n !isDraggingRef.current && setValue(props.value ?? \"\"); // Update local state when props.value changes as long as user is not actively dragging\r\n }, [props.value]);\r\n\r\n const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n const newValue = data.value step;\r\n setValue(newValue);\r\n\r\n if (props.notifyOnlyOnRelease) {\r\n // Store the value but don't notify parent yet\r\n pendingValueRef.current = newValue;\r\n } else {\r\n // Notify parent as slider changes\r\n props.onChange(newValue);\r\n }\r\n };\r\n\r\n const handleSliderPointerDown = () => {\r\n isDraggingRef.current = true;\r\n };\r\n\r\n const handleSliderPointerUp = () => {\r\n if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {\r\n props.onChange(pendingValueRef.current);\r\n pendingValueRef.current = undefined;\r\n }\r\n isDraggingRef.current = false;\r\n };\r\n\r\n const handleInputChange = (value: string \| number) => {\r\n const newValue = Number(value);\r\n if (!isNaN(newValue)) {\r\n setValue(newValue);\r\n props.onChange(newValue); // Input always updates immediately\r\n }\r\n };\r\n\r\n return (\r\n <div className={classes.syncedSlider}>\r\n {props.min !== undefined && props.max !== undefined && (\r\n <Slider\r\n {...props}\r\n size=\"small\"\r\n className={classes.slider}\r\n min={min / step}\r\n max={max / step}\r\n step={undefined}\r\n value={value / step}\r\n onChange={handleSliderChange}\r\n onPointerDown={handleSliderPointerDown}\r\n onPointerUp={handleSliderPointerUp}\r\n />\r\n )}\r\n <NumberInput {...props} className={classes.input} value={Math.round(value / step) * step} onChange={handleInputChange} step={step} />\r\n </div>\r\n );\r\n};\r\n"]}

package/fluent/primitives/textarea.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { TextareaProps as FluentTextareaProps } from "@fluentui/react-components";
 import type { FunctionComponent } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine.js";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine.js";
 export type TextareaProps = BaseComponentProps<string> & {
     placeholder?: string;
 };

package/fluent/primitives/textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textarea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAIpF,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,QAAQ,EAAE,EAAE;CACf,CAAC,CAAC;AAMH;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,CAAC,KAAuC,EAAE,IAAS,EAAE,EAAE;QACxE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACjB,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,oDAAoD;QACrF,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAyC,EAAE,EAAE;QAChE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YAClB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,qDAAqD;QACjF,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AACxH,CAAC,CAAC","sourcesContent":["import type { TextareaProps as FluentTextareaProps } from \"@fluentui/react-components\";\r\nimport { Textarea as FluentTextarea, makeStyles } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useInputStyles = makeStyles({\r\n textarea: {},\r\n});\r\n\r\nexport type TextareaProps = BaseComponentProps<string> & {\r\n placeholder?: string;\r\n};\r\n\r\n/*\r\n This is a texarea box that stops propagation of change/keydown events\r\n * @param props\r\n * @returns\r\n */\r\nexport const Textarea: FunctionComponent<FluentTextareaProps> = (props) => {\r\n const classes = useInputStyles();\r\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>, data: any) => {\r\n event.stopPropagation(); // Prevent event propagation\r\n if (props.onChange) {\r\n props.onChange(event, data); // Call the original onChange handler passed as prop\r\n }\r\n };\r\n\r\n const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\r\n event.stopPropagation(); // Prevent event propagation\r\n if (props.onKeyDown) {\r\n props.onKeyDown(event); // Call the original onKeyDown handler passed as prop\r\n }\r\n };\r\n\r\n return <FluentTextarea {...props} className={classes.textarea} onChange={handleChange} onKeyDown={handleKeyDown} />;\r\n};\r\n"]}
1	+ {"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textarea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAIpF,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,QAAQ,EAAE,EAAE;CACf,CAAC,CAAC;AAMH;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,CAAC,KAAuC,EAAE,IAAS,EAAE,EAAE;QACxE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACjB,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,oDAAoD;QACrF,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAyC,EAAE,EAAE;QAChE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YAClB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,qDAAqD;QACjF,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AACxH,CAAC,CAAC","sourcesContent":["import type { TextareaProps as FluentTextareaProps } from \"@fluentui/react-components\";\r\nimport { Textarea as FluentTextarea, makeStyles } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLines/propertyLine\";\r\n\r\nconst useInputStyles = makeStyles({\r\n textarea: {},\r\n});\r\n\r\nexport type TextareaProps = BaseComponentProps<string> & {\r\n placeholder?: string;\r\n};\r\n\r\n/*\r\n This is a texarea box that stops propagation of change/keydown events\r\n * @param props\r\n * @returns\r\n */\r\nexport const Textarea: FunctionComponent<FluentTextareaProps> = (props) => {\r\n const classes = useInputStyles();\r\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>, data: any) => {\r\n event.stopPropagation(); // Prevent event propagation\r\n if (props.onChange) {\r\n props.onChange(event, data); // Call the original onChange handler passed as prop\r\n }\r\n };\r\n\r\n const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\r\n event.stopPropagation(); // Prevent event propagation\r\n if (props.onKeyDown) {\r\n props.onKeyDown(event); // Call the original onKeyDown handler passed as prop\r\n }\r\n };\r\n\r\n return <FluentTextarea {...props} className={classes.textarea} onChange={handleChange} onKeyDown={handleKeyDown} />;\r\n};\r\n"]}

package/lines/booleanLineComponent.js CHANGED Viewed

@@ -2,14 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
-import { ReadonlyBooleanLine } from "shared-ui-components/fluent/hoc/readonlyBooleanLine";
+import { BooleanBadgePropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/booleanBadgePropertyLine";
 import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 export class BooleanLineComponent extends React.Component {
     constructor(props) {
         super(props);
     }
     renderFluent() {
-        return _jsx(ReadonlyBooleanLine, { label: this.props.label, value: this.props.value });
+        return _jsx(BooleanBadgePropertyLine, { label: this.props.label, value: this.props.value });
     }
     renderOriginal() {
         const check = this.props.value ? _jsx(FontAwesomeIcon, { icon: faCheck }) : _jsx(FontAwesomeIcon, { icon: faTimesCircle });

package/lines/booleanLineComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"booleanLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/booleanLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,~~mBAAmB~~,EAAE,MAAM,~~qDAAqD~~,CAAC;~~AAC1F~~,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAShF,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAqC;IACjF,YAAY,KAAiC;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IACD,YAAY;QACR,OAAO,KAAC,~~mBAAmB~~,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,CAAC;~~IACrF~~,CAAC;IAED,cAAc;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,GAAI,CAAC;QAC/G,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC;QAErE,OAAO,CACH,eAAK,SAAS,EAAC,UAAU,aACpB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YACzC,IAAI,CAAC,KAAK,CAAC,KAAK,GACf,EACN,cAAK,SAAS,EAAE,SAAS,YAAG,KAAK,GAAO,IACtC,CACT,CAAC;IACN,CAAC;IACQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCheck, faTimesCircle } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { ~~ReadonlyBooleanLine~~ } from \"shared-ui-components/fluent/hoc/~~readonlyBooleanLine~~\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface IBooleanLineComponentProps {\r\n label: string;\r\n value: boolean;\r\n icon?: string;\r\n iconLabel?: string;\r\n}\r\n\r\nexport class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {\r\n constructor(props: IBooleanLineComponentProps) {\r\n super(props);\r\n }\r\n renderFluent() {\r\n return <~~ReadonlyBooleanLine~~ label={this.props.label} value={this.props.value} />;\r\n }\r\n\r\n renderOriginal() {\r\n const check = this.props.value ? <FontAwesomeIcon icon={faCheck} /> : <FontAwesomeIcon icon={faTimesCircle} />;\r\n const className = this.props.value ? \"value check\" : \"value uncheck\";\r\n\r\n return (\r\n <div className=\"textLine\">\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.label}>\r\n {this.props.label}\r\n </div>\r\n <div className={className}>{check}</div>\r\n </div>\r\n );\r\n }\r\n override render() {\r\n return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"booleanLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/booleanLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,wEAAwE,CAAC;AAClH,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAShF,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAqC;IACjF,YAAY,KAAiC;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IACD,YAAY;QACR,OAAO,KAAC,wBAAwB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,CAAC;IAC1F,CAAC;IAED,cAAc;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,GAAI,CAAC;QAC/G,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC;QAErE,OAAO,CACH,eAAK,SAAS,EAAC,UAAU,aACpB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YACzC,IAAI,CAAC,KAAK,CAAC,KAAK,GACf,EACN,cAAK,SAAS,EAAE,SAAS,YAAG,KAAK,GAAO,IACtC,CACT,CAAC;IACN,CAAC;IACQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCheck, faTimesCircle } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { BooleanBadgePropertyLine } from \"shared-ui-components/fluent/hoc/propertyLines/booleanBadgePropertyLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface IBooleanLineComponentProps {\r\n label: string;\r\n value: boolean;\r\n icon?: string;\r\n iconLabel?: string;\r\n}\r\n\r\nexport class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {\r\n constructor(props: IBooleanLineComponentProps) {\r\n super(props);\r\n }\r\n renderFluent() {\r\n return <BooleanBadgePropertyLine label={this.props.label} value={this.props.value} />;\r\n }\r\n\r\n renderOriginal() {\r\n const check = this.props.value ? <FontAwesomeIcon icon={faCheck} /> : <FontAwesomeIcon icon={faTimesCircle} />;\r\n const className = this.props.value ? \"value check\" : \"value uncheck\";\r\n\r\n return (\r\n <div className=\"textLine\">\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.label}>\r\n {this.props.label}\r\n </div>\r\n <div className={className}>{check}</div>\r\n </div>\r\n );\r\n }\r\n override render() {\r\n return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n }\r\n}\r\n"]}

package/lines/buttonLineComponent.js CHANGED Viewed

@@ -7,7 +7,9 @@ export class ButtonLineComponent extends React.Component {
         super(props);
     }
     renderFluent() {
-        return _jsx(ButtonLine, { label: this.props.label, icon: this.props.icon, title: this.props.label, onClick: this.props.onClick, disabled: this.props.isDisabled });
+        // NOTE when callsit replaces usage of this with the ButtonLine, can pass in a true fluent icon
+        const fluentIcon = this.props.icon ? () => _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }) : undefined;
+        return _jsx(ButtonLine, { label: this.props.label, icon: fluentIcon, onClick: this.props.onClick, disabled: this.props.isDisabled });
     }
     renderOriginal() {
         return (_jsxs("div", { className: "buttonLine" + (this.props.isDisabled ? " disabled" : ""), children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("button", { onClick: () => this.props.onClick(), children: this.props.label })] }));

package/lines/buttonLineComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"buttonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/buttonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAU9D,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IAC/E,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,YAAY;QACR,~~OAAO~~,~~KAAC,~~UAAU,~~IAAC~~,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,~~IAAI~~,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAI,CAAC;~~IACjK~~,CAAC;IACD,cAAc;QACV,OAAO,CACH,eAAK,SAAS,EAAE,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,aACpE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,iBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAU,IACtE,CACT,CAAC;IACN,CAAC;IAEQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { ButtonLine } from \"../fluent/hoc/buttonLine\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface IButtonLineComponentProps {\r\n label: string;\r\n onClick: () => void;\r\n icon?: string;\r\n iconLabel?: string;\r\n isDisabled?: boolean;\r\n}\r\n\r\nexport class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {\r\n constructor(props: IButtonLineComponentProps) {\r\n super(props);\r\n }\r\n\r\n renderFluent() {\r\n ~~return~~ <ButtonLine ~~label~~={this.props.~~label}~~ ~~icon~~={this.props.icon} title={this.props.label} onClick={this.props.onClick} disabled={this.props.isDisabled} />;\r\n }\r\n renderOriginal() {\r\n return (\r\n <div className={\"buttonLine\" + (this.props.isDisabled ? \" disabled\" : \"\")}>\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n <button onClick={() => this.props.onClick()}>{this.props.label}</button>\r\n </div>\r\n );\r\n }\r\n\r\n override render() {\r\n return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"buttonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/buttonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAU9D,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IAC/E,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,YAAY;QACR,+FAA+F;QAC/F,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9J,OAAO,KAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAI,CAAC;IACnI,CAAC;IACD,cAAc;QACV,OAAO,CACH,eAAK,SAAS,EAAE,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,aACpE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,iBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAU,IACtE,CACT,CAAC;IACN,CAAC;IAEQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { ButtonLine } from \"../fluent/hoc/buttonLine\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface IButtonLineComponentProps {\r\n label: string;\r\n onClick: () => void;\r\n icon?: string;\r\n iconLabel?: string;\r\n isDisabled?: boolean;\r\n}\r\n\r\nexport class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {\r\n constructor(props: IButtonLineComponentProps) {\r\n super(props);\r\n }\r\n\r\n renderFluent() {\r\n // NOTE when callsit replaces usage of this with the ButtonLine, can pass in a true fluent icon\r\n const fluentIcon = this.props.icon ? () => <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" /> : undefined;\r\n return <ButtonLine label={this.props.label} icon={fluentIcon} onClick={this.props.onClick} disabled={this.props.isDisabled} />;\r\n }\r\n renderOriginal() {\r\n return (\r\n <div className={\"buttonLine\" + (this.props.isDisabled ? \" disabled\" : \"\")}>\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n <button onClick={() => this.props.onClick()}>{this.props.label}</button>\r\n </div>\r\n );\r\n }\r\n\r\n override render() {\r\n return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n }\r\n}\r\n"]}

package/lines/checkBoxLineComponent.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { conflictingValuesPlaceholder } from "./targetsProxy.js";
 import copyIcon from "../imgs/copy.svg";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
-import { SwitchPropertyLine } from "../fluent/hoc/switchPropertyLine.js";
+import { SwitchPropertyLine } from "../fluent/hoc/propertyLines/switchPropertyLine.js";
 import { Checkbox } from "../fluent/primitives/checkbox.js";
 import toggleOnIcon40px from "../imgs/toggleOnIcon_40px.svg";
 import toggleOffIcon40px from "../imgs/toggleOffIcon_40px.svg";

package/lines/checkBoxLineComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkBoxLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"./../propertyChangedEvent\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport type { IconDefinition } from \"@fortawesome/fontawesome-common-types\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\nimport { SwitchPropertyLine } from \"../fluent/hoc/switchPropertyLine\";\r\nimport { Checkbox } from \"../fluent/primitives/checkbox\";\r\n\r\nexport interface ICheckBoxLineComponentProps {\r\n label?: string;\r\n target?: any;\r\n propertyName?: string;\r\n isSelected?: boolean \| (() => boolean);\r\n onSelect?: (value: boolean) => void;\r\n onValueChanged?: () => void;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n disabled?: boolean;\r\n icon?: string;\r\n iconLabel?: string;\r\n faIcons?: { enabled: IconDefinition; disabled: IconDefinition };\r\n large?: boolean;\r\n}\r\n\r\nimport toggleOnIcon40px from \"../imgs/toggleOnIcon_40px.svg\";\r\nimport toggleOffIcon40px from \"../imgs/toggleOffIcon_40px.svg\";\r\nimport toggleOnIcon30px from \"../imgs/toggleOnIcon_30px.svg\";\r\nimport toggleMixedIcon30px from \"../imgs/toggleMixedIcon_30px.svg\";\r\nimport toggleOffIcon30px from \"../imgs/toggleOffIcon_30px.svg\";\r\n\r\nconst Icons = {\r\n size30: {\r\n on: toggleOnIcon30px,\r\n mixed: toggleMixedIcon30px,\r\n off: toggleOffIcon30px,\r\n },\r\n size40: {\r\n on: toggleOnIcon40px,\r\n mixed: \"\", // unneeded\r\n off: toggleOffIcon40px,\r\n },\r\n};\r\n\r\nexport class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean; isDisabled?: boolean; isConflict: boolean }> {\r\n private _localChange = false;\r\n constructor(props: ICheckBoxLineComponentProps) {\r\n super(props);\r\n\r\n if (this.props.isSelected !== undefined) {\r\n this.state = {\r\n isSelected: typeof this.props.isSelected === \"boolean\" ? this.props.isSelected : this.props.isSelected(),\r\n isConflict: false,\r\n };\r\n } else {\r\n this.state = {\r\n isSelected: this.props.target[this.props.propertyName!] === true,\r\n isConflict: this.props.target[this.props.propertyName!] === conflictingValuesPlaceholder,\r\n };\r\n }\r\n\r\n if (this.props.disabled) {\r\n this.state = { ...this.state, isDisabled: this.props.disabled };\r\n }\r\n }\r\n\r\n override shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean; isDisabled: boolean; isConflict: boolean }) {\r\n let selected: boolean;\r\n\r\n if (nextProps.isSelected !== undefined) {\r\n selected = typeof nextProps.isSelected === \"boolean\" ? nextProps.isSelected : nextProps.isSelected();\r\n } else {\r\n selected = nextProps.target[nextProps.propertyName!] === true;\r\n if (nextProps.target[nextProps.propertyName!] === conflictingValuesPlaceholder) {\r\n nextState.isConflict = true;\r\n }\r\n }\r\n\r\n if (selected !== nextState.isSelected \|\| this._localChange) {\r\n nextState.isSelected = selected;\r\n this._localChange = false;\r\n return true;\r\n }\r\n\r\n if (nextProps.disabled !== nextState.isDisabled) {\r\n return true;\r\n }\r\n\r\n return nextProps.label !== this.props.label \|\| nextProps.target !== this.props.target \|\| nextState.isConflict !== this.state.isConflict;\r\n }\r\n\r\n onChange() {\r\n this._localChange = true;\r\n if (this.props.onSelect) {\r\n this.props.onSelect(!this.state.isSelected);\r\n } else {\r\n if (this.props.onPropertyChangedObservable) {\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: this.props.target,\r\n property: this.props.propertyName!,\r\n value: !this.state.isSelected,\r\n initialValue: this.state.isSelected,\r\n });\r\n }\r\n\r\n if (this.props.target && this.props.propertyName) {\r\n this.props.target[this.props.propertyName] = !this.state.isSelected;\r\n }\r\n }\r\n\r\n if (this.props.onValueChanged) {\r\n this.props.onValueChanged();\r\n }\r\n\r\n this.setState({ isSelected: !this.state.isSelected, isConflict: false });\r\n }\r\n\r\n // Copy to clipboard the code this checkbox actually does\r\n // Example : mesh.checkCollisions = true;\r\n onCopyClick() {\r\n if (this.props && this.props.target) {\r\n const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n const targetName = \"globalThis.debugNode\";\r\n const targetProperty = this.props.propertyName;\r\n const value = this.props.target[this.props.propertyName!];\r\n const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n copyCommandToClipboard(strCommand);\r\n } else {\r\n copyCommandToClipboard(\"undefined\");\r\n }\r\n }\r\n\r\n renderOriginal() {\r\n const icons = this.props.large ? Icons.size40 : Icons.size30;\r\n const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;\r\n return (\r\n <div className=\"checkBoxLine\">\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n {this.props.label && (\r\n <div className=\"label\" title={this.props.iconLabel}>\r\n {this.props.label}\r\n </div>\r\n )}\r\n {this.props.faIcons && (\r\n <FontAwesomeIcon\r\n className={`cbx ${this.props.disabled ? \"disabled\" : \"\"}`}\r\n icon={this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled}\r\n onClick={() => !this.props.disabled && this.onChange()}\r\n />\r\n )}\r\n {!this.props.faIcons && (\r\n <div className=\"checkBox\">\r\n <label className={`container lbl${this.props.disabled ? \" disabled\" : \"\"} ${this.state.isSelected ? \"checked\" : \"\"}`}>\r\n <input\r\n type=\"checkbox\"\r\n className={`cbx hidden ${this.state.isConflict ? \"conflict\" : \"\"}`}\r\n checked={this.state.isSelected}\r\n onChange={() => this.onChange()}\r\n disabled={!!this.props.disabled}\r\n />\r\n <img className=\"icon\" src={icon} alt={this.props.label} />\r\n </label>\r\n </div>\r\n )}\r\n <div className=\"copy hoverIcon\" onClick={() => this.onCopyClick()} title=\"Copy to clipboard\">\r\n <img src={copyIcon} alt=\"Copy\" />\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n renderFluent() {\r\n // if faIcons are sent (to mimic a checkbox) use fluent checkbox\r\n if (this.props.faIcons) {\r\n return <Checkbox disabled={this.props.disabled} value={this.state.isSelected} onChange={() => !this.props.disabled && this.onChange()} />;\r\n }\r\n return <SwitchPropertyLine label={this.props.label \|\| \"\"} value={this.state.isSelected} onChange={() => this.onChange()} disabled={!!this.props.disabled} />;\r\n }\r\n\r\n override render() {\r\n return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"checkBoxLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"./../propertyChangedEvent\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport type { IconDefinition } from \"@fortawesome/fontawesome-common-types\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\nimport { SwitchPropertyLine } from \"../fluent/hoc/propertyLines/switchPropertyLine\";\r\nimport { Checkbox } from \"../fluent/primitives/checkbox\";\r\n\r\nexport interface ICheckBoxLineComponentProps {\r\n label?: string;\r\n target?: any;\r\n propertyName?: string;\r\n isSelected?: boolean \| (() => boolean);\r\n onSelect?: (value: boolean) => void;\r\n onValueChanged?: () => void;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n disabled?: boolean;\r\n icon?: string;\r\n iconLabel?: string;\r\n faIcons?: { enabled: IconDefinition; disabled: IconDefinition };\r\n large?: boolean;\r\n}\r\n\r\nimport toggleOnIcon40px from \"../imgs/toggleOnIcon_40px.svg\";\r\nimport toggleOffIcon40px from \"../imgs/toggleOffIcon_40px.svg\";\r\nimport toggleOnIcon30px from \"../imgs/toggleOnIcon_30px.svg\";\r\nimport toggleMixedIcon30px from \"../imgs/toggleMixedIcon_30px.svg\";\r\nimport toggleOffIcon30px from \"../imgs/toggleOffIcon_30px.svg\";\r\n\r\nconst Icons = {\r\n size30: {\r\n on: toggleOnIcon30px,\r\n mixed: toggleMixedIcon30px,\r\n off: toggleOffIcon30px,\r\n },\r\n size40: {\r\n on: toggleOnIcon40px,\r\n mixed: \"\", // unneeded\r\n off: toggleOffIcon40px,\r\n },\r\n};\r\n\r\nexport class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean; isDisabled?: boolean; isConflict: boolean }> {\r\n private _localChange = false;\r\n constructor(props: ICheckBoxLineComponentProps) {\r\n super(props);\r\n\r\n if (this.props.isSelected !== undefined) {\r\n this.state = {\r\n isSelected: typeof this.props.isSelected === \"boolean\" ? this.props.isSelected : this.props.isSelected(),\r\n isConflict: false,\r\n };\r\n } else {\r\n this.state = {\r\n isSelected: this.props.target[this.props.propertyName!] === true,\r\n isConflict: this.props.target[this.props.propertyName!] === conflictingValuesPlaceholder,\r\n };\r\n }\r\n\r\n if (this.props.disabled) {\r\n this.state = { ...this.state, isDisabled: this.props.disabled };\r\n }\r\n }\r\n\r\n override shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean; isDisabled: boolean; isConflict: boolean }) {\r\n let selected: boolean;\r\n\r\n if (nextProps.isSelected !== undefined) {\r\n selected = typeof nextProps.isSelected === \"boolean\" ? nextProps.isSelected : nextProps.isSelected();\r\n } else {\r\n selected = nextProps.target[nextProps.propertyName!] === true;\r\n if (nextProps.target[nextProps.propertyName!] === conflictingValuesPlaceholder) {\r\n nextState.isConflict = true;\r\n }\r\n }\r\n\r\n if (selected !== nextState.isSelected \|\| this._localChange) {\r\n nextState.isSelected = selected;\r\n this._localChange = false;\r\n return true;\r\n }\r\n\r\n if (nextProps.disabled !== nextState.isDisabled) {\r\n return true;\r\n }\r\n\r\n return nextProps.label !== this.props.label \|\| nextProps.target !== this.props.target \|\| nextState.isConflict !== this.state.isConflict;\r\n }\r\n\r\n onChange() {\r\n this._localChange = true;\r\n if (this.props.onSelect) {\r\n this.props.onSelect(!this.state.isSelected);\r\n } else {\r\n if (this.props.onPropertyChangedObservable) {\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: this.props.target,\r\n property: this.props.propertyName!,\r\n value: !this.state.isSelected,\r\n initialValue: this.state.isSelected,\r\n });\r\n }\r\n\r\n if (this.props.target && this.props.propertyName) {\r\n this.props.target[this.props.propertyName] = !this.state.isSelected;\r\n }\r\n }\r\n\r\n if (this.props.onValueChanged) {\r\n this.props.onValueChanged();\r\n }\r\n\r\n this.setState({ isSelected: !this.state.isSelected, isConflict: false });\r\n }\r\n\r\n // Copy to clipboard the code this checkbox actually does\r\n // Example : mesh.checkCollisions = true;\r\n onCopyClick() {\r\n if (this.props && this.props.target) {\r\n const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n const targetName = \"globalThis.debugNode\";\r\n const targetProperty = this.props.propertyName;\r\n const value = this.props.target[this.props.propertyName!];\r\n const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n copyCommandToClipboard(strCommand);\r\n } else {\r\n copyCommandToClipboard(\"undefined\");\r\n }\r\n }\r\n\r\n renderOriginal() {\r\n const icons = this.props.large ? Icons.size40 : Icons.size30;\r\n const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;\r\n return (\r\n <div className=\"checkBoxLine\">\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n {this.props.label && (\r\n <div className=\"label\" title={this.props.iconLabel}>\r\n {this.props.label}\r\n </div>\r\n )}\r\n {this.props.faIcons && (\r\n <FontAwesomeIcon\r\n className={`cbx ${this.props.disabled ? \"disabled\" : \"\"}`}\r\n icon={this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled}\r\n onClick={() => !this.props.disabled && this.onChange()}\r\n />\r\n )}\r\n {!this.props.faIcons && (\r\n <div className=\"checkBox\">\r\n <label className={`container lbl${this.props.disabled ? \" disabled\" : \"\"} ${this.state.isSelected ? \"checked\" : \"\"}`}>\r\n <input\r\n type=\"checkbox\"\r\n className={`cbx hidden ${this.state.isConflict ? \"conflict\" : \"\"}`}\r\n checked={this.state.isSelected}\r\n onChange={() => this.onChange()}\r\n disabled={!!this.props.disabled}\r\n />\r\n <img className=\"icon\" src={icon} alt={this.props.label} />\r\n </label>\r\n </div>\r\n )}\r\n <div className=\"copy hoverIcon\" onClick={() => this.onCopyClick()} title=\"Copy to clipboard\">\r\n <img src={copyIcon} alt=\"Copy\" />\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n renderFluent() {\r\n // if faIcons are sent (to mimic a checkbox) use fluent checkbox\r\n if (this.props.faIcons) {\r\n return <Checkbox disabled={this.props.disabled} value={this.state.isSelected} onChange={() => !this.props.disabled && this.onChange()} />;\r\n }\r\n return <SwitchPropertyLine label={this.props.label \|\| \"\"} value={this.state.isSelected} onChange={() => this.onChange()} disabled={!!this.props.disabled} />;\r\n }\r\n\r\n override render() {\r\n return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n }\r\n}\r\n"]}

package/lines/colorLineComponent.js CHANGED Viewed

@@ -8,8 +8,8 @@ import { copyCommandToClipboard, getClassNameWithNamespace } from "../copyComman
 import { ColorPickerLine } from "./colorPickerComponent.js";
 import { conflictingValuesPlaceholder } from "./targetsProxy.js";
 import copyIcon from "../imgs/copy.svg";
-import { Color3PropertyLine, Color4PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
-import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
+import { Color3PropertyLine, Color4PropertyLine } from "../fluent/hoc/propertyLines/colorPropertyLine.js";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
 const EmptyColor = new Color4(0, 0, 0, 0);
 export class ColorLine extends React.Component {
     constructor(props) {

package/lines/colorLineComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colorLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/colorLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { NumericInput } from \"./numericInputComponent\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport { ColorPickerLine } from \"./colorPickerComponent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { Color3PropertyLine, Color4PropertyLine } from \"shared-ui-components/fluent/hoc/colorPropertyLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\nconst EmptyColor = new Color4(0, 0, 0, 0);\r\n\r\nexport interface IColorLineProps {\r\n label: string;\r\n target?: any;\r\n propertyName: string;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n onChange?: () => void;\r\n isLinear?: boolean;\r\n icon?: string;\r\n iconLabel?: string;\r\n disableAlpha?: boolean;\r\n lockObject: LockObject;\r\n}\r\n\r\ninterface IColorLineComponentState {\r\n isExpanded: boolean;\r\n color: Color4;\r\n}\r\n\r\nexport class ColorLine extends React.Component<IColorLineProps, IColorLineComponentState> {\r\n constructor(props: IColorLineProps) {\r\n super(props);\r\n\r\n this.state = { isExpanded: false, color: this.getValue() };\r\n\r\n const target = this.props.target;\r\n target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate\r\n }\r\n\r\n override shouldComponentUpdate(nextProps: IColorLineProps, nextState: IColorLineComponentState) {\r\n const stateColor = nextState.color;\r\n const propsColor = this.getValue(nextProps);\r\n if (stateColor !== this.state.color) {\r\n nextState.color = stateColor;\r\n return true;\r\n }\r\n if (propsColor !== this.state.color) {\r\n nextState.color = propsColor;\r\n return true;\r\n }\r\n if (nextState.isExpanded !== this.state.isExpanded) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n getValue(props = this.props): Color4 {\r\n const target = props.target;\r\n const property = target[props.propertyName];\r\n if (!property) {\r\n return EmptyColor;\r\n }\r\n if (typeof property === \"string\") {\r\n if (property === conflictingValuesPlaceholder) {\r\n return EmptyColor;\r\n }\r\n return this._convertToColor(property);\r\n } else {\r\n if (props.isLinear) {\r\n return property.toGammaSpace();\r\n }\r\n return property.clone();\r\n }\r\n }\r\n\r\n setColorFromString(colorString: string) {\r\n const color = this._convertToColor(colorString);\r\n this.setColor(color);\r\n }\r\n\r\n setColor(newColor: Color4) {\r\n if (newColor.equals(this.state.color)) {\r\n return;\r\n }\r\n this.setState({ color: newColor.clone() });\r\n if (this.props.isLinear) {\r\n newColor.toLinearSpaceToRef(newColor);\r\n }\r\n // whether to set properties to color3 or color4\r\n const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;\r\n\r\n const target = this.props.target;\r\n const initialValue = target[this.props.propertyName];\r\n const value = typeof target[this.props.propertyName] === \"string\" ? setColor.toHexString() : setColor;\r\n // make the change\r\n target[this.props.propertyName] = value;\r\n // notify observers\r\n if (this.props.onPropertyChangedObservable) {\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: target,\r\n property: this.props.propertyName,\r\n value,\r\n initialValue,\r\n });\r\n }\r\n\r\n if (this.props.onChange) {\r\n this.props.onChange();\r\n }\r\n }\r\n\r\n switchExpandState() {\r\n this.setState({ isExpanded: !this.state.isExpanded });\r\n }\r\n\r\n updateStateR(value: number) {\r\n this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));\r\n }\r\n\r\n updateStateG(value: number) {\r\n this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));\r\n }\r\n\r\n updateStateB(value: number) {\r\n this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));\r\n }\r\n\r\n updateStateA(value: number) {\r\n if (this.props.disableAlpha) {\r\n return;\r\n }\r\n this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));\r\n }\r\n\r\n private _convertToColor(color: string): Color4 {\r\n if (color === \"\" \|\| color === \"transparent\") {\r\n return EmptyColor;\r\n }\r\n\r\n if (color.substring(0, 1) !== \"#\" \|\| (color.length !== 7 && color.length !== 9)) {\r\n const d = document.createElement(\"div\");\r\n d.style.color = color;\r\n document.body.append(d);\r\n const rgb = window.getComputedStyle(d).color;\r\n document.body.removeChild(d);\r\n\r\n const rgbArray = rgb\r\n .substring(4, rgb.length - 1)\r\n .replace(/ /g, \"\")\r\n .split(\",\");\r\n\r\n const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;\r\n\r\n return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);\r\n }\r\n\r\n if (this.props.disableAlpha) {\r\n const color3 = Color3.FromHexString(color);\r\n return new Color4(color3.r, color3.g, color3.b, 1.0);\r\n }\r\n\r\n return Color4.FromHexString(color);\r\n }\r\n\r\n private _toColor3(color: Color4) {\r\n return new Color3(color.r, color.g, color.b);\r\n }\r\n\r\n // Copy to clipboard the code this Color3 actually does\r\n // Example : material.diffuseColor = new BABYLON.Vector3(0,1,0);\r\n onCopyClick() {\r\n if (this.props && this.props.target) {\r\n const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n const targetName = \"globalThis.debugNode\";\r\n const targetProperty = this.props.propertyName;\r\n const value = this.props.target[this.props.propertyName];\r\n const hex = this.state.color.toHexString();\r\n let strColor;\r\n if (value.a) {\r\n strColor = \"new \" + babylonNamespace + \"Color4(\" + value.r + \", \" + value.g + \", \" + value.b + \", \" + value.a + \")\";\r\n } else {\r\n strColor = \"new \" + babylonNamespace + \"Color3(\" + value.r + \", \" + value.g + \", \" + value.b + \")\";\r\n }\r\n strColor += \";// (HEX : \" + hex;\r\n const strCommand = targetName + \".\" + targetProperty + \" = \" + strColor + \" , debugNode as \" + babylonNamespace + className + \")\";\r\n copyCommandToClipboard(strCommand);\r\n } else {\r\n copyCommandToClipboard(\"undefined\");\r\n }\r\n }\r\n\r\n renderFluent() {\r\n if (this.props.disableAlpha) {\r\n return (\r\n <Color3PropertyLine\r\n label={this.props.label}\r\n value={this._toColor3(this.state.color)}\r\n isLinearMode={this.props.isLinear}\r\n onChange={(color) => this.setColorFromString(color.toHexString())}\r\n />\r\n );\r\n } else {\r\n return (\r\n <Color4PropertyLine\r\n label={this.props.label}\r\n value={this.state.color}\r\n isLinearMode={this.props.isLinear}\r\n onChange={(color) => this.setColorFromString(color.toHexString())}\r\n />\r\n );\r\n }\r\n }\r\n\r\n renderOriginal() {\r\n const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;\r\n\r\n return (\r\n <div className=\"color3Line\">\r\n <div className=\"firstLine\">\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.label}>\r\n {this.props.label}\r\n </div>\r\n <div className=\"color3\">\r\n <ColorPickerLine\r\n lockObject={this.props.lockObject}\r\n linearHint={this.props.isLinear}\r\n value={this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color}\r\n onColorChanged={(colorString) => {\r\n this.setColorFromString(colorString);\r\n }}\r\n />\r\n </div>\r\n <div className=\"expand hoverIcon\" onClick={() => this.switchExpandState()} title=\"Expand\">\r\n {chevron}\r\n </div>\r\n <div className=\"copy hoverIcon\" onClick={() => this.onCopyClick()} title=\"Copy to clipboard\">\r\n <img src={copyIcon} alt=\"Copy\" />\r\n </div>\r\n </div>\r\n {this.state.isExpanded && (\r\n <div className=\"secondLine\">\r\n <NumericInput\r\n lockObject={this.props.lockObject}\r\n label=\"r\"\r\n labelTooltip=\"Red\"\r\n value={this.state.color.r}\r\n step={0.1}\r\n onChange={(value) => this.updateStateR(value)}\r\n />\r\n <NumericInput\r\n lockObject={this.props.lockObject}\r\n label=\"g\"\r\n labelTooltip=\"Green\"\r\n value={this.state.color.g}\r\n step={0.1}\r\n onChange={(value) => this.updateStateG(value)}\r\n />\r\n <NumericInput\r\n lockObject={this.props.lockObject}\r\n label=\"b\"\r\n labelTooltip=\"Blue\"\r\n value={this.state.color.b}\r\n step={0.1}\r\n onChange={(value) => this.updateStateB(value)}\r\n />\r\n {this.props.disableAlpha \|\| (\r\n <NumericInput\r\n lockObject={this.props.lockObject}\r\n label=\"a\"\r\n labelTooltip=\"Alpha\"\r\n value={this.state.color.a}\r\n step={0.1}\r\n onChange={(value) => this.updateStateA(value)}\r\n />\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n\r\n override render() {\r\n return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"colorLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/colorLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { NumericInput } from \"./numericInputComponent\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport { ColorPickerLine } from \"./colorPickerComponent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { Color3PropertyLine, Color4PropertyLine } from \"../fluent/hoc/propertyLines/colorPropertyLine\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\nconst EmptyColor = new Color4(0, 0, 0, 0);\r\n\r\nexport interface IColorLineProps {\r\n label: string;\r\n target?: any;\r\n propertyName: string;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n onChange?: () => void;\r\n isLinear?: boolean;\r\n icon?: string;\r\n iconLabel?: string;\r\n disableAlpha?: boolean;\r\n lockObject: LockObject;\r\n}\r\n\r\ninterface IColorLineComponentState {\r\n isExpanded: boolean;\r\n color: Color4;\r\n}\r\n\r\nexport class ColorLine extends React.Component<IColorLineProps, IColorLineComponentState> {\r\n constructor(props: IColorLineProps) {\r\n super(props);\r\n\r\n this.state = { isExpanded: false, color: this.getValue() };\r\n\r\n const target = this.props.target;\r\n target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate\r\n }\r\n\r\n override shouldComponentUpdate(nextProps: IColorLineProps, nextState: IColorLineComponentState) {\r\n const stateColor = nextState.color;\r\n const propsColor = this.getValue(nextProps);\r\n if (stateColor !== this.state.color) {\r\n nextState.color = stateColor;\r\n return true;\r\n }\r\n if (propsColor !== this.state.color) {\r\n nextState.color = propsColor;\r\n return true;\r\n }\r\n if (nextState.isExpanded !== this.state.isExpanded) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n getValue(props = this.props): Color4 {\r\n const target = props.target;\r\n const property = target[props.propertyName];\r\n if (!property) {\r\n return EmptyColor;\r\n }\r\n if (typeof property === \"string\") {\r\n if (property === conflictingValuesPlaceholder) {\r\n return EmptyColor;\r\n }\r\n return this._convertToColor(property);\r\n } else {\r\n if (props.isLinear) {\r\n return property.toGammaSpace();\r\n }\r\n return property.clone();\r\n }\r\n }\r\n\r\n setColorFromString(colorString: string) {\r\n const color = this._convertToColor(colorString);\r\n this.setColor(color);\r\n }\r\n\r\n setColor(newColor: Color4) {\r\n if (newColor.equals(this.state.color)) {\r\n return;\r\n }\r\n this.setState({ color: newColor.clone() });\r\n if (this.props.isLinear) {\r\n newColor.toLinearSpaceToRef(newColor);\r\n }\r\n // whether to set properties to color3 or color4\r\n const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;\r\n\r\n const target = this.props.target;\r\n const initialValue = target[this.props.propertyName];\r\n const value = typeof target[this.props.propertyName] === \"string\" ? setColor.toHexString() : setColor;\r\n // make the change\r\n target[this.props.propertyName] = value;\r\n // notify observers\r\n if (this.props.onPropertyChangedObservable) {\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: target,\r\n property: this.props.propertyName,\r\n value,\r\n initialValue,\r\n });\r\n }\r\n\r\n if (this.props.onChange) {\r\n this.props.onChange();\r\n }\r\n }\r\n\r\n switchExpandState() {\r\n this.setState({ isExpanded: !this.state.isExpanded });\r\n }\r\n\r\n updateStateR(value: number) {\r\n this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));\r\n }\r\n\r\n updateStateG(value: number) {\r\n this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));\r\n }\r\n\r\n updateStateB(value: number) {\r\n this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));\r\n }\r\n\r\n updateStateA(value: number) {\r\n if (this.props.disableAlpha) {\r\n return;\r\n }\r\n this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));\r\n }\r\n\r\n private _convertToColor(color: string): Color4 {\r\n if (color === \"\" \|\| color === \"transparent\") {\r\n return EmptyColor;\r\n }\r\n\r\n if (color.substring(0, 1) !== \"#\" \|\| (color.length !== 7 && color.length !== 9)) {\r\n const d = document.createElement(\"div\");\r\n d.style.color = color;\r\n document.body.append(d);\r\n const rgb = window.getComputedStyle(d).color;\r\n document.body.removeChild(d);\r\n\r\n const rgbArray = rgb\r\n .substring(4, rgb.length - 1)\r\n .replace(/ /g, \"\")\r\n .split(\",\");\r\n\r\n const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;\r\n\r\n return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);\r\n }\r\n\r\n if (this.props.disableAlpha) {\r\n const color3 = Color3.FromHexString(color);\r\n return new Color4(color3.r, color3.g, color3.b, 1.0);\r\n }\r\n\r\n return Color4.FromHexString(color);\r\n }\r\n\r\n private _toColor3(color: Color4) {\r\n return new Color3(color.r, color.g, color.b);\r\n }\r\n\r\n // Copy to clipboard the code this Color3 actually does\r\n // Example : material.diffuseColor = new BABYLON.Vector3(0,1,0);\r\n onCopyClick() {\r\n if (this.props && this.props.target) {\r\n const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n const targetName = \"globalThis.debugNode\";\r\n const targetProperty = this.props.propertyName;\r\n const value = this.props.target[this.props.propertyName];\r\n const hex = this.state.color.toHexString();\r\n let strColor;\r\n if (value.a) {\r\n strColor = \"new \" + babylonNamespace + \"Color4(\" + value.r + \", \" + value.g + \", \" + value.b + \", \" + value.a + \")\";\r\n } else {\r\n strColor = \"new \" + babylonNamespace + \"Color3(\" + value.r + \", \" + value.g + \", \" + value.b + \")\";\r\n }\r\n strColor += \";// (HEX : \" + hex;\r\n const strCommand = targetName + \".\" + targetProperty + \" = \" + strColor + \" , debugNode as \" + babylonNamespace + className + \")\";\r\n copyCommandToClipboard(strCommand);\r\n } else {\r\n copyCommandToClipboard(\"undefined\");\r\n }\r\n }\r\n\r\n renderFluent() {\r\n if (this.props.disableAlpha) {\r\n return (\r\n <Color3PropertyLine\r\n label={this.props.label}\r\n value={this._toColor3(this.state.color)}\r\n isLinearMode={this.props.isLinear}\r\n onChange={(color) => this.setColorFromString(color.toHexString())}\r\n />\r\n );\r\n } else {\r\n return (\r\n <Color4PropertyLine\r\n label={this.props.label}\r\n value={this.state.color}\r\n isLinearMode={this.props.isLinear}\r\n onChange={(color) => this.setColorFromString(color.toHexString())}\r\n />\r\n );\r\n }\r\n }\r\n\r\n renderOriginal() {\r\n const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;\r\n\r\n return (\r\n <div className=\"color3Line\">\r\n <div className=\"firstLine\">\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.label}>\r\n {this.props.label}\r\n </div>\r\n <div className=\"color3\">\r\n <ColorPickerLine\r\n lockObject={this.props.lockObject}\r\n linearHint={this.props.isLinear}\r\n value={this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color}\r\n onColorChanged={(colorString) => {\r\n this.setColorFromString(colorString);\r\n }}\r\n />\r\n </div>\r\n <div className=\"expand hoverIcon\" onClick={() => this.switchExpandState()} title=\"Expand\">\r\n {chevron}\r\n </div>\r\n <div className=\"copy hoverIcon\" onClick={() => this.onCopyClick()} title=\"Copy to clipboard\">\r\n <img src={copyIcon} alt=\"Copy\" />\r\n </div>\r\n </div>\r\n {this.state.isExpanded && (\r\n <div className=\"secondLine\">\r\n <NumericInput\r\n lockObject={this.props.lockObject}\r\n label=\"r\"\r\n labelTooltip=\"Red\"\r\n value={this.state.color.r}\r\n step={0.1}\r\n onChange={(value) => this.updateStateR(value)}\r\n />\r\n <NumericInput\r\n lockObject={this.props.lockObject}\r\n label=\"g\"\r\n labelTooltip=\"Green\"\r\n value={this.state.color.g}\r\n step={0.1}\r\n onChange={(value) => this.updateStateG(value)}\r\n />\r\n <NumericInput\r\n lockObject={this.props.lockObject}\r\n label=\"b\"\r\n labelTooltip=\"Blue\"\r\n value={this.state.color.b}\r\n step={0.1}\r\n onChange={(value) => this.updateStateB(value)}\r\n />\r\n {this.props.disableAlpha \|\| (\r\n <NumericInput\r\n lockObject={this.props.lockObject}\r\n label=\"a\"\r\n labelTooltip=\"Alpha\"\r\n value={this.state.color.a}\r\n step={0.1}\r\n onChange={(value) => this.updateStateA(value)}\r\n />\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n\r\n override render() {\r\n return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n }\r\n}\r\n"]}

package/lines/draggableLineComponent.d.ts CHANGED Viewed

@@ -1,10 +1,4 @@
-import * as React from "react";
-export interface IButtonLineComponentProps {
-    format: string;
-    data: string;
-    tooltip: string;
-}
-export declare class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
-    constructor(props: IButtonLineComponentProps);
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+import type { DraggableLineProps } from "../fluent/primitives/draggable.js";
+type DraggableLineComponentProps = Omit<DraggableLineProps, "label">;
+export declare const DraggableLineComponent: React.FunctionComponent<DraggableLineComponentProps>;
+export {};

package/lines/draggableLineComponent.js CHANGED Viewed

@@ -1,13 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-export class DraggableLineComponent extends React.Component {
-    constructor(props) {
-        super(props);
+import { useContext } from "react";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
+import { DraggableLine } from "../fluent/primitives/draggable.js";
+export const DraggableLineComponent = (props) => {
+    const { useFluent } = useContext(ToolContext);
+    if (useFluent) {
+        // When updating the callsites to use fluent directly this label will be clearer since the string replace occurs where the Block_Foo lives where the Block name is
+        return _jsx(DraggableLine, { ...props, label: props.data.replace("Block", "") });
     }
-    render() {
-        return (_jsx("div", { className: "draggableLine", title: this.props.tooltip, draggable: true, onDragStart: (event) => {
-                event.dataTransfer.setData(this.props.format, this.props.data);
-            }, children: this.props.data.replace("Block", "") }));
-    }
-}
+    return (_jsx("div", { className: "draggableLine", title: props.tooltip, draggable: true, onDragStart: (event) => {
+            event.dataTransfer.setData(props.format, props.data);
+        }, children: props.data.replace("Block", "") }));
+};
 //# sourceMappingURL=draggableLineComponent.js.map

package/lines/draggableLineComponent.js.map CHANGED Viewed

	@@ -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;~~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~~"]}
1	+ {"version":3,"file":"draggableLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/draggableLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAI/D,MAAM,CAAC,MAAM,sBAAsB,GAAyD,CAAC,KAAK,EAAE,EAAE;IAClG,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC9C,IAAI,SAAS,EAAE,CAAC;QACZ,kKAAkK;QAClK,OAAO,KAAC,aAAa,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,GAAI,CAAC;IAChF,CAAC;IACD,OAAO,CACH,cACI,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE,KAAK,CAAC,OAAO,EACpB,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACzD,CAAC,YAEA,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,GAC9B,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useContext } from \"react\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\nimport { DraggableLine } from \"../fluent/primitives/draggable\";\r\nimport type { DraggableLineProps } from \"../fluent/primitives/draggable\";\r\n\r\ntype DraggableLineComponentProps = Omit<DraggableLineProps, \"label\">;\r\nexport const DraggableLineComponent: React.FunctionComponent<DraggableLineComponentProps> = (props) => {\r\n const { useFluent } = useContext(ToolContext);\r\n if (useFluent) {\r\n // When updating the callsites to use fluent directly this label will be clearer since the string replace occurs where the Block_Foo lives where the Block name is\r\n return <DraggableLine {...props} label={props.data.replace(\"Block\", \"\")} />;\r\n }\r\n return (\r\n <div\r\n className=\"draggableLine\"\r\n title={props.tooltip}\r\n draggable={true}\r\n onDragStart={(event) => {\r\n event.dataTransfer.setData(props.format, props.data);\r\n }}\r\n >\r\n {props.data.replace(\"Block\", \"\")}\r\n </div>\r\n );\r\n};\r\n"]}

package/lines/draggableLineWithButtonComponent.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
-import * as React from "react";
-export interface IDraggableLineWithButtonComponent {
+export type DraggableLineWithButtonProps = {
     format: string;
     data: string;
     tooltip: string;
@@ -7,8 +6,5 @@ export interface IDraggableLineWithButtonComponent {
     onIconClick: (value: string) => void;
     iconTitle: string;
     lenSuffixToRemove?: number;
-}
-export declare class DraggableLineWithButtonComponent extends React.Component<IDraggableLineWithButtonComponent> {
-    constructor(props: IDraggableLineWithButtonComponent);
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+};
+export declare const DraggableLineWithButtonComponent: React.FunctionComponent<DraggableLineWithButtonProps>;

package/lines/draggableLineWithButtonComponent.js CHANGED Viewed

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-export class DraggableLineWithButtonComponent extends React.Component {
-    constructor(props) {
-        super(props);
+import { useContext } from "react";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
+import { DraggableLine } from "../fluent/primitives/draggable.js";
+export const DraggableLineWithButtonComponent = (props) => {
+    const { useFluent } = useContext(ToolContext);
+    if (useFluent) {
+        // When updating the callsites to use fluent directly this label will be clearer since the string replace occurs where the data string lives
+        return _jsx(DraggableLine, { ...props, label: props.data.substring(0, props.data.length - (props.lenSuffixToRemove ?? 6)), onDelete: () => props.onIconClick(props.data) });
     }
-    render() {
-        return (_jsxs("div", { className: "draggableLine withButton", title: this.props.tooltip, draggable: true, onDragStart: (event) => {
-                event.dataTransfer.setData(this.props.format, this.props.data);
-            }, children: [this.props.data.substring(0, this.props.data.length - (this.props.lenSuffixToRemove ?? 6)), _jsx("div", { className: "icon", onClick: () => {
-                        this.props.onIconClick(this.props.data);
-                    }, title: this.props.iconTitle, children: _jsx("img", { className: "img", title: this.props.iconTitle, src: this.props.iconImage }) })] }));
-    }
-}
+    return (_jsxs("div", { className: "draggableLine withButton", title: props.tooltip, draggable: true, onDragStart: (event) => {
+            event.dataTransfer.setData(props.format, props.data);
+        }, children: [props.data.substring(0, props.data.length - (props.lenSuffixToRemove ?? 6)), _jsx("div", { className: "icon", onClick: () => {
+                    props.onIconClick(props.data);
+                }, title: props.iconTitle, children: _jsx("img", { className: "img", title: props.iconTitle, src: props.iconImage }) })] }));
+};
 //# sourceMappingURL=draggableLineWithButtonComponent.js.map

package/lines/draggableLineWithButtonComponent.js.map CHANGED Viewed

	@@ -1 +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~~"]}
1	+ {"version":3,"file":"draggableLineWithButtonComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/draggableLineWithButtonComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAY/D,MAAM,CAAC,MAAM,gCAAgC,GAA0D,CAAC,KAAK,EAAE,EAAE;IAC7G,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC9C,IAAI,SAAS,EAAE,CAAC;QACZ,4IAA4I;QAC5I,OAAO,KAAC,aAAa,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,iBAAiB,IAAI,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,GAAI,CAAC;IAC3K,CAAC;IACD,OAAO,CACH,eACI,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAE,KAAK,CAAC,OAAO,EACpB,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACzD,CAAC,aAEA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,iBAAiB,IAAI,CAAC,CAAC,CAAC,EAC5E,cACI,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,GAAG,EAAE;oBACV,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;gBAClC,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,SAAS,YAEtB,cAAK,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,GAAI,GACnE,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useContext } from \"react\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\nimport { DraggableLine } from \"../fluent/primitives/draggable\";\r\n\r\nexport type DraggableLineWithButtonProps = {\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 const DraggableLineWithButtonComponent: React.FunctionComponent<DraggableLineWithButtonProps> = (props) => {\r\n const { useFluent } = useContext(ToolContext);\r\n if (useFluent) {\r\n // When updating the callsites to use fluent directly this label will be clearer since the string replace occurs where the data string lives\r\n return <DraggableLine {...props} label={props.data.substring(0, props.data.length - (props.lenSuffixToRemove ?? 6))} onDelete={() => props.onIconClick(props.data)} />;\r\n }\r\n return (\r\n <div\r\n className=\"draggableLine withButton\"\r\n title={props.tooltip}\r\n draggable={true}\r\n onDragStart={(event) => {\r\n event.dataTransfer.setData(props.format, props.data);\r\n }}\r\n >\r\n {props.data.substring(0, props.data.length - (props.lenSuffixToRemove ?? 6))}\r\n <div\r\n className=\"icon\"\r\n onClick={() => {\r\n props.onIconClick(props.data);\r\n }}\r\n title={props.iconTitle}\r\n >\r\n <img className=\"img\" title={props.iconTitle} src={props.iconImage} />\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}

package/lines/fileButtonLineComponent.js CHANGED Viewed

@@ -16,7 +16,8 @@ export class FileButtonLine extends React.Component {
         evt.target.value = "";
     }
     renderFluent() {
-        return _jsx(FileUploadLine, { ...this.props, onClick: (file) => this.props.onClick(file[0]) });
+        const { icon, ...fileProps } = this.props;
+        return _jsx(FileUploadLine, { ...fileProps, onClick: (file) => this.props.onClick(file[0]) });
     }
     renderOriginal() {
         return (_jsxs("div", { className: "buttonLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("label", { htmlFor: "file-upload" + this._id, className: "file-upload", children: this.props.label }), _jsx("input", { ref: this._uploadInputRef, id: "file-upload" + this._id, type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] }));

package/lines/fileButtonLineComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fileButtonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/fileButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAUhF,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAA+B;IAKrE,YAAY,KAA2B;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,QAAG,GAAG,cAAc,CAAC,YAAY,EAAE,CAAC;QAKxC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,YAAY;QACR,~~OAAO~~,~~KAAC~~,~~cAAc~~,~~OAAK~~,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAI,CAAC;~~IAC9F~~,CAAC;IAED,cAAc;QACV,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,aACtB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAC,aAAa,YAC5D,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,EACR,gBAAO,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAI,IAC9I,CACT,CAAC;IACN,CAAC;IACQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;;~~AAnCc~~,2BAAY,GAAG,CAAC,AAAJ,CAAK","sourcesContent":["import * as React from \"react\";\r\nimport { FileUploadLine } from \"../fluent/hoc/fileUploadLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\ninterface IFileButtonLineProps {\r\n label: string;\r\n onClick: (file: File) => void;\r\n accept: string;\r\n icon?: string;\r\n iconLabel?: string;\r\n}\r\n\r\nexport class FileButtonLine extends React.Component<IFileButtonLineProps> {\r\n private static _IdGenerator = 0;\r\n private _id = FileButtonLine._IdGenerator++;\r\n private _uploadInputRef: React.RefObject<HTMLInputElement>;\r\n\r\n constructor(props: IFileButtonLineProps) {\r\n super(props);\r\n this._uploadInputRef = 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 this.props.onClick(files[0]);\r\n }\r\n\r\n evt.target.value = \"\";\r\n }\r\n\r\n renderFluent() {\r\n return <FileUploadLine {...~~this.props~~} onClick={(file) => this.props.onClick(file[0])} />;\r\n }\r\n\r\n renderOriginal() {\r\n return (\r\n <div className=\"buttonLine\">\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n <label htmlFor={\"file-upload\" + this._id} className=\"file-upload\">\r\n {this.props.label}\r\n </label>\r\n <input ref={this._uploadInputRef} id={\"file-upload\" + this._id} type=\"file\" accept={this.props.accept} onChange={(evt) => this.onChange(evt)} />\r\n </div>\r\n );\r\n }\r\n override render() {\r\n return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"fileButtonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/fileButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAUhF,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAA+B;IAKrE,YAAY,KAA2B;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,QAAG,GAAG,cAAc,CAAC,YAAY,EAAE,CAAC;QAKxC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,YAAY;QACR,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC1C,OAAO,KAAC,cAAc,OAAK,SAAS,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAI,CAAC;IAC7F,CAAC;IAED,cAAc;QACV,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,aACtB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAC,aAAa,YAC5D,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,EACR,gBAAO,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAI,IAC9I,CACT,CAAC;IACN,CAAC;IACQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;;AApCc,2BAAY,GAAG,CAAC,AAAJ,CAAK","sourcesContent":["import * as React from \"react\";\r\nimport { FileUploadLine } from \"../fluent/hoc/fileUploadLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\ninterface IFileButtonLineProps {\r\n label: string;\r\n onClick: (file: File) => void;\r\n accept: string;\r\n icon?: string;\r\n iconLabel?: string;\r\n}\r\n\r\nexport class FileButtonLine extends React.Component<IFileButtonLineProps> {\r\n private static _IdGenerator = 0;\r\n private _id = FileButtonLine._IdGenerator++;\r\n private _uploadInputRef: React.RefObject<HTMLInputElement>;\r\n\r\n constructor(props: IFileButtonLineProps) {\r\n super(props);\r\n this._uploadInputRef = 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 this.props.onClick(files[0]);\r\n }\r\n\r\n evt.target.value = \"\";\r\n }\r\n\r\n renderFluent() {\r\n const { icon, ...fileProps } = this.props;\r\n return <FileUploadLine {...fileProps} onClick={(file) => this.props.onClick(file[0])} />;\r\n }\r\n\r\n renderOriginal() {\r\n return (\r\n <div className=\"buttonLine\">\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n <label htmlFor={\"file-upload\" + this._id} className=\"file-upload\">\r\n {this.props.label}\r\n </label>\r\n <input ref={this._uploadInputRef} id={\"file-upload\" + this._id} type=\"file\" accept={this.props.accept} onChange={(evt) => this.onChange(evt)} />\r\n </div>\r\n );\r\n }\r\n override render() {\r\n return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n }\r\n}\r\n"]}

package/lines/floatLineComponent.d.ts CHANGED Viewed

@@ -47,6 +47,8 @@ export declare class FloatLineComponent extends React.Component<IFloatLineCompon
     incrementValue(amount: number, processStep?: boolean): void;
     onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;
     onCopyClick(): void;
+    renderFluent(): import("react/jsx-runtime").JSX.Element;
+    renderOriginal(): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/lines/floatLineComponent.js CHANGED Viewed

@@ -6,6 +6,9 @@ import { conflictingValuesPlaceholder } from "./targetsProxy.js";
 import { InputArrowsComponent } from "./inputArrowsComponent.js";
 import { copyCommandToClipboard, getClassNameWithNamespace } from "../copyCommandToClipboard.js";
 import copyIcon from "../imgs/copy.svg";
+import { NumberInputPropertyLine } from "../fluent/hoc/propertyLines/inputPropertyLine.js";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
+import { SpinButtonPropertyLine } from "shared-ui-components/fluent/primitives/spinButton";
 export class FloatLineComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -159,7 +162,23 @@ export class FloatLineComponent extends React.Component {
             copyCommandToClipboard("undefined");
         }
     }
-    render() {
+    renderFluent() {
+        const props = {
+            label: this.props.label,
+            value: Number(this.state.value),
+            onChange: (value) => this.updateValue(value.toString()),
+            min: this.props.min,
+            max: this.props.max,
+            precision: this.props.digits ?? (this.props.isInteger ? 0 : undefined),
+            disabled: this.props.disabled,
+            step: this.props.step ? parseFloat(this.props.step) : undefined,
+        };
+        if (this.props.arrows) {
+            return _jsx(SpinButtonPropertyLine, { ...props });
+        }
+        return _jsx(NumberInputPropertyLine, { ...props });
+    }
+    renderOriginal() {
         let valueAsNumber;
         if (this.props.isInteger) {
             valueAsNumber = parseInt(this.state.value);
@@ -193,5 +212,8 @@ export class FloatLineComponent extends React.Component {
                                         this.setState({ dragging: newDragging });
                                     } }))] }), this.props.unit, _jsx("div", { className: "copy hoverIcon", onClick: () => this.onCopyClick(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) })] })), this.props.useEuler && (_jsx(SliderLineComponent, { lockObject: this.props.lockObject, label: this.props.label, minimum: 0, maximum: 360, step: 0.1, directValue: Tools.ToDegrees(valueAsNumber), onChange: (value) => this.updateValue(Tools.ToRadians(value).toString()) }))] }));
     }
+    render() {
+        return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal()) });
+    }
 }
 //# sourceMappingURL=floatLineComponent.js.map