dash-core-components
Version:
Core component suite for Dash
254 lines (250 loc) • 12.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactFontawesome = require("@fortawesome/react-fontawesome");
var _freeRegularSvgIcons = require("@fortawesome/free-regular-svg-icons");
var _LoadingElement = _interopRequireDefault(require("../utils/LoadingElement"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // eslint-disable-line no-unused-vars
var clipboardAPI = navigator.clipboard;
function wait(ms) {
return new Promise(r => setTimeout(r, ms));
}
/**
* The Clipboard component copies text to the clipboard
*/
class Clipboard extends _react.default.Component {
constructor(props) {
super(props);
this.copyToClipboard = this.copyToClipboard.bind(this);
this.onClickHandler = this.onClickHandler.bind(this);
this.copySuccess = this.copySuccess.bind(this);
this.getTargetText = this.getTargetText.bind(this);
this.loading = this.loading.bind(this);
this.stringifyId = this.stringifyId.bind(this);
this.state = {
copied: false
};
}
onClickHandler() {
this.props.setProps({
n_clicks: this.props.n_clicks + 1
});
}
componentDidUpdate(prevProps) {
// If the clicks has not changed, do nothing
if (!this.props.n_clicks || this.props.n_clicks === prevProps.n_clicks) {
return;
}
// If the clicks has changed, copy to clipboard
this.copyToClipboard();
}
// stringifies object ids used in pattern matching callbacks
stringifyId(id) {
if (typeof id !== 'object') {
return id;
}
var stringifyVal = v => v && v.wild || JSON.stringify(v);
var parts = Object.keys(id).sort().map(k => JSON.stringify(k) + ':' + stringifyVal(id[k]));
return '{' + parts.join(',') + '}';
}
copySuccess(content, htmlContent) {
var _this = this;
return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
var showCopiedIcon, blobHtml, blobText, data;
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
showCopiedIcon = 1000;
if (!htmlContent) {
_context.n = 2;
break;
}
blobHtml = new Blob([htmlContent], {
type: 'text/html'
});
blobText = new Blob([content !== null && content !== void 0 ? content : htmlContent], {
type: 'text/plain'
});
data = [new ClipboardItem({
['text/plain']: blobText,
['text/html']: blobHtml
})];
_context.n = 1;
return navigator.clipboard.write(data);
case 1:
_context.n = 3;
break;
case 2:
_context.n = 3;
return clipboardAPI.writeText(content);
case 3:
_this.setState({
copied: true
});
_context.n = 4;
return wait(showCopiedIcon);
case 4:
_this.setState({
copied: false
});
case 5:
return _context.a(2);
}
}, _callee);
}))();
}
getTargetText() {
// get the inner text. If none, use the content of the value param
var id = this.stringifyId(this.props.target_id);
var target = document.getElementById(id);
if (!target) {
throw new Error('Clipboard copy failed: no element found for target_id ' + this.props.target_id);
}
var content = target.innerText;
if (!content) {
content = target.value;
content = content === undefined ? null : content;
}
return content;
}
loading() {
var _this2 = this;
return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
return _regenerator().w(function (_context2) {
while (1) switch (_context2.n) {
case 0:
if (!_this2.context.isLoading()) {
_context2.n = 2;
break;
}
_context2.n = 1;
return wait(100);
case 1:
_context2.n = 0;
break;
case 2:
return _context2.a(2);
}
}, _callee2);
}))();
}
copyToClipboard() {
var _this3 = this;
return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
var content, htmlContent;
return _regenerator().w(function (_context3) {
while (1) switch (_context3.n) {
case 0:
if (!_this3.props.target_id) {
_context3.n = 1;
break;
}
content = _this3.getTargetText();
_context3.n = 4;
break;
case 1:
_context3.n = 2;
return wait(100);
case 2:
_context3.n = 3;
return _this3.loading();
case 3:
content = _this3.props.content;
htmlContent = _this3.props.html_content;
case 4:
if (content || htmlContent) {
_this3.copySuccess(content, htmlContent);
}
case 5:
return _context3.a(2);
}
}, _callee3);
}))();
}
componentDidMount() {
if (!clipboardAPI) {
console.warn('Copy to clipboard not available with this browser'); // eslint-disable-line no-console
}
}
render() {
var _this$props = this.props,
id = _this$props.id,
title = _this$props.title,
className = _this$props.className,
style = _this$props.style;
var copyIcon = /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
icon: _freeRegularSvgIcons.faCopy
});
var copiedIcon = /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
icon: _freeRegularSvgIcons.faCheckCircle
});
var btnIcon = this.state.copied ? copiedIcon : copyIcon;
return clipboardAPI ? /*#__PURE__*/_react.default.createElement(_LoadingElement.default, {
id: id,
title: title,
style: style,
className: className,
onClick: this.onClickHandler
}, /*#__PURE__*/_react.default.createElement("i", null, " ", btnIcon)) : null;
}
}
exports.default = Clipboard;
_defineProperty(Clipboard, "contextType", window.dash_component_api.DashContext);
Clipboard.defaultProps = {
content: null,
html_content: null,
target_id: null,
n_clicks: 0
};
Clipboard.propTypes = {
/**
* The ID used to identify this component.
*/
id: _propTypes.default.string,
/**
* The id of target component containing text to copy to the clipboard.
* The inner text of the `children` prop will be copied to the clipboard. If none, then the text from the
* `value` prop will be copied.
*/
target_id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
/**
* The text to be copied to the clipboard if the `target_id` is None.
*/
content: _propTypes.default.string,
/**
* The number of times copy button was clicked
*/
n_clicks: _propTypes.default.number,
/**
* The clipboard html text be copied to the clipboard if the `target_id` is None.
*/
html_content: _propTypes.default.string,
/**
* The text shown as a tooltip when hovering over the copy icon.
*/
title: _propTypes.default.string,
/**
* The icon's styles
*/
style: _propTypes.default.object,
/**
* The class name of the icon element
*/
className: _propTypes.default.string,
/**
* Dash-assigned callback that gets fired when the value changes.
*/
setProps: _propTypes.default.func
};