@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/components/common/file-uploader/file-drop.js

@@ -0,0 +1,196 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+/**
+ * Copied from https://github.com/sarink/react-file-drop
+ * For React 16.8 compatibility
+ */
+import React from 'react';
+import window from 'global/window';
+
+/** @typedef {import('./file-drop').FileDropProps} FileDropProps */
+
+/** @augments React.PureComponent<FileDropProps> */
+class FileDrop extends React.PureComponent {
+  static isIE = () =>
+    window &&
+    window.navigator &&
+    ((window.navigator.userAgent || []).includes('MSIE') ||
+      (window.navigator.appVersion || []).includes('Trident/'));
+
+  static eventHasFiles = event => {
+    // In most browsers this is an array, but in IE11 it's an Object :(
+
+    let hasFiles = false;
+    if (event.dataTransfer) {
+      const types = event.dataTransfer.types;
+      for (const keyOrIndex in types) {
+        if (types[keyOrIndex] === 'Files') {
+          hasFiles = true;
+          break;
+        }
+      }
+    }
+    return hasFiles;
+  };
+
+  static defaultProps = {
+    dropEffect: 'copy',
+    frame: window ? window.document : undefined,
+    className: 'file-drop',
+    targetClassName: 'file-drop-target',
+    draggingOverFrameClassName: 'file-drop-dragging-over-frame',
+    draggingOverTargetClassName: 'file-drop-dragging-over-target'
+  };
+
+  constructor(props) {
+    super(props);
+    this.frameDragCounter = 0;
+    this.state = {draggingOverFrame: false, draggingOverTarget: false};
+  }
+
+  componentDidMount() {
+    this.startFrameListeners(this.props.frame);
+    this.resetDragging();
+    window.addEventListener('dragover', this.handleWindowDragOverOrDrop);
+    window.addEventListener('drop', this.handleWindowDragOverOrDrop);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.frame !== this.props.frame) {
+      this.resetDragging();
+      this.stopFrameListeners(prevProps.frame);
+      this.startFrameListeners(this.props.frame);
+    }
+  }
+
+  componentWillUnmount() {
+    this.stopFrameListeners(this.props.frame);
+    window.removeEventListener('dragover', this.handleWindowDragOverOrDrop);
+    window.removeEventListener('drop', this.handleWindowDragOverOrDrop);
+  }
+
+  resetDragging = () => {
+    this.frameDragCounter = 0;
+    this.setState({draggingOverFrame: false, draggingOverTarget: false});
+  };
+
+  handleWindowDragOverOrDrop = event => {
+    // This prevents the browser from trying to load whatever file the user dropped on the window
+    event.preventDefault();
+  };
+
+  handleFrameDrag = event => {
+    // Only allow dragging of files
+    if (!FileDrop.eventHasFiles(event)) return;
+
+    // We are listening for events on the 'frame', so every time the user drags over any element in the frame's tree,
+    // the event bubbles up to the frame. By keeping count of how many "dragenters" we get, we can tell if they are still
+    // "draggingOverFrame" (b/c you get one "dragenter" initially, and one "dragenter"/one "dragleave" for every bubble)
+    // This is far better than a "dragover" handler, which would be calling `setState` continuously.
+    this.frameDragCounter += event.type === 'dragenter' ? 1 : -1;
+
+    if (this.frameDragCounter === 1) {
+      this.setState({draggingOverFrame: true});
+      if (this.props.onFrameDragEnter) this.props.onFrameDragEnter(event);
+      return;
+    }
+
+    if (this.frameDragCounter === 0) {
+      this.setState({draggingOverFrame: false});
+      if (this.props.onFrameDragLeave) this.props.onFrameDragLeave(event);
+      return;
+    }
+  };
+
+  handleFrameDrop = event => {
+    event.preventDefault();
+    if (!this.state.draggingOverTarget) {
+      this.resetDragging();
+      if (this.props.onFrameDrop) this.props.onFrameDrop(event);
+    }
+  };
+
+  handleDragOver = event => {
+    if (FileDrop.eventHasFiles(event)) {
+      this.setState({draggingOverTarget: true});
+      if (!FileDrop.isIE() && this.props.dropEffect)
+        event.dataTransfer.dropEffect = this.props.dropEffect;
+      if (this.props.onDragOver) this.props.onDragOver(event);
+    }
+  };
+
+  handleDragLeave = event => {
+    this.setState({draggingOverTarget: false});
+    if (this.props.onDragLeave) this.props.onDragLeave(event);
+  };
+
+  handleDrop = event => {
+    if (this.props.onDrop && FileDrop.eventHasFiles(event)) {
+      const files = event.dataTransfer ? event.dataTransfer.files : null;
+      this.props.onDrop(files, event);
+    }
+    this.resetDragging();
+  };
+
+  stopFrameListeners = frame => {
+    if (frame) {
+      frame.removeEventListener('dragenter', this.handleFrameDrag);
+      frame.removeEventListener('dragleave', this.handleFrameDrag);
+      frame.removeEventListener('drop', this.handleFrameDrop);
+    }
+  };
+
+  startFrameListeners = frame => {
+    if (frame) {
+      frame.addEventListener('dragenter', this.handleFrameDrag);
+      frame.addEventListener('dragleave', this.handleFrameDrag);
+      frame.addEventListener('drop', this.handleFrameDrop);
+    }
+  };
+
+  render() {
+    const {
+      children,
+      className,
+      targetClassName,
+      draggingOverFrameClassName,
+      draggingOverTargetClassName
+    } = this.props;
+    const {draggingOverTarget, draggingOverFrame} = this.state;
+
+    let fileDropTargetClassName = targetClassName;
+    if (draggingOverFrame) fileDropTargetClassName += ` ${draggingOverFrameClassName}`;
+    if (draggingOverTarget) fileDropTargetClassName += ` ${draggingOverTargetClassName}`;
+
+    return (
+      <div
+        className={className}
+        onDragOver={this.handleDragOver}
+        onDragLeave={this.handleDragLeave}
+        onDrop={this.handleDrop}
+      >
+        <div className={fileDropTargetClassName}>{children}</div>
+      </div>
+    );
+  }
+}
+
+export default FileDrop;

package/src/components/common/file-uploader/file-upload-progress.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+ // TODO - this seems too coupled, better define a type here and adapt FileLoadingProgress to it in the app?
+import {FileLoadingProgress} from 'reducers/vis-state-updaters';
+
+export type FileUploadProgressProps = {
+  fileLoadingProgress: FileLoadingProgress;
+  theme: object;
+};
+
+const FileUploadProgress: React.FunctionComponent<FileUploadProgressProps>;
+export default FileUploadProgress;

package/src/components/common/file-uploader/file-upload-progress.js

@@ -0,0 +1,110 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import styled, {withTheme} from 'styled-components';
+import ProgressBar from '../progress-bar';
+import {TruncatedTitleText} from 'components/common/styled-components';
+import {getError} from 'utils/utils';
+
+/** @typedef {import('./file-upload-progress').FileUploadProgressProps} FileUploadProgressProps*/
+
+const StyledFileProgress = styled.div.attrs({
+  className: 'file-upload__progress'
+})`
+  color: ${props => props.theme.textColorLT};
+  font-size: 12px;
+  margin-top: 12px;
+  border-image: initial;
+  padding: 8px 12px;
+
+  .top-row {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .file-name {
+    font-weight: 500;
+  }
+  .middle-row {
+    margin-top: 6px;
+  }
+  .bottom-row {
+    margin-top: 6px;
+    text-align: start;
+  }
+`;
+
+const StyledProgressWrapper = styled.div.attrs({
+  className: 'file-upload__progress__wrapper'
+})`
+  width: 400px;
+`;
+
+const StyledContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
+const formatPercent = percent => `${Math.floor(percent * 100)}%`;
+
+/**
+ * @param {object} params
+ * @param {string} params.message
+ * @param {string} params.fileName
+ * @param {number} params.percent
+ * @param {any} params.error
+ * @param {object} params.theme
+ */
+const UploadProgress = ({message, fileName, percent, error, theme}) => {
+  const percentStr = formatPercent(percent);
+  const barColor = error ? theme.errorColor : theme.activeColorLT;
+
+  return (
+    <StyledFileProgress className="file-upload-progress__message">
+      <div className="top-row">
+        <TruncatedTitleText className="file-name" title={fileName}>
+          {fileName}
+        </TruncatedTitleText>
+        <div className="percent">{percentStr}</div>
+      </div>
+      <div className="middle-row">
+        <ProgressBar percent={percentStr} barColor={barColor} isLoading theme={theme} />
+      </div>
+      <div className="bottom-row" style={{color: error ? theme.errorColor : theme.textColorLT}}>
+        {error ? getError(error) : message}
+      </div>
+    </StyledFileProgress>
+  );
+};
+
+/** @type {React.FunctionComponent<FileUploadProgressProps>} */
+const FileUploadProgress = ({fileLoadingProgress, theme}) => (
+  <StyledContainer>
+    <StyledProgressWrapper>
+      {Object.values(fileLoadingProgress).map(item => (
+        <UploadProgress {...item} key={item.fileName} theme={theme} />
+      ))}
+    </StyledProgressWrapper>
+  </StyledContainer>
+);
+
+export default withTheme(FileUploadProgress);

package/src/components/common/file-uploader/file-upload.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import {FileLoading, FileLoadingProgress} from '../../../reducers/vis-state-updaters';
+
+export type FileUploadProps = {
+  onFileUpload: (files: File[]) => void;
+  fileLoading: FileLoading | false;
+  fileLoadingProgress: FileLoadingProgress;
+  intl: any;
+  theme: object;
+  /** A list of names of supported formats suitable to present to user */
+  fileFormatNames?: string[];
+  /** A list of typically 3 letter extensions (without '.') for file matching */
+  fileExtensions?: string[];
+  /** Set to true if app wants to do its own file filtering */
+  disableExtensionFilter?: boolean;
+};
+
+export const WarningMsg: React.Component;
+
+export const FileUpload: React.Component<FileUploadProps>;
+
+export default function FileUploadFactory(): React.Component<FileUploadProps>;

package/src/components/common/file-uploader/file-upload.js

@@ -0,0 +1,301 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component, createRef} from 'react';
+import styled from 'styled-components';
+import {injectIntl} from 'react-intl';
+import UploadButton from './upload-button';
+import {DragNDrop, FileType} from 'components/common/icons';
+import FileUploadProgress from 'components/common/file-uploader/file-upload-progress';
+import FileDrop from './file-drop';
+
+import {isChrome} from 'utils/utils';
+import {GUIDES_FILE_FORMAT_DOC} from 'constants/user-guides';
+import ReactMarkdown from 'react-markdown';
+// Breakpoints
+import {media} from 'styles/media-breakpoints';
+import {FormattedMessage} from 'localization';
+
+/** @typedef {import('./file-upload').FileUploadProps} FileUploadProps */
+
+const fileIconColor = '#D3D8E0';
+
+const LinkRenderer = props => {
+  return (
+    <a href={props.href} target="_blank" rel="noopener noreferrer">
+      {props.children}
+    </a>
+  );
+};
+const StyledUploadMessage = styled.div`
+  color: ${props => props.theme.textColorLT};
+  font-size: 14px;
+  margin-bottom: 12px;
+
+  ${media.portable`
+    font-size: 12px;
+  `};
+`;
+
+export const WarningMsg = styled.span`
+  margin-top: 10px;
+  color: ${props => props.theme.errorColor};
+  font-weight: 500;
+`;
+
+const StyledFileDrop = styled.div`
+  background-color: white;
+  border-radius: 4px;
+  border-style: ${props => (props.dragOver ? 'solid' : 'dashed')};
+  border-width: 1px;
+  border-color: ${props => (props.dragOver ? props.theme.textColorLT : props.theme.subtextColorLT)};
+  text-align: center;
+  width: 100%;
+  padding: 48px 8px 0;
+  height: 360px;
+
+  .file-upload-or {
+    color: ${props => props.theme.linkBtnColor};
+    padding-right: 4px;
+  }
+
+  .file-type-row {
+    opacity: 0.5;
+  }
+  ${media.portable`
+    padding: 16px 4px 0;
+  `};
+`;
+
+const MsgWrapper = styled.div`
+  color: ${props => props.theme.modalTitleColor};
+  font-size: 20px;
+  height: 36px;
+`;
+
+const StyledDragNDropIcon = styled.div`
+  color: ${fileIconColor};
+  margin-bottom: 48px;
+
+  ${media.portable`
+    margin-bottom: 16px;
+  `};
+  ${media.palm`
+    margin-bottom: 8px;
+  `};
+`;
+
+const StyledFileTypeFow = styled.div`
+  margin-bottom: 24px;
+  ${media.portable`
+    margin-bottom: 16px;
+  `};
+  ${media.palm`
+    margin-bottom: 8px;
+  `};
+`;
+
+const StyledFileUpload = styled.div`
+  .file-drop {
+    position: relative;
+  }
+`;
+
+const StyledMessage = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 32px;
+
+  .loading-action {
+    margin-right: 10px;
+  }
+  .loading-spinner {
+    margin-left: 10px;
+  }
+`;
+
+const StyledDragFileWrapper = styled.div`
+  margin-bottom: 32px;
+  ${media.portable`
+    margin-bottom: 24px;
+  `};
+  ${media.portable`
+    margin-bottom: 16px;
+  `};
+`;
+
+const StyledDisclaimer = styled(StyledMessage)`
+  margin: 0 auto;
+`;
+
+function FileUploadFactory() {
+  /** @augments {Component<FileUploadProps>} */
+  class FileUpload extends Component {
+    state = {
+      dragOver: false,
+      fileLoading: false,
+      files: [],
+      errorFiles: []
+    };
+
+    static getDerivedStateFromProps(props, state) {
+      if (state.fileLoading && props.fileLoading === false && state.files.length) {
+        return {
+          files: [],
+          fileLoading: props.fileLoading
+        };
+      }
+      return {
+        fileLoading: props.fileLoading
+      };
+    }
+
+    frame = createRef();
+
+    _isValidFileType = filename => {
+      const {fileExtensions = []} = this.props;
+      const fileExt = fileExtensions.find(ext => filename.endsWith(ext));
+
+      return Boolean(fileExt);
+    };
+
+    /** @param {FileList} fileList */
+    _handleFileInput = (fileList, event) => {
+      if (event) {
+        event.stopPropagation();
+      }
+
+      const files = [...fileList].filter(Boolean);
+
+      const {disableExtensionFilter = false} = this.props;
+
+      // TODO - move this code out of the component
+      const filesToLoad = [];
+      const errorFiles = [];
+      for (const file of files) {
+        if (disableExtensionFilter || this._isValidFileType(file.name)) {
+          filesToLoad.push(file);
+        } else {
+          errorFiles.push(file.name);
+        }
+      }
+
+      const nextState = {files: filesToLoad, errorFiles, dragOver: false};
+
+      this.setState(nextState, () =>
+        nextState.files.length ? this.props.onFileUpload(nextState.files) : null
+      );
+    };
+
+    _toggleDragState = newState => {
+      this.setState({dragOver: newState});
+    };
+
+    render() {
+      const {dragOver, files, errorFiles} = this.state;
+      const {fileLoading, fileLoadingProgress, theme, intl} = this.props;
+      const {fileExtensions = [], fileFormatNames = []} = this.props;
+      return (
+        <StyledFileUpload className="file-uploader" ref={this.frame}>
+          {FileDrop ? (
+            <FileDrop
+              frame={this.frame.current || document}
+              onDragOver={() => this._toggleDragState(true)}
+              onDragLeave={() => this._toggleDragState(false)}
+              onDrop={this._handleFileInput}
+              className="file-uploader__file-drop"
+            >
+              <StyledUploadMessage className="file-upload__message">
+                <ReactMarkdown
+                  source={`${intl.formatMessage(
+                    {
+                      id: 'fileUploader.configUploadMessage'
+                    },
+                    {
+                      fileFormatNames: fileFormatNames.map(format => `**${format}**`).join(', ')
+                    }
+                  )}(${GUIDES_FILE_FORMAT_DOC}).`}
+                  renderers={{link: LinkRenderer}}
+                />
+              </StyledUploadMessage>
+              <StyledFileDrop dragOver={dragOver}>
+                <StyledFileTypeFow className="file-type-row">
+                  {fileExtensions.map(ext => (
+                    <FileType key={ext} ext={ext} height="50px" fontSize="9px" />
+                  ))}
+                </StyledFileTypeFow>
+                {fileLoading ? (
+                  <FileUploadProgress fileLoadingProgress={fileLoadingProgress} theme={theme} />
+                ) : (
+                  <>
+                    <div
+                      style={{opacity: dragOver ? 0.5 : 1}}
+                      className="file-upload-display-message"
+                    >
+                      <StyledDragNDropIcon>
+                        <DragNDrop height="44px" />
+                      </StyledDragNDropIcon>
+
+                      {errorFiles.length ? (
+                        <WarningMsg>
+                          <FormattedMessage
+                            id={'fileUploader.fileNotSupported'}
+                            values={{errorFiles: errorFiles.join(', ')}}
+                          />
+                        </WarningMsg>
+                      ) : null}
+                    </div>
+                    {!files.length ? (
+                      <StyledDragFileWrapper>
+                        <MsgWrapper>
+                          <FormattedMessage id={'fileUploader.message'} />
+                        </MsgWrapper>
+                        <span className="file-upload-or">
+                          <FormattedMessage id={'fileUploader.or'} />
+                        </span>
+                        <UploadButton onUpload={this._handleFileInput}>
+                          <FormattedMessage id={'fileUploader.browseFiles'} />
+                        </UploadButton>
+                      </StyledDragFileWrapper>
+                    ) : null}
+
+                    <StyledDisclaimer>
+                      <FormattedMessage id={'fileUploader.disclaimer'} />
+                    </StyledDisclaimer>
+                  </>
+                )}
+              </StyledFileDrop>
+            </FileDrop>
+          ) : null}
+
+          <WarningMsg>
+            {isChrome() ? <FormattedMessage id={'fileUploader.chromeMessage'} /> : ''}
+          </WarningMsg>
+        </StyledFileUpload>
+      );
+    }
+  }
+
+  return injectIntl(FileUpload);
+}
+
+export default FileUploadFactory;
+export const FileUpload = FileUploadFactory();

package/src/components/common/file-uploader/upload-button.d.ts.wip

@@ -0,0 +1,11 @@
+// For some reason these types don't work
+// JSX element type 'UploadButton' does not have any construct or call signatures.
+
+import React from 'react';
+
+export type UploadButtonProps = {
+  onUpload: (files: FileList, event: any) => void;
+};
+
+export const UploadButton: React.Component<UploadButtonProps>;
+export default UploadButton;