@skalfa/skalfa-component 1.0.0 → 1.0.2
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/index.js +175 -56
- package/dist/input/InputCheckbox.component.js +2 -2
- package/dist/input/InputDate.component.js +5 -3
- package/dist/input/InputDatetime.component.js +13 -8
- package/dist/input/InputDocument.component.js +6 -4
- package/dist/input/InputImage.component.js +5 -3
- package/dist/input/InputMap.component.js +5 -3
- package/dist/input/InputRadio.component.js +2 -2
- package/dist/input/InputTime.component.js +5 -3
- package/dist/modal/FloatingPage.component.js +2 -2
- package/dist/modal/Modal.component.js +2 -2
- package/dist/modal/ModalConfirm.component.d.ts +1 -1
- package/dist/modal/ModalConfirm.component.js +5 -3
- package/dist/modal/Toast.component.js +2 -2
- package/dist/nav/Headbar.component.js +3 -2
- package/dist/nav/Navbar.component.js +2 -2
- package/dist/supervision/FormSupervision.component.d.ts +13 -1
- package/dist/supervision/FormSupervision.component.js +32 -17
- package/dist/supervision/TableSupervision.component.d.ts +6 -1
- package/dist/supervision/TableSupervision.component.js +25 -19
- package/dist/table/ControlBar.component.d.ts +1 -1
- package/dist/table/ControlBar.component.js +20 -14
- package/dist/table/FilterComponent.js +24 -17
- package/dist/table/Pagination.component.js +4 -3
- package/dist/table/Table.component.d.ts +3 -1
- package/dist/table/Table.component.js +11 -7
- package/dist/wrap/ShortcutProvider.js +2 -2
- package/package.json +3 -2
package/dist/index.js
CHANGED
|
@@ -14,62 +14,181 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
17
|
+
// Static export for ./accordion/Accordion.component
|
|
18
|
+
exports.AccordionComponent = require("./accordion/Accordion.component").AccordionComponent;
|
|
19
|
+
|
|
20
|
+
// Static export for ./breadcrumb/Breadcrumb.component
|
|
21
|
+
exports.BreadcrumbComponent = require("./breadcrumb/Breadcrumb.component").BreadcrumbComponent;
|
|
22
|
+
|
|
23
|
+
// Static export for ./button/Button.component
|
|
24
|
+
exports.ButtonComponent = require("./button/Button.component").ButtonComponent;
|
|
25
|
+
|
|
26
|
+
// Static export for ./card/AlertCard.component
|
|
27
|
+
exports.AlertCardComponent = require("./card/AlertCard.component").AlertCardComponent;
|
|
28
|
+
|
|
29
|
+
// Static export for ./card/Card.component
|
|
30
|
+
exports.CardComponent = require("./card/Card.component").CardComponent;
|
|
31
|
+
|
|
32
|
+
// Static export for ./card/DashboardCard.component
|
|
33
|
+
exports.DashboardCardComponent = require("./card/DashboardCard.component").DashboardCardComponent;
|
|
34
|
+
|
|
35
|
+
// Static export for ./card/GalleryCard.component
|
|
36
|
+
exports.GalleryCardComponent = require("./card/GalleryCard.component").GalleryCardComponent;
|
|
37
|
+
|
|
38
|
+
// Static export for ./card/ProductCard.component
|
|
39
|
+
exports.ProductCardComponent = require("./card/ProductCard.component").ProductCardComponent;
|
|
40
|
+
|
|
41
|
+
// Static export for ./card/ProfileCard.component
|
|
42
|
+
exports.ProfileCardComponent = require("./card/ProfileCard.component").ProfileCardComponent;
|
|
43
|
+
|
|
44
|
+
// Static export for ./carousel/Carousel.component
|
|
45
|
+
exports.CarouselComponent = require("./carousel/Carousel.component").CarouselComponent;
|
|
46
|
+
|
|
47
|
+
// Static export for ./chip/Chip.component
|
|
48
|
+
exports.ChipComponent = require("./chip/Chip.component").ChipComponent;
|
|
49
|
+
|
|
50
|
+
// Static export for ./input/Checkbox.component
|
|
51
|
+
exports.CheckboxComponent = require("./input/Checkbox.component").CheckboxComponent;
|
|
52
|
+
|
|
53
|
+
// Static export for ./input/Input.component
|
|
54
|
+
exports.InputComponent = require("./input/Input.component").InputComponent;
|
|
55
|
+
|
|
56
|
+
// Static export for ./input/InputCheckbox.component
|
|
57
|
+
exports.InputCheckboxComponent = require("./input/InputCheckbox.component").InputCheckboxComponent;
|
|
58
|
+
|
|
59
|
+
// Static export for ./input/InputCurrency.component
|
|
60
|
+
exports.InputCurrencyComponent = require("./input/InputCurrency.component").InputCurrencyComponent;
|
|
61
|
+
|
|
62
|
+
// Static export for ./input/InputDate.component
|
|
63
|
+
exports.InputDatePickerComponent = require("./input/InputDate.component").InputDatePickerComponent;
|
|
64
|
+
exports.InputDateComponent = require("./input/InputDate.component").InputDateComponent;
|
|
65
|
+
|
|
66
|
+
// Static export for ./input/InputDatetime.component
|
|
67
|
+
exports.InputDatetimeComponent = require("./input/InputDatetime.component").InputDatetimeComponent;
|
|
68
|
+
|
|
69
|
+
// Static export for ./input/InputDocument.component
|
|
70
|
+
exports.InputDocumentPicker = require("./input/InputDocument.component").InputDocumentPicker;
|
|
71
|
+
exports.InputDocumentComponent = require("./input/InputDocument.component").InputDocumentComponent;
|
|
72
|
+
|
|
73
|
+
// Static export for ./input/InputImage.component
|
|
74
|
+
exports.InputImageComponent = require("./input/InputImage.component").InputImageComponent;
|
|
75
|
+
exports.CanvasCropper = require("./input/InputImage.component").CanvasCropper;
|
|
76
|
+
|
|
77
|
+
// Static export for ./input/InputMap.component
|
|
78
|
+
exports.InputMapPickerComponent = require("./input/InputMap.component").InputMapPickerComponent;
|
|
79
|
+
exports.InputMapComponent = require("./input/InputMap.component").InputMapComponent;
|
|
80
|
+
|
|
81
|
+
// Static export for ./input/InputNumber.component
|
|
82
|
+
exports.InputNumberComponent = require("./input/InputNumber.component").InputNumberComponent;
|
|
83
|
+
|
|
84
|
+
// Static export for ./input/InputOtp.component
|
|
85
|
+
exports.InputOtpComponent = require("./input/InputOtp.component").InputOtpComponent;
|
|
86
|
+
|
|
87
|
+
// Static export for ./input/InputPassword.component
|
|
88
|
+
exports.InputPasswordComponent = require("./input/InputPassword.component").InputPasswordComponent;
|
|
89
|
+
|
|
90
|
+
// Static export for ./input/InputRadio.component
|
|
91
|
+
exports.InputRadioComponent = require("./input/InputRadio.component").InputRadioComponent;
|
|
92
|
+
|
|
93
|
+
// Static export for ./input/InputTime.component
|
|
94
|
+
exports.InputTimePickerComponent = require("./input/InputTime.component").InputTimePickerComponent;
|
|
95
|
+
exports.InputTimeComponent = require("./input/InputTime.component").InputTimeComponent;
|
|
96
|
+
|
|
97
|
+
// Static export for ./input/InputValues.component
|
|
98
|
+
exports.InputValues = require("./input/InputValues.component").InputValues;
|
|
99
|
+
|
|
100
|
+
// Static export for ./input/Radio.component
|
|
101
|
+
exports.RadioComponent = require("./input/Radio.component").RadioComponent;
|
|
102
|
+
|
|
103
|
+
// Static export for ./input/Select.component
|
|
104
|
+
exports.SelectComponent = require("./input/Select.component").SelectComponent;
|
|
105
|
+
|
|
106
|
+
// Static export for ./modal/BottomSheet.component
|
|
107
|
+
exports.BottomSheetComponent = require("./modal/BottomSheet.component").BottomSheetComponent;
|
|
108
|
+
|
|
109
|
+
// Static export for ./modal/FloatingPage.component
|
|
110
|
+
exports.FloatingPageComponent = require("./modal/FloatingPage.component").FloatingPageComponent;
|
|
111
|
+
|
|
112
|
+
// Static export for ./modal/Modal.component
|
|
113
|
+
exports.ModalComponent = require("./modal/Modal.component").ModalComponent;
|
|
114
|
+
|
|
115
|
+
// Static export for ./modal/ModalConfirm.component
|
|
116
|
+
exports.ModalConfirmComponent = require("./modal/ModalConfirm.component").ModalConfirmComponent;
|
|
117
|
+
|
|
118
|
+
// Static export for ./modal/Toast.component
|
|
119
|
+
exports.ToastComponent = require("./modal/Toast.component").ToastComponent;
|
|
120
|
+
|
|
121
|
+
// Static export for ./nav/Bottombar.component
|
|
122
|
+
exports.BottombarComponent = require("./nav/Bottombar.component").BottombarComponent;
|
|
123
|
+
|
|
124
|
+
// Static export for ./nav/Footer.component
|
|
125
|
+
exports.FooterComponent = require("./nav/Footer.component").FooterComponent;
|
|
126
|
+
|
|
127
|
+
// Static export for ./nav/Headbar.component
|
|
128
|
+
exports.HeadbarComponent = require("./nav/Headbar.component").HeadbarComponent;
|
|
129
|
+
|
|
130
|
+
// Static export for ./nav/Navbar.component
|
|
131
|
+
exports.NavbarComponent = require("./nav/Navbar.component").NavbarComponent;
|
|
132
|
+
|
|
133
|
+
// Static export for ./nav/Sidebar.component
|
|
134
|
+
exports.SidebarComponent = require("./nav/Sidebar.component").SidebarComponent;
|
|
135
|
+
exports.SidebarContentComponent = require("./nav/Sidebar.component").SidebarContentComponent;
|
|
136
|
+
|
|
137
|
+
// Static export for ./nav/Tabbar.component
|
|
138
|
+
exports.TabbarComponent = require("./nav/Tabbar.component").TabbarComponent;
|
|
139
|
+
|
|
140
|
+
// Static export for ./nav/Wizard.component
|
|
141
|
+
exports.WizardComponent = require("./nav/Wizard.component").WizardComponent;
|
|
142
|
+
|
|
143
|
+
// Static export for ./supervision/FormSupervision.component
|
|
144
|
+
exports.FormSupervisionComponent = require("./supervision/FormSupervision.component").FormSupervisionComponent;
|
|
145
|
+
|
|
146
|
+
// Static export for ./supervision/TableSupervision.component
|
|
147
|
+
exports.TableSupervisionComponent = require("./supervision/TableSupervision.component").TableSupervisionComponent;
|
|
148
|
+
|
|
149
|
+
// Static export for ./table/ControlBar.component
|
|
150
|
+
exports.ControlBarComponent = require("./table/ControlBar.component").ControlBarComponent;
|
|
151
|
+
|
|
152
|
+
// Static export for ./table/FilterComponent
|
|
153
|
+
exports.FilterComponent = require("./table/FilterComponent").FilterComponent;
|
|
154
|
+
exports.InputFilterValueComponent = require("./table/FilterComponent").InputFilterValueComponent;
|
|
155
|
+
|
|
156
|
+
// Static export for ./table/Pagination.component
|
|
157
|
+
exports.PaginationComponent = require("./table/Pagination.component").PaginationComponent;
|
|
158
|
+
|
|
159
|
+
// Static export for ./table/Table.component
|
|
160
|
+
exports.TableComponent = require("./table/Table.component").TableComponent;
|
|
161
|
+
|
|
162
|
+
// Static export for ./typography/TypographyArticle.component
|
|
163
|
+
exports.TypographyArticleComponent = require("./typography/TypographyArticle.component").TypographyArticleComponent;
|
|
164
|
+
|
|
165
|
+
// Static export for ./typography/TypographyColumn.component
|
|
166
|
+
exports.TypographyColumnComponent = require("./typography/TypographyColumn.component").TypographyColumnComponent;
|
|
167
|
+
|
|
168
|
+
// Static export for ./typography/TypographyContent.component
|
|
169
|
+
exports.TypographyContentComponent = require("./typography/TypographyContent.component").TypographyContentComponent;
|
|
170
|
+
|
|
171
|
+
// Static export for ./typography/TypographyTips.component
|
|
172
|
+
exports.TypographyTipsComponent = require("./typography/TypographyTips.component").TypographyTipsComponent;
|
|
173
|
+
|
|
174
|
+
// Static export for ./wrap/Draggable.component
|
|
175
|
+
exports.DraggableComponent = require("./wrap/Draggable.component").DraggableComponent;
|
|
176
|
+
|
|
177
|
+
// Static export for ./wrap/Image.component
|
|
178
|
+
exports.ImageComponent = require("./wrap/Image.component").ImageComponent;
|
|
179
|
+
|
|
180
|
+
// Static export for ./wrap/OutsideClick.component
|
|
181
|
+
exports.OutsideClickComponent = require("./wrap/OutsideClick.component").OutsideClickComponent;
|
|
182
|
+
|
|
183
|
+
// Static export for ./wrap/ScrollContainer.component
|
|
184
|
+
exports.ScrollContainerComponent = require("./wrap/ScrollContainer.component").ScrollContainerComponent;
|
|
185
|
+
|
|
186
|
+
// Static export for ./wrap/ShortcutProvider
|
|
187
|
+
exports.ShortcutProvider = require("./wrap/ShortcutProvider").ShortcutProvider;
|
|
188
|
+
|
|
189
|
+
// Static export for ./wrap/Swipe.component
|
|
190
|
+
exports.SwipeComponent = require("./wrap/Swipe.component").SwipeComponent;
|
|
191
|
+
|
|
73
192
|
const _utils_1 = require("@utils");
|
|
74
193
|
const Table_component_js_1 = require("./table/Table.component.js");
|
|
75
194
|
const Button_component_js_1 = require("./button/Button.component.js");
|
|
@@ -5,7 +5,7 @@ exports.InputCheckboxComponent = InputCheckboxComponent;
|
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const _utils_1 = require("@utils");
|
|
8
|
-
const
|
|
8
|
+
const Checkbox_component_1 = require("./Checkbox.component");
|
|
9
9
|
;
|
|
10
10
|
;
|
|
11
11
|
function InputCheckboxComponent({ name, label, tip, vertical, className = "", classNameCheckbox = "", value, disabled, invalid, options, serverOptionControl, customOptions, validations, register, unregister, onChange, }) {
|
|
@@ -42,7 +42,7 @@ function InputCheckboxComponent({ name, label, tip, vertical, className = "", cl
|
|
|
42
42
|
return (0, jsx_runtime_1.jsx)("div", { className: "w-1/3 h-6 rounded-lg" }, key);
|
|
43
43
|
}), (options || dataOptions) && (options || dataOptions)?.map((option, key) => {
|
|
44
44
|
const checked = Array().concat(inputHandler.value).find((val) => val == option.value);
|
|
45
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
45
|
+
return ((0, jsx_runtime_1.jsx)(Checkbox_component_1.CheckboxComponent, { label: option.label, name: `option[${option.value}]#${name}`, checked: !!checked, disabled: disabled, className: classNameCheckbox, onChange: () => {
|
|
46
46
|
const newVal = (Array.isArray(inputHandler.value) ? inputHandler.value : [])
|
|
47
47
|
.filter((val) => val !== option.value)
|
|
48
48
|
.concat(checked ? [] : [option.value]);
|
|
@@ -12,7 +12,9 @@ const moment_1 = __importDefault(require("moment"));
|
|
|
12
12
|
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
|
|
13
13
|
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
14
14
|
const _utils_1 = require("@utils");
|
|
15
|
-
const
|
|
15
|
+
const BottomSheet_component_1 = require("../modal/BottomSheet.component");
|
|
16
|
+
const Button_component_1 = require("../button/Button.component");
|
|
17
|
+
const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
|
|
16
18
|
function InputDateComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
|
|
17
19
|
const { isSm } = (0, _utils_1.useResponsive)();
|
|
18
20
|
// =========================>
|
|
@@ -24,7 +26,7 @@ function InputDateComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
|
|
|
24
26
|
// ## Invalid handler
|
|
25
27
|
// =========================>
|
|
26
28
|
const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
|
|
27
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), props.disabled && (0, _utils_1.pcn)(className, "label", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "label", "focus"), !!invalidMessage && (0, _utils_1.pcn)(className, "label", "error")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), props.disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsx)(
|
|
29
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), props.disabled && (0, _utils_1.pcn)(className, "label", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "label", "focus"), !!invalidMessage && (0, _utils_1.pcn)(className, "label", "error")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), props.disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: !isSm ? () => inputHandler.setFocus(false) : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, id: randomId, className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "input"), !!invalidMessage && "input-error", !!invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), value: inputHandler.value, onChange: (e) => {
|
|
28
30
|
inputHandler.setValue(e.target.value);
|
|
29
31
|
inputHandler.setValue(false);
|
|
30
32
|
onChange?.(e.target.value);
|
|
@@ -36,7 +38,7 @@ function InputDateComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
|
|
|
36
38
|
}, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-date-picker-popover", children: (0, jsx_runtime_1.jsx)(exports.InputDatePickerComponent, { onChange: (e) => {
|
|
37
39
|
inputHandler.setValue(e);
|
|
38
40
|
onChange?.(e);
|
|
39
|
-
} }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(
|
|
41
|
+
} }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 380, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }) }), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.InputDatePickerComponent, { onChange: (e) => {
|
|
40
42
|
inputHandler.setValue(e);
|
|
41
43
|
onChange?.(e);
|
|
42
44
|
} }) }) }))] }));
|
|
@@ -6,7 +6,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
|
|
8
8
|
const _utils_1 = require("@utils");
|
|
9
|
-
const
|
|
9
|
+
const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
|
|
10
|
+
const InputDate_component_1 = require("./InputDate.component");
|
|
11
|
+
const InputTime_component_1 = require("./InputTime.component");
|
|
12
|
+
const BottomSheet_component_1 = require("../modal/BottomSheet.component");
|
|
13
|
+
const Button_component_1 = require("../button/Button.component");
|
|
14
|
+
const Tabbar_component_1 = require("../nav/Tabbar.component");
|
|
10
15
|
function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
|
|
11
16
|
const { isSm } = (0, _utils_1.useResponsive)();
|
|
12
17
|
const [pickerType, setPickerType] = (0, react_1.useState)("date");
|
|
@@ -38,10 +43,10 @@ function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invali
|
|
|
38
43
|
inputHandler.setValue(newVal.trim());
|
|
39
44
|
onChange?.(newVal.trim());
|
|
40
45
|
};
|
|
41
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsx)(
|
|
46
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: !isSm ? () => inputHandler.setFocus(false) : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, id: randomId, readOnly: true, className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "input"), !!invalidMessage && "input-error"), value: inputHandler.value, onFocus: (e) => {
|
|
42
47
|
props.onFocus?.(e);
|
|
43
48
|
inputHandler.setFocus(true);
|
|
44
|
-
}, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "input-datetime-picker-popover", children: [(0, jsx_runtime_1.jsx)(
|
|
49
|
+
}, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "input-datetime-picker-popover", children: [(0, jsx_runtime_1.jsx)(Tabbar_component_1.TabbarComponent, { items: [
|
|
45
50
|
{
|
|
46
51
|
label: "Tanggal",
|
|
47
52
|
value: 'date'
|
|
@@ -50,13 +55,13 @@ function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invali
|
|
|
50
55
|
label: "Jam",
|
|
51
56
|
value: 'time'
|
|
52
57
|
},
|
|
53
|
-
], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(
|
|
58
|
+
], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(InputDate_component_1.InputDatePickerComponent, { onChange: (e) => {
|
|
54
59
|
setDateValue(e);
|
|
55
60
|
handleChange(e, timeValue);
|
|
56
|
-
} })) : ((0, jsx_runtime_1.jsx)(
|
|
61
|
+
} })) : ((0, jsx_runtime_1.jsx)(InputTime_component_1.InputTimePickerComponent, { onChange: (e) => {
|
|
57
62
|
setTimeValue(e);
|
|
58
63
|
handleChange(dateValue, e);
|
|
59
|
-
} }))] }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(
|
|
64
|
+
} }))] }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 430, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }) }), children: (0, jsx_runtime_1.jsxs)("div", { className: "p-4", children: [(0, jsx_runtime_1.jsx)(Tabbar_component_1.TabbarComponent, { items: [
|
|
60
65
|
{
|
|
61
66
|
label: "Tanggal",
|
|
62
67
|
value: 'date'
|
|
@@ -65,10 +70,10 @@ function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invali
|
|
|
65
70
|
label: "Jam",
|
|
66
71
|
value: 'time'
|
|
67
72
|
},
|
|
68
|
-
], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(
|
|
73
|
+
], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(InputDate_component_1.InputDatePickerComponent, { onChange: (e) => {
|
|
69
74
|
setDateValue(e);
|
|
70
75
|
handleChange(e, timeValue);
|
|
71
|
-
} })) : ((0, jsx_runtime_1.jsx)(
|
|
76
|
+
} })) : ((0, jsx_runtime_1.jsx)(InputTime_component_1.InputTimePickerComponent, { onChange: (e) => {
|
|
72
77
|
setTimeValue(e);
|
|
73
78
|
handleChange(dateValue, e);
|
|
74
79
|
} }))] }) }))] }));
|
|
@@ -8,7 +8,9 @@ const react_1 = require("react");
|
|
|
8
8
|
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
9
9
|
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
|
|
10
10
|
const _utils_1 = require("@utils");
|
|
11
|
-
const
|
|
11
|
+
const Button_component_1 = require("../button/Button.component");
|
|
12
|
+
const FloatingPage_component_1 = require("../modal/FloatingPage.component");
|
|
13
|
+
const BottomSheet_component_1 = require("../modal/BottomSheet.component");
|
|
12
14
|
const DocumentViewerComponent = (props) => {
|
|
13
15
|
const Comp = _utils_1.registry.get("DocumentViewerComponent");
|
|
14
16
|
return Comp ? (0, jsx_runtime_1.jsx)(Comp, { ...props }) : null;
|
|
@@ -35,12 +37,12 @@ function InputDocumentComponent({ label, tip, leftIcon, rightIcon, className = "
|
|
|
35
37
|
inputHandler.setFocus(true);
|
|
36
38
|
}, children: (Array.isArray(inputHandler.value) ? inputHandler.value : []).map((f) => {
|
|
37
39
|
return ((0, jsx_runtime_1.jsxs)("span", { className: "input-document-value-item", children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: DocumentViewerIcon(f.file.name.split(".").pop()?.toLowerCase()), className: "text-light-foreground" }), (0, jsx_runtime_1.jsx)("span", { className: "line-clamp-1", children: f.file.name })] }, f.id));
|
|
38
|
-
}) })), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon }))] }), invalidMessage && (0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })] }), !isSm ? ((0, jsx_runtime_1.jsx)(
|
|
40
|
+
}) })), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon }))] }), invalidMessage && (0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })] }), !isSm ? ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), title: label, footer: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }), children: (0, jsx_runtime_1.jsx)(exports.InputDocumentPicker, { value: inputHandler.value, onChange: (e) => {
|
|
39
41
|
inputHandler.setValue(e);
|
|
40
42
|
if (inputHandler.idle)
|
|
41
43
|
inputHandler.setIdle(false);
|
|
42
44
|
onChange?.(e);
|
|
43
|
-
} }) })) : ((0, jsx_runtime_1.jsx)(
|
|
45
|
+
} }) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: '98vh', footer: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }), children: (0, jsx_runtime_1.jsx)(exports.InputDocumentPicker, { value: inputHandler.value, onChange: (e) => {
|
|
44
46
|
inputHandler.setValue(e);
|
|
45
47
|
if (inputHandler.idle)
|
|
46
48
|
inputHandler.setIdle(false);
|
|
@@ -82,7 +84,7 @@ const InputDocumentPicker = ({ value, onChange }) => {
|
|
|
82
84
|
}
|
|
83
85
|
}
|
|
84
86
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "p-4 flex flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-document-dropzone", children: files.find((x) => x.id === previewActive)?.file ? ((0, jsx_runtime_1.jsx)(DocumentViewerComponent, { file: files.find((x) => x.id === previewActive)?.file })) : ((0, jsx_runtime_1.jsxs)("div", { className: "input-document-empty-box", onClick: () => fileInputRef.current?.click(), children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faPlus, className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "text-lg", children: "Tambah Dokumen" })] })) }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: handleFilePick }), (0, jsx_runtime_1.jsx)("div", { className: "input-document-thumbs-container", children: (0, jsx_runtime_1.jsxs)("div", { className: "input-document-thumbs-grid", children: [files.map((f) => {
|
|
85
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("input-document-thumb-wrapper", previewActive === f.id && "input-document-thumb-wrapper-active"), onClick: () => setPreviewActive(f.id), children: [(0, jsx_runtime_1.jsx)(DocumentViewerComponent, { file: f.file, mode: "thumb" }), (0, jsx_runtime_1.jsx)(
|
|
87
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("input-document-thumb-wrapper", previewActive === f.id && "input-document-thumb-wrapper-active"), onClick: () => setPreviewActive(f.id), children: [(0, jsx_runtime_1.jsx)(DocumentViewerComponent, { file: f.file, mode: "thumb" }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, onClick: () => removeFile(f.id), variant: "light", paint: "danger", className: "absolute top-2 right-2", size: isSm ? "xs" : "sm" })] }, f.id));
|
|
86
88
|
}), (0, jsx_runtime_1.jsxs)("div", { className: "input-document-upload-box", onClick: () => fileInputRef.current?.click(), children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faPlus }), (0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-center", children: "Tambah Dokumen" })] })] }) })] }) }));
|
|
87
89
|
};
|
|
88
90
|
exports.InputDocumentPicker = InputDocumentPicker;
|
|
@@ -7,7 +7,9 @@ const react_1 = require("react");
|
|
|
7
7
|
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
|
|
8
8
|
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
9
9
|
const _utils_1 = require("@utils");
|
|
10
|
-
const
|
|
10
|
+
const BottomSheet_component_1 = require("../modal/BottomSheet.component");
|
|
11
|
+
const Button_component_1 = require("../button/Button.component");
|
|
12
|
+
const Modal_component_1 = require("../modal/Modal.component");
|
|
11
13
|
const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1", invalid, validations, onChange, register, unregister, className = "", }) => {
|
|
12
14
|
const { isSm } = (0, _utils_1.useResponsive)();
|
|
13
15
|
const randomId = (0, _utils_1.useInputRandomId)();
|
|
@@ -78,7 +80,7 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1"
|
|
|
78
80
|
}, onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => {
|
|
79
81
|
e.preventDefault();
|
|
80
82
|
setDrag(true);
|
|
81
|
-
}, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: drag ? free_solid_svg_icons_1.faHandHolding : free_solid_svg_icons_1.faImages, className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] }), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(
|
|
83
|
+
}, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: drag ? free_solid_svg_icons_1.faHandHolding : free_solid_svg_icons_1.faImages, className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] }), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })), !isSm ? ((0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-max max-w-[350px]", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(aspect.replace(":", "/")), onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(aspect.replace(":", "/")), onDone: onCropDone }) })) }))] }));
|
|
82
84
|
};
|
|
83
85
|
exports.InputImageComponent = InputImageComponent;
|
|
84
86
|
const CanvasCropper = ({ src, aspect, onDone, }) => {
|
|
@@ -255,6 +257,6 @@ const CanvasCropper = ({ src, aspect, onDone, }) => {
|
|
|
255
257
|
setDragging(false);
|
|
256
258
|
pinchDistRef.current = 0;
|
|
257
259
|
};
|
|
258
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: { touchAction: "none" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-wrapper", style: { width: CROP_W, height: CROP_SIZE }, onMouseMove: handleMove, onMouseUp: handleUp, onMouseLeave: handleUp, onWheel: handleWheel, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [(0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: CROP_W, height: CROP_SIZE, onMouseDown: handleDown, className: "cursor-move" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-grid-container", style: { width: CROP_W, height: CROP_SIZE }, children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-border" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-2" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-2" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-4 pb-2", children: (0, jsx_runtime_1.jsx)(
|
|
260
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: { touchAction: "none" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-wrapper", style: { width: CROP_W, height: CROP_SIZE }, onMouseMove: handleMove, onMouseUp: handleUp, onMouseLeave: handleUp, onWheel: handleWheel, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [(0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: CROP_W, height: CROP_SIZE, onMouseDown: handleDown, className: "cursor-move" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-grid-container", style: { width: CROP_W, height: CROP_SIZE }, children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-border" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-2" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-2" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-4 pb-2", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: performCrop, block: true }) }), (0, jsx_runtime_1.jsx)("canvas", { ref: previewRef, className: "hidden" })] }));
|
|
259
261
|
};
|
|
260
262
|
exports.CanvasCropper = CanvasCropper;
|
|
@@ -15,7 +15,9 @@ const api_1 = require("@react-google-maps/api");
|
|
|
15
15
|
const LoadScriptComponent = api_1.LoadScript;
|
|
16
16
|
const GoogleMapComponent = api_1.GoogleMap;
|
|
17
17
|
const _utils_1 = require("@utils");
|
|
18
|
-
const
|
|
18
|
+
const BottomSheet_component_1 = require("../modal/BottomSheet.component");
|
|
19
|
+
const Button_component_1 = require("../button/Button.component");
|
|
20
|
+
const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
|
|
19
21
|
function InputMapComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
|
|
20
22
|
const { isSm } = (0, _utils_1.useResponsive)();
|
|
21
23
|
// =========================>
|
|
@@ -27,14 +29,14 @@ function InputMapComponent({ label, tip, leftIcon, rightIcon, value, invalid, va
|
|
|
27
29
|
// ## Invalid handler
|
|
28
30
|
// =========================>
|
|
29
31
|
const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
|
|
30
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] })), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsx)(
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] })), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: !isSm ? () => inputHandler.setFocus(false) : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, id: randomId, className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "input"), !!invalidMessage && "input-error"), value: inputHandler.value?.address || "", readOnly: true, onFocus: (e) => {
|
|
31
33
|
props.onFocus?.(e);
|
|
32
34
|
inputHandler.setFocus(true);
|
|
33
35
|
inputHandler.setIdle(false);
|
|
34
36
|
}, autoComplete: "off" }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-map-suggest-container", style: { height: 300 }, children: (0, jsx_runtime_1.jsx)(exports.InputMapPickerComponent, { value: inputHandler.value, onChange: (e) => {
|
|
35
37
|
inputHandler.setValue(e);
|
|
36
38
|
onChange?.(e);
|
|
37
|
-
} }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(
|
|
39
|
+
} }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 450, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }) }), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.InputMapPickerComponent, { onChange: (e) => {
|
|
38
40
|
inputHandler.setValue(e);
|
|
39
41
|
onChange?.(e);
|
|
40
42
|
} }) }) }))] }));
|
|
@@ -5,7 +5,7 @@ exports.InputRadioComponent = InputRadioComponent;
|
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const _utils_1 = require("@utils");
|
|
8
|
-
const
|
|
8
|
+
const Radio_component_1 = require("./Radio.component");
|
|
9
9
|
function InputRadioComponent({ name, label, tip, vertical, value, disabled, invalid, options, serverOptionControl, customOptions, validations, onChange, register, unregister, className = "", classNameCheckbox = "", }) {
|
|
10
10
|
const [dataOptions, setDataOptions] = (0, react_1.useState)([]);
|
|
11
11
|
const [loading, setLoading] = (0, react_1.useState)(false);
|
|
@@ -42,7 +42,7 @@ function InputRadioComponent({ name, label, tip, vertical, value, disabled, inva
|
|
|
42
42
|
return (0, jsx_runtime_1.jsx)("div", { className: "w-1/3 h-6 rounded-lg" }, key);
|
|
43
43
|
}), (options || dataOptions) &&
|
|
44
44
|
(options || dataOptions)?.map((option, key) => {
|
|
45
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
45
|
+
return ((0, jsx_runtime_1.jsx)(Radio_component_1.RadioComponent, { label: option.label, name: `option[${option.value}]#${name}`, checked: inputHandler.value == option.value, disabled: disabled, className: classNameCheckbox, onChange: () => {
|
|
46
46
|
if (inputHandler.value == option.value) {
|
|
47
47
|
inputHandler.setValue("");
|
|
48
48
|
onChange?.("");
|
|
@@ -7,7 +7,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
7
7
|
const react_1 = require("react");
|
|
8
8
|
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
|
|
9
9
|
const _utils_1 = require("@utils");
|
|
10
|
-
const
|
|
10
|
+
const BottomSheet_component_1 = require("../modal/BottomSheet.component");
|
|
11
|
+
const Button_component_1 = require("../button/Button.component");
|
|
12
|
+
const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
|
|
11
13
|
function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
|
|
12
14
|
const { isSm } = (0, _utils_1.useResponsive)();
|
|
13
15
|
// =========================>
|
|
@@ -19,7 +21,7 @@ function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
|
|
|
19
21
|
// ## Invalid handler
|
|
20
22
|
// =========================>
|
|
21
23
|
const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsx)(
|
|
24
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: !isSm ? () => inputHandler.setFocus(false) : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, id: randomId, className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "input"), !!invalidMessage && "input-error"), value: inputHandler.value, onChange: (e) => {
|
|
23
25
|
inputHandler.setValue(e.target.value);
|
|
24
26
|
inputHandler.setIdle(false);
|
|
25
27
|
onChange?.(e.target.value);
|
|
@@ -29,7 +31,7 @@ function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
|
|
|
29
31
|
}, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-time-picker-popover", children: (0, jsx_runtime_1.jsx)(exports.InputTimePickerComponent, { onChange: (time) => {
|
|
30
32
|
inputHandler.setValue(time);
|
|
31
33
|
onChange?.(time);
|
|
32
|
-
} }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(
|
|
34
|
+
} }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 380, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }) }), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.InputTimePickerComponent, { onChange: (time) => {
|
|
33
35
|
inputHandler.setValue(time);
|
|
34
36
|
onChange?.(time);
|
|
35
37
|
} }) }) }))] }));
|
|
@@ -5,7 +5,7 @@ exports.FloatingPageComponent = FloatingPageComponent;
|
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
8
|
-
const
|
|
8
|
+
const Button_component_1 = require("../button/Button.component");
|
|
9
9
|
const _utils_1 = require("@utils");
|
|
10
10
|
;
|
|
11
11
|
function FloatingPageComponent({ show, onClose, title, children, tip, footer, className = "", }) {
|
|
@@ -23,5 +23,5 @@ function FloatingPageComponent({ show, onClose, title, children, tip, footer, cl
|
|
|
23
23
|
_utils_1.shortcut.unregister("escape");
|
|
24
24
|
};
|
|
25
25
|
}, [show]);
|
|
26
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("floating-page", !show && "top-[200vh] md:top-0 md:-right-[200vw]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: [title && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] })), (0, jsx_runtime_1.jsx)(
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("floating-page", !show && "top-[200vh] md:top-0 md:-right-[200vw]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: [title && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] })), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "simple", paint: "danger", onClick: () => onClose() })] }), show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer absolute bottom-0 w-full", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] })] }));
|
|
27
27
|
}
|