@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,389 lines (1,232 loc) • 71.1 kB
JavaScript
import React, { useState, useEffect, useRef, Fragment, useCallback, useLayoutEffect, forwardRef } from 'react';
import { Transition, Menu } from '@headlessui/react';
import { createPortal } from 'react-dom';
import a from 'swr';
import { useTable, useSortBy } from 'react-table';
import { Waypoint } from 'react-waypoint';
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 _excluded = ["children", "onClose", "isOpen", "className", "style"];
var Modal = /*#__PURE__*/React.forwardRef(function Modal(props, ref) {
var children = props.children,
onClose = props.onClose,
isOpen = props.isOpen,
_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
}, 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",
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(Transition, {
show: !!(folders != null && folders.length),
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"
}, 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.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 columns = [{
Header: 'Name'
}, {
Header: 'Size'
}, {
Header: 'Updated'
}];
var LoadingTable = function LoadingTable() {
var array = Array.from(Array(8).keys());
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"
}, column.Header);
}))), React.createElement("tbody", {
className: "bg-white divide-y divide-gray-200"
}, array.map(function (_, i) {
return React.createElement(LoadingRow, {
key: i
});
}))));
};
var LoadingRow = function LoadingRow() {
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",
key: "cell-" + i,
style: {
maxWidth: 100
}
}, 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;
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", {
className: "text-gray-900"
}, "-");
var date = new Date(value);
return React.createElement("span", {
className: "text-gray-900 "
}, months[date.getMonth()] + " " + date.getDay() + ", " + new Date(value).toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit'
}));
}
}];
}, []);
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) {
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"
}, 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: "0 0 24 24",
stroke: "currentColor",
className: "inline-block w-4 h-4 ml-2 text-gray-500"
}, React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M19 9l-7 7-7-7"
})) : React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
className: "inline-block w-4 h-4 ml-2 text-gray-500"
}, React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M5 15l7-7 7 7"
})) : ''));
}));
})), React.createElement("tbody", Object.assign({}, getTableBodyProps(), {
className: "bg-white divide-y divide-gray-200"
}), rows.map(function (row, i) {
prepareRow(row);
return React.createElement(Transition, Object.assign({
show: true,
enter: "transition ease-out duration-300",
enterFrom: "transform opacity-40",
enterTo: "transform opacity-100",
leave: "transition ease-in duration-300",
leaveFrom: "transform opacity-100",
leaveTo: "transform opacity-0",
as: "tr"
}, row.getRowProps(), {
key: "row-" + i,
className: "cursor-pointer hover:bg-gray-50",
onClick: function onClick() {
return handleSelect(row.original);
}
}), row.cells.map(function (cell, i) {
return React.createElement("td", Object.assign({
className: "py-3 space-x-6 text-xs text-gray-900 truncate max-w-2xs whitespace-nowrap",
style: {
maxWidth: '16rem'
}
}, cell.getCellProps(), {
key: "cell-" + i
}), cell.render('Cell'));
}));
}))), isLoadingMore ? React.createElement("table", {
className: "min-w-full divide-y divide-gray-200"
}, Array.from(Array(12).keys()).map(function (key) {
return React.createElement(LoadingRow, {
key: key
});
})) : '');
};
var Search = function Search(_ref) {
var _onChange = _ref.onChange,
searchTerm = _ref.searchTerm,
isSearchVisible = _ref.isSearchVisible,
setIsSearchVisible = _ref.setIsSearchVisible;
var inputEl = useRef(null);
var handleClick = function handleClick() {
if (isSearchVisible) {
_onChange('');
setIsSearchVisible(false);
} else {
setIsSearchVisible(true);
setTimeout(function () {
var _inputEl$current;
(_inputEl$current = inputEl.current) == null ? void 0 : _inputEl$current.focus();
}, 0);
}
};
return isSearchVisible ? React.createElement("div", {
className: "h-5"
}, React.createElement("div", {
className: "absolute w-full -inset-x-0 -top-2"
}, React.createElement("div", {
className: "relative"
}, React.createElement("button", {
className: "absolute right-2 top-2",
onClick: function onClick() {
return handleClick();
}
}, React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
className: "w-5 h-5 text-gray-400 transition duration-150 hover:text-gray-500",
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor"
}, React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M6 18L18 6M6 6l12 12"
}))), React.createElement("input", {
className: "w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 border border-gray-200 rounded shadow-sm appearance-none focus:outline-none focus:shadow-outline",
name: "search",
placeholder: "Search",
autoComplete: "off",
ref: inputEl,
onChange: function onChange(event) {
return _onChange(event.target.value);
},
value: searchTerm
})))) : React.createElement("button", {
className: "",
onClick: function onClick() {
return handleClick();
}
}, React.createElement("svg", {
className: "w-5 h-5 text-gray-400 transition duration-150 hover:text-gray-500",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20",
fill: "currentColor",
"aria-hidden": "true"
}, React.createElement("path", {
fillRule: "evenodd",
d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
clipRule: "evenodd"
})));
};
var SlideOver = function SlideOver(_ref) {
var _window;
var open = _ref.open,
children = _ref.children;
var desktopStyles = {
width: 'calc(100% - 3rem)',
left: '1.5rem'
};
var mobileStyles = {
width: 'calc(100% - 2rem)',
left: '1rem'
};
return React.createElement(Transition, {
show: open,
as: Fragment
}, React.createElement("div", {
className: "absolute bottom-0 left-0 right-0 rounded-t-2xl",
style: ((_window = window) == null ? void 0 : _window.innerWidth) > 768 ? desktopStyles : mobileStyles
}, React.createElement(Transition.Child, {
as: Fragment,
enter: "transform transition ease-in-out duration-300",
enterFrom: "translate-y-full",
enterTo: "translate-y-0",
leave: "transform transition ease-in-out duration-300",
leaveFrom: "translate-y-0",
leaveTo: "translate-y-full"
}, React.createElement("div", {
className: "relative w-full rounded-t-2xl"
}, React.createElement("div", {
className: "flex flex-col h-full py-6 overflow-y-auto border border-gray-200 rounded-t-lg shadow-sm bg-gray-50"
}, React.createElement("div", {
className: "relative flex-1 px-4 sm:px-6"
}, children))))));
};
var useDebounce = function useDebounce(value, delay) {
if (delay === void 0) {
delay = 500;
}
var _useState = useState(value),
currentValue = _useState[0],
setCurrentValue = _useState[1];
var interval = useRef(null);
var clean = function clean() {
if (interval.current !== null) {
clearInterval(interval.current);
}
};
useEffect(function () {
interval.current = setTimeout(function () {
setCurrentValue(value);
}, delay);
return clean;
}, [value, delay]);
useEffect(function () {
return clean;
}, []);
return currentValue;
};
var usePrevious = function usePrevious(value) {
var ref = useRef();
useEffect(function () {
ref.current = value;
}, [value]);
return ref.current;
};
function i(n,t,e,r){return new(e||(e=Promise))(function(u,a){function i(n){try{c(r.next(n));}catch(n){a(n);}}function o(n){try{c(r.throw(n));}catch(n){a(n);}}function c(n){var t;n.done?u(n.value):(t=n.value,t instanceof e?t:new e(function(n){n(t);})).then(i,o);}c((r=r.apply(n,t||[])).next());})}function o(n,t){var e,r,u,a,i={label:0,sent:function(){if(1&u[0])throw u[1];return u[1]},trys:[],ops:[]};return a={next:o(0),throw:o(1),return:o(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function o(a){return function(o){return function(a){if(e)throw new TypeError("Generator is already executing.");for(;i;)try{if(e=1,r&&(u=2&a[0]?r.return:a[0]?r.throw||((u=r.return)&&u.call(r),0):r.next)&&!(u=u.call(r,a[1])).done)return u;switch(r=0,u&&(a=[2&a[0],u.value]),a[0]){case 0:case 1:u=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,r=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(u=i.trys,(u=u.length>0&&u[u.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!u||a[1]>u[0]&&a[1]<u[3])){i.label=a[1];break}if(6===a[0]&&i.label<u[1]){i.label=u[1],u=a;break}if(u&&i.label<u[2]){i.label=u[2],i.ops.push(a);break}u[2]&&i.ops.pop(),i.trys.pop();continue}a=t.call(n,i);}catch(n){a=[6,n],r=0;}finally{e=u=0;}if(5&a[0])throw a[1];return {value:a[0]?a[1]:void 0,done:!0}}([a,o])}}}var c="undefined"==typeof window||"Deno"in window,l=c?useEffect:useLayoutEffect;var s={}[0],v=function(n){return n===s},p=function(n){return "function"==typeof n},d=new WeakMap,y=0;function h(n){if(p(n))try{n=n();}catch(t){n="";}var t;return Array.isArray(n)?(t=n,n=function(n){if(!n.length)return "";for(var t="arg",e=0;e<n.length;++e){var r=n[e],u=s;null===r||"object"!=typeof r&&!p(r)?u=JSON.stringify(r):d.has(r)?u=d.get(r):(u=y,d.set(r,y++)),t+="$"+u;}return t}(n)):t=[n=String(n||"")],[n,t,n?"$err$"+n:"",n?"$req$"+n:""]}function g(n){return p(n[1])?[n[0],n[1],n[2]||{}]:[n[0],null,(null===n[1]?n[2]:n[1])||{}]}var b=function(n){return h(n?n(0,null):null)[0]},$=function(n){return function(t,a,c){var f=c.cache,d=c.initialSize,y=void 0===d?1:d,g=c.revalidateAll,w=void 0!==g&&g,$=c.persistSize,m=void 0!==$&&$,x=null;try{x=b(t);}catch(n){}var S=useState({})[1],k=null;x&&(k="$ctx$"+x);var z=null;x&&(z="$len$"+x);var A=useRef(!1),D=useCallback(function(){var n=f.get(z);return v(n)?y:n},[z,y]),T=useRef(D());l(function(){A.current?x&&f.set(z,m?T.current:y):A.current=!0;},[x]);var V=useRef(),j=n(x?"$inf$"+x:null,function(){return i(void 0,void 0,void 0,function(){var n,e,r,u,i,l,s,p,d,y,g,b;return o(this,function(o){switch(o.label){case 0:n=f.get(k)||[],e=n[0],r=n[1],u=[],i=D(),l=null,s=0,o.label=1;case 1:return s<i?(p=h(t?t(s,l):null),d=p[0],y=p[1],d?(g=f.get(d),b=w||e||v(g)||!s&&!v(V.current)||r&&!v(r[s])&&!c.compare(r[s],g),a&&b?[4,a.apply(void 0,y)]:[3,3]):[3,5]):[3,5