feat: implemented slider widgets (#15712)
* feat: implemented slider widget from mantine ui
* fix: remove widget from widgetName
* fix: memoize marks, use primitives for rangeslider value
* fix: use theme accentColor, remove xs and xl size
* fix: renamed slider widget, added searchTags, parity properties
* feat: added labels to the slider widgets.
* fix: Rename SingleSlider components to Slider
* feat: added basic disabled state
* feat: added category slider widget, handled label callback function
* fix: Renamed slider widgets fixed imports and bindings.
* feat: widget redesign, added hover, focus, disabled states.
* feat: added isDirty meta property to the slider widgets.
* feat: Added onChange action triggers to the slider widgets.
* feat: added show marks label property for category widget.
* fix: fixed initial feedback on designs, issues.
* feat: added the new tabbed property pane improvements.
* feat: changes to the slider property panes.
* fix: removed show label on hover and add tooltip always on property.
* fix: slider sizes changed inline with the designs
* feat: added initial logos.
* fix: slider size subtext.
* feat: added show marks to number and range sliders.
* fix: Label will show one decimal point if step Size is in decimal.
* feat: added validations for the slider widgets.
* fix: remove mark dots when show marks is off, change icons.
* fix: addressed validations feedback.
* fix: added stepsize validation number widget & fixed top label aligning.
* fix: Long label styles.
* fix: wrapping removed for long labels, handled focus state.
* fix: remove overflow hidden.
* fix: added pointerEvents none to Marks.
* fix: added default value in the Number Slider widget.
* fix: refactor marks remove un-necessary function calls.
* fix: Review changes done.
* fix: remove transformstyles outside component.
* fix: remove old proprty pane config.
* fix: remove any type from widget files.
* fix: small code refactor validations category slider.
* fix: removed throttle, fixed slider setting to zero issue.
* fix: Added validation for stepSize RangeSlider. Added clamp for nextValue in getChangeValue.
* fix: number and category slider fire events only if value has changed.
* fix: added 0 as default for the min value, range and number sliders.
* fix: remove tooltip always on from category slider.
* fix: minRange validation accept only numbers.
* fix: added old property pane method.
2022-09-22 15:56:50 +00:00
|
|
|
import { RangeSliderWidgetProps } from "./widget";
|
|
|
|
|
|
|
|
|
|
export function minValueValidation(
|
|
|
|
|
min: unknown,
|
|
|
|
|
props: RangeSliderWidgetProps,
|
|
|
|
|
_: any,
|
|
|
|
|
) {
|
|
|
|
|
if (_.isNil(min) || min === "") {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value is required"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const minValue = Number(min);
|
|
|
|
|
const maxValue = props.max;
|
|
|
|
|
|
|
|
|
|
if (!Number.isFinite(minValue)) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value must be a number"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!_.isNil(maxValue) && minValue >= maxValue) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value must be less than max value"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: minValue,
|
|
|
|
|
messages: [""],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function maxValueValidation(
|
|
|
|
|
max: unknown,
|
|
|
|
|
props: RangeSliderWidgetProps,
|
|
|
|
|
_: any,
|
|
|
|
|
) {
|
|
|
|
|
if (_.isNil(max) || max === "") {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value is required"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const maxValue = Number(max);
|
|
|
|
|
const minValue = props.min;
|
|
|
|
|
|
|
|
|
|
if (!Number.isFinite(maxValue)) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value must be a number"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!_.isNil(minValue) && maxValue <= minValue) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value must be greater than min value"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: maxValue,
|
|
|
|
|
messages: [""],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function stepSizeValidation(
|
|
|
|
|
step: unknown,
|
|
|
|
|
props: RangeSliderWidgetProps,
|
|
|
|
|
_: any,
|
|
|
|
|
) {
|
|
|
|
|
if (_.isNil(step) || step === "") {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value is required"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const stepValue = Number(step);
|
|
|
|
|
|
|
|
|
|
if (!Number.isFinite(stepValue)) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value must be a number"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (stepValue < 0.1) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value must be greater than 0.1"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const minValue = props.min;
|
|
|
|
|
const maxValue = props.max;
|
|
|
|
|
|
|
|
|
|
const sliderRange = maxValue - minValue;
|
|
|
|
|
|
|
|
|
|
if (stepValue > sliderRange) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: [`This value must be less than ${sliderRange}`],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const minRange = props.minRange;
|
|
|
|
|
|
|
|
|
|
if (stepValue > minRange) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: [`This value must be less than or equal to minRange`],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: stepValue,
|
|
|
|
|
messages: [""],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function startValueValidation(
|
|
|
|
|
startValue: unknown,
|
|
|
|
|
props: RangeSliderWidgetProps,
|
|
|
|
|
_: any,
|
|
|
|
|
) {
|
|
|
|
|
if (_.isNil(startValue) || startValue === "") {
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: [""],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const defaultStartValue = Number(startValue);
|
|
|
|
|
const defaultEndValue = props.defaultEndValue;
|
|
|
|
|
const minValue = props.min;
|
|
|
|
|
|
|
|
|
|
if (!Number.isFinite(defaultStartValue)) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value must be a number"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!_.isNil(minValue) && defaultStartValue < minValue) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
2022-11-26 12:17:10 +00:00
|
|
|
messages: ["This value must be greater than or equal to the min value"],
|
feat: implemented slider widgets (#15712)
* feat: implemented slider widget from mantine ui
* fix: remove widget from widgetName
* fix: memoize marks, use primitives for rangeslider value
* fix: use theme accentColor, remove xs and xl size
* fix: renamed slider widget, added searchTags, parity properties
* feat: added labels to the slider widgets.
* fix: Rename SingleSlider components to Slider
* feat: added basic disabled state
* feat: added category slider widget, handled label callback function
* fix: Renamed slider widgets fixed imports and bindings.
* feat: widget redesign, added hover, focus, disabled states.
* feat: added isDirty meta property to the slider widgets.
* feat: Added onChange action triggers to the slider widgets.
* feat: added show marks label property for category widget.
* fix: fixed initial feedback on designs, issues.
* feat: added the new tabbed property pane improvements.
* feat: changes to the slider property panes.
* fix: removed show label on hover and add tooltip always on property.
* fix: slider sizes changed inline with the designs
* feat: added initial logos.
* fix: slider size subtext.
* feat: added show marks to number and range sliders.
* fix: Label will show one decimal point if step Size is in decimal.
* feat: added validations for the slider widgets.
* fix: remove mark dots when show marks is off, change icons.
* fix: addressed validations feedback.
* fix: added stepsize validation number widget & fixed top label aligning.
* fix: Long label styles.
* fix: wrapping removed for long labels, handled focus state.
* fix: remove overflow hidden.
* fix: added pointerEvents none to Marks.
* fix: added default value in the Number Slider widget.
* fix: refactor marks remove un-necessary function calls.
* fix: Review changes done.
* fix: remove transformstyles outside component.
* fix: remove old proprty pane config.
* fix: remove any type from widget files.
* fix: small code refactor validations category slider.
* fix: removed throttle, fixed slider setting to zero issue.
* fix: Added validation for stepSize RangeSlider. Added clamp for nextValue in getChangeValue.
* fix: number and category slider fire events only if value has changed.
* fix: added 0 as default for the min value, range and number sliders.
* fix: remove tooltip always on from category slider.
* fix: minRange validation accept only numbers.
* fix: added old property pane method.
2022-09-22 15:56:50 +00:00
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (defaultEndValue !== undefined && defaultStartValue >= defaultEndValue) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value must be less than defaultEnd value"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: defaultStartValue,
|
|
|
|
|
messages: [""],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function endValueValidation(
|
|
|
|
|
endValue: unknown,
|
|
|
|
|
props: RangeSliderWidgetProps,
|
|
|
|
|
_: any,
|
|
|
|
|
) {
|
|
|
|
|
if (_.isNil(endValue) || endValue === "") {
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: [""],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const defaultEndValue = Number(endValue);
|
|
|
|
|
const defaultStartValue = props.defaultStartValue;
|
|
|
|
|
const maxValue = props.max;
|
|
|
|
|
|
|
|
|
|
if (!Number.isFinite(defaultEndValue)) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value must be a number"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!_.isNil(maxValue) && defaultEndValue > maxValue) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
2022-11-26 12:17:10 +00:00
|
|
|
messages: ["This value must be less than or equal to the max value"],
|
feat: implemented slider widgets (#15712)
* feat: implemented slider widget from mantine ui
* fix: remove widget from widgetName
* fix: memoize marks, use primitives for rangeslider value
* fix: use theme accentColor, remove xs and xl size
* fix: renamed slider widget, added searchTags, parity properties
* feat: added labels to the slider widgets.
* fix: Rename SingleSlider components to Slider
* feat: added basic disabled state
* feat: added category slider widget, handled label callback function
* fix: Renamed slider widgets fixed imports and bindings.
* feat: widget redesign, added hover, focus, disabled states.
* feat: added isDirty meta property to the slider widgets.
* feat: Added onChange action triggers to the slider widgets.
* feat: added show marks label property for category widget.
* fix: fixed initial feedback on designs, issues.
* feat: added the new tabbed property pane improvements.
* feat: changes to the slider property panes.
* fix: removed show label on hover and add tooltip always on property.
* fix: slider sizes changed inline with the designs
* feat: added initial logos.
* fix: slider size subtext.
* feat: added show marks to number and range sliders.
* fix: Label will show one decimal point if step Size is in decimal.
* feat: added validations for the slider widgets.
* fix: remove mark dots when show marks is off, change icons.
* fix: addressed validations feedback.
* fix: added stepsize validation number widget & fixed top label aligning.
* fix: Long label styles.
* fix: wrapping removed for long labels, handled focus state.
* fix: remove overflow hidden.
* fix: added pointerEvents none to Marks.
* fix: added default value in the Number Slider widget.
* fix: refactor marks remove un-necessary function calls.
* fix: Review changes done.
* fix: remove transformstyles outside component.
* fix: remove old proprty pane config.
* fix: remove any type from widget files.
* fix: small code refactor validations category slider.
* fix: removed throttle, fixed slider setting to zero issue.
* fix: Added validation for stepSize RangeSlider. Added clamp for nextValue in getChangeValue.
* fix: number and category slider fire events only if value has changed.
* fix: added 0 as default for the min value, range and number sliders.
* fix: remove tooltip always on from category slider.
* fix: minRange validation accept only numbers.
* fix: added old property pane method.
2022-09-22 15:56:50 +00:00
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (defaultStartValue !== undefined && defaultEndValue <= defaultStartValue) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value must be greater than defaultStart value"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: defaultEndValue,
|
|
|
|
|
messages: [""],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function minRangeValidation(
|
|
|
|
|
minRange: unknown,
|
|
|
|
|
props: RangeSliderWidgetProps,
|
|
|
|
|
_: any,
|
|
|
|
|
) {
|
|
|
|
|
if (_.isNil(minRange) || minRange === "") {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value is required"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const defaultMinRange = Number(minRange);
|
|
|
|
|
const stepSize = props.step;
|
|
|
|
|
|
|
|
|
|
if (!Number.isFinite(defaultMinRange)) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value must be a number"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
2022-10-21 10:25:41 +00:00
|
|
|
const minValue = props.min;
|
|
|
|
|
const maxValue = props.max;
|
|
|
|
|
|
|
|
|
|
const sliderRange = maxValue - minValue;
|
|
|
|
|
|
|
|
|
|
if (defaultMinRange > sliderRange) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: [`This value must be less than ${sliderRange}`],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
feat: implemented slider widgets (#15712)
* feat: implemented slider widget from mantine ui
* fix: remove widget from widgetName
* fix: memoize marks, use primitives for rangeslider value
* fix: use theme accentColor, remove xs and xl size
* fix: renamed slider widget, added searchTags, parity properties
* feat: added labels to the slider widgets.
* fix: Rename SingleSlider components to Slider
* feat: added basic disabled state
* feat: added category slider widget, handled label callback function
* fix: Renamed slider widgets fixed imports and bindings.
* feat: widget redesign, added hover, focus, disabled states.
* feat: added isDirty meta property to the slider widgets.
* feat: Added onChange action triggers to the slider widgets.
* feat: added show marks label property for category widget.
* fix: fixed initial feedback on designs, issues.
* feat: added the new tabbed property pane improvements.
* feat: changes to the slider property panes.
* fix: removed show label on hover and add tooltip always on property.
* fix: slider sizes changed inline with the designs
* feat: added initial logos.
* fix: slider size subtext.
* feat: added show marks to number and range sliders.
* fix: Label will show one decimal point if step Size is in decimal.
* feat: added validations for the slider widgets.
* fix: remove mark dots when show marks is off, change icons.
* fix: addressed validations feedback.
* fix: added stepsize validation number widget & fixed top label aligning.
* fix: Long label styles.
* fix: wrapping removed for long labels, handled focus state.
* fix: remove overflow hidden.
* fix: added pointerEvents none to Marks.
* fix: added default value in the Number Slider widget.
* fix: refactor marks remove un-necessary function calls.
* fix: Review changes done.
* fix: remove transformstyles outside component.
* fix: remove old proprty pane config.
* fix: remove any type from widget files.
* fix: small code refactor validations category slider.
* fix: removed throttle, fixed slider setting to zero issue.
* fix: Added validation for stepSize RangeSlider. Added clamp for nextValue in getChangeValue.
* fix: number and category slider fire events only if value has changed.
* fix: added 0 as default for the min value, range and number sliders.
* fix: remove tooltip always on from category slider.
* fix: minRange validation accept only numbers.
* fix: added old property pane method.
2022-09-22 15:56:50 +00:00
|
|
|
if (defaultMinRange < 0.1) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value must be greater than 0.1"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (defaultMinRange < stepSize) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: undefined,
|
|
|
|
|
messages: ["This value must be greater than or equal to step size"],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: defaultMinRange,
|
|
|
|
|
messages: [""],
|
|
|
|
|
};
|
|
|
|
|
}
|