import React from 'react'
import { saveAs } from 'file-saver'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
import Button from '../Button'
import Modal from './Modal'
import MdFileDownload from 'react-icons/lib/md/file-download'
import formatStyle from 'mapbox-gl-style-spec/lib/format'
import GitHub from 'github-api'
class Gist extends React.Component {
static propTypes = {
mapStyle: React.PropTypes.object.isRequired,
}
constructor(props) {
super(props);
this.state = {}
}
onSave() {
this.setState({
saving: true
});
const mapStyleStr = formatStyle(this.props.mapStyle);
const styleTitle = this.props.mapStyle.name || 'Style';
const htmlStr = `
`+styleTitle+` Preview
`
const gh = new GitHub();
let gist = gh.getGist(); // not a gist yet
gist.create({
public: true,
description: styleTitle + 'Preview',
files: {
"style.json": {
content: mapStyleStr
},
"index.html": {
content: htmlStr
}
}
}).then(function({data}) {
return gist.read();
}).then(function({data}) {
this.setState({
latestGist: data
});
}.bind(this));
}
renderLatestGist() {
const gist = this.state.latestGist;
const saving = this.state.saving;
if(gist) {
const user = gist.user || 'anonymous';
return
Latest saved gist:{' '}
Preview,{' '}
Source
} else if(saving) {
return Saving...
}
}
render() {
return
{this.renderLatestGist()}
}
}
function stripAccessTokens(mapStyle) {
const changedMetadata = { ...mapStyle.metadata }
delete changedMetadata['maputnik:mapbox_access_token']
delete changedMetadata['maputnik:openmaptiles_access_token']
return {
...mapStyle,
metadata: changedMetadata
}
}
class ExportModal extends React.Component {
static propTypes = {
mapStyle: React.PropTypes.object.isRequired,
isOpen: React.PropTypes.bool.isRequired,
onOpenToggle: React.PropTypes.func.isRequired,
}
constructor(props) {
super(props);
}
downloadStyle() {
const blob = new Blob([formatStyle(stripAccessTokens(this.props.mapStyle))], {type: "application/json;charset=utf-8"});
saveAs(blob, this.props.mapStyle.id + ".json");
}
render() {
return
Download Style
Download a JSON style to your computer.
Save style
}
}
export default ExportModal