From 00a21b646ed081b7b99875535e8e92f446cd796e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= Date: Mon, 19 Jul 2021 16:26:39 +0200 Subject: [PATCH] MM-33599 Add support for data uri icons for slash commands (#5393) * Add support for data uri icons for slash commands * Address PR feedback * Fix lint * Use only one style for http and data icons --- .../slash_suggestion/slash_suggestion.tsx | 2 +- .../slash_suggestion_item.tsx | 27 ++++++++++- app/mm-redux/types/integrations.ts | 1 + package-lock.json | 48 ++++++++++++++++--- package.json | 2 + 5 files changed, 72 insertions(+), 8 deletions(-) diff --git a/app/components/autocomplete/slash_suggestion/slash_suggestion.tsx b/app/components/autocomplete/slash_suggestion/slash_suggestion.tsx index 382ad95f1..8c3a86f13 100644 --- a/app/components/autocomplete/slash_suggestion/slash_suggestion.tsx +++ b/app/components/autocomplete/slash_suggestion/slash_suggestion.tsx @@ -196,7 +196,7 @@ export default class SlashSuggestion extends PureComponent { Suggestion: '/' + item.trigger, Hint: item.auto_complete_hint, Description: item.auto_complete_desc, - IconData: item.icon_url, + IconData: item.icon_url || item.autocomplete_icon_data || '', }; }); } diff --git a/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx b/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx index d2382f23a..2ad88cda4 100644 --- a/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx +++ b/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx @@ -10,6 +10,9 @@ import {Theme} from '@mm-redux/types/preferences'; import TouchableWithFeedback from '@components/touchable_with_feedback'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import FastImage from 'react-native-fast-image'; +import {SvgXml} from 'react-native-svg'; +import base64 from 'base-64'; + const slashIcon = require('@assets/images/autocomplete/slash_command.png'); const bangIcon = require('@assets/images/autocomplete/slash_command_error.png'); @@ -26,6 +29,10 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => { alignItems: 'center', marginTop: 8, }, + uriIcon: { + width: 16, + height: 16, + }, iconColor: { tintColor: theme.centerChannelColor, }, @@ -112,9 +119,27 @@ const SlashSuggestionItem = (props: Props) => { image = ( ); + } else if (props.icon && props.icon.startsWith('data:')) { + if (props.icon.startsWith('data:image/svg+xml')) { + const xml = base64.decode(props.icon.substring('data:image/svg+xml;base64,'.length)); + image = ( + + ); + } else { + image = ( + + ); + } } return ( diff --git a/app/mm-redux/types/integrations.ts b/app/mm-redux/types/integrations.ts index f770f1814..1161f938e 100644 --- a/app/mm-redux/types/integrations.ts +++ b/app/mm-redux/types/integrations.ts @@ -51,6 +51,7 @@ export type Command = { 'display_name': string; 'description': string; 'url': string; + 'autocomplete_icon_data'?: string; }; // AutocompleteSuggestion represents a single suggestion downloaded from the server. diff --git a/package-lock.json b/package-lock.json index 38719aeb8..df2dd053d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@rudderstack/rudder-sdk-react-native": "1.0.12", "@sentry/react-native": "2.6.0", "analytics-react-native": "1.2.0", + "base-64": "1.0.0", "commonmark": "0.30.0", "commonmark-react-renderer": "4.3.5", "deep-equal": "2.0.5", @@ -103,6 +104,7 @@ "@storybook/react-native": "5.3.25", "@storybook/react-native-server": "5.3.23", "@testing-library/react-native": "7.2.0", + "@types/base-64": "1.0.0", "@types/enzyme": "3.10.9", "@types/enzyme-adapter-react-16": "1.0.6", "@types/jest": "26.0.24", @@ -8406,6 +8408,12 @@ "@babel/types": "^7.3.0" } }, + "node_modules/@types/base-64": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@types/base-64/-/base-64-1.0.0.tgz", + "integrity": "sha512-AvCJx/HrfYHmOQRFdVvgKMplXfzTUizmh0tz9GFTpDePWgCY4uoKll84zKlaRoeiYiCr7c9ZnqSTzkl0BUVD6g==", + "dev": true + }, "node_modules/@types/cacheable-request": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.2.tgz", @@ -9759,6 +9767,11 @@ "react-native": "*" } }, + "node_modules/analytics-react-native/node_modules/base-64": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz", + "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs=" + }, "node_modules/anser": { "version": "1.4.10", "resolved": "https://registry.npmjs.org/anser/-/anser-1.4.10.tgz", @@ -11289,9 +11302,9 @@ } }, "node_modules/base-64": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz", - "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs=" + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz", + "integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==" }, "node_modules/base/node_modules/define-property": { "version": "1.0.0", @@ -32806,6 +32819,11 @@ "glob": "7.0.6" } }, + "node_modules/rn-fetch-blob/node_modules/base-64": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz", + "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs=" + }, "node_modules/rn-fetch-blob/node_modules/glob": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz", @@ -45342,6 +45360,12 @@ "@babel/types": "^7.3.0" } }, + "@types/base-64": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@types/base-64/-/base-64-1.0.0.tgz", + "integrity": "sha512-AvCJx/HrfYHmOQRFdVvgKMplXfzTUizmh0tz9GFTpDePWgCY4uoKll84zKlaRoeiYiCr7c9ZnqSTzkl0BUVD6g==", + "dev": true + }, "@types/cacheable-request": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.2.tgz", @@ -46508,6 +46532,13 @@ "requires": { "base-64": "0.1.0", "type-of": "2.0.1" + }, + "dependencies": { + "base-64": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz", + "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs=" + } } }, "anser": { @@ -47817,9 +47848,9 @@ } }, "base-64": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz", - "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs=" + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz", + "integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==" }, "base64-js": { "version": "1.5.1", @@ -64894,6 +64925,11 @@ "glob": "7.0.6" }, "dependencies": { + "base-64": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz", + "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs=" + }, "glob": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz", diff --git a/package.json b/package.json index f63ef2dd3..851134f1f 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@rudderstack/rudder-sdk-react-native": "1.0.12", "@sentry/react-native": "2.6.0", "analytics-react-native": "1.2.0", + "base-64": "1.0.0", "commonmark": "0.30.0", "commonmark-react-renderer": "4.3.5", "deep-equal": "2.0.5", @@ -101,6 +102,7 @@ "@storybook/react-native": "5.3.25", "@storybook/react-native-server": "5.3.23", "@testing-library/react-native": "7.2.0", + "@types/base-64": "1.0.0", "@types/enzyme": "3.10.9", "@types/enzyme-adapter-react-16": "1.0.6", "@types/jest": "26.0.24",