@semcore/feedback-form 6.42.0 → 6.42.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/cjs/FeedbackForm.js +10 -8
- package/lib/cjs/FeedbackForm.js.map +1 -1
- package/lib/cjs/component/checkbox-button/CheckboxButton.js +6 -4
- package/lib/cjs/component/checkbox-button/CheckboxButton.js.map +1 -1
- package/lib/cjs/component/feedback-rating/FeedbackRating.js +5 -3
- package/lib/cjs/component/feedback-rating/FeedbackRating.js.map +1 -1
- package/lib/cjs/component/slider-rating/SliderRating.js +10 -8
- package/lib/cjs/component/slider-rating/SliderRating.js.map +1 -1
- package/lib/es6/FeedbackForm.js +10 -8
- package/lib/es6/FeedbackForm.js.map +1 -1
- package/lib/es6/component/checkbox-button/CheckboxButton.js +6 -4
- package/lib/es6/component/checkbox-button/CheckboxButton.js.map +1 -1
- package/lib/es6/component/feedback-rating/FeedbackRating.js +5 -3
- package/lib/es6/component/feedback-rating/FeedbackRating.js.map +1 -1
- package/lib/es6/component/slider-rating/SliderRating.js +10 -8
- package/lib/es6/component/slider-rating/SliderRating.js.map +1 -1
- package/lib/esm/FeedbackForm.mjs +129 -108
- package/lib/esm/component/checkbox-button/CheckboxButton.mjs +52 -42
- package/lib/esm/component/feedback-item/FeedbackItem.mjs +44 -33
- package/lib/esm/component/feedback-rating/FeedbackRating.mjs +297 -247
- package/lib/esm/component/slider-rating/SliderRating.mjs +178 -138
- package/lib/esm/component/submit-button/SubmitButton.mjs +14 -12
- package/lib/esm/index.mjs +4 -4
- package/lib/esm/style/checkbox-button.shadow.css +21 -0
- package/lib/esm/style/feedback-form.shadow.css +36 -0
- package/lib/esm/style/feedback-rating.shadow.css +9 -0
- package/lib/esm/style/slider-rating.shadow.css +33 -0
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +30 -30
- package/lib/esm/translations/de.json.mjs +20 -14
- package/lib/esm/translations/en.json.mjs +20 -14
- package/lib/esm/translations/es.json.mjs +20 -14
- package/lib/esm/translations/fr.json.mjs +20 -14
- package/lib/esm/translations/it.json.mjs +20 -14
- package/lib/esm/translations/ja.json.mjs +20 -14
- package/lib/esm/translations/ko.json.mjs +20 -14
- package/lib/esm/translations/nl.json.mjs +20 -14
- package/lib/esm/translations/pl.json.mjs +20 -14
- package/lib/esm/translations/pt.json.mjs +20 -14
- package/lib/esm/translations/sv.json.mjs +20 -14
- package/lib/esm/translations/tr.json.mjs +20 -14
- package/lib/esm/translations/vi.json.mjs +20 -14
- package/lib/esm/translations/zh.json.mjs +20 -14
- package/package.json +16 -16
|
@@ -1,314 +1,364 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import { sstyled
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import { Field
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import { Text
|
|
22
|
-
import
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
import
|
|
26
|
-
import
|
|
27
|
-
import { Flex
|
|
28
|
-
import { FeedbackItem
|
|
29
|
-
import { SubmitButton
|
|
30
|
-
import
|
|
31
|
-
import
|
|
32
|
-
import { localizedMessages
|
|
33
|
-
import { NoticeBubbleManager
|
|
34
|
-
var
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
5
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
6
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
7
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
8
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
9
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
10
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
11
|
+
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
12
|
+
import React from "react";
|
|
13
|
+
import { Field, Form } from "react-final-form";
|
|
14
|
+
import createFocusDecorator from "final-form-focus";
|
|
15
|
+
import SpinContainer from "@semcore/spin-container";
|
|
16
|
+
import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
|
|
17
|
+
import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
|
|
18
|
+
import Notice from "@semcore/notice";
|
|
19
|
+
import CheckM from "@semcore/icon/Check/m";
|
|
20
|
+
import WarnM from "@semcore/icon/Warning/m";
|
|
21
|
+
import { Text } from "@semcore/typography";
|
|
22
|
+
import FeedbackIllustration from "@semcore/illustration/Feedback";
|
|
23
|
+
import Link from "@semcore/link";
|
|
24
|
+
import SliderRating from "../slider-rating/SliderRating.mjs";
|
|
25
|
+
import Modal from "@semcore/modal";
|
|
26
|
+
import Textarea from "@semcore/textarea";
|
|
27
|
+
import { Flex, Box } from "@semcore/flex-box";
|
|
28
|
+
import { FeedbackItem } from "../feedback-item/FeedbackItem.mjs";
|
|
29
|
+
import { SubmitButton } from "../submit-button/SubmitButton.mjs";
|
|
30
|
+
import CheckboxButton from "../checkbox-button/CheckboxButton.mjs";
|
|
31
|
+
import Input from "@semcore/input";
|
|
32
|
+
import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
|
|
33
|
+
import { NoticeBubbleManager, NoticeBubbleContainer } from "@semcore/notice-bubble";
|
|
34
|
+
var _excluded = ["header", "submitText", "formConfig", "notificationText", "notificationTitle", "learnMoreLink", "Children", "styles", "forwardRef", "status", "theme", "background", "rating", "visible", "onVisibleChange", "notificationVisible", "onNotificationClose", "getI18nText", "errorFeedbackEmail", "modalWidth"];
|
|
35
|
+
/*!__reshadow-styles__:"../../style/feedback-rating.shadow.css"*/
|
|
36
|
+
var style = (
|
|
35
37
|
/*__reshadow_css_start__*/
|
|
36
|
-
(
|
|
38
|
+
(sstyled.insert(
|
|
37
39
|
/*__inner_css_start__*/
|
|
38
|
-
".
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
".___SFeedbackRating_1rzb1_gg_ ul{margin:0;padding:0;list-style:none}.___SFeedbackRating_1rzb1_gg_ li{list-style:none}",
|
|
41
|
+
/*__inner_css_end__*/
|
|
42
|
+
"1rzb1_gg_"
|
|
43
|
+
), /*__reshadow_css_end__*/
|
|
44
|
+
{
|
|
45
|
+
"__SFeedbackRating": "___SFeedbackRating_1rzb1_gg_"
|
|
42
46
|
})
|
|
43
|
-
)
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
47
|
+
);
|
|
48
|
+
var FeedbackRatingRoot = /* @__PURE__ */ function(_Component) {
|
|
49
|
+
_inherits(FeedbackRatingRoot2, _Component);
|
|
50
|
+
var _super = _createSuper(FeedbackRatingRoot2);
|
|
51
|
+
function FeedbackRatingRoot2() {
|
|
52
|
+
var _this;
|
|
53
|
+
_classCallCheck(this, FeedbackRatingRoot2);
|
|
54
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
55
|
+
args[_key] = arguments[_key];
|
|
56
|
+
}
|
|
57
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
58
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
59
|
+
error: false
|
|
60
|
+
});
|
|
61
|
+
_defineProperty(_assertThisInitialized(_this), "manager", new NoticeBubbleManager());
|
|
62
|
+
_defineProperty(_assertThisInitialized(_this), "focusDecorator", createFocusDecorator());
|
|
63
|
+
_defineProperty(_assertThisInitialized(_this), "handleChangeRating", function(rating) {
|
|
64
|
+
if (rating > 0) {
|
|
65
|
+
_this.asProps.onVisibleChange(true, rating);
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
_defineProperty(_assertThisInitialized(_this), "handelCloseModal", function() {
|
|
69
|
+
_this.asProps.onVisibleChange(false, _this.asProps.rating);
|
|
70
|
+
});
|
|
71
|
+
_defineProperty(_assertThisInitialized(_this), "handleChange", function(fn) {
|
|
72
|
+
return function(value, e) {
|
|
73
|
+
fn(e);
|
|
60
74
|
};
|
|
61
|
-
})
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
75
|
+
});
|
|
76
|
+
_defineProperty(_assertThisInitialized(_this), "renderCheckbox", function(config, index) {
|
|
77
|
+
var initialValue = _this.props.initialValues[config.key];
|
|
78
|
+
return /* @__PURE__ */ React.createElement(Field, {
|
|
79
|
+
name: config.key,
|
|
80
|
+
initialValue,
|
|
66
81
|
type: "checkbox",
|
|
67
|
-
key:
|
|
68
|
-
}, function(
|
|
69
|
-
var
|
|
70
|
-
return /* @__PURE__ */
|
|
71
|
-
id:
|
|
72
|
-
label:
|
|
73
|
-
onChange: function(
|
|
74
|
-
return
|
|
82
|
+
key: config.key
|
|
83
|
+
}, function(_ref7) {
|
|
84
|
+
var input = _ref7.input;
|
|
85
|
+
return /* @__PURE__ */ React.createElement(FeedbackRating.Checkbox, _extends({}, input, {
|
|
86
|
+
id: config.key,
|
|
87
|
+
label: config.label,
|
|
88
|
+
onChange: function onChange(_checked, e) {
|
|
89
|
+
return input.onChange(e);
|
|
75
90
|
},
|
|
76
|
-
focused:
|
|
91
|
+
focused: index === 0
|
|
77
92
|
}));
|
|
78
93
|
});
|
|
79
|
-
})
|
|
80
|
-
|
|
94
|
+
});
|
|
95
|
+
_defineProperty(_assertThisInitialized(_this), "renderTextField", function(config) {
|
|
96
|
+
var _config$description;
|
|
97
|
+
var initialValue = _this.props.initialValues[config.key];
|
|
98
|
+
var label = typeof config.label === "string" ? /* @__PURE__ */ React.createElement(Text, {
|
|
81
99
|
mb: 2,
|
|
82
100
|
size: 200
|
|
83
|
-
},
|
|
84
|
-
|
|
101
|
+
}, config.label) : config.label;
|
|
102
|
+
var isDescriptionReactFragment = ((_config$description = config.description) === null || _config$description === void 0 ? void 0 : _config$description.type) === React.Fragment;
|
|
103
|
+
return /* @__PURE__ */ React.createElement(Flex, {
|
|
85
104
|
direction: "column"
|
|
86
|
-
}, /* @__PURE__ */
|
|
105
|
+
}, /* @__PURE__ */ React.createElement(Flex, {
|
|
87
106
|
tag: "label",
|
|
88
107
|
mt: 4,
|
|
89
|
-
htmlFor:
|
|
90
|
-
key:
|
|
91
|
-
},
|
|
92
|
-
name:
|
|
93
|
-
validate:
|
|
94
|
-
initialValue
|
|
108
|
+
htmlFor: config.key,
|
|
109
|
+
key: config.key
|
|
110
|
+
}, label), /* @__PURE__ */ React.createElement(FeedbackRating.Item, {
|
|
111
|
+
name: config.key,
|
|
112
|
+
validate: config.validate,
|
|
113
|
+
initialValue,
|
|
95
114
|
placement: "left-start",
|
|
96
115
|
flip: {
|
|
97
116
|
fallbackPlacements: ["right-start", "bottom"]
|
|
98
117
|
},
|
|
99
|
-
"aria-describedby":
|
|
100
|
-
}, function(
|
|
101
|
-
var
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
118
|
+
"aria-describedby": config.description ? config.key + "-description" : void 0
|
|
119
|
+
}, function(_ref8) {
|
|
120
|
+
var input = _ref8.input;
|
|
121
|
+
if (config.type === "textarea") {
|
|
122
|
+
return /* @__PURE__ */ React.createElement(Textarea, _extends({}, input, {
|
|
123
|
+
h: 80,
|
|
124
|
+
onChange: _this.handleChange(input.onChange),
|
|
125
|
+
id: config.key
|
|
126
|
+
}));
|
|
127
|
+
}
|
|
128
|
+
if (config.type === "input" || config.type === "email") {
|
|
129
|
+
if (config.type === "email") {
|
|
130
|
+
input.autoComplete = "email";
|
|
131
|
+
input.type = "email";
|
|
132
|
+
}
|
|
133
|
+
return /* @__PURE__ */ React.createElement(Input, {
|
|
134
|
+
state: input.state
|
|
135
|
+
}, /* @__PURE__ */ React.createElement(Input.Value, _extends({}, input, {
|
|
136
|
+
onChange: _this.handleChange(input.onChange),
|
|
137
|
+
id: config.key
|
|
138
|
+
})));
|
|
139
|
+
}
|
|
140
|
+
return null;
|
|
141
|
+
}), config.description && /* @__PURE__ */ React.createElement(Box, {
|
|
113
142
|
mt: 2
|
|
114
|
-
}, typeof
|
|
143
|
+
}, typeof config.description === "string" || isDescriptionReactFragment ? /* @__PURE__ */ React.createElement(Text, {
|
|
115
144
|
size: 200,
|
|
116
145
|
color: "text-secondary",
|
|
117
|
-
id:
|
|
118
|
-
},
|
|
119
|
-
})
|
|
146
|
+
id: config.key + "-description"
|
|
147
|
+
}, config.description) : config.description));
|
|
148
|
+
});
|
|
149
|
+
return _this;
|
|
120
150
|
}
|
|
121
|
-
|
|
151
|
+
_createClass(FeedbackRatingRoot2, [{
|
|
122
152
|
key: "headerId",
|
|
123
|
-
get: function() {
|
|
124
|
-
var
|
|
125
|
-
return "".concat(
|
|
153
|
+
get: function get() {
|
|
154
|
+
var uid = this.asProps.uid;
|
|
155
|
+
return "".concat(uid, "-feedback-rating-header");
|
|
126
156
|
}
|
|
127
157
|
}, {
|
|
128
158
|
key: "getHeaderProps",
|
|
129
|
-
value: function() {
|
|
159
|
+
value: function getHeaderProps() {
|
|
130
160
|
return {
|
|
131
161
|
id: this.headerId
|
|
132
162
|
};
|
|
133
163
|
}
|
|
134
164
|
}, {
|
|
135
165
|
key: "getItemProps",
|
|
136
|
-
value: function() {
|
|
137
|
-
var
|
|
166
|
+
value: function getItemProps() {
|
|
167
|
+
var validateOnBlur = this.asProps.validateOnBlur;
|
|
138
168
|
return {
|
|
139
|
-
validateOnBlur
|
|
169
|
+
validateOnBlur
|
|
140
170
|
};
|
|
141
171
|
}
|
|
142
172
|
}, {
|
|
143
173
|
key: "getNoticeTextId",
|
|
144
|
-
value: function() {
|
|
145
|
-
var
|
|
146
|
-
return "".concat(
|
|
174
|
+
value: function getNoticeTextId() {
|
|
175
|
+
var uid = this.asProps.uid;
|
|
176
|
+
return "".concat(uid, "-feedback-rating-notice");
|
|
147
177
|
}
|
|
148
178
|
}, {
|
|
149
179
|
key: "componentDidUpdate",
|
|
150
|
-
value: function(
|
|
151
|
-
var
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
icon: /* @__PURE__ */ e.createElement(pe, {
|
|
157
|
-
color: "green-400"
|
|
158
|
-
}),
|
|
159
|
-
children: r("successMessage"),
|
|
160
|
-
initialAnimation: !0,
|
|
161
|
-
duration: 5e3
|
|
180
|
+
value: function componentDidUpdate(prevProps) {
|
|
181
|
+
var _this2 = this;
|
|
182
|
+
var _this$asProps = this.asProps, status = _this$asProps.status, getI18nText = _this$asProps.getI18nText;
|
|
183
|
+
if (prevProps.status !== status) {
|
|
184
|
+
this.setState({
|
|
185
|
+
error: false
|
|
162
186
|
});
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
187
|
+
if (status === "success") {
|
|
188
|
+
setTimeout(function() {
|
|
189
|
+
_this2.manager.add({
|
|
190
|
+
icon: /* @__PURE__ */ React.createElement(CheckM, {
|
|
191
|
+
color: "green-400"
|
|
192
|
+
}),
|
|
193
|
+
children: getI18nText("successMessage"),
|
|
194
|
+
initialAnimation: true,
|
|
195
|
+
duration: 5e3
|
|
196
|
+
});
|
|
197
|
+
}, 300);
|
|
198
|
+
} else if (status === "error") {
|
|
199
|
+
this.setState({
|
|
200
|
+
error: true
|
|
201
|
+
});
|
|
202
|
+
}
|
|
203
|
+
}
|
|
166
204
|
}
|
|
167
205
|
}, {
|
|
168
206
|
key: "render",
|
|
169
|
-
value: function() {
|
|
170
|
-
var
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
"
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
}), /* @__PURE__ */
|
|
185
|
-
|
|
186
|
-
"aria-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
}, /* @__PURE__ */ e.createElement(P, a.cn("Text", {
|
|
207
|
+
value: function render() {
|
|
208
|
+
var _ref = this.asProps, _ref2 = this.asProps, _ref4, _this3 = this;
|
|
209
|
+
var _this$asProps2 = this.asProps, header = _this$asProps2.header, submitText = _this$asProps2.submitText, formConfig = _this$asProps2.formConfig, notificationText = _this$asProps2.notificationText, notificationTitle = _this$asProps2.notificationTitle, learnMoreLink = _this$asProps2.learnMoreLink;
|
|
210
|
+
_this$asProps2.Children;
|
|
211
|
+
var styles = _this$asProps2.styles, forwardRef = _this$asProps2.forwardRef, status = _this$asProps2.status, theme = _this$asProps2.theme, background = _this$asProps2.background, rating = _this$asProps2.rating, visible = _this$asProps2.visible;
|
|
212
|
+
_this$asProps2.onVisibleChange;
|
|
213
|
+
var notificationVisible = _this$asProps2.notificationVisible, onNotificationClose = _this$asProps2.onNotificationClose, getI18nText = _this$asProps2.getI18nText, errorFeedbackEmail = _this$asProps2.errorFeedbackEmail, modalWidth = _this$asProps2.modalWidth, other = _objectWithoutProperties(_this$asProps2, _excluded);
|
|
214
|
+
var SFeedbackRating = Modal;
|
|
215
|
+
var checkboxFields = formConfig.filter(function(item) {
|
|
216
|
+
return item.type === "checkbox";
|
|
217
|
+
});
|
|
218
|
+
var textFields = formConfig.filter(function(item) {
|
|
219
|
+
return item.type === "textarea" || item.type === "input" || item.type === "email";
|
|
220
|
+
});
|
|
221
|
+
var notificationId = this.getNoticeTextId();
|
|
222
|
+
return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(Box, assignProps({}, _ref2), /* @__PURE__ */ React.createElement(Notice, _ref4.cn("Notice", {
|
|
223
|
+
"visible": notificationVisible,
|
|
224
|
+
"aria-label": getI18nText("leaveFeedback"),
|
|
225
|
+
"tag": Flex,
|
|
226
|
+
"alignItems": notificationTitle ? "flex-start" : "center"
|
|
227
|
+
}), /* @__PURE__ */ React.createElement(Notice.Label, {
|
|
191
228
|
mr: 3,
|
|
192
|
-
|
|
193
|
-
}),
|
|
229
|
+
"aria-hidden": true
|
|
230
|
+
}, /* @__PURE__ */ React.createElement(FeedbackIllustration, _ref4.cn("FeedbackIllustration", {}))), /* @__PURE__ */ React.createElement(Notice.Content, null, notificationTitle ? /* @__PURE__ */ React.createElement(Notice.Title, null, notificationTitle) : null, /* @__PURE__ */ React.createElement(Notice.Text, {
|
|
231
|
+
tag: Flex,
|
|
232
|
+
alignItems: notificationTitle ? "flex-start" : "center"
|
|
233
|
+
}, /* @__PURE__ */ React.createElement(Text, _ref4.cn("Text", {
|
|
234
|
+
"mr": 3,
|
|
235
|
+
"id": notificationId
|
|
236
|
+
}), notificationText), /* @__PURE__ */ React.createElement(Notice.Actions, {
|
|
194
237
|
mt: 0
|
|
195
|
-
}, /* @__PURE__ */
|
|
196
|
-
value:
|
|
197
|
-
onChange: this.handleChangeRating,
|
|
198
|
-
"aria-labelledby":
|
|
199
|
-
}))),
|
|
200
|
-
ml: 3,
|
|
201
|
-
href:
|
|
202
|
-
}),
|
|
203
|
-
onClick:
|
|
204
|
-
})), /* @__PURE__ */
|
|
205
|
-
visible:
|
|
206
|
-
onClose: this.handelCloseModal,
|
|
207
|
-
p: 0,
|
|
208
|
-
"use:w":
|
|
238
|
+
}, /* @__PURE__ */ React.createElement(SliderRating, _ref4.cn("SliderRating", {
|
|
239
|
+
"value": rating,
|
|
240
|
+
"onChange": this.handleChangeRating,
|
|
241
|
+
"aria-labelledby": notificationId
|
|
242
|
+
}))), learnMoreLink && /* @__PURE__ */ React.createElement(Link, _ref4.cn("Link", {
|
|
243
|
+
"ml": 3,
|
|
244
|
+
"href": learnMoreLink
|
|
245
|
+
}), getI18nText("learnMore")))), /* @__PURE__ */ React.createElement(Notice.Close, {
|
|
246
|
+
onClick: onNotificationClose
|
|
247
|
+
})), /* @__PURE__ */ React.createElement(SFeedbackRating, _ref4.cn("SFeedbackRating", _objectSpread({}, assignProps({
|
|
248
|
+
"visible": visible,
|
|
249
|
+
"onClose": this.handelCloseModal,
|
|
250
|
+
"p": 0,
|
|
251
|
+
"use:w": modalWidth !== null && modalWidth !== void 0 ? modalWidth : 440,
|
|
209
252
|
"aria-labelledby": this.headerId
|
|
210
|
-
},
|
|
211
|
-
decorators: [this.focusDecorator]
|
|
212
|
-
},
|
|
213
|
-
var
|
|
214
|
-
return
|
|
215
|
-
background:
|
|
216
|
-
theme:
|
|
217
|
-
size: "xl",
|
|
218
|
-
loading:
|
|
219
|
-
p: 1,
|
|
220
|
-
m: 9
|
|
221
|
-
}), /* @__PURE__ */
|
|
222
|
-
justifyContent: "center"
|
|
223
|
-
}), /* @__PURE__ */
|
|
224
|
-
value:
|
|
225
|
-
readonly:
|
|
226
|
-
}))), (
|
|
227
|
-
tag: "form",
|
|
228
|
-
noValidate:
|
|
229
|
-
method: "POST",
|
|
230
|
-
ref:
|
|
231
|
-
},
|
|
232
|
-
onSubmit:
|
|
233
|
-
})), /* @__PURE__ */
|
|
234
|
-
name: "rating",
|
|
235
|
-
initialValue:
|
|
236
|
-
}), function(
|
|
237
|
-
var
|
|
238
|
-
return /* @__PURE__ */
|
|
253
|
+
}, _ref))), /* @__PURE__ */ React.createElement(Form, _ref4.cn("Form", _objectSpread({
|
|
254
|
+
"decorators": [this.focusDecorator]
|
|
255
|
+
}, other)), function(api) {
|
|
256
|
+
var _ref5;
|
|
257
|
+
return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SpinContainer, _ref5.cn("SpinContainer", {
|
|
258
|
+
"background": background,
|
|
259
|
+
"theme": theme,
|
|
260
|
+
"size": "xl",
|
|
261
|
+
"loading": status !== "loading" ? api.submitting : status === "loading",
|
|
262
|
+
"p": 1,
|
|
263
|
+
"m": 9
|
|
264
|
+
}), /* @__PURE__ */ React.createElement(Flex, _ref5.cn("Flex", {
|
|
265
|
+
"justifyContent": "center"
|
|
266
|
+
}), /* @__PURE__ */ React.createElement(SliderRating, _ref5.cn("SliderRating", {
|
|
267
|
+
"value": rating,
|
|
268
|
+
"readonly": true
|
|
269
|
+
}))), (header === null || header === void 0 ? void 0 : header.type) === FeedbackRating.Header ? header : /* @__PURE__ */ React.createElement(FeedbackRating.Header, null, header), /* @__PURE__ */ React.createElement(Box, _ref5.cn("Box", _objectSpread(_objectSpread({
|
|
270
|
+
"tag": "form",
|
|
271
|
+
"noValidate": true,
|
|
272
|
+
"method": "POST",
|
|
273
|
+
"ref": forwardRef
|
|
274
|
+
}, other), {}, {
|
|
275
|
+
"onSubmit": api.handleSubmit
|
|
276
|
+
})), /* @__PURE__ */ React.createElement(Field, _ref5.cn("Field", {
|
|
277
|
+
"name": "rating",
|
|
278
|
+
"initialValue": rating
|
|
279
|
+
}), function(_ref9) {
|
|
280
|
+
var input = _ref9.input;
|
|
281
|
+
return /* @__PURE__ */ React.createElement("input", _extends({}, input, {
|
|
239
282
|
type: "hidden"
|
|
240
283
|
}));
|
|
241
|
-
}), /* @__PURE__ */
|
|
242
|
-
role: "group",
|
|
243
|
-
"aria-labelledby":
|
|
244
|
-
}),
|
|
245
|
-
return
|
|
246
|
-
})),
|
|
247
|
-
return
|
|
248
|
-
}),
|
|
249
|
-
theme: "warning",
|
|
250
|
-
mt: 4,
|
|
251
|
-
mb: 4
|
|
252
|
-
}), /* @__PURE__ */
|
|
284
|
+
}), /* @__PURE__ */ React.createElement("div", _ref5.cn("div", {
|
|
285
|
+
"role": "group",
|
|
286
|
+
"aria-labelledby": _this3.headerId
|
|
287
|
+
}), checkboxFields.map(function(formConfigItem, index) {
|
|
288
|
+
return _this3.renderCheckbox(formConfigItem, index);
|
|
289
|
+
})), textFields.map(function(formConfigItem) {
|
|
290
|
+
return _this3.renderTextField(formConfigItem);
|
|
291
|
+
}), _this3.state.error && /* @__PURE__ */ React.createElement(Notice, _ref5.cn("Notice", {
|
|
292
|
+
"theme": "warning",
|
|
293
|
+
"mt": 4,
|
|
294
|
+
"mb": 4
|
|
295
|
+
}), /* @__PURE__ */ React.createElement(Notice.Label, null, /* @__PURE__ */ React.createElement(WarnM, _ref5.cn("WarnM", {}))), /* @__PURE__ */ React.createElement(Notice.Content, null, getI18nText("errorMessage", {
|
|
253
296
|
// todo: Brauer Ilia - think how to fix type
|
|
254
297
|
// @ts-ignore
|
|
255
|
-
email: /* @__PURE__ */
|
|
256
|
-
href: "mailto:".concat(
|
|
257
|
-
}),
|
|
258
|
-
}))), /* @__PURE__ */
|
|
259
|
-
mt: 4,
|
|
260
|
-
justifyContent: "center"
|
|
261
|
-
}), /* @__PURE__ */
|
|
262
|
-
loading:
|
|
298
|
+
email: /* @__PURE__ */ React.createElement(Link, _ref5.cn("Link", {
|
|
299
|
+
"href": "mailto:".concat(errorFeedbackEmail)
|
|
300
|
+
}), errorFeedbackEmail)
|
|
301
|
+
}))), /* @__PURE__ */ React.createElement(Flex, _ref5.cn("Flex", {
|
|
302
|
+
"mt": 4,
|
|
303
|
+
"justifyContent": "center"
|
|
304
|
+
}), /* @__PURE__ */ React.createElement(FeedbackRating.Submit, {
|
|
305
|
+
loading: status !== "loading" ? api.submitting : status === "loading",
|
|
263
306
|
size: "l"
|
|
264
|
-
},
|
|
265
|
-
})), /* @__PURE__ */
|
|
266
|
-
manager: this.manager
|
|
307
|
+
}, submitText !== null && submitText !== void 0 ? submitText : getI18nText("submitButton")))));
|
|
308
|
+
})), /* @__PURE__ */ React.createElement(NoticeBubbleContainer, _ref4.cn("NoticeBubbleContainer", {
|
|
309
|
+
"manager": this.manager
|
|
267
310
|
})));
|
|
268
311
|
}
|
|
269
|
-
}])
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
312
|
+
}]);
|
|
313
|
+
return FeedbackRatingRoot2;
|
|
314
|
+
}(Component);
|
|
315
|
+
_defineProperty(FeedbackRatingRoot, "displayName", "FeedbackRatingForm");
|
|
316
|
+
_defineProperty(FeedbackRatingRoot, "style", style);
|
|
317
|
+
_defineProperty(FeedbackRatingRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement()]);
|
|
318
|
+
_defineProperty(FeedbackRatingRoot, "defaultProps", {
|
|
319
|
+
onSubmit: function onSubmit() {
|
|
276
320
|
},
|
|
277
|
-
i18n:
|
|
321
|
+
i18n: localizedMessages,
|
|
278
322
|
locale: "en"
|
|
279
323
|
});
|
|
280
|
-
|
|
281
|
-
description: function(
|
|
324
|
+
_defineProperty(FeedbackRatingRoot, "validate", {
|
|
325
|
+
description: function description(error) {
|
|
282
326
|
return function() {
|
|
283
|
-
var
|
|
284
|
-
|
|
285
|
-
|
|
327
|
+
var value = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
|
|
328
|
+
var words = value.split(/\s+/);
|
|
329
|
+
var symbols = words.join(" ");
|
|
330
|
+
if (Boolean(value) && (symbols.length < 10 || words.length < 3)) {
|
|
331
|
+
return error;
|
|
332
|
+
}
|
|
286
333
|
};
|
|
287
334
|
},
|
|
288
|
-
email: function(
|
|
335
|
+
email: function email(error) {
|
|
289
336
|
return function() {
|
|
290
|
-
var
|
|
291
|
-
if (
|
|
292
|
-
return
|
|
337
|
+
var value = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
|
|
338
|
+
if (Boolean(value) && !/.+@.+\..+/i.test(String(value).toLowerCase())) {
|
|
339
|
+
return error;
|
|
340
|
+
}
|
|
293
341
|
};
|
|
294
342
|
}
|
|
295
343
|
});
|
|
296
|
-
function
|
|
297
|
-
var
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
344
|
+
function Header(props) {
|
|
345
|
+
var _ref3 = arguments[0], _ref6;
|
|
346
|
+
var styles = props.styles;
|
|
347
|
+
var SHeader = Text;
|
|
348
|
+
return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SHeader, _ref6.cn("SHeader", _objectSpread({}, assignProps({
|
|
349
|
+
"size": 300,
|
|
350
|
+
"tag": "h2",
|
|
351
|
+
"mb": 4,
|
|
352
|
+
"mt": 4,
|
|
353
|
+
"textAlign": "center"
|
|
354
|
+
}, _ref3))));
|
|
305
355
|
}
|
|
306
|
-
var
|
|
307
|
-
Header
|
|
308
|
-
Item:
|
|
309
|
-
Checkbox:
|
|
310
|
-
Submit:
|
|
356
|
+
var FeedbackRating = createComponent(FeedbackRatingRoot, {
|
|
357
|
+
Header,
|
|
358
|
+
Item: FeedbackItem,
|
|
359
|
+
Checkbox: CheckboxButton,
|
|
360
|
+
Submit: SubmitButton
|
|
311
361
|
});
|
|
312
362
|
export {
|
|
313
|
-
|
|
363
|
+
FeedbackRating as default
|
|
314
364
|
};
|