verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Chore: update @rocket.chat/ui-kit to 0.31.11 (#4203) 

* Chore: Update UiKit

* fix interfaces and plain_text and mrkdwn
This commit is contained in:
Reinaldo Neto 2022-05-26 11:07:17 -03:00 committed by GitHub
parent f1f8e9526e
commit 5101ab4769
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 67 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/containers/UIKit/Actions.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { BlockContext } from '@rocket.chat/ui-kit';
import Button from '../Button'; import Button from '../Button';
import I18n from '../../i18n'; import I18n from '../../i18n';
@ -10,7 +10,7 @@ export const Actions = ({ blockId, appId, elements, parser }: IActions) => {
const renderedElements = showMoreVisible ? elements?.slice(0, 5) : elements; const renderedElements = showMoreVisible ? elements?.slice(0, 5) : elements;
const Elements = () => ( const Elements = () => (
<>{renderedElements?.map(element => parser?.renderActions({ blockId, appId, ...element }, BLOCK_CONTEXT.ACTION, parser))}</> <>{renderedElements?.map(element => parser?.renderActions({ blockId, appId, ...element }, BlockContext.ACTION, parser))}</>
); );
return ( return (

4
app/containers/UIKit/Context.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { BlockContext } from '@rocket.chat/ui-kit';
import { IContext } from './interfaces'; import { IContext } from './interfaces';
@ -13,5 +13,5 @@ const styles = StyleSheet.create({
}); });
export const Context = ({ elements, parser }: IContext) => ( export const Context = ({ elements, parser }: IContext) => (
<View style={styles.container}>{elements?.map(element => parser?.renderContext(element, BLOCK_CONTEXT.CONTEXT, parser))}</View> <View style={styles.container}>{elements?.map(element => parser?.renderContext(element, BlockContext.CONTEXT, parser))}</View>
); );

4
app/containers/UIKit/DatePicker.tsx
View File

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native'; import { StyleSheet, Text, View } from 'react-native';
import DateTimePicker, { Event } from '@react-native-community/datetimepicker'; import DateTimePicker, { Event } from '@react-native-community/datetimepicker';
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { BlockContext } from '@rocket.chat/ui-kit';
import moment from 'moment'; import moment from 'moment';
import Button from '../Button'; import Button from '../Button';
@ -58,7 +58,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
let button = placeholder ? <Button title={textParser([placeholder])} onPress={() => onShow(!show)} loading={loading} /> : null; let button = placeholder ? <Button title={textParser([placeholder])} onPress={() => onShow(!show)} loading={loading} /> : null;
if (context === BLOCK_CONTEXT.FORM) { if (context === BlockContext.FORM) {
button = ( button = (
<Touchable <Touchable
onPress={() => onShow(!show)} onPress={() => onShow(!show)}

6
app/containers/UIKit/Image.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
import FastImage from '@rocket.chat/react-native-fast-image'; import FastImage from '@rocket.chat/react-native-fast-image';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { BlockContext } from '@rocket.chat/ui-kit';
import ImageContainer from '../message/Image'; import ImageContainer from '../message/Image';
import Navigation from '../../lib/navigation/appNavigation'; import Navigation from '../../lib/navigation/appNavigation';
@ -36,9 +36,9 @@ export const Media = ({ element }: IImage) => {
const genericImage = (element: IElement, context?: number) => { const genericImage = (element: IElement, context?: number) => {
switch (context) { switch (context) {
case BLOCK_CONTEXT.SECTION: case BlockContext.SECTION:
return <Thumb element={element} />; return <Thumb element={element} />;
case BLOCK_CONTEXT.CONTEXT: case BlockContext.CONTEXT:
return <ThumbContext element={element} />; return <ThumbContext element={element} />;
default: default:
return <Media element={element} />; return <Media element={element} />;

4
app/containers/UIKit/Input.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { StyleSheet, Text, View } from 'react-native'; import { StyleSheet, Text, View } from 'react-native';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { BlockContext } from '@rocket.chat/ui-kit';
import sharedStyles from '../../views/Styles'; import sharedStyles from '../../views/Styles';
import { themes } from '../../lib/constants'; import { themes } from '../../lib/constants';
@ -38,7 +38,7 @@ export const Input = ({ element, parser, label, description, error, hint, theme
<Text style={[styles.label, { color: error ? themes[theme].dangerColor : themes[theme].titleText }]}>{label}</Text> <Text style={[styles.label, { color: error ? themes[theme].dangerColor : themes[theme].titleText }]}>{label}</Text>
) : null} ) : null}
{description ? <Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{description}</Text> : null} {description ? <Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{description}</Text> : null}
{parser.renderInputs({ ...element }, BLOCK_CONTEXT.FORM, parser)} {parser.renderInputs({ ...element }, BlockContext.FORM, parser)}
{error ? <Text style={[styles.error, { color: themes[theme].dangerColor }]}>{error}</Text> : null} {error ? <Text style={[styles.error, { color: themes[theme].dangerColor }]}>{error}</Text> : null}
{hint ? <Text style={[styles.hint, { color: themes[theme].auxiliaryText }]}>{hint}</Text> : null} {hint ? <Text style={[styles.hint, { color: themes[theme].auxiliaryText }]}>{hint}</Text> : null}
</View> </View>

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

@ -10,7 +10,7 @@ import {
View, View,
TextStyle TextStyle
} from 'react-native'; } from 'react-native';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { BlockContext } from '@rocket.chat/ui-kit';
import Button from '../../Button'; import Button from '../../Button';
import FormTextInput from '../../TextInput/FormTextInput'; import FormTextInput from '../../TextInput/FormTextInput';
@ -19,7 +19,7 @@ import { themes } from '../../../lib/constants';
import I18n from '../../../i18n'; import I18n from '../../../i18n';
import { isIOS } from '../../../utils/deviceInfo'; import { isIOS } from '../../../utils/deviceInfo';
import { useTheme } from '../../../theme'; import { useTheme } from '../../../theme';
import { BlockContext, IText } from '../interfaces'; import { IText } from '../interfaces';
import Chips from './Chips'; import Chips from './Chips';
import Items from './Items'; import Items from './Items';
import Input from './Input'; import Input from './Input';
@ -172,7 +172,7 @@ export const MultiSelect = React.memo(
</Input> </Input>
); );
if (context === BLOCK_CONTEXT.FORM) { if (context === BlockContext.FORM) {
const items: any = options.filter((option: any) => selected.includes(option.value)); const items: any = options.filter((option: any) => selected.includes(option.value));
button = ( button = (
<Input <Input

4
app/containers/UIKit/Section.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { StyleSheet, Text, View } from 'react-native'; import { StyleSheet, Text, View } from 'react-native';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { BlockContext } from '@rocket.chat/ui-kit';
import { themes } from '../../lib/constants'; import { themes } from '../../lib/constants';
import { IAccessoryComponent, IFields, ISection } from './interfaces'; import { IAccessoryComponent, IFields, ISection } from './interfaces';
@ -26,7 +26,7 @@ const styles = StyleSheet.create({
}); });
const Accessory = ({ element, parser }: IAccessoryComponent) => const Accessory = ({ element, parser }: IAccessoryComponent) =>
parser.renderAccessories({ ...element }, BLOCK_CONTEXT.SECTION, parser); parser.renderAccessories({ ...element }, BlockContext.SECTION, parser);
const Fields = ({ fields, parser, theme }: IFields) => ( const Fields = ({ fields, parser, theme }: IFields) => (
<> <>

48
app/containers/UIKit/index.tsx
View File

@ -1,7 +1,15 @@
/* eslint-disable react-hooks/rules-of-hooks */ /* eslint-disable react-hooks/rules-of-hooks */
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import { StyleSheet, Text } from 'react-native'; import { StyleSheet, Text } from 'react-native';
import { BLOCK_CONTEXT, UiKitParserMessage, UiKitParserModal, uiKitMessage, uiKitModal } from '@rocket.chat/ui-kit'; import {
UiKitParserMessage,
UiKitParserModal,
uiKitMessage,
uiKitModal,
BlockContext,
Markdown as IMarkdown,
PlainText
} from '@rocket.chat/ui-kit';
import Markdown, { MarkdownPreview } from '../markdown'; import Markdown, { MarkdownPreview } from '../markdown';
import Button from '../Button'; import Button from '../Button';
@ -20,7 +28,7 @@ import { Input } from './Input';
import { DatePicker } from './DatePicker'; import { DatePicker } from './DatePicker';
import { Overflow } from './Overflow'; import { Overflow } from './Overflow';
import { ThemeContext } from '../../theme'; import { ThemeContext } from '../../theme';
import { BlockContext, IActions, IButton, IElement, IInputIndex, IParser, ISection, IText } from './interfaces'; import { IActions, IButton, IElement, IInputIndex, IParser, ISection } from './interfaces';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
input: { input: {
@ -42,22 +50,33 @@ const styles = StyleSheet.create({
const plainText = ({ text } = { text: '' }) => text; const plainText = ({ text } = { text: '' }) => text;
class MessageParser extends UiKitParserMessage { class MessageParser extends UiKitParserMessage<React.ReactElement> {
get current() { get current() {
return this as unknown as IParser; return this as unknown as IParser;
} }
text({ text, type }: Partial<IText> = { text: '' }, context: BlockContext) { plain_text(element: PlainText, context: BlockContext): React.ReactElement {
const { theme } = useContext(ThemeContext); const { theme } = useContext(ThemeContext);
if (type !== 'mrkdwn') {
return <Text style={[styles.text, { color: themes[theme].bodyText }]}>{text}</Text>;
}
const isContext = context === BLOCK_CONTEXT.CONTEXT; const isContext = context === BlockContext.CONTEXT;
if (isContext) { if (isContext) {
return <MarkdownPreview msg={text} style={[isContext && { color: themes[theme].auxiliaryText }]} numberOfLines={0} />; return (
<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].auxiliaryText }]} numberOfLines={0} />
);
} }
return <Markdown msg={text} theme={theme} style={[isContext && { color: themes[theme].auxiliaryText }]} />; return <Text style={[styles.text, { color: themes[theme].bodyText }]}>{element.text}</Text>;
}
mrkdwn(element: IMarkdown, context: BlockContext) {
const { theme } = useContext(ThemeContext);
const isContext = context === BlockContext.CONTEXT;
if (isContext) {
return (
<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].auxiliaryText }]} numberOfLines={0} />
);
}
return <Markdown msg={element.text} theme={theme} style={[isContext && { color: themes[theme].auxiliaryText }]} />;
} }
button(element: IButton, context: BlockContext) { button(element: IButton, context: BlockContext) {
@ -132,10 +151,13 @@ class MessageParser extends UiKitParserMessage {
} }
} }
class ModalParser extends UiKitParserModal { // plain_text and mrkdwn functions are created in MessageParser and the ModalParser's constructor use the same functions
// @ts-ignore
class ModalParser extends UiKitParserModal<React.ReactElement> {
constructor() { constructor() {
super(); super();
Object.getOwnPropertyNames(MessageParser.prototype).forEach(method => { Object.getOwnPropertyNames(MessageParser.prototype).forEach(method => {
// @ts-ignore
ModalParser.prototype[method] = ModalParser.prototype[method] || MessageParser.prototype[method]; ModalParser.prototype[method] = ModalParser.prototype[method] || MessageParser.prototype[method];
}); });
} }
@ -188,7 +210,7 @@ class ModalParser extends UiKitParserModal {
export const messageParser = new MessageParser(); export const messageParser = new MessageParser();
export const modalParser = new ModalParser(); export const modalParser = new ModalParser();
export const UiKitMessage = uiKitMessage(messageParser); export const UiKitMessage = uiKitMessage(messageParser, { engine: 'rocket.chat' }) as any;
export const UiKitModal = uiKitModal(modalParser); export const UiKitModal = uiKitModal(modalParser) as any;
export const UiKitComponent = ({ render, blocks }: any) => render(blocks); export const UiKitComponent = ({ render, blocks }: any) => render(blocks);

10
app/containers/UIKit/interfaces.ts
View File

@ -1,3 +1,5 @@
import { BlockContext } from '@rocket.chat/ui-kit';
import { TSupportedThemes } from '../../theme'; import { TSupportedThemes } from '../../theme';
export enum ElementTypes { export enum ElementTypes {
@ -22,14 +24,6 @@ export enum ElementTypes {
MARKDOWN = 'mrkdwn' MARKDOWN = 'mrkdwn'
} }
export enum BlockContext {
BLOCK,
SECTION,
ACTION,
FORM,
CONTEXT
}
export enum ActionTypes { export enum ActionTypes {
ACTION = 'blockAction', ACTION = 'blockAction',
SUBMIT = 'viewSubmit', SUBMIT = 'viewSubmit',

6
app/containers/UIKit/utils.ts
View File

@ -1,8 +1,8 @@
/* eslint-disable no-shadow */ /* eslint-disable no-shadow */
import React, { useContext, useState } from 'react'; import React, { useContext, useState } from 'react';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { BlockContext } from '@rocket.chat/ui-kit';
import { BlockContext, IText } from './interfaces'; import { IText } from './interfaces';
export const textParser = ([{ text }]: IText[]) => text; export const textParser = ([{ text }]: IText[]) => text;
@ -41,7 +41,7 @@ export const useBlockContext = ({ blockId, actionId, appId, initialValue }: IUse
const error = errors && actionId && errors[actionId]; const error = errors && actionId && errors[actionId];
if ([BLOCK_CONTEXT.SECTION, BLOCK_CONTEXT.ACTION].includes(context)) { if ([BlockContext.SECTION, BlockContext.ACTION].includes(context)) {
return [ return [
{ {
loading, loading,

1
app/externalModules.d.ts vendored
View File

@ -4,7 +4,6 @@ declare module 'commonmark-react-renderer';
declare module 'remove-markdown'; declare module 'remove-markdown';
declare module 'react-native-image-progress'; declare module 'react-native-image-progress';
declare module 'react-native-ui-lib/keyboard'; declare module 'react-native-ui-lib/keyboard';
declare module '@rocket.chat/ui-kit';
declare module '@rocket.chat/sdk'; declare module '@rocket.chat/sdk';
declare module 'react-native-config-reader'; declare module 'react-native-config-reader';
declare module 'react-native-keycommands'; declare module 'react-native-keycommands';

4
app/views/CreateDiscussionView/SelectUsers.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Text } from 'react-native'; import { Text } from 'react-native';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { BlockContext } from '@rocket.chat/ui-kit';
import debounce from '../../utils/debounce'; import debounce from '../../utils/debounce';
import { avatarURL } from '../../utils/avatar'; import { avatarURL } from '../../utils/avatar';
@ -61,7 +61,7 @@ const SelectUsers = ({
}))} }))}
onClose={() => setUsers(users.filter((u: IUser) => selected.includes(u.name)))} onClose={() => setUsers(users.filter((u: IUser) => selected.includes(u.name)))}
placeholder={{ text: `${I18n.t('Select_Users')}...` }} placeholder={{ text: `${I18n.t('Select_Users')}...` }}
context={BLOCK_CONTEXT.FORM} context={BlockContext.FORM}
multiselect multiselect
/> />
</> </>

4
app/views/LivechatEditView.tsx
View File

@ -3,7 +3,7 @@ import { StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/native'; import { RouteProp } from '@react-navigation/native';
import { ScrollView, StyleSheet, Text } from 'react-native'; import { ScrollView, StyleSheet, Text } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { BlockContext } from '@rocket.chat/ui-kit';
import { TSupportedThemes, withTheme } from '../theme'; import { TSupportedThemes, withTheme } from '../theme';
import { themes } from '../lib/constants'; import { themes } from '../lib/constants';
@ -273,7 +273,7 @@ const LivechatEditView = ({
}} }}
placeholder={{ text: I18n.t('Tags') }} placeholder={{ text: I18n.t('Tags') }}
value={tagParamSelected} value={tagParamSelected}
context={BLOCK_CONTEXT.FORM} context={BlockContext.FORM}
multiselect multiselect
disabled={!permissions[1]} disabled={!permissions[1]}
inputStyle={styles.multiSelect} inputStyle={styles.multiSelect}

4
app/views/RoomInfoEditView/index.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Q } from '@nozbe/watermelondb'; import { Q } from '@nozbe/watermelondb';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { BlockContext } from '@rocket.chat/ui-kit';
import { dequal } from 'dequal'; import { dequal } from 'dequal';
import isEmpty from 'lodash/isEmpty'; import isEmpty from 'lodash/isEmpty';
import { Alert, Keyboard, ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native'; import { Alert, Keyboard, ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
@ -479,7 +479,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
onChange={({ value }: { value: boolean }) => this.setState({ systemMessages: value })} onChange={({ value }: { value: boolean }) => this.setState({ systemMessages: value })}
placeholder={{ text: I18n.t('Hide_System_Messages') }} placeholder={{ text: I18n.t('Hide_System_Messages') }}
value={systemMessages as string[]} value={systemMessages as string[]}
context={BLOCK_CONTEXT.FORM} context={BlockContext.FORM}
multiselect multiselect
/> />
); );

2
package.json
View File

@ -53,7 +53,7 @@
"@rocket.chat/message-parser": "0.30.0", "@rocket.chat/message-parser": "0.30.0",
"@rocket.chat/react-native-fast-image": "^8.2.0", "@rocket.chat/react-native-fast-image": "^8.2.0",
"@rocket.chat/sdk": "RocketChat/Rocket.Chat.js.SDK#mobile", "@rocket.chat/sdk": "RocketChat/Rocket.Chat.js.SDK#mobile",
"@rocket.chat/ui-kit": "0.13.0", "@rocket.chat/ui-kit": "^0.31.11",
"bytebuffer": "^5.0.1", "bytebuffer": "^5.0.1",
"color2k": "1.2.4", "color2k": "1.2.4",
"commonmark": "git+https://github.com/RocketChat/commonmark.js.git", "commonmark": "git+https://github.com/RocketChat/commonmark.js.git",

8
yarn.lock
View File

@ -4038,10 +4038,10 @@
tiny-events "^1.0.1" tiny-events "^1.0.1"
universal-websocket-client "^1.0.2" universal-websocket-client "^1.0.2"
"@rocket.chat/ui-kit@0.13.0": "@rocket.chat/ui-kit@^0.31.11":
version "0.13.0" version "0.31.11"
resolved "https://registry.yarnpkg.com/@rocket.chat/ui-kit/-/ui-kit-0.13.0.tgz#0b4d43584f931d5e8af22a29a4c741d5f7314bb8" resolved "https://registry.yarnpkg.com/@rocket.chat/ui-kit/-/ui-kit-0.31.11.tgz#701e5bccf43abe2a9bd54cd70220a21ae83c521d"
integrity sha512-xY8xc98KGshyOJM2GCLnYE9TTevViO7bVeY1HVRB2anDutgHRFgt6qFW1eiaB8s+6J+5I6VTE3k0jzQeaRsAeg== integrity sha512-gPrBAZAPK64DpscKdJqIGbCNrElBOa/dUvB7Ll0KLsC5yClClPPs6tAmw29f7gs/+rKEYYXkRtj8HiyPXnlJ5Q==
"@sideway/address@^4.1.3": "@sideway/address@^4.1.3":
version "4.1.4" version "4.1.4"