This commit is contained in:
83
react/features/salesforce/components/native/RecordItem.tsx
Normal file
83
react/features/salesforce/components/native/RecordItem.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { GestureResponderEvent, Text, TextStyle, TouchableHighlight, View, ViewStyle } from 'react-native';
|
||||
|
||||
import Icon from '../../../base/icons/components/Icon';
|
||||
import { RECORD_TYPE } from '../../constants';
|
||||
|
||||
import styles from './styles';
|
||||
|
||||
/**
|
||||
* The type of the React {@code Component} props of {@link RecordItem}.
|
||||
*/
|
||||
interface IProps {
|
||||
|
||||
/**
|
||||
* The id of the record.
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* The name of the record.
|
||||
*/
|
||||
name?: string;
|
||||
|
||||
/**
|
||||
* The handler for the click event.
|
||||
*/
|
||||
onClick?: (e?: GestureResponderEvent | React.MouseEvent) => void;
|
||||
|
||||
/**
|
||||
* The type of the record.
|
||||
*/
|
||||
type?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component to render Record data.
|
||||
*
|
||||
* @param {IProps} props - The props of the component.
|
||||
* @returns {React$Element<any>}
|
||||
*/
|
||||
export const RecordItem = ({
|
||||
id,
|
||||
name,
|
||||
type,
|
||||
/* eslint-disable-next-line @typescript-eslint/no-empty-function */
|
||||
onClick = () => {}
|
||||
}: IProps) => {
|
||||
const { t } = useTranslation();
|
||||
const IconRecord = RECORD_TYPE[type ?? ''].icon;
|
||||
|
||||
return (
|
||||
<TouchableHighlight onPress = { onClick }>
|
||||
<View
|
||||
key = { `record-${id}` }
|
||||
style = { styles.recordItem as ViewStyle }
|
||||
|
||||
// @ts-ignore
|
||||
title = { name }>
|
||||
<View style = { styles.recordTypeIcon as ViewStyle }>
|
||||
{IconRecord && (
|
||||
<Icon
|
||||
src = { IconRecord }
|
||||
style = { styles.recordIcon } />
|
||||
)}
|
||||
</View>
|
||||
<View style = { styles.recordDetails as ViewStyle }>
|
||||
<Text
|
||||
key = { name }
|
||||
numberOfLines = { 1 }
|
||||
style = { styles.recordName as TextStyle }>
|
||||
{name}
|
||||
</Text>
|
||||
<Text
|
||||
key = { type }
|
||||
style = { styles.recordType }>
|
||||
{t(RECORD_TYPE[type ?? ''].label)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,186 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Platform, SafeAreaView, ScrollView, Text, View, ViewStyle } from 'react-native';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { IReduxState } from '../../../app/types';
|
||||
import { IconSearch } from '../../../base/icons/svg';
|
||||
import JitsiScreen from '../../../base/modal/components/JitsiScreen';
|
||||
import LoadingIndicator from '../../../base/react/components/native/LoadingIndicator';
|
||||
import Button from '../../../base/ui/components/native/Button';
|
||||
import Input from '../../../base/ui/components/native/Input';
|
||||
import { BUTTON_TYPES } from '../../../base/ui/constants.native';
|
||||
import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
|
||||
import { screen } from '../../../mobile/navigation/routes';
|
||||
import { CONTENT_HEIGHT_OFFSET, LIST_HEIGHT_OFFSET, NOTES_LINES, NOTES_MAX_LENGTH } from '../../constants';
|
||||
import { useSalesforceLinkDialog } from '../../useSalesforceLinkDialog';
|
||||
|
||||
import { RecordItem } from './RecordItem';
|
||||
import styles from './styles';
|
||||
|
||||
/**
|
||||
* Component that renders the Salesforce link dialog.
|
||||
*
|
||||
* @returns {React$Element<any>}
|
||||
*/
|
||||
const SalesforceLinkDialog = () => {
|
||||
const { t } = useTranslation();
|
||||
const { clientHeight } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
|
||||
const {
|
||||
hasDetailsErrors,
|
||||
hasRecordsErrors,
|
||||
isLoading,
|
||||
linkMeeting,
|
||||
notes,
|
||||
records,
|
||||
searchTerm,
|
||||
selectedRecord,
|
||||
selectedRecordOwner,
|
||||
setNotes,
|
||||
setSearchTerm,
|
||||
setSelectedRecord,
|
||||
showNoResults,
|
||||
showSearchResults
|
||||
} = useSalesforceLinkDialog();
|
||||
|
||||
const handlePress = useCallback(() => {
|
||||
navigate(screen.conference.main);
|
||||
selectedRecord && linkMeeting();
|
||||
}, [ navigate, linkMeeting ]);
|
||||
|
||||
const renderSpinner = () => (
|
||||
<View style = { [ styles.recordsSpinner, { height: clientHeight - CONTENT_HEIGHT_OFFSET } ] as ViewStyle[] }>
|
||||
<LoadingIndicator />
|
||||
</View>
|
||||
);
|
||||
|
||||
const renderDetailsErrors = () => (
|
||||
<Text style = { styles.detailsError }>
|
||||
{t('dialog.searchResultsDetailsError')}
|
||||
</Text>
|
||||
);
|
||||
|
||||
const renderSelection = () => (
|
||||
<SafeAreaView>
|
||||
<ScrollView
|
||||
bounces = { false }
|
||||
style = { [ styles.selectedRecord, { height: clientHeight - CONTENT_HEIGHT_OFFSET } ] as ViewStyle[] }>
|
||||
<View style = { styles.recordInfo as ViewStyle }>
|
||||
<RecordItem { ...selectedRecord } />
|
||||
{ selectedRecordOwner && <RecordItem { ...selectedRecordOwner } /> }
|
||||
{ hasDetailsErrors && renderDetailsErrors() }
|
||||
</View>
|
||||
<Text style = { styles.addNote }>
|
||||
{t('dialog.addOptionalNote')}
|
||||
</Text>
|
||||
<Input
|
||||
customStyles = {{ container: styles.notes }}
|
||||
maxLength = { NOTES_MAX_LENGTH }
|
||||
minHeight = { Platform.OS === 'ios' && NOTES_LINES ? 20 * NOTES_LINES : undefined }
|
||||
multiline = { true }
|
||||
numberOfLines = { Platform.OS === 'ios' ? undefined : NOTES_LINES }
|
||||
/* eslint-disable-next-line react/jsx-no-bind */
|
||||
onChange = { value => setNotes(value) }
|
||||
placeholder = { t('dialog.addMeetingNote') }
|
||||
value = { notes } />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
|
||||
const renderRecordsSearch = () => (
|
||||
<View style = { styles.recordsSearchContainer as ViewStyle }>
|
||||
<Input
|
||||
icon = { IconSearch }
|
||||
maxLength = { NOTES_MAX_LENGTH }
|
||||
/* eslint-disable-next-line react/jsx-no-bind */
|
||||
onChange = { value => setSearchTerm(value) }
|
||||
placeholder = { t('dialog.searchInSalesforce') }
|
||||
value = { searchTerm ?? '' } />
|
||||
{(!isLoading && !hasRecordsErrors) && (
|
||||
<Text style = { styles.resultLabel }>
|
||||
{showSearchResults
|
||||
? t('dialog.searchResults', { count: records.length })
|
||||
: t('dialog.recentlyUsedObjects')
|
||||
}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
|
||||
const renderNoRecords = () => showNoResults && (
|
||||
<View style = { [ styles.noRecords, { height: clientHeight - CONTENT_HEIGHT_OFFSET } ] as ViewStyle[] }>
|
||||
<Text style = { styles.noRecordsText }>
|
||||
{t('dialog.searchResultsNotFound')}
|
||||
</Text>
|
||||
<Text style = { styles.noRecordsText }>
|
||||
{t('dialog.searchResultsTryAgain')}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
const renderRecordsError = () => (
|
||||
<View style = { [ styles.recordsError, { height: clientHeight - CONTENT_HEIGHT_OFFSET } ] as ViewStyle[] }>
|
||||
<Text style = { styles.recordsErrorText }>
|
||||
{t('dialog.searchResultsError')}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
const renderContent = () => {
|
||||
if (isLoading) {
|
||||
return renderSpinner();
|
||||
}
|
||||
if (hasRecordsErrors) {
|
||||
return renderRecordsError();
|
||||
}
|
||||
if (showNoResults) {
|
||||
return renderNoRecords();
|
||||
}
|
||||
if (selectedRecord) {
|
||||
return renderSelection();
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<ScrollView
|
||||
bounces = { false }
|
||||
style = { [ styles.recordList, { height: clientHeight - LIST_HEIGHT_OFFSET } ] as ViewStyle[] }>
|
||||
{records.map((item: any) => (
|
||||
<RecordItem
|
||||
key = { `record-${item.id}` }
|
||||
/* eslint-disable-next-line react/jsx-no-bind */
|
||||
onClick = { () => setSelectedRecord(item) }
|
||||
{ ...item } />
|
||||
))}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<JitsiScreen style = { styles.salesforceDialogContainer }>
|
||||
<View>
|
||||
{!selectedRecord && renderRecordsSearch()}
|
||||
{renderContent()}
|
||||
</View>
|
||||
{
|
||||
selectedRecord
|
||||
&& <View>
|
||||
<Button
|
||||
labelKey = 'dialog.Cancel'
|
||||
/* eslint-disable-next-line react/jsx-no-bind */
|
||||
onClick = { () => setSelectedRecord(null) }
|
||||
style = { styles.cancelButton }
|
||||
type = { BUTTON_TYPES.SECONDARY } />
|
||||
<Button
|
||||
labelKey = 'dialog.linkMeeting'
|
||||
onClick = { handlePress }
|
||||
style = { styles.linkButton }
|
||||
type = { BUTTON_TYPES.PRIMARY } />
|
||||
</View>
|
||||
}
|
||||
</JitsiScreen>
|
||||
);
|
||||
};
|
||||
|
||||
export default SalesforceLinkDialog;
|
||||
148
react/features/salesforce/components/native/styles.ts
Normal file
148
react/features/salesforce/components/native/styles.ts
Normal file
@@ -0,0 +1,148 @@
|
||||
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
|
||||
|
||||
export default {
|
||||
salesforceDialogContainer: {
|
||||
position: 'relative',
|
||||
flexDirection: 'column',
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
backgroundColor: BaseTheme.palette.ui01
|
||||
},
|
||||
recordsSearchContainer: {
|
||||
alignSelf: 'stretch',
|
||||
backgroundColor: BaseTheme.palette.ui01,
|
||||
paddingHorizontal: BaseTheme.spacing[3],
|
||||
paddingTop: BaseTheme.spacing[2],
|
||||
position: 'relative'
|
||||
},
|
||||
searchIcon: {
|
||||
color: BaseTheme.palette.text03,
|
||||
fontSize: 30,
|
||||
left: 22,
|
||||
position: 'absolute',
|
||||
top: 22,
|
||||
zIndex: 2
|
||||
},
|
||||
resultLabel: {
|
||||
backgroundColor: BaseTheme.palette.ui01,
|
||||
color: BaseTheme.palette.text03,
|
||||
fontSize: 15,
|
||||
margin: 0,
|
||||
paddingBottom: 8,
|
||||
paddingTop: 16
|
||||
},
|
||||
recordsSpinner: {
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '100%'
|
||||
},
|
||||
noRecords: {
|
||||
alignItems: 'center',
|
||||
backgroundColor: BaseTheme.palette.ui01,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
padding: BaseTheme.spacing[3]
|
||||
},
|
||||
noRecordsText: {
|
||||
color: BaseTheme.palette.text03
|
||||
},
|
||||
recordsError: {
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
paddingBottom: 30
|
||||
},
|
||||
recordsErrorText: {
|
||||
color: BaseTheme.palette.text03
|
||||
},
|
||||
recordList: {
|
||||
alignSelf: 'stretch',
|
||||
display: 'flex',
|
||||
listStyle: 'none',
|
||||
paddingVertical: BaseTheme.spacing[3],
|
||||
position: 'relative'
|
||||
},
|
||||
selectedRecord: {
|
||||
alignSelf: 'stretch',
|
||||
display: 'flex',
|
||||
paddingTop: BaseTheme.spacing[3],
|
||||
position: 'relative'
|
||||
},
|
||||
recordInfo: {
|
||||
backgroundColor: BaseTheme.palette.ui03,
|
||||
borderRadius: BaseTheme.shape.borderRadius,
|
||||
display: 'flex',
|
||||
margin: BaseTheme.spacing[3],
|
||||
position: 'relative'
|
||||
},
|
||||
detailsError: {
|
||||
color: BaseTheme.palette.text03,
|
||||
padding: BaseTheme.spacing[3]
|
||||
},
|
||||
addNote: {
|
||||
color: BaseTheme.palette.text01,
|
||||
margin: BaseTheme.spacing[3]
|
||||
},
|
||||
notes: {
|
||||
alignItems: 'flex-start',
|
||||
backgroundColor: BaseTheme.palette.field01,
|
||||
borderColor: BaseTheme.palette.ui05,
|
||||
borderRadius: BaseTheme.shape.borderRadius,
|
||||
borderWidth: 1,
|
||||
color: BaseTheme.palette.text01,
|
||||
lineHeight: 18,
|
||||
marginHorizontal: BaseTheme.spacing[3],
|
||||
marginVertical: BaseTheme.spacing[2],
|
||||
overflow: 'hidden',
|
||||
padding: BaseTheme.spacing[2],
|
||||
textAlignVertical: 'top'
|
||||
},
|
||||
cancelButton: {
|
||||
margin: BaseTheme.spacing[2]
|
||||
},
|
||||
linkButton: {
|
||||
marginBottom: BaseTheme.spacing[2],
|
||||
marginHorizontal: BaseTheme.spacing[2]
|
||||
},
|
||||
recordItem: {
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: BaseTheme.spacing[3]
|
||||
},
|
||||
recordTypeIcon: {
|
||||
alignItems: 'center',
|
||||
borderRadius: BaseTheme.shape.borderRadius,
|
||||
display: 'flex',
|
||||
height: 40,
|
||||
justifyContent: 'center',
|
||||
marginRight: BaseTheme.spacing[3],
|
||||
width: 40
|
||||
},
|
||||
recordIcon: {
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
recordDetails: {
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-around',
|
||||
overflow: 'hidden',
|
||||
paddingVertical: BaseTheme.spacing[3]
|
||||
},
|
||||
recordName: {
|
||||
color: BaseTheme.palette.text01,
|
||||
fontSize: 15,
|
||||
overflow: 'hidden'
|
||||
},
|
||||
recordType: {
|
||||
color: BaseTheme.palette.text01,
|
||||
fontSize: 13
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user