@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
123 lines (122 loc) • 5.09 kB
JavaScript
import * as React from 'react';
import { Flex, Box } from 'rebass';
import { useReducer, useRef } from 'react';
import join from '../../components/utils/join';
import contains from '../../components/utils/contains';
import SimpleButton from '../SimpleButton';
import { Icon } from '../icons';
import HelpBlock from '../HelpBlock';
import reducer, { ActionTypes } from './reducer';
const initialState = {
dragOver: false,
message: null,
};
const preventEventPropagation = (e) => {
e.preventDefault();
e.stopPropagation();
};
export const readJSONFile = async (file, toJSON) => {
const reader = new FileReader();
return new Promise((resolve, reject) => {
reader.onload = function (e) {
try {
const fn = toJSON || JSON.parse;
const json = fn(e.target.result);
Promise.resolve(json).then(resolve);
}
catch (ex) {
reject('Invalid JSON');
}
};
reader.onerror = function (e) {
reject(e);
};
reader.readAsText(file);
});
};
const FileDroppable = (props = {}) => {
const { onDropSuccess, message, fileAccept = '.json', helpText = 'AdapTable No Code Version', defaultText = 'Click here to select a JSON file to load or drag it here', dragOverText = 'Drop file here to start Adaptable Wizard', icon = React.createElement(Icon, { name: "paperclip", size: 48 }), value, ...domProps } = props;
const [state, dispatch] = useReducer(reducer, initialState);
const onDragEnter = (e) => {
dispatch({
type: ActionTypes.DRAG_OVER,
});
};
const onDragLeave = (event) => {
preventEventPropagation(event);
if (domRef.current != event.target &&
contains(domRef.current, event.target)) {
return;
}
dispatch({
type: ActionTypes.DRAG_OUT,
});
};
const onDrop = async (e) => {
let files;
preventEventPropagation(e);
let nativeEvent = e.nativeEvent;
if (nativeEvent && nativeEvent.dataTransfer) {
files = nativeEvent.dataTransfer.files;
}
else {
files = e.target.files;
}
onDragLeave(e);
const file = files[0];
if (file) {
let json;
try {
json = await (props.readFile || readJSONFile)(file, props.toJSON);
dispatch({
type: ActionTypes.DROP_SUCCES,
payload: {
message: (React.createElement(Box, null, props.loadingText === undefined ? 'Initializing adaptable...' : props.loadingText)),
},
});
requestAnimationFrame(() => {
requestAnimationFrame(() => {
if (onDropSuccess) {
onDropSuccess(json, file);
}
});
});
}
catch (err) {
dispatch({
type: ActionTypes.SET_INVALID_FILE,
payload: {
message: React.createElement(Box, null, 'The file is not a valid JSON file! Please try again!'),
},
});
}
}
};
const domRef = useRef(null);
let form = (React.createElement("form", { onSubmit: preventEventPropagation },
React.createElement(SimpleButton, { style: { cursor: 'pointer' }, variant: "outlined" },
React.createElement("div", null, state.dragOver ? dragOverText : defaultText),
React.createElement("input", { type: "file", onChange: onDrop, accept: fileAccept, value: props?.file?.name, style: {
opacity: 0,
position: 'absolute',
cursor: 'pointer',
fontSize: 0,
lineHeight: 0,
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 1,
} }))));
const msg = message || state.message;
return (React.createElement(Flex, { ...domProps, flexDirection: "column", className: join(props.className, 'ab-FileDroppable', state.dragOver ? 'ab-FileDroppable--drag-over' : ''), alignItems: "center", justifyContent: "center", onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: preventEventPropagation, ref: domRef },
props.children,
helpText || icon ? (React.createElement(Flex, { flexDirection: "column" },
helpText ? (React.createElement(Flex, { flexDirection: "column", alignItems: "center", margin: 2 },
React.createElement(HelpBlock, null,
React.createElement("b", null, helpText)))) : null,
icon ? (React.createElement(Flex, { flexDirection: "column", alignItems: "center", margin: 2 }, icon)) : null)) : null,
msg,
form));
};
export default FileDroppable;