phx-react
Version:
PHX REACT
49 lines • 4.44 kB
JavaScript
"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var solid_1 = require("@heroicons/react/20/solid");
var Modal_1 = require("../Modal");
function ImportModal(_a) {
var handleImport = _a.handleImport, show = _a.show, onHide = _a.onHide, onChangeCapture = _a.onChangeCapture;
var _b = (0, react_1.useState)(''), fileName = _b[0], setFileName = _b[1];
var inputFileRef = react_1["default"].useRef();
var onFileChangeCapture = function (e) {
var file = e.target.files ? e.target.files[0] : null;
if (file) {
var fileName_1 = file.name;
setFileName(fileName_1);
}
if (onChangeCapture) {
onChangeCapture(file);
}
};
var onFileChange = function () {
// @ts-ignore
inputFileRef.current.click();
};
return (react_1["default"].createElement(Modal_1.PHXModal, { show: show, onHide: onHide, primaryActionText: 'X\u00E1c nh\u1EADn', onPrimaryClick: handleImport },
react_1["default"].createElement("div", null,
react_1["default"].createElement("div", { className: 'border-b border-gray-200 bg-white px-4 py-5 sm:px-6 -ml-6 -mt-6 -mr-6' },
react_1["default"].createElement("h3", { className: 'text-lg font-medium leading-6 text-gray-900' }, "T\u1EA3i l\u00EAn d\u1EEF li\u1EC7u")),
react_1["default"].createElement("div", { className: 'mt-2' },
react_1["default"].createElement("p", { className: 'text-sm text-gray-500' }, "H\u00E3y ki\u1EC3m tra d\u1EEF li\u1EC7u tr\u01B0\u1EDBc khi t\u1EA3i l\u00EAn")),
react_1["default"].createElement("div", { className: 'mt-5' },
react_1["default"].createElement("div", { className: 'hidden' },
react_1["default"].createElement("input", { type: 'file', ref: inputFileRef, onChangeCapture: onFileChangeCapture })),
fileName == '' ? (react_1["default"].createElement("button", { type: 'button', onClick: onFileChange, className: 'relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2' },
react_1["default"].createElement("svg", { className: 'mx-auto h-12 w-12 text-gray-400', xmlns: 'http://www.w3.org/2000/svg', stroke: 'currentColor', fill: 'none', viewBox: '0 0 48 48', "aria-hidden": 'true' },
react_1["default"].createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M8 14v20c0 4.418 7.163 8 16 8 1.381 0 2.721-.087 4-.252M8 14c0 4.418 7.163 8 16 8s16-3.582 16-8M8 14c0-4.418 7.163-8 16-8s16 3.582 16 8m0 0v14m0-4c0 4.418-7.163 8-16 8S8 28.418 8 24m32 10v6m0 0v6m0-6h6m-6 0h-6' })),
react_1["default"].createElement("span", { className: 'mt-2 block text-sm font-medium text-gray-900' }, "Ch\u1ECDn th\u01B0 m\u1EE5c"))) : (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("div", { className: 'flex border text-gray-500 text-sm border-r-0 border-l-0 border-gray-300 pt-5 pb-5 pl-3 pr-3' },
react_1["default"].createElement("div", { className: 'flex flex-1' },
react_1["default"].createElement(solid_1.DocumentTextIcon, { className: 'mr-1 w-5 h-5 min-w-fit' }),
react_1["default"].createElement("span", null, fileName)),
react_1["default"].createElement("div", { className: 'text-right' },
react_1["default"].createElement("button", { onClick: onFileChange, type: 'button', className: 'inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2' }, "Thay \u0111\u1ED5i")))))),
react_1["default"].createElement("div", { className: 'flex mt-5' },
react_1["default"].createElement(solid_1.InformationCircleIcon, { className: 'w-6 h-6 text-gray-400 mr-1' }),
react_1["default"].createElement("label", { htmlFor: 'comments', className: 'text-sm text-gray-500' }, "check")))));
}
exports["default"] = ImportModal;
//# sourceMappingURL=ModalImport.js.map