@rio-cloud/rio-uikit 0.16.4-beta.13 → 0.16.4-beta.14
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/CustomState.d.ts +2 -5
- package/CustomState.js +2 -2
- package/EmptyState.d.ts +2 -5
- package/EmptyState.js +2 -2
- package/ErrorState.d.ts +2 -5
- package/ErrorState.js +2 -2
- package/ForbiddenState.d.ts +2 -5
- package/ForbiddenState.js +2 -2
- package/MaintenanceState.d.ts +2 -5
- package/MaintenanceState.js +2 -2
- package/NotBookedState.d.ts +2 -5
- package/NotFoundState.d.ts +2 -5
- package/NotFoundState.js +2 -2
- package/Notification.d.ts +2 -9
- package/Notification.js +2 -2
- package/NotificationsContainer.d.ts +2 -5
- package/NotificationsContainer.js +2 -2
- package/Tag.d.ts +2 -5
- package/Tag.js +2 -2
- package/TagList.d.ts +1 -5
- package/TagList.js +1 -2
- package/TagManager.d.ts +2 -5
- package/TagManager.js +2 -2
- package/Teaser.d.ts +2 -5
- package/Teaser.js +2 -2
- package/TeaserContainer.d.ts +2 -5
- package/TeaserContainer.js +2 -2
- package/TimePicker.d.ts +2 -5
- package/TimePicker.js +2 -2
- package/components/expander/ExpanderPanel.d.ts +1 -0
- package/components/expander/ExpanderPanel.js +4 -3
- package/components/notification/Notification.d.ts +32 -1
- package/components/notification/Notification.js +3 -2
- package/components/notification/NotificationsContainer.d.ts +7 -13
- package/components/notification/NotificationsContainer.js +2 -8
- package/components/states/BaseStateProps.d.ts +66 -0
- package/components/states/BaseStateProps.js +2 -0
- package/components/states/CustomState.d.ts +4 -14
- package/components/states/CustomState.js +13 -40
- package/components/states/EmptyState.d.ts +4 -8
- package/components/states/EmptyState.js +6 -6
- package/components/states/ErrorState.d.ts +4 -8
- package/components/states/ErrorState.js +6 -6
- package/components/states/ForbiddenState.d.ts +4 -8
- package/components/states/ForbiddenState.js +6 -6
- package/components/states/MaintenanceState.d.ts +4 -8
- package/components/states/MaintenanceState.js +6 -6
- package/components/states/NotBookedState.d.ts +9 -19
- package/components/states/NotBookedState.js +8 -23
- package/components/states/NotFoundState.d.ts +4 -8
- package/components/states/NotFoundState.js +6 -6
- package/components/states/StateButton.d.ts +27 -0
- package/components/states/StateButton.js +13 -0
- package/components/states/StateIcon.d.ts +7 -0
- package/components/states/StateIcon.js +4 -0
- package/components/tag/Tag.d.ts +69 -36
- package/components/tag/Tag.js +7 -30
- package/components/tag/TagList.d.ts +24 -16
- package/components/tag/TagList.js +6 -15
- package/components/tagManager/CustomSuggestionItem.d.ts +6 -12
- package/components/tagManager/CustomSuggestionItem.js +4 -9
- package/components/tagManager/TagManager.d.ts +61 -26
- package/components/tagManager/TagManager.js +22 -39
- package/components/tagManager/TagManagerItemList.d.ts +6 -13
- package/components/tagManager/TagManagerItemList.js +3 -13
- package/components/tagManager/TagManagerTag.d.ts +5 -0
- package/components/tagManager/TagManagerTag.js +1 -0
- package/components/teaser/Teaser.d.ts +93 -50
- package/components/teaser/Teaser.js +69 -118
- package/components/teaser/TeaserContainer.d.ts +25 -12
- package/components/teaser/TeaserContainer.js +10 -23
- package/components/timepicker/TimePicker.d.ts +34 -26
- package/components/timepicker/TimePicker.js +13 -30
- package/hooks/useDocumentTitle.d.ts +2 -0
- package/hooks/useDocumentTitle.js +9 -0
- package/hooks/useIsFirstRender.d.ts +2 -0
- package/hooks/useIsFirstRender.js +10 -0
- package/index.d.ts +28 -25
- package/index.js +28 -25
- package/lib/es/CustomState.d.ts +2 -5
- package/lib/es/CustomState.js +3 -2
- package/lib/es/EmptyState.d.ts +2 -5
- package/lib/es/EmptyState.js +3 -2
- package/lib/es/ErrorState.d.ts +2 -5
- package/lib/es/ErrorState.js +3 -2
- package/lib/es/ForbiddenState.d.ts +2 -5
- package/lib/es/ForbiddenState.js +3 -2
- package/lib/es/MaintenanceState.d.ts +2 -5
- package/lib/es/MaintenanceState.js +3 -2
- package/lib/es/NotBookedState.d.ts +2 -5
- package/lib/es/NotFoundState.d.ts +2 -5
- package/lib/es/NotFoundState.js +3 -2
- package/lib/es/Notification.d.ts +2 -9
- package/lib/es/Notification.js +3 -2
- package/lib/es/NotificationsContainer.d.ts +2 -5
- package/lib/es/NotificationsContainer.js +3 -2
- package/lib/es/Tag.d.ts +2 -5
- package/lib/es/Tag.js +3 -2
- package/lib/es/TagList.d.ts +1 -5
- package/lib/es/TagList.js +5 -3
- package/lib/es/TagManager.d.ts +2 -5
- package/lib/es/TagManager.js +3 -2
- package/lib/es/Teaser.d.ts +2 -5
- package/lib/es/Teaser.js +3 -2
- package/lib/es/TeaserContainer.d.ts +2 -5
- package/lib/es/TeaserContainer.js +3 -2
- package/lib/es/TimePicker.d.ts +2 -5
- package/lib/es/TimePicker.js +3 -2
- package/lib/es/components/expander/ExpanderPanel.d.ts +1 -0
- package/lib/es/components/expander/ExpanderPanel.js +4 -3
- package/lib/es/components/notification/Notification.d.ts +32 -1
- package/lib/es/components/notification/Notification.js +3 -2
- package/lib/es/components/notification/NotificationsContainer.d.ts +7 -13
- package/lib/es/components/notification/NotificationsContainer.js +2 -8
- package/lib/es/components/states/BaseStateProps.d.ts +66 -0
- package/lib/es/components/states/BaseStateProps.js +4 -0
- package/lib/es/components/states/CustomState.d.ts +4 -14
- package/lib/es/components/states/CustomState.js +14 -41
- package/lib/es/components/states/EmptyState.d.ts +4 -8
- package/lib/es/components/states/EmptyState.js +5 -6
- package/lib/es/components/states/ErrorState.d.ts +4 -8
- package/lib/es/components/states/ErrorState.js +5 -6
- package/lib/es/components/states/ForbiddenState.d.ts +4 -8
- package/lib/es/components/states/ForbiddenState.js +5 -6
- package/lib/es/components/states/MaintenanceState.d.ts +4 -8
- package/lib/es/components/states/MaintenanceState.js +5 -6
- package/lib/es/components/states/NotBookedState.d.ts +9 -19
- package/lib/es/components/states/NotBookedState.js +7 -22
- package/lib/es/components/states/NotFoundState.d.ts +4 -8
- package/lib/es/components/states/NotFoundState.js +5 -6
- package/lib/es/components/states/StateButton.d.ts +27 -0
- package/lib/es/components/states/StateButton.js +16 -0
- package/lib/es/components/states/StateIcon.d.ts +7 -0
- package/lib/es/components/states/StateIcon.js +6 -0
- package/lib/es/components/tag/Tag.d.ts +69 -36
- package/lib/es/components/tag/Tag.js +7 -30
- package/lib/es/components/tag/TagList.d.ts +24 -16
- package/lib/es/components/tag/TagList.js +6 -15
- package/lib/es/components/tagManager/CustomSuggestionItem.d.ts +6 -12
- package/lib/es/components/tagManager/CustomSuggestionItem.js +4 -9
- package/lib/es/components/tagManager/TagManager.d.ts +61 -26
- package/lib/es/components/tagManager/TagManager.js +22 -39
- package/lib/es/components/tagManager/TagManagerItemList.d.ts +6 -13
- package/lib/es/components/tagManager/TagManagerItemList.js +3 -13
- package/lib/es/components/tagManager/TagManagerTag.d.ts +5 -0
- package/lib/es/components/tagManager/TagManagerTag.js +2 -0
- package/lib/es/components/teaser/Teaser.d.ts +93 -50
- package/lib/es/components/teaser/Teaser.js +69 -120
- package/lib/es/components/teaser/TeaserContainer.d.ts +25 -12
- package/lib/es/components/teaser/TeaserContainer.js +10 -23
- package/lib/es/components/timepicker/TimePicker.d.ts +34 -26
- package/lib/es/components/timepicker/TimePicker.js +13 -30
- package/lib/es/hooks/useDocumentTitle.d.ts +2 -0
- package/lib/es/hooks/useDocumentTitle.js +11 -0
- package/lib/es/hooks/useIsFirstRender.d.ts +2 -0
- package/lib/es/hooks/useIsFirstRender.js +12 -0
- package/lib/es/index.d.ts +28 -25
- package/lib/es/index.js +46 -30
- package/lib/es/types.d.ts +1 -112
- package/lib/es/useDocumentTitle.d.ts +2 -0
- package/lib/es/useDocumentTitle.js +7 -0
- package/lib/es/useIsFirstRender.d.ts +2 -0
- package/lib/es/useIsFirstRender.js +7 -0
- package/lib/es/version.json +1 -1
- package/package.json +28 -22
- package/types.d.ts +1 -112
- package/useDocumentTitle.d.ts +2 -0
- package/useDocumentTitle.js +2 -0
- package/useIsFirstRender.d.ts +2 -0
- package/useIsFirstRender.js +2 -0
- package/version.json +1 -1
|
@@ -2,17 +2,12 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
// @ts-ignore-next-line importsNotUsedAsValues
|
|
6
|
+
require("react");
|
|
7
7
|
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
8
8
|
const CustomSuggestionItem = ({ value, placeholder }) => {
|
|
9
|
-
const wrapperClassNames = (0, classnames_1.default)('display-flex align-items-center
|
|
10
|
-
const iconClassNames = (0, classnames_1.default)('margin-left--5 margin-right-5 margin-top--1
|
|
9
|
+
const wrapperClassNames = (0, classnames_1.default)('display-flex align-items-center padding-top-5 padding-bottom-5', !value && 'text-color-gray');
|
|
10
|
+
const iconClassNames = (0, classnames_1.default)('margin-left--5 margin-right-5 margin-top--1 rioglyph', value ? 'rioglyph-plus' : 'rioglyph-arrow-up');
|
|
11
11
|
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: wrapperClassNames }, { children: [(0, jsx_runtime_1.jsx)("span", { className: iconClassNames }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-italic' }, { children: value || placeholder }))] })));
|
|
12
12
|
};
|
|
13
|
-
CustomSuggestionItem.defaultProps = {};
|
|
14
|
-
CustomSuggestionItem.propTypes = {
|
|
15
|
-
value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
|
|
16
|
-
placeholder: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
|
|
17
|
-
};
|
|
18
13
|
exports.default = CustomSuggestionItem;
|
|
@@ -1,27 +1,62 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TagManagerTag } from './TagManagerTag';
|
|
3
|
+
export type { TagManagerTag } from './TagManagerTag';
|
|
4
|
+
export type TagManagerProps = {
|
|
5
|
+
/**
|
|
6
|
+
* The list of existing tags to be listed.
|
|
7
|
+
*/
|
|
8
|
+
tagList: TagManagerTag[];
|
|
9
|
+
/**
|
|
10
|
+
* The list of tags used as suggestions for the built-in AutoSuggest.
|
|
11
|
+
*/
|
|
12
|
+
tagSuggestions: TagManagerTag[];
|
|
13
|
+
/**
|
|
14
|
+
* Callback function triggered when the list of tags changes.
|
|
15
|
+
*
|
|
16
|
+
* For instance when a tag was added by the AutoSuggest or when a tag is marked to be deleted.
|
|
17
|
+
*
|
|
18
|
+
* This function returns the updated list of tags where tags may have additional properties indicating whether they
|
|
19
|
+
* have to be removed or added to your data.
|
|
20
|
+
*
|
|
21
|
+
* @param newTags The updated list of tags.
|
|
22
|
+
*/
|
|
23
|
+
onTagListChange?: (newTags: TagManagerTag[]) => void;
|
|
24
|
+
/**
|
|
25
|
+
* The placeholder message for the AutoSuggest input.
|
|
26
|
+
*/
|
|
27
|
+
placeholder?: string;
|
|
28
|
+
/**
|
|
29
|
+
* The placeholder message for custom tag in the AutoSuggest dropdown.
|
|
30
|
+
*
|
|
31
|
+
* This is only relevant when having custom tags enabled.
|
|
32
|
+
*/
|
|
33
|
+
customTagPlaceholder?: string;
|
|
34
|
+
/**
|
|
35
|
+
* The header message for existing tags in the AutoSuggest dropdown.
|
|
36
|
+
*
|
|
37
|
+
* This is only relevant when having custom tags enabled.
|
|
38
|
+
*/
|
|
39
|
+
dropdownSeparatorText?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Enables or disabled to add custom tags from the AutoSuggest dropdown.
|
|
42
|
+
*
|
|
43
|
+
* @default true
|
|
44
|
+
*/
|
|
45
|
+
useCustomTags?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Define whether the input shall be shown and to allow to select tags.
|
|
48
|
+
*
|
|
49
|
+
* @default true
|
|
50
|
+
*/
|
|
51
|
+
showInput?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* The message to be shown when no tag suggestion could be found for the entered value of the AutoSuggest.
|
|
54
|
+
*/
|
|
55
|
+
noItemMessage?: string | React.ReactNode;
|
|
56
|
+
/**
|
|
57
|
+
* Additional classes to be set on the wrapper element.
|
|
58
|
+
*/
|
|
59
|
+
className?: string;
|
|
60
|
+
};
|
|
61
|
+
declare const TagManager: (props: TagManagerProps) => import("react/jsx-runtime").JSX.Element;
|
|
1
62
|
export default TagManager;
|
|
2
|
-
declare function TagManager(props: any): import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
declare namespace TagManager {
|
|
4
|
-
namespace defaultProps {
|
|
5
|
-
const useCustomTags: boolean;
|
|
6
|
-
const showInput: boolean;
|
|
7
|
-
}
|
|
8
|
-
namespace propTypes {
|
|
9
|
-
export const tagList: PropTypes.Validator<(PropTypes.InferProps<{
|
|
10
|
-
label: PropTypes.Requireable<string>;
|
|
11
|
-
}> | null | undefined)[]>;
|
|
12
|
-
export const tagSuggestions: PropTypes.Validator<(PropTypes.InferProps<{
|
|
13
|
-
label: PropTypes.Requireable<string>;
|
|
14
|
-
}> | null | undefined)[]>;
|
|
15
|
-
export const onTagListChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
16
|
-
export const placeholder: PropTypes.Requireable<string>;
|
|
17
|
-
export const customTagPlaceholder: PropTypes.Requireable<string>;
|
|
18
|
-
export const dropdownSeparatorText: PropTypes.Requireable<string>;
|
|
19
|
-
const useCustomTags_1: PropTypes.Requireable<boolean>;
|
|
20
|
-
export { useCustomTags_1 as useCustomTags };
|
|
21
|
-
export const noItemMessage: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
|
22
|
-
const showInput_1: PropTypes.Requireable<boolean>;
|
|
23
|
-
export { showInput_1 as showInput };
|
|
24
|
-
export const className: PropTypes.Requireable<string>;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
import PropTypes from "prop-types";
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 =
|
|
6
|
-
const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
|
|
5
|
+
const react_1 = require("react");
|
|
7
6
|
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
8
7
|
const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
|
|
9
8
|
const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
|
|
10
9
|
const compact_1 = tslib_1.__importDefault(require("lodash/fp/compact"));
|
|
10
|
+
const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
|
|
11
11
|
const AutoSuggest_1 = tslib_1.__importDefault(require("../autosuggest/AutoSuggest"));
|
|
12
12
|
const CustomSuggestionItem_1 = tslib_1.__importDefault(require("./CustomSuggestionItem"));
|
|
13
13
|
const TagManagerItemList_1 = tslib_1.__importDefault(require("./TagManagerItemList"));
|
|
@@ -16,26 +16,29 @@ const getCustomSuggestion = (value, placeholder) => ({
|
|
|
16
16
|
label: value,
|
|
17
17
|
disabled: (0, isEmpty_1.default)(value),
|
|
18
18
|
});
|
|
19
|
-
const getSuggestionSeparator = dropdownSeparatorText => ({
|
|
19
|
+
const getSuggestionSeparator = (dropdownSeparatorText) => ({
|
|
20
20
|
header: true,
|
|
21
21
|
label: dropdownSeparatorText,
|
|
22
22
|
});
|
|
23
|
-
const cleanupTagState = tag => {
|
|
23
|
+
const cleanupTagState = (tag) => {
|
|
24
24
|
delete tag.toAdd;
|
|
25
25
|
delete tag.toRemove;
|
|
26
26
|
return tag;
|
|
27
27
|
};
|
|
28
28
|
const hasTagAlreadySelected = (tags, newSuggestion) => !!tags.find(tag => tag.label === newSuggestion.label);
|
|
29
|
-
const getNewSuggestion = suggestion => {
|
|
29
|
+
const getNewSuggestion = (suggestion) => {
|
|
30
30
|
const newSuggestion = suggestion.customSuggestion ? { label: suggestion.label } : suggestion;
|
|
31
31
|
newSuggestion.toAdd = true;
|
|
32
32
|
return newSuggestion;
|
|
33
33
|
};
|
|
34
34
|
const buildSuggestions = (useCustomTags, customTagPlaceholder, dropdownSeparatorText) => (value, suggestions) => {
|
|
35
|
-
const cleanedSuggestions = suggestions.map(cleanupTagState);
|
|
35
|
+
const cleanedSuggestions = suggestions.map(cleanupTagState).filter(item => item.label);
|
|
36
36
|
return (0, compact_1.default)([
|
|
37
37
|
useCustomTags && getCustomSuggestion(value, customTagPlaceholder),
|
|
38
|
-
useCustomTags &&
|
|
38
|
+
useCustomTags &&
|
|
39
|
+
!(0, isEmpty_1.default)(cleanedSuggestions) &&
|
|
40
|
+
!(0, isEmpty_1.default)(dropdownSeparatorText) &&
|
|
41
|
+
getSuggestionSeparator(dropdownSeparatorText),
|
|
39
42
|
...cleanedSuggestions,
|
|
40
43
|
]);
|
|
41
44
|
};
|
|
@@ -51,31 +54,32 @@ const filterSuggestions = (suggestions, selectedTagNames, value = '') => suggest
|
|
|
51
54
|
!suggestion.header &&
|
|
52
55
|
!suggestion.customSuggestion);
|
|
53
56
|
});
|
|
54
|
-
const TagManager = props => {
|
|
55
|
-
const { tagList, tagSuggestions, placeholder, className, customTagPlaceholder, dropdownSeparatorText, onTagListChange, useCustomTags, noItemMessage, showInput } = props, remainingProps = tslib_1.__rest(props, ["tagList", "tagSuggestions", "placeholder", "className", "customTagPlaceholder", "dropdownSeparatorText", "onTagListChange", "useCustomTags", "noItemMessage", "showInput"]);
|
|
57
|
+
const TagManager = (props) => {
|
|
58
|
+
const { tagList, tagSuggestions, placeholder, className, customTagPlaceholder, dropdownSeparatorText, onTagListChange = noop_1.default, useCustomTags = true, noItemMessage, showInput = true } = props, remainingProps = tslib_1.__rest(props, ["tagList", "tagSuggestions", "placeholder", "className", "customTagPlaceholder", "dropdownSeparatorText", "onTagListChange", "useCustomTags", "noItemMessage", "showInput"]);
|
|
56
59
|
const [tags, setTags] = (0, react_1.useState)(tagList);
|
|
57
60
|
const [inputValue, setInputValue] = (0, react_1.useState)('');
|
|
58
|
-
const [currentSuggestions, setCurrentSuggestions] = (0, react_1.useState)();
|
|
61
|
+
const [currentSuggestions, setCurrentSuggestions] = (0, react_1.useState)([]);
|
|
59
62
|
const getSuggestions = buildSuggestions(useCustomTags, customTagPlaceholder, dropdownSeparatorText);
|
|
60
63
|
// Update internal list of tags when they change from the outside i.e. when they have been saved,
|
|
61
64
|
// additionally, cleanup previous state for adding or removing tags
|
|
62
|
-
(0, react_1.useEffect)(() => setTags(tagList.map(cleanupTagState)), [tagList]);
|
|
65
|
+
(0, react_1.useEffect)(() => setTags((0, compact_1.default)(tagList.map(cleanupTagState))), [tagList]);
|
|
63
66
|
// build suggestion when passed tag suggestions passed change i.e. when a tag got selected and removed from the list
|
|
64
67
|
(0, react_1.useEffect)(() => setCurrentSuggestions(getSuggestions(inputValue, tagSuggestions)), [tagSuggestions]);
|
|
65
68
|
// build suggestions when input value change as it should filter the list on suggestions
|
|
66
69
|
(0, react_1.useEffect)(() => {
|
|
67
|
-
const selectedTagNames = tags.map(tag => tag.label);
|
|
70
|
+
const selectedTagNames = (0, compact_1.default)(tags.map(tag => tag.label));
|
|
68
71
|
const value = inputValue || '';
|
|
69
72
|
const filteredList = filterSuggestions(tagSuggestions, selectedTagNames, value);
|
|
70
73
|
setCurrentSuggestions(getSuggestions(value, filteredList));
|
|
71
74
|
}, [tags, inputValue, tagSuggestions]);
|
|
72
|
-
const updateTags = updatedTags => {
|
|
75
|
+
const updateTags = (updatedTags) => {
|
|
73
76
|
setTags(updatedTags);
|
|
74
77
|
// Notify outside component
|
|
78
|
+
console.log(updatedTags);
|
|
75
79
|
onTagListChange(updatedTags);
|
|
76
80
|
};
|
|
77
81
|
const handleSuggestionsChange = ({ value }) => setInputValue(value);
|
|
78
|
-
const handleSuggestionSelected = (
|
|
82
|
+
const handleSuggestionSelected = (_, { suggestion }) => {
|
|
79
83
|
setInputValue('');
|
|
80
84
|
const newSuggestion = getNewSuggestion(suggestion);
|
|
81
85
|
if (hasTagAlreadySelected(tags, newSuggestion)) {
|
|
@@ -85,7 +89,7 @@ const TagManager = props => {
|
|
|
85
89
|
updateTags([...tags, newSuggestion]);
|
|
86
90
|
};
|
|
87
91
|
const updateTagsWithSelectedTag = (tagItems, selectedTag) => {
|
|
88
|
-
|
|
92
|
+
return tagItems.map(tag => {
|
|
89
93
|
if ((0, isEqual_1.default)(tag.label, selectedTag.label)) {
|
|
90
94
|
// update tag and mark as "to remove"
|
|
91
95
|
if (tag.toRemove) {
|
|
@@ -97,9 +101,8 @@ const TagManager = props => {
|
|
|
97
101
|
}
|
|
98
102
|
return tag;
|
|
99
103
|
});
|
|
100
|
-
return updatedTags;
|
|
101
104
|
};
|
|
102
|
-
const handleRemoveFromTagList = selectedTag => {
|
|
105
|
+
const handleRemoveFromTagList = (selectedTag) => {
|
|
103
106
|
if (selectedTag.toAdd) {
|
|
104
107
|
updateTags(tags.filter(tag => !(0, isEqual_1.default)(tag, selectedTag)));
|
|
105
108
|
}
|
|
@@ -113,27 +116,7 @@ const TagManager = props => {
|
|
|
113
116
|
value: inputValue,
|
|
114
117
|
tabIndex: 1,
|
|
115
118
|
};
|
|
116
|
-
const
|
|
117
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: (0, classnames_1.default)('TagManager', className) }, { children: [showInput && ((0, jsx_runtime_1.jsx)(AutoSuggest_1.default, { className:
|
|
118
|
-
};
|
|
119
|
-
TagManager.defaultProps = {
|
|
120
|
-
useCustomTags: true,
|
|
121
|
-
showInput: true,
|
|
122
|
-
};
|
|
123
|
-
TagManager.propTypes = {
|
|
124
|
-
tagList: prop_types_1.default.arrayOf(prop_types_1.default.shape({
|
|
125
|
-
label: prop_types_1.default.string,
|
|
126
|
-
})).isRequired,
|
|
127
|
-
tagSuggestions: prop_types_1.default.arrayOf(prop_types_1.default.shape({
|
|
128
|
-
label: prop_types_1.default.string,
|
|
129
|
-
})).isRequired,
|
|
130
|
-
onTagListChange: prop_types_1.default.func,
|
|
131
|
-
placeholder: prop_types_1.default.string,
|
|
132
|
-
customTagPlaceholder: prop_types_1.default.string,
|
|
133
|
-
dropdownSeparatorText: prop_types_1.default.string,
|
|
134
|
-
useCustomTags: prop_types_1.default.bool,
|
|
135
|
-
noItemMessage: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
|
|
136
|
-
showInput: prop_types_1.default.bool,
|
|
137
|
-
className: prop_types_1.default.string,
|
|
119
|
+
const autoSuggestClasses = (0, classnames_1.default)(!(0, isEmpty_1.default)(tags) && 'margin-bottom-10');
|
|
120
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: (0, classnames_1.default)('TagManager', className) }, { children: [showInput && ((0, jsx_runtime_1.jsx)(AutoSuggest_1.default, { className: autoSuggestClasses, inputProps: inputProps, suggestions: currentSuggestions, onSuggestionSelected: handleSuggestionSelected, onSuggestionsFetchRequested: handleSuggestionsChange, openOnFocus: true, noItemMessage: noItemMessage })), (0, jsx_runtime_1.jsx)(TagManagerItemList_1.default, { tags: tags, onRemoveFromTagList: handleRemoveFromTagList })] })));
|
|
138
121
|
};
|
|
139
122
|
exports.default = TagManager;
|
|
@@ -1,14 +1,7 @@
|
|
|
1
|
+
import type { TagManagerTag } from './TagManagerTag';
|
|
2
|
+
export type TagManagerItemListProps = {
|
|
3
|
+
tags: TagManagerTag[];
|
|
4
|
+
onRemoveFromTagList?: (tag: TagManagerTag) => void;
|
|
5
|
+
};
|
|
6
|
+
declare const TagManagerItemList: (props: TagManagerItemListProps) => import("react/jsx-runtime").JSX.Element;
|
|
1
7
|
export default TagManagerItemList;
|
|
2
|
-
declare function TagManagerItemList(props: any): import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
declare namespace TagManagerItemList {
|
|
4
|
-
const defaultProps: {};
|
|
5
|
-
namespace propTypes {
|
|
6
|
-
const tags: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
7
|
-
label: PropTypes.Requireable<string>;
|
|
8
|
-
toAdd: PropTypes.Requireable<boolean>;
|
|
9
|
-
toRemove: PropTypes.Requireable<boolean>;
|
|
10
|
-
}> | null | undefined)[]>;
|
|
11
|
-
const onRemoveFromTagList: PropTypes.Requireable<(...args: any[]) => any>;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
import PropTypes from "prop-types";
|
|
@@ -2,25 +2,15 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
|
|
6
|
-
const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
|
|
5
|
+
require("react");
|
|
7
6
|
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
8
7
|
const TagList_1 = tslib_1.__importDefault(require("../tag/TagList"));
|
|
9
8
|
const Tag_1 = tslib_1.__importDefault(require("../tag/Tag"));
|
|
10
|
-
const TagManagerItemList = props => {
|
|
11
|
-
const { tags, onRemoveFromTagList } = props;
|
|
9
|
+
const TagManagerItemList = (props) => {
|
|
10
|
+
const { tags, onRemoveFromTagList = () => { } } = props;
|
|
12
11
|
return ((0, jsx_runtime_1.jsx)(TagList_1.default, Object.assign({ inline: false }, { children: tags.map(tag => {
|
|
13
12
|
const tagClasses = (0, classnames_1.default)(tag.toAdd && 'border-color-success text-color-success', tag.toRemove && 'border-color-danger text-color-danger');
|
|
14
13
|
return ((0, jsx_runtime_1.jsx)(Tag_1.default, Object.assign({ className: tagClasses, deletable: true, round: false, onClick: () => onRemoveFromTagList(tag) }, { children: tag.label }), tag.label));
|
|
15
14
|
}) })));
|
|
16
15
|
};
|
|
17
|
-
TagManagerItemList.defaultProps = {};
|
|
18
|
-
TagManagerItemList.propTypes = {
|
|
19
|
-
tags: prop_types_1.default.arrayOf(prop_types_1.default.shape({
|
|
20
|
-
label: prop_types_1.default.string,
|
|
21
|
-
toAdd: prop_types_1.default.bool,
|
|
22
|
-
toRemove: prop_types_1.default.bool,
|
|
23
|
-
})),
|
|
24
|
-
onRemoveFromTagList: prop_types_1.default.func,
|
|
25
|
-
};
|
|
26
16
|
exports.default = TagManagerItemList;
|
|
@@ -1,51 +1,94 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
getPlaceholder(image?: {}): "\ndata:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoCAQAAADnqhxvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODSFLsnJ3AAAPvUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDgTLCM9BHrU/AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTExLTE1VDEzOjEzOjMzKzAxOjAwgedH5AAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0xMS0xNVQxMzoxMzozMyswMTowMPC6/1gAAAAASUVORK5CYII=\n" | "\ndata:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAFNCAQAAAA55I0bAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODDQ/dKfdAAAFUUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIO/GUDmajv5qgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMTVUMTM6MTI6NTIrMDE6MDAOPS7pAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTE1VDEzOjEyOjUyKzAxOjAwf2CWVQAAAABJRU5ErkJggg==\n" | "\ndata:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAKaCAQAAAAHN7sRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODALwzjJEAAAKhUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIOCbQGM8brNAQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMTVUMTM6MTI6MDIrMDE6MDBG3SCNAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTE1VDEzOjEyOjAyKzAxOjAwN4CYMQAAAABJRU5ErkJggg==\n" | "\ndata:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAIwCAQAAAC/sImZAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiDBwMBx70M0fPAAAI3UlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAg55rgVfT+Sm9AAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0xMi0yOFQxMTowNzozMCswMTowMOGwCPwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMTItMjhUMTE6MDc6MzArMDE6MDCQ7bBAAAAAAElFTkSuQmCC\n";
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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
|
-
|
|
1
|
+
import React, { type SyntheticEvent } from 'react';
|
|
2
|
+
import { type ButtonProps } from '../button/Button';
|
|
3
|
+
export type TeaserProps = {
|
|
4
|
+
/**
|
|
5
|
+
* The headline for the teaser.
|
|
6
|
+
*/
|
|
7
|
+
headline?: string | React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* The actual content to show e.g. some kind of text.
|
|
10
|
+
*/
|
|
11
|
+
content?: string | React.ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Defines an image to render.
|
|
14
|
+
*/
|
|
15
|
+
image?: {
|
|
16
|
+
/**
|
|
17
|
+
* The src URL for the image.
|
|
18
|
+
*/
|
|
19
|
+
src: string;
|
|
20
|
+
/**
|
|
21
|
+
* The alternate text for the image.
|
|
22
|
+
*/
|
|
23
|
+
alt?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Defines whether the image is on the left or right side of the component.
|
|
26
|
+
*
|
|
27
|
+
* Possible values are: 'left' and 'right'.
|
|
28
|
+
*/
|
|
29
|
+
align?: 'left' | 'right';
|
|
30
|
+
/**
|
|
31
|
+
* Callback function for the image.
|
|
32
|
+
*/
|
|
33
|
+
onClick?: VoidFunction;
|
|
34
|
+
/**
|
|
35
|
+
* Ratio of the transparent image placeholder.
|
|
36
|
+
*
|
|
37
|
+
* Possible values are "1:1", "3:1", "3:2" and "16:9".
|
|
38
|
+
*/
|
|
39
|
+
aspectRatio?: '1:1' | '3:1' | '3:2' | '16:9';
|
|
40
|
+
/**
|
|
41
|
+
* Additional classes added to the image wrapper.
|
|
42
|
+
*/
|
|
43
|
+
className?: string;
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* Defines a button to render with.
|
|
47
|
+
*/
|
|
48
|
+
button?: {
|
|
49
|
+
/**
|
|
50
|
+
* The text content for the button.
|
|
51
|
+
*/
|
|
52
|
+
text?: string | React.ReactNode;
|
|
53
|
+
/**
|
|
54
|
+
* The button style.
|
|
55
|
+
*
|
|
56
|
+
* See the {@link ButtonProps} definition for possible values.
|
|
57
|
+
*
|
|
58
|
+
* @default 'primary'
|
|
59
|
+
*/
|
|
60
|
+
bsStyle?: ButtonProps['bsStyle'];
|
|
61
|
+
/**
|
|
62
|
+
* Callback function for the button.
|
|
63
|
+
*/
|
|
64
|
+
onClick?: (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
65
|
+
/**
|
|
66
|
+
* Additional classes added to the button.
|
|
67
|
+
*/
|
|
68
|
+
className?: string;
|
|
69
|
+
};
|
|
70
|
+
/**
|
|
71
|
+
* Defines where the teaser content is aligned including headline and image.
|
|
72
|
+
*
|
|
73
|
+
* Possible values are: 'top' and 'center'.
|
|
74
|
+
*
|
|
75
|
+
* @default 'top'
|
|
76
|
+
*/
|
|
77
|
+
verticalAlignment?: 'top' | 'center';
|
|
78
|
+
/**
|
|
79
|
+
* Defines how the teaser content is segmented.
|
|
80
|
+
*
|
|
81
|
+
* Possible values are: '50', '25:75', '75:25' and '100'.
|
|
82
|
+
*/
|
|
83
|
+
segmentation?: '50' | '25:75' | '75:25' | '100';
|
|
84
|
+
/**
|
|
85
|
+
* Optional content for footer in case the prop "button" is not sufficient.
|
|
86
|
+
*/
|
|
87
|
+
footer?: string | React.ReactNode;
|
|
88
|
+
/**
|
|
89
|
+
* Additional classes added to the wrapper.
|
|
90
|
+
*/
|
|
91
|
+
className?: string;
|
|
92
|
+
};
|
|
93
|
+
declare const Teaser: (props: TeaserProps) => import("react/jsx-runtime").JSX.Element;
|
|
48
94
|
export default Teaser;
|
|
49
|
-
import React from "react";
|
|
50
|
-
declare const TOP: "top";
|
|
51
|
-
import PropTypes from "prop-types";
|