@apideck/file-picker
Version:
A React file picker component that works with the Apideck [File Storage API](https://developers.apideck.com/apis/file-storage/reference).
1,241 lines (1,094 loc) • 103 kB
JavaScript
import React, { useState, useEffect, Fragment, useCallback, useContext, createContext, useRef, useLayoutEffect, forwardRef } from 'react';
import { Transition, Menu } from '@headlessui/react';
import { createPortal } from 'react-dom';
import { useTable, useSortBy } from 'react-table';
import { Waypoint } from 'react-waypoint';
import { useDropzone } from 'react-dropzone';
import a from 'swr';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var Logo = function Logo(_ref) {
var _ref$className = _ref.className,
className = _ref$className === void 0 ? '' : _ref$className;
return React.createElement("svg", {
width: 95,
height: 23,
viewBox: "0 0 95 23",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
className: className
}, React.createElement("path", {
d: "M1.2 15.05C1.25 14.2167 1.45833 13.525 1.825 12.975C2.19167 12.425 2.65833 11.9833 3.225 11.65C3.79167 11.3167 4.425 11.0833 5.125 10.95C5.84167 10.8 6.55833 10.725 7.275 10.725C7.925 10.725 8.58333 10.775 9.25 10.875C9.91667 10.9583 10.525 11.1333 11.075 11.4C11.625 11.6667 12.075 12.0417 12.425 12.525C12.775 12.9917 12.95 13.6167 12.95 14.4V21.125C12.95 21.7083 12.9833 22.2667 13.05 22.8C13.1167 23.3333 13.2333 23.7333 13.4 24H9.8C9.73333 23.8 9.675 23.6 9.625 23.4C9.59167 23.1833 9.56667 22.9667 9.55 22.75C8.98333 23.3333 8.31667 23.7417 7.55 23.975C6.78333 24.2083 6 24.325 5.2 24.325C4.58333 24.325 4.00833 24.25 3.475 24.1C2.94167 23.95 2.475 23.7167 2.075 23.4C1.675 23.0833 1.35833 22.6833 1.125 22.2C0.908333 21.7167 0.8 21.1417 0.8 20.475C0.8 19.7417 0.925 19.1417 1.175 18.675C1.44167 18.1917 1.775 17.8083 2.175 17.525C2.59167 17.2417 3.05833 17.0333 3.575 16.9C4.10833 16.75 4.64167 16.6333 5.175 16.55C5.70833 16.4667 6.23333 16.4 6.75 16.35C7.26667 16.3 7.725 16.225 8.125 16.125C8.525 16.025 8.84167 15.8833 9.075 15.7C9.30833 15.5 9.41667 15.2167 9.4 14.85C9.4 14.4667 9.33333 14.1667 9.2 13.95C9.08333 13.7167 8.91667 13.5417 8.7 13.425C8.5 13.2917 8.25833 13.2083 7.975 13.175C7.70833 13.125 7.41667 13.1 7.1 13.1C6.4 13.1 5.85 13.25 5.45 13.55C5.05 13.85 4.81667 14.35 4.75 15.05H1.2ZM9.4 17.675C9.25 17.8083 9.05833 17.9167 8.825 18C8.60833 18.0667 8.36667 18.125 8.1 18.175C7.85 18.225 7.58333 18.2667 7.3 18.3C7.01667 18.3333 6.73333 18.375 6.45 18.425C6.18333 18.475 5.91667 18.5417 5.65 18.625C5.4 18.7083 5.175 18.825 4.975 18.975C4.79167 19.1083 4.64167 19.2833 4.525 19.5C4.40833 19.7167 4.35 19.9917 4.35 20.325C4.35 20.6417 4.40833 20.9083 4.525 21.125C4.64167 21.3417 4.8 21.5167 5 21.65C5.2 21.7667 5.43333 21.85 5.7 21.9C5.96667 21.95 6.24167 21.975 6.525 21.975C7.225 21.975 7.76667 21.8583 8.15 21.625C8.53333 21.3917 8.81667 21.1167 9 20.8C9.18333 20.4667 9.29167 20.1333 9.325 19.8C9.375 19.4667 9.4 19.2 9.4 19V17.675ZM22.2305 21.675C21.6638 21.675 21.1805 21.5583 20.7805 21.325C20.3805 21.0917 20.0555 20.7917 19.8055 20.425C19.5721 20.0417 19.3971 19.6 19.2805 19.1C19.1805 18.6 19.1305 18.0917 19.1305 17.575C19.1305 17.0417 19.1805 16.525 19.2805 16.025C19.3805 15.525 19.5471 15.0833 19.7805 14.7C20.0305 14.3167 20.3471 14.0083 20.7305 13.775C21.1305 13.525 21.6221 13.4 22.2055 13.4C22.7721 13.4 23.2471 13.525 23.6305 13.775C24.0305 14.0083 24.3555 14.325 24.6055 14.725C24.8555 15.1083 25.0305 15.55 25.1305 16.05C25.2471 16.55 25.3055 17.0583 25.3055 17.575C25.3055 18.0917 25.2555 18.6 25.1555 19.1C25.0555 19.6 24.8805 20.0417 24.6305 20.425C24.3971 20.7917 24.0805 21.0917 23.6805 21.325C23.2971 21.5583 22.8138 21.675 22.2305 21.675ZM15.7055 11.075V28.525H19.2555V22.4H19.3055C19.7388 23.0333 20.2888 23.5167 20.9555 23.85C21.6388 24.1667 22.3805 24.325 23.1805 24.325C24.1305 24.325 24.9555 24.1417 25.6555 23.775C26.3721 23.4083 26.9638 22.9167 27.4305 22.3C27.9138 21.6833 28.2721 20.975 28.5055 20.175C28.7388 19.375 28.8555 18.5417 28.8555 17.675C28.8555 16.7583 28.7388 15.8833 28.5055 15.05C28.2721 14.2 27.9138 13.4583 27.4305 12.825C26.9471 12.1917 26.3388 11.6833 25.6055 11.3C24.8721 10.9167 23.9971 10.725 22.9805 10.725C22.1805 10.725 21.4471 10.8833 20.7805 11.2C20.1138 11.5167 19.5638 12.025 19.1305 12.725H19.0805V11.075H15.7055ZM34.6387 9.075V6.15H31.0887V9.075H34.6387ZM31.0887 11.075V24H34.6387V11.075H31.0887ZM46.609 17.5C46.609 18.0333 46.559 18.55 46.459 19.05C46.359 19.55 46.1923 20 45.959 20.4C45.7257 20.7833 45.409 21.0917 45.009 21.325C44.6257 21.5583 44.1423 21.675 43.559 21.675C43.009 21.675 42.534 21.5583 42.134 21.325C41.7507 21.075 41.4257 20.7583 41.159 20.375C40.909 19.975 40.7257 19.525 40.609 19.025C40.4923 18.525 40.434 18.025 40.434 17.525C40.434 16.9917 40.484 16.4833 40.584 16C40.7007 15.5 40.8757 15.0583 41.109 14.675C41.359 14.2917 41.684 13.9833 42.084 13.75C42.484 13.5167 42.9757 13.4 43.559 13.4C44.1423 13.4 44.6257 13.5167 45.009 13.75C45.3923 13.9833 45.7007 14.2917 45.934 14.675C46.184 15.0417 46.359 15.475 46.459 15.975C46.559 16.4583 46.609 16.9667 46.609 17.5ZM46.659 22.35V24H50.034V6.15H46.484V12.65H46.434C46.034 12.0167 45.484 11.5417 44.784 11.225C44.1007 10.8917 43.3757 10.725 42.609 10.725C41.659 10.725 40.8257 10.9167 40.109 11.3C39.3923 11.6667 38.7923 12.1583 38.309 12.775C37.8423 13.3917 37.484 14.1083 37.234 14.925C37.0007 15.725 36.884 16.5583 36.884 17.425C36.884 18.325 37.0007 19.1917 37.234 20.025C37.484 20.8583 37.8423 21.6 38.309 22.25C38.7923 22.8833 39.4007 23.3917 40.134 23.775C40.8673 24.1417 41.7173 24.325 42.684 24.325C43.534 24.325 44.2923 24.175 44.959 23.875C45.6423 23.5583 46.1923 23.05 46.609 22.35H46.659ZM61.4172 16.15H55.6422C55.6589 15.9 55.7089 15.6167 55.7922 15.3C55.8922 14.9833 56.0505 14.6833 56.2672 14.4C56.5005 14.1167 56.8005 13.8833 57.1672 13.7C57.5505 13.5 58.0255 13.4 58.5922 13.4C59.4589 13.4 60.1005 13.6333 60.5172 14.1C60.9505 14.5667 61.2505 15.25 61.4172 16.15ZM55.6422 18.4H64.9672C65.0339 17.4 64.9505 16.4417 64.7172 15.525C64.4839 14.6083 64.1005 13.7917 63.5672 13.075C63.0505 12.3583 62.3839 11.7917 61.5672 11.375C60.7505 10.9417 59.7922 10.725 58.6922 10.725C57.7089 10.725 56.8089 10.9 55.9922 11.25C55.1922 11.6 54.5005 12.0833 53.9172 12.7C53.3339 13.3 52.8839 14.0167 52.5672 14.85C52.2505 15.6833 52.0922 16.5833 52.0922 17.55C52.0922 18.55 52.2422 19.4667 52.5422 20.3C52.8589 21.1333 53.3005 21.85 53.8672 22.45C54.4339 23.05 55.1255 23.5167 55.9422 23.85C56.7589 24.1667 57.6755 24.325 58.6922 24.325C60.1589 24.325 61.4089 23.9917 62.4422 23.325C63.4755 22.6583 64.2422 21.55 64.7422 20H61.6172C61.5005 20.4 61.1839 20.7833 60.6672 21.15C60.1505 21.5 59.5339 21.675 58.8172 21.675C57.8172 21.675 57.0505 21.4167 56.5172 20.9C55.9839 20.3833 55.6922 19.55 55.6422 18.4ZM75.8727 15.625H79.3477C79.2977 14.7917 79.0977 14.075 78.7477 13.475C78.3977 12.8583 77.9393 12.35 77.3727 11.95C76.8227 11.5333 76.1893 11.225 75.4727 11.025C74.7727 10.825 74.0393 10.725 73.2727 10.725C72.2227 10.725 71.2893 10.9 70.4727 11.25C69.656 11.6 68.9643 12.0917 68.3977 12.725C67.831 13.3417 67.3977 14.0833 67.0977 14.95C66.8143 15.8 66.6727 16.725 66.6727 17.725C66.6727 18.6917 66.831 19.5833 67.1477 20.4C67.4643 21.2 67.906 21.8917 68.4727 22.475C69.0393 23.0583 69.7227 23.5167 70.5227 23.85C71.3393 24.1667 72.231 24.325 73.1977 24.325C74.9143 24.325 76.3227 23.875 77.4227 22.975C78.5227 22.075 79.1893 20.7667 79.4227 19.05H75.9977C75.881 19.85 75.5893 20.4917 75.1227 20.975C74.6727 21.4417 74.0227 21.675 73.1727 21.675C72.6227 21.675 72.156 21.55 71.7727 21.3C71.3893 21.05 71.081 20.7333 70.8477 20.35C70.631 19.95 70.4727 19.5083 70.3727 19.025C70.2727 18.5417 70.2227 18.0667 70.2227 17.6C70.2227 17.1167 70.2727 16.6333 70.3727 16.15C70.4727 15.65 70.6393 15.2 70.8727 14.8C71.1227 14.3833 71.4393 14.05 71.8227 13.8C72.206 13.5333 72.681 13.4 73.2477 13.4C74.7643 13.4 75.6393 14.1417 75.8727 15.625ZM81.7531 6.15V24H85.3031V19.55L86.6781 18.225L90.2281 24H94.5281L89.1031 15.825L93.9781 11.075H89.7781L85.3031 15.725V6.15H81.7531Z",
transform: "translate(0 -6)",
fill: "white"
}));
};
var _excluded = ["children", "onClose", "isOpen", "showAttribution", "className", "style"];
var Modal = /*#__PURE__*/React.forwardRef(function Modal(props, ref) {
var children = props.children,
onClose = props.onClose,
isOpen = props.isOpen,
showAttribution = props.showAttribution,
_props$className = props.className,
className = _props$className === void 0 ? '' : _props$className,
_props$style = props.style,
style = _props$style === void 0 ? {} : _props$style,
other = _objectWithoutPropertiesLoose(props, _excluded);
var _useState = useState(false),
mounted = _useState[0],
setMounted = _useState[1];
useEffect(function () {
setMounted(true);
}, []);
var modalComponent = React.createElement(Transition, {
show: isOpen
}, React.createElement(Transition.Child, {
enter: "transition ease-out duration-150",
enterFrom: "opacity-0",
enterTo: "opacity-100",
leave: "transition ease-in duration-150",
leaveFrom: "opacity-100",
leaveTo: "opacity-0"
}, React.createElement("div", {
className: "fixed inset-0 z-40 flex items-end bg-gray-400 bg-opacity-75 dark:bg-gray-600 sm:items-center sm:justify-center",
"data-testid": "backdrop",
onClick: onClose
}, showAttribution ? React.createElement("a", {
className: "absolute flex text-sm text-center text-gray-100 bottom-5 lg:left-5 xl:left-6 xl:bottom-6",
href: "https://apideck.com/products/unify",
target: "_blank",
rel: "noopener noreferrer"
}, "Powered by ", React.createElement(Logo, {
className: "h-5"
}), React.createElement("span", null, "Unify")) : null, React.createElement(Transition.Child, Object.assign({
enter: "transition ease-out duration-150",
enterFrom: "opacity-0 transform translate-y-1/4 scale-95",
enterTo: "opacity-100 scale-100",
leave: "transition ease-in duration-150",
leaveFrom: "opacity-100 scale-100",
leaveTo: "opacity-0 transform translate-y-1/4 scale-95",
className: "w-full p-5 overflow-hidden bg-white dark:bg-gray-800 dark-text-gray-400 shadow-lg rounded-t-lg sm:p-6 no-scrollbar sm:rounded-lg sm:m-4 sm:max-w-xl relative " + className,
style: _extends({
maxHeight: '90%'
}, style),
ref: ref,
role: "dialog",
id: "modal-component",
onClick: function onClick(e) {
return e.stopPropagation();
}
}, other), children))));
return mounted ? createPortal(modalComponent, document.body) : null;
});
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var runtime_1 = createCommonjsModule(function (module) {
/**
* Copyright (c) 2014-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var runtime = (function (exports) {
var Op = Object.prototype;
var hasOwn = Op.hasOwnProperty;
var undefined$1; // More compressible than void 0.
var $Symbol = typeof Symbol === "function" ? Symbol : {};
var iteratorSymbol = $Symbol.iterator || "@@iterator";
var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
function define(obj, key, value) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
return obj[key];
}
try {
// IE 8 has a broken Object.defineProperty that only works on DOM objects.
define({}, "");
} catch (err) {
define = function(obj, key, value) {
return obj[key] = value;
};
}
function wrap(innerFn, outerFn, self, tryLocsList) {
// If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
var generator = Object.create(protoGenerator.prototype);
var context = new Context(tryLocsList || []);
// The ._invoke method unifies the implementations of the .next,
// .throw, and .return methods.
generator._invoke = makeInvokeMethod(innerFn, self, context);
return generator;
}
exports.wrap = wrap;
// Try/catch helper to minimize deoptimizations. Returns a completion
// record like context.tryEntries[i].completion. This interface could
// have been (and was previously) designed to take a closure to be
// invoked without arguments, but in all the cases we care about we
// already have an existing method we want to call, so there's no need
// to create a new function object. We can even get away with assuming
// the method takes exactly one argument, since that happens to be true
// in every case, so we don't have to touch the arguments object. The
// only additional allocation required is the completion record, which
// has a stable shape and so hopefully should be cheap to allocate.
function tryCatch(fn, obj, arg) {
try {
return { type: "normal", arg: fn.call(obj, arg) };
} catch (err) {
return { type: "throw", arg: err };
}
}
var GenStateSuspendedStart = "suspendedStart";
var GenStateSuspendedYield = "suspendedYield";
var GenStateExecuting = "executing";
var GenStateCompleted = "completed";
// Returning this object from the innerFn has the same effect as
// breaking out of the dispatch switch statement.
var ContinueSentinel = {};
// Dummy constructor functions that we use as the .constructor and
// .constructor.prototype properties for functions that return Generator
// objects. For full spec compliance, you may wish to configure your
// minifier not to mangle the names of these two functions.
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
// This is a polyfill for %IteratorPrototype% for environments that
// don't natively support it.
var IteratorPrototype = {};
define(IteratorPrototype, iteratorSymbol, function () {
return this;
});
var getProto = Object.getPrototypeOf;
var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
if (NativeIteratorPrototype &&
NativeIteratorPrototype !== Op &&
hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
// This environment has a native %IteratorPrototype%; use it instead
// of the polyfill.
IteratorPrototype = NativeIteratorPrototype;
}
var Gp = GeneratorFunctionPrototype.prototype =
Generator.prototype = Object.create(IteratorPrototype);
GeneratorFunction.prototype = GeneratorFunctionPrototype;
define(Gp, "constructor", GeneratorFunctionPrototype);
define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
GeneratorFunction.displayName = define(
GeneratorFunctionPrototype,
toStringTagSymbol,
"GeneratorFunction"
);
// Helper for defining the .next, .throw, and .return methods of the
// Iterator interface in terms of a single ._invoke method.
function defineIteratorMethods(prototype) {
["next", "throw", "return"].forEach(function(method) {
define(prototype, method, function(arg) {
return this._invoke(method, arg);
});
});
}
exports.isGeneratorFunction = function(genFun) {
var ctor = typeof genFun === "function" && genFun.constructor;
return ctor
? ctor === GeneratorFunction ||
// For the native GeneratorFunction constructor, the best we can
// do is to check its .name property.
(ctor.displayName || ctor.name) === "GeneratorFunction"
: false;
};
exports.mark = function(genFun) {
if (Object.setPrototypeOf) {
Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
} else {
genFun.__proto__ = GeneratorFunctionPrototype;
define(genFun, toStringTagSymbol, "GeneratorFunction");
}
genFun.prototype = Object.create(Gp);
return genFun;
};
// Within the body of any async function, `await x` is transformed to
// `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
// `hasOwn.call(value, "__await")` to determine if the yielded value is
// meant to be awaited.
exports.awrap = function(arg) {
return { __await: arg };
};
function AsyncIterator(generator, PromiseImpl) {
function invoke(method, arg, resolve, reject) {
var record = tryCatch(generator[method], generator, arg);
if (record.type === "throw") {
reject(record.arg);
} else {
var result = record.arg;
var value = result.value;
if (value &&
typeof value === "object" &&
hasOwn.call(value, "__await")) {
return PromiseImpl.resolve(value.__await).then(function(value) {
invoke("next", value, resolve, reject);
}, function(err) {
invoke("throw", err, resolve, reject);
});
}
return PromiseImpl.resolve(value).then(function(unwrapped) {
// When a yielded Promise is resolved, its final value becomes
// the .value of the Promise<{value,done}> result for the
// current iteration.
result.value = unwrapped;
resolve(result);
}, function(error) {
// If a rejected Promise was yielded, throw the rejection back
// into the async generator function so it can be handled there.
return invoke("throw", error, resolve, reject);
});
}
}
var previousPromise;
function enqueue(method, arg) {
function callInvokeWithMethodAndArg() {
return new PromiseImpl(function(resolve, reject) {
invoke(method, arg, resolve, reject);
});
}
return previousPromise =
// If enqueue has been called before, then we want to wait until
// all previous Promises have been resolved before calling invoke,
// so that results are always delivered in the correct order. If
// enqueue has not been called before, then it is important to
// call invoke immediately, without waiting on a callback to fire,
// so that the async generator function has the opportunity to do
// any necessary setup in a predictable way. This predictability
// is why the Promise constructor synchronously invokes its
// executor callback, and why async functions synchronously
// execute code before the first await. Since we implement simple
// async functions in terms of async generators, it is especially
// important to get this right, even though it requires care.
previousPromise ? previousPromise.then(
callInvokeWithMethodAndArg,
// Avoid propagating failures to Promises returned by later
// invocations of the iterator.
callInvokeWithMethodAndArg
) : callInvokeWithMethodAndArg();
}
// Define the unified helper method that is used to implement .next,
// .throw, and .return (see defineIteratorMethods).
this._invoke = enqueue;
}
defineIteratorMethods(AsyncIterator.prototype);
define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
return this;
});
exports.AsyncIterator = AsyncIterator;
// Note that simple async functions are implemented on top of
// AsyncIterator objects; they just return a Promise for the value of
// the final result produced by the iterator.
exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) {
if (PromiseImpl === void 0) PromiseImpl = Promise;
var iter = new AsyncIterator(
wrap(innerFn, outerFn, self, tryLocsList),
PromiseImpl
);
return exports.isGeneratorFunction(outerFn)
? iter // If outerFn is a generator, return the full iterator.
: iter.next().then(function(result) {
return result.done ? result.value : iter.next();
});
};
function makeInvokeMethod(innerFn, self, context) {
var state = GenStateSuspendedStart;
return function invoke(method, arg) {
if (state === GenStateExecuting) {
throw new Error("Generator is already running");
}
if (state === GenStateCompleted) {
if (method === "throw") {
throw arg;
}
// Be forgiving, per 25.3.3.3.3 of the spec:
// https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
return doneResult();
}
context.method = method;
context.arg = arg;
while (true) {
var delegate = context.delegate;
if (delegate) {
var delegateResult = maybeInvokeDelegate(delegate, context);
if (delegateResult) {
if (delegateResult === ContinueSentinel) continue;
return delegateResult;
}
}
if (context.method === "next") {
// Setting context._sent for legacy support of Babel's
// function.sent implementation.
context.sent = context._sent = context.arg;
} else if (context.method === "throw") {
if (state === GenStateSuspendedStart) {
state = GenStateCompleted;
throw context.arg;
}
context.dispatchException(context.arg);
} else if (context.method === "return") {
context.abrupt("return", context.arg);
}
state = GenStateExecuting;
var record = tryCatch(innerFn, self, context);
if (record.type === "normal") {
// If an exception is thrown from innerFn, we leave state ===
// GenStateExecuting and loop back for another invocation.
state = context.done
? GenStateCompleted
: GenStateSuspendedYield;
if (record.arg === ContinueSentinel) {
continue;
}
return {
value: record.arg,
done: context.done
};
} else if (record.type === "throw") {
state = GenStateCompleted;
// Dispatch the exception by looping back around to the
// context.dispatchException(context.arg) call above.
context.method = "throw";
context.arg = record.arg;
}
}
};
}
// Call delegate.iterator[context.method](context.arg) and handle the
// result, either by returning a { value, done } result from the
// delegate iterator, or by modifying context.method and context.arg,
// setting context.delegate to null, and returning the ContinueSentinel.
function maybeInvokeDelegate(delegate, context) {
var method = delegate.iterator[context.method];
if (method === undefined$1) {
// A .throw or .return when the delegate iterator has no .throw
// method always terminates the yield* loop.
context.delegate = null;
if (context.method === "throw") {
// Note: ["return"] must be used for ES3 parsing compatibility.
if (delegate.iterator["return"]) {
// If the delegate iterator has a return method, give it a
// chance to clean up.
context.method = "return";
context.arg = undefined$1;
maybeInvokeDelegate(delegate, context);
if (context.method === "throw") {
// If maybeInvokeDelegate(context) changed context.method from
// "return" to "throw", let that override the TypeError below.
return ContinueSentinel;
}
}
context.method = "throw";
context.arg = new TypeError(
"The iterator does not provide a 'throw' method");
}
return ContinueSentinel;
}
var record = tryCatch(method, delegate.iterator, context.arg);
if (record.type === "throw") {
context.method = "throw";
context.arg = record.arg;
context.delegate = null;
return ContinueSentinel;
}
var info = record.arg;
if (! info) {
context.method = "throw";
context.arg = new TypeError("iterator result is not an object");
context.delegate = null;
return ContinueSentinel;
}
if (info.done) {
// Assign the result of the finished delegate to the temporary
// variable specified by delegate.resultName (see delegateYield).
context[delegate.resultName] = info.value;
// Resume execution at the desired location (see delegateYield).
context.next = delegate.nextLoc;
// If context.method was "throw" but the delegate handled the
// exception, let the outer generator proceed normally. If
// context.method was "next", forget context.arg since it has been
// "consumed" by the delegate iterator. If context.method was
// "return", allow the original .return call to continue in the
// outer generator.
if (context.method !== "return") {
context.method = "next";
context.arg = undefined$1;
}
} else {
// Re-yield the result returned by the delegate method.
return info;
}
// The delegate iterator is finished, so forget it and continue with
// the outer generator.
context.delegate = null;
return ContinueSentinel;
}
// Define Generator.prototype.{next,throw,return} in terms of the
// unified ._invoke helper method.
defineIteratorMethods(Gp);
define(Gp, toStringTagSymbol, "Generator");
// A Generator should always return itself as the iterator object when the
// @@iterator function is called on it. Some browsers' implementations of the
// iterator prototype chain incorrectly implement this, causing the Generator
// object to not be returned from this call. This ensures that doesn't happen.
// See https://github.com/facebook/regenerator/issues/274 for more details.
define(Gp, iteratorSymbol, function() {
return this;
});
define(Gp, "toString", function() {
return "[object Generator]";
});
function pushTryEntry(locs) {
var entry = { tryLoc: locs[0] };
if (1 in locs) {
entry.catchLoc = locs[1];
}
if (2 in locs) {
entry.finallyLoc = locs[2];
entry.afterLoc = locs[3];
}
this.tryEntries.push(entry);
}
function resetTryEntry(entry) {
var record = entry.completion || {};
record.type = "normal";
delete record.arg;
entry.completion = record;
}
function Context(tryLocsList) {
// The root entry object (effectively a try statement without a catch
// or a finally block) gives us a place to store values thrown from
// locations where there is no enclosing try statement.
this.tryEntries = [{ tryLoc: "root" }];
tryLocsList.forEach(pushTryEntry, this);
this.reset(true);
}
exports.keys = function(object) {
var keys = [];
for (var key in object) {
keys.push(key);
}
keys.reverse();
// Rather than returning an object with a next method, we keep
// things simple and return the next function itself.
return function next() {
while (keys.length) {
var key = keys.pop();
if (key in object) {
next.value = key;
next.done = false;
return next;
}
}
// To avoid creating an additional object, we just hang the .value
// and .done properties off the next function object itself. This
// also ensures that the minifier will not anonymize the function.
next.done = true;
return next;
};
};
function values(iterable) {
if (iterable) {
var iteratorMethod = iterable[iteratorSymbol];
if (iteratorMethod) {
return iteratorMethod.call(iterable);
}
if (typeof iterable.next === "function") {
return iterable;
}
if (!isNaN(iterable.length)) {
var i = -1, next = function next() {
while (++i < iterable.length) {
if (hasOwn.call(iterable, i)) {
next.value = iterable[i];
next.done = false;
return next;
}
}
next.value = undefined$1;
next.done = true;
return next;
};
return next.next = next;
}
}
// Return an iterator with no values.
return { next: doneResult };
}
exports.values = values;
function doneResult() {
return { value: undefined$1, done: true };
}
Context.prototype = {
constructor: Context,
reset: function(skipTempReset) {
this.prev = 0;
this.next = 0;
// Resetting context._sent for legacy support of Babel's
// function.sent implementation.
this.sent = this._sent = undefined$1;
this.done = false;
this.delegate = null;
this.method = "next";
this.arg = undefined$1;
this.tryEntries.forEach(resetTryEntry);
if (!skipTempReset) {
for (var name in this) {
// Not sure about the optimal order of these conditions:
if (name.charAt(0) === "t" &&
hasOwn.call(this, name) &&
!isNaN(+name.slice(1))) {
this[name] = undefined$1;
}
}
}
},
stop: function() {
this.done = true;
var rootEntry = this.tryEntries[0];
var rootRecord = rootEntry.completion;
if (rootRecord.type === "throw") {
throw rootRecord.arg;
}
return this.rval;
},
dispatchException: function(exception) {
if (this.done) {
throw exception;
}
var context = this;
function handle(loc, caught) {
record.type = "throw";
record.arg = exception;
context.next = loc;
if (caught) {
// If the dispatched exception was caught by a catch block,
// then let that catch block handle the exception normally.
context.method = "next";
context.arg = undefined$1;
}
return !! caught;
}
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
var record = entry.completion;
if (entry.tryLoc === "root") {
// Exception thrown outside of any try block that could handle
// it, so set the completion value of the entire function to
// throw the exception.
return handle("end");
}
if (entry.tryLoc <= this.prev) {
var hasCatch = hasOwn.call(entry, "catchLoc");
var hasFinally = hasOwn.call(entry, "finallyLoc");
if (hasCatch && hasFinally) {
if (this.prev < entry.catchLoc) {
return handle(entry.catchLoc, true);
} else if (this.prev < entry.finallyLoc) {
return handle(entry.finallyLoc);
}
} else if (hasCatch) {
if (this.prev < entry.catchLoc) {
return handle(entry.catchLoc, true);
}
} else if (hasFinally) {
if (this.prev < entry.finallyLoc) {
return handle(entry.finallyLoc);
}
} else {
throw new Error("try statement without catch or finally");
}
}
}
},
abrupt: function(type, arg) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.tryLoc <= this.prev &&
hasOwn.call(entry, "finallyLoc") &&
this.prev < entry.finallyLoc) {
var finallyEntry = entry;
break;
}
}
if (finallyEntry &&
(type === "break" ||
type === "continue") &&
finallyEntry.tryLoc <= arg &&
arg <= finallyEntry.finallyLoc) {
// Ignore the finally entry if control is not jumping to a
// location outside the try/catch block.
finallyEntry = null;
}
var record = finallyEntry ? finallyEntry.completion : {};
record.type = type;
record.arg = arg;
if (finallyEntry) {
this.method = "next";
this.next = finallyEntry.finallyLoc;
return ContinueSentinel;
}
return this.complete(record);
},
complete: function(record, afterLoc) {
if (record.type === "throw") {
throw record.arg;
}
if (record.type === "break" ||
record.type === "continue") {
this.next = record.arg;
} else if (record.type === "return") {
this.rval = this.arg = record.arg;
this.method = "return";
this.next = "end";
} else if (record.type === "normal" && afterLoc) {
this.next = afterLoc;
}
return ContinueSentinel;
},
finish: function(finallyLoc) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.finallyLoc === finallyLoc) {
this.complete(entry.completion, entry.afterLoc);
resetTryEntry(entry);
return ContinueSentinel;
}
}
},
"catch": function(tryLoc) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.tryLoc === tryLoc) {
var record = entry.completion;
if (record.type === "throw") {
var thrown = record.arg;
resetTryEntry(entry);
}
return thrown;
}
}
// The context.catch method must only be called with a location
// argument that corresponds to a known catch block.
throw new Error("illegal catch attempt");
},
delegateYield: function(iterable, resultName, nextLoc) {
this.delegate = {
iterator: values(iterable),
resultName: resultName,
nextLoc: nextLoc
};
if (this.method === "next") {
// Deliberately forget the last sent value so that we don't
// accidentally pass it on to the delegate.
this.arg = undefined$1;
}
return ContinueSentinel;
}
};
// Regardless of whether this script is executing as a CommonJS module
// or not, return the runtime object so that we can declare the variable
// regeneratorRuntime in the outer scope, which allows this module to be
// injected easily by `bin/regenerator --include-runtime script.js`.
return exports;
}(
// If this script is executing as a CommonJS module, use module.exports
// as the regeneratorRuntime namespace. Otherwise create a new empty
// object. Either way, the resulting object will be used to initialize
// the regeneratorRuntime variable at the top of this file.
module.exports
));
try {
regeneratorRuntime = runtime;
} catch (accidentalStrictMode) {
// This module should not be running in strict mode, so the above
// assignment should always work unless something is misconfigured. Just
// in case runtime.js accidentally runs in strict mode, in modern engines
// we can explicitly access globalThis. In older engines we can escape
// strict mode using a global Function call. This could conceivably fail
// if a Content Security Policy forbids using Function, but in that case
// the proper solution is to fix the accidental strict mode problem. If
// you've misconfigured your bundler to force strict mode and applied a
// CSP to forbid Function, and you're not willing to fix either of those
// problems, please detail your unique predicament in a GitHub issue.
if (typeof globalThis === "object") {
globalThis.regeneratorRuntime = runtime;
} else {
Function("r", "regeneratorRuntime = r")(runtime);
}
}
});
var Breadcrumbs = function Breadcrumbs(_ref) {
var folders = _ref.folders,
handleClick = _ref.handleClick;
return React.createElement(Fragment, null, React.createElement("div", {
className: "flex items-center text-sm"
}, React.createElement("button", {
className: "text-gray-600 hover:text-gray-900",
onClick: function onClick() {
return handleClick();
}
}, React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
className: "inline-block w-5 h-5 text-yellow-300",
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor"
}, React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"
}))), folders.map(function (folder, i) {
return React.createElement(Transition, {
show: true,
enter: "transition ease-out duration-200",
enterFrom: "transform opacity-60",
enterTo: "transform opacity-100",
leave: "transition ease-in duration-200",
leaveFrom: "transform opacity-100",
leaveTo: "transform opacity-0",
key: i
}, React.createElement(Transition.Child, {
enter: "transition ease-out duration-200",
enterFrom: "transform opacity-60 translate-x-1",
enterTo: "transform opacity-100",
leave: "transition ease-in duration-100",
leaveFrom: "transform opacity-100",
leaveTo: "transform opacity-0",
className: "flex items-center",
as: "div",
key: folder.id
}, React.createElement("svg", {
className: "flex-shrink-0 w-5 h-5 text-gray-300",
fill: "currentColor",
viewBox: "0 0 20 20"
}, React.createElement("path", {
fillRule: "evenodd",
d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
clipRule: "evenodd"
})), i === folders.length - 1 ? React.createElement("span", {
className: "font-medium text-gray-900"
}, folder.name) : React.createElement("button", {
className: "text-gray-600 hover:text-gray-900",
onClick: function onClick() {
return handleClick(folder);
}
}, folder.name)));
})));
};
var formatBytes = function formatBytes(bytes, decimals) {
if (decimals === void 0) {
decimals = 2;
}
if (bytes === 0) return '0 Bytes';
var k = 1024;
var dm = decimals < 0 ? 0 : decimals;
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
var i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
};
var FileDetails = function FileDetails(_ref) {
var _file$owner, _file$owner2;
var file = _ref.file,
setFile = _ref.setFile,
onSelect = _ref.onSelect;
if (!file) return React.createElement("p", {
className: "p-4 text-center"
}, "No file found");
return React.createElement("div", {
className: "flex flex-col justify-between h-full"
}, React.createElement("dl", {
className: "grid grid-cols-2 gap-x-4 gap-y-6"
}, React.createElement("div", {
className: "col-span-1"
}, React.createElement("dt", {
className: "text-sm font-medium text-gray-500"
}, "Name"), React.createElement("dd", {
className: "mt-1 text-sm text-gray-900"
}, file == null ? void 0 : file.name)), React.createElement("div", {
className: "col-span-1"
}, React.createElement("dt", {
className: "text-sm font-medium text-gray-500"
}, "Size"), React.createElement("dd", {
className: "mt-1 text-sm text-gray-900"
}, file != null && file.size ? formatBytes(file == null ? void 0 : file.size) : '-')), React.createElement("div", {
className: "col-span-1"
}, React.createElement("dt", {
className: "text-sm font-medium text-gray-500"
}, "Mime type"), React.createElement("dd", {
className: "mt-1 text-sm text-gray-900"
}, file == null ? void 0 : file.mime_type)), React.createElement("div", {
className: "col-span-1"
}, React.createElement("dt", {
className: "text-sm font-medium text-gray-500"
}, "Downloadable"), React.createElement("dd", {
className: "mt-1 text-sm text-gray-900"
}, file != null && file.downloadable ? 'Yes' : 'No')), React.createElement("div", {
className: "col-span-1"
}, React.createElement("dt", {
className: "text-sm font-medium text-gray-500"
}, "Created"), React.createElement("dd", {
className: "mt-1 text-sm text-gray-900"
}, React.createElement("div", null, React.createElement("span", {
className: "mr-2 text-gray-900"
}, (file == null ? void 0 : file.created_at) && new Date(file.created_at).toLocaleDateString()), React.createElement("span", {
className: "text-gray-500 "
}, (file == null ? void 0 : file.created_at) && new Date(file.created_at).toLocaleTimeString())))), React.createElement("div", {
className: "col-span-1"
}, React.createElement("dt", {
className: "text-sm font-medium text-gray-500"
}, "Updated"), React.createElement("dd", {
className: "mt-1 text-sm text-gray-900"
}, React.createElement("div", null, React.createElement("span", {
className: "mr-2 text-gray-900"
}, (file == null ? void 0 : file.updated_at) && new Date(file.updated_at).toLocaleDateString()), React.createElement("span", {
className: "text-gray-500 "
}, (file == null ? void 0 : file.updated_at) && new Date(file.updated_at).toLocaleTimeString())))), React.createElement("div", {
className: "col-span-1"
}, React.createElement("dt", {
className: "text-sm font-medium text-gray-500"
}, "Owner"), React.createElement("dd", {
className: "mt-1 text-sm text-gray-900"
}, file == null ? void 0 : (_file$owner = file.owner) == null ? void 0 : _file$owner.name)), React.createElement("div", {
className: "col-span-1"
}, React.createElement("dt", {
className: "text-sm font-medium text-gray-500"
}, "Email"), React.createElement("dd", {
className: "mt-1 text-sm text-gray-900"
}, file == null ? void 0 : (_file$owner2 = file.owner) == null ? void 0 : _file$owner2.email))), React.createElement("div", {
className: "flex justify-between pt-6"
}, React.createElement("button", {
type: "button",
className: "items-center w-full px-3 py-2 mr-2 text-sm font-medium leading-4 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm sm:mr-3 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500",
onClick: function onClick() {
return setFile(null);
}
}, "Close"), React.createElement("button", {
type: "button",
className: "items-center w-full px-3 py-2 ml-2 text-sm font-medium leading-4 text-white bg-blue-600 border border-transparent rounded-md shadow-sm sm:ml-3 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500",
onClick: function onClick() {
return onSelect(file);
}
}, "Select file")));
};
var LoadingTable = function LoadingTable(_ref) {
var isSearching = _ref.isSearching;
var columns = [{
Header: 'Name'
}, {
Header: 'Size'
}, {
Header: 'Updated'
}];
var array = Array.from(Array(6).keys());
if (isSearching) {
columns = [].concat(columns, [{
Header: 'Service'
}]);
}
return React.createElement("div", {
className: "overflow-auto"
}, React.createElement("table", {
className: "min-w-full divide-y divide-gray-200"
}, React.createElement("thead", null, React.createElement("tr", null, columns.map(function (column, i) {
return React.createElement("th", {
key: "column-" + i,
className: "py-3 space-x-6 text-xs font-medium tracking-wide text-left text-gray-500 uppercase " + (i === columns.length - 1 ? 'text-right' : '')
}, column.Header);
}))), React.createElement("tbody", {
className: "bg-white divide-y divide-gray-200"
}, array.map(function (_, i) {
return React.createElement(LoadingRow, {
key: i,
columns: columns
});
}))));
};
var LoadingRow = function LoadingRow(_ref2) {
var columns = _ref2.columns;
return React.createElement("tr", null, columns.map(function (_, i) {
return React.createElement("td", {
className: "py-4 space-x-6 text-sm font-medium truncate whitespace-nowrap " + (i === columns.length - 1 ? 'text-right' : ''),
key: "cell-" + i,
style: {
maxWidth: 80
}
}, React.createElement("span", {
className: "px-16 py-0 bg-gray-200 rounded-sm animate-pulse"
}));
}));
};
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var FilesTable = function FilesTable(_ref) {
var _ref$data = _ref.data,
data = _ref$data === void 0 ? [] : _ref$data,
isLoadingMore = _ref.isLoadingMore,
handleSelect = _ref.handleSelect,
searchMode = _ref.searchMode,
uploadingMode = _ref.uploadingMode;
var columns = React.useMemo(function () {
return [{
Header: 'Name',
accessor: 'name',
Cell: function Cell(props) {
var type = props.row.original.type;
if (type === 'folder') {
return React.createElement("div", {
className: "flex items-center"
}, React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
className: "inline-block w-5 h-5 mr-1 text-yellow-300",
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor"
}, React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
})), React.createElement("span", {
className: "truncate"
}, props.value));
}
return React.createElement("div", {
className: "flex items-center truncate"
}, React.createElement("svg", {
viewBox: "0 0 24 24",
className: "inline-block w-5 h-5 mr-1 text-gray-500"
}, React.createElement("path", {
d: "M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4",
stroke: "currentColor",
fill: "none",
fillRule: "evenodd",
strokeLinejoin: "round"
})), React.createElement("span", {
className: "truncate"
}, props.value));
}
}, {
Header: 'Size',
accessor: 'size',
Cell: function Cell(_ref2) {
var value = _ref2.value;
return React.createElement("div", null, value ? formatBytes(value) : null);
}
}, {
Header: 'Updated',
accessor: 'updated_at',
Cell: function Cell(_ref3) {
var value = _ref3.value;
if (!value) return React.createElement("span", null);
var date = new Date(value);
return React.createElement("span", null, months[date.getMonth()] + " " + date.getDay() + ", " + new Date(value).toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit'
}));
}
}, {
Header: 'Service',
accessor: 'connection',
Cell: function Cell(_ref4) {
var value = _ref4.value;
if (!value) return React.createElement("span", {
className: "hidden text-gray-900"
}, "-");
return React.createElement("div", {
className: "flex justify-end pr-2"
}, React.createElement("img", {
className: "inline-block w-5 h-5 text-right rounded-full",
src: value != null && value.icon ? value.icon : '/img/logo.png',
alt: value.service_id
}));
}
}];
}, []);
var _useTable = useTable({
columns: columns,
data: data
}, useSortBy),
getTableBodyProps = _useTable.getTableBodyProps,
headerGroups = _useTable.headerGroups,
rows = _useTable.rows,
prepareRow = _useTable.prepareRow;
return React.createElement("div", {
className: "overflow-auto"
}, React.createElement("table", {
className: "min-w-full divide-y divide-gray-200"
}, React.createElement("thead", {
className: ""
}, headerGroups.map(function (headerGroup, i) {
return React.createElement("tr", Object.assign({}, headerGroup.getHeaderGroupProps(), {
key: "headerGroup" + i
}), headerGroup.headers.map(function (column, i) {
if (i === headerGroup.headers.length - 1 && !searchMode) {
return null;
}
return React.createElement("th", Object.assign({
key: "column-" + i,
className: "py-3 pr-2 space-x-6 text-xs font-medium tracking-wide text-left text-gray-500 uppercase " + (i === headerGroup.headers.length - 2 && !searchMode || i === headerGroup.headers.length - 1 && searchMode ? 'text-right' : '')
}, column.getHeaderProps(column.getSortByToggleProps())), column.render('Header'), React.createElement("span", null, column.isSorted ? column.isSortedDesc ? React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: