@micromag/screen-keypad 0.3.311 → 0.3.322
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 +107 -145
- package/lib/index.js +107 -145
- package/package.json +19 -19
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-keypad-popupButton{
|
|
1
|
+
.micromag-screen-keypad-popupButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0}.micromag-screen-keypad-background,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-keypad-disabled.micromag-screen-keypad-container{overflow:hidden;pointer-events:none}.micromag-screen-keypad-hidden.micromag-screen-keypad-container{display:none;visibility:hidden}.micromag-screen-keypad-placeholder.micromag-screen-keypad-container .micromag-screen-keypad-content{padding:6px;position:relative}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{font-weight:inherit;margin-bottom:inherit;margin-top:inherit}.micromag-screen-keypad-container.micromag-screen-keypad-isPlaceholder .micromag-screen-keypad-layout{padding:10px}.micromag-screen-keypad-background{z-index:1}.micromag-screen-keypad-inner{height:100%;position:relative;z-index:2}.micromag-screen-keypad-layout{-ms-flex-align:center;-ms-flex-pack:start;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:flex-start;text-align:center}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:10px auto;width:100%}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:100%}.micromag-screen-keypad-item{height:100%;position:relative}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-item{height:0;padding-bottom:100%}.micromag-screen-keypad-placeholderItem{height:0;padding-bottom:60%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-placeholderItem{padding-bottom:100%}.micromag-screen-keypad-button{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-weight:inherit;height:100%;justify-content:center;overflow:hidden;padding:0;position:relative;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%}.micromag-screen-keypad-button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-keypad-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{padding:2px;pointer-events:none}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{margin:0;width:100%}.micromag-screen-keypad-buttonVisualPlaceholder{width:100%}.micromag-screen-keypad-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-keypad-buttonLabel{padding:5px;width:100%}.micromag-screen-keypad-empty{margin-bottom:10px;padding:10px;width:100%}.micromag-screen-keypad-emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.micromag-screen-keypad-emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.micromag-screen-keypad-popup{height:100%;left:0;position:fixed;right:0;top:0;-ms-touch-action:none;touch-action:none;width:100%;z-index:6}.micromag-screen-keypad-popupBackdrop{pointer-events:none;z-index:2}.micromag-screen-keypad-popupButton{height:100%;padding:52px 15px 30px;position:relative;text-align:left;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%;z-index:3}.micromag-screen-keypad-popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupInner{background-color:#1c1c1c;overflow:hidden}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent p{font-weight:inherit;margin-bottom:0;margin-top:0}.micromag-screen-keypad-popupWrapper{-ms-flex-align:start;-ms-flex-pack:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:flex-start;margin-bottom:-.5em}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-ms-flex-positive:1;-ms-flex-negative:0;flex-grow:1;flex-shrink:0;margin-bottom:.5em;width:100%}.micromag-screen-keypad-popupWrapper .micromag-screen-keypad-popupHeading{font-weight:inherit;margin-bottom:.25em}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonLabel{-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonLabel{display:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonVisual{height:100%;width:100%!important}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{max-height:none;-o-object-fit:cover;object-fit:cover;width:100%!important}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual{z-index:1}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:-o-linear-gradient(top,rgba(28,28,28,0),rgba(28,28,28,.75));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75));bottom:0;display:block;height:auto;top:auto;z-index:2}
|
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 Visual from '@micromag/element-visual';
|
|
24
24
|
|
|
25
|
-
var styles = {"popupButton":"micromag-screen-keypad-popupButton","
|
|
25
|
+
var styles = {"popupButton":"micromag-screen-keypad-popupButton","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","buttonLabel":"micromag-screen-keypad-buttonLabel","withSquareItems":"micromag-screen-keypad-withSquareItems","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","thumbnail":"micromag-screen-keypad-thumbnail","popupBackdrop":"micromag-screen-keypad-popupBackdrop","button":"micromag-screen-keypad-button","background":"micromag-screen-keypad-background","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","inner":"micromag-screen-keypad-inner","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","isPopupEmpty":"micromag-screen-keypad-isPopupEmpty","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popup":"micromag-screen-keypad-popup","popupInner":"micromag-screen-keypad-popupInner","popupContent":"micromag-screen-keypad-popupContent","popupWrapper":"micromag-screen-keypad-popupWrapper","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","contentBottom":"micromag-screen-keypad-contentBottom","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual"};
|
|
26
26
|
|
|
27
27
|
var placeholders = [{
|
|
28
28
|
id: '1'
|
|
@@ -71,7 +71,6 @@ var stopDragEventsPropagation = {
|
|
|
71
71
|
return e.stopPropagation();
|
|
72
72
|
}
|
|
73
73
|
};
|
|
74
|
-
|
|
75
74
|
var mouseBlocker = _objectSpread(_objectSpread({}, stopDragEventsPropagation), {}, {
|
|
76
75
|
onClick: function onClick(e) {
|
|
77
76
|
return e.stopPropagation();
|
|
@@ -86,7 +85,6 @@ var mouseBlocker = _objectSpread(_objectSpread({}, stopDragEventsPropagation), {
|
|
|
86
85
|
cursor: 'default'
|
|
87
86
|
}
|
|
88
87
|
});
|
|
89
|
-
|
|
90
88
|
var propTypes = {
|
|
91
89
|
items: PropTypes.arrayOf(PropTypes.shape({
|
|
92
90
|
id: PropTypes.string,
|
|
@@ -133,121 +131,101 @@ var defaultProps = {
|
|
|
133
131
|
active: true,
|
|
134
132
|
className: null
|
|
135
133
|
};
|
|
136
|
-
|
|
137
134
|
var KeypadScreen = function KeypadScreen(_ref) {
|
|
138
135
|
var _ref16;
|
|
139
|
-
|
|
140
136
|
var items = _ref.items,
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
137
|
+
layout = _ref.layout,
|
|
138
|
+
spacing = _ref.spacing,
|
|
139
|
+
keypadSettings = _ref.keypadSettings,
|
|
140
|
+
buttonStyles = _ref.buttonStyles,
|
|
141
|
+
popupStyles = _ref.popupStyles,
|
|
142
|
+
background = _ref.background,
|
|
143
|
+
current = _ref.current,
|
|
144
|
+
active = _ref.active,
|
|
145
|
+
className = _ref.className;
|
|
150
146
|
var trackScreenEvent = useTrackScreenEvent('keypad');
|
|
151
|
-
|
|
152
147
|
var _usePlaybackContext = usePlaybackContext(),
|
|
153
|
-
|
|
154
|
-
|
|
148
|
+
muted = _usePlaybackContext.muted;
|
|
155
149
|
var mediaRef = usePlaybackMediaRef(current);
|
|
156
|
-
|
|
157
150
|
var _useScreenSize = useScreenSize(),
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
151
|
+
width = _useScreenSize.width,
|
|
152
|
+
height = _useScreenSize.height,
|
|
153
|
+
resolution = _useScreenSize.resolution;
|
|
162
154
|
var _useViewerContext = useViewerContext(),
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
155
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
156
|
+
viewerBottomHeight = _useViewerContext.bottomHeight;
|
|
166
157
|
var _useScreenRenderConte = useScreenRenderContext(),
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
158
|
+
isView = _useScreenRenderConte.isView,
|
|
159
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
160
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
161
|
+
isEdit = _useScreenRenderConte.isEdit;
|
|
172
162
|
var screenState = useScreenState();
|
|
173
163
|
var backgroundPlaying = current && (isView || isEdit);
|
|
174
164
|
var mediaShouldLoad = !isPlaceholder && (current || active);
|
|
175
165
|
var isInteractivePreview = isEdit && screenState === null;
|
|
176
|
-
|
|
177
166
|
var _ref2 = keypadSettings || {},
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
167
|
+
_ref2$layout = _ref2.layout,
|
|
168
|
+
keypadLayout = _ref2$layout === void 0 ? null : _ref2$layout;
|
|
181
169
|
var _ref3 = keypadLayout || {},
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
170
|
+
_ref3$columnAlign = _ref3.columnAlign,
|
|
171
|
+
columnAlign = _ref3$columnAlign === void 0 ? null : _ref3$columnAlign,
|
|
172
|
+
_ref3$columns = _ref3.columns,
|
|
173
|
+
columns = _ref3$columns === void 0 ? null : _ref3$columns,
|
|
174
|
+
_ref3$spacing = _ref3.spacing,
|
|
175
|
+
columnSpacing = _ref3$spacing === void 0 ? null : _ref3$spacing,
|
|
176
|
+
_ref3$withSquareItems = _ref3.withSquareItems,
|
|
177
|
+
withSquareItems = _ref3$withSquareItems === void 0 ? false : _ref3$withSquareItems;
|
|
191
178
|
var _ref4 = buttonStyles || {},
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
179
|
+
_ref4$layout = _ref4.layout,
|
|
180
|
+
buttonLayout = _ref4$layout === void 0 ? null : _ref4$layout,
|
|
181
|
+
_ref4$textStyle = _ref4.textStyle,
|
|
182
|
+
buttonTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
|
|
183
|
+
_ref4$boxStyle = _ref4.boxStyle,
|
|
184
|
+
buttonBoxStyle = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle;
|
|
199
185
|
var _ref5 = popupStyles || {},
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
186
|
+
_ref5$layout = _ref5.layout,
|
|
187
|
+
popupLayout = _ref5$layout === void 0 ? null : _ref5$layout,
|
|
188
|
+
_ref5$backdrop = _ref5.backdrop,
|
|
189
|
+
popupBackdrop = _ref5$backdrop === void 0 ? null : _ref5$backdrop,
|
|
190
|
+
_ref5$headingTextStyl = _ref5.headingTextStyle,
|
|
191
|
+
headingTextStyle = _ref5$headingTextStyl === void 0 ? null : _ref5$headingTextStyl,
|
|
192
|
+
_ref5$contentTextStyl = _ref5.contentTextStyle,
|
|
193
|
+
contentTextStyle = _ref5$contentTextStyl === void 0 ? null : _ref5$contentTextStyl,
|
|
194
|
+
_ref5$boxStyle = _ref5.boxStyle,
|
|
195
|
+
popupBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
|
|
211
196
|
var popupLayoutClassName = useMemo(function () {
|
|
212
197
|
return popupLayout !== null ? camelCase(popupLayout) : '';
|
|
213
198
|
}, [popupLayout]);
|
|
214
|
-
|
|
215
199
|
var _useState = useState(false),
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
200
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
201
|
+
showPopup = _useState2[0],
|
|
202
|
+
setShowPopup = _useState2[1];
|
|
220
203
|
var _useState3 = useState(null),
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
204
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
205
|
+
popup = _useState4[0],
|
|
206
|
+
setPopup = _useState4[1];
|
|
225
207
|
var _ref6 = popup || {},
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
208
|
+
_ref6$heading = _ref6.heading,
|
|
209
|
+
popupHeading = _ref6$heading === void 0 ? null : _ref6$heading,
|
|
210
|
+
_ref6$content = _ref6.content,
|
|
211
|
+
popupContent = _ref6$content === void 0 ? null : _ref6$content,
|
|
212
|
+
_ref6$largeVisual = _ref6.largeVisual,
|
|
213
|
+
largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual;
|
|
233
214
|
var _ref7 = popupHeading || {},
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
215
|
+
_ref7$body = _ref7.body,
|
|
216
|
+
popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body,
|
|
217
|
+
_ref7$textStyle = _ref7.textStyle,
|
|
218
|
+
popupHeadingTextStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
|
|
239
219
|
var _ref8 = popupContent || {},
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
220
|
+
_ref8$body = _ref8.body,
|
|
221
|
+
popupContentBody = _ref8$body === void 0 ? null : _ref8$body,
|
|
222
|
+
_ref8$textStyle = _ref8.textStyle,
|
|
223
|
+
popupContentTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
|
|
245
224
|
var _ref9 = popupBackdrop || {},
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
225
|
+
_ref9$color = _ref9.color,
|
|
226
|
+
backdropColor = _ref9$color === void 0 ? null : _ref9$color,
|
|
227
|
+
_ref9$image = _ref9.image,
|
|
228
|
+
backdropMedia = _ref9$image === void 0 ? null : _ref9$image;
|
|
251
229
|
var onItemClick = useCallback(function (e, item) {
|
|
252
230
|
e.stopPropagation();
|
|
253
231
|
setPopup(item);
|
|
@@ -260,75 +238,64 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
260
238
|
}, [setShowPopup]);
|
|
261
239
|
var computePopupProgress = useCallback(function (_ref10) {
|
|
262
240
|
var dragActive = _ref10.active,
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
241
|
+
_ref10$movement = _slicedToArray(_ref10.movement, 2),
|
|
242
|
+
my = _ref10$movement[1],
|
|
243
|
+
_ref10$velocity = _slicedToArray(_ref10.velocity, 2),
|
|
244
|
+
vy = _ref10$velocity[1];
|
|
268
245
|
var damper = 0.5;
|
|
269
246
|
var p = Math.max(0, my) / window.innerHeight;
|
|
270
247
|
var progress = p * damper;
|
|
271
248
|
var reachedThreshold = vy > 0.3 || Math.abs(p) > 0.3;
|
|
272
|
-
|
|
273
249
|
if (!dragActive) {
|
|
274
250
|
if (reachedThreshold) {
|
|
275
251
|
onCloseModal();
|
|
276
252
|
}
|
|
277
|
-
|
|
278
253
|
return reachedThreshold ? 0 : 1;
|
|
279
254
|
}
|
|
280
|
-
|
|
281
255
|
return 1 - progress;
|
|
282
256
|
}, [onCloseModal]);
|
|
283
|
-
|
|
284
257
|
var _useDragProgress = useDragProgress({
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
258
|
+
disabled: !isView,
|
|
259
|
+
progress: showPopup ? 1 : 0,
|
|
260
|
+
computeProgress: computePopupProgress,
|
|
261
|
+
springParams: {
|
|
262
|
+
config: {
|
|
263
|
+
tension: 300,
|
|
264
|
+
friction: 30
|
|
265
|
+
}
|
|
292
266
|
}
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
popupSpring = _useDragProgress.progress;
|
|
297
|
-
|
|
267
|
+
}),
|
|
268
|
+
bindPopupDrag = _useDragProgress.bind,
|
|
269
|
+
popupSpring = _useDragProgress.progress;
|
|
298
270
|
var gridItems = useMemo(function () {
|
|
299
271
|
return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
|
|
300
272
|
var _ref15;
|
|
301
|
-
|
|
302
273
|
var _ref11 = item || {},
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
274
|
+
_ref11$id = _ref11.id,
|
|
275
|
+
id = _ref11$id === void 0 ? null : _ref11$id,
|
|
276
|
+
_ref11$label = _ref11.label,
|
|
277
|
+
label = _ref11$label === void 0 ? null : _ref11$label,
|
|
278
|
+
_ref11$visual = _ref11.visual,
|
|
279
|
+
visual = _ref11$visual === void 0 ? null : _ref11$visual,
|
|
280
|
+
_ref11$textStyle = _ref11.textStyle,
|
|
281
|
+
textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
|
|
282
|
+
_ref11$boxStyle = _ref11.boxStyle,
|
|
283
|
+
boxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle,
|
|
284
|
+
_ref11$heading = _ref11.heading,
|
|
285
|
+
heading = _ref11$heading === void 0 ? null : _ref11$heading,
|
|
286
|
+
_ref11$content = _ref11.content,
|
|
287
|
+
content = _ref11$content === void 0 ? null : _ref11$content,
|
|
288
|
+
_ref11$largeVisual = _ref11.largeVisual,
|
|
289
|
+
popupLargeVisual = _ref11$largeVisual === void 0 ? null : _ref11$largeVisual;
|
|
320
290
|
var _ref12 = visual || {},
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
291
|
+
_ref12$url = _ref12.url,
|
|
292
|
+
visualUrl = _ref12$url === void 0 ? null : _ref12$url;
|
|
324
293
|
var _ref13 = heading || {},
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
294
|
+
_ref13$body = _ref13.body,
|
|
295
|
+
headingBody = _ref13$body === void 0 ? null : _ref13$body;
|
|
328
296
|
var _ref14 = content || {},
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
297
|
+
_ref14$body = _ref14.body,
|
|
298
|
+
contentBody = _ref14$body === void 0 ? null : _ref14$body;
|
|
332
299
|
var key = label || visualUrl || id;
|
|
333
300
|
var isEmpty = label === null && visual === null;
|
|
334
301
|
var isPopupEmpty = (heading === null || headingBody === '') && (content === null || contentBody === '') && popupLargeVisual === null;
|
|
@@ -381,22 +348,18 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
381
348
|
useEffect(function () {
|
|
382
349
|
if (screenState === 'popup') {
|
|
383
350
|
setPopup(placeholderPopupBoxStyles); // @note force placeholder
|
|
384
|
-
|
|
385
351
|
setShowPopup(1);
|
|
386
352
|
}
|
|
387
|
-
|
|
388
353
|
if (screenState === 'keypad') {
|
|
389
354
|
setPopup(null);
|
|
390
355
|
setShowPopup(0);
|
|
391
356
|
}
|
|
392
|
-
|
|
393
357
|
if (screenState !== null && screenState.includes('popups')) {
|
|
394
358
|
var index = screenState.split('.').pop();
|
|
395
359
|
var found = items[index];
|
|
396
360
|
setShowPopup(1);
|
|
397
361
|
setPopup(found);
|
|
398
362
|
}
|
|
399
|
-
|
|
400
363
|
if (screenState === null) {
|
|
401
364
|
setShowPopup(0);
|
|
402
365
|
setPopup(null);
|
|
@@ -522,7 +485,6 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
522
485
|
className: styles.popupVisual
|
|
523
486
|
}) : null)))))));
|
|
524
487
|
};
|
|
525
|
-
|
|
526
488
|
KeypadScreen.propTypes = propTypes;
|
|
527
489
|
KeypadScreen.defaultProps = defaultProps;
|
|
528
490
|
var Keypad = /*#__PURE__*/React.memo(KeypadScreen);
|
package/lib/index.js
CHANGED
|
@@ -45,7 +45,7 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
|
|
|
45
45
|
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
46
46
|
var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
|
|
47
47
|
|
|
48
|
-
var styles = {"popupButton":"micromag-screen-keypad-popupButton","
|
|
48
|
+
var styles = {"popupButton":"micromag-screen-keypad-popupButton","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","buttonLabel":"micromag-screen-keypad-buttonLabel","withSquareItems":"micromag-screen-keypad-withSquareItems","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","thumbnail":"micromag-screen-keypad-thumbnail","popupBackdrop":"micromag-screen-keypad-popupBackdrop","button":"micromag-screen-keypad-button","background":"micromag-screen-keypad-background","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","inner":"micromag-screen-keypad-inner","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","isPopupEmpty":"micromag-screen-keypad-isPopupEmpty","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popup":"micromag-screen-keypad-popup","popupInner":"micromag-screen-keypad-popupInner","popupContent":"micromag-screen-keypad-popupContent","popupWrapper":"micromag-screen-keypad-popupWrapper","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","contentBottom":"micromag-screen-keypad-contentBottom","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual"};
|
|
49
49
|
|
|
50
50
|
var placeholders = [{
|
|
51
51
|
id: '1'
|
|
@@ -94,7 +94,6 @@ var stopDragEventsPropagation = {
|
|
|
94
94
|
return e.stopPropagation();
|
|
95
95
|
}
|
|
96
96
|
};
|
|
97
|
-
|
|
98
97
|
var mouseBlocker = _objectSpread__default["default"](_objectSpread__default["default"]({}, stopDragEventsPropagation), {}, {
|
|
99
98
|
onClick: function onClick(e) {
|
|
100
99
|
return e.stopPropagation();
|
|
@@ -109,7 +108,6 @@ var mouseBlocker = _objectSpread__default["default"](_objectSpread__default["def
|
|
|
109
108
|
cursor: 'default'
|
|
110
109
|
}
|
|
111
110
|
});
|
|
112
|
-
|
|
113
111
|
var propTypes = {
|
|
114
112
|
items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
|
|
115
113
|
id: PropTypes__default["default"].string,
|
|
@@ -156,121 +154,101 @@ var defaultProps = {
|
|
|
156
154
|
active: true,
|
|
157
155
|
className: null
|
|
158
156
|
};
|
|
159
|
-
|
|
160
157
|
var KeypadScreen = function KeypadScreen(_ref) {
|
|
161
158
|
var _ref16;
|
|
162
|
-
|
|
163
159
|
var items = _ref.items,
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
160
|
+
layout = _ref.layout,
|
|
161
|
+
spacing = _ref.spacing,
|
|
162
|
+
keypadSettings = _ref.keypadSettings,
|
|
163
|
+
buttonStyles = _ref.buttonStyles,
|
|
164
|
+
popupStyles = _ref.popupStyles,
|
|
165
|
+
background = _ref.background,
|
|
166
|
+
current = _ref.current,
|
|
167
|
+
active = _ref.active,
|
|
168
|
+
className = _ref.className;
|
|
173
169
|
var trackScreenEvent = hooks.useTrackScreenEvent('keypad');
|
|
174
|
-
|
|
175
170
|
var _usePlaybackContext = contexts.usePlaybackContext(),
|
|
176
|
-
|
|
177
|
-
|
|
171
|
+
muted = _usePlaybackContext.muted;
|
|
178
172
|
var mediaRef = contexts.usePlaybackMediaRef(current);
|
|
179
|
-
|
|
180
173
|
var _useScreenSize = contexts.useScreenSize(),
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
174
|
+
width = _useScreenSize.width,
|
|
175
|
+
height = _useScreenSize.height,
|
|
176
|
+
resolution = _useScreenSize.resolution;
|
|
185
177
|
var _useViewerContext = contexts.useViewerContext(),
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
178
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
179
|
+
viewerBottomHeight = _useViewerContext.bottomHeight;
|
|
189
180
|
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
181
|
+
isView = _useScreenRenderConte.isView,
|
|
182
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
183
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
184
|
+
isEdit = _useScreenRenderConte.isEdit;
|
|
195
185
|
var screenState = contexts.useScreenState();
|
|
196
186
|
var backgroundPlaying = current && (isView || isEdit);
|
|
197
187
|
var mediaShouldLoad = !isPlaceholder && (current || active);
|
|
198
188
|
var isInteractivePreview = isEdit && screenState === null;
|
|
199
|
-
|
|
200
189
|
var _ref2 = keypadSettings || {},
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
190
|
+
_ref2$layout = _ref2.layout,
|
|
191
|
+
keypadLayout = _ref2$layout === void 0 ? null : _ref2$layout;
|
|
204
192
|
var _ref3 = keypadLayout || {},
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
193
|
+
_ref3$columnAlign = _ref3.columnAlign,
|
|
194
|
+
columnAlign = _ref3$columnAlign === void 0 ? null : _ref3$columnAlign,
|
|
195
|
+
_ref3$columns = _ref3.columns,
|
|
196
|
+
columns = _ref3$columns === void 0 ? null : _ref3$columns,
|
|
197
|
+
_ref3$spacing = _ref3.spacing,
|
|
198
|
+
columnSpacing = _ref3$spacing === void 0 ? null : _ref3$spacing,
|
|
199
|
+
_ref3$withSquareItems = _ref3.withSquareItems,
|
|
200
|
+
withSquareItems = _ref3$withSquareItems === void 0 ? false : _ref3$withSquareItems;
|
|
214
201
|
var _ref4 = buttonStyles || {},
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
202
|
+
_ref4$layout = _ref4.layout,
|
|
203
|
+
buttonLayout = _ref4$layout === void 0 ? null : _ref4$layout,
|
|
204
|
+
_ref4$textStyle = _ref4.textStyle,
|
|
205
|
+
buttonTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
|
|
206
|
+
_ref4$boxStyle = _ref4.boxStyle,
|
|
207
|
+
buttonBoxStyle = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle;
|
|
222
208
|
var _ref5 = popupStyles || {},
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
209
|
+
_ref5$layout = _ref5.layout,
|
|
210
|
+
popupLayout = _ref5$layout === void 0 ? null : _ref5$layout,
|
|
211
|
+
_ref5$backdrop = _ref5.backdrop,
|
|
212
|
+
popupBackdrop = _ref5$backdrop === void 0 ? null : _ref5$backdrop,
|
|
213
|
+
_ref5$headingTextStyl = _ref5.headingTextStyle,
|
|
214
|
+
headingTextStyle = _ref5$headingTextStyl === void 0 ? null : _ref5$headingTextStyl,
|
|
215
|
+
_ref5$contentTextStyl = _ref5.contentTextStyle,
|
|
216
|
+
contentTextStyle = _ref5$contentTextStyl === void 0 ? null : _ref5$contentTextStyl,
|
|
217
|
+
_ref5$boxStyle = _ref5.boxStyle,
|
|
218
|
+
popupBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
|
|
234
219
|
var popupLayoutClassName = React.useMemo(function () {
|
|
235
220
|
return popupLayout !== null ? camelCase__default["default"](popupLayout) : '';
|
|
236
221
|
}, [popupLayout]);
|
|
237
|
-
|
|
238
222
|
var _useState = React.useState(false),
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
223
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
224
|
+
showPopup = _useState2[0],
|
|
225
|
+
setShowPopup = _useState2[1];
|
|
243
226
|
var _useState3 = React.useState(null),
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
227
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
228
|
+
popup = _useState4[0],
|
|
229
|
+
setPopup = _useState4[1];
|
|
248
230
|
var _ref6 = popup || {},
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
231
|
+
_ref6$heading = _ref6.heading,
|
|
232
|
+
popupHeading = _ref6$heading === void 0 ? null : _ref6$heading,
|
|
233
|
+
_ref6$content = _ref6.content,
|
|
234
|
+
popupContent = _ref6$content === void 0 ? null : _ref6$content,
|
|
235
|
+
_ref6$largeVisual = _ref6.largeVisual,
|
|
236
|
+
largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual;
|
|
256
237
|
var _ref7 = popupHeading || {},
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
238
|
+
_ref7$body = _ref7.body,
|
|
239
|
+
popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body,
|
|
240
|
+
_ref7$textStyle = _ref7.textStyle,
|
|
241
|
+
popupHeadingTextStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
|
|
262
242
|
var _ref8 = popupContent || {},
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
243
|
+
_ref8$body = _ref8.body,
|
|
244
|
+
popupContentBody = _ref8$body === void 0 ? null : _ref8$body,
|
|
245
|
+
_ref8$textStyle = _ref8.textStyle,
|
|
246
|
+
popupContentTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
|
|
268
247
|
var _ref9 = popupBackdrop || {},
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
248
|
+
_ref9$color = _ref9.color,
|
|
249
|
+
backdropColor = _ref9$color === void 0 ? null : _ref9$color,
|
|
250
|
+
_ref9$image = _ref9.image,
|
|
251
|
+
backdropMedia = _ref9$image === void 0 ? null : _ref9$image;
|
|
274
252
|
var onItemClick = React.useCallback(function (e, item) {
|
|
275
253
|
e.stopPropagation();
|
|
276
254
|
setPopup(item);
|
|
@@ -283,75 +261,64 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
283
261
|
}, [setShowPopup]);
|
|
284
262
|
var computePopupProgress = React.useCallback(function (_ref10) {
|
|
285
263
|
var dragActive = _ref10.active,
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
264
|
+
_ref10$movement = _slicedToArray__default["default"](_ref10.movement, 2),
|
|
265
|
+
my = _ref10$movement[1],
|
|
266
|
+
_ref10$velocity = _slicedToArray__default["default"](_ref10.velocity, 2),
|
|
267
|
+
vy = _ref10$velocity[1];
|
|
291
268
|
var damper = 0.5;
|
|
292
269
|
var p = Math.max(0, my) / window.innerHeight;
|
|
293
270
|
var progress = p * damper;
|
|
294
271
|
var reachedThreshold = vy > 0.3 || Math.abs(p) > 0.3;
|
|
295
|
-
|
|
296
272
|
if (!dragActive) {
|
|
297
273
|
if (reachedThreshold) {
|
|
298
274
|
onCloseModal();
|
|
299
275
|
}
|
|
300
|
-
|
|
301
276
|
return reachedThreshold ? 0 : 1;
|
|
302
277
|
}
|
|
303
|
-
|
|
304
278
|
return 1 - progress;
|
|
305
279
|
}, [onCloseModal]);
|
|
306
|
-
|
|
307
280
|
var _useDragProgress = hooks.useDragProgress({
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
281
|
+
disabled: !isView,
|
|
282
|
+
progress: showPopup ? 1 : 0,
|
|
283
|
+
computeProgress: computePopupProgress,
|
|
284
|
+
springParams: {
|
|
285
|
+
config: {
|
|
286
|
+
tension: 300,
|
|
287
|
+
friction: 30
|
|
288
|
+
}
|
|
315
289
|
}
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
popupSpring = _useDragProgress.progress;
|
|
320
|
-
|
|
290
|
+
}),
|
|
291
|
+
bindPopupDrag = _useDragProgress.bind,
|
|
292
|
+
popupSpring = _useDragProgress.progress;
|
|
321
293
|
var gridItems = React.useMemo(function () {
|
|
322
294
|
return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
|
|
323
295
|
var _ref15;
|
|
324
|
-
|
|
325
296
|
var _ref11 = item || {},
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
297
|
+
_ref11$id = _ref11.id,
|
|
298
|
+
id = _ref11$id === void 0 ? null : _ref11$id,
|
|
299
|
+
_ref11$label = _ref11.label,
|
|
300
|
+
label = _ref11$label === void 0 ? null : _ref11$label,
|
|
301
|
+
_ref11$visual = _ref11.visual,
|
|
302
|
+
visual = _ref11$visual === void 0 ? null : _ref11$visual,
|
|
303
|
+
_ref11$textStyle = _ref11.textStyle,
|
|
304
|
+
textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
|
|
305
|
+
_ref11$boxStyle = _ref11.boxStyle,
|
|
306
|
+
boxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle,
|
|
307
|
+
_ref11$heading = _ref11.heading,
|
|
308
|
+
heading = _ref11$heading === void 0 ? null : _ref11$heading,
|
|
309
|
+
_ref11$content = _ref11.content,
|
|
310
|
+
content = _ref11$content === void 0 ? null : _ref11$content,
|
|
311
|
+
_ref11$largeVisual = _ref11.largeVisual,
|
|
312
|
+
popupLargeVisual = _ref11$largeVisual === void 0 ? null : _ref11$largeVisual;
|
|
343
313
|
var _ref12 = visual || {},
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
314
|
+
_ref12$url = _ref12.url,
|
|
315
|
+
visualUrl = _ref12$url === void 0 ? null : _ref12$url;
|
|
347
316
|
var _ref13 = heading || {},
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
317
|
+
_ref13$body = _ref13.body,
|
|
318
|
+
headingBody = _ref13$body === void 0 ? null : _ref13$body;
|
|
351
319
|
var _ref14 = content || {},
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
320
|
+
_ref14$body = _ref14.body,
|
|
321
|
+
contentBody = _ref14$body === void 0 ? null : _ref14$body;
|
|
355
322
|
var key = label || visualUrl || id;
|
|
356
323
|
var isEmpty = label === null && visual === null;
|
|
357
324
|
var isPopupEmpty = (heading === null || headingBody === '') && (content === null || contentBody === '') && popupLargeVisual === null;
|
|
@@ -404,22 +371,18 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
404
371
|
React.useEffect(function () {
|
|
405
372
|
if (screenState === 'popup') {
|
|
406
373
|
setPopup(placeholderPopupBoxStyles); // @note force placeholder
|
|
407
|
-
|
|
408
374
|
setShowPopup(1);
|
|
409
375
|
}
|
|
410
|
-
|
|
411
376
|
if (screenState === 'keypad') {
|
|
412
377
|
setPopup(null);
|
|
413
378
|
setShowPopup(0);
|
|
414
379
|
}
|
|
415
|
-
|
|
416
380
|
if (screenState !== null && screenState.includes('popups')) {
|
|
417
381
|
var index = screenState.split('.').pop();
|
|
418
382
|
var found = items[index];
|
|
419
383
|
setShowPopup(1);
|
|
420
384
|
setPopup(found);
|
|
421
385
|
}
|
|
422
|
-
|
|
423
386
|
if (screenState === null) {
|
|
424
387
|
setShowPopup(0);
|
|
425
388
|
setPopup(null);
|
|
@@ -545,7 +508,6 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
545
508
|
className: styles.popupVisual
|
|
546
509
|
}) : null)))))));
|
|
547
510
|
};
|
|
548
|
-
|
|
549
511
|
KeypadScreen.propTypes = propTypes;
|
|
550
512
|
KeypadScreen.defaultProps = defaultProps;
|
|
551
513
|
var Keypad = /*#__PURE__*/React__default["default"].memo(KeypadScreen);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-keypad",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.322",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -54,22 +54,22 @@
|
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@babel/runtime": "^7.13.10",
|
|
57
|
-
"@micromag/core": "^0.3.
|
|
58
|
-
"@micromag/element-background": "^0.3.
|
|
59
|
-
"@micromag/element-button": "^0.3.
|
|
60
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
61
|
-
"@micromag/element-container": "^0.3.
|
|
62
|
-
"@micromag/element-grid": "^0.3.
|
|
63
|
-
"@micromag/element-heading": "^0.3.
|
|
64
|
-
"@micromag/element-keypad": "^0.3.
|
|
65
|
-
"@micromag/element-layout": "^0.3.
|
|
66
|
-
"@micromag/element-scroll": "^0.3.
|
|
67
|
-
"@micromag/element-text": "^0.3.
|
|
68
|
-
"@micromag/element-urbania-author": "^0.3.
|
|
69
|
-
"@micromag/element-visual": "^0.3.
|
|
70
|
-
"@micromag/transforms": "^0.3.
|
|
71
|
-
"@react-spring/core": "^9.
|
|
72
|
-
"@react-spring/web": "^9.
|
|
57
|
+
"@micromag/core": "^0.3.322",
|
|
58
|
+
"@micromag/element-background": "^0.3.322",
|
|
59
|
+
"@micromag/element-button": "^0.3.322",
|
|
60
|
+
"@micromag/element-call-to-action": "^0.3.322",
|
|
61
|
+
"@micromag/element-container": "^0.3.322",
|
|
62
|
+
"@micromag/element-grid": "^0.3.322",
|
|
63
|
+
"@micromag/element-heading": "^0.3.322",
|
|
64
|
+
"@micromag/element-keypad": "^0.3.322",
|
|
65
|
+
"@micromag/element-layout": "^0.3.322",
|
|
66
|
+
"@micromag/element-scroll": "^0.3.322",
|
|
67
|
+
"@micromag/element-text": "^0.3.322",
|
|
68
|
+
"@micromag/element-urbania-author": "^0.3.322",
|
|
69
|
+
"@micromag/element-visual": "^0.3.322",
|
|
70
|
+
"@micromag/transforms": "^0.3.322",
|
|
71
|
+
"@react-spring/core": "^9.6.1",
|
|
72
|
+
"@react-spring/web": "^9.6.1",
|
|
73
73
|
"@use-gesture/react": "^10.2.4",
|
|
74
74
|
"camelcase": "^7.0.0",
|
|
75
75
|
"classnames": "^2.2.6",
|
|
@@ -77,10 +77,10 @@
|
|
|
77
77
|
"prop-types": "^15.7.2",
|
|
78
78
|
"react-intl": "^5.12.1",
|
|
79
79
|
"react-transition-group": "^4.4.2",
|
|
80
|
-
"uuid": "^
|
|
80
|
+
"uuid": "^9.0.0"
|
|
81
81
|
},
|
|
82
82
|
"publishConfig": {
|
|
83
83
|
"access": "public"
|
|
84
84
|
},
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "2dfe09ad5a9ac720e4bfbffcb6371fc31c24fa9f"
|
|
86
86
|
}
|