Merge branch 'develop' into chore.hooks-app-index
This commit is contained in:
Reinaldo Neto
commit
54fa594244
|
|
@ -23,4 +23,8 @@ SECURITY.md
|
|||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
.storybook/
|
||||
|
||||
app/i18n/locales/
|
||||
app/containers/CustomIcon/mappedIcons.js
|
||||
app/containers/CustomIcon/selection.json
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import { getStorybookUI } from '@storybook/react-native';
|
||||
import './storybook.requires';
|
||||
|
||||
import RNBootSplash from 'react-native-bootsplash';
|
||||
|
||||
import { selectServerRequest } from '../app/actions/server';
|
||||
import { mockedStore as store } from '../app/reducers/mockedStore';
|
||||
import database from '../app/lib/database';
|
||||
|
||||
RNBootSplash.hide();
|
||||
|
||||
const baseUrl = 'https://open.rocket.chat';
|
||||
store.dispatch(selectServerRequest(baseUrl));
|
||||
database.setActiveDB(baseUrl);
|
||||
|
||||
const StorybookUIRoot = getStorybookUI({});
|
||||
export default StorybookUIRoot;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
module.exports = {
|
||||
stories: ['../app/**/*.stories.?(ts|tsx|js|jsx)'],
|
||||
addons: []
|
||||
};
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
|
||||
import { themes } from '../app/lib/constants';
|
||||
import MessageContext from '../app/containers/message/Context';
|
||||
import { mockedStore as store } from '../app/reducers/mockedStore';
|
||||
|
||||
export const decorators = [
|
||||
Story => (
|
||||
<Provider store={store}>
|
||||
<MessageContext.Provider
|
||||
value={{
|
||||
user: {
|
||||
id: 'y8bd77ptZswPj3EW8',
|
||||
username: 'diego.mello',
|
||||
token: 'abc'
|
||||
},
|
||||
baseUrl: 'https://open.rocket.chat',
|
||||
onPress: () => {},
|
||||
onLongPress: () => {},
|
||||
reactionInit: () => {},
|
||||
onErrorPress: () => {},
|
||||
replyBroadcast: () => {},
|
||||
onReactionPress: () => {},
|
||||
onDiscussionPress: () => {},
|
||||
onReactionLongPress: () => {},
|
||||
threadBadgeColor: themes.light.tunreadColor
|
||||
}}
|
||||
>
|
||||
<Story />
|
||||
</MessageContext.Provider>
|
||||
</Provider>
|
||||
)
|
||||
];
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
/* do not change this file, it is auto generated by storybook. */
|
||||
|
||||
import {
|
||||
configure,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
addArgsEnhancer,
|
||||
} from "@storybook/react-native";
|
||||
|
||||
import { decorators, parameters } from "./preview";
|
||||
|
||||
if (decorators) {
|
||||
decorators.forEach((decorator) => addDecorator(decorator));
|
||||
}
|
||||
|
||||
if (parameters) {
|
||||
addParameters(parameters);
|
||||
}
|
||||
|
||||
const getStories = () => {
|
||||
return [
|
||||
require("../app/containers/Avatar/Avatar.stories.tsx"),
|
||||
require("../app/containers/BackgroundContainer/index.stories.tsx"),
|
||||
require("../app/containers/Button/Button.stories.tsx"),
|
||||
require("../app/containers/HeaderButton/HeaderButtons.stories.tsx"),
|
||||
require("../app/containers/List/List.stories.tsx"),
|
||||
require("../app/containers/LoginServices/LoginServices.stories.tsx"),
|
||||
require("../app/containers/markdown/Markdown.stories.tsx"),
|
||||
require("../app/containers/markdown/new/NewMarkdown.stories.tsx"),
|
||||
require("../app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.stories.tsx"),
|
||||
require("../app/containers/message/Message.stories.tsx"),
|
||||
require("../app/containers/RoomHeader/RoomHeader.stories.tsx"),
|
||||
require("../app/containers/RoomItem/RoomItem.stories.tsx"),
|
||||
require("../app/containers/SearchBox/SearchBox.stories.tsx"),
|
||||
require("../app/containers/ServerItem/ServerItem.stories.tsx"),
|
||||
require("../app/containers/TextInput/TextInput.stories.tsx"),
|
||||
require("../app/containers/UIKit/UiKitMessage.stories.tsx"),
|
||||
require("../app/containers/UIKit/UiKitModal.stories.tsx"),
|
||||
require("../app/containers/UnreadBadge/UnreadBadge.stories.tsx"),
|
||||
require("../app/views/CannedResponsesListView/CannedResponseItem.stories.tsx"),
|
||||
require("../app/views/DiscussionsView/Item.stories.tsx"),
|
||||
require("../app/views/RoomView/LoadMore/LoadMore.stories.tsx"),
|
||||
require("../app/views/ThreadMessagesView/Item.stories.tsx"),
|
||||
];
|
||||
};
|
||||
|
||||
configure(getStories, module, false);
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Avatar Avatar by path 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
exports[`Storyshots Avatar Avatar Path 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
|
||||
exports[`Storyshots Avatar Avatar by roomId 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/room/devWBbYr7inwupPqK?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
exports[`Storyshots Avatar Avatar Room Id 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/room/devWBbYr7inwupPqK?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
|
||||
exports[`Storyshots Avatar Avatar by text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
exports[`Storyshots Avatar Avatar Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
|
||||
exports[`Storyshots Avatar Avatar by url 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
exports[`Storyshots Avatar Avatar Url 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
|
||||
exports[`Storyshots Avatar Channel 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/@general?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
|
||||
exports[`Storyshots Avatar Children 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"theme\\":\\"light\\",\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#cbced1\\"},[{\\"width\\":24,\\"height\\":24,\\"textAlignVertical\\":\\"center\\"},[{\\"position\\":\\"absolute\\",\\"bottom\\":-2,\\"right\\":-2,\\"borderRadius\\":10},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}"`;
|
||||
exports[`Storyshots Avatar Children 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#f5455c\\"},[{\\"width\\":24,\\"height\\":24,\\"textAlignVertical\\":\\"center\\"},[{\\"position\\":\\"absolute\\",\\"bottom\\":-2,\\"right\\":-2,\\"borderRadius\\":10}]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}"`;
|
||||
|
||||
exports[`Storyshots Avatar Custom borderRadius 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
exports[`Storyshots Avatar Custom Border Radius 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
|
||||
exports[`Storyshots Avatar Custom style 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},{\\"padding\\":16}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
exports[`Storyshots Avatar Custom Style 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},{\\"padding\\":16}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
|
||||
exports[`Storyshots Avatar Direct 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
|
||||
|
|
@ -28,4 +28,4 @@ exports[`Storyshots Avatar With ETag 1`] = `"{\\"type\\":\\"View\\",\\"props\\":
|
|||
|
||||
exports[`Storyshots Avatar Without E Tag 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/djorkaeff.alexandre?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
|
||||
exports[`Storyshots Avatar Wrong server 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://google.com/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
exports[`Storyshots Avatar Wrong Server 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://google.com/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots BackgroundContainer Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer Black Theme Loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_black\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#f9f9f9\\"},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer Black Theme Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_black\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#f9f9f9\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer Dark Theme Loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_dark\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#f9f9f9\\"},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer Dark Theme Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_dark\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#f9f9f9\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer Loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#6C727A\\"},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer Long Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Text here\\"]}]}"`;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Button Custom Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"purple\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"yellow\\",\\"fontSize\\":18},[{\\"textAlign\\":\\"left\\"}]],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
|
||||
|
||||
exports[`Storyshots Button Disabled Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
|
||||
|
||||
exports[`Storyshots Button Disabled Loading Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#ffffff\\"},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots Button Loading Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#ffffff\\"},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots Button Primary Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
|
||||
|
||||
exports[`Storyshots Button Secondary Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots HeaderButtons Badge 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
|
||||
|
||||
exports[`Storyshots HeaderButtons Common 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
|
||||
|
||||
exports[`Storyshots HeaderButtons Icons 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
|
||||
|
||||
exports[`Storyshots HeaderButtons Themes 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
|
||||
|
||||
exports[`Storyshots HeaderButtons Title 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,5 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Login Services Separators 1`] = `"[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"More options\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":0,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#1d74f5\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"More options\\"},\\"children\\":[\\"More options\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginVertical\\":24}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":14,\\"marginRight\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"OR\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Less options\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":0,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#1d74f5\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Less options\\"},\\"children\\":[\\"Less options\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginVertical\\":24}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":14,\\"marginRight\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"OR\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null}]}]"`;
|
||||
|
||||
exports[`Storyshots Login Services Service List 1`] = `"[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"github\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"gitlab\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"google\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"apple\\"]}]}]}]"`;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,3 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots SearchBox Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2f343d\\"},[{\\"position\\":\\"absolute\\",\\"top\\":14},{\\"right\\":15}],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;
|
||||
exports[`Storyshots SearchBox Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2f343d\\"},[{\\"position\\":\\"absolute\\",\\"top\\":14},{\\"right\\":15}],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,3 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots TextInput Short And Long 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingHorizontal\\":14}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"},null]},\\"children\\":[\\"Short Text\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,null,{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"placeholder\\",\\"placeholder\\":\\"placeholder\\",\\"value\\":\\"Rocket.Chat\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"},null]},\\"children\\":[\\"Long Text\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,null,{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"placeholder\\",\\"placeholder\\":\\"placeholder\\",\\"value\\":\\"https://open.rocket.chat/images/logo/android-chrome-512x512.png\\"},\\"children\\":null}]}]}]}"`;
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots UIKit/UiKitMessage Action - Buttons 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitMessage Action - Select 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitMessage Context 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitMessage Fields 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitMessage Image 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitMessage Section + DatePicker 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitMessage Section + Markdown List 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitMessage Section + Multi Select 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitMessage Section + Overflow 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitMessage Section + Select 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitMessage Section + button 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitMessage Section + image 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitMessage Section 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots UIKit/UiKitModal Modal - Actions 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitModal Modal - Contexts and Dividers 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitModal Modal - DatePicker with error 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitModal Modal - Form Input 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitModal Modal - Form TextArea 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitModal Modal - Images 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitModal Modal - Input with error 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitModal Modal - Multilne with error 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitModal Modal - Section and Accessories 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots UIKit/UiKitModal Modal - Section and Selects 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,3 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots CollapsibleQuote Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"collapsibleQuoteTouchable-Engineering (9 today)\\",\\"hitSlop\\":{\\"top\\":4,\\"right\\":4,\\"bottom\\":4,\\"left\\":4},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"minHeight\\":40,\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderLeftColor\\":\\"#CBCED1\\",\\"borderTopColor\\":\\"#e1e5e8\\",\\"borderRightColor\\":\\"#e1e5e8\\",\\"borderBottomColor\\":\\"#e1e5e8\\",\\"borderLeftWidth\\":2,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"padding\\":8}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Engineering (9 today)\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":20,\\"height\\":20,\\"right\\":8,\\"top\\":8,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":22,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}"`;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,23 +1,24 @@
|
|||
/* eslint-disable */
|
||||
import AsyncStorage from '@react-native-community/async-storage';
|
||||
import { NativeModules } from 'react-native';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { NativeModules, LogBox } from 'react-native';
|
||||
import Reactotron from 'reactotron-react-native';
|
||||
import { reactotronRedux } from 'reactotron-redux';
|
||||
import sagaPlugin from 'reactotron-redux-saga';
|
||||
|
||||
if (__DEV__) {
|
||||
const scriptURL = NativeModules.SourceCode.scriptURL;
|
||||
const { scriptURL } = NativeModules.SourceCode;
|
||||
const scriptHostname = scriptURL.split('://')[1].split(':')[0];
|
||||
Reactotron.setAsyncStorageHandler(AsyncStorage)
|
||||
Reactotron.setAsyncStorageHandler?.(AsyncStorage)
|
||||
.configure({ host: scriptHostname })
|
||||
.useReactNative()
|
||||
.use(reactotronRedux())
|
||||
.use(sagaPlugin())
|
||||
.use(sagaPlugin({}))
|
||||
.connect();
|
||||
// Running on android device
|
||||
// $ adb reverse tcp:9090 tcp:9090
|
||||
Reactotron.clear();
|
||||
Reactotron.clear?.();
|
||||
// @ts-ignore
|
||||
console.warn = Reactotron.log;
|
||||
// @ts-ignore
|
||||
console.log = Reactotron.log;
|
||||
console.disableYellowBox = true;
|
||||
LogBox.ignoreAllLogs(true);
|
||||
}
|
||||
|
|
@ -2,13 +2,13 @@ import { Text } from 'react-native';
|
|||
import React from 'react';
|
||||
import { BottomSheetView, BottomSheetFlatList } from '@gorhom/bottom-sheet';
|
||||
|
||||
import { Button } from './Button';
|
||||
import I18n from '../../i18n';
|
||||
import { useTheme } from '../../theme';
|
||||
import { IActionSheetItem, Item } from './Item';
|
||||
import { TActionSheetOptionsItem } from './Provider';
|
||||
import styles from './styles';
|
||||
import * as List from '../List';
|
||||
import Touch from '../Touch';
|
||||
|
||||
interface IBottomSheetContentProps {
|
||||
hasCancel?: boolean;
|
||||
|
|
@ -18,19 +18,17 @@ interface IBottomSheetContentProps {
|
|||
}
|
||||
|
||||
const BottomSheetContent = React.memo(({ options, hasCancel, hide, children }: IBottomSheetContentProps) => {
|
||||
const { theme, colors } = useTheme();
|
||||
const { colors } = useTheme();
|
||||
|
||||
const renderFooter = () =>
|
||||
hasCancel ? (
|
||||
<Button
|
||||
<Touch
|
||||
onPress={hide}
|
||||
style={[styles.button, { backgroundColor: colors.auxiliaryBackground }]}
|
||||
// TODO: Remove when migrate Touch
|
||||
theme={theme}
|
||||
accessibilityLabel={I18n.t('Cancel')}
|
||||
>
|
||||
<Text style={[styles.text, { color: colors.bodyText }]}>{I18n.t('Cancel')}</Text>
|
||||
</Button>
|
||||
</Touch>
|
||||
) : null;
|
||||
|
||||
const renderItem = ({ item }: { item: IActionSheetItem['item'] }) => <Item item={item} hide={hide} />;
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
import React from 'react';
|
||||
import { TouchableOpacity } from 'react-native';
|
||||
|
||||
import { isAndroid } from '../../lib/methods/helpers';
|
||||
import Touch from '../../lib/methods/helpers/touch';
|
||||
|
||||
// Taken from https://github.com/rgommezz/react-native-scroll-bottom-sheet#touchables
|
||||
export const Button: typeof React.Component = isAndroid ? Touch : TouchableOpacity;
|
||||
|
|
@ -4,9 +4,9 @@ import { Text, View } from 'react-native';
|
|||
import { themes } from '../../lib/constants';
|
||||
import { CustomIcon } from '../CustomIcon';
|
||||
import { useTheme } from '../../theme';
|
||||
import { Button } from './Button';
|
||||
import { TActionSheetOptionsItem } from './Provider';
|
||||
import styles from './styles';
|
||||
import Touch from '../Touch';
|
||||
|
||||
export interface IActionSheetItem {
|
||||
item: TActionSheetOptionsItem;
|
||||
|
|
@ -21,12 +21,7 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
onPress={onPress}
|
||||
style={[styles.item, { backgroundColor: themes[theme].focusedBackground }]}
|
||||
theme={theme}
|
||||
testID={item.testID}
|
||||
>
|
||||
<Touch onPress={onPress} style={[styles.item, { backgroundColor: themes[theme].focusedBackground }]} testID={item.testID}>
|
||||
{item.icon ? (
|
||||
<CustomIcon name={item.icon} size={20} color={item.danger ? themes[theme].dangerColor : themes[theme].bodyText} />
|
||||
) : null}
|
||||
|
|
@ -42,6 +37,6 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
|
|||
</Text>
|
||||
</View>
|
||||
{item.right ? <View style={styles.rightContainer}>{item.right ? item.right() : null}</View> : null}
|
||||
</Button>
|
||||
</Touch>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
export * from './Provider';
|
||||
export * from './Button';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import Status from '../Status/Status';
|
||||
import sharedStyles from '../../views/Styles';
|
||||
import Avatar from './Avatar';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
custom: {
|
||||
padding: 16
|
||||
}
|
||||
});
|
||||
|
||||
const server = 'https://open.rocket.chat';
|
||||
|
||||
export default {
|
||||
title: 'Avatar'
|
||||
};
|
||||
|
||||
export const AvatarText = () => <Avatar text='Avatar' server={server} size={56} />;
|
||||
|
||||
export const AvatarRoomId = () => <Avatar type='p' rid='devWBbYr7inwupPqK' server={server} size={56} />;
|
||||
|
||||
export const AvatarUrl = () => (
|
||||
<Avatar
|
||||
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
|
||||
server={server}
|
||||
size={56}
|
||||
/>
|
||||
);
|
||||
|
||||
export const AvatarPath = () => <Avatar avatar='/avatar/diego.mello' server={server} size={56} />;
|
||||
|
||||
export const WithETag = () => (
|
||||
<Avatar type='d' text='djorkaeff.alexandre' avatarETag='5ag8KffJcZj9m5rCv' server={server} size={56} />
|
||||
);
|
||||
|
||||
export const WithoutETag = () => <Avatar type='d' text='djorkaeff.alexandre' server={server} size={56} />;
|
||||
|
||||
export const Emoji = () => (
|
||||
<Avatar emoji='troll' getCustomEmoji={() => ({ name: 'troll', extension: 'jpg' })} server={server} size={56} />
|
||||
);
|
||||
|
||||
export const Direct = () => <Avatar text='diego.mello' server={server} type='d' size={56} />;
|
||||
|
||||
export const Channel = () => <Avatar text='general' server={server} type='c' size={56} />;
|
||||
|
||||
export const Touchable = () => <Avatar text='Avatar' server={server} onPress={() => console.log('Pressed!')} size={56} />;
|
||||
|
||||
export const Static = () => (
|
||||
<Avatar
|
||||
avatar='https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg'
|
||||
server={server}
|
||||
isStatic
|
||||
size={56}
|
||||
/>
|
||||
);
|
||||
|
||||
export const CustomBorderRadius = () => <Avatar text='Avatar' server={server} borderRadius={28} size={56} />;
|
||||
|
||||
export const Children = () => (
|
||||
<Avatar text='Avatar' server={server} size={56}>
|
||||
<Status size={24} style={[sharedStyles.status]} status='busy' />
|
||||
</Avatar>
|
||||
);
|
||||
|
||||
export const WrongServer = () => <Avatar text='Avatar' server='https://google.com' size={56} />;
|
||||
|
||||
export const CustomStyle = () => <Avatar text='Avatar' server={server} size={56} style={styles.custom} />;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots BackgroundContainer basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer black theme - loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_black\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#f9f9f9\\"},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer black theme - text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_black\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#f9f9f9\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer dark theme - loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_dark\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#f9f9f9\\"},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer dark theme - text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_dark\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#f9f9f9\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#6C727A\\"},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer long text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
|
||||
|
||||
exports[`Storyshots BackgroundContainer text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Text here\\"]}]}"`;
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
|
||||
import { ThemeContext } from '../../theme';
|
||||
import { longText } from '../../../storybook/utils';
|
||||
import BackgroundContainer from '.';
|
||||
|
||||
const stories = storiesOf('BackgroundContainer', module);
|
||||
|
||||
stories.add('basic', () => <BackgroundContainer />);
|
||||
|
||||
stories.add('loading', () => <BackgroundContainer loading />);
|
||||
|
||||
stories.add('text', () => <BackgroundContainer text='Text here' />);
|
||||
|
||||
stories.add('long text', () => <BackgroundContainer text={longText} />);
|
||||
|
||||
const ThemeStory = ({ theme, ...props }) => (
|
||||
<ThemeContext.Provider value={{ theme }}>
|
||||
<BackgroundContainer {...props} />
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
|
||||
stories.add('dark theme - loading', () => <ThemeStory theme='dark' loading />);
|
||||
|
||||
stories.add('dark theme - text', () => <ThemeStory theme='dark' text={longText} />);
|
||||
|
||||
stories.add('black theme - loading', () => <ThemeStory theme='black' loading />);
|
||||
|
||||
stories.add('black theme - text', () => <ThemeStory theme='black' text={longText} />);
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import React from 'react';
|
||||
|
||||
import { ThemeContext, TSupportedThemes } from '../../theme';
|
||||
import { longText } from '../../../.storybook/utils';
|
||||
import BackgroundContainer, { IBackgroundContainer } from '.';
|
||||
import { themes } from '../../lib/constants';
|
||||
|
||||
export default {
|
||||
title: 'BackgroundContainer'
|
||||
};
|
||||
|
||||
export const Basic = () => <BackgroundContainer />;
|
||||
|
||||
export const Loading = () => <BackgroundContainer loading />;
|
||||
|
||||
export const Text = () => <BackgroundContainer text='Text here' />;
|
||||
|
||||
export const LongText = () => <BackgroundContainer text={longText} />;
|
||||
|
||||
interface ThemeStoryProps extends IBackgroundContainer {
|
||||
theme: TSupportedThemes;
|
||||
}
|
||||
|
||||
const ThemeStory = ({ theme, ...props }: ThemeStoryProps) => (
|
||||
<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
|
||||
<BackgroundContainer {...props} />
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
|
||||
export const DarkThemeLoading = () => <ThemeStory theme='dark' loading />;
|
||||
|
||||
export const DarkThemeText = () => <ThemeStory theme='dark' text={longText} />;
|
||||
|
||||
export const BlackThemeLoading = () => <ThemeStory theme='black' loading />;
|
||||
|
||||
export const BlackThemeText = () => <ThemeStory theme='black' text={longText} />;
|
||||
|
|
@ -5,7 +5,7 @@ import { useTheme } from '../../theme';
|
|||
import sharedStyles from '../../views/Styles';
|
||||
import { themes } from '../../lib/constants';
|
||||
|
||||
interface IBackgroundContainer {
|
||||
export interface IBackgroundContainer {
|
||||
text?: string;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
|
||||
import Button from '.';
|
||||
|
||||
const buttonProps = {
|
||||
title: 'Press me!',
|
||||
type: 'primary',
|
||||
onPress: () => {},
|
||||
testID: 'testButton',
|
||||
fontSize: 16,
|
||||
style: {
|
||||
padding: 10,
|
||||
justifyContent: 'center'
|
||||
}
|
||||
};
|
||||
|
||||
const stories = storiesOf('Button', module);
|
||||
|
||||
stories.add('primary button', () => <Button {...buttonProps} />);
|
||||
|
||||
stories.add('secondary button', () => <Button {...buttonProps} type='secondary' />);
|
||||
|
||||
stories.add('loading button', () => <Button loading {...buttonProps} />);
|
||||
|
||||
stories.add('disabled button', () => <Button disabled {...buttonProps} />);
|
||||
|
||||
stories.add('disabled loading button', () => <Button disabled loading {...buttonProps} />);
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import React from 'react';
|
||||
|
||||
import Button from '.';
|
||||
|
||||
const buttonProps = {
|
||||
title: 'Press me!',
|
||||
type: 'primary',
|
||||
onPress: () => {},
|
||||
testID: 'testButton'
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'Button'
|
||||
};
|
||||
|
||||
export const PrimaryButton = () => <Button {...buttonProps} />;
|
||||
|
||||
export const SecondaryButton = () => <Button {...buttonProps} type='secondary' />;
|
||||
|
||||
export const LoadingButton = () => <Button loading {...buttonProps} />;
|
||||
|
||||
export const DisabledButton = () => <Button disabled {...buttonProps} />;
|
||||
|
||||
export const DisabledLoadingButton = () => <Button disabled loading {...buttonProps} />;
|
||||
|
||||
export const CustomButton = () => (
|
||||
<Button
|
||||
{...buttonProps}
|
||||
fontSize={18}
|
||||
backgroundColor='purple'
|
||||
color='yellow'
|
||||
style={{
|
||||
padding: 10
|
||||
}}
|
||||
styleText={[
|
||||
{
|
||||
textAlign: 'left'
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Button disabled button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3,\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
|
||||
|
||||
exports[`Storyshots Button disabled loading button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3,\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#ffffff\\"},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots Button loading button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#ffffff\\"},\\"children\\":null}]}"`;
|
||||
|
||||
exports[`Storyshots Button primary button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
|
||||
|
||||
exports[`Storyshots Button secondary button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#ffffff\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { Text, View, ViewStyle } from 'react-native';
|
||||
|
||||
import Touch from '../../lib/methods/helpers/touch';
|
||||
import Touch from '../Touch';
|
||||
import Avatar from '../Avatar';
|
||||
import RoomTypeIcon from '../RoomTypeIcon';
|
||||
import styles, { ROW_HEIGHT } from './styles';
|
||||
|
|
@ -49,7 +49,7 @@ const DirectoryItem = ({
|
|||
}: IDirectoryItem): React.ReactElement => {
|
||||
const { theme } = useTheme();
|
||||
return (
|
||||
<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} testID={testID} theme={theme}>
|
||||
<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} testID={testID}>
|
||||
<View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}>
|
||||
<Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} />
|
||||
<View style={styles.directoryItemTextContainer}>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import React from 'react';
|
||||
import { StackActions, useNavigation } from '@react-navigation/native';
|
||||
|
||||
import { isIOS } from '../../lib/methods/helpers';
|
||||
import I18n from '../../i18n';
|
||||
import { isIOS } from '../../lib/methods/helpers';
|
||||
import Container from './HeaderButtonContainer';
|
||||
import Item, { IHeaderButtonItem } from './HeaderButtonItem';
|
||||
|
||||
|
|
@ -18,13 +19,22 @@ export const Drawer = React.memo(
|
|||
)
|
||||
);
|
||||
|
||||
export const CloseModal = React.memo(
|
||||
({ navigation, testID, onPress = () => navigation?.pop(), ...props }: IHeaderButtonCommon) => (
|
||||
export const CloseModal = React.memo(({ testID, onPress, ...props }: IHeaderButtonCommon) => {
|
||||
const { dispatch } = useNavigation();
|
||||
return (
|
||||
<Container left>
|
||||
<Item iconName='close' onPress={onPress} testID={testID} {...props} />
|
||||
<Item
|
||||
iconName='close'
|
||||
onPress={arg => {
|
||||
if (onPress) return onPress(arg);
|
||||
dispatch(StackActions.pop());
|
||||
}}
|
||||
testID={testID}
|
||||
{...props}
|
||||
/>
|
||||
</Container>
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
export const CancelModal = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => (
|
||||
<Container left>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { SafeAreaView } from 'react-native';
|
||||
import { Header, HeaderBackground } from '@react-navigation/elements';
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
|
||||
import * as HeaderButton from '../../app/containers/HeaderButton';
|
||||
import { TColors, ThemeContext, TSupportedThemes } from '../../app/theme';
|
||||
import { colors } from '../../app/lib/constants';
|
||||
|
||||
const stories = storiesOf('Header Buttons', module).addDecorator(story => <SafeAreaProvider>{story()}</SafeAreaProvider>);
|
||||
import * as HeaderButton from '.';
|
||||
import { TColors, ThemeContext, TSupportedThemes } from '../../theme';
|
||||
import { colors } from '../../lib/constants';
|
||||
|
||||
interface IHeader {
|
||||
left?: () => React.ReactElement | null;
|
||||
|
|
@ -17,18 +14,29 @@ interface IHeader {
|
|||
colors?: TColors;
|
||||
}
|
||||
|
||||
export default {
|
||||
title: 'HeaderButtons',
|
||||
decorators: [
|
||||
(Story: any) => (
|
||||
<NavigationContainer>
|
||||
<SafeAreaProvider>
|
||||
<Story />
|
||||
</SafeAreaProvider>
|
||||
</NavigationContainer>
|
||||
)
|
||||
]
|
||||
};
|
||||
|
||||
const HeaderExample = ({ left, right, colors, title = '' }: IHeader) => (
|
||||
<SafeAreaView>
|
||||
<Header
|
||||
title={title}
|
||||
headerLeft={left}
|
||||
headerRight={right}
|
||||
headerBackground={() => <HeaderBackground style={{ backgroundColor: colors?.headerBackground }} />}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
|
||||
stories.add('title', () => (
|
||||
export const Title = () => (
|
||||
<>
|
||||
<HeaderExample
|
||||
left={() => (
|
||||
|
|
@ -57,9 +65,9 @@ stories.add('title', () => (
|
|||
)}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('icons', () => (
|
||||
export const Icons = () => (
|
||||
<>
|
||||
<HeaderExample
|
||||
left={() => (
|
||||
|
|
@ -88,9 +96,9 @@ stories.add('icons', () => (
|
|||
)}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('badge', () => (
|
||||
export const Badge = () => (
|
||||
<>
|
||||
<HeaderExample
|
||||
left={() => (
|
||||
|
|
@ -102,7 +110,7 @@ stories.add('badge', () => (
|
|||
)}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
|
||||
<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
|
||||
|
|
@ -123,15 +131,15 @@ const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
|
|||
</ThemeContext.Provider>
|
||||
);
|
||||
|
||||
stories.add('themes', () => (
|
||||
export const Themes = () => (
|
||||
<>
|
||||
<ThemeStory theme='light' />
|
||||
<ThemeStory theme='dark' />
|
||||
<ThemeStory theme='black' />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('common', () => (
|
||||
export const Common = () => (
|
||||
<>
|
||||
<HeaderExample left={() => <HeaderButton.Drawer />} />
|
||||
<HeaderExample left={() => <HeaderButton.CloseModal />} />
|
||||
|
|
@ -141,4 +149,4 @@ stories.add('common', () => (
|
|||
<HeaderExample right={() => <HeaderButton.Preferences />} />
|
||||
<HeaderExample right={() => <HeaderButton.Legal />} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
|
@ -1,17 +1,18 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
|
||||
import React from 'react';
|
||||
import { FlatList } from 'react-native';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
|
||||
import * as List from '../../app/containers/List';
|
||||
import SafeAreaView from '../../app/containers/SafeAreaView';
|
||||
import { longText } from '../utils';
|
||||
import { ThemeContext } from '../../app/theme';
|
||||
import { DimensionsContext } from '../../app/dimensions';
|
||||
import * as List from '.';
|
||||
import SafeAreaView from '../SafeAreaView';
|
||||
import { longText } from '../../../.storybook/utils';
|
||||
import { ThemeContext, TSupportedThemes } from '../../theme';
|
||||
import { DimensionsContext } from '../../dimensions';
|
||||
import { themes } from '../../lib/constants';
|
||||
|
||||
const stories = storiesOf('List', module);
|
||||
export default {
|
||||
title: 'List'
|
||||
};
|
||||
|
||||
stories.add('title and subtitle', () => (
|
||||
export const TitleAndSubtitle = () => (
|
||||
<List.Container>
|
||||
<List.Separator />
|
||||
<List.Item title='Chats' />
|
||||
|
|
@ -21,9 +22,9 @@ stories.add('title and subtitle', () => (
|
|||
<List.Item title={longText} subtitle={longText} translateTitle={false} translateSubtitle={false} testID='test-id' />
|
||||
<List.Separator />
|
||||
</List.Container>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('alert', () => (
|
||||
export const Alert = () => (
|
||||
<List.Container>
|
||||
<List.Separator />
|
||||
<List.Item title='Chats' alert />
|
||||
|
|
@ -35,9 +36,9 @@ stories.add('alert', () => (
|
|||
<List.Item title={longText} translateTitle={false} translateSubtitle={false} right={() => <List.Icon name='emoji' />} alert />
|
||||
<List.Separator />
|
||||
</List.Container>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('pressable', () => (
|
||||
export const Pressable = () => (
|
||||
<List.Container>
|
||||
<List.Separator />
|
||||
<List.Item title='Press me' onPress={() => alert('Hi there!')} translateTitle={false} />
|
||||
|
|
@ -45,28 +46,28 @@ stories.add('pressable', () => (
|
|||
<List.Item title={"I'm disabled"} onPress={() => alert('Hi there!')} disabled translateTitle={false} />
|
||||
<List.Separator />
|
||||
</List.Container>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('header', () => (
|
||||
export const Header = () => (
|
||||
<List.Container>
|
||||
<List.Header title='Chats' />
|
||||
<List.Header title={longText} translateTitle={false} />
|
||||
</List.Container>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('icon', () => (
|
||||
export const Icon = () => (
|
||||
<List.Container>
|
||||
<List.Icon name='emoji' />
|
||||
</List.Container>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('separator', () => (
|
||||
export const Separator = () => (
|
||||
<List.Container>
|
||||
<List.Separator />
|
||||
</List.Container>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('with section and info', () => (
|
||||
export const SectionAndInfo = () => (
|
||||
<SafeAreaView>
|
||||
<List.Container>
|
||||
<List.Section>
|
||||
|
|
@ -101,9 +102,9 @@ stories.add('with section and info', () => (
|
|||
</List.Section>
|
||||
</List.Container>
|
||||
</SafeAreaView>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('with icon', () => (
|
||||
export const WithIcon = () => (
|
||||
<List.Container>
|
||||
<List.Separator />
|
||||
<List.Item title='Icon Left' translateTitle={false} left={() => <List.Icon name='emoji' />} />
|
||||
|
|
@ -122,9 +123,9 @@ stories.add('with icon', () => (
|
|||
<List.Item title='Show Action Indicator' translateTitle={false} showActionIndicator />
|
||||
<List.Separator />
|
||||
</List.Container>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('with custom colors', () => (
|
||||
export const WithCustomColors = () => (
|
||||
<List.Container>
|
||||
<List.Separator />
|
||||
<List.Item title='Chats' color='red' />
|
||||
|
|
@ -139,7 +140,7 @@ stories.add('with custom colors', () => (
|
|||
/>
|
||||
<List.Separator />
|
||||
</List.Container>
|
||||
));
|
||||
);
|
||||
|
||||
const ListItemFull = ({ ...props }) => (
|
||||
<List.Item
|
||||
|
|
@ -175,17 +176,18 @@ const ListFull = () => (
|
|||
</SafeAreaView>
|
||||
);
|
||||
|
||||
const ThemeStory = ({ theme }) => (
|
||||
<ThemeContext.Provider value={{ theme }}>
|
||||
const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
|
||||
<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
|
||||
<ListFull />
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
|
||||
stories.add('with dark theme', () => <ThemeStory theme='dark' />);
|
||||
export const WithDarkTheme = () => <ThemeStory theme='dark' />;
|
||||
|
||||
stories.add('with black theme', () => <ThemeStory theme='black' />);
|
||||
export const WithBlackTheme = () => <ThemeStory theme='black' />;
|
||||
|
||||
const FontStory = ({ fontScale }) => (
|
||||
const FontStory = ({ fontScale }: { fontScale: number }) => (
|
||||
// @ts-ignore
|
||||
<DimensionsContext.Provider value={{ fontScale }}>
|
||||
<ListFull />
|
||||
</DimensionsContext.Provider>
|
||||
|
|
@ -195,20 +197,19 @@ const FontStory = ({ fontScale }) => (
|
|||
* It's going to test height only.
|
||||
* Font scale on text and icons is applied based on OS setting
|
||||
*/
|
||||
stories.add('with small font', () => <FontStory fontScale={0.8} />);
|
||||
export const WithSmallFont = () => <FontStory fontScale={0.8} />;
|
||||
|
||||
stories.add('with bigger font', () => <FontStory fontScale={1.5} />);
|
||||
export const WithBiggerFont = () => <FontStory fontScale={1.5} />;
|
||||
|
||||
stories.add('with FlatList', () => (
|
||||
export const WithFlatList = () => (
|
||||
<SafeAreaView>
|
||||
<FlatList
|
||||
data={[...Array(30).keys()]}
|
||||
contentContainerStyle={List.styles.contentContainerStyleFlatList}
|
||||
renderItem={({ item }) => <List.Item title={item} translateTitle={false} />}
|
||||
renderItem={({ item }) => <List.Item title={item.toString()} translateTitle={false} />}
|
||||
ListHeaderComponent={List.Separator}
|
||||
ListFooterComponent={List.Separator}
|
||||
ItemSeparatorComponent={List.Separator}
|
||||
keyExtractor={item => item}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
));
|
||||
);
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import { ScrollView, StyleSheet } from 'react-native';
|
||||
|
||||
import { withTheme } from '../../theme';
|
||||
import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
|
@ -14,7 +13,7 @@ interface IListContainer {
|
|||
children: (React.ReactElement | null)[] | React.ReactElement | null;
|
||||
testID?: string;
|
||||
}
|
||||
const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
|
||||
const ListContainer = ({ children, ...props }: IListContainer) => (
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.container}
|
||||
scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444
|
||||
|
|
@ -23,8 +22,8 @@ const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
|
|||
>
|
||||
{children}
|
||||
</ScrollView>
|
||||
));
|
||||
);
|
||||
|
||||
ListContainer.displayName = 'List.Container';
|
||||
|
||||
export default withTheme(ListContainer);
|
||||
export default ListContainer;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { I18nManager, StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
|
||||
|
||||
import Touch from '../../lib/methods/helpers/touch';
|
||||
import Touch from '../Touch';
|
||||
import { themes } from '../../lib/constants';
|
||||
import sharedStyles from '../../views/Styles';
|
||||
import { TSupportedThemes, useTheme } from '../../theme';
|
||||
|
|
@ -139,7 +139,6 @@ const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }
|
|||
style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
|
||||
underlayColor={underlayColor}
|
||||
enabled={!props.disabled}
|
||||
theme={props.theme}
|
||||
>
|
||||
<Content {...props} />
|
||||
</Touch>
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@ interface IListSection {
|
|||
translateTitle?: boolean;
|
||||
}
|
||||
|
||||
const ListSection = React.memo(({ children, title, translateTitle }: IListSection) => (
|
||||
const ListSection = ({ children, title, translateTitle }: IListSection) => (
|
||||
<View style={styles.container}>
|
||||
{title ? <Header {...{ title, translateTitle }} /> : null}
|
||||
{children}
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
ListSection.displayName = 'List.Section';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { Modal, StyleSheet, View, PixelRatio } from 'react-native';
|
||||
import Animated, {
|
||||
cancelAnimation,
|
||||
Extrapolate,
|
||||
interpolate,
|
||||
useAnimatedStyle,
|
||||
useSharedValue,
|
||||
withRepeat,
|
||||
withSequence,
|
||||
withTiming
|
||||
} from 'react-native-reanimated';
|
||||
|
||||
import { useTheme } from '../theme';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
image: {
|
||||
width: PixelRatio.get() * 40,
|
||||
height: PixelRatio.get() * 40,
|
||||
resizeMode: 'contain'
|
||||
}
|
||||
});
|
||||
|
||||
interface ILoadingProps {
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
const Loading = ({ visible }: ILoadingProps): React.ReactElement => {
|
||||
const opacity = useSharedValue(0);
|
||||
const scale = useSharedValue(1);
|
||||
const { colors } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
opacity.value = withTiming(1, {
|
||||
duration: 200
|
||||
});
|
||||
scale.value = withRepeat(withSequence(withTiming(0, { duration: 1000 }), withTiming(1, { duration: 1000 })), -1);
|
||||
}
|
||||
return () => {
|
||||
cancelAnimation(scale);
|
||||
};
|
||||
}, [opacity, scale, visible]);
|
||||
|
||||
const animatedOpacity = useAnimatedStyle(() => ({
|
||||
opacity: interpolate(opacity.value, [0, 1], [0, colors.backdropOpacity], Extrapolate.CLAMP)
|
||||
}));
|
||||
const animatedScale = useAnimatedStyle(() => ({ transform: [{ scale: interpolate(scale.value, [0, 0.5, 1], [1, 1.1, 1]) }] }));
|
||||
|
||||
return (
|
||||
<Modal visible={visible} transparent onRequestClose={() => {}}>
|
||||
<View style={styles.container} testID='loading'>
|
||||
<Animated.View
|
||||
style={[
|
||||
{
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: colors.backdropColor
|
||||
},
|
||||
animatedOpacity
|
||||
]}
|
||||
/>
|
||||
<Animated.Image source={require('../static/images/logo.png')} style={[styles.image, animatedScale]} />
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default Loading;
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import { act, fireEvent, render, waitFor } from '@testing-library/react-native';
|
||||
import React from 'react';
|
||||
|
||||
import Loading, { sendLoadingEvent, LOADING_BUTTON_TEST_ID, LOADING_IMAGE_TEST_ID, LOADING_TEST_ID } from '.';
|
||||
|
||||
const Render = () => <Loading />;
|
||||
|
||||
const getByTestIdAndThrow = (fn: Function, testID: string) =>
|
||||
expect(() => fn(testID)).toThrow(`Unable to find an element with testID: ${testID}`);
|
||||
|
||||
describe('Loading', () => {
|
||||
it('starts invisible and shows/hides when event is received', async () => {
|
||||
const { getByTestId } = render(<Render />);
|
||||
getByTestIdAndThrow(getByTestId, LOADING_TEST_ID);
|
||||
// receive event and expect loading to be rendered
|
||||
act(() => sendLoadingEvent({ visible: true }));
|
||||
await waitFor(() => {
|
||||
expect(() => getByTestId(LOADING_TEST_ID));
|
||||
});
|
||||
expect(() => getByTestId(LOADING_IMAGE_TEST_ID));
|
||||
// receive event and expect loading not to be rendered
|
||||
act(() => sendLoadingEvent({ visible: false }));
|
||||
await waitFor(() => {
|
||||
getByTestIdAndThrow(getByTestId, LOADING_TEST_ID);
|
||||
});
|
||||
});
|
||||
|
||||
it('doesnt have onCancel and doesnt hide when pressed', async () => {
|
||||
const { getByTestId } = render(<Render />);
|
||||
getByTestIdAndThrow(getByTestId, LOADING_TEST_ID);
|
||||
act(() => sendLoadingEvent({ visible: true }));
|
||||
expect(() => getByTestId(LOADING_TEST_ID));
|
||||
fireEvent.press(getByTestId(LOADING_BUTTON_TEST_ID));
|
||||
await waitFor(() => {
|
||||
expect(() => getByTestId(LOADING_TEST_ID));
|
||||
});
|
||||
});
|
||||
|
||||
it('has onCancel and hides when pressed', async () => {
|
||||
const mockFn = jest.fn();
|
||||
const { getByTestId } = render(<Render />);
|
||||
getByTestIdAndThrow(getByTestId, LOADING_TEST_ID);
|
||||
act(() => sendLoadingEvent({ visible: true, onCancel: mockFn }));
|
||||
await waitFor(() => {
|
||||
expect(() => getByTestId(LOADING_TEST_ID));
|
||||
});
|
||||
fireEvent.press(getByTestId(LOADING_BUTTON_TEST_ID));
|
||||
await waitFor(() => {
|
||||
getByTestIdAndThrow(getByTestId, LOADING_TEST_ID);
|
||||
});
|
||||
expect(mockFn).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('asserts onCancel return', async () => {
|
||||
const mockFn = jest.fn();
|
||||
const mockFn2 = jest.fn(() => 'test');
|
||||
const { getByTestId } = render(<Render />);
|
||||
getByTestIdAndThrow(getByTestId, LOADING_TEST_ID);
|
||||
act(() => sendLoadingEvent({ visible: true, onCancel: mockFn }));
|
||||
await waitFor(() => {
|
||||
expect(() => getByTestId(LOADING_TEST_ID));
|
||||
});
|
||||
act(() => sendLoadingEvent({ visible: true, onCancel: mockFn2 }));
|
||||
await waitFor(() => {
|
||||
expect(() => getByTestId(LOADING_TEST_ID));
|
||||
});
|
||||
fireEvent.press(getByTestId(LOADING_BUTTON_TEST_ID));
|
||||
await waitFor(() => {
|
||||
getByTestIdAndThrow(getByTestId, LOADING_TEST_ID);
|
||||
});
|
||||
expect(mockFn).not.toHaveBeenCalled();
|
||||
expect(mockFn2).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { StyleSheet, View, PixelRatio, TouchableWithoutFeedback } from 'react-native';
|
||||
import Animated, {
|
||||
cancelAnimation,
|
||||
Extrapolate,
|
||||
interpolate,
|
||||
useAnimatedStyle,
|
||||
useSharedValue,
|
||||
withRepeat,
|
||||
withSequence,
|
||||
withTiming
|
||||
} from 'react-native-reanimated';
|
||||
|
||||
import { useTheme } from '../../theme';
|
||||
import EventEmitter from '../../lib/methods/helpers/events';
|
||||
|
||||
const LOADING_EVENT = 'LOADING_EVENT';
|
||||
export const LOADING_TEST_ID = 'loading';
|
||||
export const LOADING_BUTTON_TEST_ID = 'loading-button';
|
||||
export const LOADING_IMAGE_TEST_ID = 'loading-image';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
image: {
|
||||
width: PixelRatio.get() * 40,
|
||||
height: PixelRatio.get() * 40,
|
||||
resizeMode: 'contain'
|
||||
}
|
||||
});
|
||||
|
||||
interface ILoadingEvent {
|
||||
visible: boolean;
|
||||
onCancel?: null | Function;
|
||||
}
|
||||
|
||||
export const sendLoadingEvent = ({ visible, onCancel }: ILoadingEvent): void =>
|
||||
EventEmitter.emit(LOADING_EVENT, { visible, onCancel });
|
||||
|
||||
const Loading = (): React.ReactElement | null => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [onCancel, setOnCancel] = useState<null | Function>(null);
|
||||
const opacity = useSharedValue(0);
|
||||
const scale = useSharedValue(1);
|
||||
const { colors } = useTheme();
|
||||
|
||||
const onEventReceived = ({ visible: _visible, onCancel: _onCancel = null }: ILoadingEvent) => {
|
||||
if (_visible) {
|
||||
// if it's already visible, ignore it
|
||||
if (!visible) {
|
||||
setVisible(_visible);
|
||||
opacity.value = 0;
|
||||
scale.value = 1;
|
||||
opacity.value = withTiming(1, {
|
||||
// 300ms doens't work on expensive navigation animations, like jump to message
|
||||
duration: 500
|
||||
});
|
||||
scale.value = withRepeat(withSequence(withTiming(0, { duration: 1000 }), withTiming(1, { duration: 1000 })), -1);
|
||||
}
|
||||
|
||||
// allows to override the onCancel function
|
||||
if (_onCancel) {
|
||||
setOnCancel(() => () => _onCancel());
|
||||
}
|
||||
} else {
|
||||
setVisible(false);
|
||||
reset();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const listener = EventEmitter.addEventListener(LOADING_EVENT, onEventReceived);
|
||||
|
||||
return () => EventEmitter.removeListener(LOADING_EVENT, listener);
|
||||
}, [visible]);
|
||||
|
||||
const reset = () => {
|
||||
cancelAnimation(scale);
|
||||
cancelAnimation(opacity);
|
||||
setVisible(false);
|
||||
setOnCancel(null);
|
||||
};
|
||||
|
||||
const onCancelHandler = () => {
|
||||
if (!onCancel) {
|
||||
return;
|
||||
}
|
||||
onCancel();
|
||||
setVisible(false);
|
||||
reset();
|
||||
};
|
||||
|
||||
const animatedOpacity = useAnimatedStyle(() => ({
|
||||
opacity: interpolate(opacity.value, [0, 1], [0, colors.backdropOpacity], Extrapolate.CLAMP)
|
||||
}));
|
||||
const animatedScale = useAnimatedStyle(() => ({ transform: [{ scale: interpolate(scale.value, [0, 0.5, 1], [1, 1.1, 1]) }] }));
|
||||
|
||||
if (!visible) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<View style={StyleSheet.absoluteFill} testID={LOADING_TEST_ID}>
|
||||
<TouchableWithoutFeedback onPress={() => onCancelHandler()} testID={LOADING_BUTTON_TEST_ID}>
|
||||
<View style={styles.container}>
|
||||
<Animated.View
|
||||
style={[
|
||||
{
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: colors.backdropColor
|
||||
},
|
||||
animatedOpacity
|
||||
]}
|
||||
/>
|
||||
<Animated.Image
|
||||
source={require('../../static/images/logo.png')}
|
||||
style={[styles.image, animatedScale]}
|
||||
testID={LOADING_IMAGE_TEST_ID}
|
||||
/>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default Loading;
|
||||
|
|
@ -2,20 +2,19 @@ import React from 'react';
|
|||
import { Text, View } from 'react-native';
|
||||
|
||||
import { useTheme } from '../../theme';
|
||||
import Touch from '../../lib/methods/helpers/touch';
|
||||
import Touch from '../Touch';
|
||||
import { CustomIcon } from '../CustomIcon';
|
||||
import { IButtonService } from './interfaces';
|
||||
import styles from './styles';
|
||||
|
||||
const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, icon }: IButtonService) => {
|
||||
const { theme, colors } = useTheme();
|
||||
const { colors } = useTheme();
|
||||
|
||||
return (
|
||||
<Touch
|
||||
key={name}
|
||||
onPress={onPress}
|
||||
style={[styles.serviceButton, { backgroundColor }]}
|
||||
theme={theme}
|
||||
activeOpacity={0.5}
|
||||
underlayColor={colors.buttonText}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { Provider } from 'react-redux';
|
||||
import { StyleSheet, Text, ScrollView } from 'react-native';
|
||||
import { StyleSheet, Text } from 'react-native';
|
||||
|
||||
import { store } from '../../../storybook/stories';
|
||||
import { ThemeContext } from '../../theme';
|
||||
import { colors } from '../../lib/constants';
|
||||
import i18n from '../../i18n';
|
||||
import sharedStyles from '../../views/Styles';
|
||||
import ServicesSeparator from './ServicesSeparator';
|
||||
import ButtonService from './ButtonService';
|
||||
import { IServices } from '../../selectors/login';
|
||||
import { TIconsName } from '../CustomIcon';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
serviceName: {
|
||||
|
|
@ -58,26 +56,25 @@ const services = {
|
|||
custom: false,
|
||||
authType: 'apple'
|
||||
}
|
||||
};
|
||||
} as unknown as IServices;
|
||||
|
||||
const theme = 'light';
|
||||
|
||||
const stories = storiesOf('Login Services', module)
|
||||
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
|
||||
.addDecorator(story => <ThemeContext.Provider value={{ theme, colors: colors[theme] }}>{story()}</ThemeContext.Provider>)
|
||||
.addDecorator(story => <ScrollView style={sharedStyles.containerScrollView}>{story()}</ScrollView>);
|
||||
export default {
|
||||
title: 'Login Services'
|
||||
};
|
||||
|
||||
stories.add('ServicesSeparator', () => (
|
||||
export const Separators = () => (
|
||||
<>
|
||||
<ServicesSeparator collapsed onPressButtonSeparator={() => {}} separator services={services} />
|
||||
<ServicesSeparator collapsed={false} onPressButtonSeparator={() => {}} separator services={services} />
|
||||
<ServicesSeparator collapsed onPress={() => {}} separator services={services} />
|
||||
<ServicesSeparator collapsed={false} onPress={() => {}} separator services={services} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('ServiceList', () => (
|
||||
export const ServiceList = () => (
|
||||
<>
|
||||
{Object.values(services).map(service => {
|
||||
const icon = `${service.name}-monochromatic`;
|
||||
const icon = `${service.name}-monochromatic` as TIconsName;
|
||||
const buttonText = (
|
||||
<>
|
||||
{i18n.t('Continue_with')} <Text style={styles.serviceName}>{service.name}</Text>
|
||||
|
|
@ -96,4 +93,4 @@ stories.add('ServiceList', () => (
|
|||
);
|
||||
})}
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Login Services ServiceList 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"padding\\":15,\\"paddingBottom\\":30}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"github\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"gitlab\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"google\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"apple\\"]}]}]}]}]}"`;
|
||||
|
||||
exports[`Storyshots Login Services ServicesSeparator 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"padding\\":15,\\"paddingBottom\\":30}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"More options\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":false,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":0,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#1d74f5\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"More options\\"},\\"children\\":[\\"More options\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginVertical\\":24}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":14,\\"marginRight\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"OR\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Less options\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":false,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":0,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#1d74f5\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Less options\\"},\\"children\\":[\\"Less options\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginVertical\\":24}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":14,\\"marginRight\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"OR\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null}]}]}]}"`;
|
||||
|
|
@ -7,10 +7,10 @@ import { CustomIcon } from '../CustomIcon';
|
|||
import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
|
||||
import CustomEmoji from '../EmojiPicker/CustomEmoji';
|
||||
import database from '../../lib/database';
|
||||
import { Button } from '../ActionSheet';
|
||||
import { useDimensions } from '../../dimensions';
|
||||
import sharedStyles from '../../views/Styles';
|
||||
import { TAnyMessageModel, TFrequentlyUsedEmojiModel } from '../../definitions';
|
||||
import Touch from '../Touch';
|
||||
|
||||
type TItem = TFrequentlyUsedEmojiModel | string;
|
||||
|
||||
|
|
@ -75,30 +75,28 @@ const HeaderItem = ({ item, onReaction, server, theme }: THeaderItem) => {
|
|||
const emojiModel = item as TFrequentlyUsedEmojiModel;
|
||||
const emoji = (emojiModel.id ? emojiModel.content : item) as string;
|
||||
return (
|
||||
<Button
|
||||
<Touch
|
||||
testID={`message-actions-emoji-${emoji}`}
|
||||
onPress={() => onReaction({ emoji: `:${emoji}:` })}
|
||||
style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
|
||||
theme={theme}
|
||||
>
|
||||
{emojiModel?.isCustom ? (
|
||||
<CustomEmoji style={styles.customEmoji} emoji={emojiModel} baseUrl={server} />
|
||||
) : (
|
||||
<Text style={styles.headerIcon}>{shortnameToUnicode(`:${emoji}:`)}</Text>
|
||||
)}
|
||||
</Button>
|
||||
</Touch>
|
||||
);
|
||||
};
|
||||
|
||||
const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
|
||||
<Button
|
||||
<Touch
|
||||
testID='add-reaction'
|
||||
onPress={onReaction}
|
||||
onPress={(param: any) => onReaction(param)}
|
||||
style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
|
||||
theme={theme}
|
||||
>
|
||||
<CustomIcon name='reaction-add' size={24} color={themes[theme].bodyText} />
|
||||
</Button>
|
||||
</Touch>
|
||||
);
|
||||
|
||||
const Header = React.memo(({ handleReaction, server, message, isMasterDetail }: IHeader) => {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Text } from 'react-native';
|
|||
|
||||
import styles from './styles';
|
||||
import { themes } from '../../../lib/constants';
|
||||
import Touch from '../../../lib/methods/helpers/touch';
|
||||
import Touch from '../../Touch';
|
||||
import { CustomIcon, TIconsName } from '../../CustomIcon';
|
||||
import { useTheme } from '../../../theme';
|
||||
|
||||
|
|
@ -25,7 +25,6 @@ const Button = React.memo(({ text, disabled, onPress, icon }: IPasscodeButton) =
|
|||
underlayColor={themes[theme].passcodeButtonActive}
|
||||
rippleColor={themes[theme].passcodeButtonActive}
|
||||
enabled={!disabled}
|
||||
theme={theme}
|
||||
onPress={press}
|
||||
>
|
||||
{icon ? (
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { useAsyncStorage } from '@react-native-community/async-storage';
|
||||
import { useAsyncStorage } from '@react-native-async-storage/async-storage';
|
||||
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import { sha256 } from 'js-sha256';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import AsyncStorage from '@react-native-community/async-storage';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import moment from 'moment';
|
||||
|
||||
import { LOCKED_OUT_TIMER_KEY, TIME_TO_LOCK } from '../../lib/constants';
|
||||
|
|
|
|||
|
|
@ -1,31 +1,20 @@
|
|||
import React from 'react';
|
||||
import { Dimensions, SafeAreaView } from 'react-native';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { Provider } from 'react-redux';
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
import { Header, HeaderBackground } from '@react-navigation/elements';
|
||||
import { Dimensions, View } from 'react-native';
|
||||
|
||||
import { longText } from '../../../storybook/utils';
|
||||
import { ThemeContext } from '../../theme';
|
||||
import { store } from '../../../storybook/stories';
|
||||
import { longText } from '../../../.storybook/utils';
|
||||
import { ThemeContext, TSupportedThemes } from '../../theme';
|
||||
import { colors, themes } from '../../lib/constants';
|
||||
import RoomHeaderComponent from './RoomHeader';
|
||||
|
||||
const stories = storiesOf('RoomHeader', module)
|
||||
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
|
||||
.addDecorator(story => <SafeAreaProvider>{story()}</SafeAreaProvider>);
|
||||
|
||||
const { width, height } = Dimensions.get('window');
|
||||
|
||||
const HeaderExample = ({ title, theme = 'light' }) => (
|
||||
<SafeAreaView>
|
||||
<Header
|
||||
title=''
|
||||
headerTitle={title}
|
||||
headerTitleAlign='left'
|
||||
headerBackground={() => <HeaderBackground style={{ backgroundColor: themes[theme].headerBackground }} />}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
export default {
|
||||
title: 'RoomHeader'
|
||||
};
|
||||
|
||||
const HeaderExample = ({ title, theme = 'light' }: { title: Function; theme?: TSupportedThemes }) => (
|
||||
// Using View directly instead of Header from react-navigation because it's easier to test.
|
||||
<View style={{ flex: 1, maxHeight: 48, backgroundColor: themes[theme].headerBackground }}>{title()}</View>
|
||||
);
|
||||
|
||||
const RoomHeader = ({ ...props }) => (
|
||||
|
|
@ -42,7 +31,7 @@ const RoomHeader = ({ ...props }) => (
|
|||
/>
|
||||
);
|
||||
|
||||
stories.add('title and subtitle', () => (
|
||||
export const TitleSubtitle = () => (
|
||||
<>
|
||||
<HeaderExample title={() => <RoomHeader title='title' type='p' />} />
|
||||
<HeaderExample title={() => <RoomHeader title={longText} type='p' />} />
|
||||
|
|
@ -50,9 +39,9 @@ stories.add('title and subtitle', () => (
|
|||
<HeaderExample title={() => <RoomHeader subtitle={longText} />} />
|
||||
<HeaderExample title={() => <RoomHeader title={longText} subtitle={longText} />} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('icons', () => (
|
||||
export const Icons = () => (
|
||||
<>
|
||||
<HeaderExample title={() => <RoomHeader title='private channel' type='p' />} />
|
||||
<HeaderExample title={() => <RoomHeader title='public channel' type='c' />} />
|
||||
|
|
@ -67,41 +56,41 @@ stories.add('icons', () => (
|
|||
<HeaderExample title={() => <RoomHeader title='loading dm' type='d' status='loading' />} />
|
||||
<HeaderExample title={() => <RoomHeader title='offline dm' type='d' />} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('typing', () => (
|
||||
export const Typing = () => (
|
||||
<>
|
||||
<HeaderExample title={() => <RoomHeader usersTyping={['user 1']} />} />
|
||||
<HeaderExample title={() => <RoomHeader usersTyping={['user 1', 'user 2']} />} />
|
||||
<HeaderExample title={() => <RoomHeader usersTyping={['user 1', 'user 2', 'user 3', 'user 4', 'user 5']} />} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('landscape', () => (
|
||||
export const Landscape = () => (
|
||||
<>
|
||||
<HeaderExample title={() => <RoomHeader width={height} height={width} />} />
|
||||
<HeaderExample title={() => <RoomHeader width={height} height={width} subtitle='subtitle' />} />
|
||||
<HeaderExample title={() => <RoomHeader width={height} height={width} title={longText} subtitle={longText} />} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('thread', () => (
|
||||
export const Thread = () => (
|
||||
<>
|
||||
<HeaderExample title={() => <RoomHeader tmid='123' parentTitle='parent title' />} />
|
||||
<HeaderExample title={() => <RoomHeader tmid='123' title={'markdown\npreview\n#3\n4\n5'} parentTitle={longText} />} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
const ThemeStory = ({ theme }) => (
|
||||
const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
|
||||
<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
|
||||
<HeaderExample title={() => <RoomHeader subtitle='subtitle' />} theme={theme} />
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
|
||||
stories.add('themes', () => (
|
||||
export const Themes = () => (
|
||||
<>
|
||||
<ThemeStory theme='light' />
|
||||
<ThemeStory theme='dark' />
|
||||
<ThemeStory theme='black' />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots RoomHeader icons 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
|
||||
|
||||
exports[`Storyshots RoomHeader landscape 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
|
||||
|
||||
exports[`Storyshots RoomHeader themes 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
|
||||
|
||||
exports[`Storyshots RoomHeader thread 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
|
||||
|
||||
exports[`Storyshots RoomHeader title and subtitle 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
|
||||
|
||||
exports[`Storyshots RoomHeader typing 1`] = `"{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":null}"`;
|
||||
|
|
@ -1,16 +1,10 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import { Dimensions, ScrollView } from 'react-native';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { Provider } from 'react-redux';
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
import { Dimensions } from 'react-native';
|
||||
|
||||
import RoomItemComponent from '../../app/containers/RoomItem/RoomItem';
|
||||
import { longText } from '../utils';
|
||||
import { DisplayMode, themes } from '../../app/lib/constants';
|
||||
import { store } from './index';
|
||||
import { longText } from '../../../.storybook/utils';
|
||||
import { DisplayMode } from '../../lib/constants';
|
||||
import RoomItemComponent from './RoomItem';
|
||||
|
||||
const baseUrl = 'https://open.rocket.chat';
|
||||
const { width } = Dimensions.get('window');
|
||||
const _theme = 'light';
|
||||
const lastMessage = {
|
||||
|
|
@ -23,12 +17,11 @@ const updatedAt = {
|
|||
date: '10:00'
|
||||
};
|
||||
|
||||
const RoomItem = props => (
|
||||
const RoomItem = (props: any) => (
|
||||
<RoomItemComponent
|
||||
type='d'
|
||||
name='rocket.cat'
|
||||
avatar='rocket.cat'
|
||||
baseUrl={baseUrl}
|
||||
width={width}
|
||||
theme={_theme}
|
||||
showAvatar
|
||||
|
|
@ -38,23 +31,22 @@ const RoomItem = props => (
|
|||
/>
|
||||
);
|
||||
|
||||
const stories = storiesOf('Room Item', module)
|
||||
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
|
||||
.addDecorator(story => <SafeAreaProvider>{story()}</SafeAreaProvider>)
|
||||
.addDecorator(story => <ScrollView style={{ backgroundColor: themes[_theme].backgroundColor }}>{story()}</ScrollView>);
|
||||
export default {
|
||||
title: 'RoomItem'
|
||||
};
|
||||
|
||||
stories.add('Basic', () => <RoomItem />);
|
||||
export const Basic = () => <RoomItem />;
|
||||
|
||||
stories.add('Touch', () => <RoomItem onPress={() => alert('on press')} onLongPress={() => alert('on long press')} />);
|
||||
export const Touch = () => <RoomItem onPress={() => alert('on press')} onLongPress={() => alert('on long press')} />;
|
||||
|
||||
stories.add('User', () => (
|
||||
export const User = () => (
|
||||
<>
|
||||
<RoomItem name='diego.mello' avatar='diego.mello' />
|
||||
<RoomItem name={longText} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Type', () => (
|
||||
export const Type = () => (
|
||||
<>
|
||||
<RoomItem type='d' />
|
||||
<RoomItem type='c' />
|
||||
|
|
@ -64,9 +56,9 @@ stories.add('Type', () => (
|
|||
<RoomItem type='d' isGroupChat />
|
||||
<RoomItem type='&' />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('User status', () => (
|
||||
export const UserStatus = () => (
|
||||
<>
|
||||
<RoomItem status='online' />
|
||||
<RoomItem status='away' />
|
||||
|
|
@ -75,9 +67,9 @@ stories.add('User status', () => (
|
|||
<RoomItem status='loading' />
|
||||
<RoomItem status='wrong' />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Alerts', () => (
|
||||
export const Alerts = () => (
|
||||
<>
|
||||
<RoomItem alert />
|
||||
<RoomItem alert name='unread' unread={1} />
|
||||
|
|
@ -91,18 +83,18 @@ stories.add('Alerts', () => (
|
|||
<RoomItem name='group mentions priority 2' alert unread={1} groupMentions={1} tunread={[1]} />
|
||||
<RoomItem name='thread unread priority 3' alert unread={1} tunread={[1]} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Tag', () => (
|
||||
export const Tag = () => (
|
||||
<>
|
||||
<RoomItem autoJoin />
|
||||
<RoomItem showLastMessage autoJoin />
|
||||
<RoomItem name={longText} autoJoin />
|
||||
<RoomItem name={longText} autoJoin showLastMessage />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Last Message', () => (
|
||||
export const LastMessage = () => (
|
||||
<>
|
||||
<RoomItem showLastMessage />
|
||||
<RoomItem
|
||||
|
|
@ -129,18 +121,18 @@ stories.add('Last Message', () => (
|
|||
<RoomItem showLastMessage alert unread={1000} lastMessage={lastMessage} />
|
||||
<RoomItem showLastMessage alert tunread={[1]} lastMessage={lastMessage} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Condensed Room Item', () => (
|
||||
export const CondensedRoomItem = () => (
|
||||
<>
|
||||
<RoomItem showLastMessage alert tunread={[1]} lastMessage={lastMessage} displayMode={DisplayMode.Condensed} />
|
||||
<RoomItem showLastMessage alert name='unread' unread={1000} displayMode={DisplayMode.Condensed} />
|
||||
|
||||
<RoomItem type='c' displayMode={DisplayMode.Condensed} autoJoin />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Condensed Room Item without Avatar', () => (
|
||||
export const CondensedRoomItemWithoutAvatar = () => (
|
||||
<>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
|
|
@ -153,9 +145,9 @@ stories.add('Condensed Room Item without Avatar', () => (
|
|||
<RoomItem type='p' displayMode={DisplayMode.Condensed} showAvatar={false} />
|
||||
<RoomItem name={longText} autoJoin displayMode={DisplayMode.Condensed} showAvatar={false} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Expanded Room Item without Avatar', () => (
|
||||
export const ExpandedRoomItemWithoutAvatar = () => (
|
||||
<>
|
||||
<RoomItem
|
||||
showLastMessage
|
||||
|
|
@ -183,9 +175,9 @@ stories.add('Expanded Room Item without Avatar', () => (
|
|||
showAvatar={false}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Omnichannel Icon', () => (
|
||||
export const OmnichannelIcon = () => (
|
||||
<>
|
||||
<RoomItem type='l' sourceType={{ type: 'widget' }} status='online' />
|
||||
<RoomItem type='l' sourceType={{ type: 'widget' }} status='away' />
|
||||
|
|
@ -198,4 +190,4 @@ stories.add('Omnichannel Icon', () => (
|
|||
<RoomItem type='l' sourceType={{ type: 'other' }} status='online' />
|
||||
<RoomItem type='l' sourceType={{ type: 'other' }} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
|
@ -14,7 +14,7 @@ import {
|
|||
PanGestureHandlerEventPayload
|
||||
} from 'react-native-gesture-handler';
|
||||
|
||||
import Touch from '../../lib/methods/helpers/touch';
|
||||
import Touch from '../Touch';
|
||||
import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE } from './styles';
|
||||
import { LeftActions, RightActions } from './Actions';
|
||||
import { ITouchableProps } from './interfaces';
|
||||
|
|
@ -38,7 +38,7 @@ const Touchable = ({
|
|||
swipeEnabled,
|
||||
displayMode
|
||||
}: ITouchableProps): React.ReactElement => {
|
||||
const { theme, colors } = useTheme();
|
||||
const { colors } = useTheme();
|
||||
|
||||
const rowOffSet = useSharedValue(0);
|
||||
const transX = useSharedValue(0);
|
||||
|
|
@ -221,7 +221,6 @@ const Touchable = ({
|
|||
<Animated.View style={animatedStyles}>
|
||||
<Touch
|
||||
onPress={handlePress}
|
||||
theme={theme}
|
||||
testID={testID}
|
||||
style={{
|
||||
backgroundColor: isFocused ? colors.chatComponentBackground : colors.backgroundColor
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
import { storiesOf } from '@storybook/react-native';
|
||||
import React from 'react';
|
||||
import SearchBox from './index';
|
||||
|
||||
const stories = storiesOf('SearchBox', module);
|
||||
|
||||
stories.add('Item', () => <SearchBox />);
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
import SearchBox from './index';
|
||||
|
||||
export default {
|
||||
title: 'SearchBox'
|
||||
};
|
||||
|
||||
export const Basic = () => <SearchBox />;
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import React from 'react';
|
||||
|
||||
import { themes } from '../../lib/constants';
|
||||
import ServerItemComponent, { IServerItem } from '.';
|
||||
import { ThemeContext, TSupportedThemes } from '../../theme';
|
||||
|
||||
export default {
|
||||
title: 'ServerItem'
|
||||
};
|
||||
|
||||
const defaultItem = {
|
||||
name: 'Rocket.Chat',
|
||||
id: 'https://open.rocket.chat/',
|
||||
iconURL: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png'
|
||||
};
|
||||
|
||||
const ServerItem = ({
|
||||
item,
|
||||
theme = 'light',
|
||||
onPress = () => alert('Press'),
|
||||
onLongPress,
|
||||
hasCheck
|
||||
}: {
|
||||
item?: Partial<IServerItem['item']>;
|
||||
theme?: TSupportedThemes;
|
||||
onPress?: IServerItem['onPress'];
|
||||
onLongPress?: IServerItem['onLongPress'];
|
||||
hasCheck?: IServerItem['hasCheck'];
|
||||
}) => (
|
||||
<ThemeContext.Provider
|
||||
value={{
|
||||
theme,
|
||||
colors: themes[theme]
|
||||
}}
|
||||
>
|
||||
<ServerItemComponent item={{ ...defaultItem, ...item }} onPress={onPress} onLongPress={onLongPress} hasCheck={hasCheck} />
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
|
||||
export const Content = () => (
|
||||
<>
|
||||
<ServerItem hasCheck />
|
||||
<ServerItem
|
||||
item={{
|
||||
name: 'Super Long Server Name in Rocket.Chat',
|
||||
id: 'https://superlongservername.tologintoasuperlongservername/'
|
||||
}}
|
||||
/>
|
||||
<ServerItem
|
||||
item={{
|
||||
id: 'https://stable.rocket.chat/'
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export const Touchable = () => (
|
||||
<>
|
||||
<ServerItem onLongPress={() => alert('Long Press')} />
|
||||
</>
|
||||
);
|
||||
|
||||
export const Themes = () => (
|
||||
<>
|
||||
<ServerItem theme={'light'} />
|
||||
<ServerItem theme={'dark'} />
|
||||
<ServerItem theme={'black'} />
|
||||
</>
|
||||
);
|
||||
|
|
@ -12,7 +12,7 @@ import { useTheme } from '../../theme';
|
|||
|
||||
export { ROW_HEIGHT };
|
||||
|
||||
interface IServerItem {
|
||||
export interface IServerItem {
|
||||
item: IServerInfo;
|
||||
onPress(): void;
|
||||
onLongPress?(): void;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
|
||||
import { View, StyleSheet } from 'react-native';
|
||||
|
||||
import { FormTextInput } from '.';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
|
@ -11,14 +9,16 @@ const styles = StyleSheet.create({
|
|||
}
|
||||
});
|
||||
|
||||
const stories = storiesOf('Text Input', module);
|
||||
export default {
|
||||
title: 'TextInput'
|
||||
};
|
||||
|
||||
const item = {
|
||||
name: 'Rocket.Chat',
|
||||
longText: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png'
|
||||
};
|
||||
|
||||
stories.add('Short and Long Text', () => (
|
||||
export const ShortAndLong = () => (
|
||||
<>
|
||||
<View style={styles.paddingHorizontal}>
|
||||
<FormTextInput label='Short Text' placeholder='placeholder' value={item.name} />
|
||||
|
|
@ -26,4 +26,4 @@ stories.add('Short and Long Text', () => (
|
|||
<FormTextInput label='Long Text' placeholder='placeholder' value={item.longText} />
|
||||
</View>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Text Input Short and Long Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingHorizontal\\":14}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"},null]},\\"children\\":[\\"Short Text\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,null,{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"placeholder\\",\\"placeholder\\":\\"placeholder\\",\\"value\\":\\"Rocket.Chat\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"},null]},\\"children\\":[\\"Long Text\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,null,{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"placeholder\\",\\"placeholder\\":\\"placeholder\\",\\"value\\":\\"https://open.rocket.chat/images/logo/android-chrome-512x512.png\\"},\\"children\\":null}]}]}]}"`;
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import React from 'react';
|
||||
import { RectButton, RectButtonProps } from 'react-native-gesture-handler';
|
||||
|
||||
import { useTheme } from '../theme';
|
||||
|
||||
export interface ITouchProps extends RectButtonProps {
|
||||
children: React.ReactNode;
|
||||
accessibilityLabel?: string;
|
||||
testID?: string;
|
||||
}
|
||||
|
||||
const Touch = React.forwardRef<RectButton, ITouchProps>(({ children, onPress, underlayColor, ...props }, ref) => {
|
||||
const { colors } = useTheme();
|
||||
|
||||
return (
|
||||
<RectButton
|
||||
ref={ref}
|
||||
onPress={onPress}
|
||||
activeOpacity={1}
|
||||
underlayColor={underlayColor || colors.bannerBackground}
|
||||
rippleColor={colors.bannerBackground}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</RectButton>
|
||||
);
|
||||
});
|
||||
|
||||
export default Touch;
|
||||
|
|
@ -1,11 +1,9 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { ScrollView, StyleSheet } from 'react-native';
|
||||
|
||||
import MessageContext from '../../app/containers/message/Context';
|
||||
import { UiKitMessage } from '../../app/containers/UIKit';
|
||||
import { themes } from '../../app/lib/constants';
|
||||
import MessageContext from '../message/Context';
|
||||
import { UiKitMessage } from '.';
|
||||
import { themes } from '../../lib/constants';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
|
|
@ -20,12 +18,16 @@ const styles = StyleSheet.create({
|
|||
const user = {
|
||||
id: 'y8bd77ptZswPj3EW8',
|
||||
username: 'diego.mello',
|
||||
token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz'
|
||||
token: 'abc'
|
||||
};
|
||||
|
||||
const baseUrl = 'https://open.rocket.chat';
|
||||
|
||||
const messageDecorator = story => (
|
||||
export default {
|
||||
title: 'UIKit/UiKitMessage',
|
||||
decorators: [
|
||||
(Story: any) => (
|
||||
<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
|
||||
<MessageContext.Provider
|
||||
value={{
|
||||
user,
|
||||
|
|
@ -41,20 +43,14 @@ const messageDecorator = story => (
|
|||
threadBadgeColor: themes.light.tunreadColor
|
||||
}}
|
||||
>
|
||||
{story()}
|
||||
<Story />
|
||||
</MessageContext.Provider>
|
||||
);
|
||||
|
||||
const stories = storiesOf('UiKitMessage', module)
|
||||
.addDecorator(story => <SafeAreaView style={styles.container}>{story()}</SafeAreaView>)
|
||||
.addDecorator(story => (
|
||||
<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
|
||||
{story()}
|
||||
</ScrollView>
|
||||
))
|
||||
.addDecorator(messageDecorator);
|
||||
)
|
||||
]
|
||||
};
|
||||
|
||||
const Section = () =>
|
||||
export const Section = () =>
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
|
|
@ -64,9 +60,8 @@ const Section = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Section', () => <Section />);
|
||||
|
||||
const SectionMarkdownList = () =>
|
||||
export const SectionMarkdownList = () =>
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
|
|
@ -76,9 +71,9 @@ const SectionMarkdownList = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Section + Markdown List', () => <SectionMarkdownList />);
|
||||
SectionMarkdownList.storyName = 'Section + Markdown List';
|
||||
|
||||
const SectionOverflow = () =>
|
||||
export const SectionOverflow = () =>
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
|
|
@ -125,9 +120,9 @@ const SectionOverflow = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Section + Overflow', () => <SectionOverflow />);
|
||||
SectionOverflow.storyName = 'Section + Overflow';
|
||||
|
||||
const SectionImage = () =>
|
||||
export const SectionImage = () =>
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
|
|
@ -142,9 +137,9 @@ const SectionImage = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Section + image', () => <SectionImage />);
|
||||
SectionImage.storyName = 'Section + image';
|
||||
|
||||
const SectionButton = () =>
|
||||
export const SectionButton = () =>
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
|
|
@ -161,9 +156,9 @@ const SectionButton = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Section + button', () => <SectionButton />);
|
||||
SectionButton.storyName = 'Section + button';
|
||||
|
||||
const SectionSelect = () =>
|
||||
export const SectionSelect = () =>
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
|
|
@ -192,9 +187,9 @@ const SectionSelect = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Section + Select', () => <SectionSelect />);
|
||||
SectionSelect.storyName = 'Section + Select';
|
||||
|
||||
const SectionDatePicker = () =>
|
||||
export const SectionDatePicker = () =>
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
|
|
@ -213,9 +208,9 @@ const SectionDatePicker = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Section + DatePicker', () => <SectionDatePicker />);
|
||||
SectionDatePicker.storyName = 'Section + DatePicker';
|
||||
|
||||
const SectionMultiSelect = () =>
|
||||
export const SectionMultiSelect = () =>
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
|
|
@ -258,9 +253,9 @@ const SectionMultiSelect = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Section + Multi Select', () => <SectionMultiSelect />);
|
||||
SectionMultiSelect.storyName = 'Section + Multi Select';
|
||||
|
||||
const Image = () =>
|
||||
export const Image = () =>
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'image',
|
||||
|
|
@ -273,9 +268,9 @@ const Image = () =>
|
|||
altText: 'Example Image'
|
||||
}
|
||||
]);
|
||||
stories.add('Image', () => <Image />);
|
||||
Image.storyName = 'Image';
|
||||
|
||||
const Context = () =>
|
||||
export const Context = () =>
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'context',
|
||||
|
|
@ -297,9 +292,9 @@ const Context = () =>
|
|||
]
|
||||
}
|
||||
]);
|
||||
stories.add('Context', () => <Context />);
|
||||
Context.storyName = 'Context';
|
||||
|
||||
const ActionButton = () =>
|
||||
export const ActionButton = () =>
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'actions',
|
||||
|
|
@ -377,9 +372,9 @@ const ActionButton = () =>
|
|||
]
|
||||
}
|
||||
]);
|
||||
stories.add('Action - Buttons', () => <ActionButton />);
|
||||
ActionButton.storyName = 'Action - Buttons';
|
||||
|
||||
const Fields = () =>
|
||||
export const Fields = () =>
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'section',
|
||||
|
|
@ -412,9 +407,9 @@ const Fields = () =>
|
|||
]
|
||||
}
|
||||
]);
|
||||
stories.add('Fields', () => <Fields />);
|
||||
Fields.storyName = 'Fields';
|
||||
|
||||
const ActionSelect = () =>
|
||||
export const ActionSelect = () =>
|
||||
UiKitMessage([
|
||||
{
|
||||
type: 'actions',
|
||||
|
|
@ -488,12 +483,4 @@ const ActionSelect = () =>
|
|||
]
|
||||
}
|
||||
]);
|
||||
stories.add('Action - Select', () => <ActionSelect />);
|
||||
|
||||
// stories.add('Section', () => UiKitMessage([{
|
||||
// type: 'section',
|
||||
// text: {
|
||||
// type: 'mrkdwn',
|
||||
// text: 'Section'
|
||||
// }
|
||||
// }]));
|
||||
ActionSelect.storyName = 'Action - Select';
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { ScrollView, StyleSheet } from 'react-native';
|
||||
|
||||
import { UiKitComponent, UiKitModal } from '../../app/containers/UIKit';
|
||||
import { KitContext, defaultContext } from '../../app/containers/UIKit/utils';
|
||||
import MessageContext from '../../app/containers/message/Context';
|
||||
import { themes } from '../../app/lib/constants';
|
||||
import { UiKitComponent, UiKitModal } from '.';
|
||||
import { KitContext, defaultContext } from './utils';
|
||||
import MessageContext from '../message/Context';
|
||||
import { themes } from '../../lib/constants';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
|
|
@ -21,12 +20,16 @@ const styles = StyleSheet.create({
|
|||
const user = {
|
||||
id: 'y8bd77ptZswPj3EW8',
|
||||
username: 'diego.mello',
|
||||
token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz'
|
||||
token: 'abc'
|
||||
};
|
||||
|
||||
const baseUrl = 'https://open.rocket.chat';
|
||||
|
||||
const messageDecorator = story => (
|
||||
export default {
|
||||
title: 'UIKit/UiKitModal',
|
||||
decorators: [
|
||||
(Story: any) => (
|
||||
<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
|
||||
<MessageContext.Provider
|
||||
value={{
|
||||
user,
|
||||
|
|
@ -42,20 +45,14 @@ const messageDecorator = story => (
|
|||
threadBadgeColor: themes.light.tunreadColor
|
||||
}}
|
||||
>
|
||||
{story()}
|
||||
<Story />
|
||||
</MessageContext.Provider>
|
||||
);
|
||||
|
||||
const stories = storiesOf('UiKitModal', module)
|
||||
.addDecorator(story => <SafeAreaView style={styles.container}>{story()}</SafeAreaView>)
|
||||
.addDecorator(story => (
|
||||
<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
|
||||
{story()}
|
||||
</ScrollView>
|
||||
))
|
||||
.addDecorator(messageDecorator);
|
||||
)
|
||||
]
|
||||
};
|
||||
|
||||
const ModalSectionSelects = () =>
|
||||
export const ModalSectionSelects = () =>
|
||||
UiKitModal([
|
||||
{
|
||||
type: 'section',
|
||||
|
|
@ -94,9 +91,9 @@ const ModalSectionSelects = () =>
|
|||
]
|
||||
}
|
||||
]);
|
||||
stories.add('Modal - Section and Selects', () => <ModalSectionSelects />);
|
||||
ModalSectionSelects.storyName = 'Modal - Section and Selects';
|
||||
|
||||
const ModalSectionAccessories = () =>
|
||||
export const ModalSectionAccessories = () =>
|
||||
UiKitModal([
|
||||
{
|
||||
type: 'section',
|
||||
|
|
@ -141,9 +138,9 @@ const ModalSectionAccessories = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Modal - Section Accessories', () => <ModalSectionAccessories />);
|
||||
ModalSectionAccessories.storyName = 'Modal - Section and Accessories';
|
||||
|
||||
const ModalFormInput = () =>
|
||||
export const ModalFormInput = () =>
|
||||
UiKitModal([
|
||||
{
|
||||
type: 'input',
|
||||
|
|
@ -206,9 +203,9 @@ const ModalFormInput = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Modal - Form Input', () => <ModalFormInput />);
|
||||
ModalFormInput.storyName = 'Modal - Form Input';
|
||||
|
||||
const ModalFormTextArea = () =>
|
||||
export const ModalFormTextArea = () =>
|
||||
UiKitModal([
|
||||
{
|
||||
type: 'context',
|
||||
|
|
@ -264,9 +261,9 @@ const ModalFormTextArea = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Modal - Form TextArea', () => <ModalFormTextArea />);
|
||||
ModalFormTextArea.storyName = 'Modal - Form TextArea';
|
||||
|
||||
const ModalImages = () =>
|
||||
export const ModalImages = () =>
|
||||
UiKitModal([
|
||||
{
|
||||
type: 'image',
|
||||
|
|
@ -306,9 +303,9 @@ const ModalImages = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Modal - Images', () => <ModalImages />);
|
||||
ModalImages.storyName = 'Modal - Images';
|
||||
|
||||
const ModalActions = () =>
|
||||
export const ModalActions = () =>
|
||||
UiKitModal([
|
||||
{
|
||||
type: 'input',
|
||||
|
|
@ -434,9 +431,9 @@ const ModalActions = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Modal - Actions', () => <ModalActions />);
|
||||
ModalActions.storyName = 'Modal - Actions';
|
||||
|
||||
const ModalContextsDividers = () =>
|
||||
export const ModalContextsDividers = () =>
|
||||
UiKitModal([
|
||||
{
|
||||
type: 'context',
|
||||
|
|
@ -538,9 +535,9 @@ const ModalContextsDividers = () =>
|
|||
}
|
||||
}
|
||||
]);
|
||||
stories.add('Modal - Contexts and Dividers', () => <ModalContextsDividers />);
|
||||
ModalContextsDividers.storyName = 'Modal - Contexts and Dividers';
|
||||
|
||||
const ModalInputWithError = () => (
|
||||
export const ModalInputWithError = () => (
|
||||
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
|
||||
<UiKitComponent
|
||||
render={UiKitModal}
|
||||
|
|
@ -561,9 +558,9 @@ const ModalInputWithError = () => (
|
|||
/>
|
||||
</KitContext.Provider>
|
||||
);
|
||||
stories.add('Modal - Input with error', () => <ModalInputWithError />);
|
||||
ModalInputWithError.storyName = 'Modal - Input with error';
|
||||
|
||||
const ModalMultilneWithError = () => (
|
||||
export const ModalMultilneWithError = () => (
|
||||
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
|
||||
<UiKitComponent
|
||||
render={UiKitModal}
|
||||
|
|
@ -585,9 +582,9 @@ const ModalMultilneWithError = () => (
|
|||
/>
|
||||
</KitContext.Provider>
|
||||
);
|
||||
stories.add('Modal - Multilne with error', () => <ModalMultilneWithError />);
|
||||
ModalMultilneWithError.storyName = 'Modal - Multilne with error';
|
||||
|
||||
const ModalDatePickerWithError = () => (
|
||||
export const ModalDatePickerWithError = () => (
|
||||
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
|
||||
<UiKitComponent
|
||||
render={UiKitModal}
|
||||
|
|
@ -614,4 +611,4 @@ const ModalDatePickerWithError = () => (
|
|||
/>
|
||||
</KitContext.Provider>
|
||||
);
|
||||
stories.add('Modal - DatePicker with error', () => <ModalDatePickerWithError />);
|
||||
ModalDatePickerWithError.storyName = 'Modal - DatePicker with error';
|
||||
|
|
@ -1,14 +1,15 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { View } from 'react-native';
|
||||
|
||||
import UnreadBadge from '../../app/containers/UnreadBadge';
|
||||
import { ThemeContext } from '../../app/theme';
|
||||
import { themes } from '../../lib/constants';
|
||||
import UnreadBadge from '.';
|
||||
import { ThemeContext, TSupportedThemes } from '../../theme';
|
||||
|
||||
const stories = storiesOf('Unread Badge', module);
|
||||
export default {
|
||||
title: 'Unread Badge'
|
||||
};
|
||||
|
||||
const StoryTester = ({ children }) => (
|
||||
const StoryTester = ({ children }: { children: React.ReactElement | React.ReactElement[] }) => (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
|
|
@ -21,7 +22,7 @@ const StoryTester = ({ children }) => (
|
|||
</View>
|
||||
);
|
||||
|
||||
stories.add('all', () => (
|
||||
export const All = () => (
|
||||
<StoryTester>
|
||||
<UnreadBadge unread={9} small />
|
||||
<UnreadBadge unread={999} small />
|
||||
|
|
@ -31,23 +32,23 @@ stories.add('all', () => (
|
|||
<UnreadBadge unread={9} groupMentions={1} />
|
||||
<UnreadBadge unread={9} tunread={[1]} />
|
||||
</StoryTester>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('small', () => (
|
||||
export const Small = () => (
|
||||
<StoryTester>
|
||||
<UnreadBadge unread={9} small />
|
||||
<UnreadBadge unread={999} small />
|
||||
</StoryTester>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('normal', () => (
|
||||
export const Normal = () => (
|
||||
<StoryTester>
|
||||
<UnreadBadge unread={9} />
|
||||
<UnreadBadge unread={9999} />
|
||||
</StoryTester>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('different mention types', () => (
|
||||
export const DifferentMentionTypes = () => (
|
||||
<StoryTester>
|
||||
<UnreadBadge unread={1} />
|
||||
<UnreadBadge unread={1} userMentions={1} />
|
||||
|
|
@ -57,10 +58,10 @@ stories.add('different mention types', () => (
|
|||
<UnreadBadge unread={1} tunreadUser={[1]} />
|
||||
<UnreadBadge unread={1} tunreadGroup={[1]} />
|
||||
</StoryTester>
|
||||
));
|
||||
);
|
||||
|
||||
const ThemeStory = ({ theme }) => (
|
||||
<ThemeContext.Provider value={{ theme }}>
|
||||
const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
|
||||
<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
|
||||
<StoryTester>
|
||||
<UnreadBadge unread={1} />
|
||||
<UnreadBadge unread={1} userMentions={1} />
|
||||
|
|
@ -70,10 +71,10 @@ const ThemeStory = ({ theme }) => (
|
|||
</ThemeContext.Provider>
|
||||
);
|
||||
|
||||
stories.add('themes', () => (
|
||||
export const Themes = () => (
|
||||
<>
|
||||
<ThemeStory theme='light' />
|
||||
<ThemeStory theme='dark' />
|
||||
<ThemeStory theme='black' />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
|
@ -34,9 +34,9 @@ export interface IUnreadBadge {
|
|||
userMentions?: number;
|
||||
groupMentions?: number;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
tunread?: [];
|
||||
tunreadUser?: [];
|
||||
tunreadGroup?: [];
|
||||
tunread?: any[];
|
||||
tunreadUser?: any[];
|
||||
tunreadGroup?: any[];
|
||||
small?: boolean;
|
||||
hideUnreadStatus?: boolean;
|
||||
hideMentionStatus?: boolean;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
import React from 'react';
|
||||
import { ScrollView, StyleSheet, View } from 'react-native';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { Provider } from 'react-redux';
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
|
||||
import Markdown, { MarkdownPreview } from '../../app/containers/markdown';
|
||||
import { themes } from '../../app/lib/constants';
|
||||
import { TGetCustomEmoji, IEmoji } from '../../app/definitions/IEmoji';
|
||||
import { store } from '.';
|
||||
import { NavigationDecorator } from '../StoryNavigator';
|
||||
import Markdown, { MarkdownPreview } from '.';
|
||||
import { themes } from '../../lib/constants';
|
||||
import { TGetCustomEmoji, IEmoji } from '../../definitions/IEmoji';
|
||||
|
||||
const theme = 'light';
|
||||
|
||||
|
|
@ -16,10 +13,6 @@ const styles = StyleSheet.create({
|
|||
marginHorizontal: 15,
|
||||
backgroundColor: themes[theme].backgroundColor,
|
||||
marginVertical: 50
|
||||
},
|
||||
separator: {
|
||||
marginHorizontal: 10,
|
||||
marginVertical: 10
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -45,11 +38,18 @@ const getCustomEmoji: TGetCustomEmoji = content => {
|
|||
return customEmoji;
|
||||
};
|
||||
|
||||
const stories = storiesOf('Markdown', module)
|
||||
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
|
||||
.addDecorator(NavigationDecorator);
|
||||
export default {
|
||||
title: 'Markdown',
|
||||
decorators: [
|
||||
(Story: any) => (
|
||||
<NavigationContainer>
|
||||
<Story />
|
||||
</NavigationContainer>
|
||||
)
|
||||
]
|
||||
};
|
||||
|
||||
stories.add('Text', () => (
|
||||
export const Text = () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='This is Rocket.Chat' theme={theme} />
|
||||
<Markdown msg={longText} theme={theme} />
|
||||
|
|
@ -57,9 +57,9 @@ stories.add('Text', () => (
|
|||
<Markdown msg={sequentialEmptySpacesText} theme={theme} />
|
||||
<Markdown msg='Strong emphasis, aka bold, with **asterisks** or __underscores__' theme={theme} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Preview', () => (
|
||||
export const Preview = () => (
|
||||
<View style={styles.container}>
|
||||
<MarkdownPreview msg={longText} />
|
||||
<MarkdownPreview msg={lineBreakText} />
|
||||
|
|
@ -68,9 +68,9 @@ stories.add('Preview', () => (
|
|||
<MarkdownPreview msg='Testing: 😃 :+1: :marioparty:' />
|
||||
<MarkdownPreview msg='Fallback from new md to old' />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Mentions', () => (
|
||||
export const Mentions = () => (
|
||||
<ScrollView style={styles.container}>
|
||||
<Markdown
|
||||
msg='@rocket.cat @name1 @all @here @unknown'
|
||||
|
|
@ -96,15 +96,15 @@ stories.add('Mentions', () => (
|
|||
useRealName
|
||||
/>
|
||||
</ScrollView>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Hashtag', () => (
|
||||
export const Hashtag = () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='#test-channel #unknown' theme={theme} channels={[{ _id: '123', name: 'test-channel' }]} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Emoji', () => (
|
||||
export const Emoji = () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='Unicode: 😃😇👍' theme={theme} />
|
||||
<Markdown msg='Shortnames: :joy::+1:' theme={theme} />
|
||||
|
|
@ -116,9 +116,9 @@ stories.add('Emoji', () => (
|
|||
/>
|
||||
<Markdown msg='😃 :+1: :marioparty:' theme={theme} getCustomEmoji={getCustomEmoji} baseUrl={baseUrl} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Block quote', () => (
|
||||
export const BlockQuote = () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg={`> This is block quote
|
||||
|
|
@ -126,22 +126,22 @@ this is a normal line`}
|
|||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Links', () => (
|
||||
export const Links = () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='[Markdown link](https://rocket.chat): `[description](url)`' theme={theme} />
|
||||
<Markdown msg='<https://rocket.chat|Formatted Link>: `<url|description>`' theme={theme} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Image', () => (
|
||||
export const Image = () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='' theme={theme} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Headers', () => (
|
||||
export const Headers = () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='# Header 1' theme={theme} />
|
||||
<Markdown msg='## Header 2' theme={theme} />
|
||||
|
|
@ -150,9 +150,9 @@ stories.add('Headers', () => (
|
|||
<Markdown msg='##### Header 5' theme={theme} />
|
||||
<Markdown msg='###### Header 6' theme={theme} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Code', () => (
|
||||
export const Code = () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg='This is `inline code`' theme={theme} />
|
||||
<Markdown
|
||||
|
|
@ -163,16 +163,16 @@ Code block
|
|||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Lists', () => (
|
||||
export const Lists = () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown msg={'* Open Source\n* Rocket.Chat\n - nodejs\n - ReactNative'} theme={theme} />
|
||||
<Markdown msg={'1. Open Source\n2. Rocket.Chat'} theme={theme} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Table', () => (
|
||||
export const Table = () => (
|
||||
<View style={styles.container}>
|
||||
<Markdown
|
||||
msg='First Header | Second Header
|
||||
|
|
@ -182,4 +182,4 @@ Content in the first column | Content in the second column'
|
|||
theme={theme}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
|
@ -22,14 +22,14 @@ import { formatText } from './formatText';
|
|||
import { IUserMention, IUserChannel, TOnLinkPress } from './interfaces';
|
||||
import { TGetCustomEmoji } from '../../definitions/IEmoji';
|
||||
import { formatHyperlink } from './formatHyperlink';
|
||||
import { TSupportedThemes } from '../../theme';
|
||||
import { TSupportedThemes, withTheme } from '../../theme';
|
||||
import { themes } from '../../lib/constants';
|
||||
|
||||
export { default as MarkdownPreview } from './Preview';
|
||||
|
||||
interface IMarkdownProps {
|
||||
msg?: string | null;
|
||||
theme: TSupportedThemes;
|
||||
theme?: TSupportedThemes;
|
||||
md?: MarkdownAST;
|
||||
mentions?: IUserMention[];
|
||||
getCustomEmoji?: TGetCustomEmoji;
|
||||
|
|
@ -158,9 +158,9 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
|
|||
style={[
|
||||
{
|
||||
...styles.codeInline,
|
||||
color: themes[theme].bodyText,
|
||||
backgroundColor: themes[theme].bannerBackground,
|
||||
borderColor: themes[theme].bannerBackground
|
||||
color: themes[theme!].bodyText,
|
||||
backgroundColor: themes[theme!].bannerBackground,
|
||||
borderColor: themes[theme!].bannerBackground
|
||||
},
|
||||
...style
|
||||
]}
|
||||
|
|
@ -177,9 +177,9 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
|
|||
style={[
|
||||
{
|
||||
...styles.codeBlock,
|
||||
color: themes[theme].bodyText,
|
||||
backgroundColor: themes[theme].bannerBackground,
|
||||
borderColor: themes[theme].bannerBackground
|
||||
color: themes[theme!].bodyText,
|
||||
backgroundColor: themes[theme!].bannerBackground,
|
||||
borderColor: themes[theme!].bannerBackground
|
||||
},
|
||||
...style
|
||||
]}
|
||||
|
|
@ -200,7 +200,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
|
|||
return null;
|
||||
}
|
||||
return (
|
||||
<Text style={[styles.text, style, { color: themes[theme].bodyText }]} numberOfLines={numberOfLines}>
|
||||
<Text style={[styles.text, style, { color: themes[theme!].bodyText }]} numberOfLines={numberOfLines}>
|
||||
{children}
|
||||
</Text>
|
||||
);
|
||||
|
|
@ -209,7 +209,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
|
|||
renderLink = ({ children, href }: any) => {
|
||||
const { theme, onLinkPress } = this.props;
|
||||
return (
|
||||
<MarkdownLink link={href} theme={theme} onLinkPress={onLinkPress}>
|
||||
<MarkdownLink link={href} theme={theme!} onLinkPress={onLinkPress}>
|
||||
{children}
|
||||
</MarkdownLink>
|
||||
);
|
||||
|
|
@ -261,7 +261,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
|
|||
// @ts-ignore
|
||||
const textStyle = styles[`heading${level}Text`];
|
||||
return (
|
||||
<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme].bodyText }]}>
|
||||
<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme!].bodyText }]}>
|
||||
{children}
|
||||
</Text>
|
||||
);
|
||||
|
|
@ -289,13 +289,13 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
|
|||
|
||||
renderBlockQuote = ({ children }: { children: JSX.Element }) => {
|
||||
const { theme } = this.props;
|
||||
return <MarkdownBlockQuote theme={theme}>{children}</MarkdownBlockQuote>;
|
||||
return <MarkdownBlockQuote theme={theme!}>{children}</MarkdownBlockQuote>;
|
||||
};
|
||||
|
||||
renderTable = ({ children, numColumns }: { children: JSX.Element; numColumns: number }) => {
|
||||
const { theme } = this.props;
|
||||
return (
|
||||
<MarkdownTable numColumns={numColumns} theme={theme}>
|
||||
<MarkdownTable numColumns={numColumns} theme={theme!}>
|
||||
{children}
|
||||
</MarkdownTable>
|
||||
);
|
||||
|
|
@ -354,4 +354,4 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
|
|||
}
|
||||
}
|
||||
|
||||
export default Markdown;
|
||||
export default withTheme(Markdown);
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { Provider } from 'react-redux';
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
|
||||
import NewMarkdown from '../../app/containers/markdown/new';
|
||||
import { themes } from '../../app/lib/constants';
|
||||
import { longText } from '../utils';
|
||||
import { NavigationDecorator } from '../StoryNavigator';
|
||||
import { store } from './index';
|
||||
import NewMarkdownComponent from '.';
|
||||
import { themes } from '../../../lib/constants';
|
||||
import { longText } from '../../../../.storybook/utils';
|
||||
|
||||
const stories = storiesOf('NewMarkdown', module)
|
||||
.addDecorator(story => <Provider store={store}>{story()}</Provider>)
|
||||
.addDecorator(NavigationDecorator);
|
||||
export default {
|
||||
title: 'NewMarkdown',
|
||||
decorators: [
|
||||
(Story: any) => (
|
||||
<NavigationContainer>
|
||||
<Story />
|
||||
</NavigationContainer>
|
||||
)
|
||||
]
|
||||
};
|
||||
|
||||
const theme = 'light';
|
||||
|
||||
|
|
@ -24,7 +27,7 @@ const styles = StyleSheet.create({
|
|||
}
|
||||
});
|
||||
|
||||
const getCustomEmoji = content => {
|
||||
const getCustomEmoji = (content: string) => {
|
||||
const customEmoji = {
|
||||
marioparty: { name: content, extension: 'gif' },
|
||||
nyan_rocket: { name: content, extension: 'png' }
|
||||
|
|
@ -33,6 +36,10 @@ const getCustomEmoji = content => {
|
|||
};
|
||||
const baseUrl = 'https://open.rocket.chat';
|
||||
|
||||
const NewMarkdown = ({ ...props }) => (
|
||||
<NewMarkdownComponent baseUrl={baseUrl} getCustomEmoji={getCustomEmoji} username='rocket.cat' {...props} />
|
||||
);
|
||||
|
||||
const simpleTextMsg = [
|
||||
{
|
||||
type: 'PARAGRAPH',
|
||||
|
|
@ -109,7 +116,7 @@ const sequentialEmptySpacesMsg = [
|
|||
}
|
||||
];
|
||||
|
||||
stories.add('Text', () => (
|
||||
export const Text = () => (
|
||||
<View style={styles.container}>
|
||||
<NewMarkdown tokens={simpleTextMsg} />
|
||||
<NewMarkdown tokens={longTextMsg} />
|
||||
|
|
@ -117,7 +124,7 @@ stories.add('Text', () => (
|
|||
<NewMarkdown tokens={sequentialEmptySpacesMsg} />
|
||||
<NewMarkdown tokens={[...simpleTextMsg, ...longTextMsg]} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
const allMentionTokens = [
|
||||
{
|
||||
|
|
@ -160,6 +167,17 @@ const multipleMentionTokens = [
|
|||
type: 'PLAIN_TEXT',
|
||||
value: ' '
|
||||
},
|
||||
{
|
||||
type: 'MENTION_USER',
|
||||
value: {
|
||||
type: 'PLAIN_TEXT',
|
||||
value: 'not_a_user'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'PLAIN_TEXT',
|
||||
value: ' '
|
||||
},
|
||||
{
|
||||
type: 'MENTION_USER',
|
||||
value: {
|
||||
|
|
@ -208,18 +226,12 @@ const multipleMentions = [
|
|||
}
|
||||
];
|
||||
|
||||
stories.add('Mentions', () => (
|
||||
export const Mentions = () => (
|
||||
<View style={styles.container}>
|
||||
<NewMarkdown tokens={allMentionTokens} mentions={allMentions} navToRoomInfo={() => {}} style={[]} />
|
||||
<NewMarkdown
|
||||
tokens={multipleMentionTokens}
|
||||
mentions={multipleMentions}
|
||||
navToRoomInfo={() => {}}
|
||||
style={[]}
|
||||
username='rocket.cat'
|
||||
/>
|
||||
<NewMarkdown tokens={multipleMentionTokens} mentions={multipleMentions} navToRoomInfo={() => {}} style={[]} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
const channelTokens = [
|
||||
{
|
||||
|
|
@ -254,11 +266,11 @@ const channelMention = [
|
|||
}
|
||||
];
|
||||
|
||||
stories.add('Hashtag', () => (
|
||||
export const Hashtag = () => (
|
||||
<View style={styles.container}>
|
||||
<NewMarkdown tokens={channelTokens} channels={channelMention} navToRoomInfo={() => {}} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
const bigEmojiTokens = [
|
||||
{
|
||||
|
|
@ -325,12 +337,12 @@ const emojiTokens = [
|
|||
}
|
||||
];
|
||||
|
||||
stories.add('Emoji', () => (
|
||||
export const Emoji = () => (
|
||||
<View style={styles.container}>
|
||||
<NewMarkdown tokens={bigEmojiTokens} />
|
||||
<NewMarkdown tokens={emojiTokens} getCustomEmoji={getCustomEmoji} baseUrl={baseUrl} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
const blockQuoteTokens = [
|
||||
{
|
||||
|
|
@ -363,11 +375,11 @@ const blockQuoteTokens = [
|
|||
}
|
||||
];
|
||||
|
||||
stories.add('Block quote', () => (
|
||||
export const BlockQuote = () => (
|
||||
<View style={styles.container}>
|
||||
<NewMarkdown tokens={blockQuoteTokens} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
const rocketChatLink = [
|
||||
{
|
||||
|
|
@ -411,14 +423,14 @@ const markdownLink = [
|
|||
}
|
||||
];
|
||||
|
||||
stories.add('Links', () => (
|
||||
export const Links = () => (
|
||||
<View style={styles.container}>
|
||||
<NewMarkdown tokens={rocketChatLink} />
|
||||
<NewMarkdown tokens={markdownLink} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Headers', () => (
|
||||
export const Headers = () => (
|
||||
<View style={styles.container}>
|
||||
<NewMarkdown
|
||||
tokens={[
|
||||
|
|
@ -505,7 +517,7 @@ stories.add('Headers', () => (
|
|||
]}
|
||||
/>
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
const inlineCodeToken = [
|
||||
{
|
||||
|
|
@ -538,12 +550,12 @@ const multilineCodeToken = [
|
|||
}
|
||||
];
|
||||
|
||||
stories.add('Code', () => (
|
||||
export const Code = () => (
|
||||
<View style={styles.container}>
|
||||
<NewMarkdown tokens={inlineCodeToken} style={[]} />
|
||||
<NewMarkdown tokens={multilineCodeToken} style={[]} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
const items = [
|
||||
[
|
||||
|
|
@ -685,13 +697,13 @@ const tasks = [
|
|||
}
|
||||
];
|
||||
|
||||
stories.add('Lists', () => (
|
||||
export const Lists = () => (
|
||||
<View style={styles.container}>
|
||||
<NewMarkdown tokens={unorederedListToken} mentions={listMentions} channels={listChannels} />
|
||||
<NewMarkdown tokens={orderedListToken} mentions={listMentions} channels={listChannels} />
|
||||
<NewMarkdown tokens={tasks} mentions={listMentions} channels={listChannels} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
const katex = [
|
||||
{
|
||||
|
|
@ -720,14 +732,14 @@ const inlineKatex = [
|
|||
}
|
||||
];
|
||||
|
||||
stories.add('Katex', () => (
|
||||
export const Katex = () => (
|
||||
<View style={styles.container}>
|
||||
<NewMarkdown tokens={katex} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Inline Katex', () => (
|
||||
export const InlineKatex = () => (
|
||||
<View style={styles.container}>
|
||||
<NewMarkdown tokens={inlineKatex} />
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
|
@ -4,20 +4,19 @@ import { OrderedList as OrderedListProps } from '@rocket.chat/message-parser';
|
|||
|
||||
import Inline from './Inline';
|
||||
import styles from '../styles';
|
||||
import { themes } from '../../../lib/constants';
|
||||
import { useTheme } from '../../../theme';
|
||||
|
||||
interface IOrderedListProps {
|
||||
value: OrderedListProps['value'];
|
||||
}
|
||||
|
||||
const OrderedList = ({ value }: IOrderedListProps) => {
|
||||
const { theme } = useTheme();
|
||||
const OrderedList = ({ value }: IOrderedListProps): React.ReactElement => {
|
||||
const { colors } = useTheme();
|
||||
return (
|
||||
<View>
|
||||
{value.map((item, index) => (
|
||||
<View style={styles.row}>
|
||||
<Text style={[styles.text, { color: themes[theme].bodyText }]}>{index + 1}. </Text>
|
||||
{value.map(item => (
|
||||
<View style={styles.row} key={item.number?.toString()}>
|
||||
<Text style={[styles.text, { color: colors.bodyText }]}>{item.number}. </Text>
|
||||
<Inline value={item.value} />
|
||||
</View>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import { withDimensions } from '../../dimensions';
|
|||
import { TGetCustomEmoji } from '../../definitions/IEmoji';
|
||||
import { IAttachment } from '../../definitions';
|
||||
import { TSupportedThemes } from '../../theme';
|
||||
import { downloadAudioFile } from '../../lib/methods/audioFile';
|
||||
|
||||
interface IButton {
|
||||
loading: boolean;
|
||||
|
|
@ -137,7 +138,10 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
|
|||
|
||||
this.setState({ loading: true });
|
||||
try {
|
||||
await this.sound.loadAsync({ uri: `${url}?rc_uid=${user.id}&rc_token=${user.token}` });
|
||||
if (url) {
|
||||
const audio = await downloadAudioFile(`${url}?rc_uid=${user.id}&rc_token=${user.token}`, url);
|
||||
await this.sound.loadAsync({ uri: audio });
|
||||
}
|
||||
} catch {
|
||||
// Do nothing
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { storiesOf } from '@storybook/react-native';
|
||||
import React from 'react';
|
||||
import { View } from 'react-native';
|
||||
|
||||
|
|
@ -19,9 +18,11 @@ const testAttachment = {
|
|||
collapsed: true
|
||||
};
|
||||
|
||||
const stories = storiesOf('Message', module);
|
||||
export default {
|
||||
title: 'CollapsibleQuote'
|
||||
};
|
||||
|
||||
stories.add('Item', () => (
|
||||
export const Item = () => (
|
||||
<View style={{ padding: 10 }}>
|
||||
<MessageContext.Provider
|
||||
value={{
|
||||
|
|
@ -32,4 +33,4 @@ stories.add('Item', () => (
|
|||
<CollapsibleQuote key={0} index={0} attachment={testAttachment} getCustomEmoji={() => {}} timeFormat='LT' />
|
||||
</MessageContext.Provider>
|
||||
</View>
|
||||
));
|
||||
);
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Message Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"collapsibleQuoteTouchable-Engineering (9 today)\\",\\"hitSlop\\":{\\"top\\":4,\\"right\\":4,\\"bottom\\":4,\\"left\\":4},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"minHeight\\":40,\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderLeftColor\\":\\"#CBCED1\\",\\"borderTopColor\\":\\"#e1e5e8\\",\\"borderRightColor\\":\\"#e1e5e8\\",\\"borderBottomColor\\":\\"#e1e5e8\\",\\"borderLeftWidth\\":2,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"padding\\":8}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Engineering (9 today)\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":20,\\"height\\":20,\\"right\\":8,\\"top\\":8,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":22,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}"`;
|
||||
|
|
@ -1,23 +1,18 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet } from 'react-native';
|
||||
import { Provider } from 'react-redux';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { ScrollView } from 'react-native';
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
|
||||
import MessageComponent from '../../app/containers/message/Message';
|
||||
import { E2E_MESSAGE_TYPE, messagesStatus, themes } from '../../app/lib/constants';
|
||||
import MessageSeparator from '../../app/views/RoomView/Separator';
|
||||
import MessageContext from '../../app/containers/message/Context';
|
||||
import { store } from './index';
|
||||
import MessageComponent from './Message';
|
||||
import { E2E_MESSAGE_TYPE, messagesStatus, themes } from '../../lib/constants';
|
||||
import MessageSeparator from '../../views/RoomView/Separator';
|
||||
import MessageContext from './Context';
|
||||
|
||||
const _theme = 'light';
|
||||
|
||||
const styles = StyleSheet.create({});
|
||||
|
||||
const user = {
|
||||
id: 'y8bd77ptZswPj3EW8',
|
||||
username: 'diego.mello',
|
||||
token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz'
|
||||
token: 'abc'
|
||||
};
|
||||
const author = {
|
||||
_id: 'userid',
|
||||
|
|
@ -34,7 +29,7 @@ const date = new Date(2017, 10, 10, 10);
|
|||
const longText =
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
|
||||
|
||||
const getCustomEmoji = content => {
|
||||
const getCustomEmoji = (content: string) => {
|
||||
const customEmoji = {
|
||||
marioparty: { name: content, extension: 'gif' },
|
||||
react_rocket: { name: content, extension: 'png' },
|
||||
|
|
@ -43,7 +38,12 @@ const getCustomEmoji = content => {
|
|||
return customEmoji;
|
||||
};
|
||||
|
||||
export const MessageDecorator = story => (
|
||||
export default {
|
||||
title: 'Message',
|
||||
decorators: [
|
||||
(Story: any) => (
|
||||
<NavigationContainer>
|
||||
<ScrollView style={{ backgroundColor: themes[_theme].backgroundColor }}>
|
||||
<MessageContext.Provider
|
||||
value={{
|
||||
user,
|
||||
|
|
@ -59,11 +59,15 @@ export const MessageDecorator = story => (
|
|||
threadBadgeColor: themes.light.tunreadColor
|
||||
}}
|
||||
>
|
||||
{story()}
|
||||
<Story />
|
||||
</MessageContext.Provider>
|
||||
);
|
||||
</ScrollView>
|
||||
</NavigationContainer>
|
||||
)
|
||||
]
|
||||
};
|
||||
|
||||
export const Message = props => (
|
||||
export const Message = (props: any) => (
|
||||
<MessageComponent
|
||||
baseUrl={baseUrl}
|
||||
user={user}
|
||||
|
|
@ -77,23 +81,14 @@ export const Message = props => (
|
|||
/>
|
||||
);
|
||||
|
||||
export const StoryProvider = story => <Provider store={store}>{story()}</Provider>;
|
||||
|
||||
const MessageScrollView = story => <ScrollView style={{ backgroundColor: themes[_theme].backgroundColor }}>{story()}</ScrollView>;
|
||||
|
||||
const stories = storiesOf('Message', module)
|
||||
.addDecorator(StoryProvider)
|
||||
.addDecorator(MessageScrollView)
|
||||
.addDecorator(MessageDecorator);
|
||||
|
||||
stories.add('Basic', () => (
|
||||
export const Basic = () => (
|
||||
<>
|
||||
<Message msg='Message' />
|
||||
<Message msg={longText} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Grouped messages', () => (
|
||||
export const GroupedMessages = () => (
|
||||
<>
|
||||
<Message msg='...' />
|
||||
<Message
|
||||
|
|
@ -107,11 +102,11 @@ stories.add('Grouped messages', () => (
|
|||
<Message msg='This is the second message' isHeader={false} />
|
||||
<Message msg='This is the first message' />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Without header', () => <Message msg='Message' isHeader={false} />);
|
||||
export const WithoutHeader = () => <Message msg='Message' isHeader={false} />;
|
||||
|
||||
stories.add('With alias', () => (
|
||||
export const WithAlias = () => (
|
||||
<>
|
||||
<Message msg='Message' alias='Diego Mello' />
|
||||
<Message
|
||||
|
|
@ -123,16 +118,16 @@ stories.add('With alias', () => (
|
|||
alias='Diego Mello'
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Edited', () => (
|
||||
export const Edited = () => (
|
||||
<>
|
||||
<Message msg='Message header' isEdited />
|
||||
<Message msg='Message without header' isEdited isHeader={false} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Encrypted', () => (
|
||||
export const Encrypted = () => (
|
||||
<>
|
||||
<Message msg='Message' type='e2e' />
|
||||
<Message msg='Message Encrypted without Header' isHeader={false} type='e2e' />
|
||||
|
|
@ -168,29 +163,29 @@ stories.add('Encrypted', () => (
|
|||
<Message msg='Read Receipt encrypted with Header' isReadReceiptEnabled read type='e2e' />
|
||||
<Message msg='Read Receipt encrypted without Header' isReadReceiptEnabled read isHeader={false} type='e2e' />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Block Quote', () => (
|
||||
export const BlockQuote = () => (
|
||||
<>
|
||||
<Message msg='> Testing block quote' />
|
||||
<Message msg={'> Testing block quote\nTesting block quote'} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Lists', () => (
|
||||
export const Lists = () => (
|
||||
<>
|
||||
<Message msg={'* Dogs\n * cats\n - cats'} />
|
||||
<Message msg={'1. Dogs \n 2. Cats'} />
|
||||
<Message msg='1. Dogs' />
|
||||
<Message msg='2. Cats' isHeader={false} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Static avatar', () => (
|
||||
export const StaticAvatar = () => (
|
||||
<Message msg='Message' avatar='https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg' />
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Full name', () => (
|
||||
export const FullName = () => (
|
||||
<Message
|
||||
msg='Message'
|
||||
author={{
|
||||
|
|
@ -200,9 +195,9 @@ stories.add('Full name', () => (
|
|||
}}
|
||||
useRealName
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Mentions', () => (
|
||||
export const Mentions = () => (
|
||||
<>
|
||||
<Message
|
||||
msg='@rocket.cat @diego.mello @all @here #general'
|
||||
|
|
@ -249,9 +244,9 @@ stories.add('Mentions', () => (
|
|||
]}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Emojis', () => (
|
||||
export const Emojis = () => (
|
||||
<>
|
||||
<Message msg='👊🤙👏' />
|
||||
<Message msg='👏' />
|
||||
|
|
@ -260,11 +255,11 @@ stories.add('Emojis', () => (
|
|||
<Message msg='🤙:react_rocket:' />
|
||||
<Message msg='🤙:react_rocket:🤙🤙' />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Time format', () => <Message msg='Testing' timeFormat='DD MMMM YYYY' />);
|
||||
export const TimeFormat = () => <Message msg='Testing' timeFormat='DD MMMM YYYY' />;
|
||||
|
||||
stories.add('Reactions', () => (
|
||||
export const Reactions = () => (
|
||||
<>
|
||||
<Message
|
||||
msg='Reactions'
|
||||
|
|
@ -327,9 +322,9 @@ stories.add('Reactions', () => (
|
|||
onReactionPress={() => {}}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Date and Unread separators', () => (
|
||||
export const DateAndUnreadSeparators = () => (
|
||||
<>
|
||||
<Message
|
||||
msg='Fourth message'
|
||||
|
|
@ -338,9 +333,9 @@ stories.add('Date and Unread separators', () => (
|
|||
username: 'rocket.cat'
|
||||
}}
|
||||
/>
|
||||
<MessageSeparator ts={date} unread theme={_theme} />
|
||||
<MessageSeparator ts={date} unread />
|
||||
<Message msg='Third message' />
|
||||
<MessageSeparator unread theme={_theme} />
|
||||
<MessageSeparator unread ts={null} />
|
||||
<Message
|
||||
msg='Second message'
|
||||
author={{
|
||||
|
|
@ -356,12 +351,12 @@ stories.add('Date and Unread separators', () => (
|
|||
username: 'rocket.cat'
|
||||
}}
|
||||
/>
|
||||
<MessageSeparator ts={date} theme={_theme} />
|
||||
<MessageSeparator ts={date} unread={false} />
|
||||
<Message msg='First message' />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('With image', () => (
|
||||
export const WithImage = () => (
|
||||
<>
|
||||
<Message
|
||||
attachments={[
|
||||
|
|
@ -382,9 +377,9 @@ stories.add('With image', () => (
|
|||
]}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('With video', () => (
|
||||
export const WithVideo = () => (
|
||||
<>
|
||||
<Message
|
||||
attachments={[
|
||||
|
|
@ -404,9 +399,9 @@ stories.add('With video', () => (
|
|||
]}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('With audio', () => (
|
||||
export const WithAudio = () => (
|
||||
<>
|
||||
<Message
|
||||
attachments={[
|
||||
|
|
@ -447,9 +442,9 @@ stories.add('With audio', () => (
|
|||
isHeader={false}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('With file', () => (
|
||||
export const WithFile = () => (
|
||||
<>
|
||||
<Message
|
||||
attachments={[
|
||||
|
|
@ -469,9 +464,9 @@ stories.add('With file', () => (
|
|||
isHeader={false}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Message with reply', () => (
|
||||
export const MessageWithReply = () => (
|
||||
<>
|
||||
<Message
|
||||
msg="I'm fine!"
|
||||
|
|
@ -514,18 +509,18 @@ stories.add('Message with reply', () => (
|
|||
]}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Message with read receipt', () => (
|
||||
export const MessageWithReadReceipt = () => (
|
||||
<>
|
||||
<Message msg="I'm fine!" isReadReceiptEnabled unread />
|
||||
<Message msg="I'm fine!" isReadReceiptEnabled unread isHeader={false} />
|
||||
<Message msg="I'm fine!" isReadReceiptEnabled read />
|
||||
<Message msg="I'm fine!" isReadReceiptEnabled read isHeader={false} />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Message with thread', () => (
|
||||
export const MessageWithThread = () => (
|
||||
<>
|
||||
<Message msg='How are you?' tcount={1} tlm={date} />
|
||||
<Message msg="I'm fine!" tmid='1' tmsg='How are you?' isThreadReply />
|
||||
|
|
@ -546,9 +541,9 @@ stories.add('Message with thread', () => (
|
|||
isThreadReply
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Sequential thread messages following thread button', () => (
|
||||
export const SequentialThreadMessagesFollowingThreadButton = () => (
|
||||
<>
|
||||
<Message msg='How are you?' tcount={1} tlm={date} />
|
||||
<Message msg="I'm fine!" tmid='1' isThreadSequential />
|
||||
|
|
@ -565,9 +560,9 @@ stories.add('Sequential thread messages following thread button', () => (
|
|||
isThreadSequential
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Sequential thread messages following thread reply', () => (
|
||||
export const SequentialThreadMessagesFollowingThreadReply = () => (
|
||||
<>
|
||||
<Message msg="I'm fine!" tmid='1' tmsg='How are you?' isThreadReply />
|
||||
<Message msg='Cool!' tmid='1' isThreadSequential />
|
||||
|
|
@ -584,18 +579,18 @@ stories.add('Sequential thread messages following thread reply', () => (
|
|||
isThreadSequential
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Discussion', () => (
|
||||
export const Discussion = () => (
|
||||
<>
|
||||
<Message type='discussion-created' drid='aisduhasidhs' dcount={null} dlm={null} msg='This is a discussion' />
|
||||
<Message type='discussion-created' drid='aisduhasidhs' dcount={1} dlm={date} msg='This is a discussion' />
|
||||
<Message type='discussion-created' drid='aisduhasidhs' dcount={10} dlm={date} msg={longText} />
|
||||
<Message type='discussion-created' drid='aisduhasidhs' dcount={1000} dlm={date} msg='This is a discussion' />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('URL', () => (
|
||||
export const URL = () => (
|
||||
<>
|
||||
<Message
|
||||
urls={[
|
||||
|
|
@ -637,9 +632,9 @@ stories.add('URL', () => (
|
|||
isHeader={false}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Custom fields', () => (
|
||||
export const CustomFields = () => (
|
||||
<>
|
||||
<Message
|
||||
msg='Message'
|
||||
|
|
@ -675,9 +670,9 @@ stories.add('Custom fields', () => (
|
|||
]}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Two short custom fields with markdown', () => (
|
||||
export const TwoShortCustomFieldsWithMarkdown = () => (
|
||||
<Message
|
||||
msg='Message'
|
||||
attachments={[
|
||||
|
|
@ -719,9 +714,9 @@ stories.add('Two short custom fields with markdown', () => (
|
|||
}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Colored attachments', () => (
|
||||
export const ColoredAttachments = () => (
|
||||
<Message
|
||||
attachments={[
|
||||
{
|
||||
|
|
@ -771,13 +766,13 @@ stories.add('Colored attachments', () => (
|
|||
}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Broadcast', () => <Message msg='Broadcasted message' broadcast replyBroadcast={() => alert('broadcast!')} />);
|
||||
export const Broadcast = () => <Message msg='Broadcasted message' broadcast replyBroadcast={() => alert('broadcast!')} />;
|
||||
|
||||
stories.add('Archived', () => <Message msg='This message is inside an archived room' archived />);
|
||||
export const Archived = () => <Message msg='This message is inside an archived room' archived />;
|
||||
|
||||
stories.add('Error', () => (
|
||||
export const Error = () => (
|
||||
<>
|
||||
<Message hasError msg='This message has error' status={messagesStatus.ERROR} onErrorPress={() => alert('Error pressed')} />
|
||||
<Message
|
||||
|
|
@ -788,13 +783,13 @@ stories.add('Error', () => (
|
|||
isHeader={false}
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Temp', () => <Message msg='Temp message' status={messagesStatus.TEMP} isTemp />);
|
||||
export const Temp = () => <Message msg='Temp message' status={messagesStatus.TEMP} isTemp />;
|
||||
|
||||
stories.add('Editing', () => <Message msg='Message being edited' editing />);
|
||||
export const Editing = () => <Message msg='Message being edited' editing />;
|
||||
|
||||
stories.add('System messages', () => (
|
||||
export const SystemMessages = () => (
|
||||
<>
|
||||
<Message type='rm' isInfo />
|
||||
<Message type='uj' isInfo />
|
||||
|
|
@ -833,13 +828,13 @@ stories.add('System messages', () => (
|
|||
<Message type='user-deleted-room-from-team' isInfo msg='channel-name' />
|
||||
<Message type='user-removed-room-from-team' isInfo msg='channel-name' />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Ignored', () => <Message isIgnored />);
|
||||
export const Ignored = () => <Message isIgnored />;
|
||||
|
||||
stories.add('Custom style', () => <Message msg='Message' style={[styles.normalize, { backgroundColor: '#ddd' }]} />);
|
||||
export const CustomStyle = () => <Message msg='Message' style={[{ backgroundColor: '#ddd' }]} />;
|
||||
|
||||
stories.add('Show a button as attachment', () => (
|
||||
export const ShowButtonAsAttachment = () => (
|
||||
<Message
|
||||
attachments={[
|
||||
{
|
||||
|
|
@ -855,9 +850,9 @@ stories.add('Show a button as attachment', () => (
|
|||
}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Thumbnail from server', () => (
|
||||
export const ThumbnailFromServer = () => (
|
||||
<Message
|
||||
msg='this is a thumbnail'
|
||||
attachments={[
|
||||
|
|
@ -869,9 +864,9 @@ stories.add('Thumbnail from server', () => (
|
|||
}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Long Name user', () => (
|
||||
export const LongNameUser = () => (
|
||||
<>
|
||||
<Message msg={'this is a normal message'} author={longNameAuthor} />
|
||||
<Message msg={'Edited message'} author={longNameAuthor} isEdited />
|
||||
|
|
@ -911,4 +906,4 @@ stories.add('Long Name user', () => (
|
|||
read
|
||||
/>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
|
@ -27,7 +27,7 @@ const styles = StyleSheet.create({
|
|||
flexShrink: 1,
|
||||
fontSize: 16,
|
||||
lineHeight: 22,
|
||||
...sharedStyles.textMedium
|
||||
...sharedStyles.textSemibold
|
||||
},
|
||||
usernameInfoMessage: {
|
||||
fontSize: 16,
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { ActionSheetProvider } from './containers/ActionSheet';
|
|||
import InAppNotification from './containers/InAppNotification';
|
||||
import Toast from './containers/Toast';
|
||||
import TwoFactor from './containers/TwoFactor';
|
||||
import Loading from './containers/Loading';
|
||||
import { ICommand } from './definitions/ICommand';
|
||||
import { IThemePreference } from './definitions/ITheme';
|
||||
import { DimensionsContext } from './dimensions';
|
||||
|
|
@ -231,6 +232,7 @@ const Root = () => {
|
|||
<ChangePasscodeView />
|
||||
<InAppNotification />
|
||||
<Toast />
|
||||
<Loading />
|
||||
</ActionSheetProvider>
|
||||
</GestureHandlerRootView>
|
||||
</DimensionsContext.Provider>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
import * as FileSystem from 'expo-file-system';
|
||||
|
||||
import { store } from '../store/auxStore';
|
||||
import log from './helpers/log';
|
||||
|
||||
const ensureDirAsync = async (dir: string, intermediates = true): Promise<void> => {
|
||||
const info = await FileSystem.getInfoAsync(dir);
|
||||
if (info.exists && info.isDirectory) {
|
||||
return;
|
||||
}
|
||||
await FileSystem.makeDirectoryAsync(dir, { intermediates });
|
||||
return ensureDirAsync(dir, intermediates);
|
||||
};
|
||||
|
||||
export const downloadAudioFile = async (url: string, fileUrl: string): Promise<string> => {
|
||||
let path = '';
|
||||
try {
|
||||
const serverUrl = store.getState().server.server;
|
||||
const serverUrlParsed = serverUrl.substring(serverUrl.lastIndexOf('/') + 1);
|
||||
const folderPath = `${FileSystem.documentDirectory}audios/${serverUrlParsed}`;
|
||||
const filePath = `${folderPath}/${fileUrl.substring(fileUrl.lastIndexOf('/') + 1)}`;
|
||||
await ensureDirAsync(folderPath);
|
||||
const file = await FileSystem.getInfoAsync(filePath);
|
||||
if (!file.exists) {
|
||||
const downloadedFile = await FileSystem.downloadAsync(url, filePath);
|
||||
path = downloadedFile.uri;
|
||||
} else {
|
||||
path = file.uri;
|
||||
}
|
||||
} catch (error) {
|
||||
log(error);
|
||||
}
|
||||
return path;
|
||||
};
|
||||
|
||||
export const deleteAllAudioFiles = async (serverUrl: string): Promise<void> => {
|
||||
try {
|
||||
const serverUrlParsed = serverUrl.substring(serverUrl.lastIndexOf('/') + 1);
|
||||
const path = `${FileSystem.documentDirectory}audios/${serverUrlParsed}`;
|
||||
await FileSystem.deleteAsync(path);
|
||||
} catch (error) {
|
||||
log(error);
|
||||
}
|
||||
};
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import AsyncStorage from '@react-native-community/async-storage';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
import { ANALYTICS_EVENTS_KEY, CRASH_REPORT_KEY } from '../constants';
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ type TEventEmitterEmmitArgs =
|
|||
| { invalid: boolean }
|
||||
| { force: boolean }
|
||||
| { hasBiometry: boolean }
|
||||
| { visible: boolean; onCancel?: null | Function }
|
||||
| { event: string | ICommand }
|
||||
| { cancel: () => void }
|
||||
| { submit: (param: string) => void }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import * as LocalAuthentication from 'expo-local-authentication';
|
||||
import RNBootSplash from 'react-native-bootsplash';
|
||||
import AsyncStorage from '@react-native-community/async-storage';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { sha256 } from 'js-sha256';
|
||||
import moment from 'moment';
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { DarkTheme, DefaultTheme } from '@react-navigation/native';
|
|||
import { themes } from '../../../constants';
|
||||
import { TSupportedThemes } from '../../../../theme';
|
||||
import { isIOS } from '../deviceInfo';
|
||||
import sharedStyles from '../../../../views/Styles';
|
||||
|
||||
export * from './animations';
|
||||
|
||||
|
|
@ -36,7 +37,7 @@ export const themedHeader = (theme: TSupportedThemes) => ({
|
|||
backgroundColor: themes[theme].headerBackground
|
||||
},
|
||||
headerTintColor: themes[theme].headerTintColor,
|
||||
headerTitleStyle: { color: themes[theme].headerTitleColor }
|
||||
headerTitleStyle: { ...sharedStyles.textSemibold, color: themes[theme].headerTitleColor, fontSize: 18 }
|
||||
});
|
||||
|
||||
export const navigationTheme = (theme: TSupportedThemes) => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Alert, Linking } from 'react-native';
|
||||
import AsyncStorage from '@react-native-community/async-storage';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
import I18n from '../../../i18n';
|
||||
import { isFDroidBuild, STORE_REVIEW_LINK } from '../../constants';
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
import React from 'react';
|
||||
import { RectButton, RectButtonProps } from 'react-native-gesture-handler';
|
||||
|
||||
import { TSupportedThemes } from '../../../theme';
|
||||
import { themes } from '../../constants';
|
||||
|
||||
interface ITouchProps extends RectButtonProps {
|
||||
children: React.ReactNode;
|
||||
theme: TSupportedThemes;
|
||||
accessibilityLabel?: string;
|
||||
testID?: string;
|
||||
}
|
||||
|
||||
class Touch extends React.Component<ITouchProps> {
|
||||
private ref: any;
|
||||
|
||||
setNativeProps(props: ITouchProps): void {
|
||||
this.ref.setNativeProps(props);
|
||||
}
|
||||
|
||||
getRef = (ref: RectButton): void => {
|
||||
this.ref = ref;
|
||||
};
|
||||
|
||||
render(): JSX.Element {
|
||||
const { children, onPress, theme, underlayColor, ...props } = this.props;
|
||||
|
||||
return (
|
||||
<RectButton
|
||||
ref={this.getRef}
|
||||
onPress={onPress}
|
||||
activeOpacity={1}
|
||||
underlayColor={underlayColor || themes[theme].bannerBackground}
|
||||
rippleColor={themes[theme].bannerBackground}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</RectButton>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Touch;
|
||||
|
|
@ -11,7 +11,7 @@ export function parseSettings(settings: any) {
|
|||
);
|
||||
}
|
||||
return ret;
|
||||
});
|
||||
}, {});
|
||||
}
|
||||
|
||||
export function _prepareSettings(settings: any) {
|
||||
|
|
|
|||
|
|
@ -45,16 +45,15 @@ function connect({ server, logoutOnError = false }: { server: string; logoutOnEr
|
|||
if (sdk.current?.client?.host === server) {
|
||||
return resolve();
|
||||
}
|
||||
|
||||
// Check for running requests and abort them before connecting to the server
|
||||
abort();
|
||||
|
||||
disconnect();
|
||||
database.setActiveDB(server);
|
||||
|
||||
store.dispatch(connectRequest());
|
||||
|
||||
// It's not called anywhere else
|
||||
// if (this.connectTimeout) {
|
||||
// clearTimeout(this.connectTimeout);
|
||||
// }
|
||||
|
||||
if (connectingListener) {
|
||||
connectingListener.then(stopListener);
|
||||
}
|
||||
|
|
@ -374,7 +373,6 @@ function abort() {
|
|||
if (sdk.current) {
|
||||
return sdk.current.abort();
|
||||
}
|
||||
return new AbortController();
|
||||
}
|
||||
|
||||
function checkAndReopen() {
|
||||
|
|
|
|||
|
|
@ -866,7 +866,7 @@ export const getRoomMembers = async ({
|
|||
allUsers: boolean;
|
||||
type: 'all' | 'online';
|
||||
roomType: SubscriptionType;
|
||||
filter: boolean;
|
||||
filter: string;
|
||||
skip: number;
|
||||
limit: number;
|
||||
}) => {
|
||||
|
|
@ -888,9 +888,7 @@ export const getRoomMembers = async ({
|
|||
}
|
||||
// RC 0.42.0
|
||||
const result = await sdk.methodCallWrapper('getUsersOfRoom', rid, allUsers, { skip, limit });
|
||||
if (result.success) {
|
||||
return result?.records;
|
||||
}
|
||||
};
|
||||
|
||||
export const e2eFetchMyKeys = async () => {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { twoFactor } from './twoFactor';
|
|||
import { isSsl } from '../methods/helpers/url';
|
||||
import { store as reduxStore } from '../store/auxStore';
|
||||
import { Serialized, MatchPathPattern, OperationParams, PathFor, ResultFor } from '../../definitions/rest/helpers';
|
||||
import { random } from '../methods/helpers';
|
||||
|
||||
class Sdk {
|
||||
private sdk: typeof Rocketchat;
|
||||
|
|
@ -140,7 +141,7 @@ class Sdk {
|
|||
const url = isEmpty(user) ? 'method.callAnon' : 'method.call';
|
||||
// @ts-ignore
|
||||
return this.post(`${url}/${method}`, {
|
||||
message: EJSON.stringify({ method, params })
|
||||
message: EJSON.stringify({ msg: 'method', id: random(10), method, params })
|
||||
});
|
||||
}
|
||||
const parsedParams = params.map(param => {
|
||||
|
|
|
|||
|
|
@ -108,9 +108,6 @@ const handleSelectServer = function* handleSelectServer({ server, version, fetch
|
|||
const basicAuth = UserPreferences.getString(`${BASIC_AUTH_KEY}-${server}`);
|
||||
setBasicAuth(basicAuth);
|
||||
|
||||
// Check for running requests and abort them before connecting to the server
|
||||
Services.abort();
|
||||
|
||||
if (user) {
|
||||
yield put(clearSettings());
|
||||
yield put(setUser(user));
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue