phx-react 1.3.77 → 1.3.79
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/ButtonGroup/ButtonGroup.d.ts +11 -0
- package/dist/cjs/components/ButtonGroup/ButtonGroup.js +35 -0
- package/dist/cjs/components/ButtonGroup/ButtonGroup.js.map +1 -0
- package/dist/cjs/components/ButtonGroup/index.d.ts +1 -0
- package/dist/cjs/components/ButtonGroup/index.js +5 -0
- package/dist/cjs/components/ButtonGroup/index.js.map +1 -0
- package/dist/cjs/components/Card/Card.d.ts +1 -0
- package/dist/cjs/components/Card/Card.js +8 -7
- package/dist/cjs/components/Card/Card.js.map +1 -1
- package/dist/cjs/components/Checkbox/Checkbox.d.ts +2 -0
- package/dist/cjs/components/Checkbox/Checkbox.js +8 -3
- package/dist/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/cjs/components/FormWrap/FormWrap.d.ts +7 -4
- 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 +29 -3
- package/dist/cjs/components/Input/Input.js.map +1 -1
- package/dist/cjs/components/Modal/Modal.js +1 -1
- package/dist/cjs/components/Modal/Modal.js.map +1 -1
- package/dist/cjs/components/Radio/Radio.d.ts +1 -2
- package/dist/cjs/components/Radio/Radio.js +6 -5
- package/dist/cjs/components/Radio/Radio.js.map +1 -1
- package/dist/cjs/components/Select/Select.d.ts +1 -1
- package/dist/cjs/components/Select/Select.js +3 -3
- package/dist/cjs/components/Select/Select.js.map +1 -1
- package/dist/cjs/components/Skeleton/Skeleton.d.ts +2 -3
- package/dist/cjs/components/Skeleton/Skeleton.js +27 -32
- package/dist/cjs/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/cjs/components/Table/Table.js +1 -1
- package/dist/cjs/components/Table/Table.js.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.js +1 -1
- package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
- package/dist/cjs/demo/ContentModal.js +2 -2
- package/dist/cjs/demo/ContentModal.js.map +1 -1
- package/dist/cjs/index.d.ts +2 -1
- package/dist/cjs/index.js +3 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/ButtonGroup/ButtonGroup.d.ts +11 -0
- package/dist/esm/components/ButtonGroup/ButtonGroup.js +30 -0
- package/dist/esm/components/ButtonGroup/ButtonGroup.js.map +1 -0
- package/dist/esm/components/ButtonGroup/index.d.ts +1 -0
- package/dist/esm/components/ButtonGroup/index.js +2 -0
- package/dist/esm/components/ButtonGroup/index.js.map +1 -0
- package/dist/esm/components/Card/Card.d.ts +1 -0
- package/dist/esm/components/Card/Card.js +8 -7
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.d.ts +2 -0
- package/dist/esm/components/Checkbox/Checkbox.js +8 -3
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/FormWrap/FormWrap.d.ts +7 -4
- 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 +29 -3
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Modal/Modal.js +1 -1
- package/dist/esm/components/Modal/Modal.js.map +1 -1
- package/dist/esm/components/Radio/Radio.d.ts +1 -2
- package/dist/esm/components/Radio/Radio.js +6 -5
- package/dist/esm/components/Radio/Radio.js.map +1 -1
- package/dist/esm/components/Select/Select.d.ts +1 -1
- package/dist/esm/components/Select/Select.js +3 -3
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Skeleton/Skeleton.d.ts +2 -3
- package/dist/esm/components/Skeleton/Skeleton.js +27 -32
- package/dist/esm/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/esm/components/Table/Table.js +1 -1
- package/dist/esm/components/Table/Table.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +1 -1
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/demo/ContentModal.js +2 -2
- package/dist/esm/demo/ContentModal.js.map +1 -1
- package/dist/esm/index.d.ts +2 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface ButtonGroupProps {
|
|
3
|
+
className?: string;
|
|
4
|
+
size?: 'micro' | 'small' | 'medium' | 'large' | 'extra-large';
|
|
5
|
+
dataGroups: Array<{
|
|
6
|
+
buttonText: string;
|
|
7
|
+
onClick?(): void;
|
|
8
|
+
}>;
|
|
9
|
+
type?: 'default' | 'active-button';
|
|
10
|
+
}
|
|
11
|
+
export declare function PHXButtonGroup({ className, size, dataGroups, type }: ButtonGroupProps): JSX.Element;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
exports.__esModule = true;
|
|
3
|
+
exports.PHXButtonGroup = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var react_1 = tslib_1.__importStar(require("react"));
|
|
6
|
+
var Button_1 = require("../Button/Button");
|
|
7
|
+
var types_1 = require("../types");
|
|
8
|
+
function PHXButtonGroup(_a) {
|
|
9
|
+
var className = _a.className, size = _a.size, dataGroups = _a.dataGroups, type = _a.type;
|
|
10
|
+
var _b = (0, react_1.useState)(''), active = _b[0], setActive = _b[1];
|
|
11
|
+
var _c = (0, react_1.useState)(false), current = _c[0], setCurrent = _c[1];
|
|
12
|
+
var setIsActive = function (item) {
|
|
13
|
+
item.onClick();
|
|
14
|
+
if (type === 'active-button') {
|
|
15
|
+
setActive(item.buttonText);
|
|
16
|
+
if (item.buttonText === active) {
|
|
17
|
+
setCurrent(false);
|
|
18
|
+
setActive('');
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
setCurrent(true);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
return (react_1["default"].createElement("div", { className: "flex justify-start w-fit rounded-lg ".concat(className) }, dataGroups.map(function (item, index) { return (react_1["default"].createElement(Button_1.PHXButton, { key: item.buttonText, className: (0, types_1.classNames)(index === 0 ? 'rounded-none rounded-tl-lg rounded-bl-lg border-l' : 'rounded-none', index === dataGroups.length - 1 ? 'rounded-none rounded-tr-lg rounded-br-lg' : 'rounded-none', type === 'active-button' && active === item.buttonText && current
|
|
29
|
+
? '!bg-gray-200 !shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] !border-b-gray-300'
|
|
30
|
+
: '', '!ring-0 border-y border-r border-gray-300 leading-4 border-b-gray-400 hover:border-b-gray-300'), secondary: true, size: size, onClick: function () {
|
|
31
|
+
setIsActive(item);
|
|
32
|
+
} }, item.buttonText)); })));
|
|
33
|
+
}
|
|
34
|
+
exports.PHXButtonGroup = PHXButtonGroup;
|
|
35
|
+
//# sourceMappingURL=ButtonGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";;;;AAAA,qDAAuC;AACvC,2CAA4C;AAC5C,kCAAqC;AASrC,SAAgB,cAAc,CAAC,EAAuD;QAArD,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,UAAU,gBAAA,EAAE,IAAI,UAAA;IAC1D,IAAA,KAAsB,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAAjC,MAAM,QAAA,EAAE,SAAS,QAAgB,CAAA;IAClC,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAA;IAC7C,IAAM,WAAW,GAAG,UAAC,IAAS;QAC5B,IAAI,CAAC,OAAO,EAAE,CAAA;QACd,IAAI,IAAI,KAAK,eAAe,EAAE;YAC5B,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;YAC1B,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE;gBAC9B,UAAU,CAAC,KAAK,CAAC,CAAA;gBACjB,SAAS,CAAC,EAAE,CAAC,CAAA;aACd;iBAAM;gBACL,UAAU,CAAC,IAAI,CAAC,CAAA;aACjB;SACF;aAAM;YACL,OAAM;SACP;IACH,CAAC,CAAA;IACD,OAAO,CACL,0CAAK,SAAS,EAAE,8CAAuC,SAAS,CAAE,IAC/D,UAAU,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,CAC/B,iCAAC,kBAAS,IACR,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,SAAS,EAAE,IAAA,kBAAU,EACnB,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,mDAAmD,CAAC,CAAC,CAAC,cAAc,EAClF,KAAK,KAAK,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,0CAA0C,CAAC,CAAC,CAAC,cAAc,EAC7F,IAAI,KAAK,eAAe,IAAI,MAAM,KAAK,IAAI,CAAC,UAAU,IAAI,OAAO;YAC/D,CAAC,CAAC,iFAAiF;YACnF,CAAC,CAAC,EAAE,EACN,+FAA+F,CAChG,EACD,SAAS,QACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE;YACP,WAAW,CAAC,IAAI,CAAC,CAAA;QACnB,CAAC,IAEA,IAAI,CAAC,UAAU,CACN,CACb,EAnBgC,CAmBhC,CAAC,CACE,CACP,CAAA;AACH,CAAC;AAzCD,wCAyCC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ButtonGroup';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/index.ts"],"names":[],"mappings":";;;AAAA,wDAA6B"}
|
|
@@ -11,6 +11,7 @@ export interface CardProps {
|
|
|
11
11
|
headerAction?: ComplexAction;
|
|
12
12
|
secondaryFooterActions?: ComplexAction[];
|
|
13
13
|
dangerFooterAction?: ComplexAction;
|
|
14
|
+
type?: 'modal' | 'default';
|
|
14
15
|
}
|
|
15
16
|
export declare const PHXCard: React.FunctionComponent<CardProps> & {
|
|
16
17
|
Section: typeof Section;
|
|
@@ -6,24 +6,25 @@ var react_1 = tslib_1.__importDefault(require("react"));
|
|
|
6
6
|
var Section_1 = tslib_1.__importDefault(require("./Section"));
|
|
7
7
|
var WrapSection_1 = tslib_1.__importDefault(require("./WrapSection"));
|
|
8
8
|
var Footer_1 = tslib_1.__importDefault(require("./Footer"));
|
|
9
|
+
var types_1 = require("../types");
|
|
9
10
|
var Button_1 = require("../Button");
|
|
10
11
|
var solid_1 = require("@heroicons/react/24/solid");
|
|
11
12
|
var PHXCard = function Card(_a) {
|
|
12
|
-
var children = _a.children, title = _a.title, primaryFooterAction = _a.primaryFooterAction, primaryHeader = _a.primaryHeader, secondaryFooterActions = _a.secondaryFooterActions, headerAction = _a.headerAction, dangerFooterAction = _a.dangerFooterAction;
|
|
13
|
-
var footerActionMarkup = primaryFooterAction || secondaryFooterActions || dangerFooterAction ? (react_1["default"].createElement("div", { className: 'bg-gray-100 px-4 py-
|
|
13
|
+
var children = _a.children, title = _a.title, primaryFooterAction = _a.primaryFooterAction, primaryHeader = _a.primaryHeader, secondaryFooterActions = _a.secondaryFooterActions, headerAction = _a.headerAction, dangerFooterAction = _a.dangerFooterAction, _b = _a.type, type = _b === void 0 ? 'default' : _b;
|
|
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') },
|
|
14
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)),
|
|
15
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)),
|
|
16
17
|
dangerFooterAction && dangerFooterAction.content && (react_1["default"].createElement(Button_1.PHXButton, { danger2: 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));
|
|
17
|
-
var headerActionMarkup = primaryHeader ? (react_1["default"].createElement("div", { className: 'flex justify-between items-center px-4 py-
|
|
18
|
-
react_1["default"].createElement("
|
|
18
|
+
var headerActionMarkup = primaryHeader ? (react_1["default"].createElement("div", { className: 'flex justify-between items-center px-4 py-3 sm:px-6' },
|
|
19
|
+
react_1["default"].createElement("span", { className: 'text-sm font-medium leading-6 text-gray-900' }, title),
|
|
19
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 },
|
|
20
21
|
react_1["default"].createElement("span", { className: 'sr-only' }, "Close"),
|
|
21
|
-
react_1["default"].createElement(solid_1.XMarkIcon, { className: 'h-
|
|
22
|
+
react_1["default"].createElement(solid_1.XMarkIcon, { className: 'h-4 w-4', "aria-hidden": 'true' }))))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
|
|
22
23
|
return (react_1["default"].createElement("div", { className: 'w-full' },
|
|
23
24
|
react_1["default"].createElement("div", { className: 'mx-auto max-w-3xl px-0 lg:max-w-full' },
|
|
24
|
-
react_1["default"].createElement("div", { className: 'divide-y divide-gray-200 overflow-hidden shadow-[0rem_0.0825rem_0rem_#00000012] rounded-lg bg-white border border-gray-200' },
|
|
25
|
+
react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'divide-y divide-gray-200' : '', 'overflow-hidden shadow-[0rem_0.0825rem_0rem_#00000012] rounded-lg bg-white border border-gray-200') },
|
|
25
26
|
headerActionMarkup,
|
|
26
|
-
react_1["default"].createElement("div", { className: '
|
|
27
|
+
react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'py-3' : 'py-2', 'px-4 sm:px-6') }, children),
|
|
27
28
|
footerActionMarkup))));
|
|
28
29
|
};
|
|
29
30
|
exports.PHXCard = PHXCard;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,8DAA+B;AAC/B,sEAAuC;AACvC,4DAA6B;
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,5 +9,7 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
9
9
|
expanded?: boolean;
|
|
10
10
|
register?: UseFormRegisterReturn;
|
|
11
11
|
onChange?: any;
|
|
12
|
+
error?: boolean;
|
|
13
|
+
errorType?: 'required-field' | 'duplicate-field';
|
|
12
14
|
}
|
|
13
15
|
export declare const PHXCheckbox: React.FC<CheckboxProps>;
|
|
@@ -3,8 +3,9 @@ exports.__esModule = true;
|
|
|
3
3
|
exports.PHXCheckbox = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
6
|
+
var types_1 = require("../types");
|
|
6
7
|
var PHXCheckbox = function (_a) {
|
|
7
|
-
var children = _a.children, className = _a.className, helpText = _a.helpText, label = _a.label, title = _a.title, expanded = _a.expanded, register = _a.register, onChange = _a.onChange, rest = tslib_1.__rest(_a, ["children", "className", "helpText", "label", "title", "expanded", "register", "onChange"]);
|
|
8
|
+
var children = _a.children, className = _a.className, helpText = _a.helpText, label = _a.label, title = _a.title, expanded = _a.expanded, register = _a.register, onChange = _a.onChange, error = _a.error, errorType = _a.errorType, rest = tslib_1.__rest(_a, ["children", "className", "helpText", "label", "title", "expanded", "register", "onChange", "error", "errorType"]);
|
|
8
9
|
var _b = (0, react_1.useState)(false), show = _b[0], setShow = _b[1];
|
|
9
10
|
(0, react_1.useEffect)(function () {
|
|
10
11
|
// @ts-ignore
|
|
@@ -20,10 +21,14 @@ var PHXCheckbox = function (_a) {
|
|
|
20
21
|
label && react_1["default"].createElement("label", { className: 'block text-xs font-normal text-gray-700' }, label),
|
|
21
22
|
react_1["default"].createElement("div", { className: 'flex items-center py-1' },
|
|
22
23
|
react_1["default"].createElement("label", { className: 'block flex items-center text-xs font-normal leading-5 text-gray-700 hover:cursor-pointer' },
|
|
23
|
-
react_1["default"].createElement("input", tslib_1.__assign({}, rest, register, { className: 'block h-4 w-4 rounded border border-gray-500 text-indigo-800 hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent', onChange: handleChange, type: 'checkbox' })),
|
|
24
|
+
react_1["default"].createElement("input", tslib_1.__assign({}, rest, register, { className: (0, types_1.classNames)(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', 'block h-4 w-4 rounded border border-gray-500 text-indigo-800 hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'), onChange: handleChange, type: 'checkbox' })),
|
|
24
25
|
react_1["default"].createElement("span", { className: 'ml-2' }, title))),
|
|
25
26
|
helpText && show ? react_1["default"].createElement("div", { className: 'pl-7 text-xs font-light text-gray-400' }, helpText) : null,
|
|
26
|
-
show && children ? react_1["default"].createElement("div", { className: 'ml-7' }, children) : react_1["default"].createElement(react_1["default"].Fragment, null)
|
|
27
|
+
show && children ? react_1["default"].createElement("div", { className: 'ml-7' }, children) : react_1["default"].createElement(react_1["default"].Fragment, null),
|
|
28
|
+
error && errorType ? (react_1["default"].createElement("div", { className: 'ml-1 mt-1 flex items-center' },
|
|
29
|
+
react_1["default"].createElement("svg", { className: 'mr-2 h-4 w-4 text-red-500', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
30
|
+
react_1["default"].createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
|
|
31
|
+
react_1["default"].createElement("p", { className: 'text-xs text-red-800' }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
|
|
27
32
|
};
|
|
28
33
|
exports.PHXCheckbox = PHXCheckbox;
|
|
29
34
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;AAAA,qDAAuE;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;AAAA,qDAAuE;AAEvE,kCAAqC;AAe9B,IAAM,WAAW,GAA4B,UAAC,EAYrC;IAXd,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA,EACN,IAAI,sBAX4C,iHAYpD,CADQ;IAED,IAAA,KAAkB,IAAA,gBAAQ,EAAU,KAAK,CAAC,EAAzC,IAAI,QAAA,EAAE,OAAO,QAA4B,CAAA;IAEhD,IAAA,iBAAS,EAAC;QACR,aAAa;QACb,OAAO,CAAC,QAAQ,CAAC,CAAA;IACnB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAM,YAAY,GAAG,UAAC,CAAM;QAC1B,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QACzB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC,CAAA;SACZ;IACH,CAAC,CAAA;IAED,OAAO,CACL,0CAAK,SAAS,EAAE,SAAS;QACtB,KAAK,IAAI,4CAAO,SAAS,EAAC,yCAAyC,IAAE,KAAK,CAAS;QACpF,0CAAK,SAAS,EAAC,wBAAwB;YACrC,4CAAO,SAAS,EAAC,0FAA0F;gBACzG,+DACM,IAAI,EACJ,QAAQ,IACZ,SAAS,EAAE,IAAA,kBAAU,EACnB,KAAK,CAAC,CAAC,CAAC,+EAA+E,CAAC,CAAC,CAAC,EAAE,EAC5F,4HAA4H,CAC7H,EACD,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,UAAU,IACf;gBACF,2CAAM,SAAS,EAAC,MAAM,IAAE,KAAK,CAAQ,CAC/B,CACJ;QACL,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,0CAAK,SAAS,EAAC,uCAAuC,IAAE,QAAQ,CAAO,CAAC,CAAC,CAAC,IAAI;QACjG,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,0CAAK,SAAS,EAAC,MAAM,IAAE,QAAQ,CAAO,CAAC,CAAC,CAAC,mEAAK;QACjE,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,IAChC,SAAS,KAAK,gBAAgB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,sBAAsB,CAClF,CACA,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC,CAAA;AAvEY,QAAA,WAAW,eAuEvB"}
|
|
@@ -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;
|
|
@@ -13,14 +14,16 @@ export interface FooterBarProps {
|
|
|
13
14
|
deleteText?: string;
|
|
14
15
|
cancelText?: string;
|
|
15
16
|
submitText?: string;
|
|
17
|
+
deletedLoading?: boolean;
|
|
18
|
+
formType?: 'add' | 'edit' | 'custom';
|
|
16
19
|
badge?: {
|
|
17
20
|
badgeText?: string;
|
|
18
21
|
badgeType?: string;
|
|
19
22
|
} | any;
|
|
20
23
|
size?: 'small' | 'medium' | 'large';
|
|
21
24
|
type?: 'default' | 'title-with-badge';
|
|
22
|
-
onDelete
|
|
23
|
-
onCancel
|
|
24
|
-
onSubmit
|
|
25
|
+
onDelete?(): void;
|
|
26
|
+
onCancel?(): void;
|
|
27
|
+
onSubmit?(): void;
|
|
25
28
|
}
|
|
26
|
-
export declare const PHXFormWrap: ({
|
|
29
|
+
export declare const PHXFormWrap: ({ badge, cancelText, children, className, deleteText, 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, deleteText = _a.deleteText, 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, { danger2: true, size: 'small', onClick: handleOpenModalConfirm }, deleteText),
|
|
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,15 +5,41 @@ 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,
|
|
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
|
+
var message = function (type) {
|
|
10
|
+
var errorMessage = '';
|
|
11
|
+
switch (type) {
|
|
12
|
+
case 'required-field':
|
|
13
|
+
errorMessage = 'Vui lòng nhập thông tin';
|
|
14
|
+
break;
|
|
15
|
+
case 'validate-input-field':
|
|
16
|
+
errorMessage = 'Vui lòng nhập thông tin hợp lệ (độ dài 1 - 60 kí tự)';
|
|
17
|
+
break;
|
|
18
|
+
case 'duplicate-field':
|
|
19
|
+
errorMessage = 'Thông tin đã tồn tại';
|
|
20
|
+
break;
|
|
21
|
+
case 'validate-phone-number':
|
|
22
|
+
errorMessage = 'Số điện thoại chưa hợp lệ';
|
|
23
|
+
break;
|
|
24
|
+
case 'validate-input-email':
|
|
25
|
+
errorMessage = 'Định dạng email chưa đúng, vui lòng nhập lại';
|
|
26
|
+
break;
|
|
27
|
+
case 'custom-message':
|
|
28
|
+
errorMessage = errorMessageCustom;
|
|
29
|
+
break;
|
|
30
|
+
default:
|
|
31
|
+
break;
|
|
32
|
+
}
|
|
33
|
+
return errorMessage;
|
|
34
|
+
};
|
|
9
35
|
return (react_1["default"].createElement("div", { className: className },
|
|
10
36
|
label && react_1["default"].createElement("label", { className: 'mb-1 block text-xs font-normal text-gray-700' }, label),
|
|
11
37
|
react_1["default"].createElement("input", tslib_1.__assign({}, rest, register, { className: (0, types_1.classNames)('block w-full rounded-lg border border-gray-500 px-3 py-1.5 text-xs font-light shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '') })),
|
|
12
38
|
helpText ? react_1["default"].createElement("div", { className: 'mt-1 pl-1 text-xs font-light text-gray-400' }, helpText) : null,
|
|
13
|
-
error &&
|
|
39
|
+
error && errorType ? (react_1["default"].createElement("div", { className: 'ml-1 mt-1 flex items-center' },
|
|
14
40
|
react_1["default"].createElement("svg", { className: 'mr-2 h-4 w-4 text-red-500', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
15
41
|
react_1["default"].createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
|
|
16
|
-
react_1["default"].createElement("p", { className: 'text-xs text-red-800' },
|
|
42
|
+
react_1["default"].createElement("p", { className: 'text-xs text-red-800' }, message(errorType)))) : null));
|
|
17
43
|
};
|
|
18
44
|
exports.PHXInput = PHXInput;
|
|
19
45
|
//# sourceMappingURL=Input.js.map
|
|
@@ -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"}
|
|
@@ -18,7 +18,7 @@ var PHXModal = function (_a) {
|
|
|
18
18
|
onHide();
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
|
-
var Card = function () { return (react_1["default"].createElement(Card_1.PHXCard, { primaryHeader: true, title: title, headerAction: { onClick: handleClickCloseAction }, secondaryFooterActions: [{ content: 'Hủy thay đổi', onClick: handleClickCloseAction }], primaryFooterAction: {
|
|
21
|
+
var Card = function () { return (react_1["default"].createElement(Card_1.PHXCard, { primaryHeader: true, title: title, headerAction: { onClick: handleClickCloseAction }, secondaryFooterActions: [{ content: 'Hủy thay đổi', onClick: handleClickCloseAction }], type: 'modal', primaryFooterAction: {
|
|
22
22
|
content: primaryActionText,
|
|
23
23
|
loading: primaryLoading,
|
|
24
24
|
onClick: onPrimaryClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";;;;AAAA,qDAA4D;AAC5D,2CAAsD;AACtD,gCAAiC;AAoB1B,IAAM,QAAQ,GAAG,UAAC,EAeZ;QAdX,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,SAAS,eAAA,EACT,yBAAyB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,gBAAgB,sBAAA,EAChB,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,YAAY,kBAAA,EACZ,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,aAAa,mBAAA;IAEP,IAAA,KAAkB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAA;IAEvC,IAAA,iBAAS,EAAC;QACR,aAAa;QACb,OAAO,CAAC,IAAI,CAAC,CAAA;IACf,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,IAAM,sBAAsB,GAAG;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAA;QACd,IAAI,MAAM,EAAE;YACV,MAAM,EAAE,CAAA;SACT;IACH,CAAC,CAAA;IAED,IAAM,IAAI,GAAG,cAAM,OAAA,CACjB,iCAAC,cAAO,IACN,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,EAAE,OAAO,EAAE,sBAAsB,EAAE,EACjD,sBAAsB,EAAE,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,sBAAsB,EAAE,CAAC,EACtF,mBAAmB,EAAE;YACnB,OAAO,EAAE,iBAAiB;YAC1B,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,cAAc;YACvB,MAAM,EAAE,aAAa;SACtB,EACD,kBAAkB,EAAE;YAClB,OAAO,EAAE,gBAAgB;YACzB,OAAO,EAAE,aAAa;YACtB,OAAO,EAAE,aAAa;YACtB,MAAM,EAAE,YAAY;SACrB,IAEA,QAAQ,CACD,CACX,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";;;;AAAA,qDAA4D;AAC5D,2CAAsD;AACtD,gCAAiC;AAoB1B,IAAM,QAAQ,GAAG,UAAC,EAeZ;QAdX,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,SAAS,eAAA,EACT,yBAAyB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,gBAAgB,sBAAA,EAChB,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,YAAY,kBAAA,EACZ,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,aAAa,mBAAA;IAEP,IAAA,KAAkB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAA;IAEvC,IAAA,iBAAS,EAAC;QACR,aAAa;QACb,OAAO,CAAC,IAAI,CAAC,CAAA;IACf,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,IAAM,sBAAsB,GAAG;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAA;QACd,IAAI,MAAM,EAAE;YACV,MAAM,EAAE,CAAA;SACT;IACH,CAAC,CAAA;IAED,IAAM,IAAI,GAAG,cAAM,OAAA,CACjB,iCAAC,cAAO,IACN,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,EAAE,OAAO,EAAE,sBAAsB,EAAE,EACjD,sBAAsB,EAAE,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,sBAAsB,EAAE,CAAC,EACtF,IAAI,EAAC,OAAO,EACZ,mBAAmB,EAAE;YACnB,OAAO,EAAE,iBAAiB;YAC1B,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,cAAc;YACvB,MAAM,EAAE,aAAa;SACtB,EACD,kBAAkB,EAAE;YAClB,OAAO,EAAE,gBAAgB;YACzB,OAAO,EAAE,aAAa;YACtB,OAAO,EAAE,aAAa;YACtB,MAAM,EAAE,YAAY;SACrB,IAEA,QAAQ,CACD,CACX,EAtBkB,CAsBlB,CAAA;IAED,OAAO,CACL,iCAAC,kBAAU,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,gBAAQ;QACvC,iCAAC,cAAM,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,eAAe,EAAC,OAAO,EAAE,sBAAsB;YACxE,iCAAC,kBAAU,CAAC,KAAK,IACf,EAAE,EAAE,gBAAQ,EACZ,KAAK,EAAC,4CAA4C,EAClD,SAAS,EAAC,4DAA4D,EACtE,OAAO,EAAC,4CAA4C,EACpD,KAAK,EAAC,iCAAiC,EACvC,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAC,4DAA4D;gBAEpE,0CAAK,SAAS,EAAC,4DAA4D,GAAG,CAC7D;YAEnB,0CAAK,SAAS,EAAE,6CAAsC,SAAS,CAAE;gBAC/D,0CAAK,SAAS,EAAC,oFAAoF;oBACjG,iCAAC,kBAAU,CAAC,KAAK,IACf,EAAE,EAAE,gBAAQ,EACZ,KAAK,EAAC,4CAA4C,EAClD,SAAS,EAAC,4DAA4D,EACtE,OAAO,EAAC,4CAA4C,EACpD,KAAK,EAAC,iCAAiC,EACvC,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAC,4DAA4D;wBAEpE,iCAAC,cAAM,CAAC,KAAK,IAAC,SAAS,EAAC,yHAAyH,IAC9I,aAAa,IAAI,YAAY,CAAC,CAAC,CAAC,CAC/B,2CAAM,QAAQ,EAAE,QAAQ;4BACtB,iCAAC,IAAI,OAAG,CACH,CACR,CAAC,CAAC,CAAC,CACF,iCAAC,IAAI,OAAG,CACT,CACY,CACE,CACf,CACF,CACC,CACO,CACnB,CAAA;AACH,CAAC,CAAA;AA/FY,QAAA,QAAQ,YA+FpB"}
|
|
@@ -5,8 +5,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
5
5
|
label?: string;
|
|
6
6
|
register?: UseFormRegisterReturn;
|
|
7
7
|
title?: string;
|
|
8
|
-
id?: any;
|
|
9
8
|
error?: boolean;
|
|
10
|
-
|
|
9
|
+
errorType?: 'required-field' | 'duplicate-field';
|
|
11
10
|
}
|
|
12
11
|
export declare const PHXRadio: React.FC<InputProps>;
|
|
@@ -5,16 +5,17 @@ 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 PHXRadio = function (_a) {
|
|
8
|
-
var className = _a.className, error = _a.error,
|
|
8
|
+
var className = _a.className, error = _a.error, errorType = _a.errorType, label = _a.label, register = _a.register, title = _a.title, rest = tslib_1.__rest(_a, ["className", "error", "errorType", "label", "register", "title"]);
|
|
9
9
|
return (react_1["default"].createElement("div", { className: className },
|
|
10
10
|
react_1["default"].createElement("label", { className: 'block text-xs font-normal text-gray-700' }, label),
|
|
11
11
|
react_1["default"].createElement("div", { className: 'mt-1 flex items-center' },
|
|
12
|
-
react_1["default"].createElement("
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
react_1["default"].createElement("label", { className: 'block flex items-center text-xs font-normal leading-5 text-gray-700 hover:cursor-pointer' },
|
|
13
|
+
react_1["default"].createElement("input", tslib_1.__assign({}, rest, register, { className: (0, types_1.classNames)(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', 'h-4 w-4 border-gray-300 p-0 text-indigo-600 focus:ring-indigo-500'), type: 'radio' })),
|
|
14
|
+
react_1["default"].createElement("span", { className: 'ml-2' }, title))),
|
|
15
|
+
error && errorType ? (react_1["default"].createElement("div", { className: 'ml-1 mt-1 flex items-center' },
|
|
15
16
|
react_1["default"].createElement("svg", { className: 'mr-2 h-4 w-4 text-red-500', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
16
17
|
react_1["default"].createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
|
|
17
|
-
react_1["default"].createElement("p", { className: 'text-xs text-red-800' },
|
|
18
|
+
react_1["default"].createElement("p", { className: 'text-xs text-red-800' }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
|
|
18
19
|
};
|
|
19
20
|
exports.PHXRadio = PHXRadio;
|
|
20
21
|
//# sourceMappingURL=Radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":";;;;AAAA,wDAAkD;AAElD,kCAAqC;
|
|
1
|
+
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":";;;;AAAA,wDAAkD;AAElD,kCAAqC;AAW9B,IAAM,QAAQ,GAAyB,UAAC,EAQlC;IAPX,IAAA,SAAS,eAAA,EACT,KAAK,WAAA,EACL,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,sBAPsC,iEAQ9C,CADQ;IACS,OAAA,CAChB,0CAAK,SAAS,EAAE,SAAS;QACvB,4CAAO,SAAS,EAAC,yCAAyC,IAAE,KAAK,CAAS;QAC1E,0CAAK,SAAS,EAAC,wBAAwB;YACrC,4CAAO,SAAS,EAAC,0FAA0F;gBACzG,+DACM,IAAI,EACJ,QAAQ,IACZ,SAAS,EAAE,IAAA,kBAAU,EACnB,KAAK,CAAC,CAAC,CAAC,+EAA+E,CAAC,CAAC,CAAC,EAAE,EAC5F,mEAAmE,CACpE,EACD,IAAI,EAAC,OAAO,IACZ;gBACF,2CAAM,SAAS,EAAC,MAAM,IAAE,KAAK,CAAQ,CAC/B,CACJ;QACL,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,IAChC,SAAS,KAAK,gBAAgB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,sBAAsB,CAClF,CACA,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;CAAA,CAAA;AAhDY,QAAA,QAAQ,YAgDpB"}
|
|
@@ -7,6 +7,6 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
|
7
7
|
label?: string;
|
|
8
8
|
helpText?: string;
|
|
9
9
|
error?: boolean;
|
|
10
|
-
|
|
10
|
+
errorType?: 'required-field' | 'duplicate-field';
|
|
11
11
|
}
|
|
12
12
|
export declare const PHXSelect: React.FC<SelectProps>;
|
|
@@ -5,15 +5,15 @@ 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 PHXSelect = function (_a) {
|
|
8
|
-
var children = _a.children, className = _a.className, register = _a.register, label = _a.label, helpText = _a.helpText, error = _a.error,
|
|
8
|
+
var children = _a.children, className = _a.className, register = _a.register, label = _a.label, helpText = _a.helpText, error = _a.error, errorType = _a.errorType, rest = tslib_1.__rest(_a, ["children", "className", "register", "label", "helpText", "error", "errorType"]);
|
|
9
9
|
return (react_1["default"].createElement("div", { className: className },
|
|
10
10
|
react_1["default"].createElement("label", { className: 'block text-xs font-normal text-gray-700' }, label),
|
|
11
11
|
react_1["default"].createElement("select", tslib_1.__assign({}, rest, register, { className: (0, types_1.classNames)('mt-1 block w-full rounded-lg border border-gray-500 px-3 py-1.5 text-xs font-light shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '') }), children),
|
|
12
12
|
helpText ? react_1["default"].createElement("div", { className: 'mt-1 pl-1 text-xs font-light text-gray-400' }, helpText) : null,
|
|
13
|
-
error &&
|
|
13
|
+
error && errorType ? (react_1["default"].createElement("div", { className: 'ml-1 mt-1 flex items-center' },
|
|
14
14
|
react_1["default"].createElement("svg", { className: 'mr-2 h-4 w-4 text-red-500', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
15
15
|
react_1["default"].createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
|
|
16
|
-
react_1["default"].createElement("p", { className: 'text-xs text-red-800' },
|
|
16
|
+
react_1["default"].createElement("p", { className: 'text-xs text-red-800' }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
|
|
17
17
|
};
|
|
18
18
|
exports.PHXSelect = PHXSelect;
|
|
19
19
|
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":";;;;AAAA,wDAAmD;AAEnD,kCAAqC;AAY9B,IAAM,SAAS,GAA0B,UAAC,EASnC;IARZ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":";;;;AAAA,wDAAmD;AAEnD,kCAAqC;AAY9B,IAAM,SAAS,GAA0B,UAAC,EASnC;IARZ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA,EACN,IAAI,sBARwC,gFAShD,CADQ;IACU,OAAA,CACjB,0CAAK,SAAS,EAAE,SAAS;QACvB,4CAAO,SAAS,EAAC,yCAAyC,IAAE,KAAK,CAAS;QAC1E,gEACM,IAAI,EACJ,QAAQ,IACZ,SAAS,EAAE,IAAA,kBAAU,EACnB,gPAAgP,EAChP,KAAK,CAAC,CAAC,CAAC,+EAA+E,CAAC,CAAC,CAAC,EAAE,CAC7F,KAEA,QAAQ,CACF;QACR,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,IAChC,SAAS,KAAK,gBAAgB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,sBAAsB,CAClF,CACA,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;CAAA,CAAA;AA9CY,QAAA,SAAS,aA8CrB"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export interface SkeletonProps {
|
|
3
3
|
size?: 'small' | 'medium' | 'large' | 'extra-large';
|
|
4
|
-
type?: 'default' | 'col' | 'single';
|
|
5
|
-
loadingHeader?: boolean;
|
|
4
|
+
type?: 'default' | 'col' | 'single' | 'table';
|
|
6
5
|
className?: string;
|
|
7
6
|
}
|
|
8
|
-
export declare function PHXSkeleton({ className,
|
|
7
|
+
export declare function PHXSkeleton({ className, size, type }: SkeletonProps): JSX.Element;
|
|
@@ -6,49 +6,44 @@ var Card_1 = require("../Card/Card");
|
|
|
6
6
|
var react_1 = tslib_1.__importDefault(require("react"));
|
|
7
7
|
var types_1 = require("../types");
|
|
8
8
|
function PHXSkeleton(_a) {
|
|
9
|
-
var className = _a.className, _b = _a.
|
|
9
|
+
var className = _a.className, _b = _a.size, size = _b === void 0 ? 'extra-large' : _b, _c = _a.type, type = _c === void 0 ? 'default' : _c;
|
|
10
10
|
var skeletonClass = (0, types_1.classNames)(
|
|
11
11
|
// @ts-ignore
|
|
12
12
|
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', size === 'extra-large' && 'mx-auto w-full');
|
|
13
|
+
var Skeleton = function () { return (react_1["default"].createElement("div", { className: 'flex animate-pulse space-x-4' },
|
|
14
|
+
react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
|
|
15
|
+
react_1["default"].createElement(TableLoad, null),
|
|
16
|
+
react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }),
|
|
17
|
+
react_1["default"].createElement("div", { className: 'space-y-3' },
|
|
18
|
+
react_1["default"].createElement("div", { className: 'grid grid-cols-3 gap-4' },
|
|
19
|
+
react_1["default"].createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
|
|
20
|
+
react_1["default"].createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
|
|
21
|
+
react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }))))); };
|
|
22
|
+
var TableLoad = function () {
|
|
23
|
+
return type !== 'table' ? react_1["default"].createElement("div", { className: 'h-3 w-1/4 rounded bg-gray-200' }) : null;
|
|
24
|
+
};
|
|
13
25
|
return (react_1["default"].createElement(react_1["default"].Fragment, null, type === 'single' ? (react_1["default"].createElement("div", { className: "flex animate-pulse space-x-4 ".concat(className) },
|
|
14
26
|
react_1["default"].createElement("div", { className: 'h-3 w-full rounded bg-gray-300' }))) : (react_1["default"].createElement("div", { className: "".concat(className, " ").concat(skeletonClass) },
|
|
15
|
-
|
|
16
|
-
react_1["default"].createElement("div", { className: 'h-
|
|
17
|
-
react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'default'
|
|
27
|
+
type !== 'table' ? (react_1["default"].createElement("div", { className: 'mb-8 flex animate-pulse space-x-4' },
|
|
28
|
+
react_1["default"].createElement("div", { className: 'h-3 w-1/3 rounded bg-gray-200' }))) : null,
|
|
29
|
+
react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'default' || type === 'table'
|
|
30
|
+
? ''
|
|
31
|
+
: 'grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-6') },
|
|
18
32
|
react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'default' ? '' : 'grid grid-cols-1 gap-4 lg:col-span-2') },
|
|
19
33
|
react_1["default"].createElement(Card_1.PHXCard, null,
|
|
20
|
-
react_1["default"].createElement(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' })))),
|
|
29
|
-
react_1["default"].createElement("div", { className: 'mb-4 flex animate-pulse space-x-4' },
|
|
30
|
-
react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
|
|
31
|
-
react_1["default"].createElement("div", { className: 'h-6 w-1/4 rounded bg-gray-200' }),
|
|
32
|
-
react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }),
|
|
33
|
-
react_1["default"].createElement("div", { className: 'space-y-3' },
|
|
34
|
-
react_1["default"].createElement("div", { className: 'grid grid-cols-3 gap-4' },
|
|
35
|
-
react_1["default"].createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
|
|
36
|
-
react_1["default"].createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
|
|
37
|
-
react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' })))),
|
|
38
|
-
react_1["default"].createElement("div", { className: 'flex animate-pulse space-x-4' },
|
|
39
|
-
react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
|
|
40
|
-
react_1["default"].createElement("div", { className: 'h-6 w-1/4 rounded bg-gray-200' }),
|
|
41
|
-
react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }),
|
|
42
|
-
react_1["default"].createElement("div", { className: 'space-y-3' },
|
|
43
|
-
react_1["default"].createElement("div", { className: 'grid grid-cols-3 gap-4' },
|
|
44
|
-
react_1["default"].createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
|
|
45
|
-
react_1["default"].createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
|
|
46
|
-
react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' })))))),
|
|
34
|
+
react_1["default"].createElement(Skeleton, null),
|
|
35
|
+
react_1["default"].createElement(Skeleton, null),
|
|
36
|
+
react_1["default"].createElement(Skeleton, null),
|
|
37
|
+
type === 'table' && (react_1["default"].createElement(react_1["default"].Fragment, null,
|
|
38
|
+
react_1["default"].createElement(Skeleton, null),
|
|
39
|
+
react_1["default"].createElement(Skeleton, null),
|
|
40
|
+
react_1["default"].createElement(Skeleton, null),
|
|
41
|
+
react_1["default"].createElement(Skeleton, null))))),
|
|
47
42
|
type === 'col' ? (react_1["default"].createElement("div", { className: 'grid grid-cols-1 gap-4' },
|
|
48
43
|
react_1["default"].createElement(Card_1.PHXCard, null,
|
|
49
44
|
react_1["default"].createElement("div", { className: 'flex animate-pulse space-x-4' },
|
|
50
45
|
react_1["default"].createElement("div", { className: 'flex-1 space-y-6 py-1' },
|
|
51
|
-
react_1["default"].createElement("div", { className: 'h-
|
|
46
|
+
react_1["default"].createElement("div", { className: 'h-3 w-1/3 rounded bg-gray-200' }),
|
|
52
47
|
react_1["default"].createElement("div", { className: 'h-2 rounded bg-gray-200' }),
|
|
53
48
|
react_1["default"].createElement("div", { className: 'space-y-3' },
|
|
54
49
|
react_1["default"].createElement("div", { className: 'grid grid-cols-3 gap-4' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;AAAA,qCAAsC;AACtC,wDAAyB;AACzB,kCAAqC;
|
|
1
|
+
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"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"}
|