Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Enhancement : [RangeSlider widget] Bind onChange event (#4192)

Browse source 
* add onChange event and its handler

* add handler for slider change as well

* fix lint

* added onChange fire event when slider value is changed

Co-authored-by: manishkushare <kushare.manish9@gmail.com>
This commit is contained in:
Srisuma Atluri 2022-11-17 18:18:44 +05:30 committed by GitHub
parent a7ca80e932
commit 8824c00896
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/Editor/Components/RangeSlider.jsx
View file

@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
import Slider, { Range } from 'rc-slider'; import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css'; import 'rc-slider/assets/index.css';
export const RangeSlider = function RangeSlider({ height, properties, styles, setExposedVariable }) { export const RangeSlider = function RangeSlider({ height, properties, styles, setExposedVariable, fireEvent }) {
const { value, min, max, enableTwoHandle } = properties; const { value, min, max, enableTwoHandle } = properties;
const { trackColor, handleColor, lineColor, visibility } = styles; const { trackColor, handleColor, lineColor, visibility } = styles;
const sliderRef = useRef(null); const sliderRef = useRef(null);
@ -69,6 +69,7 @@ export const RangeSlider = function RangeSlider({ height, properties, styles, se
max={max} max={max}
defaultValue={toArray(rangeValue)} defaultValue={toArray(rangeValue)}
onChange={onRangeChange} onChange={onRangeChange}
onAfterChange={() => fireEvent('onChange')}
value={toArray(rangeValue)} value={toArray(rangeValue)}
ref={sliderRef} ref={sliderRef}
trackStyle={rangeStyles.trackStyle} trackStyle={rangeStyles.trackStyle}
@ -83,6 +84,7 @@ export const RangeSlider = function RangeSlider({ height, properties, styles, se
value={sliderValue} value={sliderValue}
ref={sliderRef} ref={sliderRef}
onChange={onSliderChange} onChange={onSliderChange}
onAfterChange={() => fireEvent('onChange')}
trackStyle={{ backgroundColor: trackColor }} trackStyle={{ backgroundColor: trackColor }}
railStyle={{ backgroundColor: lineColor }} railStyle={{ backgroundColor: lineColor }}
handleStyle={{ handleStyle={{

4
frontend/src/Editor/WidgetManager/widgetConfig.js
View file

@ -4122,7 +4122,9 @@ export const widgets = [
}, },
}, },
}, },
events: {}, events: {
onChange: { displayName: 'On change' },
},
styles: { styles: {
lineColor: { lineColor: {
type: 'color', type: 'color',