phx-react 1.3.1139 → 1.3.1141
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 +4 -1
- package/dist/cjs/components/Button/Button.js +16 -4
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/TabDate/PHXTabDate.js +43 -24
- package/dist/cjs/components/TabDate/PHXTabDate.js.map +1 -1
- package/dist/esm/components/Button/Button.d.ts +4 -1
- package/dist/esm/components/Button/Button.js +16 -4
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/TabDate/PHXTabDate.js +43 -24
- package/dist/esm/components/TabDate/PHXTabDate.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@ import * as SolidIcons from '@heroicons/react/24/solid';
|
|
|
3
3
|
import * as OutlineIcons from '@heroicons/react/24/outline';
|
|
4
4
|
import { BaseButton } from '../types';
|
|
5
5
|
export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons;
|
|
6
|
+
declare const typeIconMap: Record<string, keyof typeof SolidIcons>;
|
|
6
7
|
export interface ButtonProps extends BaseButton {
|
|
7
8
|
primary?: boolean;
|
|
8
9
|
secondary?: boolean;
|
|
@@ -28,5 +29,7 @@ export interface ButtonProps extends BaseButton {
|
|
|
28
29
|
iconOutline?: boolean;
|
|
29
30
|
iconPosition?: 'before' | 'after';
|
|
30
31
|
style?: any;
|
|
32
|
+
typeIcon?: keyof typeof typeIconMap;
|
|
31
33
|
}
|
|
32
|
-
export declare const PHXButton: ({ primary, secondary, danger, danger2, plain, tertiary, plainCritical, primaryCritical, split, options, soft, deleted, deletedButton, rounded, submit, size, children, icon, iconClassName, iconOutline, iconPosition, disabled, loading, id, onClick, className, style, }: ButtonProps) => React.JSX.Element;
|
|
34
|
+
export declare const PHXButton: ({ primary, secondary, danger, danger2, plain, tertiary, plainCritical, primaryCritical, split, options, soft, deleted, deletedButton, rounded, submit, size, children, icon, iconClassName, iconOutline, iconPosition, disabled, loading, id, onClick, className, style, typeIcon, }: ButtonProps) => React.JSX.Element;
|
|
35
|
+
export {};
|
|
@@ -9,12 +9,24 @@ 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 react_2 = require("@headlessui/react");
|
|
12
|
+
// ánh xạ typeIcon -> tên icon
|
|
13
|
+
var typeIconMap = {
|
|
14
|
+
calendar: 'CalendarDaysIcon'
|
|
15
|
+
};
|
|
12
16
|
var PHXButton = function (_a) {
|
|
13
|
-
var primary = _a.primary, secondary = _a.secondary, danger = _a.danger, danger2 = _a.danger2, plain = _a.plain, tertiary = _a.tertiary, plainCritical = _a.plainCritical, primaryCritical = _a.primaryCritical, split = _a.split, options = _a.options, soft = _a.soft, deleted = _a.deleted, _b = _a.deletedButton, deletedButton = _b === void 0 ? true : _b, rounded = _a.rounded, submit = _a.submit, _c = _a.size, size = _c === void 0 ? 'medium' : _c, children = _a.children, icon = _a.icon, iconClassName = _a.iconClassName, _d = _a.iconOutline, iconOutline = _d === void 0 ? false : _d, _e = _a.iconPosition, iconPosition = _e === void 0 ? 'before' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, id = _a.id, onClick = _a.onClick, className = _a.className, style = _a.style;
|
|
17
|
+
var primary = _a.primary, secondary = _a.secondary, danger = _a.danger, danger2 = _a.danger2, plain = _a.plain, tertiary = _a.tertiary, plainCritical = _a.plainCritical, primaryCritical = _a.primaryCritical, split = _a.split, options = _a.options, soft = _a.soft, deleted = _a.deleted, _b = _a.deletedButton, deletedButton = _b === void 0 ? true : _b, rounded = _a.rounded, submit = _a.submit, _c = _a.size, size = _c === void 0 ? 'medium' : _c, children = _a.children, icon = _a.icon, iconClassName = _a.iconClassName, _d = _a.iconOutline, iconOutline = _d === void 0 ? false : _d, _e = _a.iconPosition, iconPosition = _e === void 0 ? 'before' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, id = _a.id, onClick = _a.onClick, className = _a.className, style = _a.style, typeIcon = _a.typeIcon;
|
|
14
18
|
var Icon;
|
|
15
19
|
if (icon) {
|
|
20
|
+
// nếu truyền thẳng tên icon
|
|
16
21
|
Icon = iconOutline ? OutlineIcons[icon] : SolidIcons[icon];
|
|
17
22
|
}
|
|
23
|
+
else if (typeIcon) {
|
|
24
|
+
// lấy tên icon theo typeIcon
|
|
25
|
+
var iconName = typeIconMap[typeIcon];
|
|
26
|
+
if (iconName) {
|
|
27
|
+
Icon = iconOutline ? OutlineIcons[iconName] : SolidIcons[iconName];
|
|
28
|
+
}
|
|
29
|
+
}
|
|
18
30
|
var commonProps = {
|
|
19
31
|
id: id,
|
|
20
32
|
onClick: onClick
|
|
@@ -41,8 +53,8 @@ var PHXButton = function (_a) {
|
|
|
41
53
|
"bg-indigo-50 font-normal text-red-700 shadow-sm ".concat(!disabled ? 'hover:bg-indigo-100 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' : ''), rounded && 'rounded-full', soft &&
|
|
42
54
|
"bg-indigo-50 font-normal text-gray-700 shadow-sm ".concat(!disabled ? 'hover:bg-indigo-100 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' : ''), size === 'micro' && isNew && "px-2 py-1 text-xs ".concat(!disabled ? 'active:pt-[0.3rem] active:pb-[0.2rem]' : ''), size === 'small' && isNew && "px-2.5 py-1.5 text-xs ".concat(!disabled ? 'active:pt-[0.45rem] active:pb-[0.3rem]' : ''), size === 'medium' && isNew && "px-2.5 py-1.5 text-sm ".concat(!disabled ? 'active:pt-[0.45rem] active:pb-[0.3rem]' : ''), size === 'large' && isNew && "px-3 py-2 text-sm ".concat(!disabled ? 'active:pt-[0.55rem] active:pb-[0.45rem]' : ''), size === 'extra-large' &&
|
|
43
55
|
isNew &&
|
|
44
|
-
"px-3.5 py-2.5 text-sm ".concat(!disabled ? 'active:pt-[0.7rem] active:pb-[0.55rem]' : ''), size === 'micro' && "px-2 py-1 text-xs ", size === 'small' && "px-2.5 py-1.5 text-xs ", size === 'extra-micro' && "px-1.5 py-1 text-xs ", size === 'medium' && "px-2.5 py-1.5 text-sm ", size === 'large' && "px-3 py-2 text-sm ", size === 'extra-large' && "px-3.5 py-2.5 text-sm ", 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', disabled && 'opacity-30 cursor-default', className);
|
|
45
|
-
var iconClass = (0, types_1.classNames)(icon && iconPosition === 'before' && size !== 'extra-micro' && 'h-5 w-5', icon && iconPosition === 'after' && size !== 'extra-micro' && 'h-5 w-5', icon && iconPosition === 'before' && size === 'extra-micro' && 'h-4 w-4', icon && iconPosition === 'after' && size === 'extra-micro' && 'h-4 w-4', iconClassName);
|
|
56
|
+
"px-3.5 py-2.5 text-sm ".concat(!disabled ? 'active:pt-[0.7rem] active:pb-[0.55rem]' : ''), size === 'micro' && "px-2 py-1 text-xs ", size === 'small' && "px-2.5 py-1.5 text-xs ", size === 'extra-micro' && "px-1.5 py-1 text-xs ", size === 'medium' && "px-2.5 py-1.5 text-sm ", size === 'large' && "px-3 py-2 text-sm ", size === 'extra-large' && "px-3.5 py-2.5 text-sm ", (icon || typeIcon) && (size === 'medium' || size === 'large') && 'inline-flex items-center gap-x-1.5', (icon || typeIcon) && size === 'extra-large' && 'inline-flex items-center gap-x-2', loading && 'opacity-30', 'relative', disabled && 'opacity-30 cursor-default', className);
|
|
57
|
+
var iconClass = (0, types_1.classNames)((icon || typeIcon) && iconPosition === 'before' && size !== 'extra-micro' && 'h-5 w-5', (icon || typeIcon) && iconPosition === 'after' && size !== 'extra-micro' && 'h-5 w-5', (icon || typeIcon) && iconPosition === 'before' && size === 'extra-micro' && 'h-4 w-4', (icon || typeIcon) && iconPosition === 'after' && size === 'extra-micro' && 'h-4 w-4', iconClassName);
|
|
46
58
|
// Icon markup
|
|
47
59
|
var iconMarkup = Icon && react_1["default"].createElement(Icon, { className: iconClass });
|
|
48
60
|
// Loading markup
|
|
@@ -52,7 +64,7 @@ var PHXButton = function (_a) {
|
|
|
52
64
|
react_1["default"].createElement("button", tslib_1.__assign({ style: style }, interactiveProps, { type: submit ? 'submit' : 'button', onClick: handleClick, className: (0, types_1.classNames)("hover:before:opacity-100 ".concat(binClassNames), "".concat(isTextOnly
|
|
53
65
|
? ''
|
|
54
66
|
: "before:transtion-opacity group relative isolate flex items-center justify-center overflow-hidden rounded-md transition duration-300 ease-[cubic-bezier(0.4,0.36,0,1)] before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-md before:bg-gradient-to-b before:from-white/20 before:opacity-50 before:duration-300 before:ease-[cubic-bezier(0.4,0.36,0,1)] after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-md after:bg-gradient-to-b after:from-white/10 after:from-[46%] after:to-[54%] after:mix-blend-overlay shadow-[inset_0_1px_theme(colors.white/0.07),0_0.12px_0_theme(colors.gray.900/".concat(deleted || soft ? 0.1 : 0.5, ")]\n "))), disabled: loading ? true : disabled }),
|
|
55
|
-
react_1["default"].createElement("div", { className: "".concat(icon && children ? 'flex space-x-1 justify-between' : '') },
|
|
67
|
+
react_1["default"].createElement("div", { className: "".concat((icon || typeIcon) && children ? 'flex space-x-1 justify-between' : '') },
|
|
56
68
|
loadingMarkup,
|
|
57
69
|
iconPosition === 'before' ? iconMarkup : react_1["default"].createElement(react_1["default"].Fragment, null),
|
|
58
70
|
react_1["default"].createElement("span", { className: (0, types_1.classNames)(loading ? 'invisible' : '', deleted ? 'flex items-center' : '') },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;AAAA,qDAAuC;AACvC,4EAAuD;AACvD,gFAA2D;AAC3D,yDAAuD;AACvD,kCAAiD;AACjD,+EAAqE;AACrE,2CAAoD;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
exports.__esModule = true;
|
|
3
3
|
var tslib_1 = require("tslib");
|
|
4
4
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
5
|
+
var Button_1 = require("../Button");
|
|
5
6
|
var defaultDaysOfWeek = ['Chủ nhật', 'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7'];
|
|
6
7
|
var PHXTabDate = function (_a) {
|
|
7
8
|
var _b = _a.daysOfWeek, daysOfWeek = _b === void 0 ? defaultDaysOfWeek : _b, onChangeTime = _a.onChangeTime, timelineProp = _a.timeline, _c = _a.windowSize, windowSize = _c === void 0 ? 8 : _c;
|
|
@@ -23,16 +24,17 @@ var PHXTabDate = function (_a) {
|
|
|
23
24
|
}
|
|
24
25
|
var today = new Date();
|
|
25
26
|
var past = getPreviousDays(today, 30);
|
|
27
|
+
// hôm nay vẫn giữ thứ
|
|
28
|
+
var todayDayOfWeek = today.getDay();
|
|
26
29
|
past.push({
|
|
27
|
-
title:
|
|
30
|
+
title: daysOfWeek[todayDayOfWeek],
|
|
28
31
|
date: "".concat(today.getDate(), "/").concat(today.getMonth() + 1),
|
|
29
32
|
time: today
|
|
30
33
|
});
|
|
31
34
|
return past;
|
|
32
35
|
};
|
|
33
36
|
var timeline = timelineProp || buildDefaultTimeline();
|
|
34
|
-
//
|
|
35
|
-
var todayIndex = timeline.findIndex(function (t) { return t.title === 'Hôm nay'; });
|
|
37
|
+
var todayIndex = timeline.findIndex(function (t) { return t.time.toDateString() === new Date().toDateString(); }); // dùng date thực sự để tìm hôm nay
|
|
36
38
|
var initialStartIndex = Math.max(todayIndex - (windowSize - 1), 0);
|
|
37
39
|
var _d = (0, react_1.useState)(initialStartIndex), startIndex = _d[0], setStartIndex = _d[1];
|
|
38
40
|
var _e = (0, react_1.useState)(todayIndex), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
@@ -53,27 +55,44 @@ var PHXTabDate = function (_a) {
|
|
|
53
55
|
setStartIndex(function (prev) { return prev + 1; });
|
|
54
56
|
}
|
|
55
57
|
};
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
react_1["default"].createElement("
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
58
|
+
var handleClickToday = function () {
|
|
59
|
+
// set lại activeIndex về hôm nay
|
|
60
|
+
setActiveIndex(todayIndex);
|
|
61
|
+
// tính lại startIndex
|
|
62
|
+
var newStartIndex = Math.max(todayIndex - (windowSize - 1), 0);
|
|
63
|
+
setStartIndex(newStartIndex);
|
|
64
|
+
onChangeTime === null || onChangeTime === void 0 ? void 0 : onChangeTime(new Date());
|
|
65
|
+
};
|
|
66
|
+
return (react_1["default"].createElement("div", null,
|
|
67
|
+
react_1["default"].createElement(Button_1.PHXButton, { iconPosition: 'before', onClick: handleClickToday, secondary: true, size: 'extra-micro', typeIcon: 'calendar', className: 'mb-3' }, "H\u00F4m nay"),
|
|
68
|
+
react_1["default"].createElement("div", { className: 'flex w-full overflow-x-auto xl:overflow-x-visible items-center' },
|
|
69
|
+
react_1["default"].createElement("button", { className: '\n mr-1 flex h-[80px] w-[40px] flex-shrink-0 items-center justify-center \n rounded-lg border border-gray-300 bg-white hover:bg-gray-200\n disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400\n ',
|
|
70
|
+
// chỉ check startIndex === 0 để disable
|
|
71
|
+
disabled: startIndex === 0, onClick: handlePrevClick },
|
|
72
|
+
react_1["default"].createElement("svg", { fill: 'none', height: '24', stroke: 'currentColor', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
73
|
+
react_1["default"].createElement("path", { d: 'M15 18L9 12L15 6', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2' }))),
|
|
74
|
+
react_1["default"].createElement("div", { className: 'flex flex-1' }, visibleDays.map(function (item, index) {
|
|
75
|
+
var globalIndex = startIndex + index;
|
|
76
|
+
var isActive = activeIndex === globalIndex;
|
|
77
|
+
// xác định hôm nay
|
|
78
|
+
var isToday = new Date(item.time).toDateString() === new Date().toDateString();
|
|
79
|
+
return (react_1["default"].createElement("div", { key: globalIndex, className: 'min-w-[120px] flex-shrink-0 sm:flex-1 xl:min-w-0' },
|
|
80
|
+
react_1["default"].createElement("button", { className: "".concat(index === 0 && 'rounded-l-lg border-l', " \n ").concat(index === visibleDays.length - 1 && 'rounded-r-lg', " \n ").concat(
|
|
81
|
+
// chỉ áp dụng shadow/bg-gray-100 khi active mà KHÔNG phải hôm nay
|
|
82
|
+
isActive && !isToday
|
|
83
|
+
? 'h-[80px] !border-b-gray-200 !bg-gray-100 !shadow-[inset_0px_2px_1px_0px_rgba(26,26,26,0.2),inset_1px_0px_1px_0px_rgba(26,26,26,0.12)] !ring-0'
|
|
84
|
+
: '', "\n h-[80px] w-full border-b border-r border-t border-gray-300 bg-white px-3 py-2 hover:bg-gray-100"), onClick: function () {
|
|
85
|
+
setActiveIndex(globalIndex);
|
|
86
|
+
onChangeTime === null || onChangeTime === void 0 ? void 0 : onChangeTime(item.time);
|
|
87
|
+
} }, isToday ? (react_1["default"].createElement("div", { className: 'flex h-full w-full flex-col items-center justify-center rounded-lg bg-gray-900 text-white' },
|
|
88
|
+
react_1["default"].createElement("span", { className: 'text-sm' }, item.title),
|
|
89
|
+
react_1["default"].createElement("p", { className: 'text-base font-medium' }, item.date))) : (react_1["default"].createElement("div", { className: 'flex h-full w-full flex-col items-center justify-center' },
|
|
90
|
+
react_1["default"].createElement("span", { className: 'text-sm text-gray-600' }, item.title),
|
|
91
|
+
react_1["default"].createElement("p", { className: 'text-base font-medium text-gray-900' }, item.date))))));
|
|
92
|
+
})),
|
|
93
|
+
startIndex !== initialStartIndex && (react_1["default"].createElement("button", { className: 'ml-1 flex h-[80px] w-[40px] flex-shrink-0 items-center justify-center \n rounded-lg border border-gray-300 bg-white hover:bg-gray-200', onClick: handleNextClick },
|
|
94
|
+
react_1["default"].createElement("svg", { fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
95
|
+
react_1["default"].createElement("path", { d: 'M9 18L15 12L9 6', stroke: '#4A4A4A', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2' })))))));
|
|
77
96
|
};
|
|
78
97
|
exports["default"] = PHXTabDate;
|
|
79
98
|
//# sourceMappingURL=PHXTabDate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PHXTabDate.js","sourceRoot":"","sources":["../../../../src/components/TabDate/PHXTabDate.tsx"],"names":[],"mappings":";;;AAAA,qDAAuC;
|
|
1
|
+
{"version":3,"file":"PHXTabDate.js","sourceRoot":"","sources":["../../../../src/components/TabDate/PHXTabDate.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import * as SolidIcons from '@heroicons/react/24/solid';
|
|
|
3
3
|
import * as OutlineIcons from '@heroicons/react/24/outline';
|
|
4
4
|
import { BaseButton } from '../types';
|
|
5
5
|
export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons;
|
|
6
|
+
declare const typeIconMap: Record<string, keyof typeof SolidIcons>;
|
|
6
7
|
export interface ButtonProps extends BaseButton {
|
|
7
8
|
primary?: boolean;
|
|
8
9
|
secondary?: boolean;
|
|
@@ -28,5 +29,7 @@ export interface ButtonProps extends BaseButton {
|
|
|
28
29
|
iconOutline?: boolean;
|
|
29
30
|
iconPosition?: 'before' | 'after';
|
|
30
31
|
style?: any;
|
|
32
|
+
typeIcon?: keyof typeof typeIconMap;
|
|
31
33
|
}
|
|
32
|
-
export declare const PHXButton: ({ primary, secondary, danger, danger2, plain, tertiary, plainCritical, primaryCritical, split, options, soft, deleted, deletedButton, rounded, submit, size, children, icon, iconClassName, iconOutline, iconPosition, disabled, loading, id, onClick, className, style, }: ButtonProps) => React.JSX.Element;
|
|
34
|
+
export declare const PHXButton: ({ primary, secondary, danger, danger2, plain, tertiary, plainCritical, primaryCritical, split, options, soft, deleted, deletedButton, rounded, submit, size, children, icon, iconClassName, iconOutline, iconPosition, disabled, loading, id, onClick, className, style, typeIcon, }: ButtonProps) => React.JSX.Element;
|
|
35
|
+
export {};
|
|
@@ -6,12 +6,24 @@ import { IconLoading } from '../../commons/IconLoading';
|
|
|
6
6
|
import { classNames } from '../types';
|
|
7
7
|
import { useDisableClick } from '../../utils/use-disable-interaction';
|
|
8
8
|
import { Menu, Transition } from '@headlessui/react';
|
|
9
|
+
// ánh xạ typeIcon -> tên icon
|
|
10
|
+
var typeIconMap = {
|
|
11
|
+
calendar: 'CalendarDaysIcon'
|
|
12
|
+
};
|
|
9
13
|
export var PHXButton = function (_a) {
|
|
10
|
-
var primary = _a.primary, secondary = _a.secondary, danger = _a.danger, danger2 = _a.danger2, plain = _a.plain, tertiary = _a.tertiary, plainCritical = _a.plainCritical, primaryCritical = _a.primaryCritical, split = _a.split, options = _a.options, soft = _a.soft, deleted = _a.deleted, _b = _a.deletedButton, deletedButton = _b === void 0 ? true : _b, rounded = _a.rounded, submit = _a.submit, _c = _a.size, size = _c === void 0 ? 'medium' : _c, children = _a.children, icon = _a.icon, iconClassName = _a.iconClassName, _d = _a.iconOutline, iconOutline = _d === void 0 ? false : _d, _e = _a.iconPosition, iconPosition = _e === void 0 ? 'before' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, id = _a.id, onClick = _a.onClick, className = _a.className, style = _a.style;
|
|
14
|
+
var primary = _a.primary, secondary = _a.secondary, danger = _a.danger, danger2 = _a.danger2, plain = _a.plain, tertiary = _a.tertiary, plainCritical = _a.plainCritical, primaryCritical = _a.primaryCritical, split = _a.split, options = _a.options, soft = _a.soft, deleted = _a.deleted, _b = _a.deletedButton, deletedButton = _b === void 0 ? true : _b, rounded = _a.rounded, submit = _a.submit, _c = _a.size, size = _c === void 0 ? 'medium' : _c, children = _a.children, icon = _a.icon, iconClassName = _a.iconClassName, _d = _a.iconOutline, iconOutline = _d === void 0 ? false : _d, _e = _a.iconPosition, iconPosition = _e === void 0 ? 'before' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, id = _a.id, onClick = _a.onClick, className = _a.className, style = _a.style, typeIcon = _a.typeIcon;
|
|
11
15
|
var Icon;
|
|
12
16
|
if (icon) {
|
|
17
|
+
// nếu truyền thẳng tên icon
|
|
13
18
|
Icon = iconOutline ? OutlineIcons[icon] : SolidIcons[icon];
|
|
14
19
|
}
|
|
20
|
+
else if (typeIcon) {
|
|
21
|
+
// lấy tên icon theo typeIcon
|
|
22
|
+
var iconName = typeIconMap[typeIcon];
|
|
23
|
+
if (iconName) {
|
|
24
|
+
Icon = iconOutline ? OutlineIcons[iconName] : SolidIcons[iconName];
|
|
25
|
+
}
|
|
26
|
+
}
|
|
15
27
|
var commonProps = {
|
|
16
28
|
id: id,
|
|
17
29
|
onClick: onClick
|
|
@@ -38,8 +50,8 @@ export var PHXButton = function (_a) {
|
|
|
38
50
|
"bg-indigo-50 font-normal text-red-700 shadow-sm ".concat(!disabled ? 'hover:bg-indigo-100 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' : ''), rounded && 'rounded-full', soft &&
|
|
39
51
|
"bg-indigo-50 font-normal text-gray-700 shadow-sm ".concat(!disabled ? 'hover:bg-indigo-100 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' : ''), size === 'micro' && isNew && "px-2 py-1 text-xs ".concat(!disabled ? 'active:pt-[0.3rem] active:pb-[0.2rem]' : ''), size === 'small' && isNew && "px-2.5 py-1.5 text-xs ".concat(!disabled ? 'active:pt-[0.45rem] active:pb-[0.3rem]' : ''), size === 'medium' && isNew && "px-2.5 py-1.5 text-sm ".concat(!disabled ? 'active:pt-[0.45rem] active:pb-[0.3rem]' : ''), size === 'large' && isNew && "px-3 py-2 text-sm ".concat(!disabled ? 'active:pt-[0.55rem] active:pb-[0.45rem]' : ''), size === 'extra-large' &&
|
|
40
52
|
isNew &&
|
|
41
|
-
"px-3.5 py-2.5 text-sm ".concat(!disabled ? 'active:pt-[0.7rem] active:pb-[0.55rem]' : ''), size === 'micro' && "px-2 py-1 text-xs ", size === 'small' && "px-2.5 py-1.5 text-xs ", size === 'extra-micro' && "px-1.5 py-1 text-xs ", size === 'medium' && "px-2.5 py-1.5 text-sm ", size === 'large' && "px-3 py-2 text-sm ", size === 'extra-large' && "px-3.5 py-2.5 text-sm ", 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', disabled && 'opacity-30 cursor-default', className);
|
|
42
|
-
var iconClass = classNames(icon && iconPosition === 'before' && size !== 'extra-micro' && 'h-5 w-5', icon && iconPosition === 'after' && size !== 'extra-micro' && 'h-5 w-5', icon && iconPosition === 'before' && size === 'extra-micro' && 'h-4 w-4', icon && iconPosition === 'after' && size === 'extra-micro' && 'h-4 w-4', iconClassName);
|
|
53
|
+
"px-3.5 py-2.5 text-sm ".concat(!disabled ? 'active:pt-[0.7rem] active:pb-[0.55rem]' : ''), size === 'micro' && "px-2 py-1 text-xs ", size === 'small' && "px-2.5 py-1.5 text-xs ", size === 'extra-micro' && "px-1.5 py-1 text-xs ", size === 'medium' && "px-2.5 py-1.5 text-sm ", size === 'large' && "px-3 py-2 text-sm ", size === 'extra-large' && "px-3.5 py-2.5 text-sm ", (icon || typeIcon) && (size === 'medium' || size === 'large') && 'inline-flex items-center gap-x-1.5', (icon || typeIcon) && size === 'extra-large' && 'inline-flex items-center gap-x-2', loading && 'opacity-30', 'relative', disabled && 'opacity-30 cursor-default', className);
|
|
54
|
+
var iconClass = classNames((icon || typeIcon) && iconPosition === 'before' && size !== 'extra-micro' && 'h-5 w-5', (icon || typeIcon) && iconPosition === 'after' && size !== 'extra-micro' && 'h-5 w-5', (icon || typeIcon) && iconPosition === 'before' && size === 'extra-micro' && 'h-4 w-4', (icon || typeIcon) && iconPosition === 'after' && size === 'extra-micro' && 'h-4 w-4', iconClassName);
|
|
43
55
|
// Icon markup
|
|
44
56
|
var iconMarkup = Icon && React.createElement(Icon, { className: iconClass });
|
|
45
57
|
// Loading markup
|
|
@@ -49,7 +61,7 @@ export var PHXButton = function (_a) {
|
|
|
49
61
|
React.createElement("button", __assign({ style: style }, interactiveProps, { type: submit ? 'submit' : 'button', onClick: handleClick, className: classNames("hover:before:opacity-100 ".concat(binClassNames), "".concat(isTextOnly
|
|
50
62
|
? ''
|
|
51
63
|
: "before:transtion-opacity group relative isolate flex items-center justify-center overflow-hidden rounded-md transition duration-300 ease-[cubic-bezier(0.4,0.36,0,1)] before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-md before:bg-gradient-to-b before:from-white/20 before:opacity-50 before:duration-300 before:ease-[cubic-bezier(0.4,0.36,0,1)] after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-md after:bg-gradient-to-b after:from-white/10 after:from-[46%] after:to-[54%] after:mix-blend-overlay shadow-[inset_0_1px_theme(colors.white/0.07),0_0.12px_0_theme(colors.gray.900/".concat(deleted || soft ? 0.1 : 0.5, ")]\n "))), disabled: loading ? true : disabled }),
|
|
52
|
-
React.createElement("div", { className: "".concat(icon && children ? 'flex space-x-1 justify-between' : '') },
|
|
64
|
+
React.createElement("div", { className: "".concat((icon || typeIcon) && children ? 'flex space-x-1 justify-between' : '') },
|
|
53
65
|
loadingMarkup,
|
|
54
66
|
iconPosition === 'before' ? iconMarkup : React.createElement(React.Fragment, null),
|
|
55
67
|
React.createElement("span", { className: classNames(loading ? 'invisible' : '', deleted ? 'flex items-center' : '') },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,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;AACrE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
|
+
import { PHXButton } from '../Button';
|
|
2
3
|
var defaultDaysOfWeek = ['Chủ nhật', 'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7'];
|
|
3
4
|
var PHXTabDate = function (_a) {
|
|
4
5
|
var _b = _a.daysOfWeek, daysOfWeek = _b === void 0 ? defaultDaysOfWeek : _b, onChangeTime = _a.onChangeTime, timelineProp = _a.timeline, _c = _a.windowSize, windowSize = _c === void 0 ? 8 : _c;
|
|
@@ -20,16 +21,17 @@ var PHXTabDate = function (_a) {
|
|
|
20
21
|
}
|
|
21
22
|
var today = new Date();
|
|
22
23
|
var past = getPreviousDays(today, 30);
|
|
24
|
+
// hôm nay vẫn giữ thứ
|
|
25
|
+
var todayDayOfWeek = today.getDay();
|
|
23
26
|
past.push({
|
|
24
|
-
title:
|
|
27
|
+
title: daysOfWeek[todayDayOfWeek],
|
|
25
28
|
date: "".concat(today.getDate(), "/").concat(today.getMonth() + 1),
|
|
26
29
|
time: today
|
|
27
30
|
});
|
|
28
31
|
return past;
|
|
29
32
|
};
|
|
30
33
|
var timeline = timelineProp || buildDefaultTimeline();
|
|
31
|
-
//
|
|
32
|
-
var todayIndex = timeline.findIndex(function (t) { return t.title === 'Hôm nay'; });
|
|
34
|
+
var todayIndex = timeline.findIndex(function (t) { return t.time.toDateString() === new Date().toDateString(); }); // dùng date thực sự để tìm hôm nay
|
|
33
35
|
var initialStartIndex = Math.max(todayIndex - (windowSize - 1), 0);
|
|
34
36
|
var _d = useState(initialStartIndex), startIndex = _d[0], setStartIndex = _d[1];
|
|
35
37
|
var _e = useState(todayIndex), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
@@ -50,27 +52,44 @@ var PHXTabDate = function (_a) {
|
|
|
50
52
|
setStartIndex(function (prev) { return prev + 1; });
|
|
51
53
|
}
|
|
52
54
|
};
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
React.createElement("
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
55
|
+
var handleClickToday = function () {
|
|
56
|
+
// set lại activeIndex về hôm nay
|
|
57
|
+
setActiveIndex(todayIndex);
|
|
58
|
+
// tính lại startIndex
|
|
59
|
+
var newStartIndex = Math.max(todayIndex - (windowSize - 1), 0);
|
|
60
|
+
setStartIndex(newStartIndex);
|
|
61
|
+
onChangeTime === null || onChangeTime === void 0 ? void 0 : onChangeTime(new Date());
|
|
62
|
+
};
|
|
63
|
+
return (React.createElement("div", null,
|
|
64
|
+
React.createElement(PHXButton, { iconPosition: 'before', onClick: handleClickToday, secondary: true, size: 'extra-micro', typeIcon: 'calendar', className: 'mb-3' }, "H\u00F4m nay"),
|
|
65
|
+
React.createElement("div", { className: 'flex w-full overflow-x-auto xl:overflow-x-visible items-center' },
|
|
66
|
+
React.createElement("button", { className: '\n mr-1 flex h-[80px] w-[40px] flex-shrink-0 items-center justify-center \n rounded-lg border border-gray-300 bg-white hover:bg-gray-200\n disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400\n ',
|
|
67
|
+
// chỉ check startIndex === 0 để disable
|
|
68
|
+
disabled: startIndex === 0, onClick: handlePrevClick },
|
|
69
|
+
React.createElement("svg", { fill: 'none', height: '24', stroke: 'currentColor', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
70
|
+
React.createElement("path", { d: 'M15 18L9 12L15 6', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2' }))),
|
|
71
|
+
React.createElement("div", { className: 'flex flex-1' }, visibleDays.map(function (item, index) {
|
|
72
|
+
var globalIndex = startIndex + index;
|
|
73
|
+
var isActive = activeIndex === globalIndex;
|
|
74
|
+
// xác định hôm nay
|
|
75
|
+
var isToday = new Date(item.time).toDateString() === new Date().toDateString();
|
|
76
|
+
return (React.createElement("div", { key: globalIndex, className: 'min-w-[120px] flex-shrink-0 sm:flex-1 xl:min-w-0' },
|
|
77
|
+
React.createElement("button", { className: "".concat(index === 0 && 'rounded-l-lg border-l', " \n ").concat(index === visibleDays.length - 1 && 'rounded-r-lg', " \n ").concat(
|
|
78
|
+
// chỉ áp dụng shadow/bg-gray-100 khi active mà KHÔNG phải hôm nay
|
|
79
|
+
isActive && !isToday
|
|
80
|
+
? 'h-[80px] !border-b-gray-200 !bg-gray-100 !shadow-[inset_0px_2px_1px_0px_rgba(26,26,26,0.2),inset_1px_0px_1px_0px_rgba(26,26,26,0.12)] !ring-0'
|
|
81
|
+
: '', "\n h-[80px] w-full border-b border-r border-t border-gray-300 bg-white px-3 py-2 hover:bg-gray-100"), onClick: function () {
|
|
82
|
+
setActiveIndex(globalIndex);
|
|
83
|
+
onChangeTime === null || onChangeTime === void 0 ? void 0 : onChangeTime(item.time);
|
|
84
|
+
} }, isToday ? (React.createElement("div", { className: 'flex h-full w-full flex-col items-center justify-center rounded-lg bg-gray-900 text-white' },
|
|
85
|
+
React.createElement("span", { className: 'text-sm' }, item.title),
|
|
86
|
+
React.createElement("p", { className: 'text-base font-medium' }, item.date))) : (React.createElement("div", { className: 'flex h-full w-full flex-col items-center justify-center' },
|
|
87
|
+
React.createElement("span", { className: 'text-sm text-gray-600' }, item.title),
|
|
88
|
+
React.createElement("p", { className: 'text-base font-medium text-gray-900' }, item.date))))));
|
|
89
|
+
})),
|
|
90
|
+
startIndex !== initialStartIndex && (React.createElement("button", { className: 'ml-1 flex h-[80px] w-[40px] flex-shrink-0 items-center justify-center \n rounded-lg border border-gray-300 bg-white hover:bg-gray-200', onClick: handleNextClick },
|
|
91
|
+
React.createElement("svg", { fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
92
|
+
React.createElement("path", { d: 'M9 18L15 12L9 6', stroke: '#4A4A4A', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2' })))))));
|
|
74
93
|
};
|
|
75
94
|
export default PHXTabDate;
|
|
76
95
|
//# sourceMappingURL=PHXTabDate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PHXTabDate.js","sourceRoot":"","sources":["../../../../src/components/TabDate/PHXTabDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"PHXTabDate.js","sourceRoot":"","sources":["../../../../src/components/TabDate/PHXTabDate.tsx"],"names":[],"mappings":"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"}
|