diff --git a/app/containers/UIKit/MultiSelect/index.js b/app/containers/UIKit/MultiSelect/index.js index 0d366b6d..d1e42aaa 100644 --- a/app/containers/UIKit/MultiSelect/index.js +++ b/app/containers/UIKit/MultiSelect/index.js @@ -157,7 +157,7 @@ export const MultiSelect = React.memo(({ disabled={disabled} inputStyle={inputStyle} > - {items.length ? : {placeholder.text}} + {items.length ? (disabled ? {} : onSelect(item))} theme={theme} /> : {placeholder.text}} ); } diff --git a/app/views/LivechatEditView.js b/app/views/LivechatEditView.js index f92215ff..d5bae1a1 100644 --- a/app/views/LivechatEditView.js +++ b/app/views/LivechatEditView.js @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { Text, StyleSheet, ScrollView } from 'react-native'; import { connect } from 'react-redux'; +import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { withTheme } from '../theme'; import { themes } from '../constants/colors'; @@ -15,9 +16,9 @@ import { LISTENER } from '../containers/Toast'; import EventEmitter from '../utils/events'; import scrollPersistTaps from '../utils/scrollPersistTaps'; import { getUserSelector } from '../selectors/login'; -import Chips from '../containers/UIKit/MultiSelect/Chips'; import Button from '../containers/Button'; import SafeAreaView from '../containers/SafeAreaView'; +import { MultiSelect } from '../containers/UIKit/MultiSelect'; const styles = StyleSheet.create({ container: { @@ -27,6 +28,14 @@ const styles = StyleSheet.create({ fontSize: 20, paddingVertical: 10, ...sharedStyles.textMedium + }, + label: { + marginBottom: 10, + fontSize: 14, + ...sharedStyles.textSemibold + }, + multiSelect: { + marginBottom: 10 } }); @@ -67,9 +76,12 @@ const LivechatEditView = ({ }; const [tagParam, setTags] = useState(livechat?.tags || []); + const [tagParamSelected, setTagParamSelected] = useState(livechat?.tags || []); useEffect(() => { - setTags([...tagParam, ...availableUserTags]); + const arr = [...tagParam, ...availableUserTags]; + const uniqueArray = arr.filter((val, i) => arr.indexOf(val) === i); + setTags(uniqueArray); }, [availableUserTags]); const getTagsList = async(agentDepartments) => { @@ -116,7 +128,7 @@ const LivechatEditView = ({ roomData.topic = params.topic; } - roomData.tags = tagParam; + roomData.tags = tagParamSelected; roomData.livechatData = {}; Object.entries(customFields?.livechat || {}).forEach(([key]) => { @@ -227,34 +239,26 @@ const LivechatEditView = ({ editable={!!permissions[1]} /> - { inputs.tags = e; }} - label={I18n.t('Tags')} - iconRight='add' - onIconRightPress={() => { - const lastText = inputs.tags._lastNativeText || ''; - if (lastText.length) { - setTags([...tagParam.filter(t => t !== lastText), lastText]); - inputs.tags.clear(); - } - }} - onSubmitEditing={() => { - const keys = Object.keys(customFields?.livechat || {}); - if (keys.length > 0) { - const key = keys.pop(); - inputs[key].focus(); - } else { - submit(); - } + + { I18n.t('Tags') } + + ({ text: { text: tag }, value: tag }))} + onChange={({ value }) => { + setTagParamSelected([...value]); }} + placeholder={{ text: I18n.t('Tags') }} + value={tagParamSelected} + context={BLOCK_CONTEXT.FORM} + multiselect theme={theme} - editable={!!permissions[1]} - /> - ({ text: { text: tag }, value: tag }))} - onSelect={tag => setTags(tagParam.filter(t => t !== tag.value) || [])} - style={{ backgroundColor: themes[theme].backgroundColor }} - theme={theme} + disabled={!permissions[1]} + inputStyle={styles.multiSelect} /> {Object.entries(customFields?.livechat || {}).map(([key, value], index, array) => ( @@ -293,7 +297,7 @@ LivechatEditView.propTypes = { editLivechatRoomCustomfields: PropTypes.array }; LivechatEditView.navigationOptions = ({ - title: I18n.t('Livechat_edit') + title: I18n.t('Edit') }); const mapStateToProps = state => ({