in src/components/modal-container.js [107:545]
export default function ModalContainerFactory(
DeleteDatasetModal,
OverWriteMapModal,
DataTableModal,
LoadDataModal,
ExportImageModal,
ExportDataModal,
ExportMapModal,
AddMapStyleModal,
ModalDialog,
SaveMapModal,
ShareMapModal
) {
/** @typedef {import('./modal-container').ModalContainerProps} ModalContainerProps */
/** @augments React.Component<ModalContainerProps> */
class ModalContainer extends Component {
// TODO - remove when prop types are fully exported
static propTypes = {
rootNode: PropTypes.object,
containerW: PropTypes.number,
containerH: PropTypes.number,
mapboxApiAccessToken: PropTypes.string.isRequired,
mapboxApiUrl: PropTypes.string,
mapState: PropTypes.object.isRequired,
mapStyle: PropTypes.object.isRequired,
uiState: PropTypes.object.isRequired,
visState: PropTypes.object.isRequired,
visStateActions: PropTypes.object.isRequired,
uiStateActions: PropTypes.object.isRequired,
mapStyleActions: PropTypes.object.isRequired,
onSaveToStorage: PropTypes.func,
cloudProviders: PropTypes.arrayOf(PropTypes.object)
};
componentDidMount = () => {
document.addEventListener('keyup', this._onKeyUp);
};
componentWillUnmount() {
document.removeEventListener('keyup', this._onKeyUp);
}
cloudProviders = props => props.cloudProviders;
providerWithStorage = createSelector(this.cloudProviders, cloudProviders =>
cloudProviders.filter(p => p.hasPrivateStorage())
);
providerWithShare = createSelector(this.cloudProviders, cloudProviders =>
cloudProviders.filter(p => p.hasSharingUrl())
);
_onKeyUp = event => {
const keyCode = event.keyCode;
if (keyCode === KeyEvent.DOM_VK_ESCAPE) {
this._closeModal();
}
};
_closeModal = () => {
this.props.uiStateActions.toggleModal(null);
};
_deleteDataset = key => {
this.props.visStateActions.removeDataset(key);
this._closeModal();
};
_onAddCustomMapStyle = () => {
this.props.mapStyleActions.addCustomMapStyle();
this._closeModal();
};
_onFileUpload = fileList => {
this.props.visStateActions.loadFiles(fileList);
};
_onExportImage = () => {
if (!this.props.uiState.exportImage.processing) {
exportImage(this.props);
this.props.uiStateActions.cleanupExportImage();
this._closeModal();
}
};
_onExportData = () => {
exportData(this.props, this.props.uiState.exportData);
this._closeModal();
};
_onExportMap = () => {
const {uiState} = this.props;
const {format} = uiState.exportMap;
(format === EXPORT_MAP_FORMATS.HTML ? exportHtml : exportJson)(
this.props,
this.props.uiState.exportMap[format] || {}
);
this._closeModal();
};
_exportFileToCloud = ({provider, isPublic, overwrite, closeModal}) => {
const toSave = exportMap(this.props);
this.props.providerActions.exportFileToCloud({
// @ts-ignore
mapData: toSave,
provider,
options: {
isPublic,
overwrite
},
closeModal,
onSuccess: this.props.onExportToCloudSuccess,
onError: this.props.onExportToCloudError
});
};
_onSaveMap = (overwrite = false) => {
const {currentProvider} = this.props.providerState;
// @ts-ignore
const provider = this.props.cloudProviders.find(p => p.name === currentProvider);
this._exportFileToCloud({
provider,
isPublic: false,
overwrite,
closeModal: true
});
};
_onOverwriteMap = () => {
this._onSaveMap(true);
};
_onShareMapUrl = provider => {
this._exportFileToCloud({provider, isPublic: true, overwrite: false, closeModal: false});
};
_onCloseSaveMap = () => {
this.props.providerActions.resetProviderStatus();
this._closeModal();
};
_onLoadCloudMap = payload => {
this.props.providerActions.loadCloudMap({
...payload,
onSuccess: this.props.onLoadCloudMapSuccess,
onError: this.props.onLoadCloudMapError
});
};
/* eslint-disable complexity */
render() {
const {
containerW,
containerH,
mapStyle,
mapState,
uiState,
visState,
rootNode,
visStateActions,
uiStateActions,
providerState
} = this.props;
const {currentModal, datasetKeyToRemove} = uiState;
const {datasets, layers, editingDataset} = visState;
let template = null;
let modalProps = {};
// TODO - currentModal is a string
// @ts-ignore
if (currentModal && currentModal.id && currentModal.template) {
// if currentMdoal template is already provided
// TODO: need to check whether template is valid
// @ts-ignore
template = <currentModal.template />;
// @ts-ignore
modalProps = currentModal.modalProps;
} else {
switch (currentModal) {
case DATA_TABLE_ID:
const width = containerW * 0.9;
template = (
<DataTableModal
width={containerW * 0.9}
height={containerH * 0.85}
datasets={datasets}
dataId={editingDataset}
showDatasetTable={visStateActions.showDatasetTable}
sortTableColumn={visStateActions.sortTableColumn}
pinTableColumn={visStateActions.pinTableColumn}
copyTableColumn={visStateActions.copyTableColumn}
/>
);
// TODO: we need to make this width consistent with the css rule defined modal.js:32 max-width: 70vw
modalProps.cssStyle = css`
${DataTableModalStyle};
${media.palm`
width: ${width}px;
`}
`;
break;
case DELETE_DATA_ID:
// validate options
if (datasetKeyToRemove && datasets && datasets[datasetKeyToRemove]) {
template = (
<DeleteDatasetModal dataset={datasets[datasetKeyToRemove]} layers={layers} />
);
modalProps = {
title: 'modal.title.deleteDataset',
cssStyle: smallModalCss,
footer: true,
onConfirm: () => this._deleteDataset(datasetKeyToRemove),
onCancel: this._closeModal,
confirmButton: {
negative: true,
large: true,
children: 'modal.button.delete'
}
};
}
break; // in case we add a new case after this one
case ADD_DATA_ID:
template = (
<LoadDataModal
{...providerState}
onClose={this._closeModal}
onFileUpload={this._onFileUpload}
onLoadCloudMap={this._onLoadCloudMap}
cloudProviders={this.providerWithStorage(this.props)}
onSetCloudProvider={this.props.providerActions.setCloudProvider}
getSavedMaps={this.props.providerActions.getSavedMaps}
loadFiles={uiState.loadFiles}
fileLoading={visState.fileLoading}
fileLoadingProgress={visState.fileLoadingProgress}
fileFormatNames={getFileFormatNames(this.props.visState)}
fileExtensions={getFileExtensions(this.props.visState)}
/>
);
modalProps = {
title: 'modal.title.addDataToMap',
cssStyle: LoadDataModalStyle,
footer: false,
onConfirm: this._closeModal
};
break;
case EXPORT_IMAGE_ID:
template = (
<ExportImageModal
exportImage={uiState.exportImage}
mapW={containerW}
mapH={containerH}
onUpdateImageSetting={uiStateActions.setExportImageSetting}
cleanupExportImage={uiStateActions.cleanupExportImage}
/>
);
modalProps = {
title: 'modal.title.exportImage',
cssStyle: '',
footer: true,
onCancel: this._closeModal,
onConfirm: this._onExportImage,
confirmButton: {
large: true,
disabled: uiState.exportImage.processing,
children: 'modal.button.download'
}
};
break;
case EXPORT_DATA_ID:
template = (
<ExportDataModal
{...uiState.exportData}
datasets={datasets}
applyCPUFilter={this.props.visStateActions.applyCPUFilter}
onClose={this._closeModal}
onChangeExportDataType={uiStateActions.setExportDataType}
onChangeExportSelectedDataset={uiStateActions.setExportSelectedDataset}
onChangeExportFiltered={uiStateActions.setExportFiltered}
/>
);
modalProps = {
title: 'modal.title.exportData',
cssStyle: '',
footer: true,
onCancel: this._closeModal,
onConfirm: this._onExportData,
confirmButton: {
large: true,
children: 'modal.button.export'
}
};
break;
case EXPORT_MAP_ID:
const keplerGlConfig = visState.schema.getConfigToSave({
mapStyle,
visState,
mapState,
uiState
});
template = (
<ExportMapModal
config={keplerGlConfig}
options={uiState.exportMap}
onChangeExportMapFormat={uiStateActions.setExportMapFormat}
onEditUserMapboxAccessToken={uiStateActions.setUserMapboxAccessToken}
onChangeExportMapHTMLMode={uiStateActions.setExportHTMLMapMode}
/>
);
modalProps = {
title: 'modal.title.exportMap',
cssStyle: '',
footer: true,
onCancel: this._closeModal,
onConfirm: this._onExportMap,
confirmButton: {
large: true,
children: 'modal.button.export'
}
};
break;
case ADD_MAP_STYLE_ID:
template = (
<AddMapStyleModal
mapboxApiAccessToken={this.props.mapboxApiAccessToken}
mapboxApiUrl={this.props.mapboxApiUrl}
mapState={this.props.mapState}
inputStyle={mapStyle.inputStyle}
inputMapStyle={this.props.mapStyleActions.inputMapStyle}
loadCustomMapStyle={this.props.mapStyleActions.loadCustomMapStyle}
/>
);
modalProps = {
title: 'modal.title.addCustomMapboxStyle',
cssStyle: '',
footer: true,
onCancel: this._closeModal,
onConfirm: this._onAddCustomMapStyle,
confirmButton: {
large: true,
disabled: !mapStyle.inputStyle.style,
children: 'modal.button.addStyle'
}
};
break;
case SAVE_MAP_ID:
template = (
<SaveMapModal
{...providerState}
exportImage={uiState.exportImage}
mapInfo={visState.mapInfo}
onSetMapInfo={visStateActions.setMapInfo}
cloudProviders={this.providerWithStorage(this.props)}
onSetCloudProvider={this.props.providerActions.setCloudProvider}
cleanupExportImage={uiStateActions.cleanupExportImage}
onUpdateImageSetting={uiStateActions.setExportImageSetting}
/>
);
modalProps = {
title: 'modal.title.saveMap',
cssStyle: '',
footer: true,
onCancel: this._closeModal,
onConfirm: () => this._onSaveMap(false),
confirmButton: {
large: true,
disabled:
uiState.exportImage.processing ||
!isValidMapInfo(visState.mapInfo) ||
!providerState.currentProvider,
children: 'modal.button.save'
}
};
break;
case OVERWRITE_MAP_ID:
template = (
<OverWriteMapModal
{...providerState}
cloudProviders={this.props.cloudProviders}
title={get(visState, ['mapInfo', 'title'])}
onSetCloudProvider={this.props.providerActions.setCloudProvider}
onUpdateImageSetting={uiStateActions.setExportImageSetting}
cleanupExportImage={uiStateActions.cleanupExportImage}
/>
);
modalProps = {
title: 'Overwrite Existing File?',
cssStyle: smallModalCss,
footer: true,
onConfirm: this._onOverwriteMap,
onCancel: this._closeModal,
confirmButton: {
large: true,
children: 'Yes',
disabled:
uiState.exportImage.processing ||
!isValidMapInfo(visState.mapInfo) ||
!providerState.currentProvider
}
};
break;
case SHARE_MAP_ID:
template = (
<ShareMapModal
{...providerState}
isReady={!uiState.exportImage.processing}
cloudProviders={this.providerWithShare(this.props)}
onExport={this._onShareMapUrl}
onSetCloudProvider={this.props.providerActions.setCloudProvider}
cleanupExportImage={uiStateActions.cleanupExportImage}
onUpdateImageSetting={uiStateActions.setExportImageSetting}
/>
);
modalProps = {
title: 'modal.title.shareURL',
cssStyle: '',
onCancel: this._onCloseSaveMap
};
break;
default:
break;
}
}
return this.props.rootNode ? (
<ModalDialog
parentSelector={() => findDOMNode(rootNode)}
isOpen={Boolean(currentModal)}
onCancel={this._closeModal}
{...modalProps}
cssStyle={DefaultStyle.concat(modalProps.cssStyle)}
>
{template}
</ModalDialog>
) : null;
}
/* eslint-enable complexity */
}
return ModalContainer;
}