verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[IMPROVE] - migrating the UIKit container (finished)

This commit is contained in:
AlexAlexandre 2021-07-26 23:37:02 -03:00
parent e38e5880a8
commit 11eaadde2d
3 changed files with 49 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/containers/UIKit/MultiSelect/index.tsx
View File

@ -21,14 +21,16 @@ import styles from './styles';
interface IMultiSelect { interface IMultiSelect {
options: []; options: [];
onChange: Function; onChange: Function;
placeholder: object; placeholder: {
text: string;
};
context: number; context: number;
loading: boolean; loading: boolean;
multiselect: boolean; multiselect: boolean;
onSearch: Function; onSearch: Function;
onClose: Function; onClose: Function;
inputStyle: object; inputStyle: object;
value: []; value: {text: any}[];
disabled: boolean; disabled: boolean;
theme: string; theme: string;
} }
@ -57,7 +59,7 @@ export const MultiSelect = React.memo(({
inputStyle, inputStyle,
theme theme
}: IMultiSelect) => { }: IMultiSelect) => {
const [selected, select] = useState(Array.isArray(values) ? values : []); const [selected, select] = useState<any>(Array.isArray(values) ? values : []);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [search, onSearchChange] = useState(''); const [search, onSearchChange] = useState('');
const [currentValue, setCurrentValue] = useState(''); const [currentValue, setCurrentValue] = useState('');
@ -101,14 +103,14 @@ export const MultiSelect = React.memo(({
).start(() => setShowContent(false)); ).start(() => setShowContent(false));
}; };
const onSelect = (item) => { const onSelect = (item: any) => {
const { value, text: { text } } = item; const { value, text: { text } } = item;
if (multiselect) { if (multiselect) {
let newSelect = []; let newSelect = [];
if (!selected.includes(value)) { if (!selected.includes(value)) {
newSelect = [...selected, value]; newSelect = [...selected, value];
} else { } else {
newSelect = selected.filter(s => s !== value); newSelect = selected.filter((s: any) => s !== value);
} }
select(newSelect); select(newSelect);
onChange({ value: newSelect }); onChange({ value: newSelect });
@ -120,7 +122,7 @@ export const MultiSelect = React.memo(({
}; };
const renderContent = () => { const renderContent = () => {
const items = onSearch ? options : options.filter(option => textParser([option.text]).toLowerCase().includes(search.toLowerCase())); const items: any = onSearch ? options : options.filter((option: any) => textParser([option.text]).toLowerCase().includes(search.toLowerCase()));
return ( return (
<View style={[styles.modal, { backgroundColor: themes[theme].backgroundColor }]}> <View style={[styles.modal, { backgroundColor: themes[theme].backgroundColor }]}>
@ -150,6 +152,7 @@ export const MultiSelect = React.memo(({
theme={theme} theme={theme}
/> />
) : ( ) : (
// @ts-ignore
<Input <Input
onPress={onShow} onPress={onShow}
theme={theme} theme={theme}
@ -162,8 +165,9 @@ export const MultiSelect = React.memo(({
); );
if (context === BLOCK_CONTEXT.FORM) { if (context === BLOCK_CONTEXT.FORM) {
const items = options.filter(option => selected.includes(option.value)); const items: any = options.filter((option: any) => selected.includes(option.value));
button = ( button = (
// @ts-ignore
<Input <Input
onPress={onShow} onPress={onShow}
theme={theme} theme={theme}
@ -171,6 +175,7 @@ export const MultiSelect = React.memo(({
disabled={disabled} disabled={disabled}
inputStyle={inputStyle} inputStyle={inputStyle}
> >
{/*@ts-ignore*/}
{items.length ? <Chips items={items} onSelect={onSelect} theme={theme} /> : <Text style={[styles.pickerText, { color: themes[theme].auxiliaryText }]}>{placeholder.text}</Text>} {items.length ? <Chips items={items} onSelect={onSelect} theme={theme} /> : <Text style={[styles.pickerText, { color: themes[theme].auxiliaryText }]}>{placeholder.text}</Text>}
</Input> </Input>
); );
@ -187,7 +192,9 @@ export const MultiSelect = React.memo(({
> >
<TouchableWithoutFeedback onPress={onHide}> <TouchableWithoutFeedback onPress={onHide}>
<View style={styles.container}> <View style={styles.container}>
{/*@ts-ignore*/}
<View style={{ ...StyleSheet.absoluteFill, opacity: themes[theme].backdropOpacity, backgroundColor: themes[theme].backdropColor }} /> <View style={{ ...StyleSheet.absoluteFill, opacity: themes[theme].backdropOpacity, backgroundColor: themes[theme].backdropColor }} />
{/*@ts-ignore*/}
<KeyboardAvoidingView style={styles.keyboardView} behavior={behavior}> <KeyboardAvoidingView style={styles.keyboardView} behavior={behavior}>
<Animated.View style={[styles.animatedContent, { transform: [{ translateY }] }]}> <Animated.View style={[styles.animatedContent, { transform: [{ translateY }] }]}>
{showContent ? renderContent() : null} {showContent ? renderContent() : null}

2
app/containers/UIKit/Overflow.tsx
View File

@ -1,6 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Text, FlatList, StyleSheet } from 'react-native'; import { Text, FlatList, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import Popover from 'react-native-popover-view'; import Popover from 'react-native-popover-view';
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
@ -33,6 +32,7 @@ interface IOverflow {
loading: boolean; loading: boolean;
parser: object; parser: object;
theme: string; theme: string;
context: any;
} }
const keyExtractor = (item: any) => item.value; const keyExtractor = (item: any) => item.value;

70
app/containers/UIKit/index.js → app/containers/UIKit/index.tsx
View File

@ -50,14 +50,15 @@ const styles = StyleSheet.create({
const plainText = ({ text } = { text: '' }) => text; const plainText = ({ text } = { text: '' }) => text;
class MessageParser extends UiKitParserMessage { class MessageParser extends UiKitParserMessage {
text({ text, type } = { text: '' }, context) { text({ text, type }: any = { text: '' }, context: any) {
const { theme } = useContext(ThemeContext); const { theme }: any = useContext(ThemeContext);
if (type !== 'mrkdwn') { if (type !== 'mrkdwn') {
return <Text style={[styles.text, { color: themes[theme].bodyText }]}>{text}</Text>; return <Text style={[styles.text, { color: themes[theme].bodyText }]}>{text}</Text>;
} }
const isContext = context === BLOCK_CONTEXT.CONTEXT; const isContext = context === BLOCK_CONTEXT.CONTEXT;
return ( return (
// @ts-ignore
<Markdown <Markdown
msg={text} msg={text}
theme={theme} theme={theme}
@ -67,11 +68,9 @@ class MessageParser extends UiKitParserMessage {
); );
} }
button(element, context) { button(element: any, context: any) {
const { const { text, value, actionId, style } = element;
text, value, actionId, style const [{ loading }, action]: any = useBlockContext(element, context);
} = element;
const [{ loading }, action] = useBlockContext(element, context);
const { theme } = useContext(ThemeContext); const { theme } = useContext(ThemeContext);
return ( return (
<Button <Button
@ -87,23 +86,24 @@ class MessageParser extends UiKitParserMessage {
} }
divider() { divider() {
const { theme } = useContext(ThemeContext); const { theme }: any = useContext(ThemeContext);
// @ts-ignore
return <Divider theme={theme} />; return <Divider theme={theme} />;
} }
section(args) { section(args: any) {
const { theme } = useContext(ThemeContext); const { theme } = useContext(ThemeContext);
return <Section {...args} theme={theme} parser={this} />; return <Section {...args} theme={theme} parser={this} />;
} }
actions(args) { actions(args: any) {
const { theme } = useContext(ThemeContext); const { theme } = useContext(ThemeContext);
return <Actions {...args} theme={theme} parser={this} />; return <Actions {...args} theme={theme} parser={this} />;
} }
overflow(element, context) { overflow(element: any, context: any) {
const [{ loading }, action] = useBlockContext(element, context); const [{ loading }, action]: any = useBlockContext(element, context);
const { theme } = useContext(ThemeContext); const { theme }: any = useContext(ThemeContext);
return ( return (
<Overflow <Overflow
element={element} element={element}
@ -116,11 +116,9 @@ class MessageParser extends UiKitParserMessage {
); );
} }
datePicker(element, context) { datePicker(element: any, context: any) {
const [{ const [{loading, value, error, language}, action]: any = useBlockContext(element, context);
loading, value, error, language const { theme }: any = useContext(ThemeContext);
}, action] = useBlockContext(element, context);
const { theme } = useContext(ThemeContext);
return ( return (
<DatePicker <DatePicker
element={element} element={element}
@ -135,18 +133,18 @@ class MessageParser extends UiKitParserMessage {
); );
} }
image(element, context) { image(element: any, context: any) {
const { theme } = useContext(ThemeContext); const { theme }: any = useContext(ThemeContext);
return <Image element={element} theme={theme} context={context} />; return <Image element={element} theme={theme} context={context} />;
} }
context(args) { context(args: any) {
const { theme } = useContext(ThemeContext); const { theme } = useContext(ThemeContext);
return <Context {...args} theme={theme} parser={this} />; return <Context {...args} theme={theme} parser={this} />;
} }
multiStaticSelect(element, context) { multiStaticSelect(element: any, context: any) {
const [{ loading, value }, action] = useBlockContext(element, context); const [{ loading, value }, action]: any = useBlockContext(element, context);
const { theme } = useContext(ThemeContext); const { theme } = useContext(ThemeContext);
return ( return (
<MultiSelect <MultiSelect
@ -161,8 +159,8 @@ class MessageParser extends UiKitParserMessage {
); );
} }
staticSelect(element, context) { staticSelect(element: any, context: any) {
const [{ loading, value }, action] = useBlockContext(element, context); const [{ loading, value }, action]: any = useBlockContext(element, context);
const { theme } = useContext(ThemeContext); const { theme } = useContext(ThemeContext);
return ( return (
<Select <Select
@ -175,8 +173,8 @@ class MessageParser extends UiKitParserMessage {
); );
} }
selectInput(element, context) { selectInput(element: any, context: any) {
const [{ loading, value }, action] = useBlockContext(element, context); const [{ loading, value }, action]: any = useBlockContext(element, context);
const { theme } = useContext(ThemeContext); const { theme } = useContext(ThemeContext);
return ( return (
<MultiSelect <MultiSelect
@ -201,9 +199,9 @@ class ModalParser extends UiKitParserModal {
input({ input({
element, blockId, appId, label, description, hint element, blockId, appId, label, description, hint
}, context) { }: any, context: any) {
const [{ error }] = useBlockContext({ ...element, appId, blockId }, context); const [{ error }]: any = useBlockContext({ ...element, appId, blockId }, context);
const { theme } = useContext(ThemeContext); const { theme }: any = useContext(ThemeContext);
return ( return (
<Input <Input
parser={this} parser={this}
@ -217,13 +215,13 @@ class ModalParser extends UiKitParserModal {
); );
} }
image(element, context) { image(element: any, context: any) {
const { theme } = useContext(ThemeContext); const { theme }: any = useContext(ThemeContext);
return <Image element={element} theme={theme} context={context} />; return <Image element={element} theme={theme} context={context} />;
} }
plainInput(element, context) { plainInput(element: any, context: any) {
const [{ loading, value, error }, action] = useBlockContext(element, context); const [{ loading, value, error }, action]: any = useBlockContext(element, context);
const { theme } = useContext(ThemeContext); const { theme } = useContext(ThemeContext);
const { multiline, actionId, placeholder } = element; const { multiline, actionId, placeholder } = element;
return ( return (
@ -233,7 +231,7 @@ class ModalParser extends UiKitParserModal {
onInput={action} onInput={action}
multiline={multiline} multiline={multiline}
loading={loading} loading={loading}
onChangeText={text => action({ value: text })} onChangeText={(text: any) => action({ value: text })}
inputStyle={multiline && styles.multiline} inputStyle={multiline && styles.multiline}
containerStyle={styles.input} containerStyle={styles.input}
value={value} value={value}
@ -250,4 +248,4 @@ export const modalParser = new ModalParser();
export const UiKitMessage = uiKitMessage(messageParser); export const UiKitMessage = uiKitMessage(messageParser);
export const UiKitModal = uiKitModal(modalParser); export const UiKitModal = uiKitModal(modalParser);
export const UiKitComponent = ({ render, blocks }) => render(blocks); export const UiKitComponent = ({ render, blocks }: any) => render(blocks);