Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider Label and Value feature #229

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Prev Previous commit
Next Next commit
add minTemperature and maxTemperature to Input props
lenadax committed Apr 14, 2022
commit 983814af1614f8361219752592575a17bc73fce9
2 changes: 2 additions & 0 deletions dist/Input.d.ts
Original file line number Diff line number Diff line change
@@ -7,6 +7,8 @@ interface IroInputProps {
layoutDirection: LayoutDirection;
handleRadius: number;
disabled: boolean;
minTemperature: number;
maxTemperature: number;
}
export declare function IroInput(props: IroInputProps): h.JSX.Element;
export declare namespace IroInput {
178 changes: 90 additions & 88 deletions dist/iro.es.js
Original file line number Diff line number Diff line change
@@ -508,7 +508,7 @@ var IroColor = /*#__PURE__*/function () {
},
set: function set(value) {
this.hsv = _extends({}, IroColor.rgbToHsv(value), {
a: value.a === undefined ? 1 : value.a
a: value.a === undefined ? this.alpha : value.a
});
}
}, {
@@ -537,7 +537,7 @@ var IroColor = /*#__PURE__*/function () {
},
set: function set(value) {
this.hsv = _extends({}, IroColor.hslToHsv(value), {
a: value.a === undefined ? 1 : value.a
a: value.a === undefined ? this.alpha : value.a
});
}
}, {
@@ -830,90 +830,6 @@ function getSliderValueFromInput(props, x, y) {
return percent;
}
}
/**
* @desc Clamp slider value between min and max values
* @param type - props.sliderType
* @param value - value to clamp
*/

function clampSliderValue(type, value) {
function clamp(num, min, max) {
return Math.min(Math.max(num, min), max);
}

switch (type) {
case 'hue':
return clamp(value, 0, 360);

case 'saturation':
case 'value':
return clamp(value, 0, 100);

case 'red':
case 'green':
case 'blue':
return clamp(value, 0, 255);

case 'alpha':
return clamp(value, 0, 1);

case 'kelvin':
// TODO
return 0;
}
}
/**
* @desc Get the current slider value from input field input
* @param props - slider props
* @param e - KeyboardEvent
*/

function getSliderValueFromInputField(props, e) {
// regex for digit or dot (.)
if (!/^([0-9]|\.)$/i.test(e.key)) {
return 0;
}

var maxlen;

if (props.sliderType === 'alpha') {
maxlen = 4;
} else if (props.sliderType === 'kelvin') {
maxlen = 10;
} else {
maxlen = 3;
}

var target = e.target;
var valueString = target.value.toString();

if (target.selectionStart !== undefined) {
valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd);
} else {
valueString = valueString.length + 1 > maxlen ? valueString : valueString + e.key.toString();
}

var valueNum = +valueString;
return clampSliderValue(props.sliderType, valueNum);
}
/**
* @desc Get the current slider value from clipboard data
* @param props - slider props
* @param e - ClipboardEvent
*/

function getSliderValueFromClipboard(props, e) {
// allow only whole or decimal numbers
var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i;
var valueString = e.clipboardData.getData('text');

if (!r.test(valueString)) {
return 0;
}

var valueNum = +valueString;
return clampSliderValue(props.sliderType, valueNum);
}
/**
* @desc Get the current handle position for a given color
* @param props - slider props
@@ -1009,6 +925,92 @@ function getSliderGradient(props, color) {
}
}

/**
* @desc Clamp slider value between min and max values
* @param type - props.sliderType
* @param value - value to clamp
*/
function clampSliderValue(props, value) {
function clamp(num, min, max) {
return Math.min(Math.max(num, min), max);
}

switch (props.sliderType) {
case 'hue':
return clamp(value, 0, 360);

case 'saturation':
case 'value':
return clamp(value, 0, 100);

case 'red':
case 'green':
case 'blue':
return clamp(value, 0, 255);

case 'alpha':
return clamp(value, 0, 1);

case 'kelvin':
// TODO
var minTemperature = props.minTemperature,
maxTemperature = props.maxTemperature;
return clamp(value, minTemperature, maxTemperature);
}
}
/**
* @desc Get the current slider value from input field input
* @param props - slider props
* @param e - KeyboardEvent
*/

function getSliderValueFromInputField(props, e) {
// regex for digit or dot (.)
if (!/^([0-9]|\.)$/i.test(e.key)) {
return 0;
}

var maxlen;

if (props.sliderType === 'alpha') {
maxlen = 4;
} else if (props.sliderType === 'kelvin') {
maxlen = 5;
} else {
maxlen = 3;
}

var target = e.target;
var valueString = target.value.toString();

if (target.selectionStart !== undefined) {
valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd);
} else {
valueString = valueString.length + 1 > maxlen ? valueString : valueString + e.key.toString();
}

var valueNum = +valueString;
return clampSliderValue(props, valueNum);
}
/**
* @desc Get the current slider value from clipboard data
* @param props - slider props
* @param e - ClipboardEvent
*/

function getSliderValueFromClipboard(props, e) {
// allow only whole or decimal numbers
var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i;
var valueString = e.clipboardData.getData('text');

if (!r.test(valueString)) {
return 0;
}

var valueNum = +valueString;
return clampSliderValue(props, valueNum);
}

var TAU = Math.PI * 2; // javascript's modulo operator doesn't produce positive numbers with negative input
// https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e

@@ -1423,7 +1425,7 @@ function IroInput(props) {
} }, name),
v("input", { onKeyPress: onKeypress, onPaste: onPaste, className: "IroSliderInput", style: {
display: 'inline-block',
width: cssValue(33),
width: type === 'kelvin' ? cssValue(40) : cssValue(33),
height: cssValue(18),
fontSize: '12px',
marginLeft: props.layoutDirection === 'vertical' ?
@@ -1474,7 +1476,7 @@ function IroSlider(props) {
background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)},
cssBorderStyles(props)) }),
v(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y })),
props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection })))); }));
props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection, minTemperature: props.minTemperature, maxTemperature: props.maxTemperature })))); }));
}
IroSlider.defaultProps = Object.assign({}, sliderDefaultOptions);

Loading