@subiz/widget-v4 4.1.141 → 4.1.142

package/src/form/rating-stars.js

@@ -0,0 +1,89 @@
+import {Com} from '../common.js'
+import {h, createRef, Fragment} from 'preact'
+import sb from '../util/index.js'
+
+export default class Form2 extends Com {
+	state = {
+		hovering: 0,
+		selected: 0,
+	}
+
+	constructor(props) {
+		super(props)
+	}
+
+	onMouseEnter = (v) => {
+		let {selected, hovering} = this.state
+		if (v <= selected) {
+			this.setState({hovering: selected})
+			return
+		}
+		this.setState({hovering: v})
+	}
+
+	onMouseLeave = () => {
+		let {selected, hovering} = this.state
+		this.setState({hovering: 0})
+	}
+
+	onToggleValue(v) {
+		let {selected} = this.state
+		let newVal = v
+		if (v === selected) newVal = 0
+		this.setState({selected: newVal, hovering: newVal})
+		this.props.onChange(newVal)
+	}
+
+	render() {
+		let {selected, hovering} = this.state
+		let star1Cls = 'star-wrapper'
+		if (selected >= 1) {
+			star1Cls += ' selected'
+		} else if (hovering >= 1) {
+			star1Cls += ' hovering'
+		}
+		let star2Cls = 'star-wrapper'
+		if (selected >= 2) {
+			star2Cls += ' selected'
+		} else if (hovering >= 2) {
+			star2Cls += ' hovering'
+		}
+		let star3Cls = 'star-wrapper'
+		if (selected >= 3) {
+			star3Cls += ' selected'
+		} else if (hovering >= 3) {
+			star3Cls += ' hovering'
+		}
+		let star4Cls = 'star-wrapper'
+		if (selected >= 4) {
+			star4Cls += ' selected'
+		} else if (hovering >= 4) {
+			star4Cls += ' hovering'
+		}
+		let star5Cls = 'star-wrapper'
+		if (selected >= 5) {
+			star5Cls += ' selected'
+		} else if (hovering >= 5) {
+			star5Cls += ' hovering'
+		}
+		return (
+			<div class='form-ratings-wrapper' onMouseLeave={() => this.onMouseLeave()}>
+				<div class={star1Cls} onClick={() => this.onToggleValue(1)} onMouseEnter={() => this.onMouseEnter(1)}>
+					<div class='star' />
+				</div>
+				<div class={star2Cls} onClick={() => this.onToggleValue(2)} onMouseEnter={() => this.onMouseEnter(2)}>
+					<div class='star' />
+				</div>
+				<div class={star3Cls} onClick={() => this.onToggleValue(3)} onMouseEnter={() => this.onMouseEnter(3)}>
+					<div class='star' />
+				</div>
+				<div class={star4Cls} onClick={() => this.onToggleValue(4)} onMouseEnter={() => this.onMouseEnter(4)}>
+					<div class='star' />
+				</div>
+				<div class={star5Cls} onClick={() => this.onToggleValue(5)} onMouseEnter={() => this.onMouseEnter(5)}>
+					<div class='star' />
+				</div>
+			</div>
+		)
+	}
+}