@messenger-box/platform-browser 10.0.3-alpha.17 → 10.0.3-alpha.171

package/src/components/post/post_list_virtualized/post_list_virtualized.tsx

@@ -1,269 +0,0 @@
-import React, { useState } from 'react';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import { DynamicSizeList } from 'dynamic-virtualized-list';
-
-// import {isDateLine, isStartOfNewMessages} from 'mattermost-redux/utils/post_list';
-
-// import EventEmitter from 'mattermost-redux/utils/event_emitter';
-
-// import Constants, {PostListRowListIds, EventTypes, PostRequestTypes} from 'utils/constants';
-// import DelayedAction from 'utils/delayed_action';
-// import {getPreviousPostId, getLatestPostId, getNewMessageIndex} from 'utils/post_utils';
-// import * as Utils from '../../../utils/utils';
-
-import { LatestPostReader } from './latest_post_reader';
-import { PostListRow } from '../post_list_row/post_list_row';
-import { Toggle } from 'react-bootstrap/lib/Dropdown';
-
-const OVERSCAN_COUNT_BACKWARD = 80;
-const OVERSCAN_COUNT_FORWARD = 80;
-const HEIGHT_TRIGGER_FOR_MORE_POSTS = 1000;
-const BUFFER_TO_BE_CONSIDERED_BOTTOM = 10;
-
-const MAXIMUM_POSTS_FOR_SLICING = {
-    channel: 50,
-    permalink: 100,
-};
-
-const postListStyle = {
-    padding: '14px 0px 7px',
-};
-
-const virtListStyles = {
-    position: 'absolute',
-    bottom: '0',
-    maxHeight: '100%',
-};
-
-const OFFSET_TO_SHOW_TOAST = -50;
-
-export const VirtPostList = (props) => {
-    const [postListIds, setPostListIds] = useState(['a', 'b', 'c', 'd']);
-    const [postConfig, setPostConfig] = useState({
-        isScrolling: false,
-        isMobile: Boolean,
-        /* Intentionally setting null so that toast can determine when the first time this state is defined */
-        atBottom: null,
-        lastViewedBottom: Date.now(),
-        // postListIds: [channelIntroMessage],
-        topPostId: '',
-        postMenuOpened: false,
-        dynamicListStyle: {
-            willChange: 'transform',
-        },
-        initScrollCompleted: false,
-        initScrollOffsetFromBottom: 0,
-
-        showSearchHint: false,
-        isSearchHintDismissed: false,
-    });
-    const listRef = React.createRef();
-    const postListRef = React.createRef();
-
-    const renderToasts = (width) => {
-        return (
-            <h1>here is toste</h1>
-            // <ToastWrapper
-            //     atLatestPost={props.atLatestPost}
-            //     postListIds={state.postListIds}
-            //     atBottom={state.atBottom}
-            //     width={width}
-            //     lastViewedBottom={state.lastViewedBottom}
-            //     latestPostTimeStamp={props.latestPostTimeStamp}
-            //     scrollToNewMessage={scrollToNewMessage}
-            //     scrollToLatestMessages={scrollToLatestMessages}
-            //     updateNewMessagesAtInChannel={updateNewMessagesAtInChannel}
-            //     updateLastViewedBottomAt={updateLastViewedBottomAt}
-            //     channelId={props.channelId}
-            //     focusedPostId={props.focusedPostId}
-            //     initScrollOffsetFromBottom={state.initScrollOffsetFromBottom}
-            //     onSearchHintDismiss={handleSearchHintDismiss}
-            //     showSearchHintToast={state.showSearchHint}
-            // />
-        );
-    };
-
-    const togglePostMenu = (opened) => {
-        console.log('Toggle');
-        // const dynamicListStyle = this.state.dynamicListStyle;
-        // if (this.state.isMobile) {
-        //     dynamicListStyle.willChange = opened ? 'unset' : 'transform';
-        // }
-
-
-        // this.setState({
-        //     postMenuOpened: opened,
-        //     dynamicListStyle,
-        // });
-    };
-    const renderRow = () => {
-        // let data = postListIds;
-        // const index = data.indexOf(itemId);
-        // let className = '';
-        // const basePaddingClass = 'post-row__padding';
-        // const previousItemId = index !== -1 && index < data.length - 1 ? data[index + 1] : '';
-        // const nextItemId = index > 0 && index < data.length ? data[index - 1] : '';
-
-        // if (isDateLine(nextItemId) || isStartOfNewMessages(nextItemId)) {
-        //     className += basePaddingClass + ' bottom';
-        // }
-
-        // if (isDateLine(previousItemId) || isStartOfNewMessages(previousItemId)) {
-        //     if (className.includes(basePaddingClass)) {
-        //         className += ' top';
-        //     } else {
-        //         className += basePaddingClass + ' top';
-        //     }
-        // }
-
-        // Since the first in the list is the latest message
-        // const isLastPost = itemId === postListIds[0];
-
-        return (
-            <div>
-                <PostListRow
-                // listId={itemId}
-                // previousListId={getPreviousPostId(data, index)}
-                // shouldHighlight={itemId === props.focusedPostId}
-                // loadOlderPosts={this.props.actions.loadOlderPosts}
-                // loadNewerPosts={this.props.actions.loadNewerPosts}
-                togglePostMenu={togglePostMenu}
-                // isLastPost={isLastPost}
-                // loadingNewerPosts={this.props.loadingNewerPosts}
-                // loadingOlderPosts={this.props.loadingOlderPosts}
-                />
-            </div>
-        );
-    };
-
-    const onScroll = ({ scrollDirection, scrollOffset, scrollUpdateWasRequested, clientHeight, scrollHeight }) => {
-        if (scrollHeight <= 0) {
-            return;
-        }
-
-        const didUserScrollBackwards = scrollDirection === 'backward' && !scrollUpdateWasRequested;
-        const didUserScrollForwards = scrollDirection === 'forward' && !scrollUpdateWasRequested;
-        const isOffsetWithInRange = scrollOffset < HEIGHT_TRIGGER_FOR_MORE_POSTS;
-        const offsetFromBottom = scrollHeight - clientHeight - scrollOffset;
-        const shouldLoadNewPosts = offsetFromBottom < HEIGHT_TRIGGER_FOR_MORE_POSTS;
-
-        // if (didUserScrollBackwards && isOffsetWithInRange && !this.props.atOldestPost) {
-        //     this.props.actions.loadOlderPosts();
-        // } else if (didUserScrollForwards && shouldLoadNewPosts && !this.props.atLatestPost) {
-        //     this.props.actions.loadNewerPosts();
-        // }
-
-        // if (this.state.isMobile) {
-        //     if (!this.state.isScrolling) {
-        //         this.setState({
-        //             isScrolling: true,
-        //         });
-        //     }
-
-        //     if (this.scrollStopAction) {
-        //         this.scrollStopAction.fireAfter(Constants.SCROLL_DELAY);
-        //     }
-        // }
-
-        // this.checkBottom(scrollOffset, scrollHeight, clientHeight);
-
-        // if (scrollUpdateWasRequested) {
-        //     //if scroll change is programatically requested i.e by calling scrollTo
-        //     //This is a private method on virtlist
-        //     const postsRenderedRange = this.listRef.current._getRangeToRender(); //eslint-disable-line no-underscore-dangle
-
-        //     // postsRenderedRange[3] is the visibleStopIndex which is post at the bottom of the screen
-        //     if (postsRenderedRange[3] <= 1 && !this.props.atLatestPost) {
-        //         this.props.actions.canLoadMorePosts(PostRequestTypes.AFTER_ID);
-        //     }
-
-        //     if (!this.state.atBottom && scrollHeight) {
-        //         this.setState({
-        //             initScrollOffsetFromBottom: offsetFromBottom,
-        //         });
-        //     }
-        // }
-
-        // if (this.state.isMobile && this.state.showSearchHint) {
-        //     this.setState({
-        //         showSearchHint: false,
-        //     });
-        // }
-
-        // if (!this.state.isMobile && !this.state.isSearchHintDismissed) {
-        //     this.setState({
-        //         showSearchHint: offsetFromBottom > this.showSearchHintThreshold,
-        //     });
-        // }
-    };
-
-    const initScrollToIndex = () => {
-        console.log('initila scroll');
-        // if (this.props.focusedPostId) {
-        //     const index = this.state.postListIds.findIndex(
-        //         (item) => item === this.props.focusedPostId,
-        //     );
-        //     return {
-        //         index,
-        //         position: 'center',
-        //     };
-        // }
-
-        // const newMessagesSeparatorIndex = getNewMessageIndex(this.state.postListIds);
-
-        // if (newMessagesSeparatorIndex > 0) {
-        //     // if there is a dateLine above START_OF_NEW_MESSAGES then scroll to date line
-        //     if (isDateLine(this.state.postListIds[newMessagesSeparatorIndex + 1])) {
-        //         return {
-        //             index: newMessagesSeparatorIndex + 1,
-        //             position: 'start',
-        //             offset: OFFSET_TO_SHOW_TOAST,
-        //         };
-        //     }
-        //     return {
-        //         index: newMessagesSeparatorIndex,
-        //         position: 'start',
-        //         offset: OFFSET_TO_SHOW_TOAST,
-        //     };
-        // }
-
-        // return {
-        //     index: 0,
-        //     position: 'end',
-        // };
-    };
-    return (
-        <div
-            role="list"
-            className="a11y__region"
-            // data-a11y-sort-order="1"
-            // data-a11y-focus-child={true}
-            // data-a11y-order-reversed={true}
-            // data-a11y-loop-navigation={false}
-            // aria-label={Utils.localizeMessage('accessibility.sections.centerContent', 'message list main region')}
-        >
-            {/* {state.isMobile && (
-                <React.Fragment>
-                    <FloatingTimestamp
-                        isScrolling={state.isScrolling}
-                        isMobile={true}
-                        postId={state.topPostId}
-                    />
-                    <ScrollToBottomArrows
-                        isScrolling={state.isScrolling}
-                        atBottom={state.atBottom}
-                        onClick={scrollToBottom}
-                        />
-                        </React.Fragment>
-                    )} */}
-            <div role="presentation" className="post-list-holder-by-time" key={'postlist-' + 2}>
-                <div role="presentation" className="post-list__table">
-                    <div id="postListContent" className="post-list__content">
-                        {/* <LatestPostReader /> */}
-                        {renderRow()}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};

package/src/components/post/post_markdown/index.test.js

@@ -1,119 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-import assert from 'assert';
-
-import {TestHelper} from 'utils/test_helper';
-
-import {makeGetMentionKeysForPost} from './index';
-
-describe('makeGetMentionKeysForPost', () => {
-    const channel = TestHelper.getChannelMock({});
-    const team = TestHelper.getTeamMock({group_constrained: false});
-    const user = TestHelper.getUserMock({
-        username: 'a123',
-        notify_props: {
-            channel: 'true',
-        },
-    });
-    const group = TestHelper.getGroupMock({
-        id: 123,
-        name: 'developers',
-        allow_reference: true,
-        delete_at: 0,
-    });
-
-    const baseState = {
-        entities: {
-            users: {
-                currentUserId: user.id,
-                profiles: {
-                    [user.id]: user,
-                },
-            },
-            groups: {
-                syncables: {},
-                members: {},
-                groups: {
-                    [group.name]: group,
-                },
-                myGroups: {
-                    [group.name]: group,
-                },
-            },
-            teams: {
-                teams: {
-                    [team.id]: team,
-                },
-                groupsAssociatedToTeam: {
-                    [team.id]: {ids: []},
-                },
-            },
-            channels: {
-                channels: {
-                    [channel.id]: channel,
-                },
-                groupsAssociatedToChannel: {
-                    [channel.id]: {ids: [group]},
-                },
-            },
-            general: {
-                config: {},
-            },
-            preferences: {
-                myPreferences: {},
-            },
-        },
-    };
-
-    it('should return all mentionKeys', () => {
-        const post = {
-            props: {
-                disable_group_highlight: false,
-                mentionHighlightDisabled: false,
-            },
-        };
-        const getMentionKeysForPost = makeGetMentionKeysForPost(post, channel);
-        const results = getMentionKeysForPost(baseState, post, channel);
-        const expected = [{key: '@channel'}, {key: '@all'}, {key: '@here'}, {key: '@a123'}, {key: '@developers'}];
-        assert.deepEqual(results, expected);
-    });
-
-    it('should return mentionKeys without groups', () => {
-        const post = {
-            props: {
-                disable_group_highlight: true,
-                mentionHighlightDisabled: false,
-            },
-        };
-        const getMentionKeysForPost = makeGetMentionKeysForPost(post, channel);
-        const results = getMentionKeysForPost(baseState, post, channel);
-        const expected = [{key: '@channel'}, {key: '@all'}, {key: '@here'}, {key: '@a123'}];
-        assert.deepEqual(results, expected);
-    });
-
-    it('should return group mentions and all mentions without channel mentions', () => {
-        const post = {
-            props: {
-                disable_group_highlight: false,
-                mentionHighlightDisabled: true,
-            },
-        };
-        const getMentionKeysForPost = makeGetMentionKeysForPost(post, channel);
-        const results = getMentionKeysForPost(baseState, post, channel);
-        const expected = [{key: '@a123'}, {key: '@developers'}];
-        assert.deepEqual(results, expected);
-    });
-
-    it('should return all mentions without group mentions and channel mentions', () => {
-        const post = {
-            props: {
-                disable_group_highlight: true,
-                mentionHighlightDisabled: true,
-            },
-        };
-        const getMentionKeysForPost = makeGetMentionKeysForPost(post, channel);
-        const results = getMentionKeysForPost(baseState, post, channel);
-        const expected = [{key: '@a123'}];
-        assert.deepEqual(results, expected);
-    });
-});

package/src/components/post/post_markdown/index.ts

@@ -1 +0,0 @@
-export { PostMarkdown } from './post_markdown';

package/src/components/post/post_markdown/post_markdown.test.tsx

@@ -1,178 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import * as React from 'react';
-// import {shallow} from 'enzyme';
-
-// import {Posts} from 'mattermost-redux/constants';
-// import {Post, PostType} from 'mattermost-redux/types/posts';
-
-// import PostMarkdown from 'components/post_markdown/post_markdown';
-// import Markdown from 'components/markdown';
-// import {TestHelper} from 'utils/test_helper';
-
-// describe('components/PostMarkdown', () => {
-//     const baseProps = {
-//         imageProps: {},
-//         isRHS: false,
-//         message: 'message',
-//         post: TestHelper.getPostMock(),
-//         mentionKeys: [{key: 'a'}, {key: 'b'}, {key: 'c'}],
-//         channelId: 'channel-id',
-//         channel: TestHelper.getChannelMock(),
-//     };
-
-//     test('should not error when rendering without a post', () => {
-//         const props = {...baseProps};
-//         Reflect.deleteProperty(props, 'post');
-
-//         shallow(<PostMarkdown {...props}/>);
-//     });
-
-//     test('should render properly with an empty post', () => {
-//         const wrapper = shallow(<PostMarkdown {...baseProps}/>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should render properly with a post', () => {
-//         const props = {
-//             ...baseProps,
-//             message: 'See ~test',
-//             post: TestHelper.getPostMock({
-//                 props: {
-//                     channel_mentions: {
-//                         test: {
-//                             display_name: 'Test',
-//                         },
-//                     },
-//                 },
-//             }),
-//         };
-//         const wrapper = shallow(<PostMarkdown {...props}/>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should render properly without highlight a post', () => {
-//         const props = {
-//             ...baseProps,
-//             message: 'No highlight',
-//             options: {
-//                 mentionHighlight: false,
-//             },
-//             post: TestHelper.getPostMock(),
-//         };
-//         const wrapper = shallow(<PostMarkdown {...props}/>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should render properly without group highlight on a post', () => {
-//         const props = {
-//             ...baseProps,
-//             message: 'No @group highlight',
-//             options: {},
-//             post: TestHelper.getPostMock({
-//                 props: {
-//                     disable_group_highlight: true,
-//                 },
-//             }),
-//         };
-//         const wrapper = shallow(<PostMarkdown {...props}/>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should correctly pass postId down', () => {
-//         const props = {
-//             ...baseProps,
-//             post: TestHelper.getPostMock({
-//                 id: 'post_id',
-//             }),
-//         };
-//         const wrapper = shallow(<PostMarkdown {...props}/>);
-//         expect(wrapper.find(Markdown).prop('postId')).toEqual(props.post.id);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should render header change properly', () => {
-//         const props = {
-//             ...baseProps,
-//             post: TestHelper.getPostMock({
-//                 id: 'post_id',
-//                 type: Posts.POST_TYPES.HEADER_CHANGE as PostType,
-//                 props: {
-//                     username: 'user',
-//                     old_header: 'see ~test',
-//                     new_header: 'now ~test',
-//                     channel_mentions: {
-//                         test: {
-//                             display_name: 'Test',
-//                         },
-//                     },
-//                 },
-//             }),
-//         };
-//         const wrapper = shallow(<PostMarkdown {...props}/>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('plugin hooks can build upon other hook message updates', () => {
-//         const props = {
-//             ...baseProps,
-//             message: 'world',
-//             post: TestHelper.getPostMock({
-//                 message: 'world',
-//                 props: {
-//                     channel_mentions: {
-//                         test: {
-//                             display_name: 'Test',
-//                         },
-//                     },
-//                 },
-//             }),
-//             pluginHooks: [
-//                 {
-//                     hook: (post: Post, updatedMessage: string) => {
-//                         return 'hello ' + updatedMessage;
-//                     },
-//                 },
-//                 {
-//                     hook: (post: Post, updatedMessage: string) => {
-//                         return updatedMessage + '!';
-//                     },
-//                 },
-//             ],
-//         };
-//         const wrapper = shallow(<PostMarkdown {...props}/>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('plugin hooks can overwrite other hooks messages', () => {
-//         const props = {
-//             ...baseProps,
-//             message: 'world',
-//             post: TestHelper.getPostMock({
-//                 message: 'world',
-//                 props: {
-//                     channel_mentions: {
-//                         test: {
-//                             display_name: 'Test',
-//                         },
-//                     },
-//                 },
-//             }),
-//             pluginHooks: [
-//                 {
-//                     hook: (post: Post) => {
-//                         return 'hello ' + post.message;
-//                     },
-//                 },
-//                 {
-//                     hook: (post: Post) => {
-//                         return post.message + '!';
-//                     },
-//                 },
-//             ],
-//         };
-//         const wrapper = shallow(<PostMarkdown {...props}/>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-// });

package/src/components/post/post_markdown/post_markdown.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import memoize from 'memoize-one';
-
-import { Markdown } from '../markdown';
-
-export const PostMarkdown = (props) => {
-    console.log({ props }, 'post markdown component');
-    const { message, post, mentionKeys } = props;
-
-    const getOptions = memoize(
-        (
-            options: any,
-            disableGroupHighlight: boolean,
-            mentionHighlight: boolean | undefined,
-        ) => {
-            return {
-                ...options,
-                disableGroupHighlight,
-                mentionHighlight,
-            };
-        },
-    );
-
-    // Proxy images if we have an image proxy and the server hasn't already rewritten the post's image URLs.
-    const proxyImages = !post || !post.message_source || post.message === post.message_source;
-    const channelNamesMap = post && post.props && post.props.channel_mentions;
-
-    props.pluginHooks?.forEach((o) => {
-        // if (o && o.hook && post) {
-        //     message = o.hook(post, message);
-        // }
-    });
-
-    let mentionHighlight = props?.options?.mentionHighlight;
-    let options = getOptions(
-        props.options,
-        post?.props?.disable_group_highlight === true, // eslint-disable-line camelcase
-        mentionHighlight,
-    );
-    if (post && post.props) {
-        mentionHighlight = !post.props.mentionHighlightDisabled;
-    }
-
-    return (
-        <Markdown
-            imageProps={props.imageProps}
-            isRHS={props.isRHS}
-            message={message}
-            proxyImages={proxyImages}
-            mentionKeys={mentionKeys}
-            options={options}
-            channelNamesMap={channelNamesMap}
-            hasPluginTooltips={props.hasPluginTooltips}
-            imagesMetadata={props.post && props.post.metadata && props.post.metadata.images}
-            postId={props.post && props.post.id}
-        />
-    );
-};