collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
61 lines (60 loc) • 2.61 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DropArea = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Paper_1 = require("nice-ui/lib/4-card/Paper");
const useDropArea_1 = tslib_1.__importDefault(require("react-use/lib/useDropArea"));
const nano_theme_1 = require("nano-theme");
const use_t_1 = require("use-t");
const context_1 = require("../context");
const Text_1 = require("nice-ui/lib/1-inline/Text");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const css = {
block: (0, nano_theme_1.rule)({
bxz: 'border-box',
pd: '8px',
}),
area: (0, nano_theme_1.drule)({
d: 'flex',
jc: 'center',
ai: 'center',
bdrad: '8px',
cur: 'pointer',
}),
};
const DropArea = () => {
const state = (0, context_1.useExplorer)();
const files = (0, useBehaviorSubject_1.useBehaviorSubject)(state.files$);
const theme = (0, nano_theme_1.useTheme)();
const [t] = (0, use_t_1.useT)();
const inputRef = React.useRef(null);
const [bond, area] = (0, useDropArea_1.default)({
onFiles: (files) => state.addFiles(files),
onUri: (uri) => console.log('uri', uri),
onText: (text) => console.log('text', text),
});
return (React.createElement(Paper_1.Paper, { className: css.block, round: true, contrast: true },
React.createElement("div", { ...bond, className: css.area({
pd: `${files.length ? 16 : 110}px 8px`,
bd: area.over ? `1px dashed ${theme.color.sem.blue[0]}` : `1px dashed ${theme.g(0.94)}`,
bg: area.over ? 'rgba(0,128,255,.04)' : theme.g(1),
'&:hover': {
bd: `1px dashed ${theme.color.sem.blue[0]}`,
bg: 'rgba(0,128,255,.04)',
'& > span': {
col: theme.color.sem.blue[0],
},
},
}), onClick: () => inputRef.current?.click() },
React.createElement(Text_1.Text, { font: 'ui3', size: -1, style: { pointerEvents: 'none' } }, t('Click or drop files here'))),
React.createElement("input", { multiple: true, type: "file", ref: inputRef, style: { display: 'none' }, onChange: () => {
const input = inputRef.current;
if (!input)
return;
const files = input.files;
if (files)
state.addFiles(Array.from(files));
} })));
};
exports.DropArea = DropArea;