@hitachivantara/uikit-react-core 3.53.1 → 3.54.0
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/CHANGELOG.md +18 -0
- package/dist/Snackbar/SnackbarProvider/SnackbarProvider.d.ts +30 -0
- package/dist/Snackbar/SnackbarProvider/SnackbarProvider.js +207 -0
- package/dist/Snackbar/SnackbarProvider/SnackbarProvider.js.map +1 -0
- package/dist/Snackbar/SnackbarProvider/index.d.ts +2 -0
- package/dist/Snackbar/SnackbarProvider/index.js +49 -0
- package/dist/Snackbar/SnackbarProvider/index.js.map +1 -0
- package/dist/Snackbar/stories/SnackbarProvider.stories.mdx +51 -0
- package/dist/TagsInput/TagsInput.d.ts +33 -4
- package/dist/TagsInput/TagsInput.js +124 -18
- package/dist/TagsInput/TagsInput.js.map +1 -1
- package/dist/TagsInput/styles.js +12 -8
- package/dist/TagsInput/styles.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +16 -0
- package/dist/index.js.map +1 -1
- package/dist/legacy/Snackbar/SnackbarProvider/SnackbarProvider.d.ts +30 -0
- package/dist/legacy/Snackbar/SnackbarProvider/SnackbarProvider.js +169 -0
- package/dist/legacy/Snackbar/SnackbarProvider/SnackbarProvider.js.map +1 -0
- package/dist/legacy/Snackbar/SnackbarProvider/index.d.ts +2 -0
- package/dist/legacy/Snackbar/SnackbarProvider/index.js +3 -0
- package/dist/legacy/Snackbar/SnackbarProvider/index.js.map +1 -0
- package/dist/legacy/Snackbar/stories/SnackbarProvider.stories.mdx +51 -0
- package/dist/legacy/TagsInput/TagsInput.d.ts +33 -4
- package/dist/legacy/TagsInput/TagsInput.js +128 -24
- package/dist/legacy/TagsInput/TagsInput.js.map +1 -1
- package/dist/legacy/TagsInput/styles.js +12 -8
- package/dist/legacy/TagsInput/styles.js.map +1 -1
- package/dist/legacy/index.d.ts +2 -0
- package/dist/legacy/index.js +1 -0
- package/dist/legacy/index.js.map +1 -1
- package/dist/modern/Snackbar/SnackbarProvider/SnackbarProvider.d.ts +30 -0
- package/dist/modern/Snackbar/SnackbarProvider/SnackbarProvider.js +155 -0
- package/dist/modern/Snackbar/SnackbarProvider/SnackbarProvider.js.map +1 -0
- package/dist/modern/Snackbar/SnackbarProvider/index.d.ts +2 -0
- package/dist/modern/Snackbar/SnackbarProvider/index.js +3 -0
- package/dist/modern/Snackbar/SnackbarProvider/index.js.map +1 -0
- package/dist/modern/Snackbar/stories/SnackbarProvider.stories.mdx +51 -0
- package/dist/modern/TagsInput/TagsInput.d.ts +33 -4
- package/dist/modern/TagsInput/TagsInput.js +107 -18
- package/dist/modern/TagsInput/TagsInput.js.map +1 -1
- package/dist/modern/TagsInput/styles.js +12 -8
- package/dist/modern/TagsInput/styles.js.map +1 -1
- package/dist/modern/index.d.ts +2 -0
- package/dist/modern/index.js +1 -0
- package/dist/modern/index.js.map +1 -1
- package/package.json +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [3.54.0](https://github.com/lumada-design/hv-uikit-react/compare/@hitachivantara/uikit-react-core@3.53.1...@hitachivantara/uikit-react-core@3.54.0) (2022-02-04)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **TagsInput:** add max counter validation ([#2657](https://github.com/lumada-design/hv-uikit-react/issues/2657)) ([2d539e9](https://github.com/lumada-design/hv-uikit-react/commit/2d539e9f73a4f0ddc30486503a759f4d3e5cc38e))
|
|
12
|
+
* **TagsInput:** add required property ([51bc3c8](https://github.com/lumada-design/hv-uikit-react/commit/51bc3c8f5fc184054596b6c3c2bc02fdf6dfcb7c))
|
|
13
|
+
* **TagsInput:** add status validation and other fixes ([c791849](https://github.com/lumada-design/hv-uikit-react/commit/c7918490f5b6a84a1ba934a9464ba09e73a9e7e4))
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### Features
|
|
17
|
+
|
|
18
|
+
* **snackbar:** adding stacked snackbar provider. ([a3d7ace](https://github.com/lumada-design/hv-uikit-react/commit/a3d7ace1a7cc4414ea679881898670379689d816))
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## [3.53.1](https://github.com/lumada-design/hv-uikit-react/compare/@hitachivantara/uikit-react-core@3.53.0...@hitachivantara/uikit-react-core@3.53.1) (2022-02-01)
|
|
7
25
|
|
|
8
26
|
**Note:** Version bump only for package @hitachivantara/uikit-react-core
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import {
|
|
2
|
+
OptionsObject,
|
|
3
|
+
ProviderContext,
|
|
4
|
+
SnackbarKey,
|
|
5
|
+
SnackbarMessage,
|
|
6
|
+
SnackbarProvider,
|
|
7
|
+
} from "notistack";
|
|
8
|
+
import { SemanticVariantTypes } from "../../Banner";
|
|
9
|
+
import { HvSnackbarContentProps } from "../SnackbarContentWrapper";
|
|
10
|
+
|
|
11
|
+
export interface HvSnackbarProviderProps extends SnackbarProvider {
|
|
12
|
+
/**
|
|
13
|
+
* Class object used to override notistack classes.
|
|
14
|
+
*/
|
|
15
|
+
notistackClassesOverride: Record<string, unknown>;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
interface HvEnqueueOptions extends OptionsObject {
|
|
19
|
+
id?: string;
|
|
20
|
+
variant?: SemanticVariantTypes;
|
|
21
|
+
snackbarContentProps?: HvSnackbarContentProps;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
interface HvSnackbarProviderContext extends ProviderContext {
|
|
25
|
+
enqueueSnackbar: (message: SnackbarMessage, options?: HvEnqueueOptions) => SnackbarKey;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export function useHvSnackbar(): HvSnackbarProviderContext;
|
|
29
|
+
|
|
30
|
+
export default function HvSnackbarProvider(props: HvSnackbarProviderProps): JSX.Element | null;
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.object.keys.js");
|
|
4
|
+
|
|
5
|
+
require("core-js/modules/es.symbol.js");
|
|
6
|
+
|
|
7
|
+
require("core-js/modules/es.array.filter.js");
|
|
8
|
+
|
|
9
|
+
require("core-js/modules/es.object.to-string.js");
|
|
10
|
+
|
|
11
|
+
require("core-js/modules/es.object.get-own-property-descriptor.js");
|
|
12
|
+
|
|
13
|
+
require("core-js/modules/web.dom-collections.for-each.js");
|
|
14
|
+
|
|
15
|
+
require("core-js/modules/es.object.get-own-property-descriptors.js");
|
|
16
|
+
|
|
17
|
+
require("core-js/modules/es.array.iterator.js");
|
|
18
|
+
|
|
19
|
+
require("core-js/modules/es.string.iterator.js");
|
|
20
|
+
|
|
21
|
+
require("core-js/modules/es.weak-map.js");
|
|
22
|
+
|
|
23
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
24
|
+
|
|
25
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
26
|
+
|
|
27
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
28
|
+
|
|
29
|
+
Object.defineProperty(exports, "__esModule", {
|
|
30
|
+
value: true
|
|
31
|
+
});
|
|
32
|
+
exports.useHvSnackbar = exports.default = void 0;
|
|
33
|
+
|
|
34
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
35
|
+
|
|
36
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
37
|
+
|
|
38
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
39
|
+
|
|
40
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
41
|
+
|
|
42
|
+
var _core = require("@material-ui/core");
|
|
43
|
+
|
|
44
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
45
|
+
|
|
46
|
+
var _notistack = require("notistack");
|
|
47
|
+
|
|
48
|
+
var _SnackbarContentWrapper = _interopRequireDefault(require("../SnackbarContentWrapper"));
|
|
49
|
+
|
|
50
|
+
var _excluded = ["id", "variant", "snackbarContentProps"],
|
|
51
|
+
_excluded2 = ["children", "notistackClassesOverride", "maxSnack", "autoHideDuration", "anchorOrigin"];
|
|
52
|
+
|
|
53
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
54
|
+
|
|
55
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
56
|
+
|
|
57
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
58
|
+
|
|
59
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
60
|
+
|
|
61
|
+
var HvNotistackSnackMessage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
62
|
+
var id = _ref.id,
|
|
63
|
+
message = _ref.message,
|
|
64
|
+
_ref$variant = _ref.variant,
|
|
65
|
+
variant = _ref$variant === void 0 ? "success" : _ref$variant,
|
|
66
|
+
snackbarContentProps = _ref.snackbarContentProps;
|
|
67
|
+
return /*#__PURE__*/_react.default.createElement(_notistack.SnackbarContent, {
|
|
68
|
+
ref: ref
|
|
69
|
+
}, /*#__PURE__*/_react.default.createElement(_SnackbarContentWrapper.default, (0, _extends2.default)({
|
|
70
|
+
id: id,
|
|
71
|
+
variant: variant,
|
|
72
|
+
showIcon: true,
|
|
73
|
+
label: message
|
|
74
|
+
}, snackbarContentProps)));
|
|
75
|
+
}); // We override notistack hook to be able to customize the snackbar that should be called.
|
|
76
|
+
|
|
77
|
+
var useHvSnackbar = function useHvSnackbar() {
|
|
78
|
+
var _useSnackbar = (0, _notistack.useSnackbar)(),
|
|
79
|
+
enqueueNotistackSnackbar = _useSnackbar.enqueueSnackbar,
|
|
80
|
+
closeSnackbar = _useSnackbar.closeSnackbar;
|
|
81
|
+
|
|
82
|
+
var enqueueSnackbar = (0, _react.useCallback)(function (message, options) {
|
|
83
|
+
var id = options.id,
|
|
84
|
+
_options$variant = options.variant,
|
|
85
|
+
variant = _options$variant === void 0 ? "success" : _options$variant,
|
|
86
|
+
snackbarContentProps = options.snackbarContentProps,
|
|
87
|
+
otherOptions = (0, _objectWithoutProperties2.default)(options, _excluded);
|
|
88
|
+
enqueueNotistackSnackbar( /*#__PURE__*/_react.default.createElement(HvNotistackSnackMessage, {
|
|
89
|
+
id: id,
|
|
90
|
+
message: message,
|
|
91
|
+
variant: variant,
|
|
92
|
+
snackbarContentProps: snackbarContentProps
|
|
93
|
+
}), otherOptions);
|
|
94
|
+
}, [enqueueNotistackSnackbar]);
|
|
95
|
+
return (0, _react.useMemo)(function () {
|
|
96
|
+
return {
|
|
97
|
+
enqueueSnackbar: enqueueSnackbar,
|
|
98
|
+
closeSnackbar: closeSnackbar
|
|
99
|
+
};
|
|
100
|
+
}, [enqueueSnackbar, closeSnackbar]);
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
exports.useHvSnackbar = useHvSnackbar;
|
|
104
|
+
|
|
105
|
+
var useStyles = function useStyles(notistackClassesOverride) {
|
|
106
|
+
return (0, _core.makeStyles)(function () {
|
|
107
|
+
return _objectSpread({
|
|
108
|
+
containerRoot: {
|
|
109
|
+
"& > div > div": {
|
|
110
|
+
// Overrides notistack extra padding
|
|
111
|
+
padding: "0 !important",
|
|
112
|
+
transition: "all 0s ease 0s !important",
|
|
113
|
+
"& > div > div > div": {
|
|
114
|
+
color: "inherit",
|
|
115
|
+
padding: "0",
|
|
116
|
+
fontSize: "inherit",
|
|
117
|
+
boxShadow: "none",
|
|
118
|
+
alignItems: "center",
|
|
119
|
+
fontFamily: "inherit",
|
|
120
|
+
fontWeight: "inherit",
|
|
121
|
+
lineHeight: "inherit",
|
|
122
|
+
borderRadius: "0",
|
|
123
|
+
letterSpacing: "inherit",
|
|
124
|
+
backgroundColor: "inherit"
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}, notistackClassesOverride);
|
|
129
|
+
})();
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
var HvSnackbarProvider = function HvSnackbarProvider(_ref2) {
|
|
133
|
+
var children = _ref2.children,
|
|
134
|
+
_ref2$notistackClasse = _ref2.notistackClassesOverride,
|
|
135
|
+
notistackClassesOverride = _ref2$notistackClasse === void 0 ? {} : _ref2$notistackClasse,
|
|
136
|
+
_ref2$maxSnack = _ref2.maxSnack,
|
|
137
|
+
maxSnack = _ref2$maxSnack === void 0 ? 5 : _ref2$maxSnack,
|
|
138
|
+
_ref2$autoHideDuratio = _ref2.autoHideDuration,
|
|
139
|
+
autoHideDuration = _ref2$autoHideDuratio === void 0 ? 5000 : _ref2$autoHideDuratio,
|
|
140
|
+
_ref2$anchorOrigin = _ref2.anchorOrigin,
|
|
141
|
+
anchorOrigin = _ref2$anchorOrigin === void 0 ? {
|
|
142
|
+
vertical: "top",
|
|
143
|
+
horizontal: "right"
|
|
144
|
+
} : _ref2$anchorOrigin,
|
|
145
|
+
others = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
|
|
146
|
+
var classes = useStyles(notistackClassesOverride);
|
|
147
|
+
return /*#__PURE__*/_react.default.createElement(_notistack.SnackbarProvider, (0, _extends2.default)({
|
|
148
|
+
classes: _objectSpread({}, classes),
|
|
149
|
+
maxSnack: maxSnack,
|
|
150
|
+
autoHideDuration: autoHideDuration,
|
|
151
|
+
anchorOrigin: anchorOrigin
|
|
152
|
+
}, others), children);
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
process.env.NODE_ENV !== "production" ? HvSnackbarProvider.propTypes = {
|
|
156
|
+
/**
|
|
157
|
+
* Your component tree.
|
|
158
|
+
*/
|
|
159
|
+
children: _propTypes.default.node.isRequired,
|
|
160
|
+
|
|
161
|
+
/**
|
|
162
|
+
* Max visible snackbars.
|
|
163
|
+
*/
|
|
164
|
+
maxSnack: _propTypes.default.number,
|
|
165
|
+
|
|
166
|
+
/**
|
|
167
|
+
* How much time the snackbar remains visible in milliseconds.
|
|
168
|
+
*/
|
|
169
|
+
autoHideDuration: _propTypes.default.number,
|
|
170
|
+
|
|
171
|
+
/**
|
|
172
|
+
* Where is the snackbar placed.
|
|
173
|
+
*/
|
|
174
|
+
anchorOrigin: _propTypes.default.shape({
|
|
175
|
+
vertical: _propTypes.default.oneOf(["top", "bottom"]),
|
|
176
|
+
horizontal: _propTypes.default.oneOf(["right", "left"])
|
|
177
|
+
}),
|
|
178
|
+
|
|
179
|
+
/**
|
|
180
|
+
* Class object used to override notistack classes.
|
|
181
|
+
*/
|
|
182
|
+
notistackClassesOverride: _propTypes.default.instanceOf(Object)
|
|
183
|
+
} : void 0;
|
|
184
|
+
process.env.NODE_ENV !== "production" ? HvNotistackSnackMessage.propTypes = {
|
|
185
|
+
/**
|
|
186
|
+
* Id to be applied to the root node.
|
|
187
|
+
*/
|
|
188
|
+
id: _propTypes.default.string,
|
|
189
|
+
|
|
190
|
+
/**
|
|
191
|
+
* Your component tree.
|
|
192
|
+
*/
|
|
193
|
+
message: _propTypes.default.string,
|
|
194
|
+
|
|
195
|
+
/**
|
|
196
|
+
* Variant of the snackbar.
|
|
197
|
+
*/
|
|
198
|
+
variant: _propTypes.default.oneOf(["default", "success", "error"]),
|
|
199
|
+
|
|
200
|
+
/**
|
|
201
|
+
* Extra values to pass to the snackbar.
|
|
202
|
+
*/
|
|
203
|
+
snackbarContentProps: _propTypes.default.instanceOf(Object)
|
|
204
|
+
} : void 0;
|
|
205
|
+
var _default = HvSnackbarProvider;
|
|
206
|
+
exports.default = _default;
|
|
207
|
+
//# sourceMappingURL=SnackbarProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Snackbar/SnackbarProvider/SnackbarProvider.js"],"names":["HvNotistackSnackMessage","ref","id","message","variant","snackbarContentProps","useHvSnackbar","enqueueNotistackSnackbar","enqueueSnackbar","closeSnackbar","options","otherOptions","useStyles","notistackClassesOverride","containerRoot","padding","transition","color","fontSize","boxShadow","alignItems","fontFamily","fontWeight","lineHeight","borderRadius","letterSpacing","backgroundColor","HvSnackbarProvider","children","maxSnack","autoHideDuration","anchorOrigin","vertical","horizontal","others","classes","propTypes","PropTypes","node","isRequired","number","shape","oneOf","instanceOf","Object","string"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { makeStyles } from \"@material-ui/core\";\nimport PropTypes from \"prop-types\";\nimport { SnackbarProvider, SnackbarContent, useSnackbar } from \"notistack\";\n\nimport HvSnackbarContentWrapper from \"../SnackbarContentWrapper\";\n\nconst HvNotistackSnackMessage = forwardRef(\n ({ id, message, variant = \"success\", snackbarContentProps }, ref) => {\n return (\n <SnackbarContent ref={ref}>\n <HvSnackbarContentWrapper\n id={id}\n variant={variant}\n showIcon\n label={message}\n {...snackbarContentProps}\n />\n </SnackbarContent>\n );\n }\n);\n\n// We override notistack hook to be able to customize the snackbar that should be called.\nconst useHvSnackbar = () => {\n const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } = useSnackbar();\n const enqueueSnackbar = useCallback(\n (message, options) => {\n const { id, variant = \"success\", snackbarContentProps, ...otherOptions } = options;\n\n enqueueNotistackSnackbar(\n <HvNotistackSnackMessage\n id={id}\n message={message}\n variant={variant}\n snackbarContentProps={snackbarContentProps}\n />,\n otherOptions\n );\n },\n [enqueueNotistackSnackbar]\n );\n return useMemo(\n () => ({\n enqueueSnackbar,\n closeSnackbar,\n }),\n [enqueueSnackbar, closeSnackbar]\n );\n};\n\nconst useStyles = (notistackClassesOverride) =>\n makeStyles(() => ({\n containerRoot: {\n \"& > div > div\": {\n // Overrides notistack extra padding\n padding: \"0 !important\",\n transition: \"all 0s ease 0s !important\",\n \"& > div > div > div\": {\n color: \"inherit\",\n padding: \"0\",\n fontSize: \"inherit\",\n boxShadow: \"none\",\n alignItems: \"center\",\n fontFamily: \"inherit\",\n fontWeight: \"inherit\",\n lineHeight: \"inherit\",\n borderRadius: \"0\",\n letterSpacing: \"inherit\",\n backgroundColor: \"inherit\",\n },\n },\n },\n ...notistackClassesOverride,\n }))();\n\nconst HvSnackbarProvider = ({\n children,\n notistackClassesOverride = {},\n maxSnack = 5,\n autoHideDuration = 5000,\n anchorOrigin = {\n vertical: \"top\",\n horizontal: \"right\",\n },\n ...others\n}) => {\n const classes = useStyles(notistackClassesOverride);\n\n return (\n <SnackbarProvider\n classes={{\n ...classes,\n }}\n maxSnack={maxSnack}\n autoHideDuration={autoHideDuration}\n anchorOrigin={anchorOrigin}\n {...others}\n >\n {children}\n </SnackbarProvider>\n );\n};\n\nHvSnackbarProvider.propTypes = {\n /**\n * Your component tree.\n */\n children: PropTypes.node.isRequired,\n /**\n * Max visible snackbars.\n */\n maxSnack: PropTypes.number,\n /**\n * How much time the snackbar remains visible in milliseconds.\n */\n autoHideDuration: PropTypes.number,\n /**\n * Where is the snackbar placed.\n */\n anchorOrigin: PropTypes.shape({\n vertical: PropTypes.oneOf([\"top\", \"bottom\"]),\n horizontal: PropTypes.oneOf([\"right\", \"left\"]),\n }),\n /**\n * Class object used to override notistack classes.\n */\n notistackClassesOverride: PropTypes.instanceOf(Object),\n};\n\nHvNotistackSnackMessage.propTypes = {\n /**\n * Id to be applied to the root node.\n */\n id: PropTypes.string,\n /**\n * Your component tree.\n */\n message: PropTypes.string,\n /**\n * Variant of the snackbar.\n */\n variant: PropTypes.oneOf([\"default\", \"success\", \"error\"]),\n /**\n * Extra values to pass to the snackbar.\n */\n snackbarContentProps: PropTypes.instanceOf(Object),\n};\n\nexport default HvSnackbarProvider;\nexport { useHvSnackbar };\n"],"file":"SnackbarProvider.js"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.array.iterator.js");
|
|
4
|
+
|
|
5
|
+
require("core-js/modules/es.object.to-string.js");
|
|
6
|
+
|
|
7
|
+
require("core-js/modules/es.string.iterator.js");
|
|
8
|
+
|
|
9
|
+
require("core-js/modules/es.weak-map.js");
|
|
10
|
+
|
|
11
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
12
|
+
|
|
13
|
+
require("core-js/modules/es.object.get-own-property-descriptor.js");
|
|
14
|
+
|
|
15
|
+
require("core-js/modules/web.dom-collections.for-each.js");
|
|
16
|
+
|
|
17
|
+
require("core-js/modules/es.object.keys.js");
|
|
18
|
+
|
|
19
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
20
|
+
|
|
21
|
+
Object.defineProperty(exports, "__esModule", {
|
|
22
|
+
value: true
|
|
23
|
+
});
|
|
24
|
+
var _exportNames = {};
|
|
25
|
+
Object.defineProperty(exports, "default", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function get() {
|
|
28
|
+
return _SnackbarProvider.default;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
var _SnackbarProvider = _interopRequireWildcard(require("./SnackbarProvider"));
|
|
33
|
+
|
|
34
|
+
Object.keys(_SnackbarProvider).forEach(function (key) {
|
|
35
|
+
if (key === "default" || key === "__esModule") return;
|
|
36
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
37
|
+
if (key in exports && exports[key] === _SnackbarProvider[key]) return;
|
|
38
|
+
Object.defineProperty(exports, key, {
|
|
39
|
+
enumerable: true,
|
|
40
|
+
get: function get() {
|
|
41
|
+
return _SnackbarProvider[key];
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
47
|
+
|
|
48
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
49
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Snackbar/SnackbarProvider/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from \"./SnackbarProvider\";\nexport * from \"./SnackbarProvider\";\n"],"file":"index.js"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { Meta, Story, Preview } from "@storybook/addon-docs";
|
|
2
|
+
|
|
3
|
+
import LinkTo from "@storybook/addon-links/react";
|
|
4
|
+
|
|
5
|
+
import { Usage } from "storybook-root/blocks/Usage";
|
|
6
|
+
|
|
7
|
+
import {
|
|
8
|
+
SnackbarProvider,
|
|
9
|
+
} from "./SnackbarProvider.stories.js";
|
|
10
|
+
|
|
11
|
+
<Meta title="Components/Snackbar/Provider" />
|
|
12
|
+
|
|
13
|
+
# Snackbar Provider
|
|
14
|
+
|
|
15
|
+
The UI Kit library provides a snackbar provider
|
|
16
|
+
to control the stacking of multiple snackbars in the app.
|
|
17
|
+
|
|
18
|
+
The providers is not meant to be 100% feature complete, but instead,
|
|
19
|
+
ease the majority of use-cases we have been encountering.
|
|
20
|
+
If you need any customization or extension to the behavior,
|
|
21
|
+
please feel free to copy and customize it.
|
|
22
|
+
|
|
23
|
+
This feature needs both the *HvSnackbarProvider* provider and the hook *useHvSnackbar*.
|
|
24
|
+
The provider and the hook are wrappers of the [Notistack](https://github.com/iamhosseindhv/notistack) API.
|
|
25
|
+
|
|
26
|
+
Ideally the `HvSnackbarProvider` should be at the top of the component tree of your application.
|
|
27
|
+
This will allow the snackbar to be triggered in any page.
|
|
28
|
+
For more information of the provider API check the [notistack documentation](https://iamhosseindhv.com/notistack/api).
|
|
29
|
+
|
|
30
|
+
<Usage>{'import { HvSnackbarProvider } from "@hitachivantara/uikit-react-core";'}</Usage>
|
|
31
|
+
|
|
32
|
+
After adding the provider at the root of your app, you can call the ```useHvSnackbar``` at any
|
|
33
|
+
component inside your app. This hook will allow you to request the rendering of a snackbar through the use
|
|
34
|
+
of the ```enqueueSnackbar``` function which follows the API bellow:
|
|
35
|
+
|
|
36
|
+
parameters:
|
|
37
|
+
- `message: string | React.node`: The message to render inside the snackbar.
|
|
38
|
+
- `options: HvEnqueueOptions`: The options to configure the snackbar.
|
|
39
|
+
- `HvEnqueueOptions`:
|
|
40
|
+
- `id?: string`: The id to pass to the snackbar
|
|
41
|
+
- `variant: success | default | warning`: The color of the snackbar
|
|
42
|
+
- `snackbarContentProps?: HvSnackbarContentProps`: Extra properties to be passed onto the snackbar
|
|
43
|
+
|
|
44
|
+
output:
|
|
45
|
+
- `SnackbarKey: string | number`: How many snackbars to render.
|
|
46
|
+
|
|
47
|
+
<Usage>{'import { useHvSnackbar } from "@hitachivantara/uikit-react-core";'}</Usage>
|
|
48
|
+
|
|
49
|
+
<Preview withToolbar>
|
|
50
|
+
<Story inline story={SnackbarProvider} />
|
|
51
|
+
</Preview>
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { StandardProps } from "@material-ui/core";
|
|
2
2
|
import { HvTagProps } from "../Tag/Tag";
|
|
3
3
|
import { HvCharCounterProps } from "../Forms/CharCounter";
|
|
4
|
+
import { HvFormStatus } from "../Forms/FormElement";
|
|
4
5
|
|
|
5
|
-
import {
|
|
6
|
+
import { HvInputProps } from "..";
|
|
7
|
+
import { HvBaseInputValidationMessagesProps } from "../BaseInput";
|
|
6
8
|
|
|
7
9
|
export type HvTagsInputClassKey =
|
|
8
10
|
| "root"
|
|
@@ -12,10 +14,11 @@ export type HvTagsInputClassKey =
|
|
|
12
14
|
| "labelContainer"
|
|
13
15
|
| "label"
|
|
14
16
|
| "characterCounter"
|
|
15
|
-
| "description"
|
|
17
|
+
| "description"
|
|
18
|
+
| "error";
|
|
16
19
|
|
|
17
20
|
export interface HvTagsInputProps
|
|
18
|
-
extends StandardProps<
|
|
21
|
+
extends StandardProps<HvInputProps, HvTagsInputClassKey, "onChange" | "onBlur"> {
|
|
19
22
|
/**
|
|
20
23
|
* The label of the form element.
|
|
21
24
|
*
|
|
@@ -48,6 +51,10 @@ export interface HvTagsInputProps
|
|
|
48
51
|
* Indicates that the form element is not editable.
|
|
49
52
|
*/
|
|
50
53
|
readOnly?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Indicates that the form element is required.
|
|
56
|
+
*/
|
|
57
|
+
required?: boolean;
|
|
51
58
|
|
|
52
59
|
/**
|
|
53
60
|
* If `true` it should autofocus.
|
|
@@ -95,7 +102,29 @@ export interface HvTagsInputProps
|
|
|
95
102
|
/**
|
|
96
103
|
* Called back when the value is changed.
|
|
97
104
|
*/
|
|
98
|
-
onChange?: (
|
|
105
|
+
onChange?: (
|
|
106
|
+
event:
|
|
107
|
+
| React.ChangeEvent<HTMLInputElement>
|
|
108
|
+
| React.KeyboardEvent<HTMLInputElement>
|
|
109
|
+
| React.MouseEvent<HTMLButtonElement>
|
|
110
|
+
| React.MouseEvent<HTMLElement, MouseEvent>
|
|
111
|
+
| React.KeyboardEventHandler<HTMLElement>,
|
|
112
|
+
value: HvTagProps[]
|
|
113
|
+
) => void;
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* The status of the form element.
|
|
117
|
+
*/
|
|
118
|
+
status?: HvFormStatus;
|
|
119
|
+
/**
|
|
120
|
+
* The error message to show when `status` is "invalid".
|
|
121
|
+
*/
|
|
122
|
+
statusMessage?: React.ReactNode;
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* An Object containing the various texts associated with the input.
|
|
126
|
+
*/
|
|
127
|
+
validationMessages?: HvBaseInputValidationMessagesProps;
|
|
99
128
|
}
|
|
100
129
|
|
|
101
130
|
export default function HvTagsInput(props: HvTagsInputProps): JSX.Element | null;
|