@micromag/element-share-options 0.3.824 → 0.4.4
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.d.ts +22 -0
- package/es/index.js +49 -95
- package/es/styles.css +1 -0
- package/package.json +12 -11
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.item+.item{margin-top:.5rem}.button{display:inline-block;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-color:transparent;border:0;color:inherit;color:var(--mm-white);cursor:pointer;font-family:inherit;font-size:1rem;font-weight:400;justify-content:center;padding:0;-webkit-text-decoration:none;text-decoration:none;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition:-webkit-transform .3s var(--mm-ease-out-ramp);transition:-webkit-transform .3s var(--mm-ease-out-ramp);transition:transform .3s var(--mm-ease-out-ramp);transition:transform .3s var(--mm-ease-out-ramp),-webkit-transform .3s var(--mm-ease-out-ramp)}@media (hover:hover){.button:hover .icon,.button:hover .label{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);-webkit-transition:-webkit-transform .3s var(--mm-ease-in-yo);transition:-webkit-transform .3s var(--mm-ease-in-yo);transition:transform .3s var(--mm-ease-in-yo);transition:transform .3s var(--mm-ease-in-yo),-webkit-transform .3s var(--mm-ease-in-yo)}}.button:active .icon,.button:active .label,.button:focus .icon,.button:focus .label{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);-webkit-transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback),-webkit-transform .3s var(--mm-ease-in-kickback)}.button:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}.icon{display:block;position:relative;-ms-flex-negative:0;flex-shrink:0}.icon,.spacer{height:100%;width:45px}.icon,.label{-webkit-transition:-webkit-transform .3s var(--mm-ease-out-ramp);transition:-webkit-transform .3s var(--mm-ease-out-ramp);transition:transform .3s var(--mm-ease-out-ramp);transition:transform .3s var(--mm-ease-out-ramp),-webkit-transform .3s var(--mm-ease-out-ramp)}.label{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;font-size:inherit;justify-content:center;line-height:1;padding:.25rem;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.label,.labelText{margin-left:.25em;margin-right:.25em}.labelText{-ms-flex-negative:0;flex-shrink:0}
|
package/es/index.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { BoxStyle, TextStyle, ViewerTheme } from '@micromag/core';
|
|
3
|
+
|
|
4
|
+
interface ShareOptionsProps {
|
|
5
|
+
className?: string | null;
|
|
6
|
+
itemClassName?: string | null;
|
|
7
|
+
labelClassName?: string | null;
|
|
8
|
+
buttonClassName?: string | null;
|
|
9
|
+
title?: string | null;
|
|
10
|
+
url?: string | null;
|
|
11
|
+
options?: string[] | null;
|
|
12
|
+
buttonsStyle?: BoxStyle | null;
|
|
13
|
+
buttonsTextStyle?: TextStyle | null;
|
|
14
|
+
iconSize?: number;
|
|
15
|
+
theme?: ViewerTheme | null;
|
|
16
|
+
onShare?: ((...args: unknown[]) => void) | null;
|
|
17
|
+
onClose?: ((...args: unknown[]) => void) | null;
|
|
18
|
+
focusable?: boolean;
|
|
19
|
+
}
|
|
20
|
+
declare function ShareOptions({ className, itemClassName, labelClassName, buttonClassName, title, url, options, buttonsStyle, buttonsTextStyle, iconSize, theme, onShare, onClose, focusable, }: ShareOptionsProps): react_jsx_runtime.JSX.Element;
|
|
21
|
+
|
|
22
|
+
export { ShareOptions as default };
|
package/es/index.js
CHANGED
|
@@ -3,25 +3,17 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
|
3
3
|
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
4
4
|
import classNames from 'classnames';
|
|
5
5
|
import isArray from 'lodash/isArray';
|
|
6
|
-
import PropTypes from 'prop-types';
|
|
7
6
|
import React, { useState, useCallback, useMemo } from 'react';
|
|
8
7
|
import { FormattedMessage } from 'react-intl';
|
|
9
8
|
import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon, WhatsappShareButton, WhatsappIcon, EmailShareButton } from 'react-share';
|
|
10
|
-
import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
11
9
|
import { Button } from '@micromag/core/components';
|
|
12
10
|
import { getStyleFromColor, getStyleFromText, getStyleFromBox, copyToClipboard } from '@micromag/core/utils';
|
|
13
11
|
|
|
14
|
-
|
|
15
|
-
className
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
className: null,
|
|
20
|
-
size: 45
|
|
21
|
-
};
|
|
22
|
-
var EmailIcon = function EmailIcon(_ref) {
|
|
23
|
-
var className = _ref.className,
|
|
24
|
-
size = _ref.size;
|
|
12
|
+
function EmailIcon(_ref) {
|
|
13
|
+
var _ref$className = _ref.className,
|
|
14
|
+
className = _ref$className === void 0 ? null : _ref$className,
|
|
15
|
+
_ref$size = _ref.size,
|
|
16
|
+
size = _ref$size === void 0 ? 45 : _ref$size;
|
|
25
17
|
return /*#__PURE__*/React.createElement("svg", {
|
|
26
18
|
width: size,
|
|
27
19
|
height: size,
|
|
@@ -45,21 +37,13 @@ var EmailIcon = function EmailIcon(_ref) {
|
|
|
45
37
|
fill: "currentColor",
|
|
46
38
|
transform: "translate(12 15.28)"
|
|
47
39
|
}))));
|
|
48
|
-
}
|
|
49
|
-
EmailIcon.propTypes = propTypes$3;
|
|
50
|
-
EmailIcon.defaultProps = defaultProps$3;
|
|
40
|
+
}
|
|
51
41
|
|
|
52
|
-
|
|
53
|
-
className
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
className: null,
|
|
58
|
-
size: 45
|
|
59
|
-
};
|
|
60
|
-
var ShareLinkIcon = function ShareLinkIcon(_ref) {
|
|
61
|
-
var className = _ref.className,
|
|
62
|
-
size = _ref.size;
|
|
42
|
+
function ShareLinkIcon(_ref) {
|
|
43
|
+
var _ref$className = _ref.className,
|
|
44
|
+
className = _ref$className === void 0 ? null : _ref$className,
|
|
45
|
+
_ref$size = _ref.size,
|
|
46
|
+
size = _ref$size === void 0 ? 45 : _ref$size;
|
|
63
47
|
return /*#__PURE__*/React.createElement("svg", {
|
|
64
48
|
xmlns: "http://www.w3.org/2000/svg",
|
|
65
49
|
width: size,
|
|
@@ -81,21 +65,13 @@ var ShareLinkIcon = function ShareLinkIcon(_ref) {
|
|
|
81
65
|
strokeLinejoin: "round",
|
|
82
66
|
strokeWidth: "3"
|
|
83
67
|
}));
|
|
84
|
-
}
|
|
85
|
-
ShareLinkIcon.propTypes = propTypes$2;
|
|
86
|
-
ShareLinkIcon.defaultProps = defaultProps$2;
|
|
68
|
+
}
|
|
87
69
|
|
|
88
|
-
|
|
89
|
-
className
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
className: null,
|
|
94
|
-
size: 45
|
|
95
|
-
};
|
|
96
|
-
var SmsIcon = function SmsIcon(_ref) {
|
|
97
|
-
var className = _ref.className,
|
|
98
|
-
size = _ref.size;
|
|
70
|
+
function SmsIcon(_ref) {
|
|
71
|
+
var _ref$className = _ref.className,
|
|
72
|
+
className = _ref$className === void 0 ? null : _ref$className,
|
|
73
|
+
_ref$size = _ref.size,
|
|
74
|
+
size = _ref$size === void 0 ? 45 : _ref$size;
|
|
99
75
|
return /*#__PURE__*/React.createElement("svg", {
|
|
100
76
|
width: size,
|
|
101
77
|
height: size,
|
|
@@ -107,59 +83,39 @@ var SmsIcon = function SmsIcon(_ref) {
|
|
|
107
83
|
d: "M30.8988 12H14.1001C12.9444 12.0053 12.0106 12.9444 12.0106 14.1001L12 32.9989L16.2002 28.7987H30.8999C32.0578 28.7955 32.9968 27.8576 33 26.6986V14.1001C32.9968 12.9422 32.0588 12.0032 30.8999 12H30.8988ZM19.3498 20.3999C19.3498 20.9798 18.8797 21.4499 18.2998 21.4499V21.4499C17.7199 21.4499 17.2497 20.9798 17.2497 20.3999V20.3999C17.2497 19.82 17.7199 19.3498 18.2998 19.3498V19.3498C18.8797 19.3498 19.3498 19.82 19.3498 20.3999V20.3999ZM23.5501 20.3999C23.5501 20.9798 23.0799 21.4499 22.5 21.4499V21.4499C21.9201 21.4499 21.4499 20.9798 21.4499 20.3999V20.3999C21.4499 19.82 21.9201 19.3498 22.5 19.3498V19.3498C23.0799 19.3498 23.5501 19.82 23.5501 20.3999V20.3999ZM27.7503 20.3999C27.7503 20.9798 27.2801 21.4499 26.7002 21.4499V21.4499C26.1203 21.4499 25.6502 20.9798 25.6502 20.3999V20.3999C25.6502 19.82 26.1203 19.3498 26.7002 19.3498V19.3498C27.2801 19.3498 27.7503 19.82 27.7503 20.3999V20.3999Z",
|
|
108
84
|
fill: "currentColor"
|
|
109
85
|
}));
|
|
110
|
-
}
|
|
111
|
-
SmsIcon.propTypes = propTypes$1;
|
|
112
|
-
SmsIcon.defaultProps = defaultProps$1;
|
|
86
|
+
}
|
|
113
87
|
|
|
114
|
-
var styles = {"
|
|
88
|
+
var styles = {"item":"item","button":"button","icon":"icon","label":"label","spacer":"spacer","labelText":"labelText"};
|
|
115
89
|
|
|
116
|
-
|
|
117
|
-
className
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
onClose: null,
|
|
146
|
-
focusable: true
|
|
147
|
-
};
|
|
148
|
-
var ShareOptions = function ShareOptions(_ref) {
|
|
149
|
-
var className = _ref.className,
|
|
150
|
-
itemClassName = _ref.itemClassName,
|
|
151
|
-
labelClassName = _ref.labelClassName,
|
|
152
|
-
buttonClassName = _ref.buttonClassName,
|
|
153
|
-
title = _ref.title,
|
|
154
|
-
url = _ref.url,
|
|
155
|
-
options = _ref.options,
|
|
156
|
-
buttonsStyle = _ref.buttonsStyle,
|
|
157
|
-
buttonsTextStyle = _ref.buttonsTextStyle,
|
|
158
|
-
iconSize = _ref.iconSize,
|
|
159
|
-
theme = _ref.theme,
|
|
160
|
-
onShare = _ref.onShare,
|
|
161
|
-
onClose = _ref.onClose,
|
|
162
|
-
focusable = _ref.focusable;
|
|
90
|
+
function ShareOptions(_ref) {
|
|
91
|
+
var _ref$className = _ref.className,
|
|
92
|
+
className = _ref$className === void 0 ? null : _ref$className,
|
|
93
|
+
_ref$itemClassName = _ref.itemClassName,
|
|
94
|
+
itemClassName = _ref$itemClassName === void 0 ? null : _ref$itemClassName,
|
|
95
|
+
_ref$labelClassName = _ref.labelClassName,
|
|
96
|
+
labelClassName = _ref$labelClassName === void 0 ? null : _ref$labelClassName,
|
|
97
|
+
_ref$buttonClassName = _ref.buttonClassName,
|
|
98
|
+
buttonClassName = _ref$buttonClassName === void 0 ? null : _ref$buttonClassName,
|
|
99
|
+
_ref$title = _ref.title,
|
|
100
|
+
title = _ref$title === void 0 ? null : _ref$title,
|
|
101
|
+
_ref$url = _ref.url,
|
|
102
|
+
url = _ref$url === void 0 ? null : _ref$url,
|
|
103
|
+
_ref$options = _ref.options,
|
|
104
|
+
options = _ref$options === void 0 ? null : _ref$options,
|
|
105
|
+
_ref$buttonsStyle = _ref.buttonsStyle,
|
|
106
|
+
buttonsStyle = _ref$buttonsStyle === void 0 ? null : _ref$buttonsStyle,
|
|
107
|
+
_ref$buttonsTextStyle = _ref.buttonsTextStyle,
|
|
108
|
+
buttonsTextStyle = _ref$buttonsTextStyle === void 0 ? null : _ref$buttonsTextStyle,
|
|
109
|
+
_ref$iconSize = _ref.iconSize,
|
|
110
|
+
iconSize = _ref$iconSize === void 0 ? 45 : _ref$iconSize,
|
|
111
|
+
_ref$theme = _ref.theme,
|
|
112
|
+
theme = _ref$theme === void 0 ? null : _ref$theme,
|
|
113
|
+
_ref$onShare = _ref.onShare,
|
|
114
|
+
onShare = _ref$onShare === void 0 ? null : _ref$onShare,
|
|
115
|
+
_ref$onClose = _ref.onClose,
|
|
116
|
+
onClose = _ref$onClose === void 0 ? null : _ref$onClose,
|
|
117
|
+
_ref$focusable = _ref.focusable,
|
|
118
|
+
focusable = _ref$focusable === void 0 ? true : _ref$focusable;
|
|
163
119
|
var _ref2 = theme || {},
|
|
164
120
|
_ref2$menuTheme = _ref2.menuTheme,
|
|
165
121
|
menuTheme = _ref2$menuTheme === void 0 ? null : _ref2$menuTheme;
|
|
@@ -409,8 +365,6 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
409
365
|
className: classNames([styles.item, _defineProperty({}, itemClassName, itemClassName !== null)])
|
|
410
366
|
}, button);
|
|
411
367
|
})));
|
|
412
|
-
}
|
|
413
|
-
ShareOptions.propTypes = propTypes;
|
|
414
|
-
ShareOptions.defaultProps = defaultProps;
|
|
368
|
+
}
|
|
415
369
|
|
|
416
370
|
export { ShareOptions as default };
|
package/es/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.item+.item{margin-top:.5rem}.button{display:inline-block;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-color:transparent;border:0;color:inherit;color:var(--mm-white);cursor:pointer;font-family:inherit;font-size:1rem;font-weight:400;justify-content:center;padding:0;-webkit-text-decoration:none;text-decoration:none;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition:-webkit-transform .3s var(--mm-ease-out-ramp);transition:-webkit-transform .3s var(--mm-ease-out-ramp);transition:transform .3s var(--mm-ease-out-ramp);transition:transform .3s var(--mm-ease-out-ramp),-webkit-transform .3s var(--mm-ease-out-ramp)}@media (hover:hover){.button:hover .icon,.button:hover .label{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);-webkit-transition:-webkit-transform .3s var(--mm-ease-in-yo);transition:-webkit-transform .3s var(--mm-ease-in-yo);transition:transform .3s var(--mm-ease-in-yo);transition:transform .3s var(--mm-ease-in-yo),-webkit-transform .3s var(--mm-ease-in-yo)}}.button:active .icon,.button:active .label,.button:focus .icon,.button:focus .label{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);-webkit-transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback),-webkit-transform .3s var(--mm-ease-in-kickback)}.button:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}.icon{display:block;position:relative;-ms-flex-negative:0;flex-shrink:0}.icon,.spacer{height:100%;width:45px}.icon,.label{-webkit-transition:-webkit-transform .3s var(--mm-ease-out-ramp);transition:-webkit-transform .3s var(--mm-ease-out-ramp);transition:transform .3s var(--mm-ease-out-ramp);transition:transform .3s var(--mm-ease-out-ramp),-webkit-transform .3s var(--mm-ease-out-ramp)}.label{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;font-size:inherit;justify-content:center;line-height:1;padding:.25rem;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.label,.labelText{margin-left:.25em;margin-right:.25em}.labelText{-ms-flex-negative:0;flex-shrink:0}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/element-share-options",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
"module": "es/index.js",
|
|
39
39
|
"exports": {
|
|
40
40
|
".": {
|
|
41
|
+
"types": "./es/index.d.ts",
|
|
41
42
|
"import": "./es/index.js"
|
|
42
43
|
},
|
|
43
44
|
"./assets/css/styles": "./assets/css/styles.css",
|
|
@@ -51,23 +52,22 @@
|
|
|
51
52
|
"scripts": {
|
|
52
53
|
"clean": "rm -rf es && rm -rf lib && rm -rf assets",
|
|
53
54
|
"prepublishOnly": "npm run build",
|
|
54
|
-
"build": "../../scripts/prepare-package.sh"
|
|
55
|
+
"build": "../../scripts/prepare-package.sh --types"
|
|
55
56
|
},
|
|
56
57
|
"devDependencies": {
|
|
57
|
-
"react": "^
|
|
58
|
-
"react-dom": "^
|
|
58
|
+
"react": "^19.2.0",
|
|
59
|
+
"react-dom": "^18.3.0 || ^19.0.0"
|
|
59
60
|
},
|
|
60
61
|
"peerDependencies": {
|
|
61
|
-
"react": "^
|
|
62
|
-
"react-dom": "^
|
|
62
|
+
"react": "^19.2.0",
|
|
63
|
+
"react-dom": "^18.3.0 || ^19.0.0"
|
|
63
64
|
},
|
|
64
65
|
"dependencies": {
|
|
65
66
|
"@babel/runtime": "^7.13.10",
|
|
66
|
-
"@micromag/core": "^0.
|
|
67
|
+
"@micromag/core": "^0.4.4",
|
|
67
68
|
"classnames": "^2.2.6",
|
|
68
|
-
"lodash": "^4.17.
|
|
69
|
-
"
|
|
70
|
-
"react-intl": "^6.6.4",
|
|
69
|
+
"lodash": "^4.17.23",
|
|
70
|
+
"react-intl": "^8.1.3",
|
|
71
71
|
"react-share": "^5.1.0",
|
|
72
72
|
"uuid": "^9.0.0"
|
|
73
73
|
},
|
|
@@ -75,5 +75,6 @@
|
|
|
75
75
|
"access": "public",
|
|
76
76
|
"registry": "https://registry.npmjs.org/"
|
|
77
77
|
},
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "04b8519c3a3ddace5a21497e22faa11865d57f6d",
|
|
79
|
+
"types": "es/index.d.ts"
|
|
79
80
|
}
|