phx-react 1.3.78 → 1.3.80
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/Button/Button.d.ts +2 -1
- package/dist/cjs/components/Button/Button.js +9 -4
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/Card/Card.js +1 -1
- package/dist/cjs/components/ChoiceList/ChoiceList.d.ts +2 -0
- package/dist/cjs/components/ChoiceList/ChoiceList.js +1 -1
- package/dist/cjs/components/ChoiceList/ChoiceList.js.map +1 -1
- package/dist/cjs/components/FormWrap/FormWrap.d.ts +7 -5
- package/dist/cjs/components/FormWrap/FormWrap.js +15 -5
- package/dist/cjs/components/FormWrap/FormWrap.js.map +1 -1
- package/dist/cjs/components/Input/Input.d.ts +2 -1
- package/dist/cjs/components/Input/Input.js +4 -1
- package/dist/cjs/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Button/Button.d.ts +2 -1
- package/dist/esm/components/Button/Button.js +9 -4
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Card/Card.js +1 -1
- package/dist/esm/components/ChoiceList/ChoiceList.d.ts +2 -0
- package/dist/esm/components/ChoiceList/ChoiceList.js +1 -1
- package/dist/esm/components/ChoiceList/ChoiceList.js.map +1 -1
- package/dist/esm/components/FormWrap/FormWrap.d.ts +7 -5
- package/dist/esm/components/FormWrap/FormWrap.js +15 -5
- package/dist/esm/components/FormWrap/FormWrap.js.map +1 -1
- package/dist/esm/components/Input/Input.d.ts +2 -1
- package/dist/esm/components/Input/Input.js +4 -1
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/package.json +1 -1
|
@@ -9,6 +9,7 @@ export interface ButtonProps extends BaseButton {
|
|
|
9
9
|
danger?: boolean;
|
|
10
10
|
danger2?: boolean;
|
|
11
11
|
soft?: boolean;
|
|
12
|
+
deleted?: boolean;
|
|
12
13
|
rounded?: boolean;
|
|
13
14
|
size?: 'micro' | 'small' | 'medium' | 'large' | 'extra-large';
|
|
14
15
|
children?: string | string[];
|
|
@@ -17,4 +18,4 @@ export interface ButtonProps extends BaseButton {
|
|
|
17
18
|
iconOutline?: boolean;
|
|
18
19
|
iconPosition?: 'before' | 'after';
|
|
19
20
|
}
|
|
20
|
-
export declare const PHXButton: ({ primary, secondary, danger, danger2, soft, rounded, submit, size, children, icon, iconClassName, iconOutline, iconPosition, disabled, loading, id, onClick, className, }: ButtonProps) => JSX.Element;
|
|
21
|
+
export declare const PHXButton: ({ primary, secondary, danger, danger2, soft, deleted, rounded, submit, size, children, icon, iconClassName, iconOutline, iconPosition, disabled, loading, id, onClick, className, }: ButtonProps) => JSX.Element;
|
|
@@ -9,7 +9,7 @@ var IconLoading_1 = require("../../commons/IconLoading");
|
|
|
9
9
|
var types_1 = require("../types");
|
|
10
10
|
var use_disable_interaction_1 = require("../../utils/use-disable-interaction");
|
|
11
11
|
var PHXButton = function (_a) {
|
|
12
|
-
var primary = _a.primary, secondary = _a.secondary, danger = _a.danger, danger2 = _a.danger2, soft = _a.soft, rounded = _a.rounded, submit = _a.submit, _b = _a.size, size = _b === void 0 ? 'medium' : _b, children = _a.children, icon = _a.icon, iconClassName = _a.iconClassName, _c = _a.iconOutline, iconOutline = _c === void 0 ? false : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'before' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, id = _a.id, onClick = _a.onClick, className = _a.className;
|
|
12
|
+
var primary = _a.primary, secondary = _a.secondary, danger = _a.danger, danger2 = _a.danger2, soft = _a.soft, deleted = _a.deleted, rounded = _a.rounded, submit = _a.submit, _b = _a.size, size = _b === void 0 ? 'medium' : _b, children = _a.children, icon = _a.icon, iconClassName = _a.iconClassName, _c = _a.iconOutline, iconOutline = _c === void 0 ? false : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'before' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, id = _a.id, onClick = _a.onClick, className = _a.className;
|
|
13
13
|
var Icon;
|
|
14
14
|
if (icon) {
|
|
15
15
|
Icon = iconOutline ? OutlineIcons[icon] : SolidIcons[icon];
|
|
@@ -22,9 +22,11 @@ var PHXButton = function (_a) {
|
|
|
22
22
|
var handleClick = (0, use_disable_interaction_1.useDisableClick)(disabled, onClick);
|
|
23
23
|
var binClassNames = (0, types_1.classNames)(primary &&
|
|
24
24
|
'bg-indigo-800 font-normal text-white shadow-sm hover:bg-indigo-900 hover:text-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 active:text-gray-400 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] active:bg-indigo-900', secondary &&
|
|
25
|
-
'bg-white font-normal text-gray-900 shadow-sm
|
|
25
|
+
'bg-white font-normal text-gray-900 shadow-sm border border-gray-300 border-b-gray-400 hover:border-b-gray-300 hover:bg-gray-50 active:bg-gray-200 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', danger &&
|
|
26
26
|
'bg-red-600 font-normal text-white shadow-sm hover:bg-red-700 active:shadow-[0rem_0.125rem_0rem_0rem_#e73737_inset]', danger2 &&
|
|
27
|
-
'font-normal text-red-600 shadow-sm ring-1 ring-inset ring-red-600 hover:bg-red-100 active:bg-red-200 active:shadow-[0rem_0.125rem_0rem_0rem_#e73737_inset]',
|
|
27
|
+
'font-normal text-red-600 shadow-sm ring-1 ring-inset ring-red-600 hover:bg-red-100 active:bg-red-200 active:shadow-[0rem_0.125rem_0rem_0rem_#e73737_inset]', deleted &&
|
|
28
|
+
'bg-indigo-50 font-normal text-red-800 shadow-sm hover:bg-indigo-100 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', rounded && 'rounded-full', soft &&
|
|
29
|
+
'bg-indigo-50 font-normal text-indigo-600 shadow-sm hover:bg-indigo-100 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', size === 'micro' && "px-2 py-1 text-xs rounded-lg active:pt-[0.3rem] active:pb-[0.2rem]", size === 'small' && "px-2.5 py-1.5 text-xs rounded-lg active:pt-[0.45rem] active:pb-[0.3rem]", size === 'medium' && "px-2.5 py-1.5 text-sm rounded-lg active:pt-[0.45rem] active:pb-[0.3rem]", size === 'large' && "px-3 py-2 text-sm rounded-lg active:pt-[0.55rem] active:pb-[0.45rem]", size === 'extra-large' && "px-3.5 py-2.5 text-sm rounded-lg active:pt-[0.7rem] active:pb-[0.55rem]", icon && (size === 'medium' || size === 'large') && 'inline-flex items-center gap-x-1.5', icon && size === 'extra-large' && 'inline-flex items-center gap-x-2', loading && 'opacity-30', 'relative', className);
|
|
28
30
|
var iconClass = (0, types_1.classNames)(icon && iconPosition === 'before' && '-ml-0.5 h-5 w-5', icon && iconPosition === 'after' && '-mr-0.5 h-5 w-5', iconClassName);
|
|
29
31
|
// Icon markup
|
|
30
32
|
var iconMarkup = Icon && react_1["default"].createElement(Icon, { className: iconClass });
|
|
@@ -35,7 +37,10 @@ var PHXButton = function (_a) {
|
|
|
35
37
|
react_1["default"].createElement(react_1["default"].Fragment, null,
|
|
36
38
|
loadingMarkup,
|
|
37
39
|
iconPosition === 'before' ? iconMarkup : react_1["default"].createElement(react_1["default"].Fragment, null),
|
|
38
|
-
react_1["default"].createElement("span", { className: loading ? 'invisible' : ''
|
|
40
|
+
react_1["default"].createElement("span", { className: (0, types_1.classNames)(loading ? 'invisible' : '', deleted ? 'flex items-center' : '') },
|
|
41
|
+
deleted && (react_1["default"].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', strokeWidth: '2.5', stroke: 'currentColor', className: 'w-3.5 h-3.5 mr-1' },
|
|
42
|
+
react_1["default"].createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0' }))),
|
|
43
|
+
children),
|
|
39
44
|
iconPosition === 'after' ? iconMarkup : react_1["default"].createElement(react_1["default"].Fragment, null))));
|
|
40
45
|
return react_1["default"].createElement(react_1["default"].Fragment, null, buttonMarkup);
|
|
41
46
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,4EAAuD;AACvD,gFAA2D;AAC3D,yDAAuD;AACvD,kCAAiD;AACjD,+EAAqE;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ var PHXCard = function Card(_a) {
|
|
|
14
14
|
var footerActionMarkup = primaryFooterAction || secondaryFooterActions || dangerFooterAction ? (react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'bg-gray-100' : '', ' px-4 py-3 sm:px-6 flex justify-end gap-x-3') },
|
|
15
15
|
secondaryFooterActions && secondaryFooterActions.length === 1 && secondaryFooterActions[0].content && (react_1["default"].createElement(Button_1.PHXButton, { secondary: true, size: 'small', onClick: secondaryFooterActions[0].onClick }, secondaryFooterActions[0].content)),
|
|
16
16
|
primaryFooterAction && primaryFooterAction.content && (react_1["default"].createElement(Button_1.PHXButton, { primary: true, submit: primaryFooterAction.submit ? true : false, size: 'small', onClick: primaryFooterAction.onClick, disabled: primaryFooterAction.disabled, loading: primaryFooterAction.loading }, primaryFooterAction.content)),
|
|
17
|
-
dangerFooterAction && dangerFooterAction.content && (react_1["default"].createElement(Button_1.PHXButton, {
|
|
17
|
+
dangerFooterAction && dangerFooterAction.content && (react_1["default"].createElement(Button_1.PHXButton, { deleted: true, submit: dangerFooterAction.submit ? true : false, size: 'small', onClick: dangerFooterAction.onClick, loading: dangerFooterAction.loading }, dangerFooterAction.content)))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
|
|
18
18
|
var headerActionMarkup = primaryHeader ? (react_1["default"].createElement("div", { className: 'flex justify-between items-center px-4 py-3 sm:px-6' },
|
|
19
19
|
react_1["default"].createElement("span", { className: 'text-sm font-medium leading-6 text-gray-900' }, title),
|
|
20
20
|
headerAction && (react_1["default"].createElement("button", { type: 'button', className: 'rounded-md p-0.5 bg-white text-gray-400 hover:bg-gray-100', onClick: headerAction.onClick },
|
|
@@ -8,7 +8,7 @@ function PHXChoiceList(_a) {
|
|
|
8
8
|
var label = _a.label, list = _a.list;
|
|
9
9
|
return (react_1["default"].createElement(react_1["default"].Fragment, null,
|
|
10
10
|
label && react_1["default"].createElement("label", { className: 'block pb-1 text-xs font-medium leading-5 text-gray-700' }, label),
|
|
11
|
-
list.map(function (item) { return (react_1["default"].createElement(Checkbox_1.PHXCheckbox, { key: item.title, expanded: item.expanded, helpText: item.helpText, register: item.register, title: item.title }, item.component)); })));
|
|
11
|
+
list.map(function (item) { return (react_1["default"].createElement(Checkbox_1.PHXCheckbox, { key: item.title, expanded: item.expanded, helpText: item.helpText, register: item.register, title: item.title, defaultValue: item.defaultValue, defaultChecked: item.defaultChecked }, item.component)); })));
|
|
12
12
|
}
|
|
13
13
|
exports.PHXChoiceList = PHXChoiceList;
|
|
14
14
|
//# sourceMappingURL=ChoiceList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChoiceList.js","sourceRoot":"","sources":["../../../../src/components/ChoiceList/ChoiceList.tsx"],"names":[],"mappings":";;;;AACA,wCAAyC;AACzC,wDAAyB;
|
|
1
|
+
{"version":3,"file":"ChoiceList.js","sourceRoot":"","sources":["../../../../src/components/ChoiceList/ChoiceList.tsx"],"names":[],"mappings":";;;;AACA,wCAAyC;AACzC,wDAAyB;AAiBzB,SAAgB,aAAa,CAAC,EAA2B;QAAzB,KAAK,WAAA,EAAE,IAAI,UAAA;IACzC,OAAO,CACL;QACG,KAAK,IAAI,4CAAO,SAAS,EAAC,wDAAwD,IAAE,KAAK,CAAS;QAClG,IAAI,CAAC,GAAG,CAAC,UAAC,IAAS,IAAK,OAAA,CACvB,iCAAC,sBAAW,IACV,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,cAAc,EAAE,IAAI,CAAC,cAAc,IAElC,IAAI,CAAC,SAAS,CACH,CACf,EAZwB,CAYxB,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAnBD,sCAmBC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export interface FooterBarProps {
|
|
3
3
|
title?: string;
|
|
4
|
+
nameOfModal?: string;
|
|
4
5
|
method?: string;
|
|
5
6
|
headerAction?: boolean;
|
|
6
7
|
footerAction?: boolean;
|
|
@@ -10,17 +11,18 @@ export interface FooterBarProps {
|
|
|
10
11
|
onlyDelete?: boolean;
|
|
11
12
|
deleted?: boolean;
|
|
12
13
|
submit?: boolean;
|
|
13
|
-
deleteText?: string;
|
|
14
14
|
cancelText?: string;
|
|
15
15
|
submitText?: string;
|
|
16
|
+
deletedLoading?: boolean;
|
|
17
|
+
formType?: 'add' | 'edit' | 'custom';
|
|
16
18
|
badge?: {
|
|
17
19
|
badgeText?: string;
|
|
18
20
|
badgeType?: string;
|
|
19
21
|
} | any;
|
|
20
22
|
size?: 'small' | 'medium' | 'large';
|
|
21
23
|
type?: 'default' | 'title-with-badge';
|
|
22
|
-
onDelete
|
|
23
|
-
onCancel
|
|
24
|
-
onSubmit
|
|
24
|
+
onDelete?(): void;
|
|
25
|
+
onCancel?(): void;
|
|
26
|
+
onSubmit?(): void;
|
|
25
27
|
}
|
|
26
|
-
export declare const PHXFormWrap: ({
|
|
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) => JSX.Element;
|
|
@@ -2,14 +2,22 @@
|
|
|
2
2
|
exports.__esModule = true;
|
|
3
3
|
exports.PHXFormWrap = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
|
-
var react_1 = tslib_1.
|
|
5
|
+
var react_1 = tslib_1.__importStar(require("react"));
|
|
6
6
|
var Button_1 = require("../Button");
|
|
7
7
|
var types_1 = require("../types");
|
|
8
8
|
var solid_1 = require("@heroicons/react/20/solid");
|
|
9
9
|
var Badge_1 = require("../Badge");
|
|
10
|
+
var Modal_1 = require("../Modal");
|
|
10
11
|
var PHXFormWrap = function (_a) {
|
|
11
|
-
var
|
|
12
|
+
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, _d = _a.size, size = _d === void 0 ? 'large' : _d, formType = _a.formType, submit = _a.submit, submitText = _a.submitText, title = _a.title, _e = _a.type, type = _e === void 0 ? 'default' : _e;
|
|
12
13
|
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');
|
|
14
|
+
var _f = (0, react_1.useState)(false), isModalOpen = _f[0], setIsModalOpen = _f[1];
|
|
15
|
+
var handleOpenModalConfirm = function () {
|
|
16
|
+
setIsModalOpen(true);
|
|
17
|
+
};
|
|
18
|
+
var handleCancelModalConfirm = function () {
|
|
19
|
+
setIsModalOpen(false);
|
|
20
|
+
};
|
|
13
21
|
return (react_1["default"].createElement("div", { className: className },
|
|
14
22
|
react_1["default"].createElement("form", { method: method, onSubmit: onSubmit },
|
|
15
23
|
react_1["default"].createElement("div", { className: sizeClassName },
|
|
@@ -24,10 +32,12 @@ var PHXFormWrap = function (_a) {
|
|
|
24
32
|
react_1["default"].createElement("div", { className: footerAction
|
|
25
33
|
? (0, types_1.classNames)(deleted ? 'justify-between' : 'justify-end gap-x-3', 'pt-6 border-t border-gray-900/10 mt-6 flex items-center')
|
|
26
34
|
: 'hidden' },
|
|
27
|
-
deleted && (react_1["default"].createElement(
|
|
35
|
+
deleted && (react_1["default"].createElement(react_1["default"].Fragment, null,
|
|
36
|
+
react_1["default"].createElement(Button_1.PHXButton, { deleted: true, size: 'small', onClick: handleOpenModalConfirm }, "X\u00F3a b\u1EA3n ghi"),
|
|
37
|
+
react_1["default"].createElement(Modal_1.PHXModal, { dangerActionText: 'Xo\u00E1 b\u1EA3n ghi', dangerLoading: deletedLoading, onDangerClick: onDelete, onHide: handleCancelModalConfirm, primaryActionText: '', show: isModalOpen, title: "B\u1EA1n mu\u1ED1n xo\u00E1 b\u1EA3n ghi ".concat(nameOfModal, "?") }))),
|
|
28
38
|
!onlyDelete && (react_1["default"].createElement("div", { className: 'flex justify-end gap-x-3' },
|
|
29
|
-
react_1["default"].createElement(Button_1.PHXButton, { size: 'small', secondary: true, onClick: onCancel }, cancelText),
|
|
30
|
-
submit ? (react_1["default"].createElement(Button_1.PHXButton, { size: 'small', loading: loading, submit: true, primary: true }, submitText)) : (react_1["default"].createElement(Button_1.PHXButton, { size: 'small', loading: loading, onClick: onSubmit, primary: true }, submitText)))))))));
|
|
39
|
+
react_1["default"].createElement(Button_1.PHXButton, { size: 'small', secondary: true, onClick: onCancel }, formType === 'custom' ? cancelText : 'Huỷ thay đổi'),
|
|
40
|
+
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')))))))));
|
|
31
41
|
};
|
|
32
42
|
exports.PHXFormWrap = PHXFormWrap;
|
|
33
43
|
//# sourceMappingURL=FormWrap.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormWrap.js","sourceRoot":"","sources":["../../../../src/components/FormWrap/FormWrap.tsx"],"names":[],"mappings":";;;;AAAA,
|
|
1
|
+
{"version":3,"file":"FormWrap.js","sourceRoot":"","sources":["../../../../src/components/FormWrap/FormWrap.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
6
6
|
helpText?: string;
|
|
7
7
|
register?: UseFormRegisterReturn;
|
|
8
8
|
error?: boolean;
|
|
9
|
-
|
|
9
|
+
errorMessageCustom?: string;
|
|
10
|
+
errorType?: 'required-field' | 'validate-input-field' | 'duplicate-field' | 'validate-phone-number' | 'validate-input-email' | 'custom-message';
|
|
10
11
|
}
|
|
11
12
|
export declare const PHXInput: React.FC<InputProps>;
|
|
@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
|
|
|
5
5
|
var react_1 = tslib_1.__importDefault(require("react"));
|
|
6
6
|
var types_1 = require("../types");
|
|
7
7
|
var PHXInput = function (_a) {
|
|
8
|
-
var className = _a.className, error = _a.error, errorType = _a.errorType, helpText = _a.helpText, label = _a.label, register = _a.register, rest = tslib_1.__rest(_a, ["className", "error", "errorType", "helpText", "label", "register"]);
|
|
8
|
+
var className = _a.className, error = _a.error, errorType = _a.errorType, errorMessageCustom = _a.errorMessageCustom, helpText = _a.helpText, label = _a.label, register = _a.register, rest = tslib_1.__rest(_a, ["className", "error", "errorType", "errorMessageCustom", "helpText", "label", "register"]);
|
|
9
9
|
var message = function (type) {
|
|
10
10
|
var errorMessage = '';
|
|
11
11
|
switch (type) {
|
|
@@ -24,6 +24,9 @@ var PHXInput = function (_a) {
|
|
|
24
24
|
case 'validate-input-email':
|
|
25
25
|
errorMessage = 'Định dạng email chưa đúng, vui lòng nhập lại';
|
|
26
26
|
break;
|
|
27
|
+
case 'custom-message':
|
|
28
|
+
errorMessage = errorMessageCustom;
|
|
29
|
+
break;
|
|
27
30
|
default:
|
|
28
31
|
break;
|
|
29
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":";;;;AAAA,wDAAkD;AAElD,kCAAqC;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":";;;;AAAA,wDAAkD;AAElD,kCAAqC;AAkB9B,IAAM,QAAQ,GAAyB,UAAC,EASlC;IARX,IAAA,SAAS,eAAA,EACT,KAAK,WAAA,EACL,SAAS,eAAA,EACT,kBAAkB,wBAAA,EAClB,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,QAAQ,cAAA,EACL,IAAI,sBARsC,0FAS9C,CADQ;IAEP,IAAM,OAAO,GAAG,UAAC,IAAS;QACxB,IAAI,YAAY,GAAG,EAAE,CAAA;QACrB,QAAQ,IAAI,EAAE;YACZ,KAAK,gBAAgB;gBACnB,YAAY,GAAG,yBAAyB,CAAA;gBACxC,MAAK;YACP,KAAK,sBAAsB;gBACzB,YAAY,GAAG,sDAAsD,CAAA;gBACrE,MAAK;YACP,KAAK,iBAAiB;gBACpB,YAAY,GAAG,sBAAsB,CAAA;gBACrC,MAAK;YACP,KAAK,uBAAuB;gBAC1B,YAAY,GAAG,2BAA2B,CAAA;gBAC1C,MAAK;YACP,KAAK,sBAAsB;gBACzB,YAAY,GAAG,8CAA8C,CAAA;gBAC7D,MAAK;YACP,KAAK,gBAAgB;gBACnB,YAAY,GAAG,kBAA4B,CAAA;gBAC3C,MAAK;YACP;gBACE,MAAK;SACR;QACD,OAAO,YAAY,CAAA;IACrB,CAAC,CAAA;IACD,OAAO,CACL,0CAAK,SAAS,EAAE,SAAS;QACtB,KAAK,IAAI,4CAAO,SAAS,EAAC,8CAA8C,IAAE,KAAK,CAAS;QACzF,+DACM,IAAI,EACJ,QAAQ,IACZ,SAAS,EAAE,IAAA,kBAAU,EACnB,2OAA2O,EAC3O,KAAK,CAAC,CAAC,CAAC,+EAA+E,CAAC,CAAC,CAAC,EAAE,CAC7F,IACD;QACD,QAAQ,CAAC,CAAC,CAAC,0CAAK,SAAS,EAAC,4CAA4C,IAAE,QAAQ,CAAO,CAAC,CAAC,CAAC,IAAI;QAC9F,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,CACpB,0CAAK,SAAS,EAAC,6BAA6B;YAC1C,0CACE,SAAS,EAAC,2BAA2B,EACrC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;gBAElC,2CACE,CAAC,EAAC,0EAA0E,EAC5E,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,CACE;YAEN,wCAAG,SAAS,EAAC,sBAAsB,IAAE,OAAO,CAAC,SAAS,CAAC,CAAK,CACxD,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC,CAAA;AAtEY,QAAA,QAAQ,YAsEpB"}
|
|
@@ -9,6 +9,7 @@ export interface ButtonProps extends BaseButton {
|
|
|
9
9
|
danger?: boolean;
|
|
10
10
|
danger2?: boolean;
|
|
11
11
|
soft?: boolean;
|
|
12
|
+
deleted?: boolean;
|
|
12
13
|
rounded?: boolean;
|
|
13
14
|
size?: 'micro' | 'small' | 'medium' | 'large' | 'extra-large';
|
|
14
15
|
children?: string | string[];
|
|
@@ -17,4 +18,4 @@ export interface ButtonProps extends BaseButton {
|
|
|
17
18
|
iconOutline?: boolean;
|
|
18
19
|
iconPosition?: 'before' | 'after';
|
|
19
20
|
}
|
|
20
|
-
export declare const PHXButton: ({ primary, secondary, danger, danger2, soft, rounded, submit, size, children, icon, iconClassName, iconOutline, iconPosition, disabled, loading, id, onClick, className, }: ButtonProps) => JSX.Element;
|
|
21
|
+
export declare const PHXButton: ({ primary, secondary, danger, danger2, soft, deleted, rounded, submit, size, children, icon, iconClassName, iconOutline, iconPosition, disabled, loading, id, onClick, className, }: ButtonProps) => JSX.Element;
|
|
@@ -6,7 +6,7 @@ import { IconLoading } from '../../commons/IconLoading';
|
|
|
6
6
|
import { classNames } from '../types';
|
|
7
7
|
import { useDisableClick } from '../../utils/use-disable-interaction';
|
|
8
8
|
export var PHXButton = function (_a) {
|
|
9
|
-
var primary = _a.primary, secondary = _a.secondary, danger = _a.danger, danger2 = _a.danger2, soft = _a.soft, rounded = _a.rounded, submit = _a.submit, _b = _a.size, size = _b === void 0 ? 'medium' : _b, children = _a.children, icon = _a.icon, iconClassName = _a.iconClassName, _c = _a.iconOutline, iconOutline = _c === void 0 ? false : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'before' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, id = _a.id, onClick = _a.onClick, className = _a.className;
|
|
9
|
+
var primary = _a.primary, secondary = _a.secondary, danger = _a.danger, danger2 = _a.danger2, soft = _a.soft, deleted = _a.deleted, rounded = _a.rounded, submit = _a.submit, _b = _a.size, size = _b === void 0 ? 'medium' : _b, children = _a.children, icon = _a.icon, iconClassName = _a.iconClassName, _c = _a.iconOutline, iconOutline = _c === void 0 ? false : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'before' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, id = _a.id, onClick = _a.onClick, className = _a.className;
|
|
10
10
|
var Icon;
|
|
11
11
|
if (icon) {
|
|
12
12
|
Icon = iconOutline ? OutlineIcons[icon] : SolidIcons[icon];
|
|
@@ -19,9 +19,11 @@ export var PHXButton = function (_a) {
|
|
|
19
19
|
var handleClick = useDisableClick(disabled, onClick);
|
|
20
20
|
var binClassNames = classNames(primary &&
|
|
21
21
|
'bg-indigo-800 font-normal text-white shadow-sm hover:bg-indigo-900 hover:text-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 active:text-gray-400 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] active:bg-indigo-900', secondary &&
|
|
22
|
-
'bg-white font-normal text-gray-900 shadow-sm
|
|
22
|
+
'bg-white font-normal text-gray-900 shadow-sm border border-gray-300 border-b-gray-400 hover:border-b-gray-300 hover:bg-gray-50 active:bg-gray-200 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', danger &&
|
|
23
23
|
'bg-red-600 font-normal text-white shadow-sm hover:bg-red-700 active:shadow-[0rem_0.125rem_0rem_0rem_#e73737_inset]', danger2 &&
|
|
24
|
-
'font-normal text-red-600 shadow-sm ring-1 ring-inset ring-red-600 hover:bg-red-100 active:bg-red-200 active:shadow-[0rem_0.125rem_0rem_0rem_#e73737_inset]',
|
|
24
|
+
'font-normal text-red-600 shadow-sm ring-1 ring-inset ring-red-600 hover:bg-red-100 active:bg-red-200 active:shadow-[0rem_0.125rem_0rem_0rem_#e73737_inset]', deleted &&
|
|
25
|
+
'bg-indigo-50 font-normal text-red-800 shadow-sm hover:bg-indigo-100 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', rounded && 'rounded-full', soft &&
|
|
26
|
+
'bg-indigo-50 font-normal text-indigo-600 shadow-sm hover:bg-indigo-100 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', size === 'micro' && "px-2 py-1 text-xs rounded-lg active:pt-[0.3rem] active:pb-[0.2rem]", size === 'small' && "px-2.5 py-1.5 text-xs rounded-lg active:pt-[0.45rem] active:pb-[0.3rem]", size === 'medium' && "px-2.5 py-1.5 text-sm rounded-lg active:pt-[0.45rem] active:pb-[0.3rem]", size === 'large' && "px-3 py-2 text-sm rounded-lg active:pt-[0.55rem] active:pb-[0.45rem]", size === 'extra-large' && "px-3.5 py-2.5 text-sm rounded-lg active:pt-[0.7rem] active:pb-[0.55rem]", icon && (size === 'medium' || size === 'large') && 'inline-flex items-center gap-x-1.5', icon && size === 'extra-large' && 'inline-flex items-center gap-x-2', loading && 'opacity-30', 'relative', className);
|
|
25
27
|
var iconClass = classNames(icon && iconPosition === 'before' && '-ml-0.5 h-5 w-5', icon && iconPosition === 'after' && '-mr-0.5 h-5 w-5', iconClassName);
|
|
26
28
|
// Icon markup
|
|
27
29
|
var iconMarkup = Icon && React.createElement(Icon, { className: iconClass });
|
|
@@ -32,7 +34,10 @@ export var PHXButton = function (_a) {
|
|
|
32
34
|
React.createElement(React.Fragment, null,
|
|
33
35
|
loadingMarkup,
|
|
34
36
|
iconPosition === 'before' ? iconMarkup : React.createElement(React.Fragment, null),
|
|
35
|
-
React.createElement("span", { className: loading ? 'invisible' : ''
|
|
37
|
+
React.createElement("span", { className: classNames(loading ? 'invisible' : '', deleted ? 'flex items-center' : '') },
|
|
38
|
+
deleted && (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', strokeWidth: '2.5', stroke: 'currentColor', className: 'w-3.5 h-3.5 mr-1' },
|
|
39
|
+
React.createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0' }))),
|
|
40
|
+
children),
|
|
36
41
|
iconPosition === 'after' ? iconMarkup : React.createElement(React.Fragment, null))));
|
|
37
42
|
return React.createElement(React.Fragment, null, buttonMarkup);
|
|
38
43
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAA;AACvD,OAAO,KAAK,YAAY,MAAM,6BAA6B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ export var PHXCard = function Card(_a) {
|
|
|
10
10
|
var footerActionMarkup = primaryFooterAction || secondaryFooterActions || dangerFooterAction ? (React.createElement("div", { className: classNames(type === 'modal' ? 'bg-gray-100' : '', ' px-4 py-3 sm:px-6 flex justify-end gap-x-3') },
|
|
11
11
|
secondaryFooterActions && secondaryFooterActions.length === 1 && secondaryFooterActions[0].content && (React.createElement(PHXButton, { secondary: true, size: 'small', onClick: secondaryFooterActions[0].onClick }, secondaryFooterActions[0].content)),
|
|
12
12
|
primaryFooterAction && primaryFooterAction.content && (React.createElement(PHXButton, { primary: true, submit: primaryFooterAction.submit ? true : false, size: 'small', onClick: primaryFooterAction.onClick, disabled: primaryFooterAction.disabled, loading: primaryFooterAction.loading }, primaryFooterAction.content)),
|
|
13
|
-
dangerFooterAction && dangerFooterAction.content && (React.createElement(PHXButton, {
|
|
13
|
+
dangerFooterAction && dangerFooterAction.content && (React.createElement(PHXButton, { deleted: true, submit: dangerFooterAction.submit ? true : false, size: 'small', onClick: dangerFooterAction.onClick, loading: dangerFooterAction.loading }, dangerFooterAction.content)))) : (React.createElement(React.Fragment, null));
|
|
14
14
|
var headerActionMarkup = primaryHeader ? (React.createElement("div", { className: 'flex justify-between items-center px-4 py-3 sm:px-6' },
|
|
15
15
|
React.createElement("span", { className: 'text-sm font-medium leading-6 text-gray-900' }, title),
|
|
16
16
|
headerAction && (React.createElement("button", { type: 'button', className: 'rounded-md p-0.5 bg-white text-gray-400 hover:bg-gray-100', onClick: headerAction.onClick },
|
|
@@ -4,6 +4,6 @@ export function PHXChoiceList(_a) {
|
|
|
4
4
|
var label = _a.label, list = _a.list;
|
|
5
5
|
return (React.createElement(React.Fragment, null,
|
|
6
6
|
label && React.createElement("label", { className: 'block pb-1 text-xs font-medium leading-5 text-gray-700' }, label),
|
|
7
|
-
list.map(function (item) { return (React.createElement(PHXCheckbox, { key: item.title, expanded: item.expanded, helpText: item.helpText, register: item.register, title: item.title }, item.component)); })));
|
|
7
|
+
list.map(function (item) { return (React.createElement(PHXCheckbox, { key: item.title, expanded: item.expanded, helpText: item.helpText, register: item.register, title: item.title, defaultValue: item.defaultValue, defaultChecked: item.defaultChecked }, item.component)); })));
|
|
8
8
|
}
|
|
9
9
|
//# sourceMappingURL=ChoiceList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChoiceList.js","sourceRoot":"","sources":["../../../../src/components/ChoiceList/ChoiceList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"ChoiceList.js","sourceRoot":"","sources":["../../../../src/components/ChoiceList/ChoiceList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAiBzB,MAAM,UAAU,aAAa,CAAC,EAA2B;QAAzB,KAAK,WAAA,EAAE,IAAI,UAAA;IACzC,OAAO,CACL;QACG,KAAK,IAAI,+BAAO,SAAS,EAAC,wDAAwD,IAAE,KAAK,CAAS;QAClG,IAAI,CAAC,GAAG,CAAC,UAAC,IAAS,IAAK,OAAA,CACvB,oBAAC,WAAW,IACV,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,cAAc,EAAE,IAAI,CAAC,cAAc,IAElC,IAAI,CAAC,SAAS,CACH,CACf,EAZwB,CAYxB,CAAC,CACD,CACJ,CAAA;AACH,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export interface FooterBarProps {
|
|
3
3
|
title?: string;
|
|
4
|
+
nameOfModal?: string;
|
|
4
5
|
method?: string;
|
|
5
6
|
headerAction?: boolean;
|
|
6
7
|
footerAction?: boolean;
|
|
@@ -10,17 +11,18 @@ export interface FooterBarProps {
|
|
|
10
11
|
onlyDelete?: boolean;
|
|
11
12
|
deleted?: boolean;
|
|
12
13
|
submit?: boolean;
|
|
13
|
-
deleteText?: string;
|
|
14
14
|
cancelText?: string;
|
|
15
15
|
submitText?: string;
|
|
16
|
+
deletedLoading?: boolean;
|
|
17
|
+
formType?: 'add' | 'edit' | 'custom';
|
|
16
18
|
badge?: {
|
|
17
19
|
badgeText?: string;
|
|
18
20
|
badgeType?: string;
|
|
19
21
|
} | any;
|
|
20
22
|
size?: 'small' | 'medium' | 'large';
|
|
21
23
|
type?: 'default' | 'title-with-badge';
|
|
22
|
-
onDelete
|
|
23
|
-
onCancel
|
|
24
|
-
onSubmit
|
|
24
|
+
onDelete?(): void;
|
|
25
|
+
onCancel?(): void;
|
|
26
|
+
onSubmit?(): void;
|
|
25
27
|
}
|
|
26
|
-
export declare const PHXFormWrap: ({
|
|
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) => JSX.Element;
|
|
@@ -1,11 +1,19 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import { PHXButton } from '../Button';
|
|
3
3
|
import { classNames } from '../types';
|
|
4
4
|
import { ArrowLeftIcon } from '@heroicons/react/20/solid';
|
|
5
5
|
import { PHXBadge } from '../Badge';
|
|
6
|
+
import { PHXModal } from '../Modal';
|
|
6
7
|
export var PHXFormWrap = function (_a) {
|
|
7
|
-
var
|
|
8
|
+
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, _d = _a.size, size = _d === void 0 ? 'large' : _d, formType = _a.formType, submit = _a.submit, submitText = _a.submitText, title = _a.title, _e = _a.type, type = _e === void 0 ? 'default' : _e;
|
|
8
9
|
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');
|
|
10
|
+
var _f = useState(false), isModalOpen = _f[0], setIsModalOpen = _f[1];
|
|
11
|
+
var handleOpenModalConfirm = function () {
|
|
12
|
+
setIsModalOpen(true);
|
|
13
|
+
};
|
|
14
|
+
var handleCancelModalConfirm = function () {
|
|
15
|
+
setIsModalOpen(false);
|
|
16
|
+
};
|
|
9
17
|
return (React.createElement("div", { className: className },
|
|
10
18
|
React.createElement("form", { method: method, onSubmit: onSubmit },
|
|
11
19
|
React.createElement("div", { className: sizeClassName },
|
|
@@ -20,9 +28,11 @@ export var PHXFormWrap = function (_a) {
|
|
|
20
28
|
React.createElement("div", { className: footerAction
|
|
21
29
|
? classNames(deleted ? 'justify-between' : 'justify-end gap-x-3', 'pt-6 border-t border-gray-900/10 mt-6 flex items-center')
|
|
22
30
|
: 'hidden' },
|
|
23
|
-
deleted && (React.createElement(
|
|
31
|
+
deleted && (React.createElement(React.Fragment, null,
|
|
32
|
+
React.createElement(PHXButton, { deleted: true, size: 'small', onClick: handleOpenModalConfirm }, "X\u00F3a b\u1EA3n ghi"),
|
|
33
|
+
React.createElement(PHXModal, { dangerActionText: 'Xo\u00E1 b\u1EA3n ghi', dangerLoading: deletedLoading, onDangerClick: onDelete, onHide: handleCancelModalConfirm, primaryActionText: '', show: isModalOpen, title: "B\u1EA1n mu\u1ED1n xo\u00E1 b\u1EA3n ghi ".concat(nameOfModal, "?") }))),
|
|
24
34
|
!onlyDelete && (React.createElement("div", { className: 'flex justify-end gap-x-3' },
|
|
25
|
-
React.createElement(PHXButton, { size: 'small', secondary: true, onClick: onCancel }, cancelText),
|
|
26
|
-
submit ? (React.createElement(PHXButton, { size: 'small', loading: loading, submit: true, primary: true }, submitText)) : (React.createElement(PHXButton, { size: 'small', loading: loading, onClick: onSubmit, primary: true }, submitText)))))))));
|
|
35
|
+
React.createElement(PHXButton, { size: 'small', secondary: true, onClick: onCancel }, formType === 'custom' ? cancelText : 'Huỷ thay đổi'),
|
|
36
|
+
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')))))))));
|
|
27
37
|
};
|
|
28
38
|
//# sourceMappingURL=FormWrap.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormWrap.js","sourceRoot":"","sources":["../../../../src/components/FormWrap/FormWrap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"FormWrap.js","sourceRoot":"","sources":["../../../../src/components/FormWrap/FormWrap.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
6
6
|
helpText?: string;
|
|
7
7
|
register?: UseFormRegisterReturn;
|
|
8
8
|
error?: boolean;
|
|
9
|
-
|
|
9
|
+
errorMessageCustom?: string;
|
|
10
|
+
errorType?: 'required-field' | 'validate-input-field' | 'duplicate-field' | 'validate-phone-number' | 'validate-input-email' | 'custom-message';
|
|
10
11
|
}
|
|
11
12
|
export declare const PHXInput: React.FC<InputProps>;
|
|
@@ -2,7 +2,7 @@ import { __assign, __rest } from "tslib";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { classNames } from '../types';
|
|
4
4
|
export var PHXInput = function (_a) {
|
|
5
|
-
var className = _a.className, error = _a.error, errorType = _a.errorType, helpText = _a.helpText, label = _a.label, register = _a.register, rest = __rest(_a, ["className", "error", "errorType", "helpText", "label", "register"]);
|
|
5
|
+
var className = _a.className, error = _a.error, errorType = _a.errorType, errorMessageCustom = _a.errorMessageCustom, helpText = _a.helpText, label = _a.label, register = _a.register, rest = __rest(_a, ["className", "error", "errorType", "errorMessageCustom", "helpText", "label", "register"]);
|
|
6
6
|
var message = function (type) {
|
|
7
7
|
var errorMessage = '';
|
|
8
8
|
switch (type) {
|
|
@@ -21,6 +21,9 @@ export var PHXInput = function (_a) {
|
|
|
21
21
|
case 'validate-input-email':
|
|
22
22
|
errorMessage = 'Định dạng email chưa đúng, vui lòng nhập lại';
|
|
23
23
|
break;
|
|
24
|
+
case 'custom-message':
|
|
25
|
+
errorMessage = errorMessageCustom;
|
|
26
|
+
break;
|
|
24
27
|
default:
|
|
25
28
|
break;
|
|
26
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAkBrC,MAAM,CAAC,IAAM,QAAQ,GAAyB,UAAC,EASlC;IARX,IAAA,SAAS,eAAA,EACT,KAAK,WAAA,EACL,SAAS,eAAA,EACT,kBAAkB,wBAAA,EAClB,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,QAAQ,cAAA,EACL,IAAI,cARsC,0FAS9C,CADQ;IAEP,IAAM,OAAO,GAAG,UAAC,IAAS;QACxB,IAAI,YAAY,GAAG,EAAE,CAAA;QACrB,QAAQ,IAAI,EAAE;YACZ,KAAK,gBAAgB;gBACnB,YAAY,GAAG,yBAAyB,CAAA;gBACxC,MAAK;YACP,KAAK,sBAAsB;gBACzB,YAAY,GAAG,sDAAsD,CAAA;gBACrE,MAAK;YACP,KAAK,iBAAiB;gBACpB,YAAY,GAAG,sBAAsB,CAAA;gBACrC,MAAK;YACP,KAAK,uBAAuB;gBAC1B,YAAY,GAAG,2BAA2B,CAAA;gBAC1C,MAAK;YACP,KAAK,sBAAsB;gBACzB,YAAY,GAAG,8CAA8C,CAAA;gBAC7D,MAAK;YACP,KAAK,gBAAgB;gBACnB,YAAY,GAAG,kBAA4B,CAAA;gBAC3C,MAAK;YACP;gBACE,MAAK;SACR;QACD,OAAO,YAAY,CAAA;IACrB,CAAC,CAAA;IACD,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QACtB,KAAK,IAAI,+BAAO,SAAS,EAAC,8CAA8C,IAAE,KAAK,CAAS;QACzF,0CACM,IAAI,EACJ,QAAQ,IACZ,SAAS,EAAE,UAAU,CACnB,2OAA2O,EAC3O,KAAK,CAAC,CAAC,CAAC,+EAA+E,CAAC,CAAC,CAAC,EAAE,CAC7F,IACD;QACD,QAAQ,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,4CAA4C,IAAE,QAAQ,CAAO,CAAC,CAAC,CAAC,IAAI;QAC9F,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,CACpB,6BAAK,SAAS,EAAC,6BAA6B;YAC1C,6BACE,SAAS,EAAC,2BAA2B,EACrC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;gBAElC,8BACE,CAAC,EAAC,0EAA0E,EAC5E,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,CACE;YAEN,2BAAG,SAAS,EAAC,sBAAsB,IAAE,OAAO,CAAC,SAAS,CAAC,CAAK,CACxD,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC,CAAA"}
|