@uncinc/uncinc-react-kitchen-sink 2.7.14 → 2.7.16
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/dist/components/Dialog/index.d.ts +1 -1
- package/dist/components/Dialog/index.js +5 -4
- package/dist/components/Form/Checkboxes/index.js +9 -5
- package/dist/components/Form/RadioButtons/index.js +9 -6
- package/dist/components/Share/CopyToClipboard/index.d.ts +14 -2
- package/dist/components/Share/CopyToClipboard/index.js +42 -19
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -4,7 +4,6 @@ import { createPortal } from 'react-dom';
|
|
|
4
4
|
import { RemoveScroll } from 'react-remove-scroll';
|
|
5
5
|
import { useTranslation } from 'react-i18next';
|
|
6
6
|
import PropTypes from 'prop-types';
|
|
7
|
-
import { v4 as uuidv4 } from 'uuid';
|
|
8
7
|
import useDialogHelpers from '../../hooks/useDialogHelpers';
|
|
9
8
|
import './style.scss';
|
|
10
9
|
var Dialog = function Dialog(props) {
|
|
@@ -31,10 +30,12 @@ var Dialog = function Dialog(props) {
|
|
|
31
30
|
disableClosers: disableClosers
|
|
32
31
|
}),
|
|
33
32
|
labelId = _useDialogHelpers.labelId,
|
|
34
|
-
dialogHelpersProps = _useDialogHelpers.dialogHelpersProps
|
|
33
|
+
dialogHelpersProps = _useDialogHelpers.dialogHelpersProps,
|
|
34
|
+
dialogId = _useDialogHelpers.id;
|
|
35
35
|
if (!isOpen) return null;
|
|
36
36
|
return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
|
|
37
|
-
className: "Dialog"
|
|
37
|
+
className: "Dialog",
|
|
38
|
+
id: dialogId
|
|
38
39
|
}, /*#__PURE__*/React.createElement("div", _extends({
|
|
39
40
|
className: "Dialog__wrapper"
|
|
40
41
|
}, dialogHelpersProps, {
|
|
@@ -79,7 +80,7 @@ Dialog.propTypes = {
|
|
|
79
80
|
disableClosers: PropTypes.bool
|
|
80
81
|
};
|
|
81
82
|
Dialog.defaultProps = {
|
|
82
|
-
id:
|
|
83
|
+
id: undefined,
|
|
83
84
|
title: null,
|
|
84
85
|
showCloseButton: false,
|
|
85
86
|
closeButtonText: 'Close',
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
1
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
3
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
3
4
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
@@ -33,7 +34,8 @@ function Checkbox(props) {
|
|
|
33
34
|
'icon-before': true,
|
|
34
35
|
'icon-checkmark': true,
|
|
35
36
|
'icon-variant-0': !checked,
|
|
36
|
-
'icon-variant-1': checked
|
|
37
|
+
'icon-variant-1': checked,
|
|
38
|
+
'disabled': disabled
|
|
37
39
|
});
|
|
38
40
|
var checkedValues = function checkedValues() {
|
|
39
41
|
// The value we return here is based on the current state, meaning,
|
|
@@ -144,9 +146,11 @@ var Checkboxes = function Checkboxes(props) {
|
|
|
144
146
|
touched: isTouched,
|
|
145
147
|
error: error,
|
|
146
148
|
displayRequiredIndicator: displayRequiredIndicator
|
|
147
|
-
}, Object.keys(options).map(function (
|
|
148
|
-
var label = options[
|
|
149
|
-
var
|
|
149
|
+
}, Object.keys(options).map(function (item) {
|
|
150
|
+
var label = _typeof(options[item]) === 'object' ? options[item].label : options[item];
|
|
151
|
+
var value = _typeof(options[item]) === 'object' ? options[item].value : item;
|
|
152
|
+
var optionDisabled = disabled || _typeof(options[item]) === 'object' && options[item].disabled;
|
|
153
|
+
var description = descriptions[value] || _typeof(options[item]) === 'object' && options[item].description || null;
|
|
150
154
|
return /*#__PURE__*/React.createElement(Checkbox, {
|
|
151
155
|
key: value,
|
|
152
156
|
label: label,
|
|
@@ -159,7 +163,7 @@ var Checkboxes = function Checkboxes(props) {
|
|
|
159
163
|
value: value,
|
|
160
164
|
placeholder: placeholder,
|
|
161
165
|
validate: handleValidation,
|
|
162
|
-
disabled:
|
|
166
|
+
disabled: optionDisabled,
|
|
163
167
|
otherLabel: otherLabel,
|
|
164
168
|
otherPlaceholder: otherPlaceholder,
|
|
165
169
|
onChange: onChange
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
1
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
3
|
import React from 'react';
|
|
3
4
|
import { Field } from 'formik';
|
|
@@ -25,10 +26,10 @@ var Radio = function Radio(props) {
|
|
|
25
26
|
// represented as numbers.
|
|
26
27
|
/* eslint-disable */
|
|
27
28
|
'icon-variant-0': !(field.value && field.value == props.value),
|
|
28
|
-
'icon-variant-1': field.value && field.value == props.value
|
|
29
|
+
'icon-variant-1': field.value && field.value == props.value,
|
|
29
30
|
/* eslint-enable */
|
|
31
|
+
'disabled': disabled
|
|
30
32
|
});
|
|
31
|
-
|
|
32
33
|
if (props.value === '__other__') {
|
|
33
34
|
var inputClasses = c({
|
|
34
35
|
hidden: field.value !== '__other__'
|
|
@@ -117,9 +118,11 @@ var RadioButtons = function RadioButtons(props) {
|
|
|
117
118
|
touched: isTouched,
|
|
118
119
|
error: error,
|
|
119
120
|
displayRequiredIndicator: displayRequiredIndicator
|
|
120
|
-
}, Object.keys(options).map(function (
|
|
121
|
-
var label = options[
|
|
122
|
-
var
|
|
121
|
+
}, Object.keys(options).map(function (item) {
|
|
122
|
+
var label = _typeof(options[item]) === 'object' ? options[item].label : options[item];
|
|
123
|
+
var value = _typeof(options[item]) === 'object' ? options[item].value : item;
|
|
124
|
+
var optionDisabled = disabled || _typeof(options[item]) === 'object' && options[item].disabled;
|
|
125
|
+
var description = descriptions[value] || _typeof(options[item]) === 'object' && options[item].description || null;
|
|
123
126
|
return /*#__PURE__*/React.createElement(Radio, {
|
|
124
127
|
key: value,
|
|
125
128
|
label: label,
|
|
@@ -134,7 +137,7 @@ var RadioButtons = function RadioButtons(props) {
|
|
|
134
137
|
validate: handleValidation,
|
|
135
138
|
otherLabel: otherLabel,
|
|
136
139
|
otherPlaceholder: otherPlaceholder,
|
|
137
|
-
disabled:
|
|
140
|
+
disabled: optionDisabled,
|
|
138
141
|
onChange: onChange
|
|
139
142
|
});
|
|
140
143
|
}));
|
|
@@ -1,16 +1,28 @@
|
|
|
1
1
|
export default CopyToClipboard;
|
|
2
|
-
declare function CopyToClipboard({ text, copyResetTimeout }: {
|
|
2
|
+
declare function CopyToClipboard({ text, copyResetTimeout, icon, copyText, copiedText }: {
|
|
3
3
|
text: any;
|
|
4
4
|
copyResetTimeout: any;
|
|
5
|
-
|
|
5
|
+
icon: any;
|
|
6
|
+
copyText: any;
|
|
7
|
+
copiedText: any;
|
|
8
|
+
}): false | React.JSX.Element;
|
|
6
9
|
declare namespace CopyToClipboard {
|
|
7
10
|
namespace propTypes {
|
|
8
11
|
let text: PropTypes.Validator<string>;
|
|
9
12
|
let copyResetTimeout: PropTypes.Requireable<number>;
|
|
13
|
+
let icon: PropTypes.Requireable<string>;
|
|
14
|
+
let copyText: PropTypes.Requireable<string>;
|
|
15
|
+
let copiedText: PropTypes.Requireable<string>;
|
|
10
16
|
}
|
|
11
17
|
namespace defaultProps {
|
|
12
18
|
let copyResetTimeout_1: number;
|
|
13
19
|
export { copyResetTimeout_1 as copyResetTimeout };
|
|
20
|
+
let icon_1: string;
|
|
21
|
+
export { icon_1 as icon };
|
|
22
|
+
let copyText_1: string;
|
|
23
|
+
export { copyText_1 as copyText };
|
|
24
|
+
let copiedText_1: string;
|
|
25
|
+
export { copiedText_1 as copiedText };
|
|
14
26
|
}
|
|
15
27
|
}
|
|
16
28
|
import React from 'react';
|
|
@@ -12,58 +12,81 @@ import React, { useState } from 'react';
|
|
|
12
12
|
import PropTypes from 'prop-types';
|
|
13
13
|
var CopyToClipboard = function CopyToClipboard(_ref) {
|
|
14
14
|
var text = _ref.text,
|
|
15
|
-
copyResetTimeout = _ref.copyResetTimeout
|
|
15
|
+
copyResetTimeout = _ref.copyResetTimeout,
|
|
16
|
+
icon = _ref.icon,
|
|
17
|
+
copyText = _ref.copyText,
|
|
18
|
+
copiedText = _ref.copiedText;
|
|
16
19
|
var _useState = useState(false),
|
|
17
20
|
_useState2 = _slicedToArray(_useState, 2),
|
|
18
21
|
copySuccess = _useState2[0],
|
|
19
22
|
setCopySuccess = _useState2[1];
|
|
23
|
+
var _useState3 = useState(false),
|
|
24
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
25
|
+
copyPermission = _useState4[0],
|
|
26
|
+
setCopyPermission = _useState4[1];
|
|
27
|
+
|
|
28
|
+
// Only render the element if permission is granted
|
|
29
|
+
navigator.permissions.query({
|
|
30
|
+
name: 'clipboard-write'
|
|
31
|
+
}).then(function (result) {
|
|
32
|
+
if (result.state === 'granted' || result.state === 'prompt') {
|
|
33
|
+
setCopyPermission(true);
|
|
34
|
+
}
|
|
35
|
+
}).catch(function (err) {
|
|
36
|
+
return console.log('Copy to clipboard not supported: ', err);
|
|
37
|
+
});
|
|
20
38
|
var copyContent = /*#__PURE__*/function () {
|
|
21
39
|
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
22
40
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
23
41
|
while (1) switch (_context.prev = _context.next) {
|
|
24
42
|
case 0:
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
});
|
|
28
|
-
_context.prev = 1;
|
|
29
|
-
_context.next = 4;
|
|
43
|
+
_context.prev = 0;
|
|
44
|
+
_context.next = 3;
|
|
30
45
|
return navigator.clipboard.writeText(text);
|
|
31
|
-
case
|
|
46
|
+
case 3:
|
|
32
47
|
setCopySuccess(true);
|
|
33
|
-
_context.next =
|
|
48
|
+
_context.next = 9;
|
|
34
49
|
break;
|
|
35
|
-
case
|
|
36
|
-
_context.prev =
|
|
37
|
-
_context.t0 = _context["catch"](
|
|
50
|
+
case 6:
|
|
51
|
+
_context.prev = 6;
|
|
52
|
+
_context.t0 = _context["catch"](0);
|
|
38
53
|
console.error('Failed to copy: ', _context.t0);
|
|
39
|
-
case
|
|
54
|
+
case 9:
|
|
40
55
|
setTimeout(function () {
|
|
41
56
|
setCopySuccess(false);
|
|
42
57
|
}, copyResetTimeout);
|
|
43
|
-
case
|
|
58
|
+
case 10:
|
|
44
59
|
case "end":
|
|
45
60
|
return _context.stop();
|
|
46
61
|
}
|
|
47
|
-
}, _callee, null, [[
|
|
62
|
+
}, _callee, null, [[0, 6]]);
|
|
48
63
|
}));
|
|
49
64
|
return function copyContent() {
|
|
50
65
|
return _ref2.apply(this, arguments);
|
|
51
66
|
};
|
|
52
67
|
}();
|
|
53
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
68
|
+
return copyPermission && /*#__PURE__*/React.createElement("div", {
|
|
54
69
|
className: "CopyToClipboard Share__item-wrapper ".concat(copySuccess ? 'copySuccess' : '')
|
|
55
70
|
}, /*#__PURE__*/React.createElement("div", {
|
|
56
71
|
onClick: copyContent,
|
|
57
72
|
className: "Share__item copy"
|
|
58
73
|
}, /*#__PURE__*/React.createElement("span", {
|
|
59
|
-
className: "icon icon-
|
|
60
|
-
}), /*#__PURE__*/React.createElement("span",
|
|
74
|
+
className: "icon icon-".concat(icon)
|
|
75
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
76
|
+
className: "Share__item__label"
|
|
77
|
+
}, copySuccess ? copiedText : copyText)));
|
|
61
78
|
};
|
|
62
79
|
CopyToClipboard.propTypes = {
|
|
63
80
|
text: PropTypes.string.isRequired,
|
|
64
|
-
copyResetTimeout: PropTypes.number
|
|
81
|
+
copyResetTimeout: PropTypes.number,
|
|
82
|
+
icon: PropTypes.string,
|
|
83
|
+
copyText: PropTypes.string,
|
|
84
|
+
copiedText: PropTypes.string
|
|
65
85
|
};
|
|
66
86
|
CopyToClipboard.defaultProps = {
|
|
67
|
-
copyResetTimeout: 3000
|
|
87
|
+
copyResetTimeout: 3000,
|
|
88
|
+
icon: 'arrow-right',
|
|
89
|
+
copyText: 'Copy',
|
|
90
|
+
copiedText: 'Copied!'
|
|
68
91
|
};
|
|
69
92
|
export default CopyToClipboard;
|
package/dist/index.d.ts
CHANGED
|
@@ -55,6 +55,7 @@ export { default as MediaPlayer } from "./components/MediaPlayer";
|
|
|
55
55
|
export { default as PDFReader } from "./components/PDFReader";
|
|
56
56
|
export { default as Quote } from "./organisms/Quote";
|
|
57
57
|
export { default as Share } from "./components/Share";
|
|
58
|
+
export { default as CopyToClipboard } from "./components/Share/CopyToClipboard";
|
|
58
59
|
export { default as SliderRelated } from "./components/Sliders/SliderRelated";
|
|
59
60
|
export { default as Text } from "./organisms/Text";
|
|
60
61
|
export { default as ImageGrid } from "./organisms/ImageGrid";
|
package/dist/index.js
CHANGED
|
@@ -62,6 +62,7 @@ export { default as MediaPlayer } from './components/MediaPlayer';
|
|
|
62
62
|
export { default as PDFReader } from './components/PDFReader';
|
|
63
63
|
export { default as Quote } from './organisms/Quote';
|
|
64
64
|
export { default as Share } from './components/Share';
|
|
65
|
+
export { default as CopyToClipboard } from './components/Share/CopyToClipboard';
|
|
65
66
|
export { default as SliderRelated } from './components/Sliders/SliderRelated';
|
|
66
67
|
export { default as Text } from './organisms/Text';
|
|
67
68
|
export { default as ImageGrid } from './organisms/ImageGrid';
|