flipper-plugin
Version:
Flipper Desktop plugin SDK and components
152 lines • 6.31 kB
JavaScript
;
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileSelector = void 0;
const react_1 = __importStar(require("react"));
const antd_1 = require("antd");
const icons_1 = require("@ant-design/icons");
const js_base64_1 = require("js-base64");
const flipper_common_1 = require("flipper-common");
const FlipperLib_1 = require("../plugin/FlipperLib");
const formatFileDescriptor = (fileDescriptor) => fileDescriptor?.name;
function FileSelector({ onChange, label, extensions, required, className, style, encoding = 'utf-8', multi, }) {
const [loading, setLoading] = (0, react_1.useState)(false);
const [files, setFiles] = (0, react_1.useState)([]);
const onSetFiles = async () => {
setLoading(true);
try {
const newFileSelection = await (0, FlipperLib_1.getFlipperLib)().importFile?.({
extensions,
title: label,
encoding,
multi,
});
if (!newFileSelection) {
return;
}
if (Array.isArray(newFileSelection)) {
if (!newFileSelection.length) {
return;
}
setFiles(newFileSelection);
onChange(newFileSelection);
}
else {
setFiles([newFileSelection]);
onChange(newFileSelection);
}
}
catch (e) {
console.error('FileSelector.onSetFile -> error', label, e);
}
finally {
setLoading(false);
}
};
const onFilesDrop = async (e) => {
setLoading(true);
try {
if (!e.dataTransfer.files.length) {
return;
}
const droppedFiles = multi
? Array.from(e.dataTransfer.files)
: [e.dataTransfer.files[0]];
const droppedFileSelection = await Promise.all(droppedFiles.map(async (droppedFile) => {
const raw = await droppedFile.arrayBuffer();
let data;
switch (encoding) {
case 'utf-8': {
data = new TextDecoder().decode(raw);
break;
}
case 'base64': {
data = (0, js_base64_1.fromUint8Array)(new Uint8Array(raw));
break;
}
case 'binary':
data = new Uint8Array(raw);
break;
default: {
(0, flipper_common_1.assertNever)(encoding);
}
}
return {
data,
name: droppedFile.name,
encoding,
};
}));
setFiles(droppedFileSelection);
if (multi) {
onChange(droppedFileSelection);
}
else {
onChange(droppedFileSelection[0]);
}
}
catch (e) {
console.error('FileSelector.onFileDrop -> error', label, e);
}
finally {
setLoading(false);
}
};
const captureEnterPress = (e) => {
if (e.key === 'Enter') {
onSetFiles();
}
};
const emptyFileListEventHandlers = !files.length
? { onClick: onSetFiles, onKeyUp: captureEnterPress }
: {};
const inputProps = {
placeholder: label,
disabled: loading,
onDrop: onFilesDrop,
...emptyFileListEventHandlers,
};
return (react_1.default.createElement(antd_1.Row, { gutter: 8, align: "middle", wrap: false, className: className, style: style },
react_1.default.createElement(antd_1.Col, { flex: "auto" }, multi ? (react_1.default.createElement(antd_1.Input.TextArea, { ...inputProps, value: loading
? 'Loading...'
: files.map(formatFileDescriptor).join('; ') })) : (react_1.default.createElement(antd_1.Input, { ...inputProps, value: loading ? 'Loading...' : formatFileDescriptor(files[0]) }))),
required && !files.length ? (react_1.default.createElement(antd_1.Tooltip, { title: "Required!" },
react_1.default.createElement(antd_1.Col, { flex: "none" },
react_1.default.createElement(icons_1.ExclamationCircleOutlined, null)))) : null,
react_1.default.createElement(antd_1.Col, { flex: "none" },
react_1.default.createElement(antd_1.Button, { icon: react_1.default.createElement(icons_1.CloseOutlined, null), title: "Reset", disabled: !files.length || loading, onClick: () => setFiles([]) })),
react_1.default.createElement(antd_1.Col, { flex: "none" },
react_1.default.createElement(antd_1.Button, { icon: react_1.default.createElement(icons_1.UploadOutlined, null), onClick: onSetFiles, disabled: loading, title: label }))));
}
exports.FileSelector = FileSelector;
//# sourceMappingURL=FileSelector.js.map