sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests 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 { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
import { BlockContext } from '@rocket.chat/ui-kit';
import Button from '../Button';
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 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 (

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

@ -1,6 +1,6 @@
import React from 'react';
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';
@ -13,5 +13,5 @@ const styles = StyleSheet.create({
});
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 DateTimePicker, { Event } from '@react-native-community/datetimepicker';
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 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;
if (context === BLOCK_CONTEXT.FORM) {
if (context === BlockContext.FORM) {
button = (
<Touchable
onPress={() => onShow(!show)}

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

@ -1,7 +1,7 @@
import React from 'react';
import { StyleSheet, View } from 'react-native';
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 Navigation from '../../lib/navigation/appNavigation';
@ -36,9 +36,9 @@ export const Media = ({ element }: IImage) => {
const genericImage = (element: IElement, context?: number) => {
switch (context) {
case BLOCK_CONTEXT.SECTION:
case BlockContext.SECTION:
return <Thumb element={element} />;
case BLOCK_CONTEXT.CONTEXT:
case BlockContext.CONTEXT:
return <ThumbContext element={element} />;
default:
return <Media element={element} />;

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

@ -1,6 +1,6 @@
import React from 'react';
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 { 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>
) : 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}
{hint ? <Text style={[styles.hint, { color: themes[theme].auxiliaryText }]}>{hint}</Text> : null}
</View>

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

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

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

@ -1,6 +1,6 @@
import React from 'react';
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 { IAccessoryComponent, IFields, ISection } from './interfaces';
@ -26,7 +26,7 @@ const styles = StyleSheet.create({
});
const Accessory = ({ element, parser }: IAccessoryComponent) =>
parser.renderAccessories({ ...element }, BLOCK_CONTEXT.SECTION, parser);
parser.renderAccessories({ ...element }, BlockContext.SECTION, parser);
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 */
import React, { useContext } from 'react';
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 Button from '../Button';
@ -20,7 +28,7 @@ import { Input } from './Input';
import { DatePicker } from './DatePicker';
import { Overflow } from './Overflow';
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({
input: {
@ -42,22 +50,33 @@ const styles = StyleSheet.create({
const plainText = ({ text } = { text: '' }) => text;
class MessageParser extends UiKitParserMessage {
class MessageParser extends UiKitParserMessage<React.ReactElement> {
get current() {
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);
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) {
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) {
@ -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() {
super();
Object.getOwnPropertyNames(MessageParser.prototype).forEach(method => {
// @ts-ignore
ModalParser.prototype[method] = ModalParser.prototype[method] || MessageParser.prototype[method];
});
}
@ -188,7 +210,7 @@ class ModalParser extends UiKitParserModal {
export const messageParser = new MessageParser();
export const modalParser = new ModalParser();
export const UiKitMessage = uiKitMessage(messageParser);
export const UiKitModal = uiKitModal(modalParser);
export const UiKitMessage = uiKitMessage(messageParser, { engine: 'rocket.chat' }) as any;
export const UiKitModal = uiKitModal(modalParser) as any;
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';
export enum ElementTypes {
@ -22,14 +24,6 @@ export enum ElementTypes {
MARKDOWN = 'mrkdwn'
}
export enum BlockContext {
BLOCK,
SECTION,
ACTION,
FORM,
CONTEXT
}
export enum ActionTypes {
ACTION = 'blockAction',
SUBMIT = 'viewSubmit',

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

@ -1,8 +1,8 @@
/* eslint-disable no-shadow */
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;
@ -41,7 +41,7 @@ export const useBlockContext = ({ blockId, actionId, appId, initialValue }: IUse
const error = errors && actionId && errors[actionId];
if ([BLOCK_CONTEXT.SECTION, BLOCK_CONTEXT.ACTION].includes(context)) {
if ([BlockContext.SECTION, BlockContext.ACTION].includes(context)) {
return [
{
loading,

1
app/externalModules.d.ts vendored
View File

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

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

@ -1,6 +1,6 @@
import React, { useState } from 'react';
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 { avatarURL } from '../../utils/avatar';
@ -61,7 +61,7 @@ const SelectUsers = ({
}))}
onClose={() => setUsers(users.filter((u: IUser) => selected.includes(u.name)))}
placeholder={{ text: `${I18n.t('Select_Users')}...` }}
context={BLOCK_CONTEXT.FORM}
context={BlockContext.FORM}
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 { ScrollView, StyleSheet, Text } from 'react-native';
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 { themes } from '../lib/constants';
@ -273,7 +273,7 @@ const LivechatEditView = ({
}}
placeholder={{ text: I18n.t('Tags') }}
value={tagParamSelected}
context={BLOCK_CONTEXT.FORM}
context={BlockContext.FORM}
multiselect
disabled={!permissions[1]}
inputStyle={styles.multiSelect}

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

@ -1,6 +1,6 @@
import React from 'react';
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 isEmpty from 'lodash/isEmpty';
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 })}
placeholder={{ text: I18n.t('Hide_System_Messages') }}
value={systemMessages as string[]}
context={BLOCK_CONTEXT.FORM}
context={BlockContext.FORM}
multiselect
/>
);

2
package.json
View File

@ -53,7 +53,7 @@
"@rocket.chat/message-parser": "0.30.0",
"@rocket.chat/react-native-fast-image": "^8.2.0",
"@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",
"color2k": "1.2.4",
"commonmark": "git+https://github.com/RocketChat/commonmark.js.git",

8
yarn.lock
View File

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