@micromag/screen-keypad 0.3.829 → 0.3.831
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 +119 -124
- package/package.json +2 -2
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-keypad-close,.micromag-screen-keypad-popup,.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;position:relative}.micromag-screen-keypad-background,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button{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-close:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.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-fixedHeader{display:-ms-flexbox;display:flex;left:0;position:absolute;right:0;top:0;z-index:50;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end;opacity:0;padding:10px;pointer-events:none;width:100%}.micromag-screen-keypad-fixedHeader.micromag-screen-keypad-open{opacity:1;pointer-events:auto}.micromag-screen-keypad-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-filter:invert(100%);filter:invert(100%);font-weight:700;margin-left:auto}.micromag-screen-keypad-close:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff}.micromag-screen-keypad-closeIcon{border-radius:50%;color:#000;height:25px;padding:0;width:25px}.micromag-screen-keypad-header{left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-footer{bottom:0;left:0;position:absolute;width:100%}.micromag-screen-keypad-inner{height:100%;position:relative;z-index:2}.micromag-screen-keypad-layout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;height:100%;justify-content:flex-start;text-align:center;-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-keypad-subtitle,.micromag-screen-keypad-title{width:100%}.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:85%}.micromag-screen-keypad-item{height:100%;position:relative}.micromag-screen-keypad-
|
|
1
|
+
.micromag-screen-keypad-close,.micromag-screen-keypad-popup,.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;position:relative}.micromag-screen-keypad-background,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button{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-close:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.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-fixedHeader{display:-ms-flexbox;display:flex;left:0;position:absolute;right:0;top:0;z-index:50;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end;opacity:0;padding:10px;pointer-events:none;width:100%}.micromag-screen-keypad-fixedHeader.micromag-screen-keypad-open{opacity:1;pointer-events:auto}.micromag-screen-keypad-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-filter:invert(100%);filter:invert(100%);font-weight:700;margin-left:auto}.micromag-screen-keypad-close:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff}.micromag-screen-keypad-closeIcon{border-radius:50%;color:#000;height:25px;padding:0;width:25px}.micromag-screen-keypad-header{left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-footer{bottom:0;left:0;position:absolute;width:100%}.micromag-screen-keypad-inner{height:100%;position:relative;z-index:2}.micromag-screen-keypad-layout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;height:100%;justify-content:flex-start;text-align:center;-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-keypad-subtitle,.micromag-screen-keypad-title{width:100%}.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:85%}.micromag-screen-keypad-item{height:100%;position:relative}.micromag-screen-keypad-item .micromag-screen-keypad-button{gap:0}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-item{aspect-ratio:1;height:auto}.micromag-screen-keypad-button{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;font-weight:inherit;height:100%;justify-content:center;overflow:hidden;padding:0;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-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:focus-visible,.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-disableHover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:active,.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink{-webkit-text-decoration:none;text-decoration:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink:hover{color:inherit}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{margin:0;width:100%}.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-popupBackdrop{-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(0,0,0,.2);pointer-events:none;z-index:2}.micromag-screen-keypad-popup{height:100%;position:fixed;right:0;top:0;-ms-touch-action:none;touch-action:none;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-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:6}.micromag-screen-keypad-popup:active,.micromag-screen-keypad-popup:hover{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupButton{height:100%;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);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-popupScroll{height:100%;width:100%}.micromag-screen-keypad-popupInner{background-color:#1c1c1c;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:10% 7.5%;overflow:hidden;position:relative;z-index:40}.micromag-screen-keypad-popupInner.micromag-screen-keypad-withShadow{-webkit-box-shadow:0 0 2px #1c1c1c;box-shadow:0 0 2px #1c1c1c}.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-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;margin-bottom:.5em;width:100%}.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-contentSplit .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.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-contentBottom .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.micromag-screen-keypad-popupCTA{margin:0 auto;z-index:2}
|
package/es/index.js
CHANGED
|
@@ -12,7 +12,7 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
|
12
12
|
import { Close, ScreenElement } from '@micromag/core/components';
|
|
13
13
|
import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
|
|
14
14
|
import { useTrackScreenEvent, useDimensionObserver, useDragProgress } from '@micromag/core/hooks';
|
|
15
|
-
import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, camelCase,
|
|
15
|
+
import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, camelCase, getStyleFromBox } from '@micromag/core/utils';
|
|
16
16
|
import Background from '@micromag/element-background';
|
|
17
17
|
import Button, { RichButton } from '@micromag/element-button';
|
|
18
18
|
import CallToAction from '@micromag/element-call-to-action';
|
|
@@ -26,7 +26,7 @@ import Scroll from '@micromag/element-scroll';
|
|
|
26
26
|
import Text from '@micromag/element-text';
|
|
27
27
|
import Visual from '@micromag/element-visual';
|
|
28
28
|
|
|
29
|
-
var styles = {"popupButton":"micromag-screen-keypad-popupButton","popup":"micromag-screen-keypad-popup","close":"micromag-screen-keypad-close","popupBackdrop":"micromag-screen-keypad-popupBackdrop","withSquareItems":"micromag-screen-keypad-withSquareItems","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","fixedHeader":"micromag-screen-keypad-fixedHeader","open":"micromag-screen-keypad-open","closeIcon":"micromag-screen-keypad-closeIcon","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","inner":"micromag-screen-keypad-inner","title":"micromag-screen-keypad-title","subtitle":"micromag-screen-keypad-subtitle","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","
|
|
29
|
+
var styles = {"popupButton":"micromag-screen-keypad-popupButton","popup":"micromag-screen-keypad-popup","close":"micromag-screen-keypad-close","popupBackdrop":"micromag-screen-keypad-popupBackdrop","withSquareItems":"micromag-screen-keypad-withSquareItems","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","fixedHeader":"micromag-screen-keypad-fixedHeader","open":"micromag-screen-keypad-open","closeIcon":"micromag-screen-keypad-closeIcon","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","inner":"micromag-screen-keypad-inner","title":"micromag-screen-keypad-title","subtitle":"micromag-screen-keypad-subtitle","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","isEmpty":"micromag-screen-keypad-isEmpty","disableHover":"micromag-screen-keypad-disableHover","isLink":"micromag-screen-keypad-isLink","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonLabel":"micromag-screen-keypad-buttonLabel","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","popupScroll":"micromag-screen-keypad-popupScroll","popupInner":"micromag-screen-keypad-popupInner","withShadow":"micromag-screen-keypad-withShadow","popupContent":"micromag-screen-keypad-popupContent","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","emptyCTA":"micromag-screen-keypad-emptyCTA","popupCTA":"micromag-screen-keypad-popupCTA","contentBottom":"micromag-screen-keypad-contentBottom"};
|
|
30
30
|
|
|
31
31
|
var placeholders = [{
|
|
32
32
|
id: '1'
|
|
@@ -126,7 +126,6 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
126
126
|
subtitle = _ref.subtitle,
|
|
127
127
|
layout = _ref.layout,
|
|
128
128
|
spacing = _ref.spacing,
|
|
129
|
-
keypadSettings = _ref.keypadSettings,
|
|
130
129
|
keypadLayout = _ref.keypadLayout,
|
|
131
130
|
buttonStyles = _ref.buttonStyles,
|
|
132
131
|
popupStyles = _ref.popupStyles,
|
|
@@ -190,50 +189,42 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
190
189
|
var mediaShouldLoad = !isPlaceholder && (current || preload);
|
|
191
190
|
var isInteractivePreview = isEdit && screenState === null;
|
|
192
191
|
var isNotInteractive = isEdit && screenState !== null;
|
|
193
|
-
var _ref3 =
|
|
194
|
-
_ref3$
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
_ref4$
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
192
|
+
var _ref3 = keypadLayout || {},
|
|
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;
|
|
201
|
+
var _ref4 = buttonStyles || {},
|
|
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$labelBoxStyle = _ref4.labelBoxStyle,
|
|
207
|
+
buttonLabelBoxStyle = _ref4$labelBoxStyle === void 0 ? null : _ref4$labelBoxStyle,
|
|
208
|
+
_ref4$boxStyle = _ref4.boxStyle,
|
|
209
|
+
buttonBoxStyle = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
|
|
210
|
+
_ref4$visualWidth = _ref4.visualWidth,
|
|
211
|
+
buttonVisualWidth = _ref4$visualWidth === void 0 ? null : _ref4$visualWidth;
|
|
212
|
+
var _ref5 = popupStyles || {},
|
|
207
213
|
_ref5$layout = _ref5.layout,
|
|
208
|
-
|
|
209
|
-
_ref5$
|
|
210
|
-
|
|
211
|
-
_ref5$
|
|
212
|
-
|
|
214
|
+
popupLayout = _ref5$layout === void 0 ? null : _ref5$layout,
|
|
215
|
+
_ref5$headingTextStyl = _ref5.headingTextStyle,
|
|
216
|
+
headingTextStyle = _ref5$headingTextStyl === void 0 ? null : _ref5$headingTextStyl,
|
|
217
|
+
_ref5$contentTextStyl = _ref5.contentTextStyle,
|
|
218
|
+
contentTextStyle = _ref5$contentTextStyl === void 0 ? null : _ref5$contentTextStyl,
|
|
219
|
+
_ref5$button = _ref5.button,
|
|
220
|
+
popupButtons = _ref5$button === void 0 ? null : _ref5$button,
|
|
213
221
|
_ref5$boxStyle = _ref5.boxStyle,
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
buttonVisualWidth = _ref5$visualWidth === void 0 ? null : _ref5$visualWidth,
|
|
219
|
-
_ref5$alignment = _ref5.alignment,
|
|
220
|
-
buttonAlignment = _ref5$alignment === void 0 ? null : _ref5$alignment;
|
|
221
|
-
var _ref6 = popupStyles || {},
|
|
222
|
-
_ref6$layout = _ref6.layout,
|
|
223
|
-
popupLayout = _ref6$layout === void 0 ? null : _ref6$layout,
|
|
224
|
-
_ref6$headingTextStyl = _ref6.headingTextStyle,
|
|
225
|
-
headingTextStyle = _ref6$headingTextStyl === void 0 ? null : _ref6$headingTextStyl,
|
|
226
|
-
_ref6$contentTextStyl = _ref6.contentTextStyle,
|
|
227
|
-
contentTextStyle = _ref6$contentTextStyl === void 0 ? null : _ref6$contentTextStyl,
|
|
228
|
-
_ref6$button = _ref6.button,
|
|
229
|
-
popupButtons = _ref6$button === void 0 ? null : _ref6$button,
|
|
222
|
+
popupBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
|
|
223
|
+
var _ref6 = popupButtons || {},
|
|
224
|
+
_ref6$buttonTextStyle = _ref6.buttonTextStyle,
|
|
225
|
+
popupButtonsTextStyle = _ref6$buttonTextStyle === void 0 ? null : _ref6$buttonTextStyle,
|
|
230
226
|
_ref6$boxStyle = _ref6.boxStyle,
|
|
231
|
-
|
|
232
|
-
var _ref7 = popupButtons || {},
|
|
233
|
-
_ref7$buttonTextStyle = _ref7.buttonTextStyle,
|
|
234
|
-
popupButtonsTextStyle = _ref7$buttonTextStyle === void 0 ? null : _ref7$buttonTextStyle,
|
|
235
|
-
_ref7$boxStyle = _ref7.boxStyle,
|
|
236
|
-
popupButtonsBoxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
|
|
227
|
+
popupButtonsBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
|
|
237
228
|
var popupLayoutClassName = useMemo(function () {
|
|
238
229
|
return popupLayout !== null ? camelCase(popupLayout) : '';
|
|
239
230
|
}, [popupLayout]);
|
|
@@ -245,48 +236,48 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
245
236
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
246
237
|
popup = _useState4[0],
|
|
247
238
|
setPopup = _useState4[1];
|
|
248
|
-
var
|
|
249
|
-
|
|
250
|
-
popupHeading =
|
|
251
|
-
|
|
252
|
-
popupContent =
|
|
253
|
-
|
|
254
|
-
largeVisual =
|
|
255
|
-
|
|
256
|
-
popupButton =
|
|
257
|
-
|
|
258
|
-
singlePopupBoxStyle =
|
|
239
|
+
var _ref7 = popup || {},
|
|
240
|
+
_ref7$heading = _ref7.heading,
|
|
241
|
+
popupHeading = _ref7$heading === void 0 ? null : _ref7$heading,
|
|
242
|
+
_ref7$content = _ref7.content,
|
|
243
|
+
popupContent = _ref7$content === void 0 ? null : _ref7$content,
|
|
244
|
+
_ref7$largeVisual = _ref7.largeVisual,
|
|
245
|
+
largeVisual = _ref7$largeVisual === void 0 ? null : _ref7$largeVisual,
|
|
246
|
+
_ref7$button = _ref7.button,
|
|
247
|
+
popupButton = _ref7$button === void 0 ? null : _ref7$button,
|
|
248
|
+
_ref7$popupBoxStyle = _ref7.popupBoxStyle,
|
|
249
|
+
singlePopupBoxStyle = _ref7$popupBoxStyle === void 0 ? null : _ref7$popupBoxStyle;
|
|
259
250
|
var hasPopupHeading = isTextFilled(popupHeading);
|
|
260
|
-
var
|
|
261
|
-
|
|
262
|
-
popupHeadingTextStyle =
|
|
251
|
+
var _ref8 = popupHeading || {},
|
|
252
|
+
_ref8$textStyle = _ref8.textStyle,
|
|
253
|
+
popupHeadingTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
|
|
263
254
|
var hasPopupContent = isTextFilled(popupContent);
|
|
264
|
-
var
|
|
265
|
-
|
|
266
|
-
popupContentTextStyle =
|
|
267
|
-
var
|
|
268
|
-
|
|
269
|
-
buttonLabel =
|
|
270
|
-
|
|
271
|
-
buttonUrl =
|
|
272
|
-
|
|
273
|
-
popupInWebView =
|
|
274
|
-
|
|
275
|
-
popupButtonBoxStyle =
|
|
255
|
+
var _ref9 = popupContent || {},
|
|
256
|
+
_ref9$textStyle = _ref9.textStyle,
|
|
257
|
+
popupContentTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
|
|
258
|
+
var _ref0 = popupButton || {},
|
|
259
|
+
_ref0$label = _ref0.label,
|
|
260
|
+
buttonLabel = _ref0$label === void 0 ? null : _ref0$label,
|
|
261
|
+
_ref0$url = _ref0.url,
|
|
262
|
+
buttonUrl = _ref0$url === void 0 ? null : _ref0$url,
|
|
263
|
+
_ref0$inWebView = _ref0.inWebView,
|
|
264
|
+
popupInWebView = _ref0$inWebView === void 0 ? false : _ref0$inWebView,
|
|
265
|
+
_ref0$boxStyle = _ref0.boxStyle,
|
|
266
|
+
popupButtonBoxStyle = _ref0$boxStyle === void 0 ? null : _ref0$boxStyle;
|
|
276
267
|
var onItemClick = useCallback(function (e, item, index) {
|
|
277
268
|
e.stopPropagation();
|
|
278
269
|
if (isNotInteractive) {
|
|
279
270
|
return;
|
|
280
271
|
}
|
|
281
|
-
var
|
|
282
|
-
|
|
283
|
-
itemLabel =
|
|
284
|
-
|
|
285
|
-
heading =
|
|
286
|
-
|
|
287
|
-
inWebView =
|
|
288
|
-
|
|
289
|
-
url =
|
|
272
|
+
var _ref1 = item || {},
|
|
273
|
+
_ref1$label = _ref1.label,
|
|
274
|
+
itemLabel = _ref1$label === void 0 ? null : _ref1$label,
|
|
275
|
+
_ref1$heading = _ref1.heading,
|
|
276
|
+
heading = _ref1$heading === void 0 ? null : _ref1$heading,
|
|
277
|
+
_ref1$inWebView = _ref1.inWebView,
|
|
278
|
+
inWebView = _ref1$inWebView === void 0 ? false : _ref1$inWebView,
|
|
279
|
+
_ref1$url = _ref1.url,
|
|
280
|
+
url = _ref1$url === void 0 ? null : _ref1$url;
|
|
290
281
|
if (inWebView && url !== null) {
|
|
291
282
|
openWebView({
|
|
292
283
|
url: url
|
|
@@ -295,9 +286,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
295
286
|
setPopup(item);
|
|
296
287
|
setShowPopup(true);
|
|
297
288
|
}
|
|
298
|
-
var
|
|
299
|
-
|
|
300
|
-
headingBody =
|
|
289
|
+
var _ref10 = heading || {},
|
|
290
|
+
_ref10$body = _ref10.body,
|
|
291
|
+
headingBody = _ref10$body === void 0 ? null : _ref10$body;
|
|
301
292
|
var finalLabel = isString(itemLabel) ? itemLabel : (itemLabel || {}).body || null;
|
|
302
293
|
trackScreenEvent('click_item', ["#".concat(index + 1), finalLabel || headingBody || ''].filter(function (it) {
|
|
303
294
|
return !isEmpty(it);
|
|
@@ -334,21 +325,21 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
334
325
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
335
326
|
popupDragDirection = _useState6[0],
|
|
336
327
|
setPopupDragDirection = _useState6[1];
|
|
337
|
-
var onPopupScrollHeightChange = useCallback(function (
|
|
338
|
-
var
|
|
339
|
-
scrolleeHeight =
|
|
328
|
+
var onPopupScrollHeightChange = useCallback(function (_ref11) {
|
|
329
|
+
var _ref11$scrolleeHeight = _ref11.scrolleeHeight,
|
|
330
|
+
scrolleeHeight = _ref11$scrolleeHeight === void 0 ? 0 : _ref11$scrolleeHeight;
|
|
340
331
|
if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
|
|
341
332
|
setPopupDragDirection('top');
|
|
342
333
|
} else {
|
|
343
334
|
setPopupDragDirection('bottom');
|
|
344
335
|
}
|
|
345
336
|
}, [height]);
|
|
346
|
-
var computePopupProgress = useCallback(function (
|
|
347
|
-
var dragActive =
|
|
348
|
-
|
|
349
|
-
my =
|
|
350
|
-
|
|
351
|
-
vy =
|
|
337
|
+
var computePopupProgress = useCallback(function (_ref12) {
|
|
338
|
+
var dragActive = _ref12.active,
|
|
339
|
+
_ref12$movement = _slicedToArray(_ref12.movement, 2),
|
|
340
|
+
my = _ref12$movement[1],
|
|
341
|
+
_ref12$velocity = _slicedToArray(_ref12.velocity, 2),
|
|
342
|
+
vy = _ref12$velocity[1];
|
|
352
343
|
var damper = 0.5;
|
|
353
344
|
var windowHeight = typeof window !== 'undefined' ? window.innerHeight : 0;
|
|
354
345
|
var delta = windowHeight > 0 ? Math.abs(my) / windowHeight : 0;
|
|
@@ -444,39 +435,40 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
444
435
|
}, [showPopup, onCloseModal]);
|
|
445
436
|
var gridItems = useMemo(function () {
|
|
446
437
|
return (items === null || items.length === 0 ? placeholders : items).map(function (item, index) {
|
|
447
|
-
var
|
|
448
|
-
|
|
449
|
-
id =
|
|
450
|
-
|
|
451
|
-
itemLabel =
|
|
452
|
-
|
|
453
|
-
visual =
|
|
454
|
-
|
|
455
|
-
boxStyle =
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
438
|
+
var _ref13 = item || {},
|
|
439
|
+
_ref13$id = _ref13.id,
|
|
440
|
+
id = _ref13$id === void 0 ? null : _ref13$id,
|
|
441
|
+
_ref13$label = _ref13.label,
|
|
442
|
+
itemLabel = _ref13$label === void 0 ? null : _ref13$label,
|
|
443
|
+
_ref13$visual = _ref13.visual,
|
|
444
|
+
visual = _ref13$visual === void 0 ? null : _ref13$visual,
|
|
445
|
+
_ref13$boxStyle = _ref13.boxStyle,
|
|
446
|
+
boxStyle = _ref13$boxStyle === void 0 ? null : _ref13$boxStyle,
|
|
447
|
+
_ref13$heading = _ref13.heading,
|
|
448
|
+
heading = _ref13$heading === void 0 ? null : _ref13$heading,
|
|
449
|
+
_ref13$content = _ref13.content,
|
|
450
|
+
content = _ref13$content === void 0 ? null : _ref13$content,
|
|
451
|
+
_ref13$url = _ref13.url,
|
|
452
|
+
url = _ref13$url === void 0 ? null : _ref13$url,
|
|
453
|
+
_ref13$inWebView = _ref13.inWebView,
|
|
454
|
+
inWebView = _ref13$inWebView === void 0 ? false : _ref13$inWebView,
|
|
455
|
+
_ref13$largeVisual = _ref13.largeVisual,
|
|
456
|
+
popupLargeVisual = _ref13$largeVisual === void 0 ? null : _ref13$largeVisual;
|
|
457
|
+
var _ref14 = visual || {},
|
|
462
458
|
_ref14$url = _ref14.url,
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
var _ref15 = visual || {},
|
|
469
|
-
_ref15$url = _ref15.url,
|
|
470
|
-
visualUrl = _ref15$url === void 0 ? null : _ref15$url;
|
|
471
|
-
var _ref16 = heading || {},
|
|
459
|
+
visualUrl = _ref14$url === void 0 ? null : _ref14$url;
|
|
460
|
+
var _ref15 = heading || {},
|
|
461
|
+
_ref15$body = _ref15.body,
|
|
462
|
+
headingBody = _ref15$body === void 0 ? null : _ref15$body;
|
|
463
|
+
var _ref16 = content || {},
|
|
472
464
|
_ref16$body = _ref16.body,
|
|
473
|
-
|
|
474
|
-
var _ref17 = content || {},
|
|
475
|
-
_ref17$body = _ref17.body,
|
|
476
|
-
contentBody = _ref17$body === void 0 ? null : _ref17$body;
|
|
465
|
+
contentBody = _ref16$body === void 0 ? null : _ref16$body;
|
|
477
466
|
var finalLabel = isString(itemLabel) ? {
|
|
478
467
|
body: itemLabel
|
|
479
468
|
} : itemLabel || {};
|
|
469
|
+
var _ref17 = finalLabel || {},
|
|
470
|
+
_ref17$textStyle = _ref17.textStyle,
|
|
471
|
+
finalLabelTextStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
|
|
480
472
|
var _ref18 = finalLabel || {},
|
|
481
473
|
_ref18$body = _ref18.body,
|
|
482
474
|
finalBody = _ref18$body === void 0 ? null : _ref18$body;
|
|
@@ -489,15 +481,18 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
489
481
|
className: styles.item
|
|
490
482
|
}, /*#__PURE__*/React.createElement(RichButton, {
|
|
491
483
|
className: classNames([styles.button, _defineProperty(_defineProperty(_defineProperty({}, styles.isEmpty, itemIsEmpty), styles.isLink, url !== null), styles.disableHover, isPopupEmpty && url === null)]),
|
|
492
|
-
layout:
|
|
484
|
+
layout: buttonLayout || null,
|
|
493
485
|
external: isExternalLink,
|
|
494
486
|
href: isExternalLink ? url : null,
|
|
495
487
|
focusable: current,
|
|
496
488
|
onClick: !isPopupEmpty || url !== null && !isExternalLink ? function (e) {
|
|
497
489
|
return onItemClick(e, item, index);
|
|
498
|
-
} : null
|
|
499
|
-
style
|
|
500
|
-
|
|
490
|
+
} : null
|
|
491
|
+
// style={{
|
|
492
|
+
// ...getStyleFromAlignment(alignment, true, 'flex-start'),
|
|
493
|
+
// }}
|
|
494
|
+
,
|
|
495
|
+
textStyle: _objectSpread(_objectSpread({}, buttonTextStyle), finalLabelTextStyle),
|
|
501
496
|
buttonStyle: _objectSpread(_objectSpread({}, buttonBoxStyle), boxStyle),
|
|
502
497
|
label: finalLabel,
|
|
503
498
|
labelBoxStyle: buttonLabelBoxStyle,
|
|
@@ -507,7 +502,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
507
502
|
textClassName: styles.buttonLabel
|
|
508
503
|
}));
|
|
509
504
|
});
|
|
510
|
-
}, [items, screenState,
|
|
505
|
+
}, [items, screenState, buttonBoxStyle, buttonTextStyle, buttonLayout, isNotInteractive]);
|
|
511
506
|
useEffect(function () {
|
|
512
507
|
if (screenState === 'popup' && isPlaceholder) {
|
|
513
508
|
setPopup(placeholderPopupBoxStyles); // @note force placeholder
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-keypad",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.831",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -95,5 +95,5 @@
|
|
|
95
95
|
"access": "public",
|
|
96
96
|
"registry": "https://registry.npmjs.org/"
|
|
97
97
|
},
|
|
98
|
-
"gitHead": "
|
|
98
|
+
"gitHead": "fd6ba5c0f96cb5bb5d878e3f029380e7a3a1305b"
|
|
99
99
|
}
|