@micromag/element-call-to-action 0.3.147 → 0.3.152

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.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +72 -155
  3. package/lib/index.js +73 -157
  4. package/package.json +6 -6
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- @-webkit-keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.micromag-element-call-to-action-container{position:relative;z-index:100;padding-bottom:10px;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;opacity:1;text-align:center}.micromag-element-call-to-action-container .micromag-element-call-to-action-arrow{display:block;margin:0 auto 3px;-webkit-animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate;animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate}.micromag-element-call-to-action-container .micromag-element-call-to-action-icon,.micromag-element-call-to-action-container .micromag-element-call-to-action-label{display:inline-block;vertical-align:middle}.micromag-element-call-to-action-container .micromag-element-call-to-action-label{line-height:1}.micromag-element-call-to-action-container .micromag-element-call-to-action-button{display:block;margin:0 auto;padding:5px 10px;background-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;-webkit-user-drag:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-button:hover{text-decoration:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-selfTargetLink{display:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-leavingFrame{position:fixed;top:0;left:0;width:100vw;height:100vh;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:micromag-element-call-to-action-appear .5s ease both;animation:micromag-element-call-to-action-appear .5s ease both;opacity:0;background-color:#fff}.micromag-element-call-to-action-container.micromag-element-call-to-action-animationDisabled .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl{opacity:.5;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-disabled{opacity:0;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-inWebView{width:100%}.micromag-element-call-to-action-container.micromag-element-call-to-action-withMargin{margin-bottom:5px}.micromag-element-call-to-action-webView{position:absolute;z-index:9999;top:100%;width:100%;height:100%;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease}.micromag-element-call-to-action-webView.micromag-element-call-to-action-visible{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}@-webkit-keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}@keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}
1
+ @-webkit-keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.micromag-element-call-to-action-container{position:relative;z-index:100;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;opacity:1;text-align:center}.micromag-element-call-to-action-container .micromag-element-call-to-action-arrow{display:block;margin:0 auto 3px;-webkit-animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate;animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate}.micromag-element-call-to-action-container .micromag-element-call-to-action-icon,.micromag-element-call-to-action-container .micromag-element-call-to-action-label{display:inline-block;vertical-align:middle}.micromag-element-call-to-action-container .micromag-element-call-to-action-label{line-height:1}.micromag-element-call-to-action-container .micromag-element-call-to-action-button{display:block;margin:0 auto;padding:5px 10px;background-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;-webkit-user-drag:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-button:hover{text-decoration:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-selfTargetLink{display:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-leavingFrame{position:fixed;top:0;left:0;width:100vw;height:100vh;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:micromag-element-call-to-action-appear .5s ease both;animation:micromag-element-call-to-action-appear .5s ease both;opacity:0;background-color:#fff}.micromag-element-call-to-action-container.micromag-element-call-to-action-animationDisabled .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl{opacity:.5;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-withMargin{margin-bottom:5px}
package/es/index.js CHANGED
@@ -1,17 +1,16 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
2
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
3
+ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
4
  import { useGesture } from '@use-gesture/react';
5
5
  import classNames from 'classnames';
6
+ import isString from 'lodash/isString';
6
7
  import PropTypes from 'prop-types';
7
- import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';
8
+ import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
8
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
9
10
  import { useTrackEvent } from '@micromag/core/hooks';
10
11
  import { isValidUrl, getStyleFromColor, isIos } from '@micromag/core/utils';
11
12
  import Button from '@micromag/element-button';
12
13
  import Text from '@micromag/element-text';
13
- import WebView from '@micromag/element-webview';
14
- import isString from 'lodash/isString';
15
14
 
16
15
  var propTypes$1 = {
17
16
  color: PropTypes.string,
@@ -52,22 +51,21 @@ var Arrow = function Arrow(_ref) {
52
51
  Arrow.propTypes = propTypes$1;
53
52
  Arrow.defaultProps = defaultProps$1;
54
53
 
55
- var styles = {"container":"micromag-element-call-to-action-container","arrow":"micromag-element-call-to-action-arrow","upAndDown":"micromag-element-call-to-action-upAndDown","icon":"micromag-element-call-to-action-icon","label":"micromag-element-call-to-action-label","button":"micromag-element-call-to-action-button","selfTargetLink":"micromag-element-call-to-action-selfTargetLink","leavingFrame":"micromag-element-call-to-action-leavingFrame","appear":"micromag-element-call-to-action-appear","animationDisabled":"micromag-element-call-to-action-animationDisabled","invalidUrl":"micromag-element-call-to-action-invalidUrl","disabled":"micromag-element-call-to-action-disabled","inWebView":"micromag-element-call-to-action-inWebView","withMargin":"micromag-element-call-to-action-withMargin","webView":"micromag-element-call-to-action-webView","visible":"micromag-element-call-to-action-visible"};
54
+ var styles = {"container":"micromag-element-call-to-action-container","arrow":"micromag-element-call-to-action-arrow","upAndDown":"micromag-element-call-to-action-upAndDown","icon":"micromag-element-call-to-action-icon","label":"micromag-element-call-to-action-label","button":"micromag-element-call-to-action-button","selfTargetLink":"micromag-element-call-to-action-selfTargetLink","leavingFrame":"micromag-element-call-to-action-leavingFrame","appear":"micromag-element-call-to-action-appear","animationDisabled":"micromag-element-call-to-action-animationDisabled","invalidUrl":"micromag-element-call-to-action-invalidUrl","withMargin":"micromag-element-call-to-action-withMargin"};
56
55
 
57
56
  var propTypes = {
57
+ type: PropTypes.oneOf(['click', 'swipe-up', null]),
58
+ url: PropTypes.string,
59
+ label: PropTypes$1.textElement,
60
+ boxStyle: PropTypes$1.boxStyle,
61
+ inWebView: PropTypes.bool,
58
62
  elRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
59
63
  current: PropTypes.any // eslint-disable-line
60
64
 
61
65
  })]),
62
- disabled: PropTypes.bool,
63
66
  animationDisabled: PropTypes.bool,
64
- callToAction: PropTypes$1.callToAction,
65
67
  icon: PropTypes.node,
66
68
  arrow: PropTypes.node,
67
- screenSize: PropTypes.shape({
68
- width: PropTypes.number,
69
- height: PropTypes.number
70
- }),
71
69
  dragAmount: PropTypes.number,
72
70
  className: PropTypes.string,
73
71
  buttonClassName: PropTypes.string,
@@ -75,18 +73,19 @@ var propTypes = {
75
73
  labelClassName: PropTypes.string,
76
74
  arrowClassName: PropTypes.string,
77
75
  focusable: PropTypes.bool,
78
- enableInteraction: PropTypes.func,
79
- disableInteraction: PropTypes.func,
76
+ openWebView: PropTypes.func,
80
77
  onClick: PropTypes.func
81
78
  };
82
79
  var defaultProps = {
80
+ type: null,
81
+ url: null,
82
+ label: null,
83
+ boxStyle: null,
84
+ inWebView: false,
83
85
  elRef: null,
84
- disabled: false,
85
86
  animationDisabled: false,
86
- callToAction: null,
87
87
  icon: null,
88
88
  arrow: null,
89
- screenSize: null,
90
89
  dragAmount: 50,
91
90
  className: null,
92
91
  buttonClassName: null,
@@ -94,21 +93,23 @@ var defaultProps = {
94
93
  labelClassName: null,
95
94
  arrowClassName: null,
96
95
  focusable: true,
97
- enableInteraction: null,
98
- disableInteraction: null,
96
+ openWebView: null,
99
97
  onClick: null
100
98
  };
101
99
 
102
100
  function CallToAction(_ref) {
103
- var _ref10;
104
-
105
- var elRef = _ref.elRef,
101
+ var _ref7;
102
+
103
+ var type = _ref.type,
104
+ url = _ref.url,
105
+ label = _ref.label,
106
+ boxStyle = _ref.boxStyle,
107
+ inWebView = _ref.inWebView,
108
+ elRef = _ref.elRef,
106
109
  disabled = _ref.disabled,
107
110
  animationDisabled = _ref.animationDisabled,
108
- callToAction = _ref.callToAction,
109
111
  icon = _ref.icon,
110
112
  arrow = _ref.arrow,
111
- screenSize = _ref.screenSize,
112
113
  dragAmount = _ref.dragAmount,
113
114
  className = _ref.className,
114
115
  buttonClassName = _ref.buttonClassName,
@@ -116,57 +117,30 @@ function CallToAction(_ref) {
116
117
  labelClassName = _ref.labelClassName,
117
118
  arrowClassName = _ref.arrowClassName,
118
119
  focusable = _ref.focusable,
119
- enableInteraction = _ref.enableInteraction,
120
- disableInteraction = _ref.disableInteraction,
120
+ openWebView = _ref.openWebView,
121
121
  onClick = _ref.onClick;
122
-
123
- var _ref2 = callToAction || {},
124
- _ref2$active = _ref2.active,
125
- active = _ref2$active === void 0 ? false : _ref2$active,
126
- _ref2$type = _ref2.type,
127
- type = _ref2$type === void 0 ? null : _ref2$type,
128
- _ref2$url = _ref2.url,
129
- url = _ref2$url === void 0 ? null : _ref2$url,
130
- _ref2$label = _ref2.label,
131
- label = _ref2$label === void 0 ? null : _ref2$label,
132
- _ref2$boxStyle = _ref2.boxStyle,
133
- boxStyle = _ref2$boxStyle === void 0 ? null : _ref2$boxStyle,
134
- _ref2$inWebView = _ref2.inWebView,
135
- inWebView = _ref2$inWebView === void 0 ? false : _ref2$inWebView;
136
-
137
122
  var trackEvent = useTrackEvent();
138
-
139
- var _useState = useState(false),
140
- _useState2 = _slicedToArray(_useState, 2),
141
- showWebView = _useState2[0],
142
- setShowWebView = _useState2[1];
143
-
144
- var _useState3 = useState(true),
145
- _useState4 = _slicedToArray(_useState3, 2),
146
- disableWebView = _useState4[0],
147
- setDisabledWebView = _useState4[1];
148
-
149
123
  var swipeUpEnabled = type === null || type === 'swipe-up';
150
124
  var validUrl = useMemo(function () {
151
125
  return isValidUrl(url);
152
126
  }, [url]);
153
127
  var buttonRef = useRef(null);
154
128
 
155
- var _ref3 = label || {},
156
- _ref3$textStyle = _ref3.textStyle,
157
- textStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
129
+ var _ref2 = label || {},
130
+ _ref2$textStyle = _ref2.textStyle,
131
+ textStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
158
132
 
159
- var _ref4 = textStyle || {},
160
- _ref4$fontSize = _ref4.fontSize,
161
- fontSize = _ref4$fontSize === void 0 ? null : _ref4$fontSize,
162
- _ref4$color = _ref4.color,
163
- color = _ref4$color === void 0 ? null : _ref4$color,
164
- _ref4$lineHeight = _ref4.lineHeight,
165
- lineHeight = _ref4$lineHeight === void 0 ? null : _ref4$lineHeight;
133
+ var _ref3 = textStyle || {},
134
+ _ref3$fontSize = _ref3.fontSize,
135
+ fontSize = _ref3$fontSize === void 0 ? null : _ref3$fontSize,
136
+ _ref3$color = _ref3.color,
137
+ color = _ref3$color === void 0 ? null : _ref3$color,
138
+ _ref3$lineHeight = _ref3.lineHeight,
139
+ lineHeight = _ref3$lineHeight === void 0 ? null : _ref3$lineHeight;
166
140
 
167
- var _ref5 = boxStyle || {},
168
- _ref5$backgroundColor = _ref5.backgroundColor,
169
- backgroundColor = _ref5$backgroundColor === void 0 ? null : _ref5$backgroundColor;
141
+ var _ref4 = boxStyle || {},
142
+ _ref4$backgroundColor = _ref4.backgroundColor,
143
+ backgroundColor = _ref4$backgroundColor === void 0 ? null : _ref4$backgroundColor;
170
144
 
171
145
  var arrowStyle = useMemo(function () {
172
146
  return _objectSpread(_objectSpread({}, {
@@ -176,54 +150,49 @@ function CallToAction(_ref) {
176
150
 
177
151
  var selfTargetLinkRef = useRef(null);
178
152
 
179
- var _useState5 = useState(false),
180
- _useState6 = _slicedToArray(_useState5, 2),
181
- leaving = _useState6[0],
182
- setLeaving = _useState6[1]; // On click
153
+ var _useState = useState(false),
154
+ _useState2 = _slicedToArray(_useState, 2),
155
+ leaving = _useState2[0],
156
+ setLeaving = _useState2[1]; // On click
183
157
 
184
158
 
185
- var onClickLink = useCallback(function () {
186
- var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'click';
159
+ var onClickLink = useCallback(function (e) {
160
+ var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'click';
187
161
 
188
- if (trackEvent !== null) {
189
- trackEvent('call_to_action', isString(action) ? action : 'click', url);
162
+ if (inWebView && openWebView !== null) {
163
+ openWebView({
164
+ url: url
165
+ });
190
166
  }
191
167
 
192
- if (onClick !== null) {
193
- onClick();
168
+ if (onClick !== null && action === 'cllick') {
169
+ onClick(e);
194
170
  }
195
- }, [url, onClick, trackEvent]);
196
- var onClickClose = useCallback(function () {
171
+
197
172
  if (trackEvent !== null) {
198
- trackEvent('call_to_action', 'close', url);
173
+ trackEvent('call_to_action', isString(action) ? action : 'click', url);
199
174
  }
200
- }, [url, trackEvent]);
175
+ }, [url, onClick, trackEvent, inWebView]);
201
176
  var bind = useGesture({
202
- onDrag: function onDrag(_ref6) {
203
- var event = _ref6.event;
177
+ onDrag: function onDrag(_ref5) {
178
+ var event = _ref5.event;
204
179
  // fix firefox https://use-gesture.netlify.app/docs/faq/#why-cant-i-properly-drag-an-image-or-a-link
205
180
  event.preventDefault();
206
181
  },
207
- onDragEnd: function onDragEnd(_ref7) {
208
- var _ref7$movement = _slicedToArray(_ref7.movement, 2),
209
- my = _ref7$movement[1];
182
+ onDragEnd: function onDragEnd(_ref6) {
183
+ var _ref6$movement = _slicedToArray(_ref6.movement, 2),
184
+ my = _ref6$movement[1];
210
185
 
211
186
  if (my < -dragAmount) {
212
187
  if (inWebView) {
213
- setShowWebView(true);
214
- setDisabledWebView(false);
215
- onClickLink('swipe');
216
-
217
- if (disableInteraction !== null) {
218
- disableInteraction();
219
- }
188
+ onClickLink(null, 'swipe');
220
189
  } else if (isIos() && selfTargetLinkRef.current !== null) {
221
190
  selfTargetLinkRef.current.click();
222
191
  setLeaving(true);
223
- onClickLink('swipe');
192
+ onClickLink(null, 'swipe');
224
193
  } else if (buttonRef.current) {
225
194
  buttonRef.current.click();
226
- onClickLink('swipe');
195
+ onClickLink(null, 'swipe');
227
196
  }
228
197
  }
229
198
  }
@@ -238,51 +207,8 @@ function CallToAction(_ref) {
238
207
  window.removeEventListener('pagehide', onPageHide);
239
208
  };
240
209
  }, [setLeaving]);
241
- useEffect(function () {
242
- var id = null;
243
-
244
- if (inWebView) {
245
- if (showWebView) {
246
- setDisabledWebView(false);
247
- } else {
248
- id = setTimeout(function () {
249
- setDisabledWebView(true);
250
- }, 300);
251
- }
252
- }
253
-
254
- return function () {
255
- clearTimeout(id);
256
- };
257
- }, [showWebView, setDisabledWebView]);
258
- var onOpenWebView = useCallback(function () {
259
- setShowWebView(true);
260
- setDisabledWebView(false);
261
-
262
- if (disableInteraction !== null) {
263
- disableInteraction();
264
- }
265
-
266
- onClickLink('click');
267
- }, [setShowWebView, setDisabledWebView, disableInteraction, onClickLink]);
268
- var onCloseWebView = useCallback(function () {
269
- setShowWebView(false);
270
-
271
- if (enableInteraction !== null) {
272
- enableInteraction();
273
- }
274
-
275
- onClickClose();
276
- }, [setShowWebView, enableInteraction, onClickClose]);
277
- var ArrowElement = arrow !== null ? /*#__PURE__*/React.createElement("div", {
278
- className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)]),
279
- style: arrowStyle
280
- }, arrow) : /*#__PURE__*/React.createElement("div", {
281
- className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)]),
282
- style: arrowStyle
283
- }, /*#__PURE__*/React.createElement(Arrow, null));
284
- return active ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
285
- className: classNames([styles.container, (_ref10 = {}, _defineProperty(_ref10, className, className !== null), _defineProperty(_ref10, styles.disabled, disabled), _defineProperty(_ref10, styles.animationDisabled, animationDisabled), _defineProperty(_ref10, styles.invalidUrl, !validUrl), _defineProperty(_ref10, styles.inWebView, inWebView), _ref10)]),
210
+ return /*#__PURE__*/React.createElement("div", {
211
+ className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.disabled, disabled), _defineProperty(_ref7, styles.animationDisabled, animationDisabled), _defineProperty(_ref7, styles.invalidUrl, !validUrl), _defineProperty(_ref7, styles.inWebView, inWebView), _ref7)]),
286
212
  ref: elRef
287
213
  }, leaving ? /*#__PURE__*/React.createElement("div", {
288
214
  className: styles.leavingFrame
@@ -291,23 +217,21 @@ function CallToAction(_ref) {
291
217
  href: url,
292
218
  ref: selfTargetLinkRef,
293
219
  tabIndex: focusable ? '0' : '-1'
294
- }) : null, swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React.createElement("div", {
220
+ }) : null, swipeUpEnabled ? /*#__PURE__*/React.createElement("div", {
221
+ className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)]),
222
+ style: arrowStyle
223
+ }, arrow || /*#__PURE__*/React.createElement(Arrow, null)) : null, /*#__PURE__*/React.createElement("div", {
295
224
  className: classNames([styles.buttonBorder, _defineProperty({}, buttonBorderClassName, buttonBorderClassName !== null)])
296
225
  }, /*#__PURE__*/React.createElement(Button, Object.assign({
297
226
  className: classNames([styles.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
298
227
  refButton: buttonRef,
299
228
  focusable: focusable,
300
- buttonStyle: _objectSpread({
301
- marginBottom: 10
302
- }, boxStyle),
303
- inline: true
304
- }, swipeUpEnabled && !disabled ? bind() : null, inWebView ? {
305
- onClick: onOpenWebView
306
- } : {
307
- href: url,
229
+ buttonStyle: boxStyle,
230
+ inline: true,
231
+ href: !inWebView ? url : null,
308
232
  external: true,
309
233
  onClick: onClickLink
310
- }), /*#__PURE__*/React.createElement("span", {
234
+ }, swipeUpEnabled && !disabled ? bind() : null), /*#__PURE__*/React.createElement("span", {
311
235
  className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
312
236
  }, icon !== null ? /*#__PURE__*/React.createElement("div", {
313
237
  className: styles.icon
@@ -316,14 +240,7 @@ function CallToAction(_ref) {
316
240
  lineHeight: lineHeight || 1
317
241
  }),
318
242
  inline: true
319
- })))))), inWebView ? /*#__PURE__*/React.createElement(WebView, Object.assign({
320
- className: classNames([styles.webView, _defineProperty({}, styles.visible, showWebView)]),
321
- src: url,
322
- disabled: !showWebView,
323
- closeable: true,
324
- hidden: disableWebView,
325
- onClose: onCloseWebView
326
- }, screenSize)) : null) : null;
243
+ }))))));
327
244
  }
328
245
 
329
246
  CallToAction.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -1,10 +1,11 @@
1
1
  'use strict';
2
2
 
3
3
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
- var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
5
4
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
5
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
6
  var react = require('@use-gesture/react');
7
7
  var classNames = require('classnames');
8
+ var isString = require('lodash/isString');
8
9
  var PropTypes = require('prop-types');
9
10
  var React = require('react');
10
11
  var core = require('@micromag/core');
@@ -12,21 +13,18 @@ var hooks = require('@micromag/core/hooks');
12
13
  var utils = require('@micromag/core/utils');
13
14
  var Button = require('@micromag/element-button');
14
15
  var Text = require('@micromag/element-text');
15
- var WebView = require('@micromag/element-webview');
16
- var isString = require('lodash/isString');
17
16
 
18
17
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
18
 
20
19
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
21
- var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
22
20
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
21
+ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
23
22
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
23
+ var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
24
24
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
25
25
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
26
26
  var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
27
27
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
28
- var WebView__default = /*#__PURE__*/_interopDefaultLegacy(WebView);
29
- var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
30
28
 
31
29
  var propTypes$1 = {
32
30
  color: PropTypes__default["default"].string,
@@ -67,22 +65,21 @@ var Arrow = function Arrow(_ref) {
67
65
  Arrow.propTypes = propTypes$1;
68
66
  Arrow.defaultProps = defaultProps$1;
69
67
 
70
- var styles = {"container":"micromag-element-call-to-action-container","arrow":"micromag-element-call-to-action-arrow","upAndDown":"micromag-element-call-to-action-upAndDown","icon":"micromag-element-call-to-action-icon","label":"micromag-element-call-to-action-label","button":"micromag-element-call-to-action-button","selfTargetLink":"micromag-element-call-to-action-selfTargetLink","leavingFrame":"micromag-element-call-to-action-leavingFrame","appear":"micromag-element-call-to-action-appear","animationDisabled":"micromag-element-call-to-action-animationDisabled","invalidUrl":"micromag-element-call-to-action-invalidUrl","disabled":"micromag-element-call-to-action-disabled","inWebView":"micromag-element-call-to-action-inWebView","withMargin":"micromag-element-call-to-action-withMargin","webView":"micromag-element-call-to-action-webView","visible":"micromag-element-call-to-action-visible"};
68
+ var styles = {"container":"micromag-element-call-to-action-container","arrow":"micromag-element-call-to-action-arrow","upAndDown":"micromag-element-call-to-action-upAndDown","icon":"micromag-element-call-to-action-icon","label":"micromag-element-call-to-action-label","button":"micromag-element-call-to-action-button","selfTargetLink":"micromag-element-call-to-action-selfTargetLink","leavingFrame":"micromag-element-call-to-action-leavingFrame","appear":"micromag-element-call-to-action-appear","animationDisabled":"micromag-element-call-to-action-animationDisabled","invalidUrl":"micromag-element-call-to-action-invalidUrl","withMargin":"micromag-element-call-to-action-withMargin"};
71
69
 
72
70
  var propTypes = {
71
+ type: PropTypes__default["default"].oneOf(['click', 'swipe-up', null]),
72
+ url: PropTypes__default["default"].string,
73
+ label: core.PropTypes.textElement,
74
+ boxStyle: core.PropTypes.boxStyle,
75
+ inWebView: PropTypes__default["default"].bool,
73
76
  elRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
74
77
  current: PropTypes__default["default"].any // eslint-disable-line
75
78
 
76
79
  })]),
77
- disabled: PropTypes__default["default"].bool,
78
80
  animationDisabled: PropTypes__default["default"].bool,
79
- callToAction: core.PropTypes.callToAction,
80
81
  icon: PropTypes__default["default"].node,
81
82
  arrow: PropTypes__default["default"].node,
82
- screenSize: PropTypes__default["default"].shape({
83
- width: PropTypes__default["default"].number,
84
- height: PropTypes__default["default"].number
85
- }),
86
83
  dragAmount: PropTypes__default["default"].number,
87
84
  className: PropTypes__default["default"].string,
88
85
  buttonClassName: PropTypes__default["default"].string,
@@ -90,18 +87,19 @@ var propTypes = {
90
87
  labelClassName: PropTypes__default["default"].string,
91
88
  arrowClassName: PropTypes__default["default"].string,
92
89
  focusable: PropTypes__default["default"].bool,
93
- enableInteraction: PropTypes__default["default"].func,
94
- disableInteraction: PropTypes__default["default"].func,
90
+ openWebView: PropTypes__default["default"].func,
95
91
  onClick: PropTypes__default["default"].func
96
92
  };
97
93
  var defaultProps = {
94
+ type: null,
95
+ url: null,
96
+ label: null,
97
+ boxStyle: null,
98
+ inWebView: false,
98
99
  elRef: null,
99
- disabled: false,
100
100
  animationDisabled: false,
101
- callToAction: null,
102
101
  icon: null,
103
102
  arrow: null,
104
- screenSize: null,
105
103
  dragAmount: 50,
106
104
  className: null,
107
105
  buttonClassName: null,
@@ -109,21 +107,23 @@ var defaultProps = {
109
107
  labelClassName: null,
110
108
  arrowClassName: null,
111
109
  focusable: true,
112
- enableInteraction: null,
113
- disableInteraction: null,
110
+ openWebView: null,
114
111
  onClick: null
115
112
  };
116
113
 
117
114
  function CallToAction(_ref) {
118
- var _ref10;
119
-
120
- var elRef = _ref.elRef,
115
+ var _ref7;
116
+
117
+ var type = _ref.type,
118
+ url = _ref.url,
119
+ label = _ref.label,
120
+ boxStyle = _ref.boxStyle,
121
+ inWebView = _ref.inWebView,
122
+ elRef = _ref.elRef,
121
123
  disabled = _ref.disabled,
122
124
  animationDisabled = _ref.animationDisabled,
123
- callToAction = _ref.callToAction,
124
125
  icon = _ref.icon,
125
126
  arrow = _ref.arrow,
126
- screenSize = _ref.screenSize,
127
127
  dragAmount = _ref.dragAmount,
128
128
  className = _ref.className,
129
129
  buttonClassName = _ref.buttonClassName,
@@ -131,57 +131,30 @@ function CallToAction(_ref) {
131
131
  labelClassName = _ref.labelClassName,
132
132
  arrowClassName = _ref.arrowClassName,
133
133
  focusable = _ref.focusable,
134
- enableInteraction = _ref.enableInteraction,
135
- disableInteraction = _ref.disableInteraction,
134
+ openWebView = _ref.openWebView,
136
135
  onClick = _ref.onClick;
137
-
138
- var _ref2 = callToAction || {},
139
- _ref2$active = _ref2.active,
140
- active = _ref2$active === void 0 ? false : _ref2$active,
141
- _ref2$type = _ref2.type,
142
- type = _ref2$type === void 0 ? null : _ref2$type,
143
- _ref2$url = _ref2.url,
144
- url = _ref2$url === void 0 ? null : _ref2$url,
145
- _ref2$label = _ref2.label,
146
- label = _ref2$label === void 0 ? null : _ref2$label,
147
- _ref2$boxStyle = _ref2.boxStyle,
148
- boxStyle = _ref2$boxStyle === void 0 ? null : _ref2$boxStyle,
149
- _ref2$inWebView = _ref2.inWebView,
150
- inWebView = _ref2$inWebView === void 0 ? false : _ref2$inWebView;
151
-
152
136
  var trackEvent = hooks.useTrackEvent();
153
-
154
- var _useState = React.useState(false),
155
- _useState2 = _slicedToArray__default["default"](_useState, 2),
156
- showWebView = _useState2[0],
157
- setShowWebView = _useState2[1];
158
-
159
- var _useState3 = React.useState(true),
160
- _useState4 = _slicedToArray__default["default"](_useState3, 2),
161
- disableWebView = _useState4[0],
162
- setDisabledWebView = _useState4[1];
163
-
164
137
  var swipeUpEnabled = type === null || type === 'swipe-up';
165
138
  var validUrl = React.useMemo(function () {
166
139
  return utils.isValidUrl(url);
167
140
  }, [url]);
168
141
  var buttonRef = React.useRef(null);
169
142
 
170
- var _ref3 = label || {},
171
- _ref3$textStyle = _ref3.textStyle,
172
- textStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
143
+ var _ref2 = label || {},
144
+ _ref2$textStyle = _ref2.textStyle,
145
+ textStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
173
146
 
174
- var _ref4 = textStyle || {},
175
- _ref4$fontSize = _ref4.fontSize,
176
- fontSize = _ref4$fontSize === void 0 ? null : _ref4$fontSize,
177
- _ref4$color = _ref4.color,
178
- color = _ref4$color === void 0 ? null : _ref4$color,
179
- _ref4$lineHeight = _ref4.lineHeight,
180
- lineHeight = _ref4$lineHeight === void 0 ? null : _ref4$lineHeight;
147
+ var _ref3 = textStyle || {},
148
+ _ref3$fontSize = _ref3.fontSize,
149
+ fontSize = _ref3$fontSize === void 0 ? null : _ref3$fontSize,
150
+ _ref3$color = _ref3.color,
151
+ color = _ref3$color === void 0 ? null : _ref3$color,
152
+ _ref3$lineHeight = _ref3.lineHeight,
153
+ lineHeight = _ref3$lineHeight === void 0 ? null : _ref3$lineHeight;
181
154
 
182
- var _ref5 = boxStyle || {},
183
- _ref5$backgroundColor = _ref5.backgroundColor,
184
- backgroundColor = _ref5$backgroundColor === void 0 ? null : _ref5$backgroundColor;
155
+ var _ref4 = boxStyle || {},
156
+ _ref4$backgroundColor = _ref4.backgroundColor,
157
+ backgroundColor = _ref4$backgroundColor === void 0 ? null : _ref4$backgroundColor;
185
158
 
186
159
  var arrowStyle = React.useMemo(function () {
187
160
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, {
@@ -191,54 +164,49 @@ function CallToAction(_ref) {
191
164
 
192
165
  var selfTargetLinkRef = React.useRef(null);
193
166
 
194
- var _useState5 = React.useState(false),
195
- _useState6 = _slicedToArray__default["default"](_useState5, 2),
196
- leaving = _useState6[0],
197
- setLeaving = _useState6[1]; // On click
167
+ var _useState = React.useState(false),
168
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
169
+ leaving = _useState2[0],
170
+ setLeaving = _useState2[1]; // On click
198
171
 
199
172
 
200
- var onClickLink = React.useCallback(function () {
201
- var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'click';
173
+ var onClickLink = React.useCallback(function (e) {
174
+ var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'click';
202
175
 
203
- if (trackEvent !== null) {
204
- trackEvent('call_to_action', isString__default["default"](action) ? action : 'click', url);
176
+ if (inWebView && openWebView !== null) {
177
+ openWebView({
178
+ url: url
179
+ });
205
180
  }
206
181
 
207
- if (onClick !== null) {
208
- onClick();
182
+ if (onClick !== null && action === 'cllick') {
183
+ onClick(e);
209
184
  }
210
- }, [url, onClick, trackEvent]);
211
- var onClickClose = React.useCallback(function () {
185
+
212
186
  if (trackEvent !== null) {
213
- trackEvent('call_to_action', 'close', url);
187
+ trackEvent('call_to_action', isString__default["default"](action) ? action : 'click', url);
214
188
  }
215
- }, [url, trackEvent]);
189
+ }, [url, onClick, trackEvent, inWebView]);
216
190
  var bind = react.useGesture({
217
- onDrag: function onDrag(_ref6) {
218
- var event = _ref6.event;
191
+ onDrag: function onDrag(_ref5) {
192
+ var event = _ref5.event;
219
193
  // fix firefox https://use-gesture.netlify.app/docs/faq/#why-cant-i-properly-drag-an-image-or-a-link
220
194
  event.preventDefault();
221
195
  },
222
- onDragEnd: function onDragEnd(_ref7) {
223
- var _ref7$movement = _slicedToArray__default["default"](_ref7.movement, 2),
224
- my = _ref7$movement[1];
196
+ onDragEnd: function onDragEnd(_ref6) {
197
+ var _ref6$movement = _slicedToArray__default["default"](_ref6.movement, 2),
198
+ my = _ref6$movement[1];
225
199
 
226
200
  if (my < -dragAmount) {
227
201
  if (inWebView) {
228
- setShowWebView(true);
229
- setDisabledWebView(false);
230
- onClickLink('swipe');
231
-
232
- if (disableInteraction !== null) {
233
- disableInteraction();
234
- }
202
+ onClickLink(null, 'swipe');
235
203
  } else if (utils.isIos() && selfTargetLinkRef.current !== null) {
236
204
  selfTargetLinkRef.current.click();
237
205
  setLeaving(true);
238
- onClickLink('swipe');
206
+ onClickLink(null, 'swipe');
239
207
  } else if (buttonRef.current) {
240
208
  buttonRef.current.click();
241
- onClickLink('swipe');
209
+ onClickLink(null, 'swipe');
242
210
  }
243
211
  }
244
212
  }
@@ -253,51 +221,8 @@ function CallToAction(_ref) {
253
221
  window.removeEventListener('pagehide', onPageHide);
254
222
  };
255
223
  }, [setLeaving]);
256
- React.useEffect(function () {
257
- var id = null;
258
-
259
- if (inWebView) {
260
- if (showWebView) {
261
- setDisabledWebView(false);
262
- } else {
263
- id = setTimeout(function () {
264
- setDisabledWebView(true);
265
- }, 300);
266
- }
267
- }
268
-
269
- return function () {
270
- clearTimeout(id);
271
- };
272
- }, [showWebView, setDisabledWebView]);
273
- var onOpenWebView = React.useCallback(function () {
274
- setShowWebView(true);
275
- setDisabledWebView(false);
276
-
277
- if (disableInteraction !== null) {
278
- disableInteraction();
279
- }
280
-
281
- onClickLink('click');
282
- }, [setShowWebView, setDisabledWebView, disableInteraction, onClickLink]);
283
- var onCloseWebView = React.useCallback(function () {
284
- setShowWebView(false);
285
-
286
- if (enableInteraction !== null) {
287
- enableInteraction();
288
- }
289
-
290
- onClickClose();
291
- }, [setShowWebView, enableInteraction, onClickClose]);
292
- var ArrowElement = arrow !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
293
- className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)]),
294
- style: arrowStyle
295
- }, arrow) : /*#__PURE__*/React__default["default"].createElement("div", {
296
- className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)]),
297
- style: arrowStyle
298
- }, /*#__PURE__*/React__default["default"].createElement(Arrow, null));
299
- return active ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
300
- className: classNames__default["default"]([styles.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, className, className !== null), _defineProperty__default["default"](_ref10, styles.disabled, disabled), _defineProperty__default["default"](_ref10, styles.animationDisabled, animationDisabled), _defineProperty__default["default"](_ref10, styles.invalidUrl, !validUrl), _defineProperty__default["default"](_ref10, styles.inWebView, inWebView), _ref10)]),
224
+ return /*#__PURE__*/React__default["default"].createElement("div", {
225
+ className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.disabled, disabled), _defineProperty__default["default"](_ref7, styles.animationDisabled, animationDisabled), _defineProperty__default["default"](_ref7, styles.invalidUrl, !validUrl), _defineProperty__default["default"](_ref7, styles.inWebView, inWebView), _ref7)]),
301
226
  ref: elRef
302
227
  }, leaving ? /*#__PURE__*/React__default["default"].createElement("div", {
303
228
  className: styles.leavingFrame
@@ -306,23 +231,21 @@ function CallToAction(_ref) {
306
231
  href: url,
307
232
  ref: selfTargetLinkRef,
308
233
  tabIndex: focusable ? '0' : '-1'
309
- }) : null, swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React__default["default"].createElement("div", {
234
+ }) : null, swipeUpEnabled ? /*#__PURE__*/React__default["default"].createElement("div", {
235
+ className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)]),
236
+ style: arrowStyle
237
+ }, arrow || /*#__PURE__*/React__default["default"].createElement(Arrow, null)) : null, /*#__PURE__*/React__default["default"].createElement("div", {
310
238
  className: classNames__default["default"]([styles.buttonBorder, _defineProperty__default["default"]({}, buttonBorderClassName, buttonBorderClassName !== null)])
311
239
  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
312
240
  className: classNames__default["default"]([styles.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
313
241
  refButton: buttonRef,
314
242
  focusable: focusable,
315
- buttonStyle: _objectSpread__default["default"]({
316
- marginBottom: 10
317
- }, boxStyle),
318
- inline: true
319
- }, swipeUpEnabled && !disabled ? bind() : null, inWebView ? {
320
- onClick: onOpenWebView
321
- } : {
322
- href: url,
243
+ buttonStyle: boxStyle,
244
+ inline: true,
245
+ href: !inWebView ? url : null,
323
246
  external: true,
324
247
  onClick: onClickLink
325
- }), /*#__PURE__*/React__default["default"].createElement("span", {
248
+ }, swipeUpEnabled && !disabled ? bind() : null), /*#__PURE__*/React__default["default"].createElement("span", {
326
249
  className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
327
250
  }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
328
251
  className: styles.icon
@@ -331,14 +254,7 @@ function CallToAction(_ref) {
331
254
  lineHeight: lineHeight || 1
332
255
  }),
333
256
  inline: true
334
- })))))), inWebView ? /*#__PURE__*/React__default["default"].createElement(WebView__default["default"], Object.assign({
335
- className: classNames__default["default"]([styles.webView, _defineProperty__default["default"]({}, styles.visible, showWebView)]),
336
- src: url,
337
- disabled: !showWebView,
338
- closeable: true,
339
- hidden: disableWebView,
340
- onClose: onCloseWebView
341
- }, screenSize)) : null) : null;
257
+ }))))));
342
258
  }
343
259
 
344
260
  CallToAction.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-call-to-action",
3
- "version": "0.3.147",
3
+ "version": "0.3.152",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,10 +52,10 @@
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.147",
56
- "@micromag/element-button": "^0.3.147",
57
- "@micromag/element-text": "^0.3.147",
58
- "@micromag/element-webview": "^0.3.147",
55
+ "@micromag/core": "^0.3.152",
56
+ "@micromag/element-button": "^0.3.152",
57
+ "@micromag/element-text": "^0.3.152",
58
+ "@micromag/element-webview": "^0.3.152",
59
59
  "@react-spring/core": "^9.1.1",
60
60
  "@react-spring/web": "^9.1.1",
61
61
  "@use-gesture/react": "^10.2.4",
@@ -68,5 +68,5 @@
68
68
  "publishConfig": {
69
69
  "access": "public"
70
70
  },
71
- "gitHead": "695a66acc54f4863dc44a98f0471e8233ca10aee"
71
+ "gitHead": "23db6c104c10cc70a73366c8b04576a312a36206"
72
72
  }