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

package/src/components/post_view/reaction_list/reaction_list.tsx

@@ -1,201 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-// /* eslint-disable react/no-string-refs */
-
-// import * as React from 'react';
-// import {Tooltip} from 'react-bootstrap';
-// import {FormattedMessage} from 'react-intl';
-
-// import Permissions from 'mattermost-redux/constants/permissions';
-// import {Post} from 'mattermost-redux/types/posts';
-// import {Reaction as ReactionType} from 'mattermost-redux/types/reactions';
-// import {Emoji} from 'mattermost-redux/types/emojis';
-// import {isCustomEmoji} from 'mattermost-redux/utils/emoji_utils';
-
-// import Constants from 'utils/constants';
-// import Reaction from 'components/post_view/reaction';
-// import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx';
-// import AddReactionIcon from 'components/widgets/icons/add_reaction_icon';
-// import OverlayTrigger from 'components/overlay_trigger';
-// import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
-// import {localizeMessage} from 'utils/utils.jsx';
-
-// const DEFAULT_EMOJI_PICKER_RIGHT_OFFSET = 15;
-// const EMOJI_PICKER_WIDTH_OFFSET = 260;
-
-// type Props = {
-
-//     /**
-//      * The post to render reactions for
-//      */
-//     post: Post;
-
-//     /*
-//      * The id of the team which belongs the post
-//      */
-//     teamId: string;
-
-//     /**
-//      * The reactions to render
-//      */
-//     reactions: { [x: string]: ReactionType } | undefined | null;
-
-//     /**
-//      * Whether to show the emoji picker.
-//      */
-//     enableEmojiPicker: boolean;
-
-//     actions: {
-
-//         /**
-//          * Function to add a reaction to the post
-//          */
-//         addReaction: (postId: string, emojiName: string) => void;
-//     };
-// };
-
-// type State = {
-//     showEmojiPicker: boolean;
-// };
-
-// export default class ReactionList extends React.PureComponent<Props, State> {
-//     private addReactionButtonRef = React.createRef<HTMLButtonElement>();
-
-//     constructor(props: Props) {
-//         super(props);
-
-//         this.state = {
-//             showEmojiPicker: false,
-//         };
-//     }
-
-//     getTarget = (): HTMLButtonElement | null => {
-//         return this.addReactionButtonRef.current;
-//     }
-
-//     handleEmojiClick = (emoji: Emoji): void => {
-//         this.setState({showEmojiPicker: false});
-//         const emojiName = isCustomEmoji(emoji) ? emoji.name : emoji.short_names[0];
-//         this.props.actions.addReaction(this.props.post.id, emojiName);
-//     }
-
-//     hideEmojiPicker = (): void => {
-//         this.setState({showEmojiPicker: false});
-//     }
-
-//     toggleEmojiPicker = (): void => {
-//         this.setState({showEmojiPicker: !this.state.showEmojiPicker});
-//     }
-
-//     render(): React.ReactNode {
-//         const reactionsByName = new Map();
-//         const emojiNames = [];
-
-//         if (this.props.reactions) {
-//             for (const reaction of Object.values(this.props.reactions)) {
-//                 const emojiName = reaction.emoji_name;
-
-//                 if (reactionsByName.has(emojiName)) {
-//                     reactionsByName.get(emojiName).push(reaction);
-//                 } else {
-//                     emojiNames.push(emojiName);
-//                     reactionsByName.set(emojiName, [reaction]);
-//                 }
-//             }
-//         }
-
-//         if (reactionsByName.size === 0) {
-//             return null;
-//         }
-
-//         const reactions = emojiNames.map((emojiName) => {
-//             return (
-//                 <Reaction
-//                     key={emojiName}
-//                     post={this.props.post}
-//                     emojiName={emojiName}
-//                     reactions={reactionsByName.get(emojiName) || []}
-//                 />
-//             );
-//         });
-
-//         const addReactionButton = this.getTarget();
-//         let rightOffset = DEFAULT_EMOJI_PICKER_RIGHT_OFFSET;
-//         if (addReactionButton) {
-//             rightOffset = window.innerWidth - addReactionButton.getBoundingClientRect().right - EMOJI_PICKER_WIDTH_OFFSET;
-
-//             if (rightOffset < 0) {
-//                 rightOffset = DEFAULT_EMOJI_PICKER_RIGHT_OFFSET;
-//             }
-//         }
-
-//         let emojiPicker = null;
-//         if (this.props.enableEmojiPicker) {
-//             const addReactionTooltip = (
-//                 <Tooltip id='addReactionTooltip'>
-//                     <FormattedMessage
-//                         id='reaction_list.addReactionTooltip'
-//                         defaultMessage='Add a reaction'
-//                     />
-//                 </Tooltip>
-//             );
-
-//             emojiPicker = (
-//                 <span className='emoji-picker__container'>
-//                     <EmojiPickerOverlay
-//                         show={this.state.showEmojiPicker}
-//                         target={this.getTarget}
-//                         onHide={this.hideEmojiPicker}
-//                         onEmojiClose={this.hideEmojiPicker}
-//                         onEmojiClick={this.handleEmojiClick}
-//                         rightOffset={rightOffset}
-//                         topOffset={-5}
-//                     />
-//                     <ChannelPermissionGate
-//                         channelId={this.props.post.channel_id}
-//                         teamId={this.props.teamId}
-//                         permissions={[Permissions.ADD_REACTION]}
-//                     >
-//                         <OverlayTrigger
-//                             placement='top'
-//                             delayShow={Constants.OVERLAY_TIME_DELAY}
-//                             overlay={addReactionTooltip}
-//                         >
-//                             <button
-//                                 aria-label={localizeMessage('reaction.add.ariaLabel', 'Add a reaction')}
-//                                 className='Reaction'
-//                                 onClick={this.toggleEmojiPicker}
-//                             >
-//                                 <span
-//                                     id={`addReaction-${this.props.post.id}`}
-//                                     className='Reaction__add'
-//                                     ref={this.addReactionButtonRef}
-//                                 >
-//                                     <AddReactionIcon/>
-//                                 </span>
-//                             </button>
-//                         </OverlayTrigger>
-//                     </ChannelPermissionGate>
-//                 </span>
-//             );
-//         }
-
-//         let addReactionClassName = 'post-add-reaction';
-//         if (this.state.showEmojiPicker) {
-//             addReactionClassName += ' post-add-reaction-emoji-picker-open';
-//         }
-
-//         return (
-//             <div
-//                 aria-label={localizeMessage('reaction.container.ariaLabel', 'reactions')}
-//                 className='post-reaction-list'
-//             >
-//                 {reactions}
-//                 <div className={addReactionClassName}>
-//                     {emojiPicker}
-//                 </div>
-//             </div>
-//         );
-//     }
-// }
-// /* eslint-enable react/no-string-refs */

package/src/components/post_view/reaction_list/reactions_list.test.jsx

@@ -1,57 +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 ReactionList from './reaction_list';
-
-// describe('components/ReactionList', () => {
-//     const reaction = {
-//         user_id: '1rj9fokoeffrigu7sk5uc8aiih',
-//         post_id: 'xbqfo5qb4bb4ffmj9hqfji6fiw',
-//         emoji_name: 'expressionless',
-//         create_at: 1542994995740,
-//     };
-
-//     const reactions = {[reaction.user_id + '-' + reaction.emoji_name]: reaction};
-
-//     const post = {
-//         id: 'post_id',
-//     };
-
-//     const teamId = 'teamId';
-
-//     const actions = {
-//         addReaction: jest.fn(),
-//     };
-
-//     const baseProps = {
-//         post,
-//         teamId,
-//         reactions,
-//         enableEmojiPicker: true,
-//         actions,
-//     };
-
-//     test('should render nothing when no reactions', () => {
-//         const props = {
-//             ...baseProps,
-//             reactions: {},
-//         };
-
-//         const wrapper = shallow(
-//             <ReactionList {...props}/>,
-//         );
-
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should render when there are reactions', () => {
-//         const wrapper = shallow(
-//             <ReactionList {...baseProps}/>,
-//         );
-
-//         expect(wrapper).toMatchSnapshot();
-//     });
-// });

package/src/components/post_view/scroll_to_bottom_arrows.jsx

@@ -1,37 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import $ from 'jquery';
-import PropTypes from 'prop-types';
-import * as React from 'react';
-
-import ScrollToBottomIcon from 'components/widgets/icons/scroll_to_bottom_icon';
-
-export default class ScrollToBottomArrows extends React.PureComponent {
-    static propTypes = {
-        isScrolling: PropTypes.bool.isRequired,
-        atBottom: PropTypes.bool,
-        onClick: PropTypes.func.isRequired,
-    };
-
-    render() {
-        // only show on mobile
-        if ($(window).width() > 768) {
-            return null;
-        }
-
-        let className = 'post-list__arrows';
-        if (this.props.isScrolling && this.props.atBottom === false) {
-            className += ' scrolling';
-        }
-
-        return (
-            <div
-                className={className}
-                onClick={this.props.onClick}
-            >
-                <ScrollToBottomIcon/>
-            </div>
-        );
-    }
-}

package/src/components/post_view/show_more/__snapshots__/show_more.test.tsx.snap

@@ -1,237 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/post_view/ShowMore should match snapshot 1`] = `
-<div
-  className="post-message post-message--collapsed"
->
-  <div
-    className="post-message__text-container"
-    style={
-      Object {
-        "maxHeight": 200,
-      }
-    }
-  >
-    <div>
-      <p>
-        text
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`components/post_view/ShowMore should match snapshot, PostAttachment on collapsed view 1`] = `
-<div
-  className="post-message post-message--collapsed post-message--overflow"
->
-  <div
-    className="post-message__text-container"
-    style={
-      Object {
-        "maxHeight": 200,
-      }
-    }
-  />
-  <div
-    className="post-collapse"
-  >
-    <div
-      className="post-attachment-collapse__gradient"
-      id="collapseGradient"
-    />
-    <div
-      className="post-attachment-collapse__show-more"
-    >
-      <div
-        className="post-collapse__show-more-line"
-      />
-      <button
-        className="post-collapse__show-more-button"
-        id="showMoreButton"
-        onClick={[Function]}
-      >
-        <span
-          className="fa fa-angle-down"
-        />
-        Show more
-      </button>
-      <div
-        className="post-collapse__show-more-line"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`components/post_view/ShowMore should match snapshot, PostAttachment on expanded view 1`] = `
-<div
-  className="post-message post-message--expanded post-message--overflow"
->
-  <div
-    className="post-message__text-container"
-    style={
-      Object {
-        "maxHeight": undefined,
-      }
-    }
-  />
-  <div
-    className="post-collapse"
-  >
-    <div
-      className="post-attachment-collapse__gradient"
-      id="collapseGradient"
-    />
-    <div
-      className="post-attachment-collapse__show-more"
-    >
-      <div
-        className="post-collapse__show-more-line"
-      />
-      <button
-        className="post-collapse__show-more-button"
-        id="showMoreButton"
-        onClick={[Function]}
-      >
-        <span
-          className="fa fa-angle-up"
-        />
-        Show less
-      </button>
-      <div
-        className="post-collapse__show-more-line"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`components/post_view/ShowMore should match snapshot, PostMessageView on collapsed view 1`] = `
-<div
-  className="post-message post-message--collapsed post-message--overflow"
->
-  <div
-    className="post-message__text-container"
-    style={
-      Object {
-        "maxHeight": 200,
-      }
-    }
-  />
-  <div
-    className="post-collapse"
-  >
-    <div
-      className="post-collapse__gradient"
-      id="collapseGradient"
-    />
-    <div
-      className="post-collapse__show-more"
-    >
-      <div
-        className="post-collapse__show-more-line"
-      />
-      <button
-        className="post-collapse__show-more-button"
-        id="showMoreButton"
-        onClick={[Function]}
-      >
-        <span
-          className="fa fa-angle-down"
-        />
-        Show more
-      </button>
-      <div
-        className="post-collapse__show-more-line"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`components/post_view/ShowMore should match snapshot, PostMessageView on expanded view 1`] = `
-<div
-  className="post-message post-message--expanded post-message--overflow"
->
-  <div
-    className="post-message__text-container"
-    style={
-      Object {
-        "maxHeight": undefined,
-      }
-    }
-  />
-  <div
-    className="post-collapse"
-  >
-    <div
-      className="post-collapse__gradient"
-      id="collapseGradient"
-    />
-    <div
-      className="post-collapse__show-more"
-    >
-      <div
-        className="post-collapse__show-more-line"
-      />
-      <button
-        className="post-collapse__show-more-button"
-        id="showMoreButton"
-        onClick={[Function]}
-      >
-        <span
-          className="fa fa-angle-up"
-        />
-        Show less
-      </button>
-      <div
-        className="post-collapse__show-more-line"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`components/post_view/ShowMore should match snapshot, PostMessageView on expanded view with compactDisplay 1`] = `
-<div
-  className="post-message post-message--expanded post-message--overflow"
->
-  <div
-    className="post-message__text-container"
-    style={
-      Object {
-        "maxHeight": undefined,
-      }
-    }
-  />
-  <div
-    className="post-collapse"
-  >
-    <div
-      className="post-collapse__gradient"
-      id="collapseGradient"
-    />
-    <div
-      className="post-collapse__show-more"
-    >
-      <div
-        className="post-collapse__show-more-line"
-      />
-      <button
-        className="post-collapse__show-more-button"
-        id="showMoreButton"
-        onClick={[Function]}
-      >
-        <span
-          className="fa fa-angle-up"
-        />
-        Show less
-      </button>
-      <div
-        className="post-collapse__show-more-line"
-      />
-    </div>
-  </div>
-</div>
-`;

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

@@ -1,23 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import {connect} from 'react-redux';
-
-// import {get} from 'mattermost-redux/selectors/entities/preferences';
-
-// import {getIsRhsExpanded, getIsRhsOpen} from 'selectors/rhs';
-// import {Preferences} from 'utils/constants';
-
-// import {GlobalState} from 'types/store';
-
-// import ShowMore from './show_more';
-
-// function mapStateToProps(state: GlobalState) {
-//     return {
-//         isRHSExpanded: getIsRhsExpanded(state),
-//         isRHSOpen: getIsRhsOpen(state),
-//         compactDisplay: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
-//     };
-// }
-
-// export default connect(mapStateToProps)(ShowMore);

package/src/components/post_view/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);
-//     });
-// });