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

feat(slider): tooltips

This commit is contained in:
perry-C 2021-08-06 22:03:43 +08:00
parent 0a54a7240e
commit ffedb24d17
7 changed files with 2983 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,28 @@
</a>
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
<script src="../../src/index.js"></script>
<div style="text-align: center">basic slider</div>
<o-slider min="0" max="10" value="2" id="single-range-demo"></o-slider>
<div style="text-align: center">single slider with tool-tip</div>
<o-slider
min="0"
max="10"
value="2"
tooltip
step="2"
id="single-range-demo"
></o-slider>
<div style="text-align: center">double slider with tool-tip</div>
<o-slider
min="0"
max="10"
value="2"
second_value="10"
range="double"
tooltip
id="double-range-demo"
></o-slider>
<div style="text-align: center">square slider</div>
<o-slider
min="0"
max="10"
@ -26,6 +47,7 @@
shape="square"
id="square-single-range-demo"
></o-slider>
<div style="text-align: center">disabled slider</div>
<o-slider
min="0"
max="10"
@ -33,6 +55,7 @@
disabled
id="disabled-single-range-demo"
></o-slider>
<div style="text-align: center">double slider</div>
<o-slider
min="0"
max="200"
@ -41,6 +64,7 @@
range="double"
id="double-range-demo"
></o-slider>
<div style="text-align: center">disabled double slider</div>
<o-slider
min="0"
max="200"
@ -48,8 +72,11 @@
second_value="70"
range="double"
disabled
id="double-range-demo"
id="disable-double-range-demo"
></o-slider>
<div style="position: absolute">vertical single slider</div>
<div style="position: absolute; left: 175px">vertical double slider</div>
<o-slider
min="0"
max="100"
@ -71,7 +98,7 @@
value="20"
second_value="70"
id="vertical-double-demo"
style="position: relative; margin-top: -50px; left: -50px; width: 400px"
style="position: relative; margin-top: -50px; width: 400px"
></o-slider>
</div>
</body>

2
components/slider/package.json
View File

@ -94,6 +94,8 @@
},
"dependencies": {
"@omiu/common": "latest",
"@omiu/input": "0.0.12",
"@omiu/tooltip": "0.0.1",
"omi": "latest"
}
}

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

4
components/slider/src/index.scss
View File

@ -172,7 +172,3 @@ $shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
appearance: none;
}
}
.is-vertical {
transform: rotate(-90deg);
}

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

@ -1,6 +1,7 @@
import { WeElement, h, tag, extractClass } from 'omi'
import * as css from './index.scss'
import '@omiu/tooltip'
import '@omiu/input'
interface Props {
min?: number
@ -9,9 +10,11 @@ interface Props {
value?: number
second_value?: number
range: 'single' | 'double'
orient?: 'vetical' | 'horizontal'
orient?: 'vertical' | 'horizontal'
shape: 'square' | 'round'
tooltip?: boolean
disabled?: boolean
reversed?: boolean
}
@tag('o-slider')
@ -20,15 +23,17 @@ export default class OSlider extends WeElement<Props> {
static defaultProps = {
//default a single round range slider
min: 0,
max: 100,
min: undefined,
max: undefined,
step: 1,
value: 0,
second_value: 100,
value: undefined,
second_value: undefined,
range: 'single',
orient: 'horizontal',
shape: 'round',
tooltip: false,
disabled: false,
reversed: false,
}
static propTypes = {
@ -40,52 +45,54 @@ export default class OSlider extends WeElement<Props> {
range: String,
orient: String,
shape: String,
tooltip: Boolean,
disabled: Boolean,
reversed: Boolean,
}
value1: number
value2: number
rootNode
sliderOne
sliderTwo
slider1
slider2
sliderTrack
sliderMax = this.props.max
handleSliderOne = (evt) => {
const first_value = parseInt(this.rootNode.children[0].value)
if (
first_value <= this.props.second_value ||
this.props.range === 'single'
) {
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.props.value = first_value
this.value1 = first_value
}
if (this.props.range === 'single') {
this.fire('change', this.props.value)
this.fire('change', this.value1)
} else {
this.fire('change', [this.props.value, this.props.second_value])
this.fire('change', [this.value1, this.value2])
}
this.fillColor()
this.update()
}
handleSliderTwo = (evt) => {
const second_value = parseInt(this.rootNode.children[1].value)
handleSliderTwo = () => {
const second_value = parseInt(this.slider2.value)
//we only have one case if slider two exists
if (second_value >= this.props.value) {
this.props.second_value = second_value
if (second_value >= this.value1) {
this.value2 = second_value
}
this.fire('change', [this.props.value, this.props.second_value])
this.fire('change', [this.value1, this.value2])
this.fillColor()
this.update()
}
fillColor = () => {
let percent1 =
this.props.range === 'double'
? (this.props.value / this.props.max) * 100
: 0
this.props.range === 'double' ? (this.value1 / this.props.max) * 100 : 0
let percent2 =
this.props.range === 'double'
? (this.props.second_value / this.props.max) * 100
: (this.props.value / this.props.max) * 100
? (this.value2 / this.props.max) * 100
: (this.value1 / this.props.max) * 100
let lowerColor = '#07c160'
let upperColor = '#ffffff'
if (this.props.disabled) {
@ -97,23 +104,38 @@ export default class OSlider extends WeElement<Props> {
: (this.sliderTrack.style.background = `linear-gradient(to right, ${lowerColor} ${percent1}% , ${lowerColor} ${percent1}% , ${lowerColor} ${percent2}%, ${upperColor} ${percent2}%)`)
}
install() {}
install() {
this.value1 = this.props.value
this.props.range === 'double'
? (this.value2 = this.props.second_value)
: (this.value2 = null)
}
installed() {
this.fillColor()
this.update()
let host = this.shadowRoot.host as HTMLElement
this.props.orient === 'vertical' &&
(host.style.transform = 'rotate(-90deg)')
}
receiveProps() {
this.fillColor()
this.handleSliderOne()
this.handleSliderTwo()
this.update()
}
handleInput(evt) {
this.value1 = evt.detail
console.log(this.value1)
}
render(props) {
const cls = extractClass(props, 'slider-container', {
'is-vertical': props.orient === 'vertical',
'is-round': props.shape === 'round',
'is-disabled': props.disabled,
'is-reversed': props.reversed,
})
return (
@ -123,32 +145,90 @@ export default class OSlider extends WeElement<Props> {
this.rootNode = e
}}
>
<input
class="o-slider"
type="range"
min={props.min}
max={props.max}
value={this.props.value}
onInput={this.handleSliderOne}
id="slider-1"
ref={(e) => {
this.sliderOne = e
}}
/>
{this.props.range === 'double' && (
{/* =================================SINGLE=================================== */}
{this.props.tooltip ? (
<o-tooltip
class="tooltip"
position="top"
effect="dark"
content={
this.props.range === 'double'
? `${this.value1} , ${this.value2}`
: this.value1
}
>
<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={(e) => {
this.slider1 = e
}}
/>
</o-tooltip>
) : (
/* ========================SINGLE-NO-TOOLTIP================================ */
<input
class="o-slider"
type="range"
min={props.min}
max={props.max}
value={this.props.second_value}
onInput={this.handleSliderTwo}
id="slider-2"
value={this.value1}
onInput={this.handleSliderOne}
id="slider-1"
ref={(e) => {
this.sliderTwo = e
this.slider1 = e
}}
/>
)}
{/* =================================DOUBLE=================================== */}
{this.props.range === 'double' &&
(this.props.tooltip ? (
<o-tooltip
class="tooltip"
position="top"
effect="dark"
content={
this.props.range === 'double'
? `${this.value1} , ${this.value2}`
: this.value1
}
>
<input
class="o-slider"
type="range"
min={props.min}
max={props.max}
value={this.value2}
onInput={this.handleSliderTwo}
id="slider-2"
ref={(e) => {
this.slider2 = e
}}
/>
</o-tooltip>
) : (
/* ========================DOUBLE-NO-TOOLTIP============================== */
<input
class="o-slider"
type="range"
min={props.min}
max={props.max}
value={this.value2}
onInput={this.handleSliderTwo}
id="slider-2"
ref={(e) => {
this.slider2 = e
}}
/>
))}
<div
class="slider-track"
ref={(e) => {

2
packages/admin/package.json
View File

@ -42,7 +42,7 @@
"@omiu/tooltip": "0.0.1",
"@omiu/transition": "^0.0.12",
"@omiu/tree": "^0.0.18",
"@omiu/slider": "^0.0.2",
"@omiu/slider": "^0.0.3",
"axios": "^0.21.1",
"bytemd": "^1.10.13",
"file-saver": "^2.0.5",