- {'Emojis'}
-
-
- }
- tabClassName={'custom-emoji-tab'}
- >
-
+
+ );
+}
+
+export default memo(GifPickerItems);
diff --git a/webapp/channels/src/components/gif_picker/components/gif_picker_search.tsx b/webapp/channels/src/components/gif_picker/components/gif_picker_search.tsx
new file mode 100644
index 0000000000..5224ba1ea0
--- /dev/null
+++ b/webapp/channels/src/components/gif_picker/components/gif_picker_search.tsx
@@ -0,0 +1,70 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {ChangeEvent, memo, useCallback, useMemo} from 'react';
+import {useIntl} from 'react-intl';
+import {useSelector} from 'react-redux';
+import tinycolor from 'tinycolor2';
+
+import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
+
+import giphyWhiteImage from 'images/gif_picker/powered-by-giphy-white.png';
+import giphyBlackImage from 'images/gif_picker/powered-by-giphy-black.png';
+
+interface Props {
+ value: string;
+ onChange: (value: string) => void;
+}
+
+function GifPickerSearch(props: Props) {
+ const theme = useSelector(getTheme);
+
+ const {formatMessage} = useIntl();
+
+ const handleChange = useCallback((event: ChangeEvent
+
+ );
+}
+
+export default memo(GifPickerSearch);
diff --git a/webapp/channels/src/components/gif_picker/gif_picker.tsx b/webapp/channels/src/components/gif_picker/gif_picker.tsx
index 486370e514..ea2682bbc2 100644
--- a/webapp/channels/src/components/gif_picker/gif_picker.tsx
+++ b/webapp/channels/src/components/gif_picker/gif_picker.tsx
@@ -1,90 +1,48 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import React, {useState} from 'react';
+import React, {SyntheticEvent, useCallback, useMemo} from 'react';
+import {IGif} from '@giphy/js-types';
-import {GifsAppState, GfycatAPIItem} from '@mattermost/types/gifs';
+import GifPickerSearch from './components/gif_picker_search';
+import GifPickerItems from './components/gif_picker_items';
-import App from 'components/gif_picker/components/App';
-import Categories from 'components/gif_picker/components/Categories';
-import Search from 'components/gif_picker/components/Search';
-import Trending from 'components/gif_picker/components/Trending';
-import constants from 'components/gif_picker/utils/constants';
-
-export const appProps: GifsAppState = {
- appName: constants.appName.mattermost,
- basePath: '/mattermost',
- itemTapType: constants.ItemTapAction.SHARE,
- appClassName: 'gfycat',
- shareEvent: 'shareMattermost',
- appId: 'mattermostwebviews',
- enableHistory: true,
- header: {
- tabs: [constants.Tab.TRENDING, constants.Tab.REACTIONS],
- displayText: false,
- },
-};
+const GIF_DEFAULT_WIDTH = 350;
+const GIF_MARGIN_ENDS = 12;
type Props = {
+ filter: string;
onGifClick?: (gif: string) => void;
- defaultSearchText?: string;
- handleSearchTextChange: (text: string) => void;
+ handleFilterChange: (filter: string) => void;
+ getRootPickerNode: () => HTMLDivElement | null;
}
const GifPicker = (props: Props) => {
- const [action, setAction] = useState(props.defaultSearchText ? 'search' : 'trending');
+ const handleItemClick = useCallback((gif: IGif, event: SyntheticEvent
+
+
+
+
+ 
+
+
-
- {component}
-
+
);
};
diff --git a/webapp/channels/src/components/widgets/icons/giphy_icon.tsx b/webapp/channels/src/components/widgets/icons/giphy_icon.tsx
new file mode 100644
index 0000000000..32ac7de7af
--- /dev/null
+++ b/webapp/channels/src/components/widgets/icons/giphy_icon.tsx
@@ -0,0 +1,28 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {HTMLAttributes} from 'react';
+
+function GiphyIcon(props: HTMLAttributes