@blockstack/ui
Version:
Blockstack UI components built using React and styled-components with styled-system.
325 lines (299 loc) • 10.8 kB
JavaScript
import { objectSpread2 as _objectSpread2, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useMemo, useCallback, useRef } from 'react';
import { Box } from '../box/index.esm.js';
import { transition } from '../theme/theme.esm.js';
import { useHover, useFocus } from 'use-events';
import { Flex } from '../flex/index.esm.js';
import '../hooks/use-controllable.esm.js';
import '../hooks/use-previous.esm.js';
import '../hooks/use-disclosure.esm.js';
import '../hooks/use-latest-ref.esm.js';
import '../hooks/use-event-listener.esm.js';
import '../hooks/use-force-update.esm.js';
import { useId } from '@reach/auto-id';
import '../hooks/use-id.esm.js';
import '../hooks/use-merge-refs.esm.js';
import '../hooks/use-safe-layout-effect.esm.js';
import { useTimeout } from '../hooks/use-timeout.esm.js';
import '../hooks/use-theme.esm.js';
import '../hooks/use-color-mode.esm.js';
import { Text } from '../text/index.esm.js';
import '../icons/apps-icon.esm.js';
import '../icons/arrow-icon.esm.js';
import '../icons/blockchain-icon.esm.js';
import '../icons/blockstack-icon.esm.js';
import '../icons/checkmark-icon.esm.js';
import { CheckmarkCircleIcon } from '../icons/checkmark-circle-icon.esm.js';
import '../icons/chevron-icon.esm.js';
import '../icons/connect-logo-icon.esm.js';
import '../icons/encryption-icon.esm.js';
import '../icons/exclamation-mark-icon.esm.js';
import { ExclamationMarkCircleIcon } from '../icons/exclamation-mark-circle-icon.esm.js';
import '../icons/eye-icon.esm.js';
import '../icons/padlock-icon.esm.js';
import '../icons/plus-circle-icon.esm.js';
import '../icons/private-icon.esm.js';
import '../icons/union-line-icon.esm.js';
import { CloseIcon } from '../icons/close-icon.esm.js';
import '../icons/external-icon.esm.js';
import '../icons/failed-icon.esm.js';
import { Stack } from '../stack/index.esm.js';
import ReachAlert from '@reach/alert';
import { useRect } from '@reach/rect';
import { Transition } from '../transition/base.esm.js';
import '../transition/fade.esm.js';
import '../transition/scale-fade.esm.js';
import '../transition/slide.esm.js';
import '../transition/slide-fade.esm.js';
var toneToIcon = {
critical: ExclamationMarkCircleIcon,
positive: CheckmarkCircleIcon,
none: function none() {
return null;
}
};
var Action = function Action(_ref) {
var label = _ref.label,
onClick = _ref.onClick,
removeToast = _ref.removeToast,
rest = _objectWithoutPropertiesLoose(_ref, ["label", "onClick", "removeToast"]);
var handleClick = useCallback(function () {
removeToast();
onClick();
}, [removeToast, onClick]);
return React__default.createElement(Box, Object.assign({
_hover: {
cursor: 'pointer',
textDecoration: 'underline'
},
onClick: handleClick,
"aria-hidden": true
}, rest), React__default.createElement(Text, null, label));
};
var getCustomProps = function getCustomProps(props) {
var _props, _props2, _props3, _props4, _props5, _props5$icon, _props6, _props7;
if (props === void 0) {
props = {};
}
return {
message: _objectSpread2({
color: 'ink'
}, (_props = props) === null || _props === void 0 ? void 0 : _props.message),
description: _objectSpread2({
color: 'ink.600'
}, (_props2 = props) === null || _props2 === void 0 ? void 0 : _props2.description),
toast: _objectSpread2({
background: 'white',
borderColor: 'inherit',
boxShadow: 'high'
}, (_props3 = props) === null || _props3 === void 0 ? void 0 : _props3.toast),
icon: _objectSpread2({}, (_props4 = props) === null || _props4 === void 0 ? void 0 : _props4.icon, {
color: _objectSpread2({
critical: 'red',
positive: 'green'
}, (_props5 = props) === null || _props5 === void 0 ? void 0 : (_props5$icon = _props5.icon) === null || _props5$icon === void 0 ? void 0 : _props5$icon.color)
}),
close: _objectSpread2({
color: 'ink.600'
}, (_props6 = props) === null || _props6 === void 0 ? void 0 : _props6.close),
action: _objectSpread2({
color: 'blue',
fontSize: '14px'
}, (_props7 = props) === null || _props7 === void 0 ? void 0 : _props7.action)
};
};
var CloseButton = function CloseButton(_ref2) {
var onClick = _ref2.onClick,
rest = _objectWithoutPropertiesLoose(_ref2, ["onClick"]);
var _useHover = useHover(),
hover = _useHover[0],
bind = _useHover[1];
var _useFocus = useFocus(),
focus = _useFocus[0],
focusBind = _useFocus[1];
return React__default.createElement(Flex, Object.assign({
position: "relative",
justify: "center",
cursor: hover ? 'pointer' : 'unset',
onClick: onClick
}, bind, rest), React__default.createElement(Box, Object.assign({
ml: "tight",
mt: "extra-tight",
opacity: hover ? 1 : 0.5,
as: "button",
role: "button",
"aria-label": "Close popup",
title: "Close",
style: {
outline: 'none'
},
position: "relative",
zIndex: 99,
transition: transition
}, focusBind), React__default.createElement(CloseIcon, {
size: "12px"
})), React__default.createElement(Box, {
size: "24px",
bg: "currentColor",
borderRadius: "100%",
position: "absolute",
left: "-50%",
top: "-50%",
opacity: hover ? 0.1 : 0,
transform: "translate3d(12px, 6px, 0)",
transition: transition,
boxShadow: focus ? 'focus' : 'unset'
}));
};
var Description = function Description(_ref3) {
var children = _ref3.children,
rest = _objectWithoutPropertiesLoose(_ref3, ["children"]);
return React__default.createElement(Text, Object.assign({
fontSize: "14px",
style: {
wordBreak: 'break-word'
},
display: "block"
}, rest), children);
};
var Message = function Message(_ref4) {
var children = _ref4.children,
rest = _objectWithoutPropertiesLoose(_ref4, ["children"]);
return React__default.createElement(Text, Object.assign({
fontWeight: "600",
display: "block"
}, rest), children);
};
var ToastContent = function ToastContent(_ref5) {
var _ref5$styles = _ref5.styles,
styles = _ref5$styles === void 0 ? {} : _ref5$styles,
message = _ref5.message,
description = _ref5.description,
action = _ref5.action,
remove = _ref5.remove,
rest = _objectWithoutPropertiesLoose(_ref5, ["styles", "message", "description", "action", "remove"]);
return description ? React__default.createElement(Stack, Object.assign({
spacing: "tight"
}, rest), React__default.createElement(Message, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.message), message), description ? React__default.createElement(Description, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.description), description) : null, action ? React__default.createElement(Action, Object.assign({
key: action.label,
removeToast: remove
}, action, styles.action)) : null) : React__default.createElement(Stack, Object.assign({
spacing: "tight"
}, rest), React__default.createElement(Message, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.message), message), action ? React__default.createElement(Action, Object.assign({
key: action.label,
removeToast: remove
}, action, styles.action)) : null);
};
var Toast = /*#__PURE__*/React__default.forwardRef(function (_ref6, ref) {
var _rect$height;
var propsId = _ref6.id,
message = _ref6.message,
description = _ref6.description,
_ref6$tone = _ref6.tone,
tone = _ref6$tone === void 0 ? 'none' : _ref6$tone,
onClear = _ref6.onClear,
action = _ref6.action,
_ref6$toastProps = _ref6.toastProps,
toastProps = _ref6$toastProps === void 0 ? {} : _ref6$toastProps;
var id = useId(propsId);
var styles = useMemo(function () {
return getCustomProps(toastProps);
}, [toastProps]);
var remove = useCallback(function () {
return onClear(id);
}, [onClear, id]);
var toastRef = useRef(null);
var rect = useRect(toastRef);
var _React$useState = React__default.useState(true),
show = _React$useState[0],
setShow = _React$useState[1];
var height = (_rect$height = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _rect$height !== void 0 ? _rect$height : 0;
var onExit = function onExit() {
if (!show) {
onClear(id);
}
};
var onClose = React__default.useCallback(function () {
setShow(false);
}, []);
var _useTimeout = useTimeout({
duration: 7200,
onTimeout: onClose
}),
stopTimeout = _useTimeout.stopTimeout,
startTimeout = _useTimeout.startTimeout;
var animationStyles = {
init: {
opacity: 0,
height: 0,
transform: 'scale(1)'
},
entered: {
opacity: 1,
height: height,
transform: 'scale(1)'
},
exiting: {
opacity: 0,
height: 0,
transform: 'scale(0.9)'
}
};
var noIcon = tone === 'none';
var Icon = toneToIcon[tone];
return React__default.createElement(Transition, {
styles: animationStyles,
"in": show,
onExited: onExit,
timeout: 350
}, function (transitionStyles) {
return React__default.createElement(Box, {
onMouseEnter: stopTimeout,
onMouseLeave: startTimeout,
style: _objectSpread2({
willChange: 'transform, height, opacity'
}, transitionStyles),
ref: ref
}, React__default.createElement(Flex, {
justify: "center",
as: ReachAlert,
maxWidth: "100%",
pb: "tight",
px: "tight",
ref: toastRef
}, React__default.createElement(Box, Object.assign({
p: "base",
border: "1px solid",
borderColor: "inherit",
borderRadius: "6px",
maxWidth: "100%"
}, styles.toast, {
style: {
pointerEvents: 'all'
}
}), React__default.createElement(Box, {
position: "relative"
}, React__default.createElement(Flex, {
align: "flex-start"
}, tone !== 'none' ? React__default.createElement(Box, Object.assign({
pt: "extra-tight",
pr: "tight"
}, styles === null || styles === void 0 ? void 0 : styles.icon, {
color: styles.icon.color[tone]
}), React__default.createElement(Icon, {
size: "16px"
})) : null, React__default.createElement(Box, {
pr: noIcon ? 'unset' : 'base'
}, React__default.createElement(ToastContent, {
message: message,
description: description,
action: action,
styles: styles,
remove: remove
})), React__default.createElement(CloseButton, {
onClick: onClose
}))))));
});
});
export { Toast };
//# sourceMappingURL=toast.esm.js.map