@subiz/widget-v4 4.0.61 → 4.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.61",
+	"version": "4.0.63",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -9,33 +9,32 @@
 		"lib": "rm -rf compiled_src && npx babel --out-dir=compiled_src src"
 	},
 	"dependencies": {
-		"@googlemaps/js-api-loader": "^1.12.11",
 		"@subiz/ajax": "^3.0.12",
 		"@subiz/flow": "^1.0.9",
 		"@subiz/storage": "0.0.8",
 		"@subiz/wsclient": "^3.1.7",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.20.0",
-		"css-loader": "^5.2.6",
+		"core-js": "^3.20.3",
+		"css-loader": "^6.5.1",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
-		"marked": "^4.0.7",
+		"marked": "^4.0.10",
 		"preact": "^10.6.4"
 	},
 	"devDependencies": {
+		"@babel/cli": "^7.16.8",
+		"@babel/core": "^7.16.7",
+		"@babel/plugin-proposal-class-properties": "^7.16.7",
+		"@babel/plugin-transform-react-jsx": "^7.16.7",
+		"@babel/preset-env": "^7.16.8",
 		"babel-loader": "^8.2.3",
-		"@babel/core": "^7.16.5",
-		"@babel/cli": "^7.16.0",
-		"@babel/plugin-proposal-class-properties": "^7.16.5",
-		"@babel/plugin-transform-react-jsx": "^7.16.5",
-		"@babel/preset-env": "^7.16.5",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
-		"puppeteer": "^13.0.0",
-		"webpack": "^5.65.0",
+		"puppeteer": "^13.0.1",
+		"webpack": "^5.66.0",
 		"webpack-bundle-analyzer": "^4.5.0",
 		"webpack-cli": "^4.9.1",
-		"webpack-dev-server": "^4.6.0"
+		"webpack-dev-server": "^4.7.3"
 	}
 }

package/src/chatbox/DropdownSelect.js

@@ -0,0 +1,229 @@
+import sb from '../util/index.js'
+import {Com, Clickaway} from '../common.js'
+import {h, createRef} from 'preact'
+import Spinner from './spinner.js'
+
+// props: ['items', 'mode', 'has_search', selected, loading, width, full],
+export default class DropdownSelect extends Com {
+	state = {
+		show: false,
+		searchValue: '',
+	}
+
+	filterRef = createRef()
+	overlayRef = createRef()
+
+	constructor(props) {
+		super(props)
+
+		document.addEventListener('touchmove', function(e) {
+			// e.preventDefault();
+			// e.stopPropagation();
+			// alert('2')
+			// return false
+		})
+	}
+
+	onTouchMove = (e) => {
+		if (e.target === this.overlayRef.current) {
+			e.preventDefault()
+			e.stopPropagation()
+		}
+	}
+
+	hideDropdown = () => {
+		this.setState({show: false, searchValue: ''})
+	}
+
+	onKeydown = (e) => {
+		if (e.key === 'Escape') {
+			if (!this.state.show) return
+			if (this.state.searchValue) this.setState({searchValue: ''})
+			else this.hideDropdown()
+			e.preventDefault()
+			e.stopPropagation()
+		}
+	}
+
+	hasSearch = () => {
+		if (this.props.has_search) return true
+		return sb.size(this.props.items) >= 10
+	}
+
+	getFilteredOptions = () => {
+		let items = this.props.items
+		if (this.state.searchValue && this.hasSearch()) {
+			items = sb.filter(items, (item) => {
+				let optionName = sb
+					.unicodeToAscii(item.name)
+					.toLowerCase()
+					.replace(/ /g, '')
+				let optionDesc = sb
+					.unicodeToAscii(item.desc)
+					.toLowerCase()
+					.replace(/ /g, '')
+				let searchValue = sb
+					.unicodeToAscii(this.state.searchValue)
+					.toLowerCase()
+					.replace(/ /g, '')
+				return optionName.indexOf(searchValue) != -1 || optionDesc.indexOf(searchValue) != -1
+			})
+		}
+		return items
+	}
+
+	componentDidMount() {
+		window.addEventListener('keydown', this.onKeydown)
+	}
+
+	componentWillUnmount() {
+		window.removeEventListener('keydown', this.onKeydown)
+	}
+
+	onChangeSearchValue = (e) => {
+		this.setState({searchValue: e.target.value})
+	}
+
+	renderEmpty() {
+		return (
+			<div class='dropdown_select_filter__empty'>
+				<img class='dropdown_select_filter__empty_img' src={require('../../assets/img/not_found_search.png')} />
+				<div class='muted' style='text-align: center !important;'>
+					Không có kết quả
+				</div>
+			</div>
+		)
+	}
+
+	renderLoading() {
+		return (
+			<div class='dropdown_select_filter__empty pt-3'>
+				<Spinner size='40' static />
+				<div class='muted mt-2' style='text-align: center !important;'>
+					Đang tải dữ liệu
+				</div>
+			</div>
+		)
+	}
+
+	toogleDropdown = async () => {
+		await this.setState({show: true, searchValue: ''})
+		this.focusFilter()
+	}
+
+	focusFilter() {
+		if (!this.filterRef.current) return
+		this.filterRef.current.focus()
+		setTimeout(() => {
+			if (!this.filterRef.current) return
+			this.filterRef.current.focus()
+		}, 100)
+	}
+
+	onSelect = (item) => {
+		this.props.onSelect(item)
+		this.hideDropdown()
+	}
+
+	renderDropdown() {
+		if (!this.state.show) return null
+
+		let items = this.getFilteredOptions()
+		let $items = sb.map(items, (item) => {
+			return (
+				<div class='dropdown_select__item' onClick={(_) => this.onSelect(item)}>
+					{item.name}
+				</div>
+			)
+		})
+
+		let $filter = null
+		if (this.hasSearch()) {
+			let $img = <img class='dropdown_select_filter__icon' src={require('../../assets/img/search.svg')} />
+			if (this.props.loading) {
+				$img = <img class='dropdown_select_filter__icon' src={require('../../assets/img/loader.svg')} />
+			}
+			$filter = (
+				<div class='dropdown_select_filter'>
+					{$img}
+					<input
+						ref={this.filterRef}
+						value={this.state.searchValue}
+						onInput={this.onChangeSearchValue}
+						type='text'
+						class='dropdown_select_filter_input '
+					/>
+				</div>
+			)
+		}
+
+		if ($items.length == 0) $items = this.renderEmpty()
+		if (this.props.loading) $items = this.renderLoading()
+
+		let style = `width: ${this.props.width || '150px'} !important;`
+		if (this.props.full) {
+			style = ` top: 20px !important; left: 20px !important; right: 20px !important; width: unset !important; `
+			return (
+				<div
+					class='dropdown_select__overlay'
+					ref={this.overlayRef}
+					onClick={this.hideDropdown}
+					onTouchMove={this.onTouchMove}>
+					<div
+						class='dropdown_select'
+						style={style}
+						onClick={(e) => {
+							e.preventDefault()
+							e.stopPropagation()
+						}}>
+						{$filter}
+						<div class='dropdown_select__items'>{$items}</div>
+					</div>
+				</div>
+			)
+		}
+
+		return (
+			<div class='dropdown_select' style={style}>
+				{$filter}
+				<div class='dropdown_select__items'>{$items}</div>
+			</div>
+		)
+	}
+
+	onBackgroundScroll = (e) => {
+		console.log('EEEEEEE', e)
+		alert('y')
+	}
+
+	render() {
+		let $name = (
+			<div class='muted text-truncate' style='flex: 1 !important;'>
+				Chọn một phần tử
+			</div>
+		)
+		if (sb.get(this.props, 'selected.name'))
+			$name = (
+				<div class='text-truncate' style='flex: 1 !important;'>
+					{sb.get(this.props, 'selected.name')}
+				</div>
+			)
+
+		let style = 'position: relative !important;'
+		if (this.props.full) {
+			style = ''
+		}
+
+		return (
+			<div style={style}>
+				<Clickaway onClickaway={this.hideDropdown}>
+				<div type='text' class={'dropdown_select_input ' + this.props.extra_cls} onClick={this.toogleDropdown}>
+						{$name}&nbsp;
+						<img class='dropdown_select__caret' src={require('../../assets/img/caret.svg')} />
+					</div>
+					{this.renderDropdown()}
+				</Clickaway>
+			</div>
+		)
+	}
+}

package/src/chatbox/Event.js

@@ -125,7 +125,7 @@ export default class Event extends Com {
 				<div class='convo-event agent-message' title={t}>
 					{$time}
 					{$sender}
-					<TextMessage store={this.props.store} ev={ev} />
+					<TextMessage store={this.props.store} ev={ev} onLink={this.props.onLink} />
 					<ImageAttachments store={this.props.store} ev={ev} />
 					<AudioAttachments store={this.props.store} ev={ev} />
 					<VideoAttachments store={this.props.store} ev={ev} />
@@ -177,7 +177,7 @@ export default class Event extends Com {
 				{$sender}
 				<div class='message-user__container'>
 					{$dot}
-					<TextMessage store={this.props.store} ev={ev} refresh={this.state.refresh} />
+					<TextMessage store={this.props.store} ev={ev} refresh={this.state.refresh} onLink={this.props.onLink} />
 					<ImageAttachments store={this.props.store} ev={ev} />
 					<AudioAttachments store={this.props.store} ev={ev} />
 					<VideoAttachments store={this.props.store} ev={ev} />

package/src/chatbox/Events.js

@@ -4,15 +4,15 @@ const convoemptyimg = require('../../assets/img/convos_empty.svg')
 import sb from '../util/index.js'
 
 import Spinner from './spinner.js'
-import { Com } from '../common.js'
-import { h, Fragment } from 'preact'
+import {Com} from '../common.js'
+import {h, Fragment} from 'preact'
 
 //  ['cid', 'creating', 'isShow'],
 export default class Events extends Com {
-	constructor (props) {
+	constructor(props) {
 		super(props)
-		this.props.store.onUpdate(this, _ => this.forceUpdate())
-		this.props.store.onConvoEvent(this, ev => this.onEvent(ev))
+		this.props.store.onUpdate(this, (_) => this.forceUpdate())
+		this.props.store.onConvoEvent(this, (ev) => this.onEvent(ev))
 		this.loadConvo()
 		this.refBody = null
 
@@ -29,20 +29,20 @@ export default class Events extends Com {
 		this.checkAndSeen()
 	}
 
-	componentDidUpdate (prevProps) {
+	componentDidUpdate(prevProps) {
 		if (prevProps.cid !== this.props.cid) this.loadConvo()
 	}
 
-	render () {
+	render() {
 		if (this.state.error) return this.renderError()
 		let events = sb.map(this.props.store.listEvents(this.props.cid))
 
 		if (!this.state.loading && sb.size(events) === 0) {
 			return (
-				<div ref={ref => (this.refBody = ref)} class="widget-body--events-container">
-					<div class="widget-body--empty">
-						<div class="widget-body--empty-icon"></div>
-						<div class="widget-body--empty-text">{this.props.t('empty_convo_text')}</div>
+				<div ref={(ref) => (this.refBody = ref)} class='widget-body--events-container'>
+					<div class='widget-body--empty'>
+						<div class='widget-body--empty-icon'></div>
+						<div class='widget-body--empty-text'>{this.props.t('empty_convo_text')}</div>
 					</div>
 					<PoweredBy store={this.props.store} />
 				</div>
@@ -52,11 +52,12 @@ export default class Events extends Com {
 		events = sb.orderBy(events, 'created', 'asc')
 
 		let convo = this.props.store.matchConvo(this.props.cid)
-		events = sb.map(events, ev => ({ ev: ev }))
+		events = sb.map(events, (ev) => ({ev: ev}))
 		processEvents(convo, events)
 
-		let $events = sb.map(events, ev => (
+		let $events = sb.map(events, (ev) => (
 			<Event
+				onLink={this.props.onLink}
 				store={this.props.store}
 				onFormSubmit={this.props.onFormSubmit}
 				onSend={this.props.onSend}
@@ -70,7 +71,7 @@ export default class Events extends Com {
 		let $loading = null
 		let style = 'opacity: 1 !important'
 		if (this.state.loading || this.props.creating) {
-			$loading = <Spinner static mode="blue" size="120" center />
+			$loading = <Spinner static mode='blue' size='120' center />
 			style = 'opacity: 0 !important'
 		}
 
@@ -79,33 +80,33 @@ export default class Events extends Com {
 				{$loading}
 				<div
 					style={style}
-					ref={ref => (this.refBody = ref)}
-					class="widget-body--events-container"
+					ref={(ref) => (this.refBody = ref)}
+					class='widget-body--events-container'
 					onMouseOver={this.checkAndSeen}>
-					<div class="widget-body--events">{$events}</div>
+					<div class='widget-body--events'>{$events}</div>
 					<PoweredBy store={this.props.store} />
 				</div>
 			</Fragment>
 		)
 	}
 
-	renderError () {
+	renderError() {
 		let $tryAgainBtn = (
-			<a href="#" onclick={_ => this.loadConvo()}>
+			<a href='#' onclick={(_) => this.loadConvo()}>
 				{this.props.t('try_again')}
 			</a>
 		)
-		if (this.state.loading) $tryAgainBtn = <Spinner size="16" mode="blue" />
+		if (this.state.loading) $tryAgainBtn = <Spinner size='16' mode='blue' />
 		return (
-			<div class="widget-body--events-container widget-body--events-container__error">
-				<img alt="empty" src={convoemptyimg} />
-				<div class="widget_body__events__error_msg">{this.props.t('load_convo_error')}</div>
-				<div class="widget_body__events__error_retry">{$tryAgainBtn}</div>
+			<div class='widget-body--events-container widget-body--events-container__error'>
+				<img alt='empty' src={convoemptyimg} />
+				<div class='widget_body__events__error_msg'>{this.props.t('load_convo_error')}</div>
+				<div class='widget_body__events__error_retry'>{$tryAgainBtn}</div>
 			</div>
 		)
 	}
 
-	focus () {
+	focus() {
 		let events = this.props.store.listEvents(this.props.cid)
 		events = sb.orderBy(sb.map(events), 'created', 'desc')
 		// find first msg_sent event of agent
@@ -121,7 +122,7 @@ export default class Events extends Com {
 
 		let attachments = sb.get(last_agent_sent, 'data.message.attachments', [])
 		let convo = this.props.store.matchConvo(this.props.cid)
-		let pendingForms = sb.filter(attachments, att => {
+		let pendingForms = sb.filter(attachments, (att) => {
 			if (!att) return false
 			if (att.type !== 'form' && att.type !== 'ask_info_form') return false
 			var form = att.form
@@ -138,7 +139,7 @@ export default class Events extends Com {
 		//}
 	}
 
-	onEvent (newev) {
+	onEvent(newev) {
 		if (sb.convoOfEv(newev) !== this.props.cid) return
 		let isBottom = this.isBottom()
 
@@ -149,37 +150,37 @@ export default class Events extends Com {
 		if (byme || isBottom) this.scrollToBottom()
 	}
 
-	async loadConvo () {
+	async loadConvo() {
 		if (!this.props.cid) return
 		// load msg
 		this.lastContentOffsetY = 0
-		this.setState({ loading: true })
+		this.setState({loading: true})
 		let events = this.props.store.listEvents(this.props.cid)
 		if (sb.size(events) === 0) {
 			let cid = this.props.cid
-			let { error } = await this.props.store.fetchMoreEvents(cid)
-			this.setState({ loading: false })
+			let {error} = await this.props.store.fetchMoreEvents(cid)
+			this.setState({loading: false})
 			if (cid !== this.props.cid) return // out dated
 			if (error) {
-				this.setState({ error: true })
+				this.setState({error: true})
 				return
 			}
 		}
-		this.setState({ loading: true })
+		this.setState({loading: true})
 		this.props.store.fetchMoreEvents(this.props.cid)
-		this.setState({ error: false })
+		this.setState({error: false})
 		this.scrollToBottom()
 
-		setTimeout(() => this.setState({ loading: false }), 50)
+		setTimeout(() => this.setState({loading: false}), 50)
 	}
 
-	isBottom () {
+	isBottom() {
 		let $container = this.refBody
 		if (!$container) return false
 		return $container.scrollHeight < $container.scrollTop + $container.offsetHeight + 50
 	}
 
-	scrollToBottom () {
+	scrollToBottom() {
 		setTimeout(() => {
 			const $div = this.refBody
 			if ($div) $div.scrollTop = $div.scrollHeight
@@ -200,8 +201,8 @@ export default class Events extends Com {
 // [{ev: {}, mode: 'time'}]
 //_mode = time
 //_mode = lead
-function processEvents (convo, events) {
-	events = events.filter(event => visibleEvent(event.ev))
+function processEvents(convo, events) {
+	events = events.filter((event) => visibleEvent(event.ev))
 	if (events.length < 1) return
 
 	// show time for the first msg sent
@@ -242,7 +243,7 @@ function processEvents (convo, events) {
 	}
 }
 
-function visibleEvent (ev) {
+function visibleEvent(ev) {
 	let type = sb.get(ev, 'type')
 	return (
 		// type === 'conversation_joined' ||
@@ -251,7 +252,7 @@ function visibleEvent (ev) {
 	)
 }
 
-function isSummited (form) {
+function isSummited(form) {
 	let fields = sb.get(form, 'fields') || []
-	return sb.find(fields, field => !!field.answered)
+	return sb.find(fields, (field) => !!field.answered)
 }