mirror of
https://github.com/prymitive/karma
synced 2026-08-23 11:56:20 +00:00
chore(ui): use react-range for sliders
This commit is contained in:
Łukasz Mierzwa
committed by
Łukasz Mierzwa
Łukasz Mierzwa
parent
72faf8e813
commit
a6ffc9bd06
Generated
+5
-14
@@ -4740,11 +4740,6 @@
|
||||
"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
|
||||
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
|
||||
},
|
||||
"autobind-decorator": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-1.4.3.tgz",
|
||||
"integrity": "sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E="
|
||||
},
|
||||
"autoprefixer": {
|
||||
"version": "9.8.6",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
|
||||
@@ -17108,15 +17103,6 @@
|
||||
"prop-types": "^15.5.8"
|
||||
}
|
||||
},
|
||||
"react-input-range": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-input-range/-/react-input-range-1.3.0.tgz",
|
||||
"integrity": "sha1-+W0AFjGrgXQX8eJtj5+WhLSCf1k=",
|
||||
"requires": {
|
||||
"autobind-decorator": "^1.3.4",
|
||||
"prop-types": "^15.5.8"
|
||||
}
|
||||
},
|
||||
"react-intersection-observer": {
|
||||
"version": "8.31.0",
|
||||
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.31.0.tgz",
|
||||
@@ -17209,6 +17195,11 @@
|
||||
"react-popper": "^2.2.4"
|
||||
}
|
||||
},
|
||||
"react-range": {
|
||||
"version": "1.8.6",
|
||||
"resolved": "https://registry.npmjs.org/react-range/-/react-range-1.8.6.tgz",
|
||||
"integrity": "sha512-oEWZD//akyrfCpqXUnm4PJvochNqBvFtirlo+Mn40ItBuqLt+xvz+78V2faWl2zW5QzMQgdizxZ4HS5x5Ot0bw=="
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
|
||||
|
||||
+1
-1
@@ -65,13 +65,13 @@
|
||||
"react-highlighter": "0.4.3",
|
||||
"react-hotkeys-hook": "3.0.3",
|
||||
"react-idle-timer": "4.5.1",
|
||||
"react-input-range": "1.3.0",
|
||||
"react-intersection-observer": "8.31.0",
|
||||
"react-js-pagination": "3.0.3",
|
||||
"react-json-pretty": "2.2.0",
|
||||
"react-linkify": "0.2.2",
|
||||
"react-media-hook": "0.4.9",
|
||||
"react-popper": "2.2.4",
|
||||
"react-range": "1.8.6",
|
||||
"react-scripts": "4.0.1",
|
||||
"react-select": "3.2.0",
|
||||
"react-transition-group": "4.4.1",
|
||||
|
||||
@@ -27,23 +27,24 @@ describe("<AlertGroupConfiguration />", () => {
|
||||
const tree = FakeConfiguration();
|
||||
expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(5);
|
||||
|
||||
const slider = tree.find(`Slider [onKeyDown]`).first();
|
||||
const slider = tree.find(`div.input-range-thumb`).first();
|
||||
slider.simulate("click");
|
||||
|
||||
slider.simulate("keyDown", { keyCode: 37 });
|
||||
slider.simulate("keyUp", { keyCode: 37 });
|
||||
slider.simulate("keyDown", { key: "ArrowLeft", keyCode: 37 });
|
||||
slider.simulate("keyUp", { key: "ArrowLeft", keyCode: 37 });
|
||||
|
||||
expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(4);
|
||||
|
||||
slider.simulate("keyDown", { keyCode: 39 });
|
||||
slider.simulate("keyUp", { keyCode: 39 });
|
||||
slider.simulate("keyDown", { keyCode: 39 });
|
||||
slider.simulate("keyUp", { keyCode: 39 });
|
||||
slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
|
||||
expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(6);
|
||||
});
|
||||
|
||||
it("custom interval value is rendered correctly", () => {
|
||||
settingsStore.alertGroupConfig.config.defaultRenderCount = 4;
|
||||
const component = FakeConfiguration();
|
||||
expect(component.find("InputRange").props().value).toBe(4);
|
||||
expect(component.find("Range").props().values).toContain(4);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import React, { FC, useState } from "react";
|
||||
|
||||
import InputRange from "react-input-range";
|
||||
import { Range } from "react-range";
|
||||
|
||||
import { Settings } from "Stores/Settings";
|
||||
|
||||
const AlertGroupConfiguration: FC<{
|
||||
settingsStore: Settings;
|
||||
}> = ({ settingsStore }) => {
|
||||
const [defaultRenderCount, setDefaultRenderCount] = useState<number>(
|
||||
settingsStore.alertGroupConfig.config.defaultRenderCount
|
||||
);
|
||||
const [defaultRenderCount, setDefaultRenderCount] = useState<number[]>([
|
||||
settingsStore.alertGroupConfig.config.defaultRenderCount,
|
||||
]);
|
||||
|
||||
const onChangeComplete = (value: number) => {
|
||||
settingsStore.alertGroupConfig.setDefaultRenderCount(value as number);
|
||||
@@ -17,13 +17,23 @@ const AlertGroupConfiguration: FC<{
|
||||
|
||||
return (
|
||||
<div className="form-group mb-0 text-center">
|
||||
<InputRange
|
||||
minValue={1}
|
||||
maxValue={10}
|
||||
<Range
|
||||
step={1}
|
||||
value={defaultRenderCount}
|
||||
onChange={(value) => setDefaultRenderCount(value as number)}
|
||||
onChangeComplete={(value) => onChangeComplete(value as number)}
|
||||
min={1}
|
||||
max={10}
|
||||
values={defaultRenderCount}
|
||||
onChange={(values) => setDefaultRenderCount(values)}
|
||||
onFinalChange={(values) => onChangeComplete(values[0])}
|
||||
renderTrack={({ props, children }) => (
|
||||
<div className="input-range-track" {...props}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
renderThumb={({ props }) => (
|
||||
<div className="input-range-thumb" {...props}>
|
||||
{defaultRenderCount}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -26,24 +26,25 @@ describe("<AlertGroupWidthConfiguration />", () => {
|
||||
const tree = FakeConfiguration();
|
||||
expect(settingsStore.gridConfig.config.groupWidth).toBe(420);
|
||||
|
||||
const slider = tree.find(`Slider [onKeyDown]`).first();
|
||||
const slider = tree.find(`div.input-range-thumb`).first();
|
||||
slider.simulate("click");
|
||||
|
||||
slider.simulate("keyDown", { keyCode: 37 });
|
||||
slider.simulate("keyUp", { keyCode: 37 });
|
||||
slider.simulate("keyDown", { key: "ArrowLeft", keyCode: 37 });
|
||||
slider.simulate("keyUp", { key: "ArrowLeft", keyCode: 37 });
|
||||
|
||||
expect(settingsStore.gridConfig.config.groupWidth).toBe(400);
|
||||
expect(settingsStore.gridConfig.config.groupWidth).toBe(410);
|
||||
|
||||
slider.simulate("keyDown", { keyCode: 39 });
|
||||
slider.simulate("keyUp", { keyCode: 39 });
|
||||
slider.simulate("keyDown", { keyCode: 39 });
|
||||
slider.simulate("keyUp", { keyCode: 39 });
|
||||
slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
|
||||
|
||||
expect(settingsStore.gridConfig.config.groupWidth).toBe(440);
|
||||
expect(settingsStore.gridConfig.config.groupWidth).toBe(430);
|
||||
});
|
||||
|
||||
it("custom interval value is rendered correctly", () => {
|
||||
settingsStore.gridConfig.config.groupWidth = 455;
|
||||
settingsStore.gridConfig.config.groupWidth = 460;
|
||||
const component = FakeConfiguration();
|
||||
expect(component.find("InputRange").props().value).toBe(455);
|
||||
expect(component.find("Range").props().values).toContain(460);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2,16 +2,16 @@ import React, { FC, useState } from "react";
|
||||
|
||||
import debounce from "lodash.debounce";
|
||||
|
||||
import InputRange from "react-input-range";
|
||||
import { Range } from "react-range";
|
||||
|
||||
import { Settings } from "Stores/Settings";
|
||||
|
||||
const AlertGroupWidthConfiguration: FC<{
|
||||
settingsStore: Settings;
|
||||
}> = ({ settingsStore }) => {
|
||||
const [groupWidth, setGroupWidth] = useState<number>(
|
||||
settingsStore.gridConfig.config.groupWidth
|
||||
);
|
||||
const [groupWidth, setGroupWidth] = useState<number[]>([
|
||||
settingsStore.gridConfig.config.groupWidth,
|
||||
]);
|
||||
|
||||
const onChangeComplete = debounce((value: number) => {
|
||||
settingsStore.gridConfig.config.groupWidth = value as number;
|
||||
@@ -19,13 +19,23 @@ const AlertGroupWidthConfiguration: FC<{
|
||||
|
||||
return (
|
||||
<div className="form-group mb-0 text-center">
|
||||
<InputRange
|
||||
minValue={300}
|
||||
maxValue={800}
|
||||
step={20}
|
||||
value={groupWidth}
|
||||
onChange={(value) => setGroupWidth(value as number)}
|
||||
onChangeComplete={(value) => onChangeComplete(value as number)}
|
||||
<Range
|
||||
step={10}
|
||||
min={300}
|
||||
max={800}
|
||||
values={groupWidth}
|
||||
onChange={(values) => setGroupWidth(values)}
|
||||
onFinalChange={(values) => onChangeComplete(values[0])}
|
||||
renderTrack={({ props, children }) => (
|
||||
<div className="input-range-track" {...props}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
renderThumb={({ props }) => (
|
||||
<div className="input-range-thumb" {...props}>
|
||||
{groupWidth}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -26,24 +26,25 @@ describe("<FetchConfiguration />", () => {
|
||||
const tree = FakeConfiguration();
|
||||
expect(settingsStore.fetchConfig.config.interval).toBe(30);
|
||||
|
||||
const slider = tree.find(`Slider [onKeyDown]`).first();
|
||||
const slider = tree.find(`div.input-range-thumb`).first();
|
||||
slider.simulate("click");
|
||||
|
||||
slider.simulate("keyDown", { keyCode: 37 });
|
||||
slider.simulate("keyUp", { keyCode: 37 });
|
||||
slider.simulate("keyDown", { key: "ArrowLeft", keyCode: 37 });
|
||||
slider.simulate("keyUp", { key: "ArrowLeft", keyCode: 37 });
|
||||
|
||||
expect(settingsStore.fetchConfig.config.interval).toBe(20);
|
||||
|
||||
slider.simulate("keyDown", { keyCode: 39 });
|
||||
slider.simulate("keyUp", { keyCode: 39 });
|
||||
slider.simulate("keyDown", { keyCode: 39 });
|
||||
slider.simulate("keyUp", { keyCode: 39 });
|
||||
slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
|
||||
slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
|
||||
|
||||
expect(settingsStore.fetchConfig.config.interval).toBe(40);
|
||||
});
|
||||
|
||||
it("custom interval value is rendered correctly", () => {
|
||||
settingsStore.fetchConfig.setInterval(66);
|
||||
settingsStore.fetchConfig.setInterval(70);
|
||||
const component = FakeConfiguration();
|
||||
expect(component.find("InputRange").props().value).toBe(66);
|
||||
expect(component.find("Range").props().values).toContain(70);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import React, { FC, useState } from "react";
|
||||
|
||||
import InputRange from "react-input-range";
|
||||
import { Range } from "react-range";
|
||||
|
||||
import { Settings } from "Stores/Settings";
|
||||
|
||||
const FetchConfiguration: FC<{
|
||||
settingsStore: Settings;
|
||||
}> = ({ settingsStore }) => {
|
||||
const [fetchInterval, setFetchInterval] = useState<number>(
|
||||
settingsStore.fetchConfig.config.interval
|
||||
);
|
||||
const [fetchInterval, setFetchInterval] = useState<number[]>([
|
||||
settingsStore.fetchConfig.config.interval,
|
||||
]);
|
||||
|
||||
const onChangeComplete = (value: number) => {
|
||||
settingsStore.fetchConfig.setInterval(value);
|
||||
@@ -17,14 +17,23 @@ const FetchConfiguration: FC<{
|
||||
|
||||
return (
|
||||
<div className="form-group mb-0 text-center">
|
||||
<InputRange
|
||||
minValue={10}
|
||||
maxValue={120}
|
||||
<Range
|
||||
step={10}
|
||||
value={fetchInterval}
|
||||
formatLabel={(value) => `${value}s`}
|
||||
onChange={(value) => setFetchInterval(value as number)}
|
||||
onChangeComplete={(value) => onChangeComplete(value as number)}
|
||||
min={10}
|
||||
max={120}
|
||||
values={fetchInterval}
|
||||
onChange={(values) => setFetchInterval(values)}
|
||||
onFinalChange={(values) => onChangeComplete(values[0])}
|
||||
renderTrack={({ props, children }) => (
|
||||
<div className="input-range-track" {...props}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
renderThumb={({ props }) => (
|
||||
<div className="input-range-thumb" {...props}>
|
||||
{fetchInterval}s
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
+12
-35
@@ -3,43 +3,20 @@
|
||||
exports[`<AlertGroupConfiguration /> matches snapshot with default values 1`] = `
|
||||
"
|
||||
<div class=\\"form-group mb-0 text-center\\">
|
||||
<div aria-disabled=\\"false\\"
|
||||
class=\\"input-range\\"
|
||||
<div class=\\"input-range-track\\"
|
||||
style=\\"transform: scale(1); cursor: pointer;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--min\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
1
|
||||
</span>
|
||||
</span>
|
||||
<div class=\\"input-range__track input-range__track--background\\">
|
||||
<div style=\\"left: 0%; width: 44.44444444444444%;\\"
|
||||
class=\\"input-range__track input-range__track--active\\"
|
||||
>
|
||||
</div>
|
||||
<span class=\\"input-range__slider-container\\"
|
||||
style=\\"position: absolute; left: 44.44444444444444%;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--value\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
5
|
||||
</span>
|
||||
</span>
|
||||
<div aria-valuemax=\\"10\\"
|
||||
aria-valuemin=\\"1\\"
|
||||
aria-valuenow=\\"5\\"
|
||||
class=\\"input-range__slider\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
tabindex=\\"0\\"
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
<div class=\\"input-range-thumb\\"
|
||||
style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
|
||||
tabindex=\\"0\\"
|
||||
aria-valuemax=\\"10\\"
|
||||
aria-valuemin=\\"1\\"
|
||||
aria-valuenow=\\"5\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<span class=\\"input-range__label input-range__label--max\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
10
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
|
||||
+12
-35
@@ -3,43 +3,20 @@
|
||||
exports[`<AlertGroupWidthConfiguration /> matches snapshot with default values 1`] = `
|
||||
"
|
||||
<div class=\\"form-group mb-0 text-center\\">
|
||||
<div aria-disabled=\\"false\\"
|
||||
class=\\"input-range\\"
|
||||
<div class=\\"input-range-track\\"
|
||||
style=\\"transform: scale(1); cursor: pointer;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--min\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
300
|
||||
</span>
|
||||
</span>
|
||||
<div class=\\"input-range__track input-range__track--background\\">
|
||||
<div style=\\"left: 0%; width: 24%;\\"
|
||||
class=\\"input-range__track input-range__track--active\\"
|
||||
>
|
||||
</div>
|
||||
<span class=\\"input-range__slider-container\\"
|
||||
style=\\"position: absolute; left: 24%;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--value\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
420
|
||||
</span>
|
||||
</span>
|
||||
<div aria-valuemax=\\"800\\"
|
||||
aria-valuemin=\\"300\\"
|
||||
aria-valuenow=\\"420\\"
|
||||
class=\\"input-range__slider\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
tabindex=\\"0\\"
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
<div class=\\"input-range-thumb\\"
|
||||
style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
|
||||
tabindex=\\"0\\"
|
||||
aria-valuemax=\\"800\\"
|
||||
aria-valuemin=\\"300\\"
|
||||
aria-valuenow=\\"420\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
>
|
||||
420
|
||||
</div>
|
||||
<span class=\\"input-range__label input-range__label--max\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
800
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
|
||||
+12
-35
@@ -3,43 +3,20 @@
|
||||
exports[`<FetchConfiguration /> matches snapshot with default values 1`] = `
|
||||
"
|
||||
<div class=\\"form-group mb-0 text-center\\">
|
||||
<div aria-disabled=\\"false\\"
|
||||
class=\\"input-range\\"
|
||||
<div class=\\"input-range-track\\"
|
||||
style=\\"transform: scale(1); cursor: pointer;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--min\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
10s
|
||||
</span>
|
||||
</span>
|
||||
<div class=\\"input-range__track input-range__track--background\\">
|
||||
<div style=\\"left: 0%; width: 18.181818181818183%;\\"
|
||||
class=\\"input-range__track input-range__track--active\\"
|
||||
>
|
||||
</div>
|
||||
<span class=\\"input-range__slider-container\\"
|
||||
style=\\"position: absolute; left: 18.181818181818183%;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--value\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
30s
|
||||
</span>
|
||||
</span>
|
||||
<div aria-valuemax=\\"120\\"
|
||||
aria-valuemin=\\"10\\"
|
||||
aria-valuenow=\\"30\\"
|
||||
class=\\"input-range__slider\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
tabindex=\\"0\\"
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
<div class=\\"input-range-thumb\\"
|
||||
style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
|
||||
tabindex=\\"0\\"
|
||||
aria-valuemax=\\"120\\"
|
||||
aria-valuemin=\\"10\\"
|
||||
aria-valuenow=\\"30\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
>
|
||||
30s
|
||||
</div>
|
||||
<span class=\\"input-range__label input-range__label--max\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
120s
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
|
||||
@@ -30,43 +30,20 @@ exports[`<Configuration /> matches snapshot 1`] = `
|
||||
</div>
|
||||
<div class=\\"card-body my-2\\">
|
||||
<div class=\\"form-group mb-0 text-center\\">
|
||||
<div aria-disabled=\\"false\\"
|
||||
class=\\"input-range\\"
|
||||
<div class=\\"input-range-track\\"
|
||||
style=\\"transform: scale(1); cursor: pointer;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--min\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
10s
|
||||
</span>
|
||||
</span>
|
||||
<div class=\\"input-range__track input-range__track--background\\">
|
||||
<div style=\\"left: 0%; width: 18.181818181818183%;\\"
|
||||
class=\\"input-range__track input-range__track--active\\"
|
||||
>
|
||||
</div>
|
||||
<span class=\\"input-range__slider-container\\"
|
||||
style=\\"position: absolute; left: 18.181818181818183%;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--value\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
30s
|
||||
</span>
|
||||
</span>
|
||||
<div aria-valuemax=\\"120\\"
|
||||
aria-valuemin=\\"10\\"
|
||||
aria-valuenow=\\"30\\"
|
||||
class=\\"input-range__slider\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
tabindex=\\"0\\"
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
<div class=\\"input-range-thumb\\"
|
||||
style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
|
||||
tabindex=\\"0\\"
|
||||
aria-valuemax=\\"120\\"
|
||||
aria-valuemin=\\"10\\"
|
||||
aria-valuenow=\\"30\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
>
|
||||
30s
|
||||
</div>
|
||||
<span class=\\"input-range__label input-range__label--max\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
120s
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -249,43 +226,20 @@ exports[`<Configuration /> matches snapshot 1`] = `
|
||||
</div>
|
||||
<div class=\\"card-body my-2\\">
|
||||
<div class=\\"form-group mb-0 text-center\\">
|
||||
<div aria-disabled=\\"false\\"
|
||||
class=\\"input-range\\"
|
||||
<div class=\\"input-range-track\\"
|
||||
style=\\"transform: scale(1); cursor: pointer;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--min\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
300
|
||||
</span>
|
||||
</span>
|
||||
<div class=\\"input-range__track input-range__track--background\\">
|
||||
<div style=\\"left: 0%; width: 24%;\\"
|
||||
class=\\"input-range__track input-range__track--active\\"
|
||||
>
|
||||
</div>
|
||||
<span class=\\"input-range__slider-container\\"
|
||||
style=\\"position: absolute; left: 24%;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--value\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
420
|
||||
</span>
|
||||
</span>
|
||||
<div aria-valuemax=\\"800\\"
|
||||
aria-valuemin=\\"300\\"
|
||||
aria-valuenow=\\"420\\"
|
||||
class=\\"input-range__slider\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
tabindex=\\"0\\"
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
<div class=\\"input-range-thumb\\"
|
||||
style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
|
||||
tabindex=\\"0\\"
|
||||
aria-valuemax=\\"800\\"
|
||||
aria-valuemin=\\"300\\"
|
||||
aria-valuenow=\\"420\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
>
|
||||
420
|
||||
</div>
|
||||
<span class=\\"input-range__label input-range__label--max\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
800
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -317,43 +271,20 @@ exports[`<Configuration /> matches snapshot 1`] = `
|
||||
</div>
|
||||
<div class=\\"card-body my-2\\">
|
||||
<div class=\\"form-group mb-0 text-center\\">
|
||||
<div aria-disabled=\\"false\\"
|
||||
class=\\"input-range\\"
|
||||
<div class=\\"input-range-track\\"
|
||||
style=\\"transform: scale(1); cursor: pointer;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--min\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
1
|
||||
</span>
|
||||
</span>
|
||||
<div class=\\"input-range__track input-range__track--background\\">
|
||||
<div style=\\"left: 0%; width: 44.44444444444444%;\\"
|
||||
class=\\"input-range__track input-range__track--active\\"
|
||||
>
|
||||
</div>
|
||||
<span class=\\"input-range__slider-container\\"
|
||||
style=\\"position: absolute; left: 44.44444444444444%;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--value\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
5
|
||||
</span>
|
||||
</span>
|
||||
<div aria-valuemax=\\"10\\"
|
||||
aria-valuemin=\\"1\\"
|
||||
aria-valuenow=\\"5\\"
|
||||
class=\\"input-range__slider\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
tabindex=\\"0\\"
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
<div class=\\"input-range-thumb\\"
|
||||
style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
|
||||
tabindex=\\"0\\"
|
||||
aria-valuemax=\\"10\\"
|
||||
aria-valuemin=\\"1\\"
|
||||
aria-valuenow=\\"5\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<span class=\\"input-range__label input-range__label--max\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
10
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -49,43 +49,20 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
</div>
|
||||
<div class=\\"card-body my-2\\">
|
||||
<div class=\\"form-group mb-0 text-center\\">
|
||||
<div aria-disabled=\\"false\\"
|
||||
class=\\"input-range\\"
|
||||
<div class=\\"input-range-track\\"
|
||||
style=\\"transform: scale(1); cursor: pointer;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--min\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
10s
|
||||
</span>
|
||||
</span>
|
||||
<div class=\\"input-range__track input-range__track--background\\">
|
||||
<div style=\\"left: 0%; width: 18.181818181818183%;\\"
|
||||
class=\\"input-range__track input-range__track--active\\"
|
||||
>
|
||||
</div>
|
||||
<span class=\\"input-range__slider-container\\"
|
||||
style=\\"position: absolute; left: 18.181818181818183%;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--value\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
30s
|
||||
</span>
|
||||
</span>
|
||||
<div aria-valuemax=\\"120\\"
|
||||
aria-valuemin=\\"10\\"
|
||||
aria-valuenow=\\"30\\"
|
||||
class=\\"input-range__slider\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
tabindex=\\"0\\"
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
<div class=\\"input-range-thumb\\"
|
||||
style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
|
||||
tabindex=\\"0\\"
|
||||
aria-valuemax=\\"120\\"
|
||||
aria-valuemin=\\"10\\"
|
||||
aria-valuenow=\\"30\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
>
|
||||
30s
|
||||
</div>
|
||||
<span class=\\"input-range__label input-range__label--max\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
120s
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -268,43 +245,20 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
</div>
|
||||
<div class=\\"card-body my-2\\">
|
||||
<div class=\\"form-group mb-0 text-center\\">
|
||||
<div aria-disabled=\\"false\\"
|
||||
class=\\"input-range\\"
|
||||
<div class=\\"input-range-track\\"
|
||||
style=\\"transform: scale(1); cursor: pointer;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--min\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
300
|
||||
</span>
|
||||
</span>
|
||||
<div class=\\"input-range__track input-range__track--background\\">
|
||||
<div style=\\"left: 0%; width: 24%;\\"
|
||||
class=\\"input-range__track input-range__track--active\\"
|
||||
>
|
||||
</div>
|
||||
<span class=\\"input-range__slider-container\\"
|
||||
style=\\"position: absolute; left: 24%;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--value\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
420
|
||||
</span>
|
||||
</span>
|
||||
<div aria-valuemax=\\"800\\"
|
||||
aria-valuemin=\\"300\\"
|
||||
aria-valuenow=\\"420\\"
|
||||
class=\\"input-range__slider\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
tabindex=\\"0\\"
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
<div class=\\"input-range-thumb\\"
|
||||
style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
|
||||
tabindex=\\"0\\"
|
||||
aria-valuemax=\\"800\\"
|
||||
aria-valuemin=\\"300\\"
|
||||
aria-valuenow=\\"420\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
>
|
||||
420
|
||||
</div>
|
||||
<span class=\\"input-range__label input-range__label--max\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
800
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -336,43 +290,20 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
|
||||
</div>
|
||||
<div class=\\"card-body my-2\\">
|
||||
<div class=\\"form-group mb-0 text-center\\">
|
||||
<div aria-disabled=\\"false\\"
|
||||
class=\\"input-range\\"
|
||||
<div class=\\"input-range-track\\"
|
||||
style=\\"transform: scale(1); cursor: pointer;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--min\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
1
|
||||
</span>
|
||||
</span>
|
||||
<div class=\\"input-range__track input-range__track--background\\">
|
||||
<div style=\\"left: 0%; width: 44.44444444444444%;\\"
|
||||
class=\\"input-range__track input-range__track--active\\"
|
||||
>
|
||||
</div>
|
||||
<span class=\\"input-range__slider-container\\"
|
||||
style=\\"position: absolute; left: 44.44444444444444%;\\"
|
||||
>
|
||||
<span class=\\"input-range__label input-range__label--value\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
5
|
||||
</span>
|
||||
</span>
|
||||
<div aria-valuemax=\\"10\\"
|
||||
aria-valuemin=\\"1\\"
|
||||
aria-valuenow=\\"5\\"
|
||||
class=\\"input-range__slider\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
tabindex=\\"0\\"
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
<div class=\\"input-range-thumb\\"
|
||||
style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
|
||||
tabindex=\\"0\\"
|
||||
aria-valuemax=\\"10\\"
|
||||
aria-valuemin=\\"1\\"
|
||||
aria-valuenow=\\"5\\"
|
||||
draggable=\\"false\\"
|
||||
role=\\"slider\\"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<span class=\\"input-range__label input-range__label--max\\">
|
||||
<span class=\\"input-range__label-container\\">
|
||||
10
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,16 @@
|
||||
$input-range-font-family: $font-family-sans-serif;
|
||||
$input-range-primary-color: $primary;
|
||||
$input-range-disabled-color: $text-muted;
|
||||
.input-range-track {
|
||||
border-radius: 0.3rem;
|
||||
height: 0.3rem;
|
||||
background-color: $input-range-track-background;
|
||||
}
|
||||
|
||||
@import "~react-input-range/src/scss/input-range/input-range";
|
||||
.input-range-thumb {
|
||||
color: $input-range-thumb-font-color;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
height: 1.2rem;
|
||||
min-width: 1.2rem;
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 0.3rem;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
@@ -92,8 +92,8 @@ $bg-focused: darken($blue, 5%);
|
||||
$components-date-range-today-color: $white;
|
||||
$components-date-range-sub-color: $white;
|
||||
|
||||
$input-range-neutral-color: $gray-300;
|
||||
$input-range-neutral-light-color: $secondary;
|
||||
$input-range-track-background: $secondary;
|
||||
$input-range-thumb-font-color: $white;
|
||||
|
||||
$color-default: #708090;
|
||||
|
||||
|
||||
@@ -74,8 +74,8 @@ $bg-focused: lighten($blue, 5%);
|
||||
$components-date-range-today-color: $black;
|
||||
$components-date-range-sub-color: $black;
|
||||
|
||||
$input-range-neutral-color: $dark;
|
||||
$input-range-neutral-light-color: $gray-400;
|
||||
$input-range-track-background: $gray-400;
|
||||
$input-range-thumb-font-color: $white;
|
||||
|
||||
$color-default: #708090;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user