@atlaskit/help
Version:
A cross-product help component
83 lines (82 loc) • 3.83 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.BackButton = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactIntlNext = require("react-intl-next");
var _analyticsNext = require("@atlaskit/analytics-next");
var _reactTransitionGroup = require("react-transition-group");
var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/migration/arrow-left"));
var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
var _messages = require("../../messages");
var _styled = require("../styled");
var _constants = require("../constants");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
// Animation
var defaultStyle = {
transition: "left ".concat(_constants.TRANSITION_DURATION_MS, "ms, opacity ").concat(_constants.TRANSITION_DURATION_MS, "ms"),
left: "var(--ds-space-300, 24px)",
opacity: 0
};
var transitionStyles = {
entered: {
left: "var(--ds-space-100, 8px)",
opacity: 1
},
exited: {
left: "var(--ds-space-100, 8px)",
opacity: 0
}
};
var BackButton = exports.BackButton = function BackButton(_ref) {
var onClick = _ref.onClick,
_ref$isVisible = _ref.isVisible,
isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
formatMessage = _ref.intl.formatMessage;
var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
var handleOnClick = function handleOnClick(event) {
if (onClick) {
var _analyticsEvent = createAnalyticsEvent({
action: 'clicked'
});
onClick(event, _analyticsEvent);
}
};
return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
in: isVisible,
timeout: _constants.TRANSITION_DURATION_MS,
mountOnEnter: true,
unmountOnExit: true
}, function (state) {
return /*#__PURE__*/_react.default.createElement(_styled.BackButtonContainer, {
style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
}, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
onClick: function onClick(event) {
if (state === 'entered') {
handleOnClick(event);
}
},
appearance: "subtle",
iconBefore: /*#__PURE__*/_react.default.createElement(_arrowLeft.default, {
color: "currentColor",
label: "",
LEGACY_size: "medium"
})
}, formatMessage(_messages.messages.help_panel_search_back)));
});
};
var BackButtonWithContext = function BackButtonWithContext(props) {
return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
data: {
componentName: 'backButton',
packageName: "@atlaskit/help",
packageVersion: "8.0.6"
}
}, /*#__PURE__*/_react.default.createElement(BackButton, props));
};
var _default = exports.default = (0, _reactIntlNext.injectIntl)(BackButtonWithContext);