Add optional timestamp to saved file names (#430)

* Add timestamp to file name save

* Add .DS_Store to .gitignore

* Add setting to toggle timestamp on file save

* Tweak timestamp format

.gitignore

@@ -4,3 +4,4 @@ node_modules
 cypress/videos
 cypress/screenshots
 .idea
+.DS_Store

components/Editor.js

@@ -143,8 +143,15 @@ class Editor extends React.Component {
   save({ id: format = 'png' }) {
     const link = document.createElement('a')
 
+    const timezoneOffset = (new Date()).getTimezoneOffset() * 60000
+    const timeString = (new Date(Date.now() - timezoneOffset)).toISOString()
+      .slice(0, 19)
+      .replace(/:/g,'-')
+      .replace('T','_')
+    const timestamp = this.state.timestamp ? `_${timeString}` : ''
+
     return this.getCarbonImage({ format, type: 'blob' }).then(url => {
-      link.download = `carbon.${format}`
+      link.download = `carbon${timestamp}.${format}`
       link.href = url
       document.body.appendChild(link)
       link.click()

components/Settings.js

@@ -114,6 +114,11 @@ class Settings extends React.Component {
               enabled={this.props.watermark}
               onChange={this.props.onChange.bind(null, 'watermark')}
             />
+            <Toggle
+              label="Timestamp file name"
+              enabled={this.props.timestamp}
+              onChange={this.props.onChange.bind(null, 'timestamp')}
+            />
             <ExportSizeSelect
               selected={this.props.exportSize || '2x'}
               onChange={this.props.onChange.bind(null, 'exportSize')}

lib/constants.js

@@ -500,5 +500,6 @@ export const DEFAULT_SETTINGS = {
   exportSize: '2x',
   titleBar: '',
   watermark: false,
-  squaredImage: false
+  squaredImage: false,
+  timestamp: true
 }

lib/routing.js

@@ -36,7 +36,8 @@ const mappings = [
   { field: 'si:squaredImage', type: 'bool' },
   { field: 'code:code' },
   { field: 'es:exportSize' },
-  { field: 'wm:watermark', type: 'bool' }
+  { field: 'wm:watermark', type: 'bool' },
+  { field: 'ts:timestamp', type: 'bool' }
 ]
 
 const reverseMappings = mappings.map(mapping =>