@stokr/components-library
Version:
STOKR - Components Library
186 lines (183 loc) • 8.04 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.MemoCryptoAddress = exports.CryptoAddress = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactTippy = require("react-tippy");
var _reactCopyToClipboard = require("react-copy-to-clipboard");
var _CryptoAddress = require("./CryptoAddress.styles");
var _RadioWrap = _interopRequireDefault(require("./RadioWrap"));
var _ComponentWrap = _interopRequireDefault(require("./ComponentWrap"));
var _getShortAddress = _interopRequireDefault(require("../../utils/get-short-address"));
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 (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 (const 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); }
// import './tooltip.css' is added in SUF which file? where?
const CryptoAddress = _ref => {
let {
title,
status,
address,
data,
info,
wrapped,
borderTop,
borderBottom,
radio,
sideOptions,
src,
noHead,
noBody,
noBorderBottom,
flexHead,
fontSize,
eqValueFontSize,
eqValueStyle,
titleColor,
dataBoxStyle,
headStyle,
infoBoxStyle,
wrapperStyle,
bodyStyle,
containerStyle,
dataValueStyle
} = _ref;
const [copiedAddressToClipboard, setCopiedAddressToClipboard] = (0, _react.useState)(false);
return /*#__PURE__*/_react.default.createElement(_CryptoAddress.Container, {
style: containerStyle
}, /*#__PURE__*/_react.default.createElement(_RadioWrap.default, {
radio: radio,
hide: radio && radio.hide
}, /*#__PURE__*/_react.default.createElement(_ComponentWrap.default, {
wrapped: wrapped,
borderTop: borderTop,
borderBottom: !noBorderBottom && borderBottom
}, /*#__PURE__*/_react.default.createElement(_CryptoAddress.DataWrapper, {
withOptions: !!sideOptions,
style: wrapperStyle
}, radio && !radio.hide && /*#__PURE__*/_react.default.createElement(_CryptoAddress.CheckMark, null), /*#__PURE__*/_react.default.createElement(_CryptoAddress.Head, {
noBody: noBody,
noHead: noHead,
flexHead: flexHead,
style: headStyle
}, /*#__PURE__*/_react.default.createElement(_CryptoAddress.Title, {
color: titleColor
}, title, status && /*#__PURE__*/_react.default.createElement(_CryptoAddress.Status, null, status)), /*#__PURE__*/_react.default.createElement(_CryptoAddress.TitleSide, null, address && /*#__PURE__*/_react.default.createElement(_CryptoAddress.AddressWrap, null, /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
position: "top",
title: address,
theme: "light",
arrow: true,
duration: 200
}, /*#__PURE__*/_react.default.createElement(_CryptoAddress.Address, null, (0, _getShortAddress.default)(address))), /*#__PURE__*/_react.default.createElement("div", {
onClick: e => e.preventDefault()
}, copyToClipBoard(address, copiedAddressToClipboard, setCopiedAddressToClipboard))), src && /*#__PURE__*/_react.default.createElement("img", {
src: src,
alt: "project logo",
height: "50",
width: 100,
style: {
objectFit: 'contain'
}
}))), /*#__PURE__*/_react.default.createElement(_CryptoAddress.Body, {
noBody: noBody,
style: bodyStyle
}, /*#__PURE__*/_react.default.createElement(_CryptoAddress.DataBox, {
style: dataBoxStyle
}, data.value && /*#__PURE__*/_react.default.createElement(_CryptoAddress.Value, {
fontSize: fontSize,
style: dataValueStyle
}, data.unit && "".concat(data.unit, " "), data.shortAddress ? /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
position: "top",
title: data.value,
theme: "light",
arrow: true,
duration: 200,
style: {
margin: 0
}
}, (0, _getShortAddress.default)(data.value)) : data.value, data.tooltip && /*#__PURE__*/_react.default.createElement("div", null, copyToClipBoard(data.value, copiedAddressToClipboard, setCopiedAddressToClipboard))), data.eqValue && /*#__PURE__*/_react.default.createElement(_CryptoAddress.Equal, {
fontSize: eqValueFontSize,
style: {
eqValueStyle
}
}, '= ', data.eqUnit && "".concat(data.eqUnit, " "), data.eqValue)), /*#__PURE__*/_react.default.createElement(_CryptoAddress.InfoBox, {
style: infoBoxStyle
}, /*#__PURE__*/_react.default.createElement(_CryptoAddress.Value, null, info.unit && /*#__PURE__*/_react.default.createElement("strong", null, info.unit), info.value), info.eqValue && /*#__PURE__*/_react.default.createElement(_CryptoAddress.Equal, {
fontSize: eqValueFontSize,
style: eqValueStyle
}, info.noEqualsToSign ? ' ' : '= ', info.eqUnit && /*#__PURE__*/_react.default.createElement("strong", null, info.eqUnit), " ".concat(info.eqValue)))), sideOptions && /*#__PURE__*/_react.default.createElement(_CryptoAddress.OptionsWrapper, null, sideOptions)))));
};
exports.CryptoAddress = CryptoAddress;
const copyToClipBoard = (value, isCopied, setCopy) => /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
position: "top",
title: isCopied ? 'Copied to clipboard!' : 'Click to copy to clipboard.',
theme: "light",
arrow: true,
hideOnClick: false,
onHidden: () => setCopy(false),
duration: 200
}, /*#__PURE__*/_react.default.createElement(_reactCopyToClipboard.CopyToClipboard, {
text: value,
onCopy: () => setCopy(true)
}, /*#__PURE__*/_react.default.createElement(_CryptoAddress.CopyToClipboardButton, null)));
const dataShape = _propTypes.default.shape({
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
tooltip: _propTypes.default.bool,
unit: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
eqValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
eqUnit: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
});
CryptoAddress.propTypes = {
title: _propTypes.default.string.isRequired,
status: _propTypes.default.string,
address: _propTypes.default.string.isRequired,
wrapped: _propTypes.default.bool,
borderTop: _propTypes.default.bool,
borderBottom: _propTypes.default.bool,
radio: _RadioWrap.default.propTypes.radio,
data: dataShape,
info: dataShape,
sideOptions: _propTypes.default.node,
// fontSize from IIS
fontSize: _propTypes.default.number,
eqValueFontSize: _propTypes.default.number,
noHead: _propTypes.default.bool,
dataBoxStyle: _propTypes.default.object,
headStyle: _propTypes.default.object,
infoBoxStyle: _propTypes.default.object,
wrapperStyle: _propTypes.default.object,
dataValueStyle: _propTypes.default.object
};
//address not required in IIS, instead wrapping {address &&( .. now doing both which is redundant
CryptoAddress.defaultProps = {
status: '',
wrapped: false,
borderTop: false,
borderBottom: false,
radio: null,
address: '',
noHead: false,
data: {
value: '',
unit: '',
eqValue: '',
eqUnit: '',
tooltip: false
},
info: {
value: '',
unit: '',
eqValue: '',
eqUnit: ''
},
// fontSize from IIS
fontSize: 22,
eqValueFontSize: 9,
sideOptions: null,
dataBoxStyle: {},
headStyle: {},
infoBoxStyle: {}
};
const MemoCryptoAddress = exports.MemoCryptoAddress = /*#__PURE__*/_react.default.memo(CryptoAddress);
var _default = exports.default = CryptoAddress; //defaultValue of info: { value:'-'} in ISS and VD