PromucFlow_constructor/app/client/src/widgets/RangeSliderWidget/index.ts

81 lines
1.9 KiB
TypeScript
Raw Normal View History

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 { Alignment } from "@blueprintjs/core";
import { LabelPosition } from "components/constants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
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 IconSVG from "./icon.svg";
import Widget from "./widget";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Range Slider",
needsMeta: true,
iconSVG: IconSVG,
defaults: {
min: 0,
max: 100,
minRange: 5,
step: 1,
showMarksLabel: true,
defaultStartValue: 10,
defaultEndValue: 100,
marks: [
{ value: 25, label: "25%" },
{ value: 50, label: "50%" },
{ value: 75, label: "75%" },
],
isVisible: true,
isDisabled: false,
tooltipAlwaysOn: false,
labelText: "Percentage",
labelPosition: LabelPosition.Top,
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
labelAlignment: Alignment.LEFT,
labelWidth: 8,
labelTextSize: "0.875rem",
rows: 8,
columns: 40,
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
widgetName: "RangeSlider",
shouldScroll: false,
shouldTruncate: false,
version: 1,
animateLoading: true,
sliderSize: "m",
responsiveBehavior: ResponsiveBehavior.Fill,
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
},
properties: {
derived: Widget.getDerivedPropertiesMap(),
default: Widget.getDefaultPropertiesMap(),
meta: Widget.getMetaPropertiesMap(),
contentConfig: Widget.getPropertyPaneContentConfig(),
styleConfig: Widget.getPropertyPaneStyleConfig(),
stylesheetConfig: Widget.getStylesheetConfig(),
feat: widget property setters (#23441) ## Description - This PR adds setter methods to update widget property programmatically. Example:- `Input1.setText("setter methods are cool!");` Docs link : https://docs.appsmith.com/reference/widgets For any selected widget check the `Methods` section #### PR fixes following issue(s) Fixes #### Type of change - New feature (non-breaking change which adds functionality) ## Testing > #### How Has This Been Tested? - [x] Manual - [x] Jest - [x] Cypress > > #### Test Plan https://github.com/appsmithorg/TestSmith/issues/2409 #### Issues raised during DP testing - [x] [Errors are not logged in the debugger](https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1564017346) separate GitHub issue https://github.com/appsmithorg/appsmith/issues/24609 - [x] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1564155545 ( `setVisibility("false")` ) - [x] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1580525843 - [x] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1576582825 - Blocker for testing - [x] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1577956441 - [x] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1577930108 - Not a issue (lint error query) - [x] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1593471791 - [x] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1591440488 - [x] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1586747864 - [x] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1596738201 - [x] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1598541537 - [x] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1611413076 - [x] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1612621567 - [ ] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1619654507 - [ ] https://github.com/appsmithorg/appsmith/pull/23441#issuecomment-1621256722 > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change) have been covered - [x] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#areas-of-interest) - [x] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: Rishabh Rathod <rishabh.rathod@appsmith.com>
2023-07-08 14:07:26 +00:00
setterConfig: Widget.getSetterConfig(),
autocompleteDefinitions: Widget.getAutocompleteDefinitions(),
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
},
autoLayout: {
disabledPropsDefaults: {
labelPosition: LabelPosition.Top,
labelTextSize: "0.875rem",
},
defaults: {
rows: 7,
columns: 40,
},
widgetSize: [
{
viewportMinWidth: 0,
configuration: () => {
return {
minWidth: "180px",
minHeight: "70px",
};
},
},
],
disableResizeHandles: {
vertical: true,
},
},
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
};
export default Widget;