diff --git a/CHANGELOG.md b/CHANGELOG.md index 7101c14eb..87c0d3328 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `utils` - `useComputedStyleFallback` option for `CssCustomProperties`: if the CSSOM does not provide any property name for the used selector, e.g. because the declarations are part of a constructed and adopted stylesheet, then the names are read from the computed style of the matching element; disabled by default because the computed style also contains all inherited custom properties +- `` + - `noDrag` parameter: Add the `nodrag` class to the Switch element. Default: `true` ### Changed diff --git a/src/components/Switch/Stories/Switch.stories.tsx b/src/components/Switch/Stories/Switch.stories.tsx index f4967c89d..470caa2c3 100644 --- a/src/components/Switch/Stories/Switch.stories.tsx +++ b/src/components/Switch/Stories/Switch.stories.tsx @@ -23,3 +23,14 @@ WithStateLabel.args = { innerLabel: "Off", innerLabelChecked: "On", }; + +/** + * By default the `nodrag` class is set, so the switch cannot be used to drag a surrounding element, + * e.g. a React Flow node. Set `noDrag` to `false` to remove the class and allow the drag interaction. + */ +export const WithoutNoDragClass = Template.bind({}); +WithoutNoDragClass.args = { + ...Default.args, + label: "Switch label, drag interaction not prevented", + noDrag: false, +}; diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx index 27e5cb026..d53dacee1 100644 --- a/src/components/Switch/Switch.tsx +++ b/src/components/Switch/Switch.tsx @@ -17,18 +17,23 @@ export interface SwitchProps extends Omit { * class names */ className?: string; + + /** Adds the 'nodrag' class to the element, preventing dragging via the Switch element. Default: true */ + noDrag?: boolean; } -export const Switch = ({ onChange, className, label, ...otherProps }: SwitchProps) => { +export const Switch = ({ onChange, className, label, noDrag = true, ...otherProps }: SwitchProps) => { const handleChange = (e: React.ChangeEvent) => { if (onChange) { onChange(!!e.target?.checked); } }; + const noDragClass = noDrag ? "nodrag " : ""; + return (