@subiz/widget-v4 4.1.140 → 4.1.142

package/src/form/FormPage.js

@@ -98,6 +98,86 @@ export default class FormPage extends Com {
 			let json = atob(this.props.previewJson)
 			json = decodeURIComponent(json)
 			json = sb.parseJSON(json)
+			//json = {
+				//id: 'atshrpqxzuufzzdkzquz_dlbgwyib',
+				//title: 'Đặt lịch khám',
+				//components: [
+					//{
+						//type: 'input',
+						//label: 'Họ và tên',
+						//input_type: 'text',
+						//is_required: true,
+						//key: 'fullname',
+					//},
+					//{
+						//type: 'input',
+						//label: 'SĐT',
+						//input_type: 'text',
+						//is_required: true,
+						//key: 'phone',
+					//},
+					//{
+						//type: 'input',
+						//label: 'Chọn ca',
+						//input_type: 'radio',
+						//is_required: true,
+						//key: 'shift',
+						//input_options: [
+							//{
+								//label: 'Buổi sáng',
+								//value: 'Buổi sáng',
+							//},
+							//{
+								//label: 'Buổi chiều',
+								//value: 'Buổi chiều',
+							//},
+							//{
+								//label: 'Buổi toi',
+								//value: 'Buổi toi',
+							//},
+							//{
+								//label: 'Buổi dem ',
+								//value: 'Buổi dem',
+							//},
+							//{
+								//label: 'Other',
+								//value: 'Other',
+							//},
+						//],
+					//},
+					//{
+						//type: 'input',
+						//label: 'Chọn ngày',
+						//input_type: 'date',
+						//is_required: true,
+						//key: 'schedule',
+					//},
+					//{
+						//type: 'input',
+						//label: 'Đánh giá',
+            //label_description: 'Chọn theo thang điểm 1-5',
+						//input_type: 'rating',
+						//key: 'rating',
+					//},
+					//{
+						//type: 'button',
+						//label: 'Đặt lịch',
+					//},
+				//],
+				//primary_color: 'rgb(224, 31, 111)',
+				//header_style: {
+					//font_family: 'Roboto',
+					//font_size: '20',
+				//},
+				//text_style: {
+					//font_family: 'Yeseva One',
+					//font_size: '16',
+				//},
+				//input_style: {
+					//font_family: 'Dancing Script',
+					//font_size: '18',
+				//},
+			//}
 			await this.insertCss(chatbox, json)
 			this.setState({formSetting: json, loading: false})
 			return
@@ -168,27 +248,20 @@ export default class FormPage extends Com {
 		}
 
 		let brandLogo = sb.get(formSetting, 'logo.url')
+		let coverUrl = sb.get(formSetting, 'cover_image.url')
+		//coverUrl =
+		//'https://lh7-us.googleusercontent.com/fX5mhofX-12ygFkS6I3UbMh6_NYtd7ySVQkuFxm7Y7ArYMvWu_Ew65l4Ic3QC8eMaBJpUU_5ZNITgigAbqkNJcQRbPjnddxGGE7YOaNBACoWws7b6AuNaAjlisDDY3GCvPHFhh-99Jt0SBiJKnNloWrxxdel_EkVI6MMf6ENTwj2NDQ8MvkCI8ow6z75pwK9C1ZMxDZn?key=-6fBH6GC0hPnLatLRgG5tA'
+		let wrappercls = 'form-page'
+		if (coverUrl) wrappercls += ' sketch'
 		return (
 			<div class='form-page-body' key='form'>
 				{this.props.previewJson && (
 					<div class='form-page-preview-noti'>{'Form ở trạng thái xem thử, không ghi nhận phản hồi'}</div>
 				)}
-				<div class='form-page'>
-					<div class='form-page-logo-wrapper'>
-						<a href={formSetting.brand_url || 'javascript:;'}>
-							{brandLogo ? (
-								<img src={brandLogo} class='form-page-logo' />
-							) : (
-								<div class='form-page-logo-text'>{sb.get(this.props.store.matchAccount(), 'name')}</div>
-							)}
-						</a>
-					</div>
-					{(formSetting.title || formSetting.description) && (
-						<div class='form-page-header'>
-							<div class='form-page-title'>{formSetting.title}</div>
-							{formSetting.description && <div class='form-page-desc'>{formSetting.description}</div>}
-						</div>
-					)}
+				{coverUrl && (
+					<div class='form-page-header-bg' style={`background: url(${coverUrl}); background-size: cover;`} />
+				)}
+				<div class={wrappercls}>
 					<Form
 						store={this.props.store}
 						formSetting={formSetting}

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>
+		)
+	}
+}