phx-react 1.3.147 → 1.3.148
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/FormWrap/FormWrap.d.ts +6 -1
- package/dist/cjs/components/FormWrap/FormWrap.js +26 -10
- package/dist/cjs/components/FormWrap/FormWrap.js.map +1 -1
- package/dist/cjs/components/FormWrap/ModalImport.d.ts +2 -0
- package/dist/cjs/components/FormWrap/ModalImport.js +49 -0
- package/dist/cjs/components/FormWrap/ModalImport.js.map +1 -0
- package/dist/esm/components/FormWrap/FormWrap.d.ts +6 -1
- package/dist/esm/components/FormWrap/FormWrap.js +26 -10
- package/dist/esm/components/FormWrap/FormWrap.js.map +1 -1
- package/dist/esm/components/FormWrap/ModalImport.d.ts +2 -0
- package/dist/esm/components/FormWrap/ModalImport.js +45 -0
- package/dist/esm/components/FormWrap/ModalImport.js.map +1 -0
- package/package.json +1 -1
|
@@ -4,6 +4,8 @@ export interface FooterBarProps {
|
|
|
4
4
|
nameOfModal?: string;
|
|
5
5
|
method?: string;
|
|
6
6
|
headerAction?: boolean;
|
|
7
|
+
headerActionText?: string;
|
|
8
|
+
headerActionType?: 'import' | 'custom';
|
|
7
9
|
footerAction?: boolean;
|
|
8
10
|
className?: string;
|
|
9
11
|
children?: any;
|
|
@@ -24,5 +26,8 @@ export interface FooterBarProps {
|
|
|
24
26
|
onDelete?(): void;
|
|
25
27
|
onCancel?(): void;
|
|
26
28
|
onSubmit?(): void;
|
|
29
|
+
onImport?(): void;
|
|
30
|
+
onChangeCapture?(): void;
|
|
31
|
+
onHeaderActionClick?(): void;
|
|
27
32
|
}
|
|
28
|
-
export declare const PHXFormWrap: ({ badge, cancelText, children, className, deleted, deletedLoading, footerAction, headerAction, loading, method, nameOfModal, onCancel, onDelete, onSubmit, onlyDelete, size, formType, submit, submitText, title, type, }: FooterBarProps) => React.JSX.Element;
|
|
33
|
+
export declare const PHXFormWrap: ({ badge, cancelText, children, className, deleted, deletedLoading, footerAction, headerAction, headerActionText, headerActionType, loading, method, nameOfModal, onCancel, onDelete, onSubmit, onImport, onChangeCapture, onHeaderActionClick, onlyDelete, size, formType, submit, submitText, title, type, }: FooterBarProps) => React.JSX.Element;
|
|
@@ -9,10 +9,12 @@ var solid_1 = require("@heroicons/react/20/solid");
|
|
|
9
9
|
var Badge_1 = require("../Badge");
|
|
10
10
|
var Modal_1 = require("../Modal");
|
|
11
11
|
var outline_1 = require("@heroicons/react/24/outline");
|
|
12
|
+
var ModalImport_1 = tslib_1.__importDefault(require("./ModalImport"));
|
|
12
13
|
var PHXFormWrap = function (_a) {
|
|
13
|
-
var badge = _a.badge, cancelText = _a.cancelText, children = _a.children, className = _a.className, deleted = _a.deleted, deletedLoading = _a.deletedLoading, _b = _a.footerAction, footerAction = _b === void 0 ? true : _b, _c = _a.headerAction, headerAction = _c === void 0 ? true : _c, loading = _a.loading, method = _a.method, nameOfModal = _a.nameOfModal, onCancel = _a.onCancel, onDelete = _a.onDelete, onSubmit = _a.onSubmit, onlyDelete = _a.onlyDelete,
|
|
14
|
+
var badge = _a.badge, cancelText = _a.cancelText, children = _a.children, className = _a.className, deleted = _a.deleted, deletedLoading = _a.deletedLoading, _b = _a.footerAction, footerAction = _b === void 0 ? true : _b, _c = _a.headerAction, headerAction = _c === void 0 ? true : _c, headerActionText = _a.headerActionText, _d = _a.headerActionType, headerActionType = _d === void 0 ? 'custom' : _d, loading = _a.loading, method = _a.method, nameOfModal = _a.nameOfModal, onCancel = _a.onCancel, onDelete = _a.onDelete, onSubmit = _a.onSubmit, onImport = _a.onImport, onChangeCapture = _a.onChangeCapture, onHeaderActionClick = _a.onHeaderActionClick, onlyDelete = _a.onlyDelete, _e = _a.size, size = _e === void 0 ? 'large' : _e, formType = _a.formType, submit = _a.submit, submitText = _a.submitText, title = _a.title, _f = _a.type, type = _f === void 0 ? 'default' : _f;
|
|
14
15
|
var sizeClassName = (0, types_1.classNames)(size === 'small' && 'mx-auto md:w-4/6 lg:w-1/2', size === 'medium' && 'mx-auto md:w-5/6 lg:w-3/4', size === 'large' && 'mx-auto md:w-md lg:w-11/12');
|
|
15
|
-
var
|
|
16
|
+
var _g = (0, react_1.useState)(false), isModalOpen = _g[0], setIsModalOpen = _g[1];
|
|
17
|
+
var _h = (0, react_1.useState)(false), openImport = _h[0], setOpenImport = _h[1];
|
|
16
18
|
var handleDelete = function () {
|
|
17
19
|
if (onDelete) {
|
|
18
20
|
onDelete();
|
|
@@ -21,19 +23,32 @@ var PHXFormWrap = function (_a) {
|
|
|
21
23
|
return;
|
|
22
24
|
}
|
|
23
25
|
};
|
|
26
|
+
var handleHeaderAction = function () {
|
|
27
|
+
if (headerActionType === 'import') {
|
|
28
|
+
setOpenImport(true);
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
if (onHeaderActionClick) {
|
|
32
|
+
onHeaderActionClick();
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
};
|
|
24
36
|
(0, react_1.useEffect)(function () {
|
|
25
37
|
setIsModalOpen(deletedLoading);
|
|
26
38
|
}, [deletedLoading]);
|
|
27
39
|
return (react_1["default"].createElement("div", { className: className },
|
|
28
40
|
react_1["default"].createElement("form", { method: method, onSubmit: onSubmit },
|
|
29
41
|
react_1["default"].createElement("div", { className: sizeClassName },
|
|
30
|
-
headerAction && (react_1["default"].createElement("div", { className: 'mb-4
|
|
31
|
-
react_1["default"].createElement("
|
|
32
|
-
react_1["default"].createElement(
|
|
33
|
-
|
|
34
|
-
react_1["default"].createElement("
|
|
35
|
-
|
|
36
|
-
react_1["default"].createElement(
|
|
42
|
+
headerAction && (react_1["default"].createElement("div", { className: 'flex mb-4 justify-between items-center' },
|
|
43
|
+
react_1["default"].createElement("div", { className: 'flex items-center' },
|
|
44
|
+
react_1["default"].createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 bg-transparent px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200 active:bg-gray-300 active:pt-[0.3rem] active:pb-[0.2rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', type: 'button', onClick: onCancel },
|
|
45
|
+
react_1["default"].createElement(solid_1.ArrowLeftIcon, { className: 'h-5 w-5' })),
|
|
46
|
+
react_1["default"].createElement("div", { className: (0, types_1.classNames)('ml-2 min-w-0', type === 'default' ? 'flex-1' : 'flex') },
|
|
47
|
+
react_1["default"].createElement("h2", { className: (0, types_1.classNames)('sm:text-md truncate text-lg font-medium leading-6 text-gray-600 sm:tracking-tight', type === 'default' ? '' : 'flex-1 mr-2') }, title),
|
|
48
|
+
type === 'title-with-badge' && (react_1["default"].createElement("div", { className: 'flex items-center' },
|
|
49
|
+
react_1["default"].createElement(Badge_1.PHXBadge, { text: badge.badgeText, type: badge.badgeType }))))),
|
|
50
|
+
headerActionText && (react_1["default"].createElement("div", null,
|
|
51
|
+
react_1["default"].createElement(Button_1.PHXButton, { primary: true, size: 'small', onClick: handleHeaderAction }, headerActionText))))),
|
|
37
52
|
children,
|
|
38
53
|
react_1["default"].createElement("div", { className: footerAction
|
|
39
54
|
? (0, types_1.classNames)(deleted ? 'justify-between' : 'justify-end gap-x-3', 'pt-6 mt-6 flex items-center')
|
|
@@ -52,7 +67,8 @@ var PHXFormWrap = function (_a) {
|
|
|
52
67
|
"?"))))))),
|
|
53
68
|
!onlyDelete && (react_1["default"].createElement("div", { className: 'flex justify-end gap-x-3' },
|
|
54
69
|
react_1["default"].createElement(Button_1.PHXButton, { size: 'small', secondary: true, onClick: onCancel }, formType === 'custom' ? cancelText : 'Huỷ thay đổi'),
|
|
55
|
-
submit ? (react_1["default"].createElement(Button_1.PHXButton, { size: 'small', loading: loading, submit: true, primary: true }, formType === 'custom' ? submitText : formType === 'add' ? 'Thêm mới' : 'Cập nhật')) : (react_1["default"].createElement(Button_1.PHXButton, { size: 'small', loading: loading, onClick: onSubmit, primary: true }, formType === 'custom' ? submitText : formType === 'add' ? 'Thêm mới' : 'Cập nhật')))))))
|
|
70
|
+
submit ? (react_1["default"].createElement(Button_1.PHXButton, { size: 'small', loading: loading, submit: true, primary: true }, formType === 'custom' ? submitText : formType === 'add' ? 'Thêm mới' : 'Cập nhật')) : (react_1["default"].createElement(Button_1.PHXButton, { size: 'small', loading: loading, onClick: onSubmit, primary: true }, formType === 'custom' ? submitText : formType === 'add' ? 'Thêm mới' : 'Cập nhật'))))))),
|
|
71
|
+
react_1["default"].createElement(ModalImport_1["default"], { show: openImport, onHide: function () { return setOpenImport(false); }, handleImport: onImport, onChangeCapture: onChangeCapture })));
|
|
56
72
|
};
|
|
57
73
|
exports.PHXFormWrap = PHXFormWrap;
|
|
58
74
|
//# sourceMappingURL=FormWrap.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormWrap.js","sourceRoot":"","sources":["../../../../src/components/FormWrap/FormWrap.tsx"],"names":[],"mappings":";;;;AAAA,qDAAkD;AAClD,oCAAqC;AACrC,kCAAqC;AACrC,mDAAyD;AACzD,kCAAmC;AACnC,kCAAmC;AACnC,uDAAqE;
|
|
1
|
+
{"version":3,"file":"FormWrap.js","sourceRoot":"","sources":["../../../../src/components/FormWrap/FormWrap.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
exports.__esModule = true;
|
|
3
|
+
var tslib_1 = require("tslib");
|
|
4
|
+
var react_1 = tslib_1.__importStar(require("react"));
|
|
5
|
+
var solid_1 = require("@heroicons/react/20/solid");
|
|
6
|
+
var Modal_1 = require("../Modal");
|
|
7
|
+
function ImportModal(_a) {
|
|
8
|
+
var handleImport = _a.handleImport, show = _a.show, onHide = _a.onHide, onChangeCapture = _a.onChangeCapture;
|
|
9
|
+
var _b = (0, react_1.useState)(''), fileName = _b[0], setFileName = _b[1];
|
|
10
|
+
var inputFileRef = react_1["default"].useRef();
|
|
11
|
+
var onFileChangeCapture = function (e) {
|
|
12
|
+
var file = e.target.files ? e.target.files[0] : null;
|
|
13
|
+
if (file) {
|
|
14
|
+
var fileName_1 = file.name;
|
|
15
|
+
setFileName(fileName_1);
|
|
16
|
+
}
|
|
17
|
+
if (onChangeCapture) {
|
|
18
|
+
onChangeCapture(file);
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
var onFileChange = function () {
|
|
22
|
+
// @ts-ignore
|
|
23
|
+
inputFileRef.current.click();
|
|
24
|
+
};
|
|
25
|
+
return (react_1["default"].createElement(Modal_1.PHXModal, { show: show, onHide: onHide, primaryActionText: 'X\u00E1c nh\u1EADn', onPrimaryClick: handleImport },
|
|
26
|
+
react_1["default"].createElement("div", null,
|
|
27
|
+
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' },
|
|
28
|
+
react_1["default"].createElement("h3", { className: 'text-lg font-medium leading-6 text-gray-900' }, "T\u1EA3i l\u00EAn d\u1EEF li\u1EC7u")),
|
|
29
|
+
react_1["default"].createElement("div", { className: 'mt-2' },
|
|
30
|
+
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")),
|
|
31
|
+
react_1["default"].createElement("div", { className: 'mt-5' },
|
|
32
|
+
react_1["default"].createElement("div", { className: 'hidden' },
|
|
33
|
+
react_1["default"].createElement("input", { type: 'file', ref: inputFileRef, onChangeCapture: onFileChangeCapture })),
|
|
34
|
+
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' },
|
|
35
|
+
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' },
|
|
36
|
+
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' })),
|
|
37
|
+
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,
|
|
38
|
+
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' },
|
|
39
|
+
react_1["default"].createElement("div", { className: 'flex flex-1' },
|
|
40
|
+
react_1["default"].createElement(solid_1.DocumentTextIcon, { className: 'mr-1 w-5 h-5 min-w-fit' }),
|
|
41
|
+
react_1["default"].createElement("span", null, fileName)),
|
|
42
|
+
react_1["default"].createElement("div", { className: 'text-right' },
|
|
43
|
+
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")))))),
|
|
44
|
+
react_1["default"].createElement("div", { className: 'flex mt-5' },
|
|
45
|
+
react_1["default"].createElement(solid_1.InformationCircleIcon, { className: 'w-6 h-6 text-gray-400 mr-1' }),
|
|
46
|
+
react_1["default"].createElement("label", { htmlFor: 'comments', className: 'text-sm text-gray-500' }, "check")))));
|
|
47
|
+
}
|
|
48
|
+
exports["default"] = ImportModal;
|
|
49
|
+
//# sourceMappingURL=ModalImport.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalImport.js","sourceRoot":"","sources":["../../../../src/components/FormWrap/ModalImport.tsx"],"names":[],"mappings":";;;AAAA,qDAAuC;AACvC,mDAAmF;AACnF,kCAAmC;AAEnC,SAAwB,WAAW,CAAC,EAAoD;QAAlD,YAAY,kBAAA,EAAE,IAAI,UAAA,EAAE,MAAM,YAAA,EAAE,eAAe,qBAAA;IACzE,IAAA,KAA0B,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAArC,QAAQ,QAAA,EAAE,WAAW,QAAgB,CAAA;IAE5C,IAAM,YAAY,GAAG,kBAAK,CAAC,MAAM,EAAE,CAAA;IAEnC,IAAM,mBAAmB,GAAG,UAAC,CAAsC;QACjE,IAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;QACtD,IAAI,IAAI,EAAE;YACR,IAAM,UAAQ,GAAG,IAAI,CAAC,IAAI,CAAA;YAC1B,WAAW,CAAC,UAAQ,CAAC,CAAA;SACtB;QACD,IAAI,eAAe,EAAE;YACnB,eAAe,CAAC,IAAI,CAAC,CAAA;SACtB;IACH,CAAC,CAAA;IAED,IAAM,YAAY,GAAG;QACnB,aAAa;QACb,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;IAC9B,CAAC,CAAA;IAED,OAAO,CACL,iCAAC,gBAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAC,oBAAU,EAAC,cAAc,EAAE,YAAY;QAC7F;YACE,0CAAK,SAAS,EAAC,uEAAuE;gBACpF,yCAAI,SAAS,EAAC,6CAA6C,0CAAqB,CAC5E;YACN,0CAAK,SAAS,EAAC,MAAM;gBACnB,wCAAG,SAAS,EAAC,uBAAuB,qFAA2C,CAC3E;YACN,0CAAK,SAAS,EAAC,MAAM;gBACnB,0CAAK,SAAS,EAAC,QAAQ;oBAErB,4CAAO,IAAI,EAAC,MAAM,EAAC,GAAG,EAAE,YAAY,EAAE,eAAe,EAAE,mBAAmB,GAAI,CAC1E;gBACL,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,CAChB,6CACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,YAAY,EACrB,SAAS,EAAC,0LAA0L;oBAEpM,0CACE,SAAS,EAAC,iCAAiC,EAC3C,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,iBACP,MAAM;wBAElB,2CACE,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,mNAAmN,GACrN,CACE;oBACN,2CAAM,SAAS,EAAC,8CAA8C,kCAAoB,CAC3E,CACV,CAAC,CAAC,CAAC,CACF;oBACE,0CAAK,SAAS,EAAC,6FAA6F;wBAC1G,0CAAK,SAAS,EAAC,aAAa;4BAC1B,iCAAC,wBAAgB,IAAC,SAAS,EAAE,wBAAwB,GAAI;4BACzD,+CAAO,QAAQ,CAAQ,CACnB;wBACN,0CAAK,SAAS,EAAC,YAAY;4BACzB,6CACE,OAAO,EAAE,YAAY,EACrB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,uNAAuN,yBAG1N,CACL,CACF,CACL,CACJ,CACG;YACN,0CAAK,SAAS,EAAC,WAAW;gBACxB,iCAAC,6BAAqB,IAAC,SAAS,EAAC,4BAA4B,GAAG;gBAChE,4CAAO,OAAO,EAAC,UAAU,EAAC,SAAS,EAAC,uBAAuB,YAEnD,CACJ,CACF,CACG,CACZ,CAAA;AACH,CAAC;AAvFD,iCAuFC"}
|
|
@@ -4,6 +4,8 @@ export interface FooterBarProps {
|
|
|
4
4
|
nameOfModal?: string;
|
|
5
5
|
method?: string;
|
|
6
6
|
headerAction?: boolean;
|
|
7
|
+
headerActionText?: string;
|
|
8
|
+
headerActionType?: 'import' | 'custom';
|
|
7
9
|
footerAction?: boolean;
|
|
8
10
|
className?: string;
|
|
9
11
|
children?: any;
|
|
@@ -24,5 +26,8 @@ export interface FooterBarProps {
|
|
|
24
26
|
onDelete?(): void;
|
|
25
27
|
onCancel?(): void;
|
|
26
28
|
onSubmit?(): void;
|
|
29
|
+
onImport?(): void;
|
|
30
|
+
onChangeCapture?(): void;
|
|
31
|
+
onHeaderActionClick?(): void;
|
|
27
32
|
}
|
|
28
|
-
export declare const PHXFormWrap: ({ badge, cancelText, children, className, deleted, deletedLoading, footerAction, headerAction, loading, method, nameOfModal, onCancel, onDelete, onSubmit, onlyDelete, size, formType, submit, submitText, title, type, }: FooterBarProps) => React.JSX.Element;
|
|
33
|
+
export declare const PHXFormWrap: ({ badge, cancelText, children, className, deleted, deletedLoading, footerAction, headerAction, headerActionText, headerActionType, loading, method, nameOfModal, onCancel, onDelete, onSubmit, onImport, onChangeCapture, onHeaderActionClick, onlyDelete, size, formType, submit, submitText, title, type, }: FooterBarProps) => React.JSX.Element;
|
|
@@ -5,10 +5,12 @@ import { ArrowLeftIcon } from '@heroicons/react/20/solid';
|
|
|
5
5
|
import { PHXBadge } from '../Badge';
|
|
6
6
|
import { PHXModal } from '../Modal';
|
|
7
7
|
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
|
8
|
+
import ImportModal from './ModalImport';
|
|
8
9
|
export var PHXFormWrap = function (_a) {
|
|
9
|
-
var badge = _a.badge, cancelText = _a.cancelText, children = _a.children, className = _a.className, deleted = _a.deleted, deletedLoading = _a.deletedLoading, _b = _a.footerAction, footerAction = _b === void 0 ? true : _b, _c = _a.headerAction, headerAction = _c === void 0 ? true : _c, loading = _a.loading, method = _a.method, nameOfModal = _a.nameOfModal, onCancel = _a.onCancel, onDelete = _a.onDelete, onSubmit = _a.onSubmit, onlyDelete = _a.onlyDelete,
|
|
10
|
+
var badge = _a.badge, cancelText = _a.cancelText, children = _a.children, className = _a.className, deleted = _a.deleted, deletedLoading = _a.deletedLoading, _b = _a.footerAction, footerAction = _b === void 0 ? true : _b, _c = _a.headerAction, headerAction = _c === void 0 ? true : _c, headerActionText = _a.headerActionText, _d = _a.headerActionType, headerActionType = _d === void 0 ? 'custom' : _d, loading = _a.loading, method = _a.method, nameOfModal = _a.nameOfModal, onCancel = _a.onCancel, onDelete = _a.onDelete, onSubmit = _a.onSubmit, onImport = _a.onImport, onChangeCapture = _a.onChangeCapture, onHeaderActionClick = _a.onHeaderActionClick, onlyDelete = _a.onlyDelete, _e = _a.size, size = _e === void 0 ? 'large' : _e, formType = _a.formType, submit = _a.submit, submitText = _a.submitText, title = _a.title, _f = _a.type, type = _f === void 0 ? 'default' : _f;
|
|
10
11
|
var sizeClassName = classNames(size === 'small' && 'mx-auto md:w-4/6 lg:w-1/2', size === 'medium' && 'mx-auto md:w-5/6 lg:w-3/4', size === 'large' && 'mx-auto md:w-md lg:w-11/12');
|
|
11
|
-
var
|
|
12
|
+
var _g = useState(false), isModalOpen = _g[0], setIsModalOpen = _g[1];
|
|
13
|
+
var _h = useState(false), openImport = _h[0], setOpenImport = _h[1];
|
|
12
14
|
var handleDelete = function () {
|
|
13
15
|
if (onDelete) {
|
|
14
16
|
onDelete();
|
|
@@ -17,19 +19,32 @@ export var PHXFormWrap = function (_a) {
|
|
|
17
19
|
return;
|
|
18
20
|
}
|
|
19
21
|
};
|
|
22
|
+
var handleHeaderAction = function () {
|
|
23
|
+
if (headerActionType === 'import') {
|
|
24
|
+
setOpenImport(true);
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
if (onHeaderActionClick) {
|
|
28
|
+
onHeaderActionClick();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
};
|
|
20
32
|
useEffect(function () {
|
|
21
33
|
setIsModalOpen(deletedLoading);
|
|
22
34
|
}, [deletedLoading]);
|
|
23
35
|
return (React.createElement("div", { className: className },
|
|
24
36
|
React.createElement("form", { method: method, onSubmit: onSubmit },
|
|
25
37
|
React.createElement("div", { className: sizeClassName },
|
|
26
|
-
headerAction && (React.createElement("div", { className: 'mb-4
|
|
27
|
-
React.createElement("
|
|
28
|
-
React.createElement(
|
|
29
|
-
|
|
30
|
-
React.createElement("
|
|
31
|
-
|
|
32
|
-
React.createElement(
|
|
38
|
+
headerAction && (React.createElement("div", { className: 'flex mb-4 justify-between items-center' },
|
|
39
|
+
React.createElement("div", { className: 'flex items-center' },
|
|
40
|
+
React.createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 bg-transparent px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200 active:bg-gray-300 active:pt-[0.3rem] active:pb-[0.2rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', type: 'button', onClick: onCancel },
|
|
41
|
+
React.createElement(ArrowLeftIcon, { className: 'h-5 w-5' })),
|
|
42
|
+
React.createElement("div", { className: classNames('ml-2 min-w-0', type === 'default' ? 'flex-1' : 'flex') },
|
|
43
|
+
React.createElement("h2", { className: classNames('sm:text-md truncate text-lg font-medium leading-6 text-gray-600 sm:tracking-tight', type === 'default' ? '' : 'flex-1 mr-2') }, title),
|
|
44
|
+
type === 'title-with-badge' && (React.createElement("div", { className: 'flex items-center' },
|
|
45
|
+
React.createElement(PHXBadge, { text: badge.badgeText, type: badge.badgeType }))))),
|
|
46
|
+
headerActionText && (React.createElement("div", null,
|
|
47
|
+
React.createElement(PHXButton, { primary: true, size: 'small', onClick: handleHeaderAction }, headerActionText))))),
|
|
33
48
|
children,
|
|
34
49
|
React.createElement("div", { className: footerAction
|
|
35
50
|
? classNames(deleted ? 'justify-between' : 'justify-end gap-x-3', 'pt-6 mt-6 flex items-center')
|
|
@@ -48,6 +63,7 @@ export var PHXFormWrap = function (_a) {
|
|
|
48
63
|
"?"))))))),
|
|
49
64
|
!onlyDelete && (React.createElement("div", { className: 'flex justify-end gap-x-3' },
|
|
50
65
|
React.createElement(PHXButton, { size: 'small', secondary: true, onClick: onCancel }, formType === 'custom' ? cancelText : 'Huỷ thay đổi'),
|
|
51
|
-
submit ? (React.createElement(PHXButton, { size: 'small', loading: loading, submit: true, primary: true }, formType === 'custom' ? submitText : formType === 'add' ? 'Thêm mới' : 'Cập nhật')) : (React.createElement(PHXButton, { size: 'small', loading: loading, onClick: onSubmit, primary: true }, formType === 'custom' ? submitText : formType === 'add' ? 'Thêm mới' : 'Cập nhật')))))))
|
|
66
|
+
submit ? (React.createElement(PHXButton, { size: 'small', loading: loading, submit: true, primary: true }, formType === 'custom' ? submitText : formType === 'add' ? 'Thêm mới' : 'Cập nhật')) : (React.createElement(PHXButton, { size: 'small', loading: loading, onClick: onSubmit, primary: true }, formType === 'custom' ? submitText : formType === 'add' ? 'Thêm mới' : 'Cập nhật'))))))),
|
|
67
|
+
React.createElement(ImportModal, { show: openImport, onHide: function () { return setOpenImport(false); }, handleImport: onImport, onChangeCapture: onChangeCapture })));
|
|
52
68
|
};
|
|
53
69
|
//# sourceMappingURL=FormWrap.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormWrap.js","sourceRoot":"","sources":["../../../../src/components/FormWrap/FormWrap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"FormWrap.js","sourceRoot":"","sources":["../../../../src/components/FormWrap/FormWrap.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { InformationCircleIcon, DocumentTextIcon } from '@heroicons/react/20/solid';
|
|
3
|
+
import { PHXModal } from '../Modal';
|
|
4
|
+
export default function ImportModal(_a) {
|
|
5
|
+
var handleImport = _a.handleImport, show = _a.show, onHide = _a.onHide, onChangeCapture = _a.onChangeCapture;
|
|
6
|
+
var _b = useState(''), fileName = _b[0], setFileName = _b[1];
|
|
7
|
+
var inputFileRef = React.useRef();
|
|
8
|
+
var onFileChangeCapture = function (e) {
|
|
9
|
+
var file = e.target.files ? e.target.files[0] : null;
|
|
10
|
+
if (file) {
|
|
11
|
+
var fileName_1 = file.name;
|
|
12
|
+
setFileName(fileName_1);
|
|
13
|
+
}
|
|
14
|
+
if (onChangeCapture) {
|
|
15
|
+
onChangeCapture(file);
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
var onFileChange = function () {
|
|
19
|
+
// @ts-ignore
|
|
20
|
+
inputFileRef.current.click();
|
|
21
|
+
};
|
|
22
|
+
return (React.createElement(PHXModal, { show: show, onHide: onHide, primaryActionText: 'X\u00E1c nh\u1EADn', onPrimaryClick: handleImport },
|
|
23
|
+
React.createElement("div", null,
|
|
24
|
+
React.createElement("div", { className: 'border-b border-gray-200 bg-white px-4 py-5 sm:px-6 -ml-6 -mt-6 -mr-6' },
|
|
25
|
+
React.createElement("h3", { className: 'text-lg font-medium leading-6 text-gray-900' }, "T\u1EA3i l\u00EAn d\u1EEF li\u1EC7u")),
|
|
26
|
+
React.createElement("div", { className: 'mt-2' },
|
|
27
|
+
React.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")),
|
|
28
|
+
React.createElement("div", { className: 'mt-5' },
|
|
29
|
+
React.createElement("div", { className: 'hidden' },
|
|
30
|
+
React.createElement("input", { type: 'file', ref: inputFileRef, onChangeCapture: onFileChangeCapture })),
|
|
31
|
+
fileName == '' ? (React.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' },
|
|
32
|
+
React.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' },
|
|
33
|
+
React.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' })),
|
|
34
|
+
React.createElement("span", { className: 'mt-2 block text-sm font-medium text-gray-900' }, "Ch\u1ECDn th\u01B0 m\u1EE5c"))) : (React.createElement(React.Fragment, null,
|
|
35
|
+
React.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' },
|
|
36
|
+
React.createElement("div", { className: 'flex flex-1' },
|
|
37
|
+
React.createElement(DocumentTextIcon, { className: 'mr-1 w-5 h-5 min-w-fit' }),
|
|
38
|
+
React.createElement("span", null, fileName)),
|
|
39
|
+
React.createElement("div", { className: 'text-right' },
|
|
40
|
+
React.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")))))),
|
|
41
|
+
React.createElement("div", { className: 'flex mt-5' },
|
|
42
|
+
React.createElement(InformationCircleIcon, { className: 'w-6 h-6 text-gray-400 mr-1' }),
|
|
43
|
+
React.createElement("label", { htmlFor: 'comments', className: 'text-sm text-gray-500' }, "check")))));
|
|
44
|
+
}
|
|
45
|
+
//# sourceMappingURL=ModalImport.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalImport.js","sourceRoot":"","sources":["../../../../src/components/FormWrap/ModalImport.tsx"],"names":[],"mappings":"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"}
|