@cashub/ui 0.20.0 → 0.21.1
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/Tab/Tab.js +9 -13
- package/Tab/TabList.js +14 -32
- package/Tab/TabPanel.js +21 -58
- package/Tab/TabTab.js +20 -40
- package/Tab/index.js +2 -10
- package/Tab/subComponent/TabContext.js +2 -5
- package/animate/Collapse.js +26 -53
- package/animate/Loader.js +21 -26
- package/animate/NumberCounter.js +22 -44
- package/animate/PulseRing.js +9 -21
- package/animate/Spinner.js +2 -10
- package/animate/index.js +5 -11
- package/assets/css/autocomplete.css +16 -16
- package/assets/css/font.css +4 -4
- package/assets/css/global.css +3 -3
- package/assets/css/normalize.css +386 -386
- package/backdrop/BaseBackdrop.js +2 -9
- package/backdrop/LoadingBackdrop.js +2 -9
- package/backdrop/ModalBackdrop.js +2 -9
- package/backdrop/index.js +3 -7
- package/badge/Badge.js +2 -11
- package/badge/BadgeDot.js +2 -10
- package/badge/BadgeFill.js +15 -20
- package/badge/BadgeWithText.js +6 -13
- package/badge/index.js +4 -9
- package/billing/BarChart.js +10 -17
- package/billing/Grid.js +11 -15
- package/billing/Header2.js +6 -9
- package/billing/Header3.js +9 -16
- package/billing/Paragraph.js +8 -14
- package/billing/ParagraphGroup.js +6 -9
- package/billing/ParagraphText.js +7 -12
- package/billing/Section.js +13 -23
- package/billing/SectionBody.js +5 -8
- package/billing/SectionHeader.js +7 -12
- package/breadcrumb/Breadcrumb.js +11 -21
- package/breadcrumb/index.js +1 -3
- package/button/Button.js +41 -38
- package/button/ButtonGroup.js +21 -18
- package/button/IconButton.js +29 -29
- package/button/ScrollToTopButton.js +12 -39
- package/button/index.js +4 -9
- package/callout/Callout.js +13 -26
- package/callout/index.js +1 -3
- package/chart/BarChart.js +28 -53
- package/chart/DoughnutChart.js +23 -62
- package/chart/LineChart.js +33 -55
- package/chart/SingleBarChart.js +11 -17
- package/chart/index.js +5 -12
- package/chart/utils/customTooltip.js +26 -43
- package/chart/utils/htmlLegendPlugin.js +24 -30
- package/chart/utils/index.js +3 -7
- package/chart/utils/padEmptyChartBar.js +24 -22
- package/container/FlexContainer.js +9 -12
- package/container/index.js +1 -3
- package/cropper/Cropper.js +21 -34
- package/cropper/CropperModalHandler.js +15 -21
- package/cropper/index.js +2 -5
- package/cropper/subComponent/CropImageModal.js +23 -58
- package/datetimePicker/DatePicker.js +103 -217
- package/datetimePicker/DatePickerV2.js +116 -221
- package/datetimePicker/DatetimePicker.js +27 -48
- package/datetimePicker/DatetimePickerV2.js +115 -231
- package/datetimePicker/TimeInput.js +9 -22
- package/datetimePicker/TimePicker.js +94 -151
- package/datetimePicker/TimePickerStyle.js +14 -0
- package/datetimePicker/accordion/Month.js +70 -90
- package/datetimePicker/accordion/Year.js +91 -135
- package/datetimePicker/hooks/index.js +3 -7
- package/datetimePicker/hooks/useChangeNumber.js +14 -27
- package/datetimePicker/hooks/useDecrease.js +19 -35
- package/datetimePicker/hooks/useIncrease.js +19 -35
- package/datetimePicker/index.js +13 -13
- package/datetimePicker/provider/constant.js +2 -3
- package/datetimePicker/subComponent/Accordion.js +108 -158
- package/datetimePicker/subComponent/CustomTimeInput.js +18 -48
- package/datetimePicker/subComponent/DateTimePickerContext.js +2 -5
- package/datetimePicker/utils/GMTDate.js +3 -7
- package/datetimePicker/utils/pad.js +2 -6
- package/datetimePicker/utils/toUTC0.js +3 -6
- package/descriptionList/DescriptionDetail.js +5 -10
- package/descriptionList/DescriptionList.js +5 -10
- package/descriptionList/DescriptionTerm.js +2 -9
- package/descriptionList/index.js +3 -7
- package/divider/Divider.js +9 -12
- package/divider/index.js +1 -3
- package/dropdown/Dropdown.js +28 -65
- package/dropdown/DropdownButtonOption.js +2 -9
- package/dropdown/DropdownContent.js +33 -64
- package/dropdown/DropdownDivOption.js +2 -9
- package/dropdown/DropdownItem.js +10 -16
- package/dropdown/DropdownLinkOption.js +2 -9
- package/dropdown/DropdownToggle.js +18 -38
- package/dropdown/index.js +6 -17
- package/dropdown/subComponent/DropdownContext.js +2 -5
- package/dropzone/FileDropzone.js +148 -302
- package/dropzone/ImageDropzone.js +96 -171
- package/dropzone/index.js +2 -5
- package/dropzone/subComponent/Message.js +7 -14
- package/figure/IconFigure.js +9 -16
- package/figure/ImageFigure.js +11 -17
- package/figure/index.js +2 -5
- package/file/HiddenFileInput.js +5 -14
- package/file/index.js +1 -3
- package/form/Checkbox.js +34 -43
- package/form/FormItem.js +2 -9
- package/form/Input.js +13 -15
- package/form/Label.js +10 -13
- package/form/MutedText.js +5 -10
- package/form/RadioButton.js +20 -32
- package/form/Searchbox.js +21 -65
- package/form/Slider.js +14 -0
- package/form/SwitchButton.js +34 -39
- package/form/Textarea.js +2 -11
- package/form/index.js +9 -19
- package/grid/Column.js +17 -17
- package/grid/Grid.js +13 -14
- package/grid/index.js +2 -5
- package/heading/Heading1.js +5 -10
- package/heading/Heading2.js +9 -12
- package/heading/Heading3.js +21 -18
- package/heading/index.js +3 -7
- package/helmet/Helmet.js +6 -9
- package/helmet/index.js +2 -5
- package/iconbox/ApplicationIconBox.js +25 -31
- package/iconbox/IconBox.js +11 -24
- package/iconbox/IconBoxV2.js +14 -26
- package/iconbox/index.js +3 -7
- package/iconbox/subComponent/IconBoxFigure.js +25 -20
- package/iconbox/subComponent/IconBoxImage.js +15 -18
- package/image/ImageFluid.js +2 -10
- package/image/UploadImage.js +65 -113
- package/image/index.js +2 -5
- package/index.js +44 -130
- package/jsoneditor/JsonEditor.js +10 -32
- package/jsoneditor/index.js +1 -3
- package/keyframe/Pulse.js +2 -7
- package/keyframe/Spin.js +2 -7
- package/link/LinkSpan.js +22 -35
- package/link/index.js +1 -3
- package/map/GoogleMap.js +122 -175
- package/map/GoogleReverseGeolocation.js +79 -186
- package/map/LeafletMap.js +78 -132
- package/map/LeafletReverseGeolocation.js +49 -121
- package/map/index.js +4 -9
- package/map/subComponent/BasicLeafletMap.js +8 -14
- package/map/subComponent/GoogleMapContainer.js +5 -10
- package/map/subComponent/GoogleMapPopup.js +66 -123
- package/map/subComponent/GoogleMapWrapper.js +13 -32
- package/map/subComponent/GoogleMarkerSpiderfier.js +14 -24
- package/map/subComponent/LeafletDrawControl.js +47 -84
- package/map/subComponent/LeafletMapContainer.js +5 -10
- package/map/subComponent/MapSearchBoxControl.js +24 -70
- package/modal/StateModal.js +41 -100
- package/modal/TitleModal.js +89 -190
- package/modal/index.js +2 -5
- package/package.json +1 -1
- package/paginate/Paginate.js +40 -54
- package/paginate/index.js +1 -3
- package/popover/Popover.js +39 -87
- package/popover/index.js +1 -3
- package/qrcode/QRCode.js +10 -23
- package/qrcode/QRCodeContainter.js +8 -16
- package/qrcode/index.js +2 -5
- package/ribbon/Ribbon.js +4 -15
- package/ribbon/index.js +1 -3
- package/section/Section.js +57 -39
- package/section/SectionBody.js +15 -22
- package/section/SectionHeader.js +27 -27
- package/section/SectionToolbar.js +2 -9
- package/section/SectionToolbarItem.js +2 -9
- package/section/index.js +5 -11
- package/select/InputSelect.js +103 -215
- package/select/Select.js +204 -362
- package/select/index.js +2 -5
- package/select/subComponent/ListBox.js +9 -12
- package/select/subComponent/Option.js +8 -16
- package/select/subComponent/OptionGroup.js +2 -9
- package/select/subComponent/Options.js +5 -11
- package/select/subComponent/SearchBox.js +9 -29
- package/select/subComponent/SelectedMultiple.js +8 -16
- package/select/subComponent/SelectedSingle.js +2 -9
- package/styles/GlobalStyle.js +169 -91
- package/styles/config/breakpoint.style.js +2 -3
- package/styles/config/header.style.js +2 -3
- package/styles/config/sidebar.style.js +2 -3
- package/styles/index.js +2 -5
- package/styles/mixin/backgroundColor.js +17 -14
- package/styles/mixin/borderColor.js +17 -14
- package/styles/mixin/color.js +17 -14
- package/styles/mixin/colorOnBackground.js +17 -14
- package/styles/mixin/inputPlaceholder.js +3 -9
- package/styles/mixin/media.js +3 -11
- package/styles/mixin/rounded.js +13 -12
- package/styles/mixin/scrollbar.js +7 -13
- package/styles/theme/dark.theme.js +20 -20
- package/styles/theme/light.theme.js +20 -20
- package/styles/theme/white.theme.js +20 -20
- package/styles/themes.js +2 -8
- package/table/GridTable.js +105 -143
- package/table/ImageBox.js +8 -18
- package/table/PermissionTable.js +25 -25
- package/table/Table.js +137 -153
- package/table/__mock__/columns.js +2 -3
- package/table/__mock__/data.js +2 -3
- package/table/hooks/index.js +2 -5
- package/table/hooks/useCalculateDataRange.js +9 -36
- package/table/hooks/useGenerateSort.js +6 -17
- package/table/index.js +4 -9
- package/table/subComponent/BaseTableHeadCell.js +15 -21
- package/table/subComponent/GridTableFooter.js +5 -10
- package/table/subComponent/GridTableHeadCell.js +5 -10
- package/table/subComponent/Resizer.js +17 -44
- package/table/subComponent/TableFooter.js +5 -10
- package/table/subComponent/TableFooterInfo.js +2 -9
- package/table/subComponent/TableFooterPager.js +5 -12
- package/table/subComponent/TableHeadCell.js +2 -9
- package/table/subComponent/TableSort.js +13 -19
- package/tagify/TagifyStyle.js +14 -0
- package/tagify/Tags.js +15 -37
- package/tagify/index.js +8 -3
- package/text/Paragraph.js +25 -20
- package/text/index.js +1 -3
- package/timeline/Timeline.js +28 -37
- package/timeline/index.js +1 -3
- package/toast/CustomToastContainer.js +2 -9
- package/toast/MessageContainer.js +9 -18
- package/toast/index.js +3 -8
- package/toast/show.js +18 -28
- package/tooltip/Tooltip.js +48 -97
- package/tooltip/index.js +1 -3
- package/wizard/Wizard.js +63 -133
- package/wizard/index.js +1 -3
package/timeline/index.js
CHANGED
|
@@ -5,11 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
Object.defineProperty(exports, "Timeline", {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: function
|
|
8
|
+
get: function () {
|
|
9
9
|
return _Timeline.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
|
|
13
12
|
var _Timeline = _interopRequireDefault(require("./Timeline"));
|
|
14
|
-
|
|
15
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -4,17 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
|
|
10
8
|
var _reactToastify = require("react-toastify");
|
|
11
|
-
|
|
12
9
|
var _templateObject;
|
|
13
|
-
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
11
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
17
|
-
|
|
18
|
-
var
|
|
19
|
-
var _default = CustomToastContainer;
|
|
20
|
-
exports.default = _default;
|
|
12
|
+
const CustomToastContainer = (0, _styledComponents.default)(_reactToastify.ToastContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 360px;\n\n .Toastify__toast {\n padding: 15px 15px 15px 50px;\n box-shadow: 0 0 8px #999999;\n background-repeat: no-repeat;\n background-position: 15px center;\n }\n\n .Toastify__toast--error {\n background-color: var(--color-danger);\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=');\n }\n\n .Toastify__toast--success {\n background-color: var(--color-success);\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');\n }\n\n .Toastify__toast--warning {\n background-color: var(--color-warning);\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');\n }\n"])));
|
|
13
|
+
var _default = exports.default = CustomToastContainer;
|
|
@@ -4,22 +4,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
|
|
10
8
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
-
|
|
12
9
|
var _templateObject, _templateObject2;
|
|
13
|
-
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
11
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
12
|
+
const MessageContainer = _ref => {
|
|
13
|
+
let {
|
|
14
|
+
title,
|
|
15
|
+
message,
|
|
16
|
+
containHTML = false
|
|
17
|
+
} = _ref;
|
|
23
18
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
24
19
|
"data-testid": "messageContainer",
|
|
25
20
|
children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
|
|
@@ -33,10 +28,6 @@ var MessageContainer = function MessageContainer(_ref) {
|
|
|
33
28
|
})]
|
|
34
29
|
});
|
|
35
30
|
};
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
var Message = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin: 0;\n font-size: 0.9rem;\n line-height: 1.2rem;\n word-break: break-word;\n white-space: pre-wrap;\n\n ul {\n margin-left: 1rem;\n\n li {\n list-style: disc;\n }\n }\n"])));
|
|
40
|
-
|
|
41
|
-
var _default = MessageContainer;
|
|
42
|
-
exports.default = _default;
|
|
31
|
+
const Title = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin: 0;\n margin-bottom: 0.25rem;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 500;\n"])));
|
|
32
|
+
const Message = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin: 0;\n font-size: 0.9rem;\n line-height: 1.2rem;\n word-break: break-word;\n white-space: pre-wrap;\n\n ul {\n margin-left: 1rem;\n\n li {\n list-style: disc;\n }\n }\n"])));
|
|
33
|
+
var _default = exports.default = MessageContainer;
|
package/toast/index.js
CHANGED
|
@@ -9,33 +9,28 @@ var _exportNames = {
|
|
|
9
9
|
};
|
|
10
10
|
Object.defineProperty(exports, "CustomToastContainer", {
|
|
11
11
|
enumerable: true,
|
|
12
|
-
get: function
|
|
12
|
+
get: function () {
|
|
13
13
|
return _CustomToastContainer.default;
|
|
14
14
|
}
|
|
15
15
|
});
|
|
16
16
|
Object.defineProperty(exports, "MessageContainer", {
|
|
17
17
|
enumerable: true,
|
|
18
|
-
get: function
|
|
18
|
+
get: function () {
|
|
19
19
|
return _MessageContainer.default;
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
|
-
|
|
23
22
|
var _CustomToastContainer = _interopRequireDefault(require("./CustomToastContainer"));
|
|
24
|
-
|
|
25
23
|
var _MessageContainer = _interopRequireDefault(require("./MessageContainer"));
|
|
26
|
-
|
|
27
24
|
var _show = require("./show");
|
|
28
|
-
|
|
29
25
|
Object.keys(_show).forEach(function (key) {
|
|
30
26
|
if (key === "default" || key === "__esModule") return;
|
|
31
27
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
32
28
|
if (key in exports && exports[key] === _show[key]) return;
|
|
33
29
|
Object.defineProperty(exports, key, {
|
|
34
30
|
enumerable: true,
|
|
35
|
-
get: function
|
|
31
|
+
get: function () {
|
|
36
32
|
return _show[key];
|
|
37
33
|
}
|
|
38
34
|
});
|
|
39
35
|
});
|
|
40
|
-
|
|
41
36
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
package/toast/show.js
CHANGED
|
@@ -4,56 +4,46 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.showWarningMessage = exports.showSuccessMessage = exports.showErrorMessage = void 0;
|
|
7
|
-
|
|
8
7
|
var _reactToastify = require("react-toastify");
|
|
9
|
-
|
|
10
8
|
var _MessageContainer = _interopRequireDefault(require("./MessageContainer"));
|
|
11
|
-
|
|
12
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
-
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
11
|
+
const showSuccessMessage = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
title,
|
|
14
|
+
message,
|
|
15
|
+
containHTML = false
|
|
16
|
+
} = _ref;
|
|
22
17
|
_reactToastify.toast.success( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageContainer.default, {
|
|
23
18
|
title: title,
|
|
24
19
|
message: message,
|
|
25
20
|
containHTML: containHTML
|
|
26
21
|
}));
|
|
27
22
|
};
|
|
28
|
-
|
|
29
23
|
exports.showSuccessMessage = showSuccessMessage;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
24
|
+
const showErrorMessage = _ref2 => {
|
|
25
|
+
let {
|
|
26
|
+
title,
|
|
27
|
+
message,
|
|
28
|
+
containHTML = false
|
|
29
|
+
} = _ref2;
|
|
37
30
|
_reactToastify.toast.error( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageContainer.default, {
|
|
38
31
|
title: title,
|
|
39
32
|
message: message,
|
|
40
33
|
containHTML: containHTML
|
|
41
34
|
}));
|
|
42
35
|
};
|
|
43
|
-
|
|
44
36
|
exports.showErrorMessage = showErrorMessage;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
37
|
+
const showWarningMessage = _ref3 => {
|
|
38
|
+
let {
|
|
39
|
+
title,
|
|
40
|
+
message,
|
|
41
|
+
containHTML = false
|
|
42
|
+
} = _ref3;
|
|
52
43
|
_reactToastify.toast.warning( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageContainer.default, {
|
|
53
44
|
title: title,
|
|
54
45
|
message: message,
|
|
55
46
|
containHTML: containHTML
|
|
56
47
|
}));
|
|
57
48
|
};
|
|
58
|
-
|
|
59
49
|
exports.showWarningMessage = showWarningMessage;
|
package/tooltip/Tooltip.js
CHANGED
|
@@ -4,107 +4,58 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
-
|
|
12
9
|
var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
|
|
13
|
-
|
|
14
10
|
var _hooks = require("@cashub/hooks");
|
|
15
|
-
|
|
16
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
-
|
|
18
12
|
var _templateObject, _templateObject2;
|
|
19
|
-
|
|
20
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
-
|
|
22
14
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
title = _ref.title,
|
|
46
|
-
_ref$showArrow = _ref.showArrow,
|
|
47
|
-
showArrow = _ref$showArrow === void 0 ? false : _ref$showArrow,
|
|
48
|
-
_ref$mode = _ref.mode,
|
|
49
|
-
mode = _ref$mode === void 0 ? 'hover' : _ref$mode,
|
|
50
|
-
fixed = _ref.fixed,
|
|
51
|
-
inline = _ref.inline,
|
|
52
|
-
disabled = _ref.disabled;
|
|
53
|
-
|
|
54
|
-
var _useState = (0, _react.useState)(false),
|
|
55
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
56
|
-
display = _useState2[0],
|
|
57
|
-
setDisplay = _useState2[1];
|
|
58
|
-
|
|
59
|
-
var _useState3 = (0, _react.useState)(null),
|
|
60
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
61
|
-
targetElement = _useState4[0],
|
|
62
|
-
setTargetElement = _useState4[1];
|
|
63
|
-
|
|
64
|
-
var _useState5 = (0, _react.useState)(null),
|
|
65
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
66
|
-
tooltipElement = _useState6[0],
|
|
67
|
-
setTooltipElement = _useState6[1];
|
|
68
|
-
|
|
69
|
-
var _useState7 = (0, _react.useState)(null),
|
|
70
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
71
|
-
arrowElement = _useState8[0],
|
|
72
|
-
setArrowElement = _useState8[1];
|
|
73
|
-
|
|
74
|
-
var ownRef = (0, _hooks.useForkRef)(setTargetElement, ref);
|
|
75
|
-
|
|
76
|
-
var _useCustomPopper = (0, _hooks.useCustomPopper)(targetElement, tooltipElement, {
|
|
15
|
+
const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
16
|
+
let {
|
|
17
|
+
children,
|
|
18
|
+
id,
|
|
19
|
+
title,
|
|
20
|
+
showArrow = false,
|
|
21
|
+
mode = 'hover',
|
|
22
|
+
fixed,
|
|
23
|
+
inline,
|
|
24
|
+
disabled
|
|
25
|
+
} = _ref;
|
|
26
|
+
const [display, setDisplay] = (0, _react.useState)(false);
|
|
27
|
+
const [targetElement, setTargetElement] = (0, _react.useState)(null);
|
|
28
|
+
const [tooltipElement, setTooltipElement] = (0, _react.useState)(null);
|
|
29
|
+
const [arrowElement, setArrowElement] = (0, _react.useState)(null);
|
|
30
|
+
const ownRef = (0, _hooks.useForkRef)(setTargetElement, ref);
|
|
31
|
+
const {
|
|
32
|
+
styles,
|
|
33
|
+
attributes,
|
|
34
|
+
state,
|
|
35
|
+
update
|
|
36
|
+
} = (0, _hooks.useCustomPopper)(targetElement, tooltipElement, {
|
|
77
37
|
strategy: fixed ? 'fixed' : 'absolute',
|
|
78
|
-
arrowElement
|
|
79
|
-
})
|
|
80
|
-
|
|
81
|
-
attributes = _useCustomPopper.attributes,
|
|
82
|
-
state = _useCustomPopper.state,
|
|
83
|
-
update = _useCustomPopper.update;
|
|
84
|
-
|
|
85
|
-
var handleOpen = (0, _react.useCallback)(function () {
|
|
38
|
+
arrowElement
|
|
39
|
+
});
|
|
40
|
+
const handleOpen = (0, _react.useCallback)(() => {
|
|
86
41
|
setDisplay(true);
|
|
87
42
|
update();
|
|
88
43
|
}, [update]);
|
|
89
|
-
|
|
44
|
+
const handleClose = (0, _react.useCallback)(() => {
|
|
90
45
|
setDisplay(false);
|
|
91
46
|
update();
|
|
92
47
|
}, [update]);
|
|
93
|
-
|
|
94
|
-
setDisplay(
|
|
95
|
-
return !display;
|
|
96
|
-
});
|
|
48
|
+
const toggle = (0, _react.useCallback)(() => {
|
|
49
|
+
setDisplay(display => !display);
|
|
97
50
|
update();
|
|
98
51
|
}, [update]);
|
|
99
|
-
|
|
52
|
+
const wraperProps = (0, _react.useMemo)(() => {
|
|
100
53
|
if (disabled) return;
|
|
101
|
-
|
|
102
54
|
if (mode === 'click') {
|
|
103
55
|
return {
|
|
104
56
|
onClick: toggle
|
|
105
57
|
};
|
|
106
58
|
}
|
|
107
|
-
|
|
108
59
|
return {
|
|
109
60
|
// mode ==="hover"
|
|
110
61
|
onClick: handleClose,
|
|
@@ -112,22 +63,22 @@ var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
112
63
|
onMouseLeave: handleClose
|
|
113
64
|
};
|
|
114
65
|
}, [mode, handleClose, handleOpen, toggle, disabled]);
|
|
115
|
-
|
|
116
|
-
|
|
66
|
+
const childrenProps = {
|
|
67
|
+
...children.props,
|
|
117
68
|
ref: ownRef
|
|
118
|
-
}
|
|
119
|
-
|
|
69
|
+
};
|
|
120
70
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
|
|
121
71
|
onOutsideClick: handleClose,
|
|
122
72
|
display: inline ? 'inline-block' : 'block',
|
|
123
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div",
|
|
73
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
74
|
+
...wraperProps,
|
|
124
75
|
"data-testid": "tooltipWrapper",
|
|
125
|
-
children: [/*#__PURE__*/(0, _react.cloneElement)(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipTooltip,
|
|
76
|
+
children: [/*#__PURE__*/(0, _react.cloneElement)(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipTooltip, {
|
|
126
77
|
id: id,
|
|
127
78
|
$display: display,
|
|
128
79
|
ref: setTooltipElement,
|
|
129
|
-
style: styles.popper
|
|
130
|
-
|
|
80
|
+
style: styles.popper,
|
|
81
|
+
...attributes.popper,
|
|
131
82
|
placement: state && state.placement,
|
|
132
83
|
role: "tooltip",
|
|
133
84
|
children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipArrow, {
|
|
@@ -136,20 +87,20 @@ var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
136
87
|
style: styles.arrow,
|
|
137
88
|
$display: showArrow
|
|
138
89
|
})]
|
|
139
|
-
})
|
|
140
|
-
})
|
|
90
|
+
})]
|
|
91
|
+
})
|
|
141
92
|
});
|
|
142
93
|
});
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
94
|
+
const TooltipTooltip = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n white-space: pre-line;\n visibility: ", ";\n border: 1px solid var(--border-color);\n color: var(--font-on-background);\n background: var(--color-background2);\n box-shadow: var(--box-shadow);\n border-radius: calc(var(--border-radius) / 2);\n padding: var(--spacing-xs);\n z-index: 80;\n text-align: left;\n font-size: var(--font-body1);\n font-weight: var(--font-normal);\n line-height: 1.5;\n word-break: break-word;\n max-width: 50vw;\n"])), _ref2 => {
|
|
95
|
+
let {
|
|
96
|
+
$display
|
|
97
|
+
} = _ref2;
|
|
146
98
|
return $display ? 'visible' : 'hidden';
|
|
147
99
|
});
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
100
|
+
const TooltipArrow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: ", ";\n top: -0.5rem;\n left: 0;\n width: 1rem;\n height: 1rem;\n\n &::before {\n position: absolute;\n display: block;\n content: '';\n border-color: transparent;\n border-style: solid;\n top: 0;\n border-width: 0 0.5rem 0.5rem 0.5rem;\n border-bottom-color: var(--border-color);\n }\n"])), _ref3 => {
|
|
101
|
+
let {
|
|
102
|
+
$display
|
|
103
|
+
} = _ref3;
|
|
151
104
|
return $display ? 'block' : 'none';
|
|
152
105
|
});
|
|
153
|
-
|
|
154
|
-
var _default = Tooltip;
|
|
155
|
-
exports.default = _default;
|
|
106
|
+
var _default = exports.default = Tooltip;
|
package/tooltip/index.js
CHANGED
|
@@ -5,11 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
Object.defineProperty(exports, "Tooltip", {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: function
|
|
8
|
+
get: function () {
|
|
9
9
|
return _Tooltip.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
|
|
13
12
|
var _Tooltip = _interopRequireDefault(require("./Tooltip"));
|
|
14
|
-
|
|
15
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|