@semcore/feedback-form 6.42.2 → 6.43.0-prerelease.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 +6 -0
- package/lib/cjs/FeedbackForm.js +22 -28
- package/lib/cjs/FeedbackForm.js.map +1 -1
- package/lib/cjs/component/checkbox-button/CheckboxButton.js +34 -22
- package/lib/cjs/component/checkbox-button/CheckboxButton.js.map +1 -1
- package/lib/cjs/component/feedback-item/FeedbackItem.js +8 -8
- package/lib/cjs/component/feedback-item/FeedbackItem.js.map +1 -1
- package/lib/cjs/component/feedback-rating/FeedbackRating.js +63 -71
- package/lib/cjs/component/feedback-rating/FeedbackRating.js.map +1 -1
- package/lib/cjs/component/feedback-rating/FeedbackRating.type.js.map +1 -1
- package/lib/cjs/component/slider-rating/SliderRating.js +37 -47
- package/lib/cjs/component/slider-rating/SliderRating.js.map +1 -1
- package/lib/cjs/component/submit-button/SubmitButton.js +1 -1
- package/lib/cjs/component/submit-button/SubmitButton.js.map +1 -1
- package/lib/cjs/index.d.js +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/checkbox-button.shadow.css +2 -2
- package/lib/cjs/style/feedback-form.shadow.css +3 -3
- package/lib/cjs/style/feedback-rating.shadow.css +8 -0
- package/lib/cjs/style/slider-rating.shadow.css +3 -8
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js +4 -5
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/es6/FeedbackForm.js +19 -22
- package/lib/es6/FeedbackForm.js.map +1 -1
- package/lib/es6/component/checkbox-button/CheckboxButton.js +31 -16
- package/lib/es6/component/checkbox-button/CheckboxButton.js.map +1 -1
- package/lib/es6/component/feedback-item/FeedbackItem.js +7 -7
- package/lib/es6/component/feedback-item/FeedbackItem.js.map +1 -1
- package/lib/es6/component/feedback-rating/FeedbackRating.js +56 -61
- package/lib/es6/component/feedback-rating/FeedbackRating.js.map +1 -1
- package/lib/es6/component/feedback-rating/FeedbackRating.type.js.map +1 -1
- package/lib/es6/component/slider-rating/SliderRating.js +33 -40
- package/lib/es6/component/slider-rating/SliderRating.js.map +1 -1
- package/lib/es6/component/submit-button/SubmitButton.js +1 -1
- package/lib/es6/component/submit-button/SubmitButton.js.map +1 -1
- package/lib/es6/index.d.js +0 -3
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/checkbox-button.shadow.css +2 -2
- package/lib/es6/style/feedback-form.shadow.css +3 -3
- package/lib/es6/style/feedback-rating.shadow.css +8 -0
- package/lib/es6/style/slider-rating.shadow.css +3 -8
- package/lib/es6/translations/__intergalactic-dynamic-locales.js +2 -2
- package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/esm/FeedbackForm.mjs +27 -31
- package/lib/esm/component/checkbox-button/CheckboxButton.mjs +34 -22
- package/lib/esm/component/feedback-item/FeedbackItem.mjs +6 -6
- package/lib/esm/component/feedback-rating/FeedbackRating.mjs +52 -64
- package/lib/esm/component/slider-rating/SliderRating.mjs +37 -45
- package/lib/esm/style/checkbox-button.shadow.css +2 -2
- package/lib/esm/style/feedback-form.shadow.css +3 -3
- package/lib/esm/style/feedback-rating.shadow.css +8 -0
- package/lib/esm/style/slider-rating.shadow.css +3 -8
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +2 -2
- package/lib/types/component/checkbox-button/CheckboxButton.d.ts +1 -3
- package/lib/types/component/feedback-item/FeedbackItem.d.ts +3 -3
- package/lib/types/component/feedback-rating/FeedbackRating.d.ts +19 -184
- package/lib/types/component/feedback-rating/FeedbackRating.type.d.ts +35 -26
- package/lib/types/component/slider-rating/SliderRating.d.ts +3 -3
- package/lib/types/component/submit-button/SubmitButton.d.ts +1 -1
- package/lib/types/index.d.ts +6 -15
- package/package.json +17 -17
|
@@ -1,73 +1,67 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import
|
|
4
|
+
import _callSuper from "@babel/runtime/helpers/esm/callSuper";
|
|
5
5
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
|
-
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
7
6
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
8
|
-
import { sstyled } from "@semcore/
|
|
9
|
-
import
|
|
7
|
+
import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
|
|
8
|
+
import { Flex, Box } from "@semcore/base-components";
|
|
9
|
+
import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
|
|
10
|
+
import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
|
|
10
11
|
import React from "react";
|
|
11
|
-
import { Box, Flex } from "@semcore/flex-box";
|
|
12
|
-
import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
|
|
13
|
-
import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
|
|
14
|
-
import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
|
|
15
12
|
import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
|
|
16
13
|
/*!__reshadow-styles__:"../../style/slider-rating.shadow.css"*/
|
|
17
14
|
var style = (
|
|
18
15
|
/*__reshadow_css_start__*/
|
|
19
16
|
(sstyled.insert(
|
|
20
17
|
/*__inner_css_start__*/
|
|
21
|
-
".
|
|
18
|
+
".___SSliderRating_d9wy7_gg_ .___SStar_d9wy7_gg_{transition:all calc(var(--intergalactic-duration-control, 200)*1ms) ease-out}.___SSliderRating_d9wy7_gg_:focus-visible .___SStar_d9wy7_gg_.__hovered_d9wy7_gg_{cursor:pointer;transform:scale(1.3)}@media (hover:hover){.___SSliderRating_d9wy7_gg_ .___SStar_d9wy7_gg_:hover{cursor:pointer;transform:scale(1.3)}.___SSliderRating_d9wy7_gg_.__readonly_d9wy7_gg_ .___SStar_d9wy7_gg_:hover{cursor:default;transform:none;transition:none}}.___SStar_d9wy7_gg_.__filled_d9wy7_gg_:active{animation:wobble .8s ease-in-out}.___SStar_d9wy7_gg_ path{fill:var(--intergalactic-slider-rating-normal, rgb(157, 159, 158))}.___SStar_d9wy7_gg_.__filled_d9wy7_gg_ path{stroke-width:0;fill:var(--intergalactic-slider-rating-hover-active, rgb(168, 106, 254))}",
|
|
22
19
|
/*__inner_css_end__*/
|
|
23
|
-
"
|
|
20
|
+
"d9wy7_gg_"
|
|
24
21
|
), /*__reshadow_css_end__*/
|
|
25
22
|
{
|
|
26
|
-
"__SSliderRating": "
|
|
27
|
-
"__SStar": "
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"_filled": "__filled_1eilm_gg_"
|
|
23
|
+
"__SSliderRating": "___SSliderRating_d9wy7_gg_",
|
|
24
|
+
"__SStar": "___SStar_d9wy7_gg_",
|
|
25
|
+
"_hovered": "__hovered_d9wy7_gg_",
|
|
26
|
+
"_readonly": "__readonly_d9wy7_gg_",
|
|
27
|
+
"_filled": "__filled_d9wy7_gg_"
|
|
32
28
|
})
|
|
33
29
|
);
|
|
34
30
|
var MIN = 1;
|
|
35
31
|
var MAX = 5;
|
|
36
|
-
var SliderRatingRoot = /* @__PURE__ */ function(_Component) {
|
|
37
|
-
_inherits(SliderRatingRoot2, _Component);
|
|
38
|
-
var _super = _createSuper(SliderRatingRoot2);
|
|
32
|
+
var SliderRatingRoot = /* @__PURE__ */ (function(_Component) {
|
|
39
33
|
function SliderRatingRoot2() {
|
|
40
34
|
var _this;
|
|
41
35
|
_classCallCheck(this, SliderRatingRoot2);
|
|
42
36
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
43
37
|
args[_key] = arguments[_key];
|
|
44
38
|
}
|
|
45
|
-
_this =
|
|
46
|
-
_defineProperty(
|
|
39
|
+
_this = _callSuper(this, SliderRatingRoot2, [].concat(args));
|
|
40
|
+
_defineProperty(_this, "state", {
|
|
47
41
|
hoveredIndex: -1,
|
|
48
42
|
clickedIndex: -1
|
|
49
43
|
});
|
|
50
|
-
_defineProperty(
|
|
51
|
-
return function(
|
|
44
|
+
_defineProperty(_this, "handleClick", function(newValue) {
|
|
45
|
+
return function(_e) {
|
|
52
46
|
var readonly = _this.asProps.readonly;
|
|
53
47
|
if (!readonly) {
|
|
54
48
|
_this.setValue(newValue);
|
|
55
49
|
}
|
|
56
50
|
};
|
|
57
51
|
});
|
|
58
|
-
_defineProperty(
|
|
52
|
+
_defineProperty(_this, "handleMouseEnder", function(index) {
|
|
59
53
|
return function() {
|
|
60
54
|
_this.setState({
|
|
61
55
|
hoveredIndex: index
|
|
62
56
|
});
|
|
63
57
|
};
|
|
64
58
|
});
|
|
65
|
-
_defineProperty(
|
|
59
|
+
_defineProperty(_this, "handleMouseLeave", function() {
|
|
66
60
|
_this.setState({
|
|
67
61
|
hoveredIndex: -1
|
|
68
62
|
});
|
|
69
63
|
});
|
|
70
|
-
_defineProperty(
|
|
64
|
+
_defineProperty(_this, "setValue", function(newValue) {
|
|
71
65
|
var _this$asProps = _this.asProps, onChange = _this$asProps.onChange, value = _this$asProps.value;
|
|
72
66
|
if (onChange) {
|
|
73
67
|
onChange(newValue);
|
|
@@ -84,17 +78,17 @@ var SliderRatingRoot = /* @__PURE__ */ function(_Component) {
|
|
|
84
78
|
});
|
|
85
79
|
}
|
|
86
80
|
});
|
|
87
|
-
_defineProperty(
|
|
81
|
+
_defineProperty(_this, "handleKeyDown", function(event) {
|
|
88
82
|
if (!["ArrowLeft", "ArrowRight", "Enter"].includes(event.key)) return;
|
|
89
83
|
event.preventDefault();
|
|
90
84
|
if (event.key === "Enter") {
|
|
91
85
|
var hoveredIndex = _this.state.hoveredIndex;
|
|
92
86
|
_this.setValue(hoveredIndex + 1);
|
|
93
87
|
} else {
|
|
94
|
-
var
|
|
88
|
+
var value = _this.asProps.value;
|
|
95
89
|
var _hoveredIndex = _this.state.hoveredIndex;
|
|
96
90
|
var direction = event.key === "ArrowLeft" ? -1 : 1;
|
|
97
|
-
var newValue = _hoveredIndex === -1 ?
|
|
91
|
+
var newValue = _hoveredIndex === -1 ? value + direction : _hoveredIndex + 1 + direction;
|
|
98
92
|
if (newValue > MAX) newValue = MAX;
|
|
99
93
|
if (newValue < MIN) newValue = MIN;
|
|
100
94
|
_this.setState({
|
|
@@ -104,7 +98,8 @@ var SliderRatingRoot = /* @__PURE__ */ function(_Component) {
|
|
|
104
98
|
});
|
|
105
99
|
return _this;
|
|
106
100
|
}
|
|
107
|
-
|
|
101
|
+
_inherits(SliderRatingRoot2, _Component);
|
|
102
|
+
return _createClass(SliderRatingRoot2, [{
|
|
108
103
|
key: "getStarProps",
|
|
109
104
|
value: function getStarProps(_, index) {
|
|
110
105
|
var _this$asProps2 = this.asProps, value = _this$asProps2.value, readonly = _this$asProps2.readonly;
|
|
@@ -151,19 +146,18 @@ var SliderRatingRoot = /* @__PURE__ */ function(_Component) {
|
|
|
151
146
|
return /* @__PURE__ */ React.createElement(SSliderRating, assignProps({
|
|
152
147
|
"gap": 1,
|
|
153
148
|
"role": "img",
|
|
154
|
-
"aria-label": label
|
|
155
|
-
"use:tabIndex": -1
|
|
149
|
+
"aria-label": label
|
|
156
150
|
}, _ref), new Array(MAX).fill(null).map(function(_, index) {
|
|
157
|
-
return /* @__PURE__ */ React.createElement(
|
|
158
|
-
key: index
|
|
159
|
-
|
|
160
|
-
}, /* @__PURE__ */ React.createElement(SliderRating.Star, null));
|
|
151
|
+
return /* @__PURE__ */ React.createElement(SliderRating.Star, {
|
|
152
|
+
key: index
|
|
153
|
+
});
|
|
161
154
|
}));
|
|
162
155
|
}
|
|
163
156
|
var hoverValue = hoveredIndex + 1;
|
|
164
157
|
var editModeLabel = hoverValue > 0 || value ? "".concat(label, ". ").concat(getI18nText("FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber"), ".") : label;
|
|
165
|
-
return _ref3 = sstyled
|
|
158
|
+
return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SSliderRating, _ref3.cn("SSliderRating", _objectSpread({}, assignProps({
|
|
166
159
|
"gap": 1,
|
|
160
|
+
"tabIndex": 0,
|
|
167
161
|
"onMouseLeave": this.handleMouseLeave,
|
|
168
162
|
"onKeyDown": this.handleKeyDown,
|
|
169
163
|
"role": "slider",
|
|
@@ -173,18 +167,16 @@ var SliderRatingRoot = /* @__PURE__ */ function(_Component) {
|
|
|
173
167
|
"aria-valuetext": editModeLabel,
|
|
174
168
|
"aria-valuenow": hoverValue
|
|
175
169
|
}, _ref))), new Array(MAX).fill(null).map(function(_, index) {
|
|
176
|
-
return /* @__PURE__ */ React.createElement(
|
|
177
|
-
key: index
|
|
178
|
-
|
|
179
|
-
}, /* @__PURE__ */ React.createElement(SliderRating.Star, null));
|
|
170
|
+
return /* @__PURE__ */ React.createElement(SliderRating.Star, {
|
|
171
|
+
key: index
|
|
172
|
+
});
|
|
180
173
|
}));
|
|
181
174
|
}
|
|
182
175
|
}]);
|
|
183
|
-
|
|
184
|
-
}(Component);
|
|
176
|
+
})(Component);
|
|
185
177
|
_defineProperty(SliderRatingRoot, "displayName", "SliderRating");
|
|
186
178
|
_defineProperty(SliderRatingRoot, "style", style);
|
|
187
|
-
_defineProperty(SliderRatingRoot, "enhance", [
|
|
179
|
+
_defineProperty(SliderRatingRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);
|
|
188
180
|
_defineProperty(SliderRatingRoot, "defaultProps", {
|
|
189
181
|
i18n: localizedMessages,
|
|
190
182
|
locale: "en"
|
|
@@ -192,7 +184,7 @@ _defineProperty(SliderRatingRoot, "defaultProps", {
|
|
|
192
184
|
function Star(props) {
|
|
193
185
|
var _ref2 = arguments[0], _ref4;
|
|
194
186
|
var SStar = Box;
|
|
195
|
-
return _ref4 = sstyled
|
|
187
|
+
return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SStar, _ref4.cn("SStar", _objectSpread({}, assignProps({
|
|
196
188
|
"tag": "svg",
|
|
197
189
|
"role": "none",
|
|
198
190
|
"width": "24",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
SCheckboxButton {
|
|
2
2
|
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
3
|
-
border: 1px solid var(--intergalactic-border-primary,
|
|
3
|
+
border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
4
4
|
border-radius: var(--intergalactic-rounded-medium, 6px);
|
|
5
5
|
|
|
6
6
|
label {
|
|
@@ -12,7 +12,7 @@ SCheckboxButton {
|
|
|
12
12
|
|
|
13
13
|
SCheckboxButton:hover, SCheckboxButton[checked] {
|
|
14
14
|
cursor: pointer;
|
|
15
|
-
border-color: var(--intergalactic-border-info-active,
|
|
15
|
+
border-color: var(--intergalactic-border-info-active, oklch(0.382 0.248 264.2 / 0.386));
|
|
16
16
|
background-color: rgba(0, 143, 248, 0.10);
|
|
17
17
|
}
|
|
18
18
|
|
|
@@ -12,8 +12,8 @@ SNotice {
|
|
|
12
12
|
padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);
|
|
13
13
|
border-width: 1px 0 0;
|
|
14
14
|
border-top-style: solid;
|
|
15
|
-
border-radius: 0 0 var(--intergalactic-surface-rounded, 6px)
|
|
16
|
-
var(--intergalactic-surface-rounded, 6px);
|
|
15
|
+
border-radius: 0 0 var(--intergalactic-surface-rounded, calc(6px + 2px))
|
|
16
|
+
var(--intergalactic-surface-rounded, calc(6px + 2px));
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
SSuccess {
|
|
@@ -28,7 +28,7 @@ SSuccess {
|
|
|
28
28
|
|
|
29
29
|
SEmail {
|
|
30
30
|
margin-bottom: calc(
|
|
31
|
-
var(--intergalactic-spacing-4x, 16px)
|
|
31
|
+
var(--intergalactic-spacing-4x, 16px)
|
|
32
32
|
);
|
|
33
33
|
width: 80px;
|
|
34
34
|
height: 80px;
|
|
@@ -6,4 +6,12 @@ SFeedbackRating {
|
|
|
6
6
|
ul, li {
|
|
7
7
|
list-style: none;
|
|
8
8
|
}
|
|
9
|
+
|
|
10
|
+
SHeader {
|
|
11
|
+
font-size: var(--intergalactic-fs-300, 16px);
|
|
12
|
+
line-height: var(--intergalactic-lh-300, 150%);
|
|
13
|
+
font-weight: var(--intergalactic-bold, 700);
|
|
14
|
+
margin: var(--intergalactic-spacing-4x, 16px) 0;
|
|
15
|
+
text-align: center;
|
|
16
|
+
}
|
|
9
17
|
}
|
|
@@ -2,17 +2,12 @@ SSliderRating SStar {
|
|
|
2
2
|
transition: all calc(var(--intergalactic-duration-control, 200) * 1ms) ease-out;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
SSliderRating
|
|
5
|
+
SSliderRating:focus-visible SStar[hovered],
|
|
6
6
|
SSliderRating SStar:hover {
|
|
7
7
|
cursor: pointer;
|
|
8
8
|
transform: scale(1.3);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
SSliderRating[keyboardFocused] {
|
|
12
|
-
outline: none;
|
|
13
|
-
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
|
|
14
|
-
}
|
|
15
|
-
|
|
16
11
|
SSliderRating[readonly] SStar:hover {
|
|
17
12
|
cursor: default;
|
|
18
13
|
transform: none;
|
|
@@ -24,10 +19,10 @@ SStar[filled]:active {
|
|
|
24
19
|
}
|
|
25
20
|
|
|
26
21
|
SStar path {
|
|
27
|
-
fill: var(--intergalactic-slider-rating-normal,
|
|
22
|
+
fill: var(--intergalactic-slider-rating-normal, oklch(0.7 0.003 162.2));
|
|
28
23
|
}
|
|
29
24
|
|
|
30
25
|
SStar[filled] path {
|
|
31
26
|
stroke-width: 0;
|
|
32
|
-
fill: var(--intergalactic-slider-rating-hover-active,
|
|
27
|
+
fill: var(--intergalactic-slider-rating-hover-active, oklch(0.66 0.212 300.1));
|
|
33
28
|
}
|
|
@@ -6,12 +6,12 @@ import it from "./it.json.mjs";
|
|
|
6
6
|
import ja from "./ja.json.mjs";
|
|
7
7
|
import ko from "./ko.json.mjs";
|
|
8
8
|
import nl from "./nl.json.mjs";
|
|
9
|
+
import pl from "./pl.json.mjs";
|
|
9
10
|
import pt from "./pt.json.mjs";
|
|
11
|
+
import sv from "./sv.json.mjs";
|
|
10
12
|
import tr from "./tr.json.mjs";
|
|
11
13
|
import vi from "./vi.json.mjs";
|
|
12
14
|
import zh from "./zh.json.mjs";
|
|
13
|
-
import pl from "./pl.json.mjs";
|
|
14
|
-
import sv from "./sv.json.mjs";
|
|
15
15
|
var localizedMessages = {
|
|
16
16
|
de,
|
|
17
17
|
en,
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
declare const CheckboxButton: import("@semcore/core").
|
|
2
|
-
[key: string]: (arg: unknown) => void;
|
|
3
|
-
}, null>;
|
|
1
|
+
declare const CheckboxButton: import("@semcore/core").Intergalactic.Component<"div", {}, {}, never[]>;
|
|
4
2
|
export default CheckboxButton;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
export declare function FeedbackItem({ Children, tag, uid, tooltipProps: tooltipPropsList, ...props }: any): JSX.Element;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare function FeedbackItem({ Children, tag, uid, tooltipProps: tooltipPropsList, ...props }: any): React.JSX.Element;
|
|
3
3
|
export declare namespace FeedbackItem {
|
|
4
4
|
var enhance: ((props: any) => {
|
|
5
|
-
uid:
|
|
5
|
+
uid: ReturnType<typeof import("@semcore/core/lib/utils/uniqueID").useUID>;
|
|
6
6
|
})[];
|
|
7
7
|
}
|
|
@@ -1,196 +1,27 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type Button from '@semcore/button';
|
|
2
|
+
import type Checkbox from '@semcore/checkbox';
|
|
2
3
|
import { Component } from '@semcore/core';
|
|
3
|
-
import {
|
|
4
|
+
import type { Intergalactic } from '@semcore/core';
|
|
4
5
|
import { NoticeBubbleManager } from '@semcore/notice-bubble';
|
|
6
|
+
import { Text } from '@semcore/typography';
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import type { FeedbackRatingCheckboxProps, FeedbackRatingItemProps, FeedbackRatingProps, FormConfigItem, FeedbackRatingDefaultProps } from './FeedbackRating.type';
|
|
5
9
|
type State = {
|
|
6
10
|
error: boolean;
|
|
7
11
|
};
|
|
8
|
-
declare class FeedbackRatingRoot extends Component<FeedbackRatingProps, {},
|
|
12
|
+
declare class FeedbackRatingRoot extends Component<FeedbackRatingProps, typeof FeedbackRatingRoot.enhance, {}, FeedbackRatingDefaultProps, State> {
|
|
9
13
|
static displayName: string;
|
|
10
14
|
static style: {
|
|
11
15
|
[key: string]: string;
|
|
12
16
|
};
|
|
13
17
|
static enhance: readonly [(props: any) => {
|
|
14
|
-
getI18nText: (messageId: string, variables?: {
|
|
18
|
+
getI18nText: ReturnType<(dictionary: import("@semcore/core/lib/utils/enhances/WithI18n").Dictionary, locale?: import("@semcore/core/lib/utils/enhances/WithI18n").LocaleKeys, fallbackDictionary?: import("@semcore/core/lib/utils/enhances/WithI18n").Dictionary) => (messageId: string, variables?: {
|
|
15
19
|
[key: string]: string | number | undefined;
|
|
16
|
-
}
|
|
20
|
+
}) => string>;
|
|
17
21
|
}, (props: any) => {
|
|
18
|
-
uid:
|
|
22
|
+
uid: ReturnType<typeof import("@semcore/core/lib/utils/uniqueID").useUID>;
|
|
19
23
|
}];
|
|
20
|
-
static defaultProps:
|
|
21
|
-
onSubmit: () => void;
|
|
22
|
-
i18n: {
|
|
23
|
-
de: {
|
|
24
|
-
leaveFeedback: string;
|
|
25
|
-
learnMore: string;
|
|
26
|
-
formTitle: string;
|
|
27
|
-
submitButton: string;
|
|
28
|
-
successMessage: string;
|
|
29
|
-
errorMessage: string;
|
|
30
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
31
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
32
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
33
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
34
|
-
};
|
|
35
|
-
en: {
|
|
36
|
-
leaveFeedback: string;
|
|
37
|
-
learnMore: string;
|
|
38
|
-
formTitle: string;
|
|
39
|
-
submitButton: string;
|
|
40
|
-
successMessage: string;
|
|
41
|
-
errorMessage: string;
|
|
42
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
43
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
44
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
45
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
46
|
-
};
|
|
47
|
-
es: {
|
|
48
|
-
leaveFeedback: string;
|
|
49
|
-
learnMore: string;
|
|
50
|
-
formTitle: string;
|
|
51
|
-
submitButton: string;
|
|
52
|
-
successMessage: string;
|
|
53
|
-
errorMessage: string;
|
|
54
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
55
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
56
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
57
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
58
|
-
};
|
|
59
|
-
fr: {
|
|
60
|
-
leaveFeedback: string;
|
|
61
|
-
learnMore: string;
|
|
62
|
-
formTitle: string;
|
|
63
|
-
submitButton: string;
|
|
64
|
-
successMessage: string;
|
|
65
|
-
errorMessage: string;
|
|
66
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
67
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
68
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
69
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
70
|
-
};
|
|
71
|
-
it: {
|
|
72
|
-
leaveFeedback: string;
|
|
73
|
-
learnMore: string;
|
|
74
|
-
formTitle: string;
|
|
75
|
-
submitButton: string;
|
|
76
|
-
successMessage: string;
|
|
77
|
-
errorMessage: string;
|
|
78
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
79
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
80
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
81
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
82
|
-
};
|
|
83
|
-
ja: {
|
|
84
|
-
leaveFeedback: string;
|
|
85
|
-
learnMore: string;
|
|
86
|
-
formTitle: string;
|
|
87
|
-
submitButton: string;
|
|
88
|
-
successMessage: string;
|
|
89
|
-
errorMessage: string;
|
|
90
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
91
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
92
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
93
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
94
|
-
};
|
|
95
|
-
ko: {
|
|
96
|
-
leaveFeedback: string;
|
|
97
|
-
learnMore: string;
|
|
98
|
-
formTitle: string;
|
|
99
|
-
submitButton: string;
|
|
100
|
-
successMessage: string;
|
|
101
|
-
errorMessage: string;
|
|
102
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
103
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
104
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
105
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
106
|
-
};
|
|
107
|
-
nl: {
|
|
108
|
-
leaveFeedback: string;
|
|
109
|
-
learnMore: string;
|
|
110
|
-
formTitle: string;
|
|
111
|
-
submitButton: string;
|
|
112
|
-
successMessage: string;
|
|
113
|
-
errorMessage: string;
|
|
114
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
115
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
116
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
117
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
118
|
-
};
|
|
119
|
-
pt: {
|
|
120
|
-
leaveFeedback: string;
|
|
121
|
-
learnMore: string;
|
|
122
|
-
formTitle: string;
|
|
123
|
-
submitButton: string;
|
|
124
|
-
successMessage: string;
|
|
125
|
-
errorMessage: string;
|
|
126
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
127
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
128
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
129
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
130
|
-
};
|
|
131
|
-
tr: {
|
|
132
|
-
leaveFeedback: string;
|
|
133
|
-
learnMore: string;
|
|
134
|
-
formTitle: string;
|
|
135
|
-
submitButton: string;
|
|
136
|
-
successMessage: string;
|
|
137
|
-
errorMessage: string;
|
|
138
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
139
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
140
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
141
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
142
|
-
};
|
|
143
|
-
vi: {
|
|
144
|
-
leaveFeedback: string;
|
|
145
|
-
learnMore: string;
|
|
146
|
-
formTitle: string;
|
|
147
|
-
submitButton: string;
|
|
148
|
-
successMessage: string;
|
|
149
|
-
errorMessage: string;
|
|
150
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
151
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
152
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
153
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
154
|
-
};
|
|
155
|
-
zh: {
|
|
156
|
-
leaveFeedback: string;
|
|
157
|
-
learnMore: string;
|
|
158
|
-
formTitle: string;
|
|
159
|
-
submitButton: string;
|
|
160
|
-
successMessage: string;
|
|
161
|
-
errorMessage: string;
|
|
162
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
163
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
164
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
165
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
166
|
-
};
|
|
167
|
-
pl: {
|
|
168
|
-
leaveFeedback: string;
|
|
169
|
-
learnMore: string;
|
|
170
|
-
formTitle: string;
|
|
171
|
-
submitButton: string;
|
|
172
|
-
successMessage: string;
|
|
173
|
-
errorMessage: string;
|
|
174
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
175
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
176
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
177
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
178
|
-
};
|
|
179
|
-
sv: {
|
|
180
|
-
leaveFeedback: string;
|
|
181
|
-
learnMore: string;
|
|
182
|
-
formTitle: string;
|
|
183
|
-
submitButton: string;
|
|
184
|
-
successMessage: string;
|
|
185
|
-
errorMessage: string;
|
|
186
|
-
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": string;
|
|
187
|
-
"FeedbackRating.SliderRating.aria-valuetext.readonly": string;
|
|
188
|
-
"FeedbackRating.SliderRating.aria-valuetext.empty": string;
|
|
189
|
-
"FeedbackRating.SliderRating.aria-valuetext": string;
|
|
190
|
-
};
|
|
191
|
-
};
|
|
192
|
-
locale: string;
|
|
193
|
-
};
|
|
24
|
+
static defaultProps: FeedbackRatingDefaultProps;
|
|
194
25
|
static validate: {
|
|
195
26
|
description: (error: Error | string) => (value?: string) => string | Error | undefined;
|
|
196
27
|
email: (error: Error | string) => (value?: string) => string | Error | undefined;
|
|
@@ -208,13 +39,17 @@ declare class FeedbackRatingRoot extends Component<FeedbackRatingProps, {}, Stat
|
|
|
208
39
|
getNoticeTextId(): string;
|
|
209
40
|
handleChangeRating: (rating: number) => void;
|
|
210
41
|
handelCloseModal: () => void;
|
|
211
|
-
handleChange: (fn: (e: React.SyntheticEvent) => void) => (
|
|
42
|
+
handleChange: (fn: (e: React.SyntheticEvent) => void) => (_value: any, e: React.SyntheticEvent) => void;
|
|
212
43
|
componentDidUpdate(prevProps: Readonly<FeedbackRatingProps>): void;
|
|
213
|
-
renderCheckbox: (config: FormConfigItem, index: number) => JSX.Element;
|
|
214
|
-
renderTextField: (config: FormConfigItem) => JSX.Element;
|
|
44
|
+
renderCheckbox: (config: FormConfigItem, index: number) => React.JSX.Element;
|
|
45
|
+
renderTextField: (config: FormConfigItem) => React.JSX.Element;
|
|
215
46
|
render(): React.ReactNode;
|
|
216
47
|
}
|
|
217
|
-
declare const FeedbackRating: typeof
|
|
48
|
+
declare const FeedbackRating: Intergalactic.Component<"form", FeedbackRatingProps, {}, typeof FeedbackRatingRoot.enhance> & {
|
|
218
49
|
validate: typeof FeedbackRatingRoot.validate;
|
|
50
|
+
Item: Intergalactic.Component<"div", FeedbackRatingItemProps>;
|
|
51
|
+
Submit: typeof Button;
|
|
52
|
+
Checkbox: Intergalactic.Component<typeof Checkbox, FeedbackRatingCheckboxProps>;
|
|
53
|
+
Header: typeof Text;
|
|
219
54
|
};
|
|
220
55
|
export default FeedbackRating;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
1
|
+
import type { NSCheckbox } from '@semcore/checkbox';
|
|
2
|
+
import type { Intergalactic } from '@semcore/core';
|
|
3
|
+
import type { IllustrationProps } from '@semcore/illustration';
|
|
4
|
+
import type Notice from '@semcore/notice';
|
|
5
|
+
import type React from 'react';
|
|
6
|
+
import type { FieldProps } from 'react-final-form';
|
|
7
|
+
import type { FeedbackFormProps } from '../../index';
|
|
8
|
+
import type { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
|
|
8
9
|
export type FormConfigItem = {
|
|
9
10
|
key: string;
|
|
10
11
|
label: React.ReactNode;
|
|
@@ -13,36 +14,44 @@ export type FormConfigItem = {
|
|
|
13
14
|
validate?: (value: any) => Error | string | undefined;
|
|
14
15
|
};
|
|
15
16
|
export type FeedbackRatingProps = Intergalactic.InternalTypings.EfficientOmit<FeedbackFormProps, 'initialValues' | 'loading'> & {
|
|
16
|
-
/**
|
|
17
|
+
/** Status of form */
|
|
17
18
|
status: 'default' | 'success' | 'error' | 'loading';
|
|
18
|
-
/**
|
|
19
|
+
/** Flag for show/hide notification */
|
|
19
20
|
notificationVisible: boolean;
|
|
20
|
-
/** */
|
|
21
|
+
/** Notification close callback */
|
|
21
22
|
onNotificationClose: () => void;
|
|
22
|
-
/**
|
|
23
|
+
/** Text in notification panel */
|
|
23
24
|
notificationText: string;
|
|
24
|
-
/**
|
|
25
|
+
/** Title in notification panel */
|
|
25
26
|
notificationTitle?: string;
|
|
26
|
-
/**
|
|
27
|
+
/** Optional link in notification panel */
|
|
27
28
|
learnMoreLink?: string;
|
|
28
|
-
/**
|
|
29
|
+
/** Rating value */
|
|
29
30
|
rating: number;
|
|
30
|
-
/**
|
|
31
|
+
/** Visible modal form flag */
|
|
31
32
|
visible: boolean;
|
|
33
|
+
/** Visibility changes callback */
|
|
32
34
|
onVisibleChange: (visible: boolean, rating: number) => void;
|
|
33
|
-
/**
|
|
35
|
+
/** Width for modal with form */
|
|
34
36
|
modalWidth?: number | string;
|
|
35
|
-
/**
|
|
37
|
+
/** Header of modal with form */
|
|
36
38
|
header: React.ReactNode;
|
|
37
|
-
/**
|
|
39
|
+
/** Text for submit button of form */
|
|
38
40
|
submitText?: string;
|
|
39
|
-
/**
|
|
41
|
+
/** Config for form fields */
|
|
40
42
|
formConfig: FormConfigItem[];
|
|
43
|
+
/** Initial form values including rating */
|
|
41
44
|
initialValues: Record<string, any> & {
|
|
42
45
|
rating: number;
|
|
43
46
|
};
|
|
47
|
+
/** Email address shown in error messages */
|
|
44
48
|
errorFeedbackEmail: string;
|
|
49
|
+
/** Specifies the locale for i18n support */
|
|
45
50
|
locale?: string;
|
|
51
|
+
/** Illustration element */
|
|
52
|
+
Illustration?: Intergalactic.Component<'svg', IllustrationProps>;
|
|
53
|
+
/** Notice component */
|
|
54
|
+
Notice?: typeof Notice;
|
|
46
55
|
};
|
|
47
56
|
export type FeedbackRatingItemProps = FieldProps<any, any> & {
|
|
48
57
|
/**
|
|
@@ -50,14 +59,14 @@ export type FeedbackRatingItemProps = FieldProps<any, any> & {
|
|
|
50
59
|
*/
|
|
51
60
|
tooltipProps?: string[];
|
|
52
61
|
};
|
|
53
|
-
export type FeedbackRatingCheckboxProps = Omit<
|
|
62
|
+
export type FeedbackRatingCheckboxProps = Omit<NSCheckbox.Props, 'label'> & {
|
|
54
63
|
focused: boolean;
|
|
55
64
|
label: React.ReactNode;
|
|
56
65
|
};
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
66
|
+
export type FeedbackRatingDefaultProps = {
|
|
67
|
+
onSubmit: () => void;
|
|
68
|
+
i18n: typeof localizedMessages;
|
|
69
|
+
locale: 'en';
|
|
70
|
+
Illustration: Intergalactic.Component<'svg', IllustrationProps>;
|
|
71
|
+
Notice: typeof Notice;
|
|
62
72
|
};
|
|
63
|
-
export { FeedbackRatingType };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { Flex, Box, type BoxProps } from '@semcore/base-components';
|
|
2
|
+
import { type Intergalactic } from '@semcore/core';
|
|
3
3
|
type SliderRatingProps = {
|
|
4
4
|
value: number;
|
|
5
5
|
onChange?: (value: number) => void;
|
|
@@ -8,7 +8,7 @@ type SliderRatingProps = {
|
|
|
8
8
|
type StarProps = BoxProps & {
|
|
9
9
|
filled?: boolean;
|
|
10
10
|
};
|
|
11
|
-
declare const SliderRating:
|
|
11
|
+
declare const SliderRating: Intergalactic.Component<typeof Flex, SliderRatingProps> & {
|
|
12
12
|
Star: Intergalactic.Component<typeof Box, StarProps>;
|
|
13
13
|
};
|
|
14
14
|
export default SliderRating;
|