@babylonjs/shared-ui-components 8.16.2 → 8.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fluent/hoc/propertyLines/propertyLine.d.ts +13 -7
- package/fluent/hoc/propertyLines/propertyLine.js +1 -1
- package/fluent/hoc/propertyLines/propertyLine.js.map +1 -1
- package/fluent/primitives/messageBar.js +2 -2
- package/fluent/primitives/messageBar.js.map +1 -1
- package/fluent/primitives/syncedSlider.js +5 -3
- package/fluent/primitives/syncedSlider.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,15 +12,23 @@ export type PropertyLineProps = {
|
|
|
12
12
|
* Optional function returning a string to copy to clipboard.
|
|
13
13
|
*/
|
|
14
14
|
onCopy?: () => string;
|
|
15
|
+
/**
|
|
16
|
+
* Link to the documentation for this property, available from the info icon either linked from the description (if provided) or default 'docs' text
|
|
17
|
+
*/
|
|
18
|
+
docLink?: string;
|
|
19
|
+
} & ({
|
|
20
|
+
expandedContent?: undefined;
|
|
21
|
+
expandByDefault?: never;
|
|
22
|
+
} | {
|
|
15
23
|
/**
|
|
16
24
|
* If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line.
|
|
17
25
|
*/
|
|
18
|
-
expandedContent
|
|
26
|
+
expandedContent: JSX.Element;
|
|
19
27
|
/**
|
|
20
|
-
*
|
|
28
|
+
* If true, the expanded content will be shown by default.
|
|
21
29
|
*/
|
|
22
|
-
|
|
23
|
-
};
|
|
30
|
+
expandByDefault?: boolean;
|
|
31
|
+
});
|
|
24
32
|
export declare const LineContainer: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<HTMLProps<HTMLDivElement>>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
25
33
|
export type BaseComponentProps<T> = {
|
|
26
34
|
/**
|
|
@@ -47,7 +55,5 @@ export type BaseComponentProps<T> = {
|
|
|
47
55
|
* @returns A React element representing the property line.
|
|
48
56
|
*
|
|
49
57
|
*/
|
|
50
|
-
export declare const PropertyLine: import("react").ForwardRefExoticComponent<PropertyLineProps &
|
|
51
|
-
children?: import("react").ReactNode | undefined;
|
|
52
|
-
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
58
|
+
export declare const PropertyLine: import("react").ForwardRefExoticComponent<PropsWithChildren<PropertyLineProps> & import("react").RefAttributes<HTMLDivElement>>;
|
|
53
59
|
export declare const PlaceholderPropertyLine: FunctionComponent<BaseComponentProps<any> & PropertyLineProps>;
|
|
@@ -68,7 +68,7 @@ export const LineContainer = forwardRef((props, ref) => {
|
|
|
68
68
|
*/
|
|
69
69
|
export const PropertyLine = forwardRef((props, ref) => {
|
|
70
70
|
const classes = usePropertyLineStyles();
|
|
71
|
-
const [expanded, setExpanded] = useState(false);
|
|
71
|
+
const [expanded, setExpanded] = useState(props.expandByDefault ?? false);
|
|
72
72
|
const { label, onCopy, expandedContent, children } = props;
|
|
73
73
|
const { disableCopy } = useContext(ToolContext);
|
|
74
74
|
const description = props.description ?? (props.docLink ? _jsx(Link, { href: props.docLink, children: props.description ?? "Docs" }) : props.description);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"propertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/propertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Body1, Body1Strong, Button, InfoLabel, Link, ToggleButton, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { Collapse } from \"@fluentui/react-motion-components-preview\";\r\nimport { AddFilled, CopyRegular, SubtractFilled } from \"@fluentui/react-icons\";\r\nimport type { FunctionComponent, HTMLProps, PropsWithChildren } from \"react\";\r\nimport { useContext, useState, forwardRef } from \"react\";\r\nimport { copyCommandToClipboard } from \"../../../copyCommandToClipboard\";\r\nimport { ToolContext } from \"../fluentToolWrapper\";\r\n\r\nconst usePropertyLineStyles = makeStyles({\r\n container: {\r\n width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"column\", // Stack line + expanded content\r\n padding: `${tokens.spacingVerticalXS} 0px`,\r\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\r\n },\r\n line: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"flex-start\",\r\n width: \"100%\",\r\n },\r\n label: {\r\n flex: \"1 1 0\",\r\n minWidth: \"50px\",\r\n textAlign: \"left\",\r\n whiteSpace: \"nowrap\",\r\n overflow: \"hidden\",\r\n textOverflow: \"ellipsis\",\r\n },\r\n labelText: {\r\n whiteSpace: \"nowrap\",\r\n },\r\n rightContent: {\r\n flex: \"0 1 auto\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"flex-end\",\r\n gap: tokens.spacingHorizontalS,\r\n },\r\n button: {\r\n marginLeft: tokens.spacingHorizontalXXS,\r\n margin: 0,\r\n padding: 0,\r\n border: 0,\r\n minWidth: 0,\r\n },\r\n fillRestOfRightContentWidth: {\r\n flex: 1,\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n alignItems: \"center\",\r\n },\r\n expandButton: {\r\n margin: 0,\r\n },\r\n expandedContent: {},\r\n});\r\n\r\nexport type PropertyLineProps = {\r\n /**\r\n * The name of the property to display in the property line.\r\n */\r\n label: string;\r\n /**\r\n * Optional description for the property, shown on hover of the info icon\r\n */\r\n description?: string;\r\n /**\r\n * Optional function returning a string to copy to clipboard.\r\n */\r\n onCopy?: () => string;\r\n /**\r\n * If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line.\r\n */\r\n expandedContent?: JSX.Element;\r\n\r\n /**\r\n * Link to the documentation for this property, available from the info icon either linked from the description (if provided) or defalt 'docs' text\r\n */\r\n docLink?: string;\r\n};\r\n\r\nexport const LineContainer = forwardRef<HTMLDivElement, PropsWithChildren<HTMLProps<HTMLDivElement>>>((props, ref) => {\r\n const classes = usePropertyLineStyles();\r\n return (\r\n <div ref={ref} className={classes.container} {...props}>\r\n {props.children}\r\n </div>\r\n );\r\n});\r\n\r\nexport type BaseComponentProps<T> = {\r\n /**\r\n * The value of the property to be displayed and modified.\r\n */\r\n value: T;\r\n /**\r\n * Callback function to handle changes to the value\r\n */\r\n onChange: (value: T) => void;\r\n /**\r\n * Optional flag to disable the component, preventing any interaction.\r\n */\r\n disabled?: boolean;\r\n /**\r\n * Optional class name to apply custom styles to the component.\r\n */\r\n className?: string;\r\n};\r\n\r\n/**\r\n * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.\r\n *\r\n * @param props - The properties for the PropertyLine component.\r\n * @returns A React element representing the property line.\r\n *\r\n */\r\nexport const PropertyLine = forwardRef<HTMLDivElement, PropsWithChildren<PropertyLineProps>>((props, ref) => {\r\n const classes = usePropertyLineStyles();\r\n const [expanded, setExpanded] = useState(false);\r\n\r\n const { label, onCopy, expandedContent, children } = props;\r\n\r\n const { disableCopy } = useContext(ToolContext);\r\n\r\n const description = props.description ?? (props.docLink ? <Link href={props.docLink}>{props.description ?? \"Docs\"}</Link> : props.description);\r\n\r\n return (\r\n <LineContainer ref={ref}>\r\n <div className={classes.line}>\r\n <InfoLabel className={classes.label} info={description}>\r\n <Body1Strong className={classes.labelText}>{label}</Body1Strong>\r\n </InfoLabel>\r\n <div className={classes.rightContent}>\r\n <div className={classes.fillRestOfRightContentWidth}>{children}</div>\r\n\r\n {expandedContent && (\r\n <ToggleButton\r\n appearance=\"transparent\"\r\n icon={expanded ? <SubtractFilled /> : <AddFilled />}\r\n className={classes.button}\r\n checked={expanded}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n setExpanded((expanded) => !expanded);\r\n }}\r\n />\r\n )}\r\n\r\n {onCopy && !disableCopy && (\r\n <Button className={classes.button} id=\"copyProperty\" icon={<CopyRegular />} onClick={() => copyCommandToClipboard(onCopy())} title=\"Copy to clipboard\" />\r\n )}\r\n </div>\r\n </div>\r\n <Collapse visible={expanded && !!expandedContent}>\r\n <div className={classes.expandedContent}>{expandedContent}</div>\r\n </Collapse>\r\n </LineContainer>\r\n );\r\n});\r\n\r\nexport const PlaceholderPropertyLine: FunctionComponent<BaseComponentProps<any> & PropertyLineProps> = (props) => {\r\n return (\r\n <PropertyLine {...props}>\r\n <Body1>{props.value}</Body1>\r\n </PropertyLine>\r\n );\r\n};\r\n"]}
|
|
1
|
+
{"version":3,"file":"propertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/propertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Body1, Body1Strong, Button, InfoLabel, Link, ToggleButton, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { Collapse } from \"@fluentui/react-motion-components-preview\";\r\nimport { AddFilled, CopyRegular, SubtractFilled } from \"@fluentui/react-icons\";\r\nimport type { FunctionComponent, HTMLProps, PropsWithChildren } from \"react\";\r\nimport { useContext, useState, forwardRef } from \"react\";\r\nimport { copyCommandToClipboard } from \"../../../copyCommandToClipboard\";\r\nimport { ToolContext } from \"../fluentToolWrapper\";\r\n\r\nconst usePropertyLineStyles = makeStyles({\r\n container: {\r\n width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"column\", // Stack line + expanded content\r\n padding: `${tokens.spacingVerticalXS} 0px`,\r\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\r\n },\r\n line: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"flex-start\",\r\n width: \"100%\",\r\n },\r\n label: {\r\n flex: \"1 1 0\",\r\n minWidth: \"50px\",\r\n textAlign: \"left\",\r\n whiteSpace: \"nowrap\",\r\n overflow: \"hidden\",\r\n textOverflow: \"ellipsis\",\r\n },\r\n labelText: {\r\n whiteSpace: \"nowrap\",\r\n },\r\n rightContent: {\r\n flex: \"0 1 auto\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"flex-end\",\r\n gap: tokens.spacingHorizontalS,\r\n },\r\n button: {\r\n marginLeft: tokens.spacingHorizontalXXS,\r\n margin: 0,\r\n padding: 0,\r\n border: 0,\r\n minWidth: 0,\r\n },\r\n fillRestOfRightContentWidth: {\r\n flex: 1,\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n alignItems: \"center\",\r\n },\r\n expandButton: {\r\n margin: 0,\r\n },\r\n expandedContent: {},\r\n});\r\n\r\nexport type PropertyLineProps = {\r\n /**\r\n * The name of the property to display in the property line.\r\n */\r\n label: string;\r\n /**\r\n * Optional description for the property, shown on hover of the info icon\r\n */\r\n description?: string;\r\n /**\r\n * Optional function returning a string to copy to clipboard.\r\n */\r\n onCopy?: () => string;\r\n /**\r\n * Link to the documentation for this property, available from the info icon either linked from the description (if provided) or default 'docs' text\r\n */\r\n docLink?: string;\r\n} & (\r\n | {\r\n expandedContent?: undefined;\r\n expandByDefault?: never;\r\n }\r\n | {\r\n /**\r\n * If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line.\r\n */\r\n expandedContent: JSX.Element;\r\n\r\n /**\r\n * If true, the expanded content will be shown by default.\r\n */\r\n expandByDefault?: boolean;\r\n }\r\n);\r\n\r\nexport const LineContainer = forwardRef<HTMLDivElement, PropsWithChildren<HTMLProps<HTMLDivElement>>>((props, ref) => {\r\n const classes = usePropertyLineStyles();\r\n return (\r\n <div ref={ref} className={classes.container} {...props}>\r\n {props.children}\r\n </div>\r\n );\r\n});\r\n\r\nexport type BaseComponentProps<T> = {\r\n /**\r\n * The value of the property to be displayed and modified.\r\n */\r\n value: T;\r\n /**\r\n * Callback function to handle changes to the value\r\n */\r\n onChange: (value: T) => void;\r\n /**\r\n * Optional flag to disable the component, preventing any interaction.\r\n */\r\n disabled?: boolean;\r\n /**\r\n * Optional class name to apply custom styles to the component.\r\n */\r\n className?: string;\r\n};\r\n\r\n/**\r\n * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.\r\n *\r\n * @param props - The properties for the PropertyLine component.\r\n * @returns A React element representing the property line.\r\n *\r\n */\r\nexport const PropertyLine = forwardRef<HTMLDivElement, PropsWithChildren<PropertyLineProps>>((props, ref) => {\r\n const classes = usePropertyLineStyles();\r\n const [expanded, setExpanded] = useState(props.expandByDefault ?? false);\r\n\r\n const { label, onCopy, expandedContent, children } = props;\r\n\r\n const { disableCopy } = useContext(ToolContext);\r\n\r\n const description = props.description ?? (props.docLink ? <Link href={props.docLink}>{props.description ?? \"Docs\"}</Link> : props.description);\r\n\r\n return (\r\n <LineContainer ref={ref}>\r\n <div className={classes.line}>\r\n <InfoLabel className={classes.label} info={description}>\r\n <Body1Strong className={classes.labelText}>{label}</Body1Strong>\r\n </InfoLabel>\r\n <div className={classes.rightContent}>\r\n <div className={classes.fillRestOfRightContentWidth}>{children}</div>\r\n\r\n {expandedContent && (\r\n <ToggleButton\r\n appearance=\"transparent\"\r\n icon={expanded ? <SubtractFilled /> : <AddFilled />}\r\n className={classes.button}\r\n checked={expanded}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n setExpanded((expanded) => !expanded);\r\n }}\r\n />\r\n )}\r\n\r\n {onCopy && !disableCopy && (\r\n <Button className={classes.button} id=\"copyProperty\" icon={<CopyRegular />} onClick={() => copyCommandToClipboard(onCopy())} title=\"Copy to clipboard\" />\r\n )}\r\n </div>\r\n </div>\r\n <Collapse visible={expanded && !!expandedContent}>\r\n <div className={classes.expandedContent}>{expandedContent}</div>\r\n </Collapse>\r\n </LineContainer>\r\n );\r\n});\r\n\r\nexport const PlaceholderPropertyLine: FunctionComponent<BaseComponentProps<any> & PropertyLineProps> = (props) => {\r\n return (\r\n <PropertyLine {...props}>\r\n <Body1>{props.value}</Body1>\r\n </PropertyLine>\r\n );\r\n};\r\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { MessageBar as FluentMessageBar, MessageBarTitle, MessageBarBody, makeStyles, tokens } from "@fluentui/react-components";
|
|
3
3
|
import { Link } from "./link.js";
|
|
4
4
|
const useClasses = makeStyles({
|
|
@@ -11,6 +11,6 @@ const useClasses = makeStyles({
|
|
|
11
11
|
export const MessageBar = (props) => {
|
|
12
12
|
const { message, title: header, intent, docLink } = props;
|
|
13
13
|
const classes = useClasses();
|
|
14
|
-
return (_jsx("div", { className: classes.container, children: _jsx(FluentMessageBar, { intent: intent, children: _jsxs(MessageBarBody, { children: [_jsx(MessageBarTitle, { children: header }), message, docLink && _jsx(Link, { href: docLink,
|
|
14
|
+
return (_jsx("div", { className: classes.container, children: _jsx(FluentMessageBar, { intent: intent, children: _jsxs(MessageBarBody, { children: [_jsx(MessageBarTitle, { children: header }), message, docLink && (_jsxs(_Fragment, { children: [" - ", _jsx(Link, { href: docLink, target: "_blank", rel: "noopener noreferrer", children: "Learn More" })] }))] }) }) }));
|
|
15
15
|
};
|
|
16
16
|
//# sourceMappingURL=messageBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"messageBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/messageBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEjI,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,UAAU,GAAG,UAAU,CAAC;IAC1B,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM;KACvC;CACJ,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACH,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAC7B,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,YAC5B,MAAC,cAAc,eACX,KAAC,eAAe,cAAE,MAAM,GAAmB,EAC1C,OAAO,EACP,OAAO,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"messageBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/messageBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEjI,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,UAAU,GAAG,UAAU,CAAC;IAC1B,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM;KACvC;CACJ,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACH,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAC7B,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,YAC5B,MAAC,cAAc,eACX,KAAC,eAAe,cAAE,MAAM,GAAmB,EAC1C,OAAO,EACP,OAAO,IAAI,CACR,8BACK,KAAK,EACN,KAAC,IAAI,IAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,2BAEvD,IACR,CACN,IACY,GACF,GACjB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { MessageBar as FluentMessageBar, MessageBarTitle, MessageBarBody, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Link } from \"./link\";\r\n\r\nconst useClasses = makeStyles({\r\n container: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: tokens.spacingVerticalS, // 8px\r\n },\r\n});\r\n\r\ntype MessageBarProps = {\r\n message: string;\r\n title: string;\r\n docLink?: string;\r\n intent: \"info\" | \"success\" | \"warning\" | \"error\";\r\n};\r\nexport const MessageBar: FunctionComponent<MessageBarProps> = (props) => {\r\n const { message, title: header, intent, docLink } = props;\r\n const classes = useClasses();\r\n\r\n return (\r\n <div className={classes.container}>\r\n <FluentMessageBar intent={intent}>\r\n <MessageBarBody>\r\n <MessageBarTitle>{header}</MessageBarTitle>\r\n {message}\r\n {docLink && (\r\n <>\r\n {\" - \"}\r\n <Link href={docLink} target=\"_blank\" rel=\"noopener noreferrer\">\r\n Learn More\r\n </Link>\r\n </>\r\n )}\r\n </MessageBarBody>\r\n </FluentMessageBar>\r\n </div>\r\n );\r\n};\r\n"]}
|
|
@@ -43,19 +43,21 @@ export const SyncedSliderInput = (props) => {
|
|
|
43
43
|
if (props.notifyOnlyOnRelease) {
|
|
44
44
|
// Store the value but don't notify parent yet
|
|
45
45
|
pendingValueRef.current = newValue;
|
|
46
|
-
isDraggingRef.current = true;
|
|
47
46
|
}
|
|
48
47
|
else {
|
|
49
48
|
// Notify parent as slider changes
|
|
50
49
|
props.onChange(newValue);
|
|
51
50
|
}
|
|
52
51
|
};
|
|
52
|
+
const handleSliderPointerDown = () => {
|
|
53
|
+
isDraggingRef.current = true;
|
|
54
|
+
};
|
|
53
55
|
const handleSliderPointerUp = () => {
|
|
54
56
|
if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {
|
|
55
57
|
props.onChange(pendingValueRef.current);
|
|
56
58
|
pendingValueRef.current = undefined;
|
|
57
|
-
isDraggingRef.current = false;
|
|
58
59
|
}
|
|
60
|
+
isDraggingRef.current = false;
|
|
59
61
|
};
|
|
60
62
|
const handleInputChange = (value) => {
|
|
61
63
|
const newValue = Number(value);
|
|
@@ -64,6 +66,6 @@ export const SyncedSliderInput = (props) => {
|
|
|
64
66
|
props.onChange(newValue); // Input always updates immediately
|
|
65
67
|
}
|
|
66
68
|
};
|
|
67
|
-
return (_jsxs("div", { className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (_jsx(Slider, { ...props, size: "small", className: classes.slider, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerUp: handleSliderPointerUp })), _jsx(NumberInput, { ...props, className: classes.input, value: Math.round(value / step) * step, onChange: handleInputChange, step: step })] }));
|
|
69
|
+
return (_jsxs("div", { className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (_jsx(Slider, { ...props, size: "small", className: classes.slider, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), _jsx(NumberInput, { ...props, className: classes.input, value: Math.round(value / step) * step, onChange: handleInputChange, step: step })] }));
|
|
68
70
|
};
|
|
69
71
|
//# sourceMappingURL=syncedSlider.js.map
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"syncedSlider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx"],"names":[],"mappings":"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","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"]}
|