@micromag/screen-contribution 0.3.311 → 0.3.318
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/assets/css/styles.css +1 -1
- package/es/index.js +70 -91
- package/lib/index.js +70 -91
- package/package.json +15 -15
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-contribution-container .micromag-screen-contribution-background,.micromag-screen-contribution-container .micromag-screen-contribution-inner{position:absolute;top:0;
|
|
1
|
+
.micromag-screen-contribution-container .micromag-screen-contribution-background,.micromag-screen-contribution-container .micromag-screen-contribution-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-contribution-container{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-background{z-index:0}.micromag-screen-contribution-container .micromag-screen-contribution-content{z-index:1}@-webkit-keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputName,.micromag-screen-contribution-container .micromag-screen-contribution-emptySubmit,.micromag-screen-contribution-container .micromag-screen-contribution-emptyTitle{margin-bottom:10px;padding:10px}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-title{padding-bottom:20px}.micromag-screen-contribution-container .micromag-screen-contribution-interactiveContainer{-webkit-transition-property:height;-o-transition-property:height;transition-property:height;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-form{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit,.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{display:block;padding:4px;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{margin-bottom:10px}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit{border:0}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:disabled{opacity:1}.micromag-screen-contribution-container .micromag-screen-contribution-formContent{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading{-webkit-animation:micromag-screen-contribution-rotate 1s linear infinite;animation:micromag-screen-contribution-rotate 1s linear infinite;height:40px;left:50%;margin-left:-20px;margin-top:-20px;opacity:0;pointer-events:none;position:absolute;top:50%;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease;width:40px}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading .micromag-screen-contribution-loadingIcon{display:block;height:100%;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContainer{opacity:0;position:relative;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContent{height:0;overflow:hidden;position:absolute;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributions{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-contribution{border-bottom:1px solid #fff;margin-bottom:20px;padding-bottom:20px}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:first-child{border-top:1px solid #fff;padding-top:20px}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}.micromag-screen-contribution-container .micromag-screen-contribution-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-callToAction.micromag-screen-contribution-disabled{opacity:0;pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-form{pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formContent{opacity:.4}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formLoading{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-submitted .micromag-screen-contribution-formContent{opacity:0}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-form{display:none}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContainer{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContent{height:auto;overflow:visible;position:relative}.micromag-screen-contribution-container.micromag-screen-contribution-isPlaceholder .micromag-screen-contribution-inner{padding:10px}
|
package/es/index.js
CHANGED
|
@@ -22,7 +22,7 @@ import Scroll from '@micromag/element-scroll';
|
|
|
22
22
|
import Text from '@micromag/element-text';
|
|
23
23
|
import TextInput from '@micromag/element-text-input';
|
|
24
24
|
|
|
25
|
-
var styles = {"container":"micromag-screen-contribution-container","
|
|
25
|
+
var styles = {"container":"micromag-screen-contribution-container","inner":"micromag-screen-contribution-inner","background":"micromag-screen-contribution-background","buttonSubmit":"micromag-screen-contribution-buttonSubmit","content":"micromag-screen-contribution-content","emptyTitle":"micromag-screen-contribution-emptyTitle","emptyInputName":"micromag-screen-contribution-emptyInputName","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptySubmit":"micromag-screen-contribution-emptySubmit","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","inputName":"micromag-screen-contribution-inputName","inputMessage":"micromag-screen-contribution-inputMessage","formContent":"micromag-screen-contribution-formContent","formLoading":"micromag-screen-contribution-formLoading","rotate":"micromag-screen-contribution-rotate","loadingIcon":"micromag-screen-contribution-loadingIcon","contributionsContainer":"micromag-screen-contribution-contributionsContainer","contributionsContent":"micromag-screen-contribution-contributionsContent","contributions":"micromag-screen-contribution-contributions","contribution":"micromag-screen-contribution-contribution","callToAction":"micromag-screen-contribution-callToAction","disabled":"micromag-screen-contribution-disabled","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder"};
|
|
26
26
|
|
|
27
27
|
var propTypes = {
|
|
28
28
|
id: PropTypes.string,
|
|
@@ -64,112 +64,95 @@ var defaultProps = {
|
|
|
64
64
|
type: null,
|
|
65
65
|
className: null
|
|
66
66
|
};
|
|
67
|
-
|
|
68
67
|
var ContributionScreen = function ContributionScreen(_ref) {
|
|
69
68
|
var _ref4;
|
|
70
|
-
|
|
71
69
|
var id = _ref.id,
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
70
|
+
layout = _ref.layout,
|
|
71
|
+
title = _ref.title,
|
|
72
|
+
name = _ref.name,
|
|
73
|
+
message = _ref.message,
|
|
74
|
+
submit = _ref.submit,
|
|
75
|
+
nameStyle = _ref.nameStyle,
|
|
76
|
+
messageStyle = _ref.messageStyle,
|
|
77
|
+
spacing = _ref.spacing,
|
|
78
|
+
background = _ref.background,
|
|
79
|
+
callToAction = _ref.callToAction,
|
|
80
|
+
current = _ref.current,
|
|
81
|
+
active = _ref.active,
|
|
82
|
+
transitions = _ref.transitions,
|
|
83
|
+
transitionStagger = _ref.transitionStagger,
|
|
84
|
+
resizeTransitionDuration = _ref.resizeTransitionDuration,
|
|
85
|
+
type = _ref.type,
|
|
86
|
+
className = _ref.className;
|
|
89
87
|
var screenId = id || 'screen-id';
|
|
90
88
|
var trackScreenEvent = useTrackScreenEvent(type);
|
|
91
|
-
|
|
92
89
|
var _useScreenSize = useScreenSize(),
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
90
|
+
width = _useScreenSize.width,
|
|
91
|
+
height = _useScreenSize.height,
|
|
92
|
+
resolution = _useScreenSize.resolution;
|
|
97
93
|
var _useViewerContext = useViewerContext(),
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
94
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
95
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
96
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
102
97
|
var _useScreenRenderConte = useScreenRenderContext(),
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
98
|
+
isView = _useScreenRenderConte.isView,
|
|
99
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
100
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
101
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
102
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
103
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
110
104
|
var _useViewerWebView = useViewerWebView(),
|
|
111
|
-
|
|
112
|
-
|
|
105
|
+
openWebView = _useViewerWebView.open;
|
|
113
106
|
var _usePlaybackContext = usePlaybackContext(),
|
|
114
|
-
|
|
115
|
-
|
|
107
|
+
muted = _usePlaybackContext.muted;
|
|
116
108
|
var mediaRef = usePlaybackMediaRef(current);
|
|
117
109
|
var backgroundPlaying = current && (isView || isEdit);
|
|
118
110
|
var mediaShouldLoad = current || active;
|
|
119
111
|
var transitionPlaying = current;
|
|
120
112
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
121
113
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
122
|
-
|
|
123
114
|
var _ref2 = callToAction || {},
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
115
|
+
_ref2$active = _ref2.active,
|
|
116
|
+
hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
|
|
127
117
|
var hasTitle = isTextFilled(title);
|
|
128
118
|
var hasNameLabel = isLabelFilled(name);
|
|
129
119
|
var hasMessageLabel = isLabelFilled(message);
|
|
130
120
|
var hasSubmit = isTextFilled(submit);
|
|
131
121
|
var contributionsRef = useRef(null);
|
|
132
122
|
var formRef = useRef(null);
|
|
133
|
-
|
|
134
123
|
var _useState = useState(null),
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
124
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
125
|
+
interactiveContainerHeight = _useState2[0],
|
|
126
|
+
setInteractiveContainerHeight = _useState2[1];
|
|
139
127
|
var _useState3 = useState(''),
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
128
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
129
|
+
userName = _useState4[0],
|
|
130
|
+
setUserName = _useState4[1];
|
|
144
131
|
var _useState5 = useState(''),
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
132
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
133
|
+
userMessage = _useState6[0],
|
|
134
|
+
setUserMessage = _useState6[1];
|
|
149
135
|
|
|
136
|
+
// 0 = default, 1 = submitting, 2 = submitted, 3 = resizing, 4 = done
|
|
150
137
|
var _useState7 = useState(isStatic || isCapture ? 4 : 0),
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
138
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
139
|
+
submitState = _useState8[0],
|
|
140
|
+
setSubmitState = _useState8[1];
|
|
155
141
|
var onContributionSubmitted = useCallback(function () {
|
|
156
142
|
setSubmitState(2);
|
|
157
143
|
trackScreenEvent('submit_success', "".concat(userName, ": ").concat(userMessage));
|
|
158
144
|
}, [setSubmitState, trackScreenEvent, userName, userMessage]);
|
|
159
|
-
|
|
160
145
|
var _useContributionCreat = useContributionCreate({
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
146
|
+
screenId: screenId
|
|
147
|
+
}),
|
|
148
|
+
submitContribution = _useContributionCreat.create;
|
|
165
149
|
var _useContributions = useContributions({
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
150
|
+
screenId: screenId,
|
|
151
|
+
opts: {
|
|
152
|
+
autoload: !isPlaceholder
|
|
153
|
+
}
|
|
154
|
+
}),
|
|
155
|
+
contributions = _useContributions.contributions;
|
|
173
156
|
var onNameChange = useCallback(function (e) {
|
|
174
157
|
setUserName(e.currentTarget.value);
|
|
175
158
|
}, [setUserName]);
|
|
@@ -195,27 +178,23 @@ var ContributionScreen = function ContributionScreen(_ref) {
|
|
|
195
178
|
userMessage: e.currentTarget.value
|
|
196
179
|
});
|
|
197
180
|
}
|
|
198
|
-
}, [trackScreenEvent, userName]);
|
|
181
|
+
}, [trackScreenEvent, userName]);
|
|
199
182
|
|
|
183
|
+
// Call to Action
|
|
200
184
|
var _useState9 = useState(false),
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
185
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
186
|
+
scrolledBottom = _useState10[0],
|
|
187
|
+
setScrolledBottom = _useState10[1];
|
|
205
188
|
var swipeUpLinkActive = scrolledBottom && submitState === 4;
|
|
206
|
-
|
|
207
189
|
var _useDimensionObserver = useDimensionObserver(),
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
190
|
+
callToActionRef = _useDimensionObserver.ref,
|
|
191
|
+
_useDimensionObserver2 = _useDimensionObserver.height,
|
|
192
|
+
callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
|
|
212
193
|
var onScrolledBottom = useCallback(function (_ref3) {
|
|
213
194
|
var initial = _ref3.initial;
|
|
214
|
-
|
|
215
195
|
if (initial) {
|
|
216
196
|
trackScreenEvent('scroll', 'Contributions list');
|
|
217
197
|
}
|
|
218
|
-
|
|
219
198
|
setScrolledBottom(true);
|
|
220
199
|
}, [trackScreenEvent, setScrolledBottom]);
|
|
221
200
|
var onScrolledNotBottom = useCallback(function () {
|
|
@@ -223,7 +202,6 @@ var ContributionScreen = function ContributionScreen(_ref) {
|
|
|
223
202
|
}, [setScrolledBottom]);
|
|
224
203
|
var onSubmit = useCallback(function (e) {
|
|
225
204
|
e.preventDefault();
|
|
226
|
-
|
|
227
205
|
if (submitState === 0) {
|
|
228
206
|
setInteractiveContainerHeight(formRef.current.offsetHeight);
|
|
229
207
|
setSubmitState(1);
|
|
@@ -240,19 +218,19 @@ var ContributionScreen = function ContributionScreen(_ref) {
|
|
|
240
218
|
}, [submitState, setSubmitState, userName, userMessage, trackScreenEvent, onContributionSubmitted]);
|
|
241
219
|
useEffect(function () {
|
|
242
220
|
var timeout = null;
|
|
243
|
-
|
|
244
221
|
if (submitState === 2) {
|
|
245
222
|
timeout = setTimeout(setSubmitState, resizeTransitionDuration, 4);
|
|
246
223
|
setInteractiveContainerHeight(contributionsRef.current.offsetHeight);
|
|
247
224
|
setSubmitState(3);
|
|
248
225
|
}
|
|
249
|
-
|
|
250
226
|
return function () {
|
|
251
227
|
if (submitState === 3 && timeout !== null) {
|
|
252
228
|
clearTimeout(timeout);
|
|
253
229
|
}
|
|
254
230
|
};
|
|
255
|
-
}, [submitState, setInteractiveContainerHeight, setSubmitState, resizeTransitionDuration]);
|
|
231
|
+
}, [submitState, setInteractiveContainerHeight, setSubmitState, resizeTransitionDuration]);
|
|
232
|
+
|
|
233
|
+
// Title
|
|
256
234
|
|
|
257
235
|
var items = [/*#__PURE__*/React.createElement(ScreenElement, {
|
|
258
236
|
key: "title",
|
|
@@ -279,7 +257,9 @@ var ContributionScreen = function ContributionScreen(_ref) {
|
|
|
279
257
|
var allContributions = [].concat(_toConsumableArray(userName !== null && userMessage !== null ? [{
|
|
280
258
|
name: userName,
|
|
281
259
|
message: userMessage
|
|
282
|
-
}] : []), _toConsumableArray(contributions || []));
|
|
260
|
+
}] : []), _toConsumableArray(contributions || []));
|
|
261
|
+
|
|
262
|
+
// Form
|
|
283
263
|
|
|
284
264
|
items.push( /*#__PURE__*/React.createElement("div", {
|
|
285
265
|
key: "form",
|
|
@@ -464,7 +444,6 @@ var ContributionScreen = function ContributionScreen(_ref) {
|
|
|
464
444
|
className: styles.background
|
|
465
445
|
}) : null);
|
|
466
446
|
};
|
|
467
|
-
|
|
468
447
|
ContributionScreen.propTypes = propTypes;
|
|
469
448
|
ContributionScreen.defaultProps = defaultProps;
|
|
470
449
|
|
package/lib/index.js
CHANGED
|
@@ -43,7 +43,7 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
|
|
|
43
43
|
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
44
44
|
var TextInput__default = /*#__PURE__*/_interopDefaultLegacy(TextInput);
|
|
45
45
|
|
|
46
|
-
var styles = {"container":"micromag-screen-contribution-container","
|
|
46
|
+
var styles = {"container":"micromag-screen-contribution-container","inner":"micromag-screen-contribution-inner","background":"micromag-screen-contribution-background","buttonSubmit":"micromag-screen-contribution-buttonSubmit","content":"micromag-screen-contribution-content","emptyTitle":"micromag-screen-contribution-emptyTitle","emptyInputName":"micromag-screen-contribution-emptyInputName","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptySubmit":"micromag-screen-contribution-emptySubmit","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","inputName":"micromag-screen-contribution-inputName","inputMessage":"micromag-screen-contribution-inputMessage","formContent":"micromag-screen-contribution-formContent","formLoading":"micromag-screen-contribution-formLoading","rotate":"micromag-screen-contribution-rotate","loadingIcon":"micromag-screen-contribution-loadingIcon","contributionsContainer":"micromag-screen-contribution-contributionsContainer","contributionsContent":"micromag-screen-contribution-contributionsContent","contributions":"micromag-screen-contribution-contributions","contribution":"micromag-screen-contribution-contribution","callToAction":"micromag-screen-contribution-callToAction","disabled":"micromag-screen-contribution-disabled","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder"};
|
|
47
47
|
|
|
48
48
|
var propTypes = {
|
|
49
49
|
id: PropTypes__default["default"].string,
|
|
@@ -85,112 +85,95 @@ var defaultProps = {
|
|
|
85
85
|
type: null,
|
|
86
86
|
className: null
|
|
87
87
|
};
|
|
88
|
-
|
|
89
88
|
var ContributionScreen = function ContributionScreen(_ref) {
|
|
90
89
|
var _ref4;
|
|
91
|
-
|
|
92
90
|
var id = _ref.id,
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
91
|
+
layout = _ref.layout,
|
|
92
|
+
title = _ref.title,
|
|
93
|
+
name = _ref.name,
|
|
94
|
+
message = _ref.message,
|
|
95
|
+
submit = _ref.submit,
|
|
96
|
+
nameStyle = _ref.nameStyle,
|
|
97
|
+
messageStyle = _ref.messageStyle,
|
|
98
|
+
spacing = _ref.spacing,
|
|
99
|
+
background = _ref.background,
|
|
100
|
+
callToAction = _ref.callToAction,
|
|
101
|
+
current = _ref.current,
|
|
102
|
+
active = _ref.active,
|
|
103
|
+
transitions = _ref.transitions,
|
|
104
|
+
transitionStagger = _ref.transitionStagger,
|
|
105
|
+
resizeTransitionDuration = _ref.resizeTransitionDuration,
|
|
106
|
+
type = _ref.type,
|
|
107
|
+
className = _ref.className;
|
|
110
108
|
var screenId = id || 'screen-id';
|
|
111
109
|
var trackScreenEvent = hooks.useTrackScreenEvent(type);
|
|
112
|
-
|
|
113
110
|
var _useScreenSize = contexts.useScreenSize(),
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
111
|
+
width = _useScreenSize.width,
|
|
112
|
+
height = _useScreenSize.height,
|
|
113
|
+
resolution = _useScreenSize.resolution;
|
|
118
114
|
var _useViewerContext = contexts.useViewerContext(),
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
115
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
116
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
117
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
123
118
|
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
119
|
+
isView = _useScreenRenderConte.isView,
|
|
120
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
121
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
122
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
123
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
124
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
131
125
|
var _useViewerWebView = contexts.useViewerWebView(),
|
|
132
|
-
|
|
133
|
-
|
|
126
|
+
openWebView = _useViewerWebView.open;
|
|
134
127
|
var _usePlaybackContext = contexts.usePlaybackContext(),
|
|
135
|
-
|
|
136
|
-
|
|
128
|
+
muted = _usePlaybackContext.muted;
|
|
137
129
|
var mediaRef = contexts.usePlaybackMediaRef(current);
|
|
138
130
|
var backgroundPlaying = current && (isView || isEdit);
|
|
139
131
|
var mediaShouldLoad = current || active;
|
|
140
132
|
var transitionPlaying = current;
|
|
141
133
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
142
134
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
143
|
-
|
|
144
135
|
var _ref2 = callToAction || {},
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
136
|
+
_ref2$active = _ref2.active,
|
|
137
|
+
hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
|
|
148
138
|
var hasTitle = utils.isTextFilled(title);
|
|
149
139
|
var hasNameLabel = utils.isLabelFilled(name);
|
|
150
140
|
var hasMessageLabel = utils.isLabelFilled(message);
|
|
151
141
|
var hasSubmit = utils.isTextFilled(submit);
|
|
152
142
|
var contributionsRef = React.useRef(null);
|
|
153
143
|
var formRef = React.useRef(null);
|
|
154
|
-
|
|
155
144
|
var _useState = React.useState(null),
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
145
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
146
|
+
interactiveContainerHeight = _useState2[0],
|
|
147
|
+
setInteractiveContainerHeight = _useState2[1];
|
|
160
148
|
var _useState3 = React.useState(''),
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
149
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
150
|
+
userName = _useState4[0],
|
|
151
|
+
setUserName = _useState4[1];
|
|
165
152
|
var _useState5 = React.useState(''),
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
153
|
+
_useState6 = _slicedToArray__default["default"](_useState5, 2),
|
|
154
|
+
userMessage = _useState6[0],
|
|
155
|
+
setUserMessage = _useState6[1];
|
|
170
156
|
|
|
157
|
+
// 0 = default, 1 = submitting, 2 = submitted, 3 = resizing, 4 = done
|
|
171
158
|
var _useState7 = React.useState(isStatic || isCapture ? 4 : 0),
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
159
|
+
_useState8 = _slicedToArray__default["default"](_useState7, 2),
|
|
160
|
+
submitState = _useState8[0],
|
|
161
|
+
setSubmitState = _useState8[1];
|
|
176
162
|
var onContributionSubmitted = React.useCallback(function () {
|
|
177
163
|
setSubmitState(2);
|
|
178
164
|
trackScreenEvent('submit_success', "".concat(userName, ": ").concat(userMessage));
|
|
179
165
|
}, [setSubmitState, trackScreenEvent, userName, userMessage]);
|
|
180
|
-
|
|
181
166
|
var _useContributionCreat = data.useContributionCreate({
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
167
|
+
screenId: screenId
|
|
168
|
+
}),
|
|
169
|
+
submitContribution = _useContributionCreat.create;
|
|
186
170
|
var _useContributions = data.useContributions({
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
171
|
+
screenId: screenId,
|
|
172
|
+
opts: {
|
|
173
|
+
autoload: !isPlaceholder
|
|
174
|
+
}
|
|
175
|
+
}),
|
|
176
|
+
contributions = _useContributions.contributions;
|
|
194
177
|
var onNameChange = React.useCallback(function (e) {
|
|
195
178
|
setUserName(e.currentTarget.value);
|
|
196
179
|
}, [setUserName]);
|
|
@@ -216,27 +199,23 @@ var ContributionScreen = function ContributionScreen(_ref) {
|
|
|
216
199
|
userMessage: e.currentTarget.value
|
|
217
200
|
});
|
|
218
201
|
}
|
|
219
|
-
}, [trackScreenEvent, userName]);
|
|
202
|
+
}, [trackScreenEvent, userName]);
|
|
220
203
|
|
|
204
|
+
// Call to Action
|
|
221
205
|
var _useState9 = React.useState(false),
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
206
|
+
_useState10 = _slicedToArray__default["default"](_useState9, 2),
|
|
207
|
+
scrolledBottom = _useState10[0],
|
|
208
|
+
setScrolledBottom = _useState10[1];
|
|
226
209
|
var swipeUpLinkActive = scrolledBottom && submitState === 4;
|
|
227
|
-
|
|
228
210
|
var _useDimensionObserver = hooks.useDimensionObserver(),
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
211
|
+
callToActionRef = _useDimensionObserver.ref,
|
|
212
|
+
_useDimensionObserver2 = _useDimensionObserver.height,
|
|
213
|
+
callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
|
|
233
214
|
var onScrolledBottom = React.useCallback(function (_ref3) {
|
|
234
215
|
var initial = _ref3.initial;
|
|
235
|
-
|
|
236
216
|
if (initial) {
|
|
237
217
|
trackScreenEvent('scroll', 'Contributions list');
|
|
238
218
|
}
|
|
239
|
-
|
|
240
219
|
setScrolledBottom(true);
|
|
241
220
|
}, [trackScreenEvent, setScrolledBottom]);
|
|
242
221
|
var onScrolledNotBottom = React.useCallback(function () {
|
|
@@ -244,7 +223,6 @@ var ContributionScreen = function ContributionScreen(_ref) {
|
|
|
244
223
|
}, [setScrolledBottom]);
|
|
245
224
|
var onSubmit = React.useCallback(function (e) {
|
|
246
225
|
e.preventDefault();
|
|
247
|
-
|
|
248
226
|
if (submitState === 0) {
|
|
249
227
|
setInteractiveContainerHeight(formRef.current.offsetHeight);
|
|
250
228
|
setSubmitState(1);
|
|
@@ -261,19 +239,19 @@ var ContributionScreen = function ContributionScreen(_ref) {
|
|
|
261
239
|
}, [submitState, setSubmitState, userName, userMessage, trackScreenEvent, onContributionSubmitted]);
|
|
262
240
|
React.useEffect(function () {
|
|
263
241
|
var timeout = null;
|
|
264
|
-
|
|
265
242
|
if (submitState === 2) {
|
|
266
243
|
timeout = setTimeout(setSubmitState, resizeTransitionDuration, 4);
|
|
267
244
|
setInteractiveContainerHeight(contributionsRef.current.offsetHeight);
|
|
268
245
|
setSubmitState(3);
|
|
269
246
|
}
|
|
270
|
-
|
|
271
247
|
return function () {
|
|
272
248
|
if (submitState === 3 && timeout !== null) {
|
|
273
249
|
clearTimeout(timeout);
|
|
274
250
|
}
|
|
275
251
|
};
|
|
276
|
-
}, [submitState, setInteractiveContainerHeight, setSubmitState, resizeTransitionDuration]);
|
|
252
|
+
}, [submitState, setInteractiveContainerHeight, setSubmitState, resizeTransitionDuration]);
|
|
253
|
+
|
|
254
|
+
// Title
|
|
277
255
|
|
|
278
256
|
var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
279
257
|
key: "title",
|
|
@@ -300,7 +278,9 @@ var ContributionScreen = function ContributionScreen(_ref) {
|
|
|
300
278
|
var allContributions = [].concat(_toConsumableArray__default["default"](userName !== null && userMessage !== null ? [{
|
|
301
279
|
name: userName,
|
|
302
280
|
message: userMessage
|
|
303
|
-
}] : []), _toConsumableArray__default["default"](contributions || []));
|
|
281
|
+
}] : []), _toConsumableArray__default["default"](contributions || []));
|
|
282
|
+
|
|
283
|
+
// Form
|
|
304
284
|
|
|
305
285
|
items.push( /*#__PURE__*/React__default["default"].createElement("div", {
|
|
306
286
|
key: "form",
|
|
@@ -485,7 +465,6 @@ var ContributionScreen = function ContributionScreen(_ref) {
|
|
|
485
465
|
className: styles.background
|
|
486
466
|
}) : null);
|
|
487
467
|
};
|
|
488
|
-
|
|
489
468
|
ContributionScreen.propTypes = propTypes;
|
|
490
469
|
ContributionScreen.defaultProps = defaultProps;
|
|
491
470
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-contribution",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.318",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -52,26 +52,26 @@
|
|
|
52
52
|
"@fortawesome/fontawesome-svg-core": "^1.2.32",
|
|
53
53
|
"@fortawesome/free-solid-svg-icons": "^5.15.1",
|
|
54
54
|
"@fortawesome/react-fontawesome": "^0.1.13",
|
|
55
|
-
"@micromag/core": "^0.3.
|
|
56
|
-
"@micromag/data": "^0.3.
|
|
57
|
-
"@micromag/element-background": "^0.3.
|
|
58
|
-
"@micromag/element-button": "^0.3.
|
|
59
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
60
|
-
"@micromag/element-container": "^0.3.
|
|
61
|
-
"@micromag/element-heading": "^0.3.
|
|
62
|
-
"@micromag/element-scroll": "^0.3.
|
|
63
|
-
"@micromag/element-share-incentive": "^0.3.
|
|
64
|
-
"@micromag/element-text": "^0.3.
|
|
65
|
-
"@micromag/element-text-input": "^0.3.
|
|
66
|
-
"@micromag/transforms": "^0.3.
|
|
55
|
+
"@micromag/core": "^0.3.318",
|
|
56
|
+
"@micromag/data": "^0.3.318",
|
|
57
|
+
"@micromag/element-background": "^0.3.318",
|
|
58
|
+
"@micromag/element-button": "^0.3.318",
|
|
59
|
+
"@micromag/element-call-to-action": "^0.3.318",
|
|
60
|
+
"@micromag/element-container": "^0.3.318",
|
|
61
|
+
"@micromag/element-heading": "^0.3.318",
|
|
62
|
+
"@micromag/element-scroll": "^0.3.318",
|
|
63
|
+
"@micromag/element-share-incentive": "^0.3.318",
|
|
64
|
+
"@micromag/element-text": "^0.3.318",
|
|
65
|
+
"@micromag/element-text-input": "^0.3.318",
|
|
66
|
+
"@micromag/transforms": "^0.3.318",
|
|
67
67
|
"classnames": "^2.2.6",
|
|
68
68
|
"lodash": "^4.17.21",
|
|
69
69
|
"prop-types": "^15.7.2",
|
|
70
70
|
"react-intl": "^5.12.1",
|
|
71
|
-
"uuid": "^
|
|
71
|
+
"uuid": "^9.0.0"
|
|
72
72
|
},
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
|
|
77
77
|
}
|