sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Start Typescript migration (#3279)

This commit is contained in:
Alex Junior 2021-09-13 17:41:05 -03:00 committed by GitHub
parent 9c526b753e
commit 69a67ea998
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
600 changed files with 37240 additions and 27134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.circleci/config.yml
View File

@ -340,7 +340,7 @@ jobs:
<<: *defaults
docker:
- image: circleci/node:15
resource_class: large
environment:
CODECOV_TOKEN: caa771ab-3d45-4756-8e2a-e1f25996fef6
@ -376,6 +376,7 @@ jobs:
environment:
<<: *android-env
<<: *bash-env
resource_class: large
steps:
- android-build
@ -386,6 +387,7 @@ jobs:
environment:
<<: *android-env
<<: *bash-env
resource_class: large
steps:
- android-build

374
.eslintrc.js
View File

@ -1,161 +1,156 @@
module.exports = {
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".ios.js", ".android.js", ".native.js", ".tsx"]
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.ios.js', '.android.js', '.native.js', '.ts', '.tsx']
}
}
},
"parser": "@babel/eslint-parser",
"extends": "airbnb",
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2017,
"ecmaFeatures": {
"experimentalObjectRestSpread" : true,
"jsx": true,
"legacyDecorators": true
parser: '@babel/eslint-parser',
extends: ['@rocket.chat/eslint-config', 'prettier'],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2017,
ecmaFeatures: {
experimentalObjectRestSpread: true,
jsx: true,
legacyDecorators: true
}
},
"plugins": [
"react",
"jsx-a11y",
"import",
"react-native",
"@babel"
plugins: ['react', 'jsx-a11y', 'import', 'react-native', '@babel'],
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
jquery: true,
mocha: true
},
rules: {
'import/extensions': [
'error',
'ignorePackages',
{
js: 'warning',
jsx: 'warning',
ts: 'warning',
tsx: 'warning'
}
],
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true,
"jquery": true,
"mocha": true
'react/jsx-filename-extension': [
1,
{
extensions: ['.js', '.jsx', '.ts', '.tsx']
}
],
'react/require-default-props': [0],
'ordered-imports': [0],
'react/no-did-mount-set-state': 0,
'react/no-multi-comp': [0],
'react/jsx-indent-props': [2, 'tab'],
'jsx-quotes': [2, 'prefer-single'],
'jsx-a11y/href-no-hash': 0,
'jsx-a11y/aria-role': 0,
'import/prefer-default-export': 0,
'import/no-cycle': 0,
'import/order': [
'error',
{
'newlines-between': 'ignore'
}
],
camelcase: 0,
'no-underscore-dangle': 0,
'no-return-assign': 0,
'no-param-reassign': 0,
'no-tabs': 0,
'no-multi-spaces': 2,
'no-eval': 2,
'no-extend-native': 2,
'no-multi-str': 2,
'no-use-before-define': 2,
'no-const-assign': 2,
'no-cond-assign': 2,
'no-constant-condition': 2,
'no-control-regex': 2,
'no-debugger': 2,
'no-delete-var': 2,
'no-dupe-keys': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-duplicate-case': 2,
'no-else-return': [0, { allowElseIf: true }],
'no-empty': 2,
'no-empty-character-class': 2,
'no-ex-assign': 2,
'no-extra-boolean-cast': 2,
'no-extra-semi': 2,
'no-fallthrough': 2,
'no-func-assign': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-mixed-spaces-and-tabs': 1,
'no-sparse-arrays': 2,
'no-negated-in-lhs': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-undef': 2,
'no-unreachable': 2,
'no-unused-expressions': 0,
'no-unused-vars': 'off',
'max-len': 0,
'react/jsx-uses-vars': 2,
'no-void': 2,
'no-var': 2,
'one-var': [2, 'never'],
'no-lonely-if': 2,
'no-trailing-spaces': 2,
complexity: [1, 31],
'space-in-parens': [2, 'never'],
'space-before-blocks': [2, 'always'],
indent: 'off',
'eol-last': [2, 'always'],
'comma-dangle': [2, 'never'],
'keyword-spacing': 2,
'block-spacing': 2,
'brace-style': [2, '1tbs', { allowSingleLine: true }],
'computed-property-spacing': 2,
'comma-spacing': 2,
'comma-style': 2,
'guard-for-in': 2,
'wrap-iife': 2,
'block-scoped-var': 2,
curly: [2, 'all'],
eqeqeq: [2, 'allow-null'],
'new-cap': 'off',
'use-isnan': 2,
'valid-typeof': 2,
'linebreak-style': 0,
'prefer-template': 2,
quotes: [1, 'single'],
semi: [2, 'always'],
'prefer-const': 2,
'object-shorthand': 2,
'consistent-return': 0,
'global-require': 'off',
'react-native/no-unused-styles': 2,
'react/jsx-one-expression-per-line': 0,
'require-await': 2,
'func-names': 0,
'react/static-property-placement': [0],
'arrow-parens': ['warn', 'as-needed', { requireForBlockBody: true }],
'react/jsx-curly-newline': [0],
'react/state-in-constructor': [0],
'no-async-promise-executor': [0],
'max-classes-per-file': [0],
'no-multiple-empty-lines': [0],
'no-sequences': 'off'
},
"rules": {
"react/jsx-filename-extension": [1, {
"extensions": [".js", ".jsx"]
}],
"react/require-default-props": [0],
"react/no-unused-prop-types": [2, {
"skipShapeProps": true
}],
"react/no-did-mount-set-state": 0,
"react/no-multi-comp": [0],
"react/jsx-indent": [2, "tab"],
"react/jsx-indent-props": [2, "tab"],
"react/forbid-prop-types": 0,
"jsx-quotes": [2, "prefer-single"],
"jsx-a11y/href-no-hash": 0,
"jsx-a11y/aria-role": 0,
"import/prefer-default-export": 0,
"import/no-cycle": 0,
"camelcase": 0,
"no-underscore-dangle": 0,
"no-return-assign": 0,
"no-param-reassign": 0,
"no-tabs": 0,
"no-multi-spaces": 2,
"no-eval": 2,
"no-extend-native": 2,
"no-multi-str": 2,
"no-use-before-define": 2,
"no-const-assign": 2,
"no-cond-assign": 2,
"no-constant-condition": 2,
"no-control-regex": 2,
"no-debugger": 2,
"no-delete-var": 2,
"no-dupe-keys": 2,
"no-dupe-args": 2,
"no-dupe-class-members": 2,
"no-duplicate-case": 2,
"no-else-return": [0, {allowElseIf: true}],
"no-empty": 2,
"no-empty-character-class": 2,
"no-ex-assign": 2,
"no-extra-boolean-cast": 2,
"no-extra-semi": 2,
"no-fallthrough": 2,
"no-func-assign": 2,
"no-inner-declarations": [2, "functions"],
"no-invalid-regexp": 2,
"no-irregular-whitespace": 2,
"no-mixed-spaces-and-tabs": 2,
"no-sparse-arrays": 2,
"no-negated-in-lhs": 2,
"no-obj-calls": 2,
"no-octal": 2,
"no-redeclare": 2,
"no-regex-spaces": 2,
"no-undef": 2,
"no-unreachable": 2,
"no-unused-expressions": 0,
"no-unused-vars": [2, {
"vars": "all",
"args": "after-used"
}],
"max-len": 0,
"react/jsx-uses-vars": 2,
"no-void": 2,
"no-var": 2,
"one-var": [2, "never"],
"no-lonely-if": 2,
"no-trailing-spaces": 2,
"complexity": [1, 31],
"space-in-parens": [2, "never"],
"space-before-function-paren": [2, "never"],
"space-before-blocks": [2, "always"],
"indent": [2, "tab", {"SwitchCase": 1}],
"eol-last": [2, "always"],
"comma-dangle": [2, "never"],
"keyword-spacing": 2,
"block-spacing": 2,
"brace-style": [2, "1tbs", { "allowSingleLine": true }],
"computed-property-spacing": 2,
"comma-spacing": 2,
"comma-style": 2,
"guard-for-in": 2,
"wrap-iife": 2,
"block-scoped-var": 2,
"curly": [2, "all"],
"eqeqeq": [2, "allow-null"],
"new-cap": [2],
"use-isnan": 2,
"valid-typeof": 2,
"linebreak-style": 0,
"prefer-template": 2,
"template-curly-spacing": [2, "always"],
"quotes": [2, "single"],
"semi": [2, "always"],
"prefer-const": 2,
"object-shorthand": 2,
"consistent-return": 0,
"global-require": "off",
"react-native/no-unused-styles": 2,
"react/jsx-one-expression-per-line": 0,
"require-await": 2,
"func-names": 0,
"react/sort-comp": ["error", {
"order": [
"static-variables",
"static-methods",
"lifecycle",
"everything-else",
"render"
]
}],
"react/static-property-placement": [0],
"arrow-parens": ["error", "as-needed", { requireForBlockBody: true }],
"react/jsx-props-no-spreading": [1],
"react/jsx-curly-newline": [0],
"react/state-in-constructor": [0],
"no-async-promise-executor": [0],
"max-classes-per-file": [0],
"no-multiple-empty-lines": [0]
},
"globals": {
"__DEV__": true
globals: {
__DEV__: true
},
overrides: [
{
@ -173,6 +168,85 @@ module.exports = {
'no-await-in-loop': 0,
'no-restricted-syntax': 0
}
},
{
files: ['**/*.ts', '**/*.tsx'],
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/eslint-recommended',
'@rocket.chat/eslint-config',
'prettier'
],
parser: '@typescript-eslint/parser',
parserOptions: {
sourceType: 'module',
ecmaVersion: 2018,
warnOnUnsupportedTypeScriptVersion: false,
ecmaFeatures: {
experimentalObjectRestSpread: true,
legacyDecorators: true
}
},
plugins: ['react', '@typescript-eslint'],
rules: {
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': [0],
'@typescript-eslint/ban-types': [0],
'func-call-spacing': 'off',
'jsx-quotes': ['error', 'prefer-single'],
indent: 'off',
'comma-dangle': [2, 'never'],
'no-return-assign': 0,
'no-dupe-class-members': 'off',
'no-extra-parens': 'off',
'no-spaced-func': 'off',
'no-unused-vars': 'off',
'no-useless-constructor': 'off',
'no-use-before-define': 'off',
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'react/jsx-no-undef': 'error',
'react/jsx-fragments': ['error', 'syntax'],
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/indent': [
'warn',
'tab',
{
SwitchCase: 1
}
],
'@typescript-eslint/no-extra-parens': [
'warn',
'all',
{
conditionalAssign: true,
nestedBinaryExpressions: false,
returnAssign: true,
ignoreJSX: 'all',
enforceForArrowConditionals: false
}
],
'@typescript-eslint/no-dupe-class-members': 'error',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
ignoreRestSiblings: true
}
],
'new-cap': 'off'
},
globals: {
JSX: true
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.ts', '.tsx']
}
}
}
}
]
};

25
.prettierignore Normal file
View File

@ -0,0 +1,25 @@
.circleci/
.github/
.husky
build/
node_modules/
coverage/
e2e/docker/
artifacts/
android/
ios/
patches/
scripts/
.bettercodehub.yml
.buckconfig
.gitattributes
.gitignore
.snyk
.watchmanconfig
CONTRIBUTING.md
README.md
SECURITY.md
npm-debug.log
yarn-error.log

10
.prettierrc.js Normal file
View File

@ -0,0 +1,10 @@
module.exports = {
bracketSpacing: true,
jsxBracketSameLine: true,
singleQuote: true,
jsxSingleQuote: true,
trailingComma: 'none',
printWidth: 130,
useTabs: true,
arrowParens: 'avoid'
};

12
CONTRIBUTING.md
View File

@ -54,6 +54,18 @@ To check for lint issues on your code, run this on your terminal:
yarn lint
```
## Code formatting
We use [Prettier](https://prettier.io) to format the code style in our project. We have a pre-commit hook enforcing commits to follow our style guides.
To fix your code formatting issues, run this on your terminal:
```sh
yarn prettier
```
[Check this link](https://prettier.io/docs/en/editors.html) to see how to integrate Prettier with your preferred code editor, and run Prettier when save your file for example.
## Tests
It's always important to ensure everything is working properly and that's why tests are great. We have unit and e2e tests on this project.

47
__tests__/__snapshots__/Storyshots.test.js.snap
View File

@ -899,11 +899,10 @@ exports[`Storyshots BackgroundContainer black theme - loading 1`] = `
</View>
<ActivityIndicator
animating={true}
color="#999999"
color="#f9f9f9"
hidesWhenStopped={true}
size="small"
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
@ -915,11 +914,7 @@ exports[`Storyshots BackgroundContainer black theme - loading 1`] = `
"right": 0,
"textAlign": "center",
"top": 60,
},
Object {
"color": "#f9f9f9",
},
]
}
}
/>
</View>
@ -1037,11 +1032,10 @@ exports[`Storyshots BackgroundContainer dark theme - loading 1`] = `
</View>
<ActivityIndicator
animating={true}
color="#999999"
color="#f9f9f9"
hidesWhenStopped={true}
size="small"
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
@ -1053,11 +1047,7 @@ exports[`Storyshots BackgroundContainer dark theme - loading 1`] = `
"right": 0,
"textAlign": "center",
"top": 60,
},
Object {
"color": "#f9f9f9",
},
]
}
}
/>
</View>
@ -1175,11 +1165,10 @@ exports[`Storyshots BackgroundContainer loading 1`] = `
</View>
<ActivityIndicator
animating={true}
color="#999999"
color="#6C727A"
hidesWhenStopped={true}
size="small"
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
@ -1191,11 +1180,7 @@ exports[`Storyshots BackgroundContainer loading 1`] = `
"right": 0,
"textAlign": "center",
"top": 60,
},
Object {
"color": "#6C727A",
},
]
}
}
/>
</View>
@ -4693,7 +4678,7 @@ exports[`Storyshots List pressable 1`] = `
"justifyContent": "center",
"paddingHorizontal": 12,
},
false,
undefined,
Object {
"height": 92,
},
@ -6211,7 +6196,7 @@ exports[`Storyshots List with bigger font 1`] = `
"justifyContent": "center",
"paddingHorizontal": 12,
},
false,
undefined,
Object {
"height": 69,
},
@ -6625,7 +6610,7 @@ exports[`Storyshots List with bigger font 1`] = `
"justifyContent": "center",
"paddingHorizontal": 12,
},
false,
undefined,
Object {
"height": 69,
},
@ -7080,7 +7065,7 @@ exports[`Storyshots List with black theme 1`] = `
"justifyContent": "center",
"paddingHorizontal": 12,
},
false,
undefined,
Object {
"height": 92,
},
@ -7494,7 +7479,7 @@ exports[`Storyshots List with black theme 1`] = `
"justifyContent": "center",
"paddingHorizontal": 12,
},
false,
undefined,
Object {
"height": 92,
},
@ -7972,7 +7957,7 @@ exports[`Storyshots List with custom colors 1`] = `
"justifyContent": "center",
"paddingHorizontal": 12,
},
false,
undefined,
Object {
"height": 92,
},
@ -8129,7 +8114,7 @@ exports[`Storyshots List with dark theme 1`] = `
"justifyContent": "center",
"paddingHorizontal": 12,
},
false,
undefined,
Object {
"height": 92,
},
@ -8543,7 +8528,7 @@ exports[`Storyshots List with dark theme 1`] = `
"justifyContent": "center",
"paddingHorizontal": 12,
},
false,
undefined,
Object {
"height": 92,
},
@ -10410,7 +10395,7 @@ exports[`Storyshots List with small font 1`] = `
"justifyContent": "center",
"paddingHorizontal": 12,
},
false,
undefined,
Object {
"height": 36.800000000000004,
},
@ -10824,7 +10809,7 @@ exports[`Storyshots List with small font 1`] = `
"justifyContent": "center",
"paddingHorizontal": 12,
},
false,
undefined,
Object {
"height": 36.800000000000004,
},

2
android/app/build.gradle
View File

@ -25,7 +25,7 @@ import com.android.build.OutputFile
* bundleAssetName: "index.android.bundle",
*
* // the entry file for bundle generation. If none specified and
* // "index.android.js" exists, it will be used. Otherwise "index.js" is
* // "index.android.js" exists, it will be used. Otherwise "index.tsx" is
* // default. Can be overridden with ENTRY_FILE environment variable.
* entryFile: "index.android.js",
*

58
app/AppContainer.js → app/AppContainer.tsx
View File

@ -1,21 +1,15 @@
import React from 'react';
import PropTypes from 'prop-types';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { connect } from 'react-redux';
import Navigation from './lib/Navigation';
import { defaultHeader, getActiveRouteName, navigationTheme } from './utils/navigation';
import {
ROOT_LOADING, ROOT_OUTSIDE, ROOT_NEW_SERVER, ROOT_INSIDE, ROOT_SET_USERNAME
} from './actions/app';
import { ROOT_INSIDE, ROOT_LOADING, ROOT_NEW_SERVER, ROOT_OUTSIDE, ROOT_SET_USERNAME } from './actions/app';
// Stacks
import AuthLoadingView from './views/AuthLoadingView';
// SetUsername Stack
import SetUsernameView from './views/SetUsernameView';
import OutsideStack from './stacks/OutsideStack';
import InsideStack from './stacks/InsideStack';
import MasterDetailStack from './stacks/MasterDetailStack';
@ -26,16 +20,13 @@ import { setCurrentScreen } from './utils/log';
const SetUsername = createStackNavigator();
const SetUsernameStack = () => (
<SetUsername.Navigator screenOptions={defaultHeader}>
<SetUsername.Screen
name='SetUsernameView'
component={SetUsernameView}
/>
<SetUsername.Screen name='SetUsernameView' component={SetUsernameView} />
</SetUsername.Navigator>
);
// App
const Stack = createStackNavigator();
const App = React.memo(({ root, isMasterDetail }) => {
const App = React.memo(({ root, isMasterDetail }: { root: string; isMasterDetail: boolean }) => {
if (!root) {
return null;
}
@ -54,61 +45,34 @@ const App = React.memo(({ root, isMasterDetail }) => {
<NavigationContainer
theme={navTheme}
ref={Navigation.navigationRef}
onStateChange={(state) => {
onStateChange={state => {
const previousRouteName = Navigation.routeNameRef.current;
const currentRouteName = getActiveRouteName(state);
if (previousRouteName !== currentRouteName) {
setCurrentScreen(currentRouteName);
}
Navigation.routeNameRef.current = currentRouteName;
}}
>
}}>
<Stack.Navigator screenOptions={{ headerShown: false, animationEnabled: false }}>
<>
{root === ROOT_LOADING ? (
<Stack.Screen
name='AuthLoading'
component={AuthLoadingView}
/>
) : null}
{root === ROOT_LOADING ? <Stack.Screen name='AuthLoading' component={AuthLoadingView} /> : null}
{root === ROOT_OUTSIDE || root === ROOT_NEW_SERVER ? (
<Stack.Screen
name='OutsideStack'
component={OutsideStack}
/>
<Stack.Screen name='OutsideStack' component={OutsideStack} />
) : null}
{root === ROOT_INSIDE && isMasterDetail ? (
<Stack.Screen
name='MasterDetailStack'
component={MasterDetailStack}
/>
) : null}
{root === ROOT_INSIDE && !isMasterDetail ? (
<Stack.Screen
name='InsideStack'
component={InsideStack}
/>
) : null}
{root === ROOT_SET_USERNAME ? (
<Stack.Screen
name='SetUsernameStack'
component={SetUsernameStack}
/>
<Stack.Screen name='MasterDetailStack' component={MasterDetailStack} />
) : null}
{root === ROOT_INSIDE && !isMasterDetail ? <Stack.Screen name='InsideStack' component={InsideStack} /> : null}
{root === ROOT_SET_USERNAME ? <Stack.Screen name='SetUsernameStack' component={SetUsernameStack} /> : null}
</>
</Stack.Navigator>
</NavigationContainer>
);
});
const mapStateToProps = state => ({
const mapStateToProps = (state: any) => ({
root: state.app.root,
isMasterDetail: state.app.isMasterDetail
});
App.propTypes = {
root: PropTypes.string,
isMasterDetail: PropTypes.bool
};
const AppContainer = connect(mapStateToProps)(App);
export default AppContainer;

9
app/ReactotronConfig.js
View File

@ -2,17 +2,12 @@
import { NativeModules } from 'react-native';
import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';
import sagaPlugin from 'reactotron-redux-saga'
import sagaPlugin from 'reactotron-redux-saga';
if (__DEV__) {
const scriptURL = NativeModules.SourceCode.scriptURL;
const scriptHostname = scriptURL.split('://')[1].split(':')[0];
Reactotron
.configure({ host: scriptHostname })
.useReactNative()
.use(reactotronRedux())
.use(sagaPlugin())
.connect();
Reactotron.configure({ host: scriptHostname }).useReactNative().use(reactotronRedux()).use(sagaPlugin()).connect();
// Running on android device
// $ adb reverse tcp:9090 tcp:9090
Reactotron.clear();

34
app/actions/actionsTypes.js
View File

@ -9,18 +9,8 @@ function createRequestTypes(base, types = defaultTypes) {
}
// Login events
export const LOGIN = createRequestTypes('LOGIN', [
...defaultTypes,
'SET_SERVICES',
'SET_PREFERENCE',
'SET_LOCAL_AUTHENTICATED'
]);
export const SHARE = createRequestTypes('SHARE', [
'SELECT_SERVER',
'SET_USER',
'SET_SETTINGS',
'SET_SERVER_INFO'
]);
export const LOGIN = createRequestTypes('LOGIN', [...defaultTypes, 'SET_SERVICES', 'SET_PREFERENCE', 'SET_LOCAL_AUTHENTICATED']);
export const SHARE = createRequestTypes('SHARE', ['SELECT_SERVER', 'SET_USER', 'SET_SETTINGS', 'SET_SERVER_INFO']);
export const USER = createRequestTypes('USER', ['SET']);
export const ROOMS = createRequestTypes('ROOMS', [
...defaultTypes,
@ -33,8 +23,24 @@ export const ROOMS = createRequestTypes('ROOMS', [
'OPEN_SEARCH_HEADER',
'CLOSE_SEARCH_HEADER'
]);
export const ROOM = createRequestTypes('ROOM', ['SUBSCRIBE', 'UNSUBSCRIBE', 'LEAVE', 'DELETE', 'REMOVED', 'CLOSE', 'FORWARD', 'USER_TYPING']);
export const INQUIRY = createRequestTypes('INQUIRY', [...defaultTypes, 'SET_ENABLED', 'RESET', 'QUEUE_ADD', 'QUEUE_UPDATE', 'QUEUE_REMOVE']);
export const ROOM = createRequestTypes('ROOM', [
'SUBSCRIBE',
'UNSUBSCRIBE',
'LEAVE',
'DELETE',
'REMOVED',
'CLOSE',
'FORWARD',
'USER_TYPING'
]);
export const INQUIRY = createRequestTypes('INQUIRY', [
...defaultTypes,
'SET_ENABLED',
'RESET',
'QUEUE_ADD',
'QUEUE_UPDATE',
'QUEUE_REMOVE'
]);
export const APP = createRequestTypes('APP', ['START', 'READY', 'INIT', 'INIT_LOCAL_SETTINGS', 'SET_MASTER_DETAIL']);
export const MESSAGES = createRequestTypes('MESSAGES', ['REPLY_BROADCAST']);
export const CREATE_CHANNEL = createRequestTypes('CREATE_CHANNEL', [...defaultTypes]);

1
app/actions/inviteLinks.js
View File

@ -32,7 +32,6 @@ export function inviteLinksClear() {
};
}
export function inviteLinksCreate(rid) {
return {
type: types.INVITE_LINKS.CREATE,

1
app/actions/rooms.js
View File

@ -1,6 +1,5 @@
import * as types from './actionsTypes';
export function roomsRequest(params = { allData: false }) {
return {
type: types.ROOMS.REQUEST,

11
app/commands.js
View File

@ -125,15 +125,15 @@ const keyCommands = [
discoverabilityTitle: I18n.t('Add_server')
},
// Refers to select rooms on list
...([1, 2, 3, 4, 5, 6, 7, 8, 9].map(value => ({
...[1, 2, 3, 4, 5, 6, 7, 8, 9].map(value => ({
input: `${value}`,
modifierFlags: constants.keyModifierCommand
}))),
})),
// Refers to select servers on list
...([1, 2, 3, 4, 5, 6, 7, 8, 9].map(value => ({
...[1, 2, 3, 4, 5, 6, 7, 8, 9].map(value => ({
input: `${value}`,
modifierFlags: constants.keyModifierCommand | constants.keyModifierAlternate
})))
}))
];
export const setKeyCommands = () => KeyCommands.setKeyCommands(keyCommands);
@ -161,7 +161,8 @@ export const handleCommandSubmit = event => commandHandle(event, KEY_SEND_MESSAG
export const handleCommandShowUpload = event => commandHandle(event, KEY_UPLOAD, ['command']);
export const handleCommandScroll = event => commandHandle(event, [constants.keyInputUpArrow, constants.keyInputDownArrow], ['alternate']);
export const handleCommandScroll = event =>
commandHandle(event, [constants.keyInputUpArrow, constants.keyInputDownArrow], ['alternate']);
export const handleCommandRoomActions = event => commandHandle(event, KEY_ROOM_ACTIONS, ['command']);

4
app/constants/colors.js → app/constants/colors.ts
View File

@ -1,4 +1,4 @@
export const STATUS_COLORS = {
export const STATUS_COLORS: any = {
online: '#2de0a5',
busy: '#f5455c',
away: '#ffd21f',
@ -19,7 +19,7 @@ const mentions = {
mentionOtherColor: '#F3BE08'
};
export const themes = {
export const themes: any = {
light: {
backgroundColor: '#ffffff',
focusedBackground: '#ffffff',

0
app/constants/environment.js → app/constants/environment.ts
View File

4
app/constants/links.js → app/constants/links.ts
View File

@ -6,4 +6,6 @@ export const PLAY_MARKET_LINK = `https://play.google.com/store/apps/details?id=$
export const FDROID_MARKET_LINK = 'https://f-droid.org/en/packages/chat.rocket.android';
export const APP_STORE_LINK = `https://itunes.apple.com/app/id${APP_STORE_ID}`;
export const LICENSE_LINK = 'https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/develop/LICENSE';
export const STORE_REVIEW_LINK = isIOS ? `itms-apps://itunes.apple.com/app/id${ APP_STORE_ID }?action=write-review` : `market://details?id=${ getBundleId }`;
export const STORE_REVIEW_LINK = isIOS
? `itms-apps://itunes.apple.com/app/id${APP_STORE_ID}?action=write-review`
: `market://details?id=${getBundleId}`;

0
app/constants/localAuthentication.js → app/constants/localAuthentication.ts
View File

0
app/constants/messageTypeLoad.js → app/constants/messageTypeLoad.ts
View File

0
app/constants/messagesStatus.js → app/constants/messagesStatus.ts
View File

0
app/constants/settings.js → app/constants/settings.ts
View File

0
app/constants/tablet.js → app/constants/tablet.ts
View File

208
app/containers/ActionSheet/ActionSheet.js
View File

@ -1,208 +0,0 @@
import React, {
useRef,
useState,
useEffect,
forwardRef,
useImperativeHandle,
useCallback,
isValidElement
} from 'react';
import PropTypes from 'prop-types';
import { Keyboard, Text } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { TapGestureHandler, State } from 'react-native-gesture-handler';
import ScrollBottomSheet from 'react-native-scroll-bottom-sheet';
import Animated, {
Extrapolate,
interpolate,
Value,
Easing
} from 'react-native-reanimated';
import * as Haptics from 'expo-haptics';
import { useBackHandler } from '@react-native-community/hooks';
import { Item } from './Item';
import { Handle } from './Handle';
import { Button } from './Button';
import { themes } from '../../constants/colors';
import styles, { ITEM_HEIGHT } from './styles';
import { isTablet, isIOS } from '../../utils/deviceInfo';
import * as List from '../List';
import I18n from '../../i18n';
import { useOrientation, useDimensions } from '../../dimensions';
const getItemLayout = (data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index });
const HANDLE_HEIGHT = isIOS ? 40 : 56;
const MAX_SNAP_HEIGHT = 16;
const CANCEL_HEIGHT = 64;
const ANIMATION_DURATION = 250;
const ANIMATION_CONFIG = {
duration: ANIMATION_DURATION,
// https://easings.net/#easeInOutCubic
easing: Easing.bezier(0.645, 0.045, 0.355, 1.0)
};
const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => {
const bottomSheetRef = useRef();
const [data, setData] = useState({});
const [isVisible, setVisible] = useState(false);
const { height } = useDimensions();
const { isLandscape } = useOrientation();
const insets = useSafeAreaInsets();
const maxSnap = Math.max(
(
height
// Items height
- (ITEM_HEIGHT * (data?.options?.length || 0))
// Handle height
- HANDLE_HEIGHT
// Custom header height
- (data?.headerHeight || 0)
// Insets bottom height (Notch devices)
- insets.bottom
// Cancel button height
- (data?.hasCancel ? CANCEL_HEIGHT : 0)
),
MAX_SNAP_HEIGHT
);
/*
* if the action sheet cover more
* than 60% of the whole screen
* and it's not at the landscape mode
* we'll provide more one snap
* that point 50% of the whole screen
*/
const snaps = (height - maxSnap > height * 0.6) && !isLandscape ? [maxSnap, height * 0.5, height] : [maxSnap, height];
const openedSnapIndex = snaps.length > 2 ? 1 : 0;
const closedSnapIndex = snaps.length - 1;
const toggleVisible = () => setVisible(!isVisible);
const hide = () => {
bottomSheetRef.current?.snapTo(closedSnapIndex);
};
const show = (options) => {
setData(options);
toggleVisible();
};
const onBackdropPressed = ({ nativeEvent }) => {
if (nativeEvent.oldState === State.ACTIVE) {
hide();
}
};
useBackHandler(() => {
if (isVisible) {
hide();
}
return isVisible;
});
useEffect(() => {
if (isVisible) {
Keyboard.dismiss();
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
bottomSheetRef.current?.snapTo(openedSnapIndex);
}
}, [isVisible]);
// Hides action sheet when orientation changes
useEffect(() => {
setVisible(false);
}, [isLandscape]);
useImperativeHandle(ref, () => ({
showActionSheet: show,
hideActionSheet: hide
}));
const renderHandle = useCallback(() => (
<>
<Handle theme={theme} />
{isValidElement(data?.customHeader) ? data.customHeader : null}
</>
));
const renderFooter = useCallback(() => (data?.hasCancel ? (
<Button
onPress={hide}
style={[styles.button, { backgroundColor: themes[theme].auxiliaryBackground }]}
theme={theme}
>
<Text style={[styles.text, { color: themes[theme].bodyText }]}>
{I18n.t('Cancel')}
</Text>
</Button>
) : null));
const renderItem = useCallback(({ item }) => <Item item={item} hide={hide} theme={theme} />);
const animatedPosition = React.useRef(new Value(0));
const opacity = interpolate(animatedPosition.current, {
inputRange: [0, 1],
outputRange: [0, themes[theme].backdropOpacity],
extrapolate: Extrapolate.CLAMP
});
return (
<>
{children}
{isVisible && (
<>
<TapGestureHandler onHandlerStateChange={onBackdropPressed}>
<Animated.View
testID='action-sheet-backdrop'
style={[
styles.backdrop,
{
backgroundColor: themes[theme].backdropColor,
opacity
}
]}
/>
</TapGestureHandler>
<ScrollBottomSheet
testID='action-sheet'
ref={bottomSheetRef}
componentType='FlatList'
snapPoints={snaps}
initialSnapIndex={closedSnapIndex}
renderHandle={renderHandle}
onSettle={index => (index === closedSnapIndex) && toggleVisible()}
animatedPosition={animatedPosition.current}
containerStyle={[
styles.container,
{ backgroundColor: themes[theme].focusedBackground },
(isLandscape || isTablet) && styles.bottomSheet
]}
animationConfig={ANIMATION_CONFIG}
// FlatList props
data={data?.options}
renderItem={renderItem}
keyExtractor={item => item.title}
style={{ backgroundColor: themes[theme].focusedBackground }}
contentContainerStyle={styles.content}
ItemSeparatorComponent={List.Separator}
ListHeaderComponent={List.Separator}
ListFooterComponent={renderFooter}
getItemLayout={getItemLayout}
removeClippedSubviews={isIOS}
/>
</>
)}
</>
);
}));
ActionSheet.propTypes = {
children: PropTypes.node,
theme: PropTypes.string
};
export default ActionSheet;

194
app/containers/ActionSheet/ActionSheet.tsx Normal file
View File

@ -0,0 +1,194 @@
import React, { forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { Keyboard, Text } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { State, TapGestureHandler } from 'react-native-gesture-handler';
import ScrollBottomSheet from 'react-native-scroll-bottom-sheet';
import Animated, { Easing, Extrapolate, Value, interpolate } from 'react-native-reanimated';
import * as Haptics from 'expo-haptics';
import { useBackHandler } from '@react-native-community/hooks';
import { Item } from './Item';
import { Handle } from './Handle';
import { Button } from './Button';
import { themes } from '../../constants/colors';
import styles, { ITEM_HEIGHT } from './styles';
import { isIOS, isTablet } from '../../utils/deviceInfo';
import * as List from '../List';
import I18n from '../../i18n';
import { IDimensionsContextProps, useDimensions, useOrientation } from '../../dimensions';
interface IActionSheetData {
options: any;
headerHeight?: number;
hasCancel?: boolean;
customHeader: any;
}
const getItemLayout = (data: any, index: number) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index });
const HANDLE_HEIGHT = isIOS ? 40 : 56;
const MAX_SNAP_HEIGHT = 16;
const CANCEL_HEIGHT = 64;
const ANIMATION_DURATION = 250;
const ANIMATION_CONFIG = {
duration: ANIMATION_DURATION,
// https://easings.net/#easeInOutCubic
easing: Easing.bezier(0.645, 0.045, 0.355, 1.0)
};
const ActionSheet = React.memo(
forwardRef(({ children, theme }: { children: JSX.Element; theme: string }, ref) => {
const bottomSheetRef: any = useRef();
const [data, setData] = useState<IActionSheetData>({} as IActionSheetData);
const [isVisible, setVisible] = useState(false);
const { height }: Partial<IDimensionsContextProps> = useDimensions();
const { isLandscape } = useOrientation();
const insets = useSafeAreaInsets();
const maxSnap = Math.max(
height! -
// Items height
ITEM_HEIGHT * (data?.options?.length || 0) -
// Handle height
HANDLE_HEIGHT -
// Custom header height
(data?.headerHeight || 0) -
// Insets bottom height (Notch devices)
insets.bottom -
// Cancel button height
(data?.hasCancel ? CANCEL_HEIGHT : 0),
MAX_SNAP_HEIGHT
);
/*
* if the action sheet cover more
* than 60% of the whole screen
* and it's not at the landscape mode
* we'll provide more one snap
* that point 50% of the whole screen
*/
const snaps: any = height! - maxSnap > height! * 0.6 && !isLandscape ? [maxSnap, height! * 0.5, height] : [maxSnap, height];
const openedSnapIndex = snaps.length > 2 ? 1 : 0;
const closedSnapIndex = snaps.length - 1;
const toggleVisible = () => setVisible(!isVisible);
const hide = () => {
bottomSheetRef.current?.snapTo(closedSnapIndex);
};
const show = (options: any) => {
setData(options);
toggleVisible();
};
const onBackdropPressed = ({ nativeEvent }: any) => {
if (nativeEvent.oldState === State.ACTIVE) {
hide();
}
};
useBackHandler(() => {
if (isVisible) {
hide();
}
return isVisible;
});
useEffect(() => {
if (isVisible) {
Keyboard.dismiss();
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
bottomSheetRef.current?.snapTo(openedSnapIndex);
}
}, [isVisible]);
// Hides action sheet when orientation changes
useEffect(() => {
setVisible(false);
}, [isLandscape]);
useImperativeHandle(ref, () => ({
showActionSheet: show,
hideActionSheet: hide
}));
const renderHandle = () => (
<>
<Handle theme={theme} />
{isValidElement(data?.customHeader) ? data.customHeader : null}
</>
);
const renderFooter = () =>
data?.hasCancel ? (
<Button onPress={hide} style={[styles.button, { backgroundColor: themes[theme].auxiliaryBackground }]} theme={theme}>
<Text style={[styles.text, { color: themes[theme].bodyText }]}>{I18n.t('Cancel')}</Text>
</Button>
) : null;
const renderItem = ({ item }: any) => <Item item={item} hide={hide} theme={theme} />;
const animatedPosition = React.useRef(new Value(0));
const opacity = interpolate(animatedPosition.current, {
inputRange: [0, 1],
outputRange: [0, themes[theme].backdropOpacity],
extrapolate: Extrapolate.CLAMP
});
return (
<>
{children}
{isVisible && (
<>
<TapGestureHandler onHandlerStateChange={onBackdropPressed}>
<Animated.View
testID='action-sheet-backdrop'
style={[
styles.backdrop,
{
backgroundColor: themes[theme].backdropColor,
opacity
}
]}
/>
</TapGestureHandler>
<ScrollBottomSheet
testID='action-sheet'
ref={bottomSheetRef}
componentType='FlatList'
snapPoints={snaps}
initialSnapIndex={closedSnapIndex}
renderHandle={renderHandle}
onSettle={index => index === closedSnapIndex && toggleVisible()}
animatedPosition={animatedPosition.current}
containerStyle={
[
styles.container,
{ backgroundColor: themes[theme].focusedBackground },
(isLandscape || isTablet) && styles.bottomSheet
] as any
}
animationConfig={ANIMATION_CONFIG}
// FlatList props
data={data?.options}
renderItem={renderItem}
keyExtractor={(item: any) => item.title}
style={{ backgroundColor: themes[theme].focusedBackground }}
contentContainerStyle={styles.content}
ItemSeparatorComponent={List.Separator}
ListHeaderComponent={List.Separator}
ListFooterComponent={renderFooter}
getItemLayout={getItemLayout}
removeClippedSubviews={isIOS}
/>
</>
)}
</>
);
})
);
export default ActionSheet;

0
app/containers/ActionSheet/Button.js → app/containers/ActionSheet/Button.ts
View File

6
app/containers/ActionSheet/Handle.js → app/containers/ActionSheet/Handle.tsx
View File

@ -1,15 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import styles from './styles';
import { themes } from '../../constants/colors';
export const Handle = React.memo(({ theme }) => (
export const Handle = React.memo(({ theme }: { theme: string }) => (
<View style={[styles.handle, { backgroundColor: themes[theme].focusedBackground }]} testID='action-sheet-handle'>
<View style={[styles.handleIndicator, { backgroundColor: themes[theme].auxiliaryText }]} />
</View>
));
Handle.propTypes = {
theme: PropTypes.string
};

42
app/containers/ActionSheet/Item.js → app/containers/ActionSheet/Item.tsx
View File

@ -1,13 +1,25 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Text, View } from 'react-native';
import { themes } from '../../constants/colors';
import { CustomIcon } from '../../lib/Icons';
import styles from './styles';
import { Button } from './Button';
import styles from './styles';
export const Item = React.memo(({ item, hide, theme }) => {
interface IActionSheetItem {
item: {
title: string;
icon: string;
danger: boolean;
testID: string;
onPress(): void;
right: Function;
};
theme: string;
hide(): void;
}
export const Item = React.memo(({ item, hide, theme }: IActionSheetItem) => {
const onPress = () => {
hide();
item?.onPress();
@ -18,34 +30,16 @@ export const Item = React.memo(({ item, hide, theme }) => {
onPress={onPress}
style={[styles.item, { backgroundColor: themes[theme].focusedBackground }]}
theme={theme}
testID={item.testID}
>
testID={item.testID}>
<CustomIcon name={item.icon} size={20} color={item.danger ? themes[theme].dangerColor : themes[theme].bodyText} />
<View style={styles.titleContainer}>
<Text
numberOfLines={1}
style={[styles.title, { color: item.danger ? themes[theme].dangerColor : themes[theme].bodyText }]}
>
style={[styles.title, { color: item.danger ? themes[theme].dangerColor : themes[theme].bodyText }]}>
{item.title}
</Text>
</View>
{ item.right ? (
<View style={styles.rightContainer}>
{item.right ? item.right() : null}
</View>
) : null }
{item.right ? <View style={styles.rightContainer}>{item.right ? item.right() : null}</View> : null}
</Button>
);
});
Item.propTypes = {
item: PropTypes.shape({
title: PropTypes.string,
icon: PropTypes.string,
danger: PropTypes.bool,
onPress: PropTypes.func,
right: PropTypes.func,
testID: PropTypes.string
}),
hide: PropTypes.func,
theme: PropTypes.string
};

45
app/containers/ActionSheet/Provider.js
View File

@ -1,45 +0,0 @@
import React, { useRef, useContext, forwardRef } from 'react';
import PropTypes from 'prop-types';
import ActionSheet from './ActionSheet';
import { useTheme } from '../../theme';
const context = React.createContext({
showActionSheet: () => {},
hideActionSheet: () => {}
});
export const useActionSheet = () => useContext(context);
const { Provider, Consumer } = context;
export const withActionSheet = Component => forwardRef((props, ref) => (
<Consumer>
{contexts => <Component {...props} {...contexts} ref={ref} />}
</Consumer>
));
export const ActionSheetProvider = React.memo(({ children }) => {
const ref = useRef();
const { theme } = useTheme();
const getContext = () => ({
showActionSheet: (options) => {
ref.current?.showActionSheet(options);
},
hideActionSheet: () => {
ref.current?.hideActionSheet();
}
});
return (
<Provider value={getContext()}>
<ActionSheet ref={ref} theme={theme}>
{children}
</ActionSheet>
</Provider>
);
});
ActionSheetProvider.propTypes = {
children: PropTypes.node
};

45
app/containers/ActionSheet/Provider.tsx Normal file
View File

@ -0,0 +1,45 @@
import React, { ForwardedRef, forwardRef, useContext, useRef } from 'react';
import ActionSheet from './ActionSheet';
import { useTheme } from '../../theme';
interface IActionSheetProvider {
Provider: any;
Consumer: any;
}
const context: IActionSheetProvider = React.createContext({
showActionSheet: () => {},
hideActionSheet: () => {}
});
export const useActionSheet = () => useContext(context);
const { Provider, Consumer } = context;
export const withActionSheet = (Component: React.FC) =>
forwardRef((props: any, ref: ForwardedRef<any>) => (
<Consumer>{(contexts: any) => <Component {...props} {...contexts} ref={ref} />}</Consumer>
));
export const ActionSheetProvider = React.memo(({ children }: { children: JSX.Element | JSX.Element[] }) => {
const ref: ForwardedRef<any> = useRef();
const { theme }: any = useTheme();
const getContext = () => ({
showActionSheet: (options: any) => {
ref.current?.showActionSheet(options);
},
hideActionSheet: () => {
ref.current?.hideActionSheet();
}
});
return (
<Provider value={getContext()}>
<ActionSheet ref={ref} theme={theme}>
<>{children}</>
</ActionSheet>
</Provider>
);
});

0
app/containers/ActionSheet/index.js → app/containers/ActionSheet/index.ts
View File

0
app/containers/ActionSheet/styles.js → app/containers/ActionSheet/styles.ts
View File

40
app/containers/ActivityIndicator.js
View File

@ -1,40 +0,0 @@
import React from 'react';
import { ActivityIndicator, StyleSheet } from 'react-native';
import { PropTypes } from 'prop-types';
import { themes } from '../constants/colors';
const styles = StyleSheet.create({
indicator: {
padding: 16,
flex: 1
},
absolute: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}
});
const RCActivityIndicator = ({ theme, absolute, ...props }) => (
<ActivityIndicator
style={[styles.indicator, absolute && styles.absolute]}
color={themes[theme].auxiliaryText}
{...props}
/>
);
RCActivityIndicator.propTypes = {
theme: PropTypes.string,
absolute: PropTypes.bool,
props: PropTypes.object
};
RCActivityIndicator.defaultProps = {
theme: 'light'
};
export default RCActivityIndicator;

34
app/containers/ActivityIndicator.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import { ActivityIndicator, ActivityIndicatorProps, StyleSheet } from 'react-native';
import { themes } from '../constants/colors';
type TTheme = 'light' | 'dark' | 'black' | string;
interface IActivityIndicator extends ActivityIndicatorProps {
theme?: TTheme;
absolute?: boolean;
props?: object;
}
const styles = StyleSheet.create({
indicator: {
padding: 16,
flex: 1
},
absolute: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}
});
const RCActivityIndicator = ({ theme = 'light', absolute, ...props }: IActivityIndicator) => (
<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].auxiliaryText} {...props} />
);
export default RCActivityIndicator;

14
app/containers/AppVersion.js → app/containers/AppVersion.tsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import PropTypes from 'prop-types';
import { StyleSheet, Text, View } from 'react-native';
import { themes } from '../constants/colors';
import sharedStyles from '../views/Styles';
@ -21,14 +20,13 @@ const styles = StyleSheet.create({
}
});
const AppVersion = React.memo(({ theme }) => (
const AppVersion = React.memo(({ theme }: { theme: string }) => (
<View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>{I18n.t('Version_no', { version: '' })}<Text style={styles.bold}>{getReadableVersion}</Text></Text>
<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>
{I18n.t('Version_no', { version: '' })}
<Text style={styles.bold}>{getReadableVersion}</Text>
</Text>
</View>
));
AppVersion.propTypes = {
theme: PropTypes.string
};
export default AppVersion;

130
app/containers/Avatar/Avatar.js
View File

@ -1,130 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import FastImage from '@rocket.chat/react-native-fast-image';
import Touchable from 'react-native-platform-touchable';
import { settings as RocketChatSettings } from '@rocket.chat/sdk';
import { avatarURL } from '../../utils/avatar';
import Emoji from '../markdown/Emoji';
const Avatar = React.memo(({
text,
size,
server,
borderRadius,
style,
avatar,
type,
children,
user,
onPress,
emoji,
theme,
getCustomEmoji,
avatarETag,
isStatic,
rid,
blockUnauthenticatedAccess,
serverVersion
}) => {
if ((!text && !avatar && !emoji && !rid) || !server) {
return null;
}
const avatarStyle = {
width: size,
height: size,
borderRadius
};
let image;
if (emoji) {
image = (
<Emoji
theme={theme}
baseUrl={server}
getCustomEmoji={getCustomEmoji}
isMessageContainsOnlyEmoji
literal={emoji}
style={avatarStyle}
/>
);
} else {
let uri = avatar;
if (!isStatic) {
uri = avatarURL({
type,
text,
size,
user,
avatar,
server,
avatarETag,
serverVersion,
rid,
blockUnauthenticatedAccess
});
}
image = (
<FastImage
style={avatarStyle}
source={{
uri,
headers: RocketChatSettings.customHeaders,
priority: FastImage.priority.high
}}
/>
);
}
if (onPress) {
image = (
<Touchable onPress={onPress}>
{image}
</Touchable>
);
}
return (
<View style={[avatarStyle, style]}>
{image}
{children}
</View>
);
});
Avatar.propTypes = {
server: PropTypes.string,
style: PropTypes.any,
text: PropTypes.string,
avatar: PropTypes.string,
emoji: PropTypes.string,
size: PropTypes.number,
borderRadius: PropTypes.number,
type: PropTypes.string,
children: PropTypes.object,
user: PropTypes.shape({
id: PropTypes.string,
token: PropTypes.string
}),
theme: PropTypes.string,
onPress: PropTypes.func,
getCustomEmoji: PropTypes.func,
avatarETag: PropTypes.string,
isStatic: PropTypes.bool,
rid: PropTypes.string,
blockUnauthenticatedAccess: PropTypes.bool,
serverVersion: PropTypes.string
};
Avatar.defaultProps = {
text: '',
size: 25,
type: 'd',
borderRadius: 4
};
export default Avatar;

96
app/containers/Avatar/Avatar.tsx Normal file
View File

@ -0,0 +1,96 @@
import React from 'react';
import { View } from 'react-native';
import FastImage from '@rocket.chat/react-native-fast-image';
import Touchable from 'react-native-platform-touchable';
import { settings as RocketChatSettings } from '@rocket.chat/sdk';
import { avatarURL } from '../../utils/avatar';
import Emoji from '../markdown/Emoji';
import { IAvatar } from './interfaces';
const Avatar = React.memo(
({
server,
style,
avatar,
children,
user,
onPress,
emoji,
theme,
getCustomEmoji,
avatarETag,
isStatic,
rid,
blockUnauthenticatedAccess,
serverVersion,
text,
size = 25,
borderRadius = 4,
type = 'd'
}: Partial<IAvatar>) => {
if ((!text && !avatar && !emoji && !rid) || !server) {
return null;
}
const avatarStyle = {
width: size,
height: size,
borderRadius
};
let image;
if (emoji) {
image = (
<Emoji
theme={theme}
baseUrl={server}
getCustomEmoji={getCustomEmoji}
isMessageContainsOnlyEmoji
literal={emoji}
style={avatarStyle}
/>
);
} else {
let uri = avatar;
if (!isStatic) {
uri = avatarURL({
type,
text,
size,
user,
avatar,
server,
avatarETag,
serverVersion,
rid,
blockUnauthenticatedAccess
});
}
image = (
<FastImage
style={avatarStyle}
source={{
uri,
headers: RocketChatSettings.customHeaders,
priority: FastImage.priority.high
}}
/>
);
}
if (onPress) {
image = <Touchable onPress={onPress}>{image}</Touchable>;
}
return (
<View style={[avatarStyle, style]}>
{image}
{children}
</View>
);
}
);
export default Avatar;

41
app/containers/Avatar/index.js → app/containers/Avatar/index.tsx
View File

@ -1,27 +1,23 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Q } from '@nozbe/watermelondb';
import database from '../../lib/database';
import { getUserSelector } from '../../selectors/login';
import Avatar from './Avatar';
import { IAvatar } from './interfaces';
class AvatarContainer extends React.Component {
static propTypes = {
rid: PropTypes.string,
text: PropTypes.string,
type: PropTypes.string,
blockUnauthenticatedAccess: PropTypes.bool,
serverVersion: PropTypes.string
};
class AvatarContainer extends React.Component<Partial<IAvatar>, any> {
private mounted: boolean;
private subscription!: any;
static defaultProps = {
text: '',
type: 'd'
};
constructor(props) {
constructor(props: Partial<IAvatar>) {
super(props);
this.mounted = false;
this.state = { avatarETag: '' };
@ -32,7 +28,7 @@ class AvatarContainer extends React.Component {
this.mounted = true;
}
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps: any) {
const { text, type } = this.props;
if (prevProps.text !== text || prevProps.type !== type) {
this.init();
@ -59,7 +55,7 @@ class AvatarContainer extends React.Component {
try {
if (this.isDirect) {
const { text } = this.props;
const [user] = await usersCollection.query(Q.where('username', text)).fetch();
const [user] = await usersCollection.query(Q.where('username', text!)).fetch();
record = user;
} else {
const { rid } = this.props;
@ -71,37 +67,32 @@ class AvatarContainer extends React.Component {
if (record) {
const observable = record.observe();
this.subscription = observable.subscribe((r) => {
this.subscription = observable.subscribe((r: any) => {
const { avatarETag } = r;
if (this.mounted) {
this.setState({ avatarETag });
} else {
// @ts-ignore
this.state.avatarETag = avatarETag;
}
});
}
}
};
render() {
const { avatarETag } = this.state;
const { serverVersion } = this.props;
return (
<Avatar
avatarETag={avatarETag}
serverVersion={serverVersion}
{...this.props}
/>
);
return <Avatar avatarETag={avatarETag} serverVersion={serverVersion} {...this.props} />;
}
}
const mapStateToProps = state => ({
const mapStateToProps = (state: any) => ({
user: getUserSelector(state),
server: state.share.server.server || state.server.server,
serverVersion: state.share.server.version || state.server.version,
blockUnauthenticatedAccess:
state.share.settings?.Accounts_AvatarBlockUnauthenticatedAccess
?? state.settings.Accounts_AvatarBlockUnauthenticatedAccess
?? true
state.share.settings?.Accounts_AvatarBlockUnauthenticatedAccess ??
state.settings.Accounts_AvatarBlockUnauthenticatedAccess ??
true
});
export default connect(mapStateToProps)(AvatarContainer);

23
app/containers/Avatar/interfaces.ts Normal file
View File

@ -0,0 +1,23 @@
export interface IAvatar {
server: string;
style: any;
text: string;
avatar: string;
emoji: string;
size: number;
borderRadius: number;
type: string;
children: JSX.Element;
user: {
id: string;
token: string;
};
theme: string;
onPress(): void;
getCustomEmoji(): any;
avatarETag: string;
isStatic: boolean;
rid: string;
blockUnauthenticatedAccess: boolean;
serverVersion: string;
}

38
app/containers/BackgroundContainer/index.stories.js
View File

@ -2,48 +2,30 @@
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import BackgroundContainer from '.';
import { ThemeContext } from '../../theme';
import { longText } from '../../../storybook/utils';
import BackgroundContainer from '.';
const stories = storiesOf('BackgroundContainer', module);
stories.add('basic', () => (
<BackgroundContainer />
));
stories.add('basic', () => <BackgroundContainer />);
stories.add('loading', () => (
<BackgroundContainer loading />
));
stories.add('loading', () => <BackgroundContainer loading />);
stories.add('text', () => (
<BackgroundContainer text='Text here' />
));
stories.add('text', () => <BackgroundContainer text='Text here' />);
stories.add('long text', () => (
<BackgroundContainer text={longText} />
));
stories.add('long text', () => <BackgroundContainer text={longText} />);
const ThemeStory = ({ theme, ...props }) => (
<ThemeContext.Provider
value={{ theme }}
>
<ThemeContext.Provider value={{ theme }}>
<BackgroundContainer {...props} />
</ThemeContext.Provider>
);
stories.add('dark theme - loading', () => (
<ThemeStory theme='dark' loading />
));
stories.add('dark theme - loading', () => <ThemeStory theme='dark' loading />);
stories.add('dark theme - text', () => (
<ThemeStory theme='dark' text={longText} />
));
stories.add('dark theme - text', () => <ThemeStory theme='dark' text={longText} />);
stories.add('black theme - loading', () => (
<ThemeStory theme='black' loading />
));
stories.add('black theme - loading', () => <ThemeStory theme='black' loading />);
stories.add('black theme - text', () => (
<ThemeStory theme='black' text={longText} />
));
stories.add('black theme - text', () => <ThemeStory theme='black' text={longText} />);

20
app/containers/BackgroundContainer/index.js → app/containers/BackgroundContainer/index.tsx
View File

@ -1,13 +1,16 @@
import React from 'react';
import {
ImageBackground, StyleSheet, Text, View, ActivityIndicator
} from 'react-native';
import PropTypes from 'prop-types';
import { ActivityIndicator, ImageBackground, StyleSheet, Text, View } from 'react-native';
import { withTheme } from '../../theme';
import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors';
interface IBackgroundContainer {
text: string;
theme: string;
loading: boolean;
}
const styles = StyleSheet.create({
container: {
flex: 1
@ -29,17 +32,12 @@ const styles = StyleSheet.create({
}
});
const BackgroundContainer = ({ theme, text, loading }) => (
const BackgroundContainer = ({ theme, text, loading }: IBackgroundContainer) => (
<View style={styles.container}>
<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
{text ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
{loading ? <ActivityIndicator style={[styles.text, { color: themes[theme].auxiliaryTintColor }]} /> : null}
{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null}
</View>
);
BackgroundContainer.propTypes = {
text: PropTypes.string,
theme: PropTypes.string,
loading: PropTypes.bool
};
export default withTheme(BackgroundContainer);

94
app/containers/Button/index.js
View File

@ -1,94 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, Text } from 'react-native';
import Touchable from 'react-native-platform-touchable';
import { themes } from '../../constants/colors';
import sharedStyles from '../../views/Styles';
import ActivityIndicator from '../ActivityIndicator';
const styles = StyleSheet.create({
container: {
paddingHorizontal: 14,
justifyContent: 'center',
height: 48,
borderRadius: 2,
marginBottom: 12
},
text: {
fontSize: 16,
...sharedStyles.textMedium,
...sharedStyles.textAlignCenter
},
disabled: {
opacity: 0.3
}
});
export default class Button extends React.PureComponent {
static propTypes = {
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
type: PropTypes.string,
onPress: PropTypes.func,
disabled: PropTypes.bool,
backgroundColor: PropTypes.string,
loading: PropTypes.bool,
theme: PropTypes.string,
color: PropTypes.string,
fontSize: PropTypes.string,
style: PropTypes.any
}
static defaultProps = {
title: 'Press me!',
type: 'primary',
onPress: () => alert('It works!'),
disabled: false,
loading: false
}
render() {
const {
title, type, onPress, disabled, backgroundColor, color, loading, style, theme, fontSize, ...otherProps
} = this.props;
const isPrimary = type === 'primary';
let textColor = isPrimary ? themes[theme].buttonText : themes[theme].bodyText;
if (color) {
textColor = color;
}
return (
<Touchable
onPress={onPress}
disabled={disabled || loading}
style={[
styles.container,
backgroundColor
? { backgroundColor }
: { backgroundColor: isPrimary ? themes[theme].actionTintColor : themes[theme].backgroundColor },
disabled && styles.disabled,
style
]}
{...otherProps}
>
{
loading
? <ActivityIndicator color={textColor} />
: (
<Text
style={[
styles.text,
{ color: textColor },
fontSize && { fontSize }
]}
accessibilityLabel={title}
>
{title}
</Text>
)
}
</Touchable>
);
}
}

82
app/containers/Button/index.tsx Normal file
View File

@ -0,0 +1,82 @@
import React from 'react';
import { StyleSheet, Text } from 'react-native';
import Touchable from 'react-native-platform-touchable';
import { themes } from '../../constants/colors';
import sharedStyles from '../../views/Styles';
import ActivityIndicator from '../ActivityIndicator';
interface IButtonProps {
title: string;
type: string;
onPress(): void;
disabled: boolean;
backgroundColor: string;
loading: boolean;
theme: string;
color: string;
fontSize: any;
style: any;
testID: string;
}
const styles = StyleSheet.create({
container: {
paddingHorizontal: 14,
justifyContent: 'center',
height: 48,
borderRadius: 2,
marginBottom: 12
},
text: {
fontSize: 16,
...sharedStyles.textMedium,
...sharedStyles.textAlignCenter
},
disabled: {
opacity: 0.3
}
});
export default class Button extends React.PureComponent<Partial<IButtonProps>, any> {
static defaultProps = {
title: 'Press me!',
type: 'primary',
onPress: () => alert('It works!'),
disabled: false,
loading: false
};
render() {
const { title, type, onPress, disabled, backgroundColor, color, loading, style, theme, fontSize, ...otherProps } = this.props;
const isPrimary = type === 'primary';
let textColor = isPrimary ? themes[theme!].buttonText : themes[theme!].bodyText;
if (color) {
textColor = color;
}
return (
<Touchable
onPress={onPress}
disabled={disabled || loading}
style={[
styles.container,
backgroundColor
? { backgroundColor }
: { backgroundColor: isPrimary ? themes[theme!].actionTintColor : themes[theme!].backgroundColor },
disabled && styles.disabled,
style
]}
{...otherProps}>
{loading ? (
<ActivityIndicator color={textColor} />
) : (
<Text style={[styles.text, { color: textColor }, fontSize && { fontSize }]} accessibilityLabel={title}>
{title}
</Text>
)}
</Touchable>
);
}
}

14
app/containers/Check.js → app/containers/Check.tsx
View File

@ -1,10 +1,13 @@
import React from 'react';
import { StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { CustomIcon } from '../lib/Icons';
import { themes } from '../constants/colors';
interface ICheck {
style?: object;
theme: string;
}
const styles = StyleSheet.create({
icon: {
width: 22,
@ -13,11 +16,8 @@ const styles = StyleSheet.create({
}
});
const Check = React.memo(({ theme, style }) => <CustomIcon style={[styles.icon, style]} color={themes[theme].tintColor} size={22} name='check' />);
Check.propTypes = {
style: PropTypes.object,
theme: PropTypes.string
};
const Check = React.memo(({ theme, style }: ICheck) => (
<CustomIcon style={[styles.icon, style]} color={themes[theme].tintColor} size={22} name='check' />
));
export default Check;

26
app/containers/EmojiPicker/CustomEmoji.js
View File

@ -1,26 +0,0 @@
import React from 'react';
import FastImage from '@rocket.chat/react-native-fast-image';
import PropTypes from 'prop-types';
const CustomEmoji = React.memo(({ baseUrl, emoji, style }) => (
<FastImage
style={style}
source={{
uri: `${ baseUrl }/emoji-custom/${ encodeURIComponent(emoji.content || emoji.name) }.${ emoji.extension }`,
priority: FastImage.priority.high
}}
resizeMode={FastImage.resizeMode.contain}
/>
), (prevProps, nextProps) => {
const prevEmoji = prevProps.emoji.content || prevProps.emoji.name;
const nextEmoji = nextProps.emoji.content || nextProps.emoji.name;
return prevEmoji === nextEmoji;
});
CustomEmoji.propTypes = {
baseUrl: PropTypes.string.isRequired,
emoji: PropTypes.object.isRequired,
style: PropTypes.any
};
export default CustomEmoji;

24
app/containers/EmojiPicker/CustomEmoji.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import FastImage from '@rocket.chat/react-native-fast-image';
import { ICustomEmoji } from './interfaces';
const CustomEmoji = React.memo(
({ baseUrl, emoji, style }: ICustomEmoji) => (
<FastImage
style={style}
source={{
uri: `${baseUrl}/emoji-custom/${encodeURIComponent(emoji.content || emoji.name)}.${emoji.extension}`,
priority: FastImage.priority.high
}}
resizeMode={FastImage.resizeMode.contain}
/>
),
(prevProps, nextProps) => {
const prevEmoji = prevProps.emoji.content || prevProps.emoji.name;
const nextEmoji = nextProps.emoji.content || nextProps.emoji.name;
return prevEmoji === nextEmoji;
}
);
export default CustomEmoji;

36
app/containers/EmojiPicker/EmojiCategory.js → app/containers/EmojiPicker/EmojiCategory.tsx
View File

@ -1,17 +1,23 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Text, TouchableOpacity, FlatList } from 'react-native';
import { FlatList, Text, TouchableOpacity } from 'react-native';
import shortnameToUnicode from '../../utils/shortnameToUnicode';
import styles from './styles';
import CustomEmoji from './CustomEmoji';
import scrollPersistTaps from '../../utils/scrollPersistTaps';
import { IEmoji, IEmojiCategory } from './interfaces';
const EMOJI_SIZE = 50;
const renderEmoji = (emoji, size, baseUrl) => {
const renderEmoji = (emoji: IEmoji, size: number, baseUrl: string) => {
if (emoji && emoji.isCustom) {
return <CustomEmoji style={[styles.customCategoryEmoji, { height: size - 16, width: size - 16 }]} emoji={emoji} baseUrl={baseUrl} />;
return (
<CustomEmoji
style={[styles.customCategoryEmoji, { height: size - 16, width: size - 16 }]}
emoji={emoji}
baseUrl={baseUrl}
/>
);
}
return (
<Text style={[styles.categoryEmoji, { height: size, width: size, fontSize: size - 14 }]}>
@ -20,25 +26,16 @@ const renderEmoji = (emoji, size, baseUrl) => {
);
};
class EmojiCategory extends React.Component {
static propTypes = {
baseUrl: PropTypes.string.isRequired,
emojis: PropTypes.any,
onEmojiSelected: PropTypes.func,
emojisPerRow: PropTypes.number,
width: PropTypes.number
}
renderItem(emoji) {
class EmojiCategory extends React.Component<Partial<IEmojiCategory>> {
renderItem(emoji: any) {
const { baseUrl, onEmojiSelected } = this.props;
return (
<TouchableOpacity
activeOpacity={0.7}
key={emoji && emoji.isCustom ? emoji.content : emoji}
onPress={() => onEmojiSelected(emoji)}
testID={`reaction-picker-${ emoji && emoji.isCustom ? emoji.content : emoji }`}
>
{renderEmoji(emoji, EMOJI_SIZE, baseUrl)}
onPress={() => onEmojiSelected!(emoji)}
testID={`reaction-picker-${emoji && emoji.isCustom ? emoji.content : emoji}`}>
{renderEmoji(emoji, EMOJI_SIZE, baseUrl!)}
</TouchableOpacity>
);
}
@ -51,9 +48,10 @@ class EmojiCategory extends React.Component {
}
const numColumns = Math.trunc(width / EMOJI_SIZE);
const marginHorizontal = (width - (numColumns * EMOJI_SIZE)) / 2;
const marginHorizontal = (width - numColumns * EMOJI_SIZE) / 2;
return (
// @ts-ignore
<FlatList
contentContainerStyle={{ marginHorizontal }}
// rerender FlatList in case of width changes

49
app/containers/EmojiPicker/TabBar.js
View File

@ -1,49 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, TouchableOpacity, Text } from 'react-native';
import styles from './styles';
import { themes } from '../../constants/colors';
export default class TabBar extends React.Component {
static propTypes = {
goToPage: PropTypes.func,
activeTab: PropTypes.number,
tabs: PropTypes.array,
tabEmojiStyle: PropTypes.object,
theme: PropTypes.string
}
shouldComponentUpdate(nextProps) {
const { activeTab, theme } = this.props;
if (nextProps.activeTab !== activeTab) {
return true;
}
if (nextProps.theme !== theme) {
return true;
}
return false;
}
render() {
const {
tabs, goToPage, tabEmojiStyle, activeTab, theme
} = this.props;
return (
<View style={styles.tabsContainer}>
{tabs.map((tab, i) => (
<TouchableOpacity
activeOpacity={0.7}
key={tab}
onPress={() => goToPage(i)}
style={styles.tab}
testID={`reaction-picker-${ tab }`}
>
<Text style={[styles.tabEmoji, tabEmojiStyle]}>{tab}</Text>
{activeTab === i ? <View style={[styles.activeTabLine, { backgroundColor: themes[theme].tintColor }]} /> : <View style={styles.tabLine} />}
</TouchableOpacity>
))}
</View>
);
}
}

50
app/containers/EmojiPicker/TabBar.tsx Normal file
View File

@ -0,0 +1,50 @@
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import styles from './styles';
import { themes } from '../../constants/colors';
interface ITabBarProps {
goToPage: Function;
activeTab: number;
tabs: [];
tabEmojiStyle: object;
theme: string;
}
export default class TabBar extends React.Component<Partial<ITabBarProps>> {
shouldComponentUpdate(nextProps: any) {
const { activeTab, theme } = this.props;
if (nextProps.activeTab !== activeTab) {
return true;
}
if (nextProps.theme !== theme) {
return true;
}
return false;
}
render() {
const { tabs, goToPage, tabEmojiStyle, activeTab, theme } = this.props;
return (
<View style={styles.tabsContainer}>
{tabs!.map((tab, i) => (
<TouchableOpacity
activeOpacity={0.7}
key={tab}
onPress={() => goToPage!(i)}
style={styles.tab}
testID={`reaction-picker-${tab}`}>
<Text style={[styles.tabEmoji, tabEmojiStyle]}>{tab}</Text>
{activeTab === i ? (
<View style={[styles.activeTabLine, { backgroundColor: themes[theme!].tintColor }]} />
) : (
<View style={styles.tabLine} />
)}
</TouchableOpacity>
))}
</View>
);
}
}

0
app/containers/EmojiPicker/categories.js → app/containers/EmojiPicker/categories.ts
View File

91
app/containers/EmojiPicker/index.js → app/containers/EmojiPicker/index.tsx
View File

@ -1,6 +1,5 @@
import React, { Component } from 'react';
import { View } from 'react-native';
import PropTypes from 'prop-types';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import { dequal } from 'dequal';
import { connect } from 'react-redux';
@ -18,22 +17,33 @@ import shortnameToUnicode from '../../utils/shortnameToUnicode';
import log from '../../utils/log';
import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
import { IEmoji } from './interfaces';
const scrollProps = {
keyboardShouldPersistTaps: 'always',
keyboardDismissMode: 'none'
};
class EmojiPicker extends Component {
static propTypes = {
baseUrl: PropTypes.string.isRequired,
customEmojis: PropTypes.object,
onEmojiSelected: PropTypes.func,
tabEmojiStyle: PropTypes.object,
theme: PropTypes.string
};
interface IEmojiPickerProps {
isMessageContainsOnlyEmoji: boolean;
getCustomEmoji?: Function;
baseUrl: string;
customEmojis?: any;
style: object;
theme?: string;
onEmojiSelected?: Function;
tabEmojiStyle?: object;
}
constructor(props) {
interface IEmojiPickerState {
frequentlyUsed: [];
customEmojis: any;
show: boolean;
width: number | null;
}
class EmojiPicker extends Component<IEmojiPickerProps, IEmojiPickerState> {
constructor(props: IEmojiPickerProps) {
super(props);
const customEmojis = Object.keys(props.customEmojis)
.filter(item => item === props.customEmojis[item].name)
@ -55,7 +65,7 @@ class EmojiPicker extends Component {
this.setState({ show: true });
}
shouldComponentUpdate(nextProps, nextState) {
shouldComponentUpdate(nextProps: any, nextState: any) {
const { frequentlyUsed, show, width } = this.state;
const { theme } = this.props;
if (nextProps.theme !== theme) {
@ -73,30 +83,31 @@ class EmojiPicker extends Component {
return false;
}
onEmojiSelected = (emoji) => {
onEmojiSelected = (emoji: IEmoji) => {
try {
const { onEmojiSelected } = this.props;
if (emoji.isCustom) {
this._addFrequentlyUsed({
content: emoji.content, extension: emoji.extension, isCustom: true
content: emoji.content,
extension: emoji.extension,
isCustom: true
});
onEmojiSelected(`:${ emoji.content }:`);
onEmojiSelected!(`:${emoji.content}:`);
} else {
const content = emoji;
this._addFrequentlyUsed({ content, isCustom: false });
const shortname = `:${emoji}:`;
onEmojiSelected(shortnameToUnicode(shortname), shortname);
onEmojiSelected!(shortnameToUnicode(shortname), shortname);
}
} catch (e) {
log(e);
}
}
};
// eslint-disable-next-line react/sort-comp
_addFrequentlyUsed = protectedFunction(async(emoji) => {
_addFrequentlyUsed = protectedFunction(async (emoji: IEmoji) => {
const db = database.active;
const freqEmojiCollection = db.get('frequently_used_emojis');
let freqEmojiRecord;
let freqEmojiRecord: any;
try {
freqEmojiRecord = await freqEmojiCollection.find(emoji.content);
} catch (error) {
@ -105,35 +116,39 @@ class EmojiPicker extends Component {
await db.action(async () => {
if (freqEmojiRecord) {
await freqEmojiRecord.update((f) => {
await freqEmojiRecord.update((f: any) => {
f.count += 1;
});
} else {
await freqEmojiCollection.create((f) => {
await freqEmojiCollection.create((f: any) => {
f._raw = sanitizedRaw({ id: emoji.content }, freqEmojiCollection.schema);
Object.assign(f, emoji);
f.count = 1;
});
}
});
})
});
updateFrequentlyUsed = async () => {
const db = database.active;
const frequentlyUsedRecords = await db.get('frequently_used_emojis').query().fetch();
let frequentlyUsed = orderBy(frequentlyUsedRecords, ['count'], ['desc']);
frequentlyUsed = frequentlyUsed.map((item) => {
let frequentlyUsed: any = orderBy(frequentlyUsedRecords, ['count'], ['desc']);
frequentlyUsed = frequentlyUsed.map((item: IEmoji) => {
if (item.isCustom) {
return { content: item.content, extension: item.extension, isCustom: item.isCustom };
}
return shortnameToUnicode(`${item.content}`);
});
this.setState({ frequentlyUsed });
};
onLayout = ({
nativeEvent: {
layout: { width }
}
}: any) => this.setState({ width });
onLayout = ({ nativeEvent: { layout: { width } } }) => this.setState({ width });
renderCategory(category, i, label) {
renderCategory(category: any, i: number, label: string) {
const { frequentlyUsed, customEmojis, width } = this.state;
const { baseUrl } = this.props;
@ -148,9 +163,9 @@ class EmojiPicker extends Component {
return (
<EmojiCategory
emojis={emojis}
onEmojiSelected={emoji => this.onEmojiSelected(emoji)}
onEmojiSelected={(emoji: IEmoji) => this.onEmojiSelected(emoji)}
style={styles.categoryContainer}
width={width}
width={width!}
baseUrl={baseUrl}
tabLabel={label}
/>
@ -168,23 +183,21 @@ class EmojiPicker extends Component {
<View onLayout={this.onLayout} style={{ flex: 1 }}>
<ScrollableTabView
renderTabBar={() => <TabBar tabEmojiStyle={tabEmojiStyle} theme={theme} />}
/* @ts-ignore*/
contentProps={scrollProps}
style={{ backgroundColor: themes[theme].focusedBackground }}
>
{
categories.tabs.map((tab, i) => (
(i === 0 && frequentlyUsed.length === 0) ? null // when no frequentlyUsed don't show the tab
: (
this.renderCategory(tab.category, i, tab.tabLabel)
)))
}
style={{ backgroundColor: themes[theme!].focusedBackground }}>
{categories.tabs.map((tab, i) =>
i === 0 && frequentlyUsed.length === 0
? null // when no frequentlyUsed don't show the tab
: this.renderCategory(tab.category, i, tab.tabLabel)
)}
</ScrollableTabView>
</View>
);
}
}
const mapStateToProps = state => ({
const mapStateToProps = (state: any) => ({
customEmojis: state.customEmojis
});

22
app/containers/EmojiPicker/interfaces.ts Normal file
View File

@ -0,0 +1,22 @@
export interface IEmoji {
content: any;
name: string;
extension: any;
isCustom: boolean;
}
export interface ICustomEmoji {
baseUrl: string;
emoji: IEmoji;
style: any;
}
export interface IEmojiCategory {
baseUrl: string;
emojis: IEmoji[];
onEmojiSelected: Function;
emojisPerRow: number;
width: number;
style: any;
tabLabel: string;
}

0
app/containers/EmojiPicker/styles.js → app/containers/EmojiPicker/styles.ts
View File

35
app/containers/FormContainer.js → app/containers/FormContainer.tsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import PropTypes from 'prop-types';
import { themes } from '../constants/colors';
import sharedStyles from '../views/Styles';
@ -11,33 +10,35 @@ import AppVersion from './AppVersion';
import { isTablet } from '../utils/deviceInfo';
import SafeAreaView from './SafeAreaView';
interface IFormContainer {
theme: string;
testID: string;
children: JSX.Element;
}
const styles = StyleSheet.create({
scrollView: {
minHeight: '100%'
}
});
export const FormContainerInner = ({ children }) => (
<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>
{children}
</View>
export const FormContainerInner = ({ children }: { children: JSX.Element }) => (
<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>{children}</View>
);
const FormContainer = ({
children, theme, testID, ...props
}) => (
const FormContainer = ({ children, theme, testID, ...props }: IFormContainer) => (
// @ts-ignore
<KeyboardView
style={{ backgroundColor: themes[theme].backgroundColor }}
contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128}
>
keyboardVerticalOffset={128}>
<StatusBar />
{/* @ts-ignore*/}
<ScrollView
style={sharedStyles.container}
contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}
{...scrollPersistTaps}
{...props}
>
{...props}>
<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].backgroundColor }}>
{children}
<AppVersion theme={theme} />
@ -46,14 +47,4 @@ const FormContainer = ({
</KeyboardView>
);
FormContainer.propTypes = {
theme: PropTypes.string,
testID: PropTypes.string,
children: PropTypes.element
};
FormContainerInner.propTypes = {
children: PropTypes.element
};
export default FormContainer;

37
app/containers/Header/index.js → app/containers/Header/index.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { SafeAreaView } from 'react-native-safe-area-context';
import { View, StyleSheet } from 'react-native';
import { StyleSheet, View } from 'react-native';
import { themes } from '../../constants/colors';
import { themedHeader } from '../../utils/navigation';
import { isIOS, isTablet } from '../../utils/deviceInfo';
@ -10,18 +10,25 @@ import { withTheme } from '../../theme';
// Get from https://github.com/react-navigation/react-navigation/blob/master/packages/stack/src/views/Header/HeaderSegment.tsx#L69
export const headerHeight = isIOS ? 44 : 56;
export const getHeaderHeight = (isLandscape) => {
export const getHeaderHeight = (isLandscape: boolean) => {
if (isIOS) {
if (isLandscape && !isTablet) {
return 32;
} else {
return 44;
}
return 44;
}
return 56;
};
export const getHeaderTitlePosition = ({ insets, numIconsRight }) => ({
interface IHeaderTitlePosition {
insets: {
left: number;
right: number;
};
numIconsRight: number;
}
export const getHeaderTitlePosition = ({ insets, numIconsRight }: IHeaderTitlePosition) => ({
left: insets.left + 60,
right: insets.right + Math.max(45 * numIconsRight, 15)
});
@ -35,9 +42,14 @@ const styles = StyleSheet.create({
}
});
const Header = ({
theme, headerLeft, headerTitle, headerRight
}) => (
interface IHeader {
theme: string;
headerLeft(): void;
headerTitle(): void;
headerRight(): void;
}
const Header = ({ theme, headerLeft, headerTitle, headerRight }: IHeader) => (
<SafeAreaView style={{ backgroundColor: themes[theme].headerBackground }} edges={['top', 'left', 'right']}>
<View style={[styles.container, { ...themedHeader(theme).headerStyle }]}>
{headerLeft ? headerLeft() : null}
@ -47,11 +59,4 @@ const Header = ({
</SafeAreaView>
);
Header.propTypes = {
theme: PropTypes.string,
headerLeft: PropTypes.element,
headerTitle: PropTypes.element,
headerRight: PropTypes.element
};
export default withTheme(Header);

84
app/containers/HeaderButton/Common.js
View File

@ -1,84 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { isIOS } from '../../utils/deviceInfo';
import I18n from '../../i18n';
import Container from './HeaderButtonContainer';
import Item from './HeaderButtonItem';
// Left
export const Drawer = React.memo(({ navigation, testID, ...props }) => (
<Container left>
<Item iconName='hamburguer' onPress={() => navigation.toggleDrawer()} testID={testID} {...props} />
</Container>
));
export const CloseModal = React.memo(({
navigation, testID, onPress = () => navigation.pop(), ...props
}) => (
<Container left>
<Item iconName='close' onPress={onPress} testID={testID} {...props} />
</Container>
));
export const CancelModal = React.memo(({ onPress, testID }) => (
<Container left>
{isIOS
? <Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} />
: <Item iconName='close' onPress={onPress} testID={testID} />
}
</Container>
));
// Right
export const More = React.memo(({ onPress, testID }) => (
<Container>
<Item iconName='kebab' onPress={onPress} testID={testID} />
</Container>
));
export const Download = React.memo(({ onPress, testID, ...props }) => (
<Container>
<Item iconName='download' onPress={onPress} testID={testID} {...props} />
</Container>
));
export const Preferences = React.memo(({ onPress, testID, ...props }) => (
<Container>
<Item iconName='settings' onPress={onPress} testID={testID} {...props} />
</Container>
));
export const Legal = React.memo(({ navigation, testID }) => (
<More onPress={() => navigation.navigate('LegalView')} testID={testID} />
));
Drawer.propTypes = {
navigation: PropTypes.object.isRequired,
testID: PropTypes.string.isRequired
};
CloseModal.propTypes = {
navigation: PropTypes.object.isRequired,
testID: PropTypes.string.isRequired,
onPress: PropTypes.func
};
CancelModal.propTypes = {
onPress: PropTypes.func.isRequired,
testID: PropTypes.string.isRequired
};
More.propTypes = {
onPress: PropTypes.func.isRequired,
testID: PropTypes.string.isRequired
};
Download.propTypes = {
onPress: PropTypes.func.isRequired,
testID: PropTypes.string.isRequired
};
Preferences.propTypes = {
onPress: PropTypes.func.isRequired,
testID: PropTypes.string.isRequired
};
Legal.propTypes = {
navigation: PropTypes.object.isRequired,
testID: PropTypes.string.isRequired
};

60
app/containers/HeaderButton/Common.tsx Normal file
View File

@ -0,0 +1,60 @@
import React from 'react';
import { isIOS } from '../../utils/deviceInfo';
import I18n from '../../i18n';
import Container from './HeaderButtonContainer';
import Item from './HeaderButtonItem';
interface IHeaderButtonCommon {
navigation: any;
onPress(): void;
testID: string;
}
// Left
export const Drawer = React.memo(({ navigation, testID, ...props }: Partial<IHeaderButtonCommon>) => (
<Container left>
<Item iconName='hamburguer' onPress={() => navigation.toggleDrawer()} testID={testID} {...props} />
</Container>
));
export const CloseModal = React.memo(
({ navigation, testID, onPress = () => navigation.pop(), ...props }: IHeaderButtonCommon) => (
<Container left>
<Item iconName='close' onPress={onPress} testID={testID} {...props} />
</Container>
)
);
export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
<Container left>
{isIOS ? (
<Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} />
) : (
<Item iconName='close' onPress={onPress} testID={testID} />
)}
</Container>
));
// Right
export const More = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
<Container>
<Item iconName='kebab' onPress={onPress} testID={testID} />
</Container>
));
export const Download = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
<Container>
<Item iconName='download' onPress={onPress} testID={testID} {...props} />
</Container>
));
export const Preferences = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
<Container>
<Item iconName='settings' onPress={onPress} testID={testID} {...props} />
</Container>
));
export const Legal = React.memo(({ navigation, testID }: Partial<IHeaderButtonCommon>) => (
<More onPress={() => navigation.navigate('LegalView')} testID={testID} />
));

23
app/containers/HeaderButton/HeaderButtonContainer.js → app/containers/HeaderButton/HeaderButtonContainer.tsx
View File

@ -1,6 +1,10 @@
import React from 'react';
import { View, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { StyleSheet, View } from 'react-native';
interface IHeaderButtonContainer {
children: JSX.Element;
left?: boolean;
}
const styles = StyleSheet.create({
container: {
@ -16,21 +20,10 @@ const styles = StyleSheet.create({
}
});
const Container = ({ children, left }) => (
<View style={[styles.container, left ? styles.left : styles.right]}>
{children}
</View>
const Container = ({ children, left = false }: IHeaderButtonContainer) => (
<View style={[styles.container, left ? styles.left : styles.right]}>{children}</View>
);
Container.propTypes = {
children: PropTypes.arrayOf(PropTypes.element),
left: PropTypes.bool
};
Container.defaultProps = {
left: false
};
Container.displayName = 'HeaderButton.Container';
export default Container;

40
app/containers/HeaderButton/HeaderButtonItem.js → app/containers/HeaderButton/HeaderButtonItem.tsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import { Text, StyleSheet, Platform } from 'react-native';
import PropTypes from 'prop-types';
import { Platform, StyleSheet, Text } from 'react-native';
import Touchable from 'react-native-platform-touchable';
import { CustomIcon } from '../../lib/Icons';
@ -8,8 +7,20 @@ import { withTheme } from '../../theme';
import { themes } from '../../constants/colors';
import sharedStyles from '../../views/Styles';
interface IHeaderButtonItem {
title: string;
iconName: string;
onPress(): void;
testID: string;
theme: string;
badge(): void;
}
export const BUTTON_HIT_SLOP = {
top: 5, right: 5, bottom: 5, left: 5
top: 5,
right: 5,
bottom: 5,
left: 5
};
const styles = StyleSheet.create({
@ -29,30 +40,19 @@ const styles = StyleSheet.create({
}
});
const Item = ({
title, iconName, onPress, testID, theme, badge
}) => (
const Item = ({ title, iconName, onPress, testID, theme, badge }: IHeaderButtonItem) => (
<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
<>
{
iconName
? <CustomIcon name={iconName} size={24} color={themes[theme].headerTintColor} />
: <Text style={[styles.title, { color: themes[theme].headerTintColor }]}>{title}</Text>
}
{iconName ? (
<CustomIcon name={iconName} size={24} color={themes[theme].headerTintColor} />
) : (
<Text style={[styles.title, { color: themes[theme].headerTintColor }]}>{title}</Text>
)}
{badge ? badge() : null}
</>
</Touchable>
);
Item.propTypes = {
onPress: PropTypes.func.isRequired,
title: PropTypes.string,
iconName: PropTypes.string,
testID: PropTypes.string,
theme: PropTypes.string,
badge: PropTypes.func
};
Item.displayName = 'HeaderButton.Item';
export default withTheme(Item);

8
app/containers/HeaderButton/HeaderButtonItemBadge.js → app/containers/HeaderButton/HeaderButtonItemBadge.tsx
View File

@ -15,12 +15,6 @@ const styles = StyleSheet.create({
}
});
export const Badge = ({ ...props }) => (
<UnreadBadge
{...props}
style={styles.badgeContainer}
small
/>
);
export const Badge = ({ ...props }) => <UnreadBadge {...props} style={styles.badgeContainer} small />;
export default Badge;

0
app/containers/HeaderButton/index.js → app/containers/HeaderButton/index.ts
View File

55
app/containers/InAppNotification/NotifierComponent.js → app/containers/InAppNotification/NotifierComponent.tsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import PropTypes from 'prop-types';
import { StyleSheet, Text, View } from 'react-native';
import Touchable from 'react-native-platform-touchable';
import { connect } from 'react-redux';
import { Notifier } from 'react-native-notifier';
@ -16,10 +15,13 @@ import { goRoom } from '../../utils/goRoom';
import Navigation from '../../lib/Navigation';
import { useOrientation } from '../../dimensions';
interface INotifierComponent {
notification: object;
isMasterDetail: boolean;
}
const AVATAR_SIZE = 48;
const BUTTON_HIT_SLOP = {
top: 12, right: 12, bottom: 12, left: 12
};
const BUTTON_HIT_SLOP = { top: 12, right: 12, bottom: 12, left: 12 };
const styles = StyleSheet.create({
container: {
@ -64,16 +66,16 @@ const styles = StyleSheet.create({
const hideNotification = () => Notifier.hideNotification();
const NotifierComponent = React.memo(({ notification, isMasterDetail }) => {
const { theme } = useTheme();
const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifierComponent) => {
const { theme }: any = useTheme();
const insets = useSafeAreaInsets();
const { isLandscape } = useOrientation();
const { text, payload } = notification;
const { text, payload }: any = notification;
const { type, rid } = payload;
const name = type === 'd' ? payload.sender.username : payload.name;
// if sub is not on local database, title and avatar will be null, so we use payload from notification
const { title = name, avatar = name } = notification;
const { title = name, avatar = name }: any = notification;
const onPress = () => {
const { prid, _id } = payload;
@ -81,7 +83,10 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }) => {
return;
}
const item = {
rid, name: title, t: type, prid
rid,
name: title,
t: type,
prid
};
if (isMasterDetail) {
@ -94,7 +99,8 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }) => {
};
return (
<View style={[
<View
style={[
styles.container,
(isMasterDetail || isLandscape) && styles.small,
{
@ -102,39 +108,32 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }) => {
borderColor: themes[theme].separatorColor,
marginTop: insets.top
}
]}
>
]}>
<Touchable
style={styles.content}
onPress={onPress}
hitSlop={BUTTON_HIT_SLOP}
background={Touchable.SelectableBackgroundBorderless()}
>
background={Touchable.SelectableBackgroundBorderless()}>
<>
<Avatar text={avatar} size={AVATAR_SIZE} type={type} rid={rid} style={styles.avatar} />
<View style={styles.inner}>
<Text style={[styles.roomName, { color: themes[theme].titleText }]} numberOfLines={1}>{title}</Text>
<Text style={[styles.message, { color: themes[theme].titleText }]} numberOfLines={1}>{text}</Text>
<Text style={[styles.roomName, { color: themes[theme].titleText }]} numberOfLines={1}>
{title}
</Text>
<Text style={[styles.message, { color: themes[theme].titleText }]} numberOfLines={1}>
{text}
</Text>
</View>
</>
</Touchable>
<Touchable
onPress={hideNotification}
hitSlop={BUTTON_HIT_SLOP}
background={Touchable.SelectableBackgroundBorderless()}
>
<Touchable onPress={hideNotification} hitSlop={BUTTON_HIT_SLOP} background={Touchable.SelectableBackgroundBorderless()}>
<CustomIcon name='close' style={[styles.close, { color: themes[theme].titleText }]} size={20} />
</Touchable>
</View>
);
});
NotifierComponent.propTypes = {
notification: PropTypes.object,
isMasterDetail: PropTypes.bool
};
const mapStateToProps = state => ({
const mapStateToProps = (state: any) => ({
isMasterDetail: state.app.isMasterDetail
});

57
app/containers/InAppNotification/index.js
View File

@ -1,57 +0,0 @@
import React, { memo, useEffect } from 'react';
import PropTypes from 'prop-types';
import { NotifierRoot, Notifier, Easing } from 'react-native-notifier';
import { connect } from 'react-redux';
import { dequal } from 'dequal';
import NotifierComponent from './NotifierComponent';
import EventEmitter from '../../utils/events';
import Navigation from '../../lib/Navigation';
import { getActiveRoute } from '../../utils/navigation';
export const INAPP_NOTIFICATION_EMITTER = 'NotificationInApp';
const InAppNotification = memo(({ rooms, appState }) => {
const show = (notification) => {
if (appState !== 'foreground') {
return;
}
const { payload } = notification;
const state = Navigation.navigationRef.current?.getRootState();
const route = getActiveRoute(state);
if (payload.rid) {
if (rooms.includes(payload.rid) || route?.name === 'JitsiMeetView') {
return;
}
Notifier.showNotification({
showEasing: Easing.inOut(Easing.quad),
Component: NotifierComponent,
componentProps: {
notification
}
});
}
};
useEffect(() => {
const listener = EventEmitter.addEventListener(INAPP_NOTIFICATION_EMITTER, show);
return () => {
EventEmitter.removeListener(INAPP_NOTIFICATION_EMITTER, listener);
};
}, [rooms]);
return <NotifierRoot />;
}, (prevProps, nextProps) => dequal(prevProps.rooms, nextProps.rooms));
const mapStateToProps = state => ({
rooms: state.room.rooms,
appState: state.app.ready && state.app.foreground ? 'foreground' : 'background'
});
InAppNotification.propTypes = {
rooms: PropTypes.array,
appState: PropTypes.string
};
export default connect(mapStateToProps)(InAppNotification);

54
app/containers/InAppNotification/index.tsx Normal file
View File

@ -0,0 +1,54 @@
import React, { memo, useEffect } from 'react';
import { Easing, Notifier, NotifierRoot } from 'react-native-notifier';
import { connect } from 'react-redux';
import { dequal } from 'dequal';
import NotifierComponent from './NotifierComponent';
import EventEmitter from '../../utils/events';
import Navigation from '../../lib/Navigation';
import { getActiveRoute } from '../../utils/navigation';
export const INAPP_NOTIFICATION_EMITTER = 'NotificationInApp';
const InAppNotification = memo(
({ rooms, appState }: { rooms: any; appState: string }) => {
const show = (notification: any) => {
if (appState !== 'foreground') {
return;
}
const { payload } = notification;
const state = Navigation.navigationRef.current?.getRootState();
const route = getActiveRoute(state);
if (payload.rid) {
if (rooms.includes(payload.rid) || route?.name === 'JitsiMeetView') {
return;
}
Notifier.showNotification({
showEasing: Easing.inOut(Easing.quad),
Component: NotifierComponent,
componentProps: {
notification
}
});
}
};
useEffect(() => {
const listener = EventEmitter.addEventListener(INAPP_NOTIFICATION_EMITTER, show);
return () => {
EventEmitter.removeListener(INAPP_NOTIFICATION_EMITTER, listener);
};
}, [rooms]);
return <NotifierRoot />;
},
(prevProps, nextProps) => dequal(prevProps.rooms, nextProps.rooms)
);
const mapStateToProps = (state: any) => ({
rooms: state.room.rooms,
appState: state.app.ready && state.app.foreground ? 'foreground' : 'background'
});
export default connect(mapStateToProps)(InAppNotification);

15
app/containers/List/ListContainer.js → app/containers/List/ListContainer.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { withTheme } from '../../theme';
import scrollPersistTaps from '../../utils/scrollPersistTaps';
@ -10,21 +10,20 @@ const styles = StyleSheet.create({
}
});
const ListContainer = React.memo(({ children, ...props }) => (
interface IListContainer {
children: JSX.Element;
}
const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
// @ts-ignore
<ScrollView
contentContainerStyle={styles.container}
scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444
{...scrollPersistTaps}
{...props}
>
{...props}>
{children}
</ScrollView>
));
ListContainer.propTypes = {
children: PropTypes.array.isRequired
};
ListContainer.displayName = 'List.Container';
export default withTheme(ListContainer);

25
app/containers/List/ListHeader.js → app/containers/List/ListHeader.tsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { StyleSheet, Text, View } from 'react-native';
import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors';
@ -19,22 +18,20 @@ const styles = StyleSheet.create({
}
});
const ListHeader = React.memo(({ title, theme, translateTitle }) => (
interface IListHeader {
title: string;
theme: string;
translateTitle: boolean;
}
const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => (
<View style={styles.container}>
<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>{translateTitle ? I18n.t(title) : title}</Text>
<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title}
</Text>
</View>
));
ListHeader.propTypes = {
title: PropTypes.string,
theme: PropTypes.string,
translateTitle: PropTypes.bool
};
ListHeader.defaultProps = {
translateTitle: true
};
ListHeader.displayName = 'List.Header';
export default withTheme(ListHeader);

44
app/containers/List/ListIcon.js
View File

@ -1,44 +0,0 @@
import React from 'react';
import { View, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { themes } from '../../constants/colors';
import { CustomIcon } from '../../lib/Icons';
import { withTheme } from '../../theme';
import { ICON_SIZE } from './constants';
const styles = StyleSheet.create({
icon: {
alignItems: 'center',
justifyContent: 'center'
}
});
const ListIcon = React.memo(({
theme,
name,
color,
style,
testID
}) => (
<View style={[styles.icon, style]}>
<CustomIcon
name={name}
color={color ?? themes[theme].auxiliaryText}
size={ICON_SIZE}
testID={testID}
/>
</View>
));
ListIcon.propTypes = {
theme: PropTypes.string,
name: PropTypes.string,
color: PropTypes.string,
style: PropTypes.object,
testID: PropTypes.string
};
ListIcon.displayName = 'List.Icon';
export default withTheme(ListIcon);

32
app/containers/List/ListIcon.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { themes } from '../../constants/colors';
import { CustomIcon } from '../../lib/Icons';
import { withTheme } from '../../theme';
import { ICON_SIZE } from './constants';
interface IListIcon {
theme: string;
name: string;
color: string;
style: object;
testID: string;
}
const styles = StyleSheet.create({
icon: {
alignItems: 'center',
justifyContent: 'center'
}
});
const ListIcon = React.memo(({ theme, name, color, style, testID }: IListIcon) => (
<View style={[styles.icon, style]}>
<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={ICON_SIZE} testID={testID} />
</View>
));
ListIcon.displayName = 'List.Icon';
export default withTheme(ListIcon);

21
app/containers/List/ListInfo.js → app/containers/List/ListInfo.tsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { StyleSheet, Text, View } from 'react-native';
import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors';
@ -19,22 +18,18 @@ const styles = StyleSheet.create({
}
});
const ListInfo = React.memo(({ info, translateInfo, theme }) => (
interface IListHeader {
info: string;
theme: string;
translateInfo: boolean;
}
const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => (
<View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
</View>
));
ListInfo.propTypes = {
info: PropTypes.string,
theme: PropTypes.string,
translateInfo: PropTypes.bool
};
ListInfo.defaultProps = {
translateInfo: true
};
ListInfo.displayName = 'List.Info';
export default withTheme(ListInfo);

163
app/containers/List/ListItem.js
View File

@ -1,163 +0,0 @@
import React from 'react';
import {
View, Text, StyleSheet, I18nManager
} from 'react-native';
import PropTypes from 'prop-types';
import Touch from '../../utils/touch';
import { themes } from '../../constants/colors';
import sharedStyles from '../../views/Styles';
import { withTheme } from '../../theme';
import I18n from '../../i18n';
import { Icon } from '.';
import { BASE_HEIGHT, ICON_SIZE, PADDING_HORIZONTAL } from './constants';
import { withDimensions } from '../../dimensions';
import { CustomIcon } from '../../lib/Icons';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: PADDING_HORIZONTAL
},
leftContainer: {
paddingRight: PADDING_HORIZONTAL
},
rightContainer: {
paddingLeft: PADDING_HORIZONTAL
},
disabled: {
opacity: 0.3
},
textContainer: {
flex: 1,
justifyContent: 'center'
},
textAlertContainer: {
flexDirection: 'row',
alignItems: 'center'
},
alertIcon: {
paddingLeft: 4
},
title: {
flexShrink: 1,
fontSize: 16,
...sharedStyles.textRegular
},
subtitle: {
fontSize: 14,
...sharedStyles.textRegular
},
actionIndicator: {
...I18nManager.isRTL
? { transform: [{ rotate: '180deg' }] }
: {}
}
});
const Content = React.memo(({
title, subtitle, disabled, testID, left, right, color, theme, translateTitle, translateSubtitle, showActionIndicator, fontScale, alert
}) => (
<View style={[styles.container, disabled && styles.disabled, { height: BASE_HEIGHT * fontScale }]} testID={testID}>
{left
? (
<View style={styles.leftContainer}>
{left()}
</View>
)
: null}
<View style={styles.textContainer}>
<View style={styles.textAlertContainer}>
<Text style={[styles.title, { color: color || themes[theme].titleText }]} numberOfLines={1}>{translateTitle ? I18n.t(title) : title}</Text>
{alert ? (
<CustomIcon style={[styles.alertIcon, { color: themes[theme].dangerColor }]} size={ICON_SIZE} name='info' />
) : null}
</View>
{subtitle
? <Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>{translateSubtitle ? I18n.t(subtitle) : subtitle}</Text>
: null
}
</View>
{right || showActionIndicator
? (
<View style={styles.rightContainer}>
{right ? right() : null}
{showActionIndicator ? <Icon name='chevron-right' style={styles.actionIndicator} /> : null}
</View>
)
: null}
</View>
));
const Button = React.memo(({
onPress, backgroundColor, underlayColor, ...props
}) => (
<Touch
onPress={() => onPress(props.title)}
style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
underlayColor={underlayColor}
enabled={!props.disabled}
theme={props.theme}
>
<Content {...props} />
</Touch>
));
const ListItem = React.memo(({ ...props }) => {
if (props.onPress) {
return <Button {...props} />;
}
return (
<View style={{ backgroundColor: props.backgroundColor || themes[props.theme].backgroundColor }}>
<Content {...props} />
</View>
);
});
ListItem.propTypes = {
onPress: PropTypes.func,
theme: PropTypes.string,
backgroundColor: PropTypes.string
};
ListItem.displayName = 'List.Item';
Content.propTypes = {
title: PropTypes.string.isRequired,
subtitle: PropTypes.string,
left: PropTypes.func,
right: PropTypes.func,
disabled: PropTypes.bool,
testID: PropTypes.string,
theme: PropTypes.string,
color: PropTypes.string,
translateTitle: PropTypes.bool,
translateSubtitle: PropTypes.bool,
showActionIndicator: PropTypes.bool,
fontScale: PropTypes.number,
alert: PropTypes.bool
};
Content.defaultProps = {
translateTitle: true,
translateSubtitle: true,
showActionIndicator: false
};
Button.propTypes = {
title: PropTypes.string,
onPress: PropTypes.func,
disabled: PropTypes.bool,
theme: PropTypes.string,
backgroundColor: PropTypes.string,
underlayColor: PropTypes.string
};
Button.defaultProps = {
disabled: false
};
export default withTheme(withDimensions(ListItem));

154
app/containers/List/ListItem.tsx Normal file
View File

@ -0,0 +1,154 @@
import React from 'react';
import { I18nManager, StyleSheet, Text, View } from 'react-native';
import Touch from '../../utils/touch';
import { themes } from '../../constants/colors';
import sharedStyles from '../../views/Styles';
import { withTheme } from '../../theme';
import I18n from '../../i18n';
import { Icon } from '.';
import { BASE_HEIGHT, ICON_SIZE, PADDING_HORIZONTAL } from './constants';
import { withDimensions } from '../../dimensions';
import { CustomIcon } from '../../lib/Icons';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: PADDING_HORIZONTAL
},
leftContainer: {
paddingRight: PADDING_HORIZONTAL
},
rightContainer: {
paddingLeft: PADDING_HORIZONTAL
},
disabled: {
opacity: 0.3
},
textContainer: {
flex: 1,
justifyContent: 'center'
},
textAlertContainer: {
flexDirection: 'row',
alignItems: 'center'
},
alertIcon: {
paddingLeft: 4
},
title: {
flexShrink: 1,
fontSize: 16,
...sharedStyles.textRegular
},
subtitle: {
fontSize: 14,
...sharedStyles.textRegular
},
actionIndicator: {
...(I18nManager.isRTL ? { transform: [{ rotate: '180deg' }] } : {})
}
});
interface IListItemContent {
title?: string;
subtitle?: string;
left?: Function;
right?: Function;
disabled?: boolean;
testID?: string;
theme: string;
color?: string;
translateTitle?: boolean;
translateSubtitle?: boolean;
showActionIndicator?: boolean;
fontScale?: number;
alert?: boolean;
}
const Content = React.memo(
({
title,
subtitle,
disabled,
testID,
left,
right,
color,
theme,
fontScale,
alert,
translateTitle = true,
translateSubtitle = true,
showActionIndicator = false
}: IListItemContent) => (
<View style={[styles.container, disabled && styles.disabled, { height: BASE_HEIGHT * fontScale! }]} testID={testID}>
{left ? <View style={styles.leftContainer}>{left()}</View> : null}
<View style={styles.textContainer}>
<View style={styles.textAlertContainer}>
<Text style={[styles.title, { color: color || themes[theme].titleText }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title}
</Text>
{alert ? (
<CustomIcon style={[styles.alertIcon, { color: themes[theme].dangerColor }]} size={ICON_SIZE} name='info' />
) : null}
</View>
{subtitle ? (
<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
{translateSubtitle ? I18n.t(subtitle) : subtitle}
</Text>
) : null}
</View>
{right || showActionIndicator ? (
<View style={styles.rightContainer}>
{right ? right() : null}
{showActionIndicator ? <Icon name='chevron-right' style={styles.actionIndicator} /> : null}
</View>
) : null}
</View>
)
);
interface IListItemButton {
title?: string;
onPress: Function;
disabled?: boolean;
theme: string;
backgroundColor: string;
underlayColor?: string;
}
const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
<Touch
onPress={() => onPress(props.title)}
style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
underlayColor={underlayColor}
enabled={!props.disabled}
theme={props.theme}>
<Content {...props} />
</Touch>
));
interface IListItem {
onPress: Function;
theme: string;
backgroundColor: string;
}
const ListItem = React.memo(({ ...props }: IListItem) => {
if (props.onPress) {
return <Button {...props} />;
}
return (
<View style={{ backgroundColor: props.backgroundColor || themes[props.theme].backgroundColor }}>
<Content {...props} />
</View>
);
});
ListItem.displayName = 'List.Item';
export default withTheme(withDimensions(ListItem));

18
app/containers/List/ListSection.js → app/containers/List/ListSection.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { View, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { StyleSheet, View } from 'react-native';
import { withTheme } from '../../theme';
import { Header } from '.';
@ -10,19 +10,19 @@ const styles = StyleSheet.create({
}
});
const ListSection = React.memo(({ children, title, translateTitle }) => (
interface IListSection {
children: JSX.Element;
title: string;
translateTitle: boolean;
}
const ListSection = React.memo(({ children, title, translateTitle }: IListSection) => (
<View style={styles.container}>
{title ? <Header {...{ title, translateTitle }} /> : null}
{children}
</View>
));
ListSection.propTypes = {
children: PropTypes.array.isRequired,
title: PropTypes.string,
translateTitle: PropTypes.bool
};
ListSection.displayName = 'List.Section';
export default withTheme(ListSection);

32
app/containers/List/ListSeparator.js
View File

@ -1,32 +0,0 @@
import React from 'react';
import { View, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
const styles = StyleSheet.create({
separator: {
height: StyleSheet.hairlineWidth
}
});
const ListSeparator = React.memo(({ style, theme }) => (
<View
style={[
styles.separator,
style,
{ backgroundColor: themes[theme].separatorColor }
]}
/>
));
ListSeparator.propTypes = {
style: PropTypes.object,
theme: PropTypes.string
};
ListSeparator.displayName = 'List.Separator';
export default withTheme(ListSeparator);

24
app/containers/List/ListSeparator.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
const styles = StyleSheet.create({
separator: {
height: StyleSheet.hairlineWidth
}
});
interface IListSeparator {
style: object;
theme: string;
}
const ListSeparator = React.memo(({ style, theme }: IListSeparator) => (
<View style={[styles.separator, style, { backgroundColor: themes[theme].separatorColor }]} />
));
ListSeparator.displayName = 'List.Separator';
export default withTheme(ListSeparator);

0
app/containers/List/constants.js → app/containers/List/constants.ts
View File

0
app/containers/List/index.js → app/containers/List/index.ts
View File

0
app/containers/List/styles.js → app/containers/List/styles.ts
View File

82
app/containers/Loading.js → app/containers/Loading.tsx
View File

@ -1,8 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
StyleSheet, Modal, Animated, View
} from 'react-native';
import { Animated, Modal, StyleSheet, View } from 'react-native';
import { withTheme } from '../theme';
import { themes } from '../constants/colors';
@ -19,54 +17,51 @@ const styles = StyleSheet.create({
}
});
class Loading extends React.PureComponent {
static propTypes = {
visible: PropTypes.bool,
theme: PropTypes.string
interface ILoadingProps {
visible: boolean;
theme: string;
}
class Loading extends React.PureComponent<ILoadingProps, any> {
state = {
scale: new Animated.Value(1),
opacity: new Animated.Value(0)
}
};
private opacityAnimation: any;
private scaleAnimation: any;
componentDidMount() {
const { opacity, scale } = this.state;
const { visible } = this.props;
this.opacityAnimation = Animated.timing(
opacity,
{
this.opacityAnimation = Animated.timing(opacity, {
toValue: 1,
duration: 200,
useNativeDriver: true
}
);
this.scaleAnimation = Animated.loop(Animated.sequence([
Animated.timing(
scale,
{
});
this.scaleAnimation = Animated.loop(
Animated.sequence([
Animated.timing(scale, {
toValue: 0,
duration: 1000,
useNativeDriver: true
}
),
Animated.timing(
scale,
{
}),
Animated.timing(scale, {
toValue: 1,
duration: 1000,
useNativeDriver: true
}
)
]));
})
])
);
if (visible) {
this.startAnimations();
}
}
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps: any) {
const { visible } = this.props;
if (visible && visible !== prevProps.visible) {
this.startAnimations();
@ -107,29 +102,30 @@ class Loading extends React.PureComponent {
});
return (
<Modal
visible={visible}
transparent
onRequestClose={() => {}}
>
<View
style={styles.container}
testID='loading'
>
<Modal visible={visible} transparent onRequestClose={() => {}}>
<View style={styles.container} testID='loading'>
<Animated.View
style={[{
style={[
{
// @ts-ignore
...StyleSheet.absoluteFill,
backgroundColor: themes[theme].backdropColor,
opacity: opacityAnimation
}]}
}
]}
/>
<Animated.Image
source={require('../static/images/logo.png')}
style={[styles.image, {
transform: [{
style={[
styles.image,
{
transform: [
{
scale: scaleAnimation
}]
}]}
}
]
}
]}
/>
</View>
</Modal>
@ -137,4 +133,4 @@ class Loading extends React.PureComponent {
}
}
export default (withTheme(Loading));
export default withTheme(Loading);

132
app/containers/LoginServices.js → app/containers/LoginServices.tsx
View File

@ -1,8 +1,5 @@
import React from 'react';
import {
View, StyleSheet, Text, Animated, Easing, Linking
} from 'react-native';
import PropTypes from 'prop-types';
import { Animated, Easing, Linking, StyleSheet, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { Base64 } from 'js-base64';
import * as AppleAuthentication from 'expo-apple-authentication';
@ -15,7 +12,7 @@ import OrSeparator from './OrSeparator';
import Touch from '../utils/touch';
import I18n from '../i18n';
import random from '../utils/random';
import { logEvent, events } from '../utils/log';
import { events, logEvent } from '../utils/log';
import RocketChat from '../lib/rocketchat';
import { CustomIcon } from '../lib/Icons';
@ -60,26 +57,50 @@ const styles = StyleSheet.create({
}
});
class LoginServices extends React.PureComponent {
static propTypes = {
navigation: PropTypes.object,
server: PropTypes.string,
services: PropTypes.object,
Gitlab_URL: PropTypes.string,
CAS_enabled: PropTypes.bool,
CAS_login_url: PropTypes.string,
separator: PropTypes.bool,
theme: PropTypes.string
interface IOpenOAuth {
url?: string;
ssoToken?: string;
authType?: string;
}
interface IService {
name: string;
service: string;
authType: string;
buttonColor: string;
buttonLabelColor: string;
}
interface ILoginServicesProps {
navigation: any;
server: string;
services: {
facebook: { clientId: string };
github: { clientId: string };
gitlab: { clientId: string };
google: { clientId: string };
linkedin: { clientId: string };
'meteor-developer': { clientId: string };
wordpress: { clientId: string; serverURL: string };
};
Gitlab_URL: string;
CAS_enabled: boolean;
CAS_login_url: string;
separator: boolean;
theme: string;
}
class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
private _animation: any;
static defaultProps = {
separator: true
}
};
state = {
collapsed: true,
servicesHeight: new Animated.Value(SERVICES_COLLAPSED_HEIGHT)
}
};
onPressFacebook = () => {
logEvent(events.ENTER_WITH_FACEBOOK);
@ -91,7 +112,7 @@ class LoginServices extends React.PureComponent {
const state = this.getOAuthState();
const params = `?client_id=${clientId}&redirect_uri=${redirect_uri}&scope=${scope}&state=${state}&display=touch`;
this.openOAuth({ url: `${endpoint}${params}` });
}
};
onPressGithub = () => {
logEvent(events.ENTER_WITH_GITHUB);
@ -103,7 +124,7 @@ class LoginServices extends React.PureComponent {
const state = this.getOAuthState();
const params = `?client_id=${clientId}&redirect_uri=${redirect_uri}&scope=${scope}&state=${state}`;
this.openOAuth({ url: `${endpoint}${encodeURIComponent(params)}` });
}
};
onPressGitlab = () => {
logEvent(events.ENTER_WITH_GITLAB);
@ -116,7 +137,7 @@ class LoginServices extends React.PureComponent {
const state = this.getOAuthState();
const params = `?client_id=${clientId}&redirect_uri=${redirect_uri}&scope=${scope}&state=${state}&response_type=code`;
this.openOAuth({ url: `${endpoint}${params}` });
}
};
onPressGoogle = () => {
logEvent(events.ENTER_WITH_GOOGLE);
@ -128,7 +149,7 @@ class LoginServices extends React.PureComponent {
const state = this.getOAuthState(LOGIN_STYPE_REDIRECT);
const params = `?client_id=${clientId}&redirect_uri=${redirect_uri}&scope=${scope}&state=${state}&response_type=code`;
Linking.openURL(`${endpoint}${params}`);
}
};
onPressLinkedin = () => {
logEvent(events.ENTER_WITH_LINKEDIN);
@ -140,7 +161,7 @@ class LoginServices extends React.PureComponent {
const state = this.getOAuthState();
const params = `?client_id=${clientId}&redirect_uri=${redirect_uri}&scope=${scope}&state=${state}&response_type=code`;
this.openOAuth({ url: `${endpoint}${params}` });
}
};
onPressMeteor = () => {
logEvent(events.ENTER_WITH_METEOR);
@ -151,7 +172,7 @@ class LoginServices extends React.PureComponent {
const state = this.getOAuthState();
const params = `?client_id=${clientId}&redirect_uri=${redirect_uri}&state=${state}&response_type=code`;
this.openOAuth({ url: `${endpoint}${params}` });
}
};
onPressTwitter = () => {
logEvent(events.ENTER_WITH_TWITTER);
@ -159,7 +180,7 @@ class LoginServices extends React.PureComponent {
const state = this.getOAuthState();
const url = `${server}/_oauth/twitter/?requestTokenAndRedirect=true&state=${state}`;
this.openOAuth({ url });
}
};
onPressWordpress = () => {
logEvent(events.ENTER_WITH_WORDPRESS);
@ -171,14 +192,12 @@ class LoginServices extends React.PureComponent {
const state = this.getOAuthState();
const params = `?client_id=${clientId}&redirect_uri=${redirect_uri}&scope=${scope}&state=${state}&response_type=code`;
this.openOAuth({ url: `${endpoint}${params}` });
}
};
onPressCustomOAuth = (loginService) => {
onPressCustomOAuth = (loginService: any) => {
logEvent(events.ENTER_WITH_CUSTOM_OAUTH);
const { server } = this.props;
const {
serverURL, authorizePath, clientId, scope, service
} = loginService;
const { serverURL, authorizePath, clientId, scope, service } = loginService;
const redirectUri = `${server}/_oauth/${service}`;
const state = this.getOAuthState();
const params = `?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&state=${state}&scope=${scope}`;
@ -186,9 +205,9 @@ class LoginServices extends React.PureComponent {
const absolutePath = `${authorizePath}${params}`;
const url = absolutePath.includes(domain) ? absolutePath : domain + absolutePath;
this.openOAuth({ url });
}
};
onPressSaml = (loginService) => {
onPressSaml = (loginService: any) => {
logEvent(events.ENTER_WITH_SAML);
const { server } = this.props;
const { clientConfig } = loginService;
@ -196,7 +215,7 @@ class LoginServices extends React.PureComponent {
const ssoToken = random(17);
const url = `${server}/_saml/authorize/${provider}/${ssoToken}`;
this.openOAuth({ url, ssoToken, authType: 'saml' });
}
};
onPressCas = () => {
logEvent(events.ENTER_WITH_CAS);
@ -204,7 +223,7 @@ class LoginServices extends React.PureComponent {
const ssoToken = random(17);
const url = `${CAS_login_url}?service=${server}/_cas/${ssoToken}`;
this.openOAuth({ url, ssoToken, authType: 'cas' });
}
};
onPressAppleLogin = async () => {
logEvent(events.ENTER_WITH_APPLE);
@ -220,11 +239,11 @@ class LoginServices extends React.PureComponent {
} catch {
logEvent(events.ENTER_WITH_APPLE_F);
}
}
};
getOAuthState = (loginStyle = LOGIN_STYPE_POPUP) => {
const credentialToken = random(43);
let obj = { loginStyle, credentialToken, isCordova: true };
let obj: any = { loginStyle, credentialToken, isCordova: true };
if (loginStyle === LOGIN_STYPE_REDIRECT) {
obj = {
...obj,
@ -232,24 +251,26 @@ class LoginServices extends React.PureComponent {
};
}
return Base64.encodeURI(JSON.stringify(obj));
}
};
openOAuth = ({ url, ssoToken, authType = 'oauth' }) => {
openOAuth = ({ url, ssoToken, authType = 'oauth' }: IOpenOAuth) => {
const { navigation } = this.props;
navigation.navigate('AuthenticationWebView', { url, authType, ssoToken });
}
};
transitionServicesTo = (height) => {
transitionServicesTo = (height: number) => {
const { servicesHeight } = this.state;
if (this._animation) {
this._animation.stop();
}
// @ts-ignore
this._animation = Animated.timing(servicesHeight, {
toValue: height,
duration: 300,
// @ts-ignore
easing: Easing.easeOutCubic
}).start();
}
};
toggleServices = () => {
const { collapsed } = this.state;
@ -260,11 +281,11 @@ class LoginServices extends React.PureComponent {
} else {
this.transitionServicesTo(SERVICES_COLLAPSED_HEIGHT);
}
this.setState(prevState => ({ collapsed: !prevState.collapsed }));
}
this.setState((prevState: any) => ({ collapsed: !prevState.collapsed }));
};
getSocialOauthProvider = (name) => {
const oauthProviders = {
getSocialOauthProvider = (name: string) => {
const oauthProviders: any = {
facebook: this.onPressFacebook,
github: this.onPressGithub,
gitlab: this.onPressGitlab,
@ -275,7 +296,7 @@ class LoginServices extends React.PureComponent {
wordpress: this.onPressWordpress
};
return oauthProviders[name];
}
};
renderServicesSeparator = () => {
const { collapsed } = this.state;
@ -301,9 +322,9 @@ class LoginServices extends React.PureComponent {
return <OrSeparator theme={theme} />;
}
return null;
}
};
renderItem = (service) => {
renderItem = (service: IService) => {
const { CAS_enabled, theme } = this.props;
let { name } = service;
name = name === 'meteor-developer' ? 'meteor' : name;
@ -357,15 +378,16 @@ class LoginServices extends React.PureComponent {
style={[styles.serviceButton, { backgroundColor }]}
theme={theme}
activeOpacity={0.5}
underlayColor={themes[theme].buttonText}
>
underlayColor={themes[theme].buttonText}>
<View style={styles.serviceButtonContainer}>
{service.authType === 'oauth' || service.authType === 'apple' ? <CustomIcon name={icon} size={24} color={themes[theme].titleText} style={styles.serviceIcon} /> : null}
{service.authType === 'oauth' || service.authType === 'apple' ? (
<CustomIcon name={icon} size={24} color={themes[theme].titleText} style={styles.serviceIcon} />
) : null}
<Text style={[styles.serviceText, { color: themes[theme].titleText }]}>{buttonText}</Text>
</View>
</Touch>
);
}
};
render() {
const { servicesHeight } = this.state;
@ -379,23 +401,21 @@ class LoginServices extends React.PureComponent {
if (length > 3 && separator) {
return (
<>
<Animated.View style={style}>
{Object.values(services).map(service => this.renderItem(service))}
</Animated.View>
<Animated.View style={style}>{Object.values(services).map((service: any) => this.renderItem(service))}</Animated.View>
{this.renderServicesSeparator()}
</>
);
}
return (
<>
{Object.values(services).map(service => this.renderItem(service))}
{Object.values(services).map((service: any) => this.renderItem(service))}
{this.renderServicesSeparator()}
</>
);
}
}
const mapStateToProps = state => ({
const mapStateToProps = (state: any) => ({
server: state.server.server,
Gitlab_URL: state.settings.API_Gitlab_URL,
CAS_enabled: state.settings.CAS_enabled,

83
app/containers/MessageActions/Header.js → app/containers/MessageActions/Header.tsx
View File

@ -1,8 +1,5 @@
import React, { useEffect, useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import {
View, Text, FlatList, StyleSheet
} from 'react-native';
import React, { useCallback, useEffect, useState } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
import { withTheme } from '../../theme';
import { themes } from '../../constants/colors';
@ -13,6 +10,27 @@ import database from '../../lib/database';
import { Button } from '../ActionSheet';
import { useDimensions } from '../../dimensions';
import sharedStyles from '../../views/Styles';
import { IEmoji } from '../EmojiPicker/interfaces';
interface IHeader {
handleReaction: Function;
server: string;
message: object;
isMasterDetail: boolean;
theme: string;
}
interface THeaderItem {
item: IEmoji;
onReaction: Function;
server: string;
theme: string;
}
interface THeaderFooter {
onReaction: any;
theme: string;
}
export const HEADER_HEIGHT = 36;
const ITEM_SIZE = 36;
@ -43,55 +61,37 @@ const styles = StyleSheet.create({
}
});
const keyExtractor = item => item?.id || item;
const keyExtractor = (item: any) => item?.id || item;
const DEFAULT_EMOJIS = ['clap', '+1', 'heart_eyes', 'grinning', 'thinking_face', 'smiley'];
const HeaderItem = React.memo(({
item, onReaction, server, theme
}) => (
const HeaderItem = React.memo(({ item, onReaction, server, theme }: THeaderItem) => (
<Button
testID={`message-actions-emoji-${item.content || item}`}
onPress={() => onReaction({ emoji: `:${item.content || item}:` })}
style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
theme={theme}
>
theme={theme}>
{item?.isCustom ? (
<CustomEmoji style={styles.customEmoji} emoji={item} baseUrl={server} />
) : (
<Text style={styles.headerIcon}>
{shortnameToUnicode(`:${ item.content || item }:`)}
</Text>
<Text style={styles.headerIcon}>{shortnameToUnicode(`:${item.content || item}:`)}</Text>
)}
</Button>
));
HeaderItem.propTypes = {
item: PropTypes.string,
onReaction: PropTypes.func,
server: PropTypes.string,
theme: PropTypes.string
};
const HeaderFooter = React.memo(({ onReaction, theme }) => (
const HeaderFooter = React.memo(({ onReaction, theme }: THeaderFooter) => (
<Button
testID='add-reaction'
onPress={onReaction}
style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
theme={theme}
>
theme={theme}>
<CustomIcon name='reaction-add' size={24} color={themes[theme].bodyText} />
</Button>
));
HeaderFooter.propTypes = {
onReaction: PropTypes.func,
theme: PropTypes.string
};
const Header = React.memo(({
handleReaction, server, message, isMasterDetail, theme
}) => {
const Header = React.memo(({ handleReaction, server, message, isMasterDetail, theme }: IHeader) => {
const [items, setItems] = useState([]);
const { width, height } = useDimensions();
const { width, height }: any = useDimensions();
const setEmojis = async () => {
try {
@ -100,8 +100,8 @@ const Header = React.memo(({
let freqEmojis = await freqEmojiCollection.query().fetch();
const isLandscape = width > height;
const size = (isLandscape || isMasterDetail ? width / 2 : width) - (CONTAINER_MARGIN * 2);
const quantity = (size / (ITEM_SIZE + (ITEM_MARGIN * 2))) - 1;
const size = (isLandscape || isMasterDetail ? width / 2 : width) - CONTAINER_MARGIN * 2;
const quantity = size / (ITEM_SIZE + ITEM_MARGIN * 2) - 1;
freqEmojis = freqEmojis.concat(DEFAULT_EMOJIS).slice(0, quantity);
setItems(freqEmojis);
@ -114,11 +114,14 @@ const Header = React.memo(({
setEmojis();
}, []);
const onReaction = ({ emoji }) => handleReaction(emoji, message);
const onReaction = ({ emoji }: { emoji: IEmoji }) => handleReaction(emoji, message);
const renderItem = useCallback(({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme} />);
const renderItem = useCallback(
({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme} />,
[]
);
const renderFooter = useCallback(() => <HeaderFooter onReaction={onReaction} theme={theme} />);
const renderFooter = useCallback(() => <HeaderFooter onReaction={onReaction} theme={theme} />, []);
return (
<View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}>
@ -135,11 +138,5 @@ const Header = React.memo(({
</View>
);
});
Header.propTypes = {
handleReaction: PropTypes.func,
server: PropTypes.string,
message: PropTypes.object,
isMasterDetail: PropTypes.bool,
theme: PropTypes.string
};
export default withTheme(Header);

472
app/containers/MessageActions/index.js
View File

@ -1,472 +0,0 @@
import React, { forwardRef, useImperativeHandle } from 'react';
import PropTypes from 'prop-types';
import { Alert, Clipboard, Share } from 'react-native';
import { connect } from 'react-redux';
import moment from 'moment';
import RocketChat from '../../lib/rocketchat';
import database from '../../lib/database';
import I18n from '../../i18n';
import log, { logEvent } from '../../utils/log';
import Navigation from '../../lib/Navigation';
import { getMessageTranslation } from '../message/utils';
import { LISTENER } from '../Toast';
import EventEmitter from '../../utils/events';
import { showConfirmationAlert } from '../../utils/info';
import { useActionSheet } from '../ActionSheet';
import Header, { HEADER_HEIGHT } from './Header';
import events from '../../utils/log/events';
const MessageActions = React.memo(forwardRef(({
room,
tmid,
user,
editInit,
reactionInit,
onReactionPress,
replyInit,
isReadOnly,
server,
Message_AllowDeleting,
Message_AllowDeleting_BlockDeleteInMinutes,
Message_AllowEditing,
Message_AllowEditing_BlockEditInMinutes,
Message_AllowPinning,
Message_AllowStarring,
Message_Read_Receipt_Store_Users,
isMasterDetail,
editMessagePermission,
deleteMessagePermission,
forceDeleteMessagePermission,
pinMessagePermission
}, ref) => {
let permissions = {};
const { showActionSheet, hideActionSheet } = useActionSheet();
const getPermissions = async() => {
try {
const permission = [editMessagePermission, deleteMessagePermission, forceDeleteMessagePermission, pinMessagePermission];
const result = await RocketChat.hasPermission(permission, room.rid);
permissions = {
hasEditPermission: result[0],
hasDeletePermission: result[1],
hasForceDeletePermission: result[2],
hasPinPermission: result[3]
};
} catch {
// Do nothing
}
};
const isOwn = message => message.u && message.u._id === user.id;
const allowEdit = (message) => {
if (isReadOnly) {
return false;
}
const editOwn = isOwn(message);
if (!(permissions.hasEditPermission || (Message_AllowEditing && editOwn))) {
return false;
}
const blockEditInMinutes = Message_AllowEditing_BlockEditInMinutes;
if (blockEditInMinutes) {
let msgTs;
if (message.ts != null) {
msgTs = moment(message.ts);
}
let currentTsDiff;
if (msgTs != null) {
currentTsDiff = moment().diff(msgTs, 'minutes');
}
return currentTsDiff < blockEditInMinutes;
}
return true;
};
const allowDelete = (message) => {
if (isReadOnly) {
return false;
}
// Prevent from deleting thread start message when positioned inside the thread
if (tmid === message.id) {
return false;
}
const deleteOwn = isOwn(message);
if (!(permissions.hasDeletePermission || (Message_AllowDeleting && deleteOwn) || permissions.hasForceDeletePermission)) {
return false;
}
if (permissions.hasForceDeletePermission) {
return true;
}
const blockDeleteInMinutes = Message_AllowDeleting_BlockDeleteInMinutes;
if (blockDeleteInMinutes != null && blockDeleteInMinutes !== 0) {
let msgTs;
if (message.ts != null) {
msgTs = moment(message.ts);
}
let currentTsDiff;
if (msgTs != null) {
currentTsDiff = moment().diff(msgTs, 'minutes');
}
return currentTsDiff < blockDeleteInMinutes;
}
return true;
};
const getPermalink = message => RocketChat.getPermalinkMessage(message);
const handleReply = (message) => {
logEvent(events.ROOM_MSG_ACTION_REPLY);
replyInit(message, true);
};
const handleEdit = (message) => {
logEvent(events.ROOM_MSG_ACTION_EDIT);
editInit(message);
};
const handleCreateDiscussion = (message) => {
logEvent(events.ROOM_MSG_ACTION_DISCUSSION);
const params = { message, channel: room, showCloseModal: true };
if (isMasterDetail) {
Navigation.navigate('ModalStackNavigator', { screen: 'CreateDiscussionView', params });
} else {
Navigation.navigate('NewMessageStackNavigator', { screen: 'CreateDiscussionView', params });
}
};
const handleUnread = async(message) => {
logEvent(events.ROOM_MSG_ACTION_UNREAD);
const { id: messageId, ts } = message;
const { rid } = room;
try {
const db = database.active;
const result = await RocketChat.markAsUnread({ messageId });
if (result.success) {
const subCollection = db.get('subscriptions');
const subRecord = await subCollection.find(rid);
await db.action(async() => {
try {
await subRecord.update(sub => sub.lastOpen = ts);
} catch {
// do nothing
}
});
Navigation.navigate('RoomsListView');
}
} catch (e) {
logEvent(events.ROOM_MSG_ACTION_UNREAD_F);
log(e);
}
};
const handlePermalink = async(message) => {
logEvent(events.ROOM_MSG_ACTION_PERMALINK);
try {
const permalink = await getPermalink(message);
Clipboard.setString(permalink);
EventEmitter.emit(LISTENER, { message: I18n.t('Permalink_copied_to_clipboard') });
} catch {
logEvent(events.ROOM_MSG_ACTION_PERMALINK_F);
}
};
const handleCopy = async(message) => {
logEvent(events.ROOM_MSG_ACTION_COPY);
await Clipboard.setString(message?.attachments?.[0]?.description || message.msg);
EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
};
const handleShare = async(message) => {
logEvent(events.ROOM_MSG_ACTION_SHARE);
try {
const permalink = await getPermalink(message);
Share.share({ message: permalink });
} catch {
logEvent(events.ROOM_MSG_ACTION_SHARE_F);
}
};
const handleQuote = (message) => {
logEvent(events.ROOM_MSG_ACTION_QUOTE);
replyInit(message, false);
};
const handleStar = async(message) => {
logEvent(message.starred ? events.ROOM_MSG_ACTION_UNSTAR : events.ROOM_MSG_ACTION_STAR);
try {
await RocketChat.toggleStarMessage(message.id, message.starred);
EventEmitter.emit(LISTENER, { message: message.starred ? I18n.t('Message_unstarred') : I18n.t('Message_starred') });
} catch (e) {
logEvent(events.ROOM_MSG_ACTION_STAR_F);
log(e);
}
};
const handlePin = async(message) => {
logEvent(events.ROOM_MSG_ACTION_PIN);
try {
await RocketChat.togglePinMessage(message.id, message.pinned);
} catch (e) {
logEvent(events.ROOM_MSG_ACTION_PIN_F);
log(e);
}
};
const handleReaction = (shortname, message) => {
logEvent(events.ROOM_MSG_ACTION_REACTION);
if (shortname) {
onReactionPress(shortname, message.id);
} else {
reactionInit(message);
}
// close actionSheet when click at header
hideActionSheet();
};
const handleReadReceipt = (message) => {
if (isMasterDetail) {
Navigation.navigate('ModalStackNavigator', { screen: 'ReadReceiptsView', params: { messageId: message.id } });
} else {
Navigation.navigate('ReadReceiptsView', { messageId: message.id });
}
};
const handleToggleTranslation = async(message) => {
try {
const db = database.active;
await db.action(async() => {
await message.update((m) => {
m.autoTranslate = !m.autoTranslate;
m._updatedAt = new Date();
});
});
const translatedMessage = getMessageTranslation(message, room.autoTranslateLanguage);
if (!translatedMessage) {
const m = {
_id: message.id,
rid: message.subscription.id,
u: message.u,
msg: message.msg
};
await RocketChat.translateMessage(m, room.autoTranslateLanguage);
}
} catch (e) {
log(e);
}
};
const handleReport = async(message) => {
logEvent(events.ROOM_MSG_ACTION_REPORT);
try {
await RocketChat.reportMessage(message.id);
Alert.alert(I18n.t('Message_Reported'));
} catch (e) {
logEvent(events.ROOM_MSG_ACTION_REPORT_F);
log(e);
}
};
const handleDelete = (message) => {
showConfirmationAlert({
message: I18n.t('You_will_not_be_able_to_recover_this_message'),
confirmationText: I18n.t('Delete'),
onPress: async() => {
try {
logEvent(events.ROOM_MSG_ACTION_DELETE);
await RocketChat.deleteMessage(message.id, message.subscription.id);
} catch (e) {
logEvent(events.ROOM_MSG_ACTION_DELETE_F);
log(e);
}
}
});
};
const getOptions = (message) => {
let options = [];
// Reply
if (!isReadOnly) {
options = [{
title: I18n.t('Reply_in_Thread'),
icon: 'threads',
onPress: () => handleReply(message)
}];
}
// Quote
if (!isReadOnly) {
options.push({
title: I18n.t('Quote'),
icon: 'quote',
onPress: () => handleQuote(message)
});
}
// Edit
if (allowEdit(message)) {
options.push({
title: I18n.t('Edit'),
icon: 'edit',
onPress: () => handleEdit(message)
});
}
// Permalink
options.push({
title: I18n.t('Permalink'),
icon: 'link',
onPress: () => handlePermalink(message)
});
// Create Discussion
options.push({
title: I18n.t('Start_a_Discussion'),
icon: 'discussions',
onPress: () => handleCreateDiscussion(message)
});
// Mark as unread
if (message.u && message.u._id !== user.id) {
options.push({
title: I18n.t('Mark_unread'),
icon: 'flag',
onPress: () => handleUnread(message)
});
}
// Copy
options.push({
title: I18n.t('Copy'),
icon: 'copy',
onPress: () => handleCopy(message)
});
// Share
options.push({
title: I18n.t('Share'),
icon: 'share',
onPress: () => handleShare(message)
});
// Star
if (Message_AllowStarring) {
options.push({
title: I18n.t(message.starred ? 'Unstar' : 'Star'),
icon: message.starred ? 'star-filled' : 'star',
onPress: () => handleStar(message)
});
}
// Pin
if (Message_AllowPinning && permissions?.hasPinPermission) {
options.push({
title: I18n.t(message.pinned ? 'Unpin' : 'Pin'),
icon: 'pin',
onPress: () => handlePin(message)
});
}
// Read Receipts
if (Message_Read_Receipt_Store_Users) {
options.push({
title: I18n.t('Read_Receipt'),
icon: 'info',
onPress: () => handleReadReceipt(message)
});
}
// Toggle Auto-translate
if (room.autoTranslate && message.u && message.u._id !== user.id) {
options.push({
title: I18n.t(message.autoTranslate ? 'View_Original' : 'Translate'),
icon: 'language',
onPress: () => handleToggleTranslation(message)
});
}
// Report
options.push({
title: I18n.t('Report'),
icon: 'warning',
danger: true,
onPress: () => handleReport(message)
});
// Delete
if (allowDelete(message)) {
options.push({
title: I18n.t('Delete'),
icon: 'delete',
danger: true,
onPress: () => handleDelete(message)
});
}
return options;
};
const showMessageActions = async(message) => {
logEvent(events.ROOM_SHOW_MSG_ACTIONS);
await getPermissions();
showActionSheet({
options: getOptions(message),
headerHeight: HEADER_HEIGHT,
customHeader: (!isReadOnly || room.reactWhenReadOnly ? (
<Header
server={server}
handleReaction={handleReaction}
isMasterDetail={isMasterDetail}
message={message}
/>
) : null)
});
};
useImperativeHandle(ref, () => ({ showMessageActions }));
return null;
}));
MessageActions.propTypes = {
room: PropTypes.object,
tmid: PropTypes.string,
user: PropTypes.object,
editInit: PropTypes.func,
reactionInit: PropTypes.func,
onReactionPress: PropTypes.func,
replyInit: PropTypes.func,
isReadOnly: PropTypes.bool,
Message_AllowDeleting: PropTypes.bool,
Message_AllowDeleting_BlockDeleteInMinutes: PropTypes.number,
Message_AllowEditing: PropTypes.bool,
Message_AllowEditing_BlockEditInMinutes: PropTypes.number,
Message_AllowPinning: PropTypes.bool,
Message_AllowStarring: PropTypes.bool,
Message_Read_Receipt_Store_Users: PropTypes.bool,
server: PropTypes.string,
editMessagePermission: PropTypes.array,
deleteMessagePermission: PropTypes.array,
forceDeleteMessagePermission: PropTypes.array,
pinMessagePermission: PropTypes.array
};
const mapStateToProps = state => ({
server: state.server.server,
Message_AllowDeleting: state.settings.Message_AllowDeleting,
Message_AllowDeleting_BlockDeleteInMinutes: state.settings.Message_AllowDeleting_BlockDeleteInMinutes,
Message_AllowEditing: state.settings.Message_AllowEditing,
Message_AllowEditing_BlockEditInMinutes: state.settings.Message_AllowEditing_BlockEditInMinutes,
Message_AllowPinning: state.settings.Message_AllowPinning,
Message_AllowStarring: state.settings.Message_AllowStarring,
Message_Read_Receipt_Store_Users: state.settings.Message_Read_Receipt_Store_Users,
isMasterDetail: state.app.isMasterDetail,
editMessagePermission: state.permissions['edit-message'],
deleteMessagePermission: state.permissions['delete-message'],
forceDeleteMessagePermission: state.permissions['force-delete-message'],
pinMessagePermission: state.permissions['pin-message']
});
export default connect(mapStateToProps, null, null, { forwardRef: true })(MessageActions);

487
app/containers/MessageActions/index.tsx Normal file
View File

@ -0,0 +1,487 @@
import React, { forwardRef, useImperativeHandle } from 'react';
import { Alert, Clipboard, Share } from 'react-native';
import { connect } from 'react-redux';
import moment from 'moment';
import RocketChat from '../../lib/rocketchat';
import database from '../../lib/database';
import I18n from '../../i18n';
import log, { logEvent } from '../../utils/log';
import Navigation from '../../lib/Navigation';
import { getMessageTranslation } from '../message/utils';
import { LISTENER } from '../Toast';
import EventEmitter from '../../utils/events';
import { showConfirmationAlert } from '../../utils/info';
import { useActionSheet } from '../ActionSheet';
import Header, { HEADER_HEIGHT } from './Header';
import events from '../../utils/log/events';
interface IMessageActions {
room: {
rid: string | number;
autoTranslateLanguage: any;
autoTranslate: any;
reactWhenReadOnly: any;
};
tmid: string;
user: {
id: string | number;
};
editInit: Function;
reactionInit: Function;
onReactionPress: Function;
replyInit: Function;
isMasterDetail: boolean;
isReadOnly: boolean;
Message_AllowDeleting: boolean;
Message_AllowDeleting_BlockDeleteInMinutes: number;
Message_AllowEditing: boolean;
Message_AllowEditing_BlockEditInMinutes: number;
Message_AllowPinning: boolean;
Message_AllowStarring: boolean;
Message_Read_Receipt_Store_Users: boolean;
server: string;
editMessagePermission: [];
deleteMessagePermission: [];
forceDeleteMessagePermission: [];
pinMessagePermission: [];
}
const MessageActions = React.memo(
forwardRef(
(
{
room,
tmid,
user,
editInit,
reactionInit,
onReactionPress,
replyInit,
isReadOnly,
server,
Message_AllowDeleting,
Message_AllowDeleting_BlockDeleteInMinutes,
Message_AllowEditing,
Message_AllowEditing_BlockEditInMinutes,
Message_AllowPinning,
Message_AllowStarring,
Message_Read_Receipt_Store_Users,
isMasterDetail,
editMessagePermission,
deleteMessagePermission,
forceDeleteMessagePermission,
pinMessagePermission
}: IMessageActions,
ref
): any => {
let permissions: any = {};
const { showActionSheet, hideActionSheet }: any = useActionSheet();
const getPermissions = async () => {
try {
const permission = [editMessagePermission, deleteMessagePermission, forceDeleteMessagePermission, pinMessagePermission];
const result = await RocketChat.hasPermission(permission, room.rid);
permissions = {
hasEditPermission: result[0],
hasDeletePermission: result[1],
hasForceDeletePermission: result[2],
hasPinPermission: result[3]
};
} catch {
// Do nothing
}
};
const isOwn = (message: any) => message.u && message.u._id === user.id;
const allowEdit = (message: any) => {
if (isReadOnly) {
return false;
}
const editOwn = isOwn(message);
if (!(permissions.hasEditPermission || (Message_AllowEditing && editOwn))) {
return false;
}
const blockEditInMinutes = Message_AllowEditing_BlockEditInMinutes;
if (blockEditInMinutes) {
let msgTs;
if (message.ts != null) {
msgTs = moment(message.ts);
}
let currentTsDiff: any;
if (msgTs != null) {
currentTsDiff = moment().diff(msgTs, 'minutes');
}
return currentTsDiff < blockEditInMinutes;
}
return true;
};
const allowDelete = (message: any) => {
if (isReadOnly) {
return false;
}
// Prevent from deleting thread start message when positioned inside the thread
if (tmid === message.id) {
return false;
}
const deleteOwn = isOwn(message);
if (!(permissions.hasDeletePermission || (Message_AllowDeleting && deleteOwn) || permissions.hasForceDeletePermission)) {
return false;
}
if (permissions.hasForceDeletePermission) {
return true;
}
const blockDeleteInMinutes = Message_AllowDeleting_BlockDeleteInMinutes;
if (blockDeleteInMinutes != null && blockDeleteInMinutes !== 0) {
let msgTs;
if (message.ts != null) {
msgTs = moment(message.ts);
}
let currentTsDiff: any;
if (msgTs != null) {
currentTsDiff = moment().diff(msgTs, 'minutes');
}
return currentTsDiff < blockDeleteInMinutes;
}
return true;
};
const getPermalink = (message: any) => RocketChat.getPermalinkMessage(message);
const handleReply = (message: any) => {
logEvent(events.ROOM_MSG_ACTION_REPLY);
replyInit(message, true);
};
const handleEdit = (message: any) => {
logEvent(events.ROOM_MSG_ACTION_EDIT);
editInit(message);
};
const handleCreateDiscussion = (message: any) => {
logEvent(events.ROOM_MSG_ACTION_DISCUSSION);
const params = { message, channel: room, showCloseModal: true };
if (isMasterDetail) {
Navigation.navigate('ModalStackNavigator', { screen: 'CreateDiscussionView', params });
} else {
Navigation.navigate('NewMessageStackNavigator', { screen: 'CreateDiscussionView', params });
}
};
const handleUnread = async (message: any) => {
logEvent(events.ROOM_MSG_ACTION_UNREAD);
const { id: messageId, ts } = message;
const { rid } = room;
try {
const db = database.active;
const result = await RocketChat.markAsUnread({ messageId });
if (result.success) {
const subCollection = db.get('subscriptions');
const subRecord = await subCollection.find(rid);
await db.action(async () => {
try {
await subRecord.update((sub: any) => (sub.lastOpen = ts));
} catch {
// do nothing
}
});
Navigation.navigate('RoomsListView');
}
} catch (e) {
logEvent(events.ROOM_MSG_ACTION_UNREAD_F);
log(e);
}
};
const handlePermalink = async (message: any) => {
logEvent(events.ROOM_MSG_ACTION_PERMALINK);
try {
const permalink: any = await getPermalink(message);
Clipboard.setString(permalink);
EventEmitter.emit(LISTENER, { message: I18n.t('Permalink_copied_to_clipboard') });
} catch {
logEvent(events.ROOM_MSG_ACTION_PERMALINK_F);
}
};
const handleCopy = async (message: any) => {
logEvent(events.ROOM_MSG_ACTION_COPY);
await Clipboard.setString(message?.attachments?.[0]?.description || message.msg);
EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
};
const handleShare = async (message: any) => {
logEvent(events.ROOM_MSG_ACTION_SHARE);
try {
const permalink: any = await getPermalink(message);
Share.share({ message: permalink });
} catch {
logEvent(events.ROOM_MSG_ACTION_SHARE_F);
}
};
const handleQuote = (message: any) => {
logEvent(events.ROOM_MSG_ACTION_QUOTE);
replyInit(message, false);
};
const handleStar = async (message: any) => {
logEvent(message.starred ? events.ROOM_MSG_ACTION_UNSTAR : events.ROOM_MSG_ACTION_STAR);
try {
await RocketChat.toggleStarMessage(message.id, message.starred);
EventEmitter.emit(LISTENER, { message: message.starred ? I18n.t('Message_unstarred') : I18n.t('Message_starred') });
} catch (e) {
logEvent(events.ROOM_MSG_ACTION_STAR_F);
log(e);
}
};
const handlePin = async (message: any) => {
logEvent(events.ROOM_MSG_ACTION_PIN);
try {
await RocketChat.togglePinMessage(message.id, message.pinned);
} catch (e) {
logEvent(events.ROOM_MSG_ACTION_PIN_F);
log(e);
}
};
const handleReaction = (shortname: any, message: any) => {
logEvent(events.ROOM_MSG_ACTION_REACTION);
if (shortname) {
onReactionPress(shortname, message.id);
} else {
reactionInit(message);
}
// close actionSheet when click at header
hideActionSheet();
};
const handleReadReceipt = (message: any) => {
if (isMasterDetail) {
Navigation.navigate('ModalStackNavigator', { screen: 'ReadReceiptsView', params: { messageId: message.id } });
} else {
Navigation.navigate('ReadReceiptsView', { messageId: message.id });
}
};
const handleToggleTranslation = async (message: any) => {
try {
const db = database.active;
await db.action(async () => {
await message.update((m: any) => {
m.autoTranslate = !m.autoTranslate;
m._updatedAt = new Date();
});
});
const translatedMessage = getMessageTranslation(message, room.autoTranslateLanguage);
if (!translatedMessage) {
const m = {
_id: message.id,
rid: message.subscription.id,
u: message.u,
msg: message.msg
};
await RocketChat.translateMessage(m, room.autoTranslateLanguage);
}
} catch (e) {
log(e);
}
};
const handleReport = async (message: any) => {
logEvent(events.ROOM_MSG_ACTION_REPORT);
try {
await RocketChat.reportMessage(message.id);
Alert.alert(I18n.t('Message_Reported'));
} catch (e) {
logEvent(events.ROOM_MSG_ACTION_REPORT_F);
log(e);
}
};
const handleDelete = (message: any) => {
// TODO - migrate this function for ts when fix the lint erros
// @ts-ignore
showConfirmationAlert({
message: I18n.t('You_will_not_be_able_to_recover_this_message'),
confirmationText: I18n.t('Delete'),
onPress: async () => {
try {
logEvent(events.ROOM_MSG_ACTION_DELETE);
await RocketChat.deleteMessage(message.id, message.subscription.id);
} catch (e) {
logEvent(events.ROOM_MSG_ACTION_DELETE_F);
log(e);
}
}
});
};
const getOptions = (message: any) => {
let options: any = [];
// Reply
if (!isReadOnly) {
options = [
{
title: I18n.t('Reply_in_Thread'),
icon: 'threads',
onPress: () => handleReply(message)
}
];
}
// Quote
if (!isReadOnly) {
options.push({
title: I18n.t('Quote'),
icon: 'quote',
onPress: () => handleQuote(message)
});
}
// Edit
if (allowEdit(message)) {
options.push({
title: I18n.t('Edit'),
icon: 'edit',
onPress: () => handleEdit(message)
});
}
// Permalink
options.push({
title: I18n.t('Permalink'),
icon: 'link',
onPress: () => handlePermalink(message)
});
// Create Discussion
options.push({
title: I18n.t('Start_a_Discussion'),
icon: 'discussions',
onPress: () => handleCreateDiscussion(message)
});
// Mark as unread
if (message.u && message.u._id !== user.id) {
options.push({
title: I18n.t('Mark_unread'),
icon: 'flag',
onPress: () => handleUnread(message)
});
}
// Copy
options.push({
title: I18n.t('Copy'),
icon: 'copy',
onPress: () => handleCopy(message)
});
// Share
options.push({
title: I18n.t('Share'),
icon: 'share',
onPress: () => handleShare(message)
});
// Star
if (Message_AllowStarring) {
options.push({
title: I18n.t(message.starred ? 'Unstar' : 'Star'),
icon: message.starred ? 'star-filled' : 'star',
onPress: () => handleStar(message)
});
}
// Pin
if (Message_AllowPinning && permissions?.hasPinPermission) {
options.push({
title: I18n.t(message.pinned ? 'Unpin' : 'Pin'),
icon: 'pin',
onPress: () => handlePin(message)
});
}
// Read Receipts
if (Message_Read_Receipt_Store_Users) {
options.push({
title: I18n.t('Read_Receipt'),
icon: 'info',
onPress: () => handleReadReceipt(message)
});
}
// Toggle Auto-translate
if (room.autoTranslate && message.u && message.u._id !== user.id) {
options.push({
title: I18n.t(message.autoTranslate ? 'View_Original' : 'Translate'),
icon: 'language',
onPress: () => handleToggleTranslation(message)
});
}
// Report
options.push({
title: I18n.t('Report'),
icon: 'warning',
danger: true,
onPress: () => handleReport(message)
});
// Delete
if (allowDelete(message)) {
options.push({
title: I18n.t('Delete'),
icon: 'delete',
danger: true,
onPress: () => handleDelete(message)
});
}
return options;
};
const showMessageActions = async (message: any) => {
logEvent(events.ROOM_SHOW_MSG_ACTIONS);
await getPermissions();
showActionSheet({
options: getOptions(message),
headerHeight: HEADER_HEIGHT,
customHeader:
!isReadOnly || room.reactWhenReadOnly ? (
<Header server={server} handleReaction={handleReaction} isMasterDetail={isMasterDetail} message={message} />
) : null
});
};
useImperativeHandle(ref, () => ({ showMessageActions }));
return null;
}
)
);
const mapStateToProps = (state: any) => ({
server: state.server.server,
Message_AllowDeleting: state.settings.Message_AllowDeleting,
Message_AllowDeleting_BlockDeleteInMinutes: state.settings.Message_AllowDeleting_BlockDeleteInMinutes,
Message_AllowEditing: state.settings.Message_AllowEditing,
Message_AllowEditing_BlockEditInMinutes: state.settings.Message_AllowEditing_BlockEditInMinutes,
Message_AllowPinning: state.settings.Message_AllowPinning,
Message_AllowStarring: state.settings.Message_AllowStarring,
Message_Read_Receipt_Store_Users: state.settings.Message_Read_Receipt_Store_Users,
isMasterDetail: state.app.isMasterDetail,
editMessagePermission: state.permissions['edit-message'],
deleteMessagePermission: state.permissions['delete-message'],
forceDeleteMessagePermission: state.permissions['force-delete-message'],
pinMessagePermission: state.permissions['pin-message']
});
export default connect(mapStateToProps, null, null, { forwardRef: true })(MessageActions);

32
app/containers/MessageBox/CommandsPreview/Item.js → app/containers/MessageBox/CommandsPreview/Item.tsx
View File

@ -1,5 +1,4 @@
import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity } from 'react-native';
import FastImage from '@rocket.chat/react-native-fast-image';
@ -9,7 +8,16 @@ import { themes } from '../../../constants/colors';
import MessageboxContext from '../Context';
import ActivityIndicator from '../../ActivityIndicator';
const Item = ({ item, theme }) => {
interface IMessageBoxCommandsPreviewItem {
item: {
type: string;
id: string;
value: string;
};
theme: string;
}
const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
const context = useContext(MessageboxContext);
const { onPressCommandPreview } = context;
const [loading, setLoading] = useState(true);
@ -18,29 +26,21 @@ const Item = ({ item, theme }) => {
<TouchableOpacity
style={styles.commandPreview}
onPress={() => onPressCommandPreview(item)}
testID={`command-preview-item${ item.id }`}
>
{item.type === 'image'
? (
testID={`command-preview-item${item.id}`}>
{item.type === 'image' ? (
<FastImage
style={styles.commandPreviewImage}
source={{ uri: item.value }}
resizeMode={FastImage.resizeMode.cover}
onLoadStart={() => setLoading(true)}
onLoad={() => setLoading(false)}
>
onLoad={() => setLoading(false)}>
{loading ? <ActivityIndicator theme={theme} /> : null}
</FastImage>
)
: <CustomIcon name='attach' size={36} color={themes[theme].actionTintColor} />
}
) : (
<CustomIcon name='attach' size={36} color={themes[theme].actionTintColor} />
)}
</TouchableOpacity>
);
};
Item.propTypes = {
item: PropTypes.object,
theme: PropTypes.string
};
export default Item;

46
app/containers/MessageBox/CommandsPreview/index.js
View File

@ -1,46 +0,0 @@
import React from 'react';
import { FlatList } from 'react-native';
import PropTypes from 'prop-types';
import { dequal } from 'dequal';
import Item from './Item';
import styles from '../styles';
import { themes } from '../../../constants/colors';
import { withTheme } from '../../../theme';
const CommandsPreview = React.memo(({ theme, commandPreview, showCommandPreview }) => {
if (!showCommandPreview) {
return null;
}
return (
<FlatList
testID='commandbox-container'
style={[styles.mentionList, { backgroundColor: themes[theme].messageboxBackground }]}
data={commandPreview}
renderItem={({ item }) => <Item item={item} theme={theme} />}
keyExtractor={item => item.id}
keyboardShouldPersistTaps='always'
horizontal
showsHorizontalScrollIndicator={false}
/>
);
}, (prevProps, nextProps) => {
if (prevProps.theme !== nextProps.theme) {
return false;
}
if (prevProps.showCommandPreview !== nextProps.showCommandPreview) {
return false;
}
if (!dequal(prevProps.commandPreview, nextProps.commandPreview)) {
return false;
}
return true;
});
CommandsPreview.propTypes = {
commandPreview: PropTypes.array,
showCommandPreview: PropTypes.bool,
theme: PropTypes.string
};
export default withTheme(CommandsPreview);

48
app/containers/MessageBox/CommandsPreview/index.tsx Normal file
View File

@ -0,0 +1,48 @@
import React from 'react';
import { FlatList } from 'react-native';
import { dequal } from 'dequal';
import Item from './Item';
import styles from '../styles';
import { themes } from '../../../constants/colors';
import { withTheme } from '../../../theme';
interface IMessageBoxCommandsPreview {
commandPreview: [];
showCommandPreview: boolean;
theme: string;
}
const CommandsPreview = React.memo(
({ theme, commandPreview, showCommandPreview }: IMessageBoxCommandsPreview) => {
if (!showCommandPreview) {
return null;
}
return (
<FlatList
testID='commandbox-container'
style={[styles.mentionList, { backgroundColor: themes[theme].messageboxBackground }]}
data={commandPreview}
renderItem={({ item }) => <Item item={item} theme={theme} />}
keyExtractor={(item: any) => item.id}
keyboardShouldPersistTaps='always'
horizontal
showsHorizontalScrollIndicator={false}
/>
);
},
(prevProps, nextProps) => {
if (prevProps.theme !== nextProps.theme) {
return false;
}
if (prevProps.showCommandPreview !== nextProps.showCommandPreview) {
return false;
}
if (!dequal(prevProps.commandPreview, nextProps.commandPreview)) {
return false;
}
return true;
}
);
export default withTheme(CommandsPreview);

4
app/containers/MessageBox/Context.js
View File

@ -1,4 +0,0 @@
import React from 'react';
const MessageboxContext = React.createContext();
export default MessageboxContext;

5
app/containers/MessageBox/Context.ts Normal file
View File

@ -0,0 +1,5 @@
import React from 'react';
// @ts-ignore
const MessageboxContext = React.createContext<any>();
export default MessageboxContext;

21
app/containers/MessageBox/EmojiKeyboard.js → app/containers/MessageBox/EmojiKeyboard.tsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import { View } from 'react-native';
import { KeyboardRegistry } from 'react-native-ui-lib/keyboard';
import PropTypes from 'prop-types';
import store from '../../lib/createStore';
import EmojiPicker from '../EmojiPicker';
@ -9,25 +8,29 @@ import styles from './styles';
import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
export default class EmojiKeyboard extends React.PureComponent {
static propTypes = {
theme: PropTypes.string
};
interface IMessageBoxEmojiKeyboard {
theme: string;
}
constructor(props) {
export default class EmojiKeyboard extends React.PureComponent<IMessageBoxEmojiKeyboard, any> {
private readonly baseUrl: any;
constructor(props: IMessageBoxEmojiKeyboard) {
super(props);
const state = store.getState();
this.baseUrl = state.share.server.server || state.server.server;
}
onEmojiSelected = (emoji) => {
onEmojiSelected = (emoji: any) => {
KeyboardRegistry.onItemSelected('EmojiKeyboard', { emoji });
}
};
render() {
const { theme } = this.props;
return (
<View style={[styles.emojiKeyboardContainer, { borderTopColor: themes[theme].borderColor }]} testID='messagebox-keyboard-emoji'>
<View
style={[styles.emojiKeyboardContainer, { borderTopColor: themes[theme].borderColor }]}
testID='messagebox-keyboard-emoji'>
<EmojiPicker onEmojiSelected={this.onEmojiSelected} baseUrl={this.baseUrl} />
</View>
);

31
app/containers/MessageBox/LeftButtons.android.js
View File

@ -1,31 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { CancelEditingButton, ToggleEmojiButton } from './buttons';
const LeftButtons = React.memo(({
theme, showEmojiKeyboard, editing, editCancel, openEmoji, closeEmoji
}) => {
if (editing) {
return <CancelEditingButton onPress={editCancel} theme={theme} />;
}
return (
<ToggleEmojiButton
show={showEmojiKeyboard}
open={openEmoji}
close={closeEmoji}
theme={theme}
/>
);
});
LeftButtons.propTypes = {
theme: PropTypes.string,
showEmojiKeyboard: PropTypes.bool,
openEmoji: PropTypes.func.isRequired,
closeEmoji: PropTypes.func.isRequired,
editing: PropTypes.bool,
editCancel: PropTypes.func.isRequired
};
export default LeftButtons;

23
app/containers/MessageBox/LeftButtons.android.tsx Normal file
View File

@ -0,0 +1,23 @@
import React from 'react';
import { CancelEditingButton, ToggleEmojiButton } from './buttons';
interface IMessageBoxLeftButtons {
theme: string;
showEmojiKeyboard: boolean;
openEmoji(): void;
closeEmoji(): void;
editing: boolean;
editCancel(): void;
}
const LeftButtons = React.memo(
({ theme, showEmojiKeyboard, editing, editCancel, openEmoji, closeEmoji }: IMessageBoxLeftButtons) => {
if (editing) {
return <CancelEditingButton onPress={editCancel} theme={theme} />;
}
return <ToggleEmojiButton show={showEmojiKeyboard} open={openEmoji} close={closeEmoji} theme={theme} />;
}
);
export default LeftButtons;

28
app/containers/MessageBox/LeftButtons.ios.js
View File

@ -1,28 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import { CancelEditingButton, ActionsButton } from './buttons';
import styles from './styles';
const LeftButtons = React.memo(({
theme, showMessageBoxActions, editing, editCancel, isActionsEnabled
}) => {
if (editing) {
return <CancelEditingButton onPress={editCancel} theme={theme} />;
}
if (isActionsEnabled) {
return <ActionsButton onPress={showMessageBoxActions} theme={theme} />;
}
return <View style={styles.buttonsWhitespace} />;
});
LeftButtons.propTypes = {
theme: PropTypes.string,
showMessageBoxActions: PropTypes.func.isRequired,
editing: PropTypes.bool,
editCancel: PropTypes.func.isRequired,
isActionsEnabled: PropTypes.bool
};
export default LeftButtons;

27
app/containers/MessageBox/LeftButtons.ios.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import { View } from 'react-native';
import { ActionsButton, CancelEditingButton } from './buttons';
import styles from './styles';
interface IMessageBoxLeftButtons {
theme: string;
showMessageBoxActions(): void;
editing: boolean;
editCancel(): void;
isActionsEnabled: boolean;
}
const LeftButtons = React.memo(
({ theme, showMessageBoxActions, editing, editCancel, isActionsEnabled }: IMessageBoxLeftButtons) => {
if (editing) {
return <CancelEditingButton onPress={editCancel} theme={theme} />;
}
if (isActionsEnabled) {
return <ActionsButton onPress={showMessageBoxActions} theme={theme} />;
}
return <View style={styles.buttonsWhitespace} />;
}
);
export default LeftButtons;

22
app/containers/MessageBox/Mentions/FixedMentionItem.js → app/containers/MessageBox/Mentions/FixedMentionItem.tsx
View File

@ -1,12 +1,19 @@
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import PropTypes from 'prop-types';
import { Text, TouchableOpacity } from 'react-native';
import styles from '../styles';
import I18n from '../../../i18n';
import { themes } from '../../../constants/colors';
const FixedMentionItem = ({ item, onPress, theme }) => (
interface IMessageBoxFixedMentionItem {
item: {
username: string;
};
onPress: Function;
theme: string;
}
const FixedMentionItem = ({ item, onPress, theme }: IMessageBoxFixedMentionItem) => (
<TouchableOpacity
style={[
styles.mentionItem,
@ -15,8 +22,7 @@ const FixedMentionItem = ({ item, onPress, theme }) => (
borderTopColor: themes[theme].separatorColor
}
]}
onPress={() => onPress(item)}
>
onPress={() => onPress(item)}>
<Text style={[styles.fixedMentionAvatar, { color: themes[theme].titleText }]}>{item.username}</Text>
<Text style={[styles.mentionText, { color: themes[theme].titleText }]}>
{item.username === 'here' ? I18n.t('Notify_active_in_this_room') : I18n.t('Notify_all_in_this_room')}
@ -24,10 +30,4 @@ const FixedMentionItem = ({ item, onPress, theme }) => (
</TouchableOpacity>
);
FixedMentionItem.propTypes = {
item: PropTypes.object,
onPress: PropTypes.func,
theme: PropTypes.string
};
export default FixedMentionItem;

21
app/containers/MessageBox/Mentions/MentionEmoji.js → app/containers/MessageBox/Mentions/MentionEmoji.tsx
View File

@ -6,25 +6,20 @@ import shortnameToUnicode from '../../../utils/shortnameToUnicode';
import styles from '../styles';
import MessageboxContext from '../Context';
import CustomEmoji from '../../EmojiPicker/CustomEmoji';
import { IEmoji } from '../../EmojiPicker/interfaces';
const MentionEmoji = ({ item }) => {
interface IMessageBoxMentionEmoji {
item: IEmoji;
}
const MentionEmoji = ({ item }: IMessageBoxMentionEmoji) => {
const context = useContext(MessageboxContext);
const { baseUrl } = context;
if (item.name) {
return (
<CustomEmoji
style={styles.mentionItemCustomEmoji}
emoji={item}
baseUrl={baseUrl}
/>
);
return <CustomEmoji style={styles.mentionItemCustomEmoji} emoji={item} baseUrl={baseUrl} />;
}
return (
<Text style={styles.mentionItemEmoji}>
{shortnameToUnicode(`:${ item }:`)}
</Text>
);
return <Text style={styles.mentionItemEmoji}>{shortnameToUnicode(`:${item}:`)}</Text>;
};
MentionEmoji.propTypes = {

43
app/containers/MessageBox/Mentions/MentionItem.js → app/containers/MessageBox/Mentions/MentionItem.tsx
View File

@ -1,25 +1,32 @@
import React, { useContext } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import PropTypes from 'prop-types';
import { Text, TouchableOpacity } from 'react-native';
import styles from '../styles';
import Avatar from '../../Avatar';
import MessageboxContext from '../Context';
import FixedMentionItem from './FixedMentionItem';
import MentionEmoji from './MentionEmoji';
import {
MENTIONS_TRACKING_TYPE_EMOJIS,
MENTIONS_TRACKING_TYPE_COMMANDS
} from '../constants';
import { MENTIONS_TRACKING_TYPE_COMMANDS, MENTIONS_TRACKING_TYPE_EMOJIS } from '../constants';
import { themes } from '../../../constants/colors';
import { IEmoji } from '../../EmojiPicker/interfaces';
const MentionItem = ({
item, trackingType, theme
}) => {
interface IMessageBoxMentionItem {
item: {
name: string;
command: string;
username: string;
t: string;
id: string;
} & IEmoji;
trackingType: string;
theme: string;
}
const MentionItem = ({ item, trackingType, theme }: IMessageBoxMentionItem) => {
const context = useContext(MessageboxContext);
const { onPressMention } = context;
const defineTestID = (type) => {
const defineTestID = (type: string) => {
switch (type) {
case MENTIONS_TRACKING_TYPE_EMOJIS:
return `mention-item-${item.name || item}`;
@ -38,12 +45,7 @@ const MentionItem = ({
let content = (
<>
<Avatar
style={styles.avatar}
text={item.username || item.name}
size={30}
type={item.t}
/>
<Avatar style={styles.avatar} text={item.username || item.name} size={30} type={item.t} />
<Text style={[styles.mentionText, { color: themes[theme].titleText }]}>{item.username || item.name || item}</Text>
</>
);
@ -76,17 +78,10 @@ const MentionItem = ({
}
]}
onPress={() => onPressMention(item)}
testID={testID}
>
testID={testID}>
{content}
</TouchableOpacity>
);
};
MentionItem.propTypes = {
item: PropTypes.object,
trackingType: PropTypes.string,
theme: PropTypes.string
};
export default MentionItem;

45
app/containers/MessageBox/Mentions/index.js
View File

@ -1,45 +0,0 @@
import React from 'react';
import { FlatList, View } from 'react-native';
import PropTypes from 'prop-types';
import { dequal } from 'dequal';
import styles from '../styles';
import MentionItem from './MentionItem';
import { themes } from '../../../constants/colors';
const Mentions = React.memo(({ mentions, trackingType, theme }) => {
if (!trackingType) {
return null;
}
return (
<View testID='messagebox-container'>
<FlatList
style={[styles.mentionList, { backgroundColor: themes[theme].auxiliaryBackground }]}
data={mentions}
extraData={mentions}
renderItem={({ item }) => <MentionItem item={item} trackingType={trackingType} theme={theme} />}
keyExtractor={item => item.rid || item.name || item.command || item}
keyboardShouldPersistTaps='always'
/>
</View>
);
}, (prevProps, nextProps) => {
if (prevProps.theme !== nextProps.theme) {
return false;
}
if (prevProps.trackingType !== nextProps.trackingType) {
return false;
}
if (!dequal(prevProps.mentions, nextProps.mentions)) {
return false;
}
return true;
});
Mentions.propTypes = {
mentions: PropTypes.array,
trackingType: PropTypes.string,
theme: PropTypes.string
};
export default Mentions;

47
app/containers/MessageBox/Mentions/index.tsx Normal file
View File

@ -0,0 +1,47 @@
import React from 'react';
import { FlatList, View } from 'react-native';
import { dequal } from 'dequal';
import styles from '../styles';
import MentionItem from './MentionItem';
import { themes } from '../../../constants/colors';
interface IMessageBoxMentions {
mentions: [];
trackingType: string;
theme: string;
}
const Mentions = React.memo(
({ mentions, trackingType, theme }: IMessageBoxMentions) => {
if (!trackingType) {
return null;
}
return (
<View testID='messagebox-container'>
<FlatList
style={[styles.mentionList, { backgroundColor: themes[theme].auxiliaryBackground }]}
data={mentions}
extraData={mentions}
renderItem={({ item }) => <MentionItem item={item} trackingType={trackingType} theme={theme} />}
keyExtractor={(item: any) => item.rid || item.name || item.command || item}
keyboardShouldPersistTaps='always'
/>
</View>
);
},
(prevProps, nextProps) => {
if (prevProps.theme !== nextProps.theme) {
return false;
}
if (prevProps.trackingType !== nextProps.trackingType) {
return false;
}
if (!dequal(prevProps.mentions, nextProps.mentions)) {
return false;
}
return true;
}
);
export default Mentions;

73
app/containers/MessageBox/RecordAudio.js → app/containers/MessageBox/RecordAudio.tsx
View File

@ -1,16 +1,21 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, Text } from 'react-native';
import { Text, View } from 'react-native';
import { Audio } from 'expo-av';
import { BorderlessButton } from 'react-native-gesture-handler';
import { getInfoAsync } from 'expo-file-system';
import { deactivateKeepAwake, activateKeepAwake } from 'expo-keep-awake';
import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
import styles from './styles';
import I18n from '../../i18n';
import { themes } from '../../constants/colors';
import { CustomIcon } from '../../lib/Icons';
import { logEvent, events } from '../../utils/log';
import { events, logEvent } from '../../utils/log';
interface IMessageBoxRecordAudioProps {
theme: string;
recordingCallback: Function;
onFinish: Function;
}
const RECORDING_EXTENSION = '.aac';
const RECORDING_SETTINGS = {
@ -41,22 +46,24 @@ const RECORDING_MODE = {
interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX
};
const formatTime = function(seconds) {
let minutes = Math.floor(seconds / 60);
const formatTime = function (seconds: any) {
let minutes: any = Math.floor(seconds / 60);
seconds %= 60;
if (minutes < 10) { minutes = `0${ minutes }`; }
if (seconds < 10) { seconds = `0${ seconds }`; }
if (minutes < 10) {
minutes = `0${minutes}`;
}
if (seconds < 10) {
seconds = `0${seconds}`;
}
return `${minutes}:${seconds}`;
};
export default class RecordAudio extends React.PureComponent {
static propTypes = {
theme: PropTypes.string,
recordingCallback: PropTypes.func,
onFinish: PropTypes.func
}
export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAudioProps, any> {
private isRecorderBusy: boolean;
constructor(props) {
private recording: any;
constructor(props: IMessageBoxRecordAudioProps) {
super(props);
this.isRecorderBusy = false;
this.state = {
@ -94,14 +101,14 @@ export default class RecordAudio extends React.PureComponent {
// Do nothing
}
return false;
}
};
onRecordingStatusUpdate = (status) => {
onRecordingStatusUpdate = (status: any) => {
this.setState({
isRecording: status.isRecording,
recordingDurationMillis: status.durationMillis
});
}
};
startRecordingAudio = async () => {
logEvent(events.ROOM_AUDIO_RECORD);
@ -183,9 +190,9 @@ export default class RecordAudio extends React.PureComponent {
onPress={this.startRecordingAudio}
style={styles.actionButton}
testID='messagebox-send-audio'
// @ts-ignore
accessibilityLabel={I18n.t('Send_audio_message')}
accessibilityTraits='button'
>
accessibilityTraits='button'>
<CustomIcon name='microphone' size={24} color={themes[theme].auxiliaryTintColor} />
</BorderlessButton>
);
@ -196,33 +203,21 @@ export default class RecordAudio extends React.PureComponent {
<View style={styles.textArea}>
<BorderlessButton
onPress={this.cancelRecordingAudio}
// @ts-ignore
accessibilityLabel={I18n.t('Cancel_recording')}
accessibilityTraits='button'
style={styles.actionButton}
>
<CustomIcon
size={24}
color={themes[theme].dangerColor}
name='close'
/>
style={styles.actionButton}>
<CustomIcon size={24} color={themes[theme].dangerColor} name='close' />
</BorderlessButton>
<Text
style={[styles.recordingCancelText, { color: themes[theme].titleText }]}
>
{this.duration}
</Text>
<Text style={[styles.recordingCancelText, { color: themes[theme].titleText }]}>{this.duration}</Text>
</View>
<BorderlessButton
onPress={this.finishRecordingAudio}
// @ts-ignore
accessibilityLabel={I18n.t('Finish_recording')}
accessibilityTraits='button'
style={styles.actionButton}
>
<CustomIcon
size={24}
color={themes[theme].successColor}
name='check'
/>
style={styles.actionButton}>
<CustomIcon size={24} color={themes[theme].successColor} name='check' />
</BorderlessButton>
</View>
);

97
app/containers/MessageBox/ReplyPreview.js
View File

@ -1,97 +0,0 @@
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import moment from 'moment';
import { connect } from 'react-redux';
import Markdown from '../markdown';
import { CustomIcon } from '../../lib/Icons';
import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors';
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
paddingTop: 10
},
messageContainer: {
flex: 1,
marginHorizontal: 10,
paddingHorizontal: 15,
paddingVertical: 10,
borderRadius: 4
},
header: {
flexDirection: 'row',
alignItems: 'center'
},
username: {
fontSize: 16,
...sharedStyles.textMedium
},
time: {
fontSize: 12,
lineHeight: 16,
marginLeft: 6,
...sharedStyles.textRegular,
fontWeight: '300'
},
close: {
marginRight: 10
}
});
const ReplyPreview = React.memo(({
message, Message_TimeFormat, baseUrl, username, replying, getCustomEmoji, close, theme, useRealName
}) => {
if (!replying) {
return null;
}
const time = moment(message.ts).format(Message_TimeFormat);
return (
<View
style={[
styles.container,
{ backgroundColor: themes[theme].messageboxBackground }
]}
>
<View style={[styles.messageContainer, { backgroundColor: themes[theme].chatComponentBackground }]}>
<View style={styles.header}>
<Text style={[styles.username, { color: themes[theme].tintColor }]}>{useRealName ? message.u?.name : message.u?.username}</Text>
<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
</View>
<Markdown
msg={message.msg}
baseUrl={baseUrl}
username={username}
getCustomEmoji={getCustomEmoji}
numberOfLines={1}
preview
theme={theme}
/>
</View>
<CustomIcon name='close' color={themes[theme].auxiliaryText} size={20} style={styles.close} onPress={close} />
</View>
);
}, (prevProps, nextProps) => prevProps.replying === nextProps.replying && prevProps.theme === nextProps.theme && prevProps.message.id === nextProps.message.id);
ReplyPreview.propTypes = {
replying: PropTypes.bool,
message: PropTypes.object.isRequired,
Message_TimeFormat: PropTypes.string.isRequired,
close: PropTypes.func.isRequired,
baseUrl: PropTypes.string.isRequired,
username: PropTypes.string.isRequired,
getCustomEmoji: PropTypes.func,
theme: PropTypes.string,
useRealName: PropTypes.bool
};
const mapStateToProps = state => ({
Message_TimeFormat: state.settings.Message_TimeFormat,
baseUrl: state.server.server,
useRealName: state.settings.UI_Use_Real_Name
});
export default connect(mapStateToProps)(ReplyPreview);

112
app/containers/MessageBox/ReplyPreview.tsx Normal file
View File

@ -0,0 +1,112 @@
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import moment from 'moment';
import { connect } from 'react-redux';
import Markdown from '../markdown';
import { CustomIcon } from '../../lib/Icons';
import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors';
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
paddingTop: 10
},
messageContainer: {
flex: 1,
marginHorizontal: 10,
paddingHorizontal: 15,
paddingVertical: 10,
borderRadius: 4
},
header: {
flexDirection: 'row',
alignItems: 'center'
},
username: {
fontSize: 16,
...sharedStyles.textMedium
},
time: {
fontSize: 12,
lineHeight: 16,
marginLeft: 6,
...sharedStyles.textRegular,
fontWeight: '300'
},
close: {
marginRight: 10
}
});
interface IMessageBoxReplyPreview {
replying: boolean;
message: {
ts: Date;
msg: string;
u: any;
};
Message_TimeFormat: string;
close(): void;
baseUrl: string;
username: string;
getCustomEmoji: Function;
theme: string;
useRealName: boolean;
}
const ReplyPreview = React.memo(
({
message,
Message_TimeFormat,
baseUrl,
username,
replying,
getCustomEmoji,
close,
theme,
useRealName
}: IMessageBoxReplyPreview) => {
if (!replying) {
return null;
}
const time = moment(message.ts).format(Message_TimeFormat);
return (
<View style={[styles.container, { backgroundColor: themes[theme].messageboxBackground }]}>
<View style={[styles.messageContainer, { backgroundColor: themes[theme].chatComponentBackground }]}>
<View style={styles.header}>
<Text style={[styles.username, { color: themes[theme].tintColor }]}>
{useRealName ? message.u?.name : message.u?.username}
</Text>
<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
</View>
{/* @ts-ignore*/}
<Markdown
msg={message.msg}
baseUrl={baseUrl}
username={username}
getCustomEmoji={getCustomEmoji}
numberOfLines={1}
preview
theme={theme}
/>
</View>
<CustomIcon name='close' color={themes[theme].auxiliaryText} size={20} style={styles.close} onPress={close} />
</View>
);
},
(prevProps: any, nextProps: any) =>
prevProps.replying === nextProps.replying &&
prevProps.theme === nextProps.theme &&
prevProps.message.id === nextProps.message.id
);
const mapStateToProps = (state: any) => ({
Message_TimeFormat: state.settings.Message_TimeFormat,
baseUrl: state.server.server,
useRealName: state.settings.UI_Use_Real_Name
});
export default connect(mapStateToProps)(ReplyPreview);

29
app/containers/MessageBox/RightButtons.android.js
View File

@ -1,29 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import { SendButton, ActionsButton } from './buttons';
import styles from './styles';
const RightButtons = React.memo(({
theme, showSend, submit, showMessageBoxActions, isActionsEnabled
}) => {
if (showSend) {
return <SendButton onPress={submit} theme={theme} />;
}
if (isActionsEnabled) {
return <ActionsButton onPress={showMessageBoxActions} theme={theme} />;
}
return <View style={styles.buttonsWhitespace} />;
});
RightButtons.propTypes = {
theme: PropTypes.string,
showSend: PropTypes.bool,
submit: PropTypes.func.isRequired,
showMessageBoxActions: PropTypes.func.isRequired,
isActionsEnabled: PropTypes.bool
};
export default RightButtons;

28
app/containers/MessageBox/RightButtons.android.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from 'react';
import { View } from 'react-native';
import { ActionsButton, SendButton } from './buttons';
import styles from './styles';
interface IMessageBoxRightButtons {
theme: string;
showSend: boolean;
submit(): void;
showMessageBoxActions(): void;
isActionsEnabled: boolean;
}
const RightButtons = React.memo(
({ theme, showSend, submit, showMessageBoxActions, isActionsEnabled }: IMessageBoxRightButtons) => {
if (showSend) {
return <SendButton onPress={submit} theme={theme} />;
}
if (isActionsEnabled) {
return <ActionsButton onPress={showMessageBoxActions} theme={theme} />;
}
return <View style={styles.buttonsWhitespace} />;
}
);
export default RightButtons;

Some files were not shown because too many files have changed in this diff Show More