DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(slider): interaction with o-input should now work as intended

This commit is contained in:
perry-C 2021-08-07 17:28:05 +08:00
parent b310042674
commit 97b9dec5fd
5 changed files with 138 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/slider/demo/js-demo/index.html
View File

@ -26,7 +26,6 @@
max="10"
value="2"
tooltip
step="2"
id="single-range-demo"
></o-slider>
<div style="text-align: center">double slider with tool-tip</div>

2
components/slider/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@omiu/slider",
"version": "0.0.4",
"version": "0.0.5",
"description": "Slider",
"main": "src/index.js",
"module": "src/index.esm.js",

77
components/slider/src/index.js
View File

@ -3031,18 +3031,34 @@ var OSlider = /** @class */ (function (_super) {
function OSlider() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.sliderMax = _this.props.max;
_this._onGetValue = function () {
return _this.__$value1;
};
_this._onSetValue = function (value) {
_this.__$value1 = value;
_this.props.value = value;
_this.setAttribute('value', value);
};
_this._onGetValue2 = function () {
return _this.__$value2;
};
_this._onSetValue2 = function (value) {
_this.__$value2 = value;
_this.props.second_value = value;
_this.setAttribute('second_value', value);
};
_this.handleSliderOne = function () {
var first_value = parseInt(_this.slider1.value);
if (first_value <= _this.value2 || _this.props.range === 'single') {
if (first_value <= _this.__$value2 || _this.props.range === 'single') {
// if the slider 1 has not exceeded slider2 or it is a single range slider
// assign value straight away
_this.value1 = first_value;
_this.__$value1 = first_value;
}
if (_this.props.range === 'single') {
_this.fire('change', _this.value1);
_this.fire('input', _this.__$value1);
}
else {
_this.fire('change', [_this.value1, _this.value2]);
_this.fire('input', [_this.__$value1, _this.__$value2]);
}
_this.fillColor();
_this.update();
@ -3050,18 +3066,20 @@ var OSlider = /** @class */ (function (_super) {
_this.handleSliderTwo = function () {
var second_value = parseInt(_this.slider2.value);
//we only have one case if slider two exists
if (second_value >= _this.value1) {
_this.value2 = second_value;
if (second_value >= _this.__$value1) {
_this.__$value2 = second_value;
}
_this.fire('change', [_this.value1, _this.value2]);
_this.fire('input', [_this.__$value1, _this.__$value2]);
_this.fillColor();
_this.update();
};
_this.fillColor = function () {
var percent1 = _this.props.range === 'double' ? (_this.value1 / _this.props.max) * 100 : 0;
var percent1 = _this.props.range === 'double'
? (_this.__$value1 / _this.props.max) * 100
: 0;
var percent2 = _this.props.range === 'double'
? (_this.value2 / _this.props.max) * 100
: (_this.value1 / _this.props.max) * 100;
? (_this.__$value2 / _this.props.max) * 100
: (_this.__$value1 / _this.props.max) * 100;
var lowerColor = '#07c160';
var upperColor = '#ffffff';
if (_this.props.disabled) {
@ -3074,10 +3092,18 @@ var OSlider = /** @class */ (function (_super) {
return _this;
}
OSlider.prototype.install = function () {
this.value1 = this.props.value;
this.__$value1 = this.props.value;
this.props.range === 'double'
? (this.value2 = this.props.second_value)
: (this.value2 = null);
? (this.__$value2 = this.props.second_value)
: (this.__$value2 = null);
Object.defineProperty(this, 'value', {
get: this._onGetValue,
set: this._onSetValue,
});
Object.defineProperty(this, 'second_value', {
get: this._onGetValue2,
set: this._onSetValue2,
});
};
OSlider.prototype.installed = function () {
this.fillColor();
@ -3086,15 +3112,6 @@ var OSlider = /** @class */ (function (_super) {
this.props.orient === 'vertical' &&
(host.style.transform = 'rotate(-90deg)');
};
OSlider.prototype.receiveProps = function () {
this.handleSliderOne();
this.handleSliderTwo();
this.update();
};
OSlider.prototype.handleInput = function (evt) {
this.value1 = evt.detail;
console.log(this.value1);
};
OSlider.prototype.render = function (props) {
var _this = this;
var cls = omi_1.extractClass(props, 'slider-container', {
@ -3107,24 +3124,24 @@ var OSlider = /** @class */ (function (_super) {
_this.rootNode = e;
} }),
this.props.tooltip ? (omi_1.h("o-tooltip", { class: "tooltip", position: "top", effect: "dark", content: this.props.range === 'double'
? this.value1 + " , " + this.value2
: this.value1 },
omi_1.h("input", { class: "o-slider", type: "range", min: props.min, max: props.max, step: props.step, value: this.value1, onInput: this.handleSliderOne, id: "slider-1", ref: function (e) {
? this.__$value1 + " , " + this.__$value2
: this.__$value1 },
omi_1.h("input", { class: "o-slider", type: "range", min: props.min, max: props.max, step: props.step, value: this.__$value1, onInput: this.handleSliderOne, id: "slider-1", ref: function (e) {
_this.slider1 = e;
} }))) : (
/* ========================SINGLE-NO-TOOLTIP================================ */
omi_1.h("input", { class: "o-slider", type: "range", min: props.min, max: props.max, value: this.value1, onInput: this.handleSliderOne, id: "slider-1", ref: function (e) {
omi_1.h("input", { class: "o-slider", type: "range", min: props.min, max: props.max, value: this.__$value1, onInput: this.handleSliderOne, id: "slider-1", ref: function (e) {
_this.slider1 = e;
} })),
this.props.range === 'double' &&
(this.props.tooltip ? (omi_1.h("o-tooltip", { class: "tooltip", position: "top", effect: "dark", content: this.props.range === 'double'
? this.value1 + " , " + this.value2
: this.value1 },
omi_1.h("input", { class: "o-slider", type: "range", min: props.min, max: props.max, value: this.value2, onInput: this.handleSliderTwo, id: "slider-2", ref: function (e) {
? this.__$value1 + " , " + this.__$value2
: this.__$value1 },
omi_1.h("input", { class: "o-slider", type: "range", min: props.min, max: props.max, value: this.__$value2, onInput: this.handleSliderTwo, id: "slider-2", ref: function (e) {
_this.slider2 = e;
} }))) : (
/* ========================DOUBLE-NO-TOOLTIP============================== */
omi_1.h("input", { class: "o-slider", type: "range", min: props.min, max: props.max, value: this.value2, onInput: this.handleSliderTwo, id: "slider-2", ref: function (e) {
omi_1.h("input", { class: "o-slider", type: "range", min: props.min, max: props.max, value: this.__$value2, onInput: this.handleSliderTwo, id: "slider-2", ref: function (e) {
_this.slider2 = e;
} }))),
omi_1.h("div", { class: "slider-track", ref: function (e) {

2
components/slider/src/index.js.map
View File

File diff suppressed because one or more lines are too long

158
components/slider/src/index.tsx
View File

@ -50,65 +50,49 @@ export default class OSlider extends WeElement<Props> {
reversed: Boolean,
}
value1: number
value2: number
__$value1: number
__$value2: number
rootNode
slider1
slider2
sliderTrack
sliderMax = this.props.max
handleSliderOne = () => {
const first_value = parseInt(this.slider1.value)
if (first_value <= this.value2 || this.props.range === 'single') {
// if the slider 1 has not exceeded slider2 or it is a single range slider
// assign value straight away
this.value1 = first_value
}
if (this.props.range === 'single') {
this.fire('change', this.value1)
} else {
this.fire('change', [this.value1, this.value2])
}
this.fillColor()
this.update()
}
handleSliderTwo = () => {
const second_value = parseInt(this.slider2.value)
//we only have one case if slider two exists
if (second_value >= this.value1) {
this.value2 = second_value
}
this.fire('change', [this.value1, this.value2])
this.fillColor()
this.update()
}
fillColor = () => {
let percent1 =
this.props.range === 'double' ? (this.value1 / this.props.max) * 100 : 0
let percent2 =
this.props.range === 'double'
? (this.value2 / this.props.max) * 100
: (this.value1 / this.props.max) * 100
let lowerColor = '#07c160'
let upperColor = '#ffffff'
if (this.props.disabled) {
lowerColor = '#c0c4cc'
}
this.props.range === 'double'
? (this.sliderTrack.style.background = `linear-gradient(to right, ${upperColor} ${percent1}% , ${lowerColor} ${percent1}% , ${lowerColor} ${percent2}%, ${upperColor} ${percent2}%)`)
: (this.sliderTrack.style.background = `linear-gradient(to right, ${lowerColor} ${percent1}% , ${lowerColor} ${percent1}% , ${lowerColor} ${percent2}%, ${upperColor} ${percent2}%)`)
}
rootNode: HTMLElement
slider1: HTMLInputElement
slider2: HTMLInputElement
sliderTrack: HTMLElement
sliderMax: number = this.props.max
install() {
this.value1 = this.props.value
this.__$value1 = this.props.value
this.props.range === 'double'
? (this.value2 = this.props.second_value)
: (this.value2 = null)
? (this.__$value2 = this.props.second_value)
: (this.__$value2 = null)
Object.defineProperty(this, 'value', {
get: this._onGetValue,
set: this._onSetValue,
})
Object.defineProperty(this, 'second_value', {
get: this._onGetValue2,
set: this._onSetValue2,
})
}
_onGetValue = () => {
return this.__$value1
}
_onSetValue = (value) => {
this.__$value1 = value
this.props.value = value
this.setAttribute('value', value)
}
_onGetValue2 = () => {
return this.__$value2
}
_onSetValue2 = (value) => {
this.__$value2 = value
this.props.second_value = value
this.setAttribute('second_value', value)
}
installed() {
@ -119,15 +103,51 @@ export default class OSlider extends WeElement<Props> {
(host.style.transform = 'rotate(-90deg)')
}
receiveProps() {
this.handleSliderOne()
this.handleSliderTwo()
handleSliderOne = () => {
const first_value = parseInt(this.slider1.value)
if (first_value <= this.__$value2 || this.props.range === 'single') {
// if the slider 1 has not exceeded slider2 or it is a single range slider
// assign value straight away
this.__$value1 = first_value
}
if (this.props.range === 'single') {
this.fire('input', this.__$value1)
} else {
this.fire('input', [this.__$value1, this.__$value2])
}
this.fillColor()
this.update()
}
handleInput(evt) {
this.value1 = evt.detail
console.log(this.value1)
handleSliderTwo = () => {
const second_value = parseInt(this.slider2.value)
//we only have one case if slider two exists
if (second_value >= this.__$value1) {
this.__$value2 = second_value
}
this.fire('input', [this.__$value1, this.__$value2])
this.fillColor()
this.update()
}
fillColor = () => {
let percent1 =
this.props.range === 'double'
? (this.__$value1 / this.props.max) * 100
: 0
let percent2 =
this.props.range === 'double'
? (this.__$value2 / this.props.max) * 100
: (this.__$value1 / this.props.max) * 100
let lowerColor = '#07c160'
let upperColor = '#ffffff'
if (this.props.disabled) {
lowerColor = '#c0c4cc'
}
this.props.range === 'double'
? (this.sliderTrack.style.background = `linear-gradient(to right, ${upperColor} ${percent1}% , ${lowerColor} ${percent1}% , ${lowerColor} ${percent2}%, ${upperColor} ${percent2}%)`)
: (this.sliderTrack.style.background = `linear-gradient(to right, ${lowerColor} ${percent1}% , ${lowerColor} ${percent1}% , ${lowerColor} ${percent2}%, ${upperColor} ${percent2}%)`)
}
render(props) {
@ -153,8 +173,8 @@ export default class OSlider extends WeElement<Props> {
effect="dark"
content={
this.props.range === 'double'
? `${this.value1} , ${this.value2}`
: this.value1
? `${this.__$value1} , ${this.__$value2}`
: this.__$value1
}
>
<input
@ -163,7 +183,7 @@ export default class OSlider extends WeElement<Props> {
min={props.min}
max={props.max}
step={props.step}
value={this.value1}
value={this.__$value1}
onInput={this.handleSliderOne}
id="slider-1"
ref={(e) => {
@ -178,7 +198,7 @@ export default class OSlider extends WeElement<Props> {
type="range"
min={props.min}
max={props.max}
value={this.value1}
value={this.__$value1}
onInput={this.handleSliderOne}
id="slider-1"
ref={(e) => {
@ -197,8 +217,8 @@ export default class OSlider extends WeElement<Props> {
effect="dark"
content={
this.props.range === 'double'
? `${this.value1} , ${this.value2}`
: this.value1
? `${this.__$value1} , ${this.__$value2}`
: this.__$value1
}
>
<input
@ -206,7 +226,7 @@ export default class OSlider extends WeElement<Props> {
type="range"
min={props.min}
max={props.max}
value={this.value2}
value={this.__$value2}
onInput={this.handleSliderTwo}
id="slider-2"
ref={(e) => {
@ -221,7 +241,7 @@ export default class OSlider extends WeElement<Props> {
type="range"
min={props.min}
max={props.max}
value={this.value2}
value={this.__$value2}
onInput={this.handleSliderTwo}
id="slider-2"
ref={(e) => {