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

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

@ -1,6 +1,5 @@
import React, { useState } from 'react';
import { Text, FlatList, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import Popover from 'react-native-popover-view';
import Touchable from 'react-native-platform-touchable';
@ -33,6 +32,7 @@ interface IOverflow {
loading: boolean;
parser: object;
theme: string;
context: any;
}
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;
class MessageParser extends UiKitParserMessage {
text({ text, type } = { text: '' }, context) {
const { theme } = useContext(ThemeContext);
text({ text, type }: any = { text: '' }, context: any) {
const { theme }: any = useContext(ThemeContext);
if (type !== 'mrkdwn') {
return <Text style={[styles.text, { color: themes[theme].bodyText }]}>{text}</Text>;
}
const isContext = context === BLOCK_CONTEXT.CONTEXT;
return (
// @ts-ignore
<Markdown
msg={text}
theme={theme}
@ -67,11 +68,9 @@ class MessageParser extends UiKitParserMessage {
);
}
button(element, context) {
const {
text, value, actionId, style
} = element;
const [{ loading }, action] = useBlockContext(element, context);
button(element: any, context: any) {
const { text, value, actionId, style } = element;
const [{ loading }, action]: any = useBlockContext(element, context);
const { theme } = useContext(ThemeContext);
return (
<Button
@ -87,23 +86,24 @@ class MessageParser extends UiKitParserMessage {
}
divider() {
const { theme } = useContext(ThemeContext);
const { theme }: any = useContext(ThemeContext);
// @ts-ignore
return <Divider theme={theme} />;
}
section(args) {
section(args: any) {
const { theme } = useContext(ThemeContext);
return <Section {...args} theme={theme} parser={this} />;
}
actions(args) {
actions(args: any) {
const { theme } = useContext(ThemeContext);
return <Actions {...args} theme={theme} parser={this} />;
}
overflow(element, context) {
const [{ loading }, action] = useBlockContext(element, context);
const { theme } = useContext(ThemeContext);
overflow(element: any, context: any) {
const [{ loading }, action]: any = useBlockContext(element, context);
const { theme }: any = useContext(ThemeContext);
return (
<Overflow
element={element}
@ -116,11 +116,9 @@ class MessageParser extends UiKitParserMessage {
);
}
datePicker(element, context) {
const [{
loading, value, error, language
}, action] = useBlockContext(element, context);
const { theme } = useContext(ThemeContext);
datePicker(element: any, context: any) {
const [{loading, value, error, language}, action]: any = useBlockContext(element, context);
const { theme }: any = useContext(ThemeContext);
return (
<DatePicker
element={element}
@ -135,18 +133,18 @@ class MessageParser extends UiKitParserMessage {
);
}
image(element, context) {
const { theme } = useContext(ThemeContext);
image(element: any, context: any) {
const { theme }: any = useContext(ThemeContext);
return <Image element={element} theme={theme} context={context} />;
}
context(args) {
context(args: any) {
const { theme } = useContext(ThemeContext);
return <Context {...args} theme={theme} parser={this} />;
}
multiStaticSelect(element, context) {
const [{ loading, value }, action] = useBlockContext(element, context);
multiStaticSelect(element: any, context: any) {
const [{ loading, value }, action]: any = useBlockContext(element, context);
const { theme } = useContext(ThemeContext);
return (
<MultiSelect
@ -161,8 +159,8 @@ class MessageParser extends UiKitParserMessage {
);
}
staticSelect(element, context) {
const [{ loading, value }, action] = useBlockContext(element, context);
staticSelect(element: any, context: any) {
const [{ loading, value }, action]: any = useBlockContext(element, context);
const { theme } = useContext(ThemeContext);
return (
<Select
@ -175,8 +173,8 @@ class MessageParser extends UiKitParserMessage {
);
}
selectInput(element, context) {
const [{ loading, value }, action] = useBlockContext(element, context);
selectInput(element: any, context: any) {
const [{ loading, value }, action]: any = useBlockContext(element, context);
const { theme } = useContext(ThemeContext);
return (
<MultiSelect
@ -201,9 +199,9 @@ class ModalParser extends UiKitParserModal {
input({
element, blockId, appId, label, description, hint
}, context) {
const [{ error }] = useBlockContext({ ...element, appId, blockId }, context);
const { theme } = useContext(ThemeContext);
}: any, context: any) {
const [{ error }]: any = useBlockContext({ ...element, appId, blockId }, context);
const { theme }: any = useContext(ThemeContext);
return (
<Input
parser={this}
@ -217,13 +215,13 @@ class ModalParser extends UiKitParserModal {
);
}
image(element, context) {
const { theme } = useContext(ThemeContext);
image(element: any, context: any) {
const { theme }: any = useContext(ThemeContext);
return <Image element={element} theme={theme} context={context} />;
}
plainInput(element, context) {
const [{ loading, value, error }, action] = useBlockContext(element, context);
plainInput(element: any, context: any) {
const [{ loading, value, error }, action]: any = useBlockContext(element, context);
const { theme } = useContext(ThemeContext);
const { multiline, actionId, placeholder } = element;
return (
@ -233,7 +231,7 @@ class ModalParser extends UiKitParserModal {
onInput={action}
multiline={multiline}
loading={loading}
onChangeText={text => action({ value: text })}
onChangeText={(text: any) => action({ value: text })}
inputStyle={multiline && styles.multiline}
containerStyle={styles.input}
value={value}
@ -250,4 +248,4 @@ export const modalParser = new ModalParser();
export const UiKitMessage = uiKitMessage(messageParser);
export const UiKitModal = uiKitModal(modalParser);
export const UiKitComponent = ({ render, blocks }) => render(blocks);
export const UiKitComponent = ({ render, blocks }: any) => render(blocks);