tweak-tools
Version:
Tweak your React projects until awesomeness
60 lines (59 loc) • 3.2 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (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.ImageComponent = void 0;
const react_1 = __importStar(require("react"));
const UI_1 = require("../UI");
const react_dropzone_1 = require("react-dropzone");
const StyledImage_1 = require("./StyledImage");
const context_1 = require("../../context");
const hooks_1 = require("../../hooks");
function ImageComponent() {
const { label, value, onUpdate, disabled } = (0, context_1.useInputContext)();
const { popinRef, wrapperRef, shown, show, hide } = (0, hooks_1.usePopin)();
const onDrop = (0, react_1.useCallback)((acceptedFiles) => {
if (acceptedFiles.length)
onUpdate(acceptedFiles[0]);
}, [onUpdate]);
const clear = (0, react_1.useCallback)((e) => {
e.stopPropagation();
onUpdate(undefined);
}, [onUpdate]);
const { getRootProps, getInputProps, isDragAccept } = (0, react_dropzone_1.useDropzone)({
maxFiles: 1,
accept: 'image/*',
onDrop,
disabled,
});
// TODO fix any in DropZone
return (react_1.default.createElement(UI_1.Row, { input: true },
react_1.default.createElement(UI_1.Label, null, label),
react_1.default.createElement(StyledImage_1.ImageContainer, null,
react_1.default.createElement(StyledImage_1.ImagePreview, { ref: popinRef, hasImage: !!value, onPointerDown: () => !!value && show(), onPointerUp: hide, style: { backgroundImage: value ? `url(${value})` : 'none' } }),
shown && !!value && (react_1.default.createElement(UI_1.Portal, null,
react_1.default.createElement(UI_1.Overlay, { onPointerUp: hide, style: { cursor: 'pointer' } }),
react_1.default.createElement(StyledImage_1.ImageLargePreview, { ref: wrapperRef, style: { backgroundImage: `url(${value})` } }))),
react_1.default.createElement(StyledImage_1.DropZone, Object.assign({}, getRootProps({ isDragAccept })),
react_1.default.createElement("input", Object.assign({}, getInputProps())),
react_1.default.createElement(StyledImage_1.Instructions, null, isDragAccept ? 'drop image' : 'click or drop')),
react_1.default.createElement(StyledImage_1.Remove, { onClick: clear, disabled: !value }))));
}
exports.ImageComponent = ImageComponent;