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

package/src/components/post/post_pre_header/post_pre_header.tsx

@@ -1,141 +0,0 @@
-import React, { useState } from 'react';
-import { FormattedMessage, injectIntl, IntlShape } from 'react-intl';
-import { t } from '../../../utils/i18n';
-import FlagIconFilled from '../../../widgets/icons/flag_icon_filled';
-
-export type Props = {
-    intl?: IntlShape;
-    isFlagged: boolean;
-    isPinned?: boolean;
-    skipPinned?: boolean;
-    skipFlagged?: boolean;
-    channelId: string;
-    actions?: {
-        showFlaggedPosts: () => void;
-        showPinnedPosts: (channelId: string) => void;
-    };
-};
-
-export enum PostPinnedOrFlagged {
-    Flagged,
-    Pinned,
-    PinnedAndFlagged,
-    Neither,
-}
-
-enum MessageInfoKey {
-    Flagged = 'flagged',
-    Pinned = 'pinned',
-    PinnedAndFlagged = 'pinnedAndFlagged',
-}
-
-export const PostPreHeader = (props: Props) => {
-    const [skipFlagged, setSkipFlagged] = useState(true);
-    const [skipPinned, setSkipPinned] = useState(true);
-    const [channelId, setChannelId] = useState('channel1');
-    const [messageInfos, setMessageInfos] = useState({
-        flagged: { id: t('post_pre_header.flagged'), defaultMessage: 'Saved' },
-        pinned: { id: t('post_pre_header.pinned'), defaultMessage: 'Pinned' },
-    });
-    const { isFlagged, isPinned } = props;
-
-    const getPostStatus = (isFlagged: boolean, isPinned?: boolean): PostPinnedOrFlagged => {
-        if (isFlagged) {
-            if (isPinned) {
-                return PostPinnedOrFlagged.PinnedAndFlagged;
-            }
-            return PostPinnedOrFlagged.Flagged;
-        }
-        if (isPinned) {
-            return PostPinnedOrFlagged.Pinned;
-        }
-        return PostPinnedOrFlagged.Neither;
-    };
-
-    const getMessageInfo = (
-        postStatus: PostPinnedOrFlagged,
-        skipFlagged?: boolean,
-        skipPinned?: boolean,
-    ): MessageInfoKey | false => {
-        if (skipFlagged && skipPinned) {
-            return false;
-        }
-
-        if (postStatus === PostPinnedOrFlagged.PinnedAndFlagged) {
-            if (!skipPinned && !skipFlagged) {
-                return MessageInfoKey.PinnedAndFlagged;
-            }
-
-            if (skipPinned) {
-                return MessageInfoKey.Flagged;
-            }
-
-            if (skipFlagged) {
-                return MessageInfoKey.Pinned;
-            }
-        }
-
-        if (postStatus === PostPinnedOrFlagged.Flagged && !skipFlagged) {
-            return MessageInfoKey.Flagged;
-        }
-
-        if (postStatus === PostPinnedOrFlagged.Pinned && !skipPinned) {
-            return MessageInfoKey.Pinned;
-        }
-
-        return false;
-    };
-
-    const messageKey = getMessageInfo(getPostStatus(isFlagged, isPinned), skipFlagged, skipPinned);
-
-    if ((!isFlagged && !isPinned) || !messageKey) {
-        return null;
-    }
-
-    const handleLinkClick = (messageKey: MessageInfoKey, channelId?: string) => {
-        if (messageKey === MessageInfoKey.Pinned && channelId) {
-            console.log('handle clicked');
-            props.actions.showPinnedPosts(channelId);
-        } else {
-            // this.props.actions.showFlaggedPosts();
-        }
-    };
-
-    return (
-        <div className="post-pre-header">
-            <div className="post-pre-header__icons-container">
-                {isPinned && !skipPinned && <span className="icon-pin icon icon--post-pre-header" />}
-                {isFlagged && !skipFlagged && <FlagIconFilled className="icon icon--post-pre-header" />}
-            </div>
-            <div className="post-pre-header__text-container">
-                {messageKey && messageKey !== MessageInfoKey.PinnedAndFlagged && (
-                    <span>
-                        <a onClick={() => handleLinkClick(messageKey, channelId)}>
-                            <FormattedMessage
-                                id={messageInfos[messageKey].id}
-                                defaultMessage={messageInfos[messageKey].defaultMessage}
-                            />
-                        </a>
-                    </span>
-                )}
-                {messageKey && messageKey === MessageInfoKey.PinnedAndFlagged && (
-                    <span>
-                        <a onClick={() => handleLinkClick(MessageInfoKey.Pinned, channelId)}>
-                            <FormattedMessage
-                                id={messageInfos[MessageInfoKey.Pinned].id}
-                                defaultMessage={messageInfos[MessageInfoKey.Pinned].defaultMessage}
-                            />
-                        </a>
-                        <span className="post-pre-header__link-separator">{'\u2B24'}</span>
-                        <a onClick={() => handleLinkClick(MessageInfoKey.Flagged)}>
-                            <FormattedMessage
-                                id={messageInfos[MessageInfoKey.Flagged].id}
-                                defaultMessage={messageInfos[MessageInfoKey.Flagged].defaultMessage}
-                            />
-                        </a>
-                    </span>
-                )}
-            </div>
-        </div>
-    );
-};

package/src/components/post/post_profile_picture/post_profile_picture.tsx

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import * as PostUtils from '../../../utils/post_utils';
-import Constants from '../../../packages/constants/constants';
-import { ProfilePicture } from '../profile_picture/profile_picture';
-import MattermostLogo from '../../../widgets/icons/mattermost_logo';
-
-export const PostProfilePicture = (props) => {
-    console.log({ props }, 'post profile page');
-    const { availabilityStatusOnPosts, compactDisplay, isBusy, isRHS, post, user, isBot } = props;
-    const isSystemMessage = PostUtils.isSystemMessage(post);
-    const fromWebhook = PostUtils.isFromWebhook(post);
-
-    const getProfilePictureURL = (): string => {
-        const { post, user } = props;
-
-        // if (user && user.id === post.user_id) {
-        //     return Utils.imageURLForUser(user.id, user.last_picture_update);
-        // } else if (post.user_id) {
-        //     return Utils.imageURLForUser(post.user_id);
-        // }
-
-        return '';
-    };
-
-    const getPostIconURL = (defaultURL: string, fromAutoResponder: boolean, fromWebhook: boolean): string => {
-        const { enablePostIconOverride, hasImageProxy, post } = props;
-        const postProps = post.props;
-        let postIconOverrideURL = '';
-        let useUserIcon = '';
-        if (postProps) {
-            postIconOverrideURL = postProps.override_icon_url;
-            useUserIcon = postProps.use_user_icon;
-        }
-
-        if (props.compactDisplay) {
-            return '';
-        }
-
-        if (!fromAutoResponder && fromWebhook && !useUserIcon && enablePostIconOverride) {
-            if (postIconOverrideURL && postIconOverrideURL !== '') {
-                return PostUtils.getImageSrc(postIconOverrideURL, hasImageProxy);
-            }
-
-            return Constants.DEFAULT_WEBHOOK_LOGO;
-        }
-
-        return defaultURL;
-    };
-
-    const getStatus = (fromAutoResponder: boolean, fromWebhook: boolean, user: any): string | undefined => {
-        if (fromAutoResponder || fromWebhook || (user && user.is_bot)) {
-            return '';
-        }
-
-        return props.status;
-    };
-
-    // default icon
-    // if (isSystemMessage && !compactDisplay && !fromWebhook && !isBot) {
-    //     return <MattermostLogo className="icon" />;
-    // }
-    const fromAutoResponder = PostUtils.fromAutoResponder(post);
-
-    const hasMention = !fromAutoResponder && !fromWebhook;
-    const profileSrc = getProfilePictureURL();
-
-    // const src = getPostIconURL(profileSrc, fromAutoResponder, fromWebhook);
-    const src = 'https://avatars.githubusercontent.com/u/38552626?s=400&v=4';
-
-    const overrideIconEmoji = post.props ? post.props.override_icon_emoji : '';
-    const overwriteName = post.props ? post.props.override_username : '';
-    const isEmoji = typeof overrideIconEmoji == 'string' && overrideIconEmoji !== '';
-    const status = getStatus(fromAutoResponder, fromWebhook, user);
-
-    return (
-        <ProfilePicture
-            hasMention={hasMention}
-            isBusy={isBusy}
-            isRHS={isRHS}
-            size="md"
-            src={src}
-            profileSrc={profileSrc}
-            isEmoji={isEmoji}
-            status={availabilityStatusOnPosts === 'true' ? status : ''}
-            userId={user?.id}
-            channelId={post.channel_id}
-            username={user?.username}
-            overwriteIcon={props.overwriteIcon}
-            overwriteName={overwriteName}
-            isBot={user?.is_bot}
-            fromAutoResponder={fromAutoResponder}
-            fromWebhook={fromWebhook}
-        />
-    );
-};

package/src/components/post/post_view.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { PostListPage } from './post_list';
-
-export const PostView = () => {
-    return (
-        <div>
-            <PostListPage />
-        </div>
-    );
-};

package/src/components/post/profile_picture/profile_picture.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import Avatar from '../../../widgets/users/avatar';
-import StatusIconNew from '../../status_icon_new';
-import { StatusIcon } from '../../status_icon';
-
-export const ProfilePicture = (props) => {
-    console.log({ props }, 'profile picture');
-    const profileIconClass = `profile-icon ${props.isEmoji ? 'emoji' : ''}`;
-    return (
-        <span className={`status-wrapper style--none ${props.wrapperClass}`}>
-            <span className={profileIconClass}>
-                <Avatar size={props.size} url={props.src} />
-            </span>
-            {props.newStatusIcon ? (
-                <StatusIconNew className={props.statusClass} status={props.status} />
-            ) : (
-                <StatusIcon status={props.status} />
-            )}
-        </span>
-    );
-};

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

@@ -1 +0,0 @@
-export { ShowMore } from './show_more';

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

@@ -1,102 +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 ShowMore from 'components/post_view/show_more/show_more';
-
-// describe('components/post_view/ShowMore', () => {
-//     const children = (<div><p>{'text'}</p></div>);
-//     const baseProps = {
-//         checkOverflow: 0,
-//         isAttachmentText: false,
-//         isRHSExpanded: false,
-//         isRHSOpen: false,
-//         maxHeight: 200,
-//         text: 'text',
-//         compactDisplay: false,
-//     };
-
-//     test('should match snapshot', () => {
-//         const wrapper = shallow(<ShowMore {...baseProps}>{children}</ShowMore>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should match snapshot, PostMessageView on collapsed view', () => {
-//         const wrapper = shallow(<ShowMore {...baseProps}/>);
-//         wrapper.setState({isOverflow: true, isCollapsed: true});
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should match snapshot, PostMessageView on expanded view', () => {
-//         const wrapper = shallow(<ShowMore {...baseProps}/>);
-//         wrapper.setState({isOverflow: true, isCollapsed: false});
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should match snapshot, PostAttachment on collapsed view', () => {
-//         const wrapper = shallow(
-//             <ShowMore
-//                 {...baseProps}
-//                 isAttachmentText={true}
-//             />,
-//         );
-//         wrapper.setState({isOverflow: true, isCollapsed: true});
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should match snapshot, PostAttachment on expanded view', () => {
-//         const wrapper = shallow(
-//             <ShowMore
-//                 {...baseProps}
-//                 isAttachmentText={true}
-//             />,
-//         );
-//         wrapper.setState({isOverflow: true, isCollapsed: false});
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should match snapshot, PostMessageView on expanded view with compactDisplay', () => {
-//         const wrapper = shallow(
-//             <ShowMore
-//                 {...baseProps}
-//                 compactDisplay={true}
-//             />,
-//         );
-//         wrapper.setState({isOverflow: true, isCollapsed: false});
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should call checkTextOverflow', () => {
-//         const wrapper = shallow(<ShowMore {...baseProps}/>);
-//         const instance = wrapper.instance() as ShowMore;
-//         instance.checkTextOverflow = jest.fn();
-
-//         expect(instance.checkTextOverflow).not.toBeCalled();
-
-//         wrapper.setProps({isRHSExpanded: true});
-//         expect(instance.checkTextOverflow).toBeCalledTimes(1);
-
-//         wrapper.setProps({isRHSExpanded: false});
-//         expect(instance.checkTextOverflow).toBeCalledTimes(2);
-
-//         wrapper.setProps({isRHSOpen: true});
-//         expect(instance.checkTextOverflow).toBeCalledTimes(3);
-
-//         wrapper.setProps({isRHSOpen: false});
-//         expect(instance.checkTextOverflow).toBeCalledTimes(4);
-
-//         wrapper.setProps({text: 'text change'});
-//         expect(instance.checkTextOverflow).toBeCalledTimes(5);
-
-//         wrapper.setProps({text: 'text another change'});
-//         expect(instance.checkTextOverflow).toBeCalledTimes(6);
-
-//         wrapper.setProps({checkOverflow: 1});
-//         expect(instance.checkTextOverflow).toBeCalledTimes(7);
-
-//         wrapper.setProps({checkOverflow: 1});
-//         expect(instance.checkTextOverflow).toBeCalledTimes(7);
-//     });
-// });

package/src/components/post/show_more/show_more.tsx

@@ -1,97 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { localizeMessage } from '../../../utils/utils';
-
-export const ShowMore = (props) => {
-    console.log({ props }, 'show more component');
-    const { children, isAttachmentText, compactDisplay, overflowType } = props;
-    const [isCollapsed, setIsCollapsed] = useState(true);
-    const [isOverflow, setIsOverflow] = useState(true);
-
-    const MAX_POST_HEIGHT = 600;
-    const MARGIN_CHANGE_FOR_COMPACT_POST = 22;
-
-    const maxHeight = props.maxHeight || MAX_POST_HEIGHT;
-    const textContainer = useRef();
-
-    const toggleCollapse = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsCollapsed(!isCollapsed);
-    };
-
-    let className = 'post-message';
-    let collapsedMaxHeightStyle: number | undefined;
-    if (isCollapsed) {
-        collapsedMaxHeightStyle = maxHeight;
-        className += ' post-message--collapsed';
-    } else {
-        className += ' post-message--expanded';
-    }
-
-    const collapseGradientClass = isAttachmentText ? 'post-attachment-collapse__gradient' : 'post-collapse__gradient';
-    const collapseShowMoreClass = isAttachmentText ? 'post-attachment-collapse__show-more' : 'post-collapse__show-more';
-
-    let attachmentTextOverflow = null;
-    if (isOverflow) {
-        if (!isAttachmentText && isCollapsed && compactDisplay) {
-            if (collapsedMaxHeightStyle) {
-                collapsedMaxHeightStyle -= MARGIN_CHANGE_FOR_COMPACT_POST;
-            }
-        }
-
-        let showIcon = 'fa fa-angle-up';
-        let showText = localizeMessage('post_info.message.show_less', 'Show less');
-        if (isCollapsed) {
-            showIcon = 'fa fa-angle-down';
-            showText = localizeMessage('post_info.message.show_more', 'Show more');
-        }
-        switch (overflowType) {
-            case 'ellipsis':
-                attachmentTextOverflow = (
-                    <button
-                        id="showMoreButton"
-                        className="post-preview-collapse__show-more-button color--link"
-                        onClick={toggleCollapse}
-                    >
-                        {showText}
-                    </button>
-                );
-                className += ' post-message-preview--overflow';
-                break;
-
-            default:
-                attachmentTextOverflow = (
-                    <div className="post-collapse">
-                        <div id="collapseGradient" className={collapseGradientClass} />
-                        <div className={collapseShowMoreClass}>
-                            <div className="post-collapse__show-more-line" />
-                            <button
-                                id="showMoreButton"
-                                className="post-collapse__show-more-button"
-                                onClick={toggleCollapse}
-                            >
-                                <span className={showIcon} />
-                                {showText}
-                            </button>
-                            <div className="post-collapse__show-more-line" />
-                        </div>
-                    </div>
-                );
-                className += ' post-message--overflow';
-                break;
-        }
-    }
-
-    return (
-        <div className={className}>
-            <div
-                style={{ maxHeight: collapsedMaxHeightStyle }}
-                className="post-message__text-container"
-                ref={textContainer}
-            >
-                {children}
-            </div>
-            {attachmentTextOverflow}
-        </div>
-    );
-};