Change Store.State, move help button on Mac, revise text, change Titl…

…eBar namespace (#21)
Emurasoft · Apr 19, 2019 · e244da2 · e244da2
1 parent bb424d3
commit e244da2
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 32 deletions.
diff --git a/src/Store.tsx b/src/Store.tsx
@@ -1,3 +1,5 @@
+/* global Office */
+
 import * as React from 'react';
 import * as Parser from './Parser';
 import * as ExcelAPI from './ExcelAPI';
@@ -15,7 +17,7 @@ export interface Progress {
 export interface State {
     initialized: boolean;
     largeFile: boolean;
-    enableFileExport: boolean;
+    platform: Office.PlatformType;
     parserOutput: ParserOutput;
     progress: Progress;
 }
@@ -32,12 +34,20 @@ export type ProgressCallback = (progress: number) => void
 export const Context = React.createContext(undefined);
 
 export class Store extends React.Component<{}, State> {
+    // Returns true if file export is enabled. The reason for this is because FileSaver.js does
+    // not work in an add-in on Excel for Mac and iPad.
+    // https://github.com/OfficeDev/office-js/issues/471
+    public static enableFileExport(platform: Office.PlatformType): boolean {
+        const disableExportOn = [Office.PlatformType.Mac, Office.PlatformType.iOS];
+        return !disableExportOn.includes(platform);
+    }
+
     public constructor(props: {}) {
         super(props);
         this.state = {
             initialized: false,
             largeFile: false,
-            enableFileExport: true,
+            platform: Office.PlatformType.OfficeOnline,
             parserOutput: {
                 type: OutputType.hidden,
                 output: '',
@@ -80,16 +90,11 @@ export class Store extends React.Component<{}, State> {
         try {
             const environmentInfo = await Parser.init();
 
-            // Filesaver.js does not work in an add-in on Excel for Mac and iPad. Reproduce in
-            // Script Lab: https://gist.github.com/MakotoE/a5e2b715e73ab245efec8c6e5874dcae
-            // eslint-disable-next-line no-undef
-            const disableExportOn = [Office.PlatformType.Mac, Office.PlatformType.iOS];
-
             this.setState({
                 initialized: true,
-                enableFileExport: !disableExportOn.includes(environmentInfo.platform),
+                platform: environmentInfo.platform,
             });
-            this._log.push('environmentInfo', environmentInfo)
+            this._log.push('environmentInfo', environmentInfo);
         } catch (err) {
             this.setParserError(new Error(Store.getErrorMessage(err)));
         }

diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -63,14 +63,14 @@ export class AboutComponent extends React.Component<Props, {}> {
                 <Text variant='medium'>
                     <strong>{t('Report bugs/send feedback')}</strong>
                     {
-                        this.props.store.state.enableFileExport
+                        Store.enableFileExport(this.props.store.state.platform)
                             ? <><br />{t('For bug reports, please attach the log file:')}</>
                             : null
                     }
                 </Text>
                 <br />
                 {
-                    this.props.store.state.enableFileExport
+                    Store.enableFileExport(this.props.store.state.platform)
                         ? <><DefaultButton onClick={this.exportLog} text={t('Save log')} /><br /><br /></>
                         : null
                 }
@@ -81,7 +81,7 @@ export class AboutComponent extends React.Component<Props, {}> {
                         <Link href='https://github.com/Emurasoft/excel-csv-import/issues' target='_blank' rel='noopener noreferrer'>Issues page of the GitHub repo↗</Link>
                     </Trans>
                     {
-                        this.props.store.state.enableFileExport
+                        Store.enableFileExport(this.props.store.state.platform)
                             ? <br />
                             : <><br />{t('Please include the system info such as OS name (Windows, macOS, iOS, etc.) in your message.')}<br /></>
                     }

diff --git a/src/components/Export.tsx b/src/components/Export.tsx
@@ -84,16 +84,19 @@ export class ExportComponent extends StoredComponent<Props, State> {
         return (
             <>
                 <MenuBar
-                    hidden={navigator.platform !== 'iPad'}
+                    // eslint-disable-next-line no-undef
+                    hidden={this.props.store.state.platform !== Office.PlatformType.iOS}
                     onClick={(page) => this.props.history.push(page)}
                 />
                 <div className={style.pageMargin}>
                     <TitleBar
                         text={t('Export CSV')}
                         helpLink={helpLink}
+                        // eslint-disable-next-line no-undef
+                        mac={this.props.store.state.platform === Office.PlatformType.Mac}
                     />
                     <ExportTypeDropdown
-                        enableFileExport={this.props.store.state.enableFileExport}
+                        enableFileExport={Store.enableFileExport(this.props.store.state.platform)}
                         value={this.exportTypeDropdownValue()}
                         onChange={(exportType) => this.setState({exportType})}
                     />
@@ -146,7 +149,7 @@ export class ExportComponent extends StoredComponent<Props, State> {
     }
 
     private exportTypeDropdownValue = (): ExportType => {
-        if (this.props.store.state.enableFileExport) {
+        if (Store.enableFileExport(this.props.store.state.platform)) {
             return this.state.exportType
         } else {
             return ExportType.text;
@@ -174,7 +177,7 @@ export class ExportComponent extends StoredComponent<Props, State> {
 
         // If export is disabled, displayed export type is always text regardless of state. That is
         // why the state is ignored here.
-        if (!this.props.store.state.enableFileExport) {
+        if (!Store.enableFileExport(this.props.store.state.platform)) {
             exportOptions.exportType = ExportType.text;
         }
 

diff --git a/src/components/Import.tsx b/src/components/Import.tsx
@@ -1,12 +1,7 @@
 import {Store} from '../Store';
 import * as React from 'react';
 import {connect} from '../connect';
-import {
-    PrimaryButton,
-    Toggle,
-    TooltipDelay,
-    TooltipHost,
-} from 'office-ui-fabric-react';
+import {PrimaryButton, Toggle, TooltipDelay, TooltipHost} from 'office-ui-fabric-react';
 import {ImportOptions, InputType, NewlineSequence} from '../Parser';
 import {SourceInput} from './SourceInput';
 import {DelimiterInput} from './DelimiterInput';
@@ -43,7 +38,8 @@ export class ImportComponent extends StoredComponent<Props, ImportOptions> {
         return (
             <>
                 <MenuBar
-                    hidden={navigator.platform !== 'iPad'}
+                    // eslint-disable-next-line no-undef
+                    hidden={this.props.store.state.platform !== Office.PlatformType.iOS}
                     onClick={(page) => this.props.history.push(page)}
                 />
                 <div className={style.pageMargin}>
@@ -52,6 +48,8 @@ export class ImportComponent extends StoredComponent<Props, ImportOptions> {
                         helpLink={
                             'https://github.com/Emurasoft/excel-csv-import-help/blob/master/en.md'
                         }
+                        // eslint-disable-next-line no-undef
+                        mac={this.props.store.state.platform === Office.PlatformType.Mac}
                     />
                     <SourceInput
                         value={this.state.source}

diff --git a/src/components/StoredComponent.tsx b/src/components/StoredComponent.tsx
@@ -52,7 +52,7 @@ export class StoredComponent<P = {}, S extends StringKey = {}> extends React.Com
             this.saveState(this.state);
         } else {
             localStorage.clear();
-            localStorage.setItem('app1-firstVisit', 'false'); // TODO refactor (if necessary)
+            localStorage.setItem('app-firstVisit', 'false'); // TODO refactor (if necessary)
         }
     }
 

diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
@@ -8,6 +8,7 @@ import * as style from './style.css';
 interface Props extends TranslateFunction{
     text: string;
     helpLink: string;
+    mac: boolean;
 }
 
 interface State {
@@ -24,9 +25,9 @@ interface State {
 // use the add-in, or directing the user to help / configuration information.
 export class TitleBarComponent extends StoredComponent<Props, State> {
     public constructor(props: Props) {
-        super(props, 'app1', {firstVisit: true, visible: false}, ['firstVisit']);
+        super(props, 'app', {firstVisit: true, visible: false}, ['firstVisit']);
         this._save = true;
-        this.state = {...this.state, ...StoredComponent.loadState('app1', ['firstVisit'])};
+        this.state = {...this.state, ...StoredComponent.loadState('app', ['firstVisit'])};
     }
 
     public render(): React.ReactNode {
@@ -42,9 +43,9 @@ export class TitleBarComponent extends StoredComponent<Props, State> {
                 >
                     <Text variant='xLarge'><strong>{this.props.text}</strong></Text>
                     <div className={style.smallIcon}>
-                        {/* TODO this icon is getting covered up by the add-in info button on Mac*/}
                         <IconButton
-                            style={{marginRight: '4px'}}
+                            // Mac platform puts a big button in the top right corner
+                            style={{marginRight: this.props.mac ? '35px' : '4px'}}
                             iconProps={{iconName: 'Help'}}
                             title={t('Help page')}
                             ariaLabel={t('Help page')}
@@ -66,9 +67,8 @@ export class TitleBarComponent extends StoredComponent<Props, State> {
                 >
                     <div className={style.pageMargin}>
                         <Text variant='mediumPlus'>
-                            {t('CSV Import+Export makes it easy to add CSV data to Excel. If you'
-                                + ' need any help, the "?" icon in the top right corner will take'
-                                + ' you to the help page.')}
+                            {/* eslint-disable-next-line max-len */}
+                            {t('CSV Import+Export can open and save CSV files of various formats. If you need any help, the "?" icon in the top right corner will take you to the help page.')}
                         </Text>
                         <br /><br />
                         <PrimaryButton

diff --git a/src/locale/en.json b/src/locale/en.json
@@ -1,6 +1,6 @@
 {
   "importExport": {
-    "CSV Import+Export makes it easy to add CSV data to Excel. If you need any help, the \"?\" icon in the top right corner will take you to the help page.": "CSV Import+Export makes it easy to add CSV data to Excel. If you need any help, the \"?\" icon in the top right corner will take you to the help page.",
+    "CSV Import+Export can open and save CSV files of various formats. If you need any help, the \"?\" icon in the top right corner will take you to the help page.": "CSV Import+Export can open and save CSV files of various formats. If you need any help, the \"?\" icon in the top right corner will take you to the help page.",
     "Continue": "Continue",
     "Help page": "Help page",
     "Auto-detect": "Auto-detect",

diff --git a/test/setup.ts b/test/setup.ts
@@ -26,6 +26,14 @@ global.localStorage = {...localStorage};
 // @ts-ignore
 global.Office = {
     context: {},
+    PlatformType: {
+        PC: 0,
+        OfficeOnline: 1,
+        Mac: 2,
+        iOS: 3,
+        Android: 4,
+        Universal: 5,
+    },
 }
 
 // @ts-ignore