botframework-webchat-component
Version:
React component of botframework-webchat
112 lines (105 loc) • 13.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = CarouselFilmStrip;
var _mirrorStyle = _interopRequireDefault(require("../mirrorStyle"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function CarouselFilmStrip(_ref) {
var avatarSize = _ref.avatarSize,
bubbleMaxWidth = _ref.bubbleMaxWidth,
bubbleMinWidth = _ref.bubbleMinWidth,
paddingRegular = _ref.paddingRegular,
transitionDuration = _ref.transitionDuration;
return {
'&.webchat__carousel-filmstrip': _objectSpread({
// Browser quirks: Firefox has no way to hide scrollbar and while keeping it in function
// https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
'@supports (-moz-appearance: none)': {
marginBottom: -17
},
'& .webchat__carousel-filmstrip__attachment': {
minWidth: bubbleMinWidth,
maxWidth: bubbleMaxWidth,
transitionDuration: transitionDuration,
transitionProperty: 'max-width, min-width'
},
'& .webchat__carousel-filmstrip__message': {
maxWidth: bubbleMaxWidth,
transitionDuration: transitionDuration,
transitionProperty: 'max-width'
},
'&.webchat__carousel-filmstrip--hide-nub, &.webchat__carousel-filmstrip--show-nub, &.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar': {
'& .webchat__carousel-filmstrip__message': {
maxWidth: bubbleMaxWidth + paddingRegular
}
},
'& .webchat__carousel-filmstrip__alignment-pad': {
transitionDuration: transitionDuration,
transitionProperty: 'width',
width: paddingRegular
},
'&.webchat__carousel-filmstrip--extra-trailing .webchat__carousel-filmstrip__alignment-pad': {
width: paddingRegular * 2
},
'&:not(.webchat__carousel-filmstrip--no-message) .webchat__carousel-filmstrip__attachments': {
marginTop: paddingRegular
},
'& .webchat__carousel-filmstrip__avatar-gutter': {
alignItems: 'flex-end',
transitionDuration: transitionDuration,
transitionProperty: 'width'
},
'& .webchat__carousel-filmstrip__nub-pad': {
transitionDuration: transitionDuration,
transitionProperty: 'width',
width: 0
},
'&.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar': {
'& .webchat__carousel-filmstrip__avatar-gutter': {
width: avatarSize
}
},
'&.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar, &.webchat__carousel-filmstrip--hide-nub, &.webchat__carousel-filmstrip--show-nub': {
'& .webchat__carousel-filmstrip__nub-pad': {
width: paddingRegular
}
},
'&:not(.webchat__carousel-filmstrip--top-callout) .webchat__carousel-filmstrip__avatar-gutter': {
justifyContent: 'flex-end'
}
}, (0, _mirrorStyle.default)('&.webchat__carousel-filmstrip--rtl', {
'& .webchat__carousel-filmstrip__avatar-gutter': {
marginLeft: paddingRegular
},
'& .webchat__carousel-filmstrip__attachments': {
marginLeft: -paddingRegular
},
'& .webchat__carousel-filmstrip__attachment': {
paddingLeft: paddingRegular
},
'&.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar': {
'& .webchat__carousel-filmstrip__attachments': {
marginLeft: -(avatarSize + paddingRegular * 2)
},
'& .webchat__carousel-filmstrip__attachment:first-child': {
paddingLeft: avatarSize + paddingRegular * 2
}
},
'&.webchat__carousel-filmstrip--hide-nub, &.webchat__carousel-filmstrip--show-nub': {
'&:not(.webchat__carousel-filmstrip--hide-avatar.webchat__carousel-filmstrip--show-avatar)': {
'& .webchat__carousel-filmstrip__attachments': {
marginLeft: -paddingRegular * 2
},
'& .webchat__carousel-filmstrip__attachment:first-child': {
paddingLeft: paddingRegular * 2
}
}
}
}))
};
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9TdHlsZXMvU3R5bGVTZXQvQ2Fyb3VzZWxGaWxtU3RyaXAuanMiXSwibmFtZXMiOlsiQ2Fyb3VzZWxGaWxtU3RyaXAiLCJhdmF0YXJTaXplIiwiYnViYmxlTWF4V2lkdGgiLCJidWJibGVNaW5XaWR0aCIsInBhZGRpbmdSZWd1bGFyIiwidHJhbnNpdGlvbkR1cmF0aW9uIiwibWFyZ2luQm90dG9tIiwibWluV2lkdGgiLCJtYXhXaWR0aCIsInRyYW5zaXRpb25Qcm9wZXJ0eSIsIndpZHRoIiwibWFyZ2luVG9wIiwiYWxpZ25JdGVtcyIsImp1c3RpZnlDb250ZW50IiwibWFyZ2luTGVmdCIsInBhZGRpbmdMZWZ0Il0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBRUE7Ozs7Ozs7Ozs7QUFFZSxTQUFTQSxpQkFBVCxPQU1aO0FBQUEsTUFMREMsVUFLQyxRQUxEQSxVQUtDO0FBQUEsTUFKREMsY0FJQyxRQUpEQSxjQUlDO0FBQUEsTUFIREMsY0FHQyxRQUhEQSxjQUdDO0FBQUEsTUFGREMsY0FFQyxRQUZEQSxjQUVDO0FBQUEsTUFEREMsa0JBQ0MsUUFEREEsa0JBQ0M7QUFDRCxTQUFPO0FBQ0w7QUFDRTtBQUNBO0FBQ0EsMkNBQXFDO0FBQ25DQyxRQUFBQSxZQUFZLEVBQUUsQ0FBQztBQURvQixPQUh2QztBQU9FLG9EQUE4QztBQUM1Q0MsUUFBQUEsUUFBUSxFQUFFSixjQURrQztBQUU1Q0ssUUFBQUEsUUFBUSxFQUFFTixjQUZrQztBQUc1Q0csUUFBQUEsa0JBQWtCLEVBQWxCQSxrQkFINEM7QUFJNUNJLFFBQUFBLGtCQUFrQixFQUFFO0FBSndCLE9BUGhEO0FBY0UsaURBQTJDO0FBQ3pDRCxRQUFBQSxRQUFRLEVBQUVOLGNBRCtCO0FBRXpDRyxRQUFBQSxrQkFBa0IsRUFBbEJBLGtCQUZ5QztBQUd6Q0ksUUFBQUEsa0JBQWtCLEVBQUU7QUFIcUIsT0FkN0M7QUFvQkUsa0xBQTRLO0FBQzFLLG1EQUEyQztBQUN6Q0QsVUFBQUEsUUFBUSxFQUFFTixjQUFjLEdBQUdFO0FBRGM7QUFEK0gsT0FwQjlLO0FBMEJFLHVEQUFpRDtBQUMvQ0MsUUFBQUEsa0JBQWtCLEVBQWxCQSxrQkFEK0M7QUFFL0NJLFFBQUFBLGtCQUFrQixFQUFFLE9BRjJCO0FBRy9DQyxRQUFBQSxLQUFLLEVBQUVOO0FBSHdDLE9BMUJuRDtBQWdDRSxtR0FBNkY7QUFDM0ZNLFFBQUFBLEtBQUssRUFBRU4sY0FBYyxHQUFHO0FBRG1FLE9BaEMvRjtBQW9DRSxtR0FBNkY7QUFDM0ZPLFFBQUFBLFNBQVMsRUFBRVA7QUFEZ0YsT0FwQy9GO0FBd0NFLHVEQUFpRDtBQUMvQ1EsUUFBQUEsVUFBVSxFQUFFLFVBRG1DO0FBRS9DUCxRQUFBQSxrQkFBa0IsRUFBbEJBLGtCQUYrQztBQUcvQ0ksUUFBQUEsa0JBQWtCLEVBQUU7QUFIMkIsT0F4Q25EO0FBOENFLGlEQUEyQztBQUN6Q0osUUFBQUEsa0JBQWtCLEVBQWxCQSxrQkFEeUM7QUFFekNJLFFBQUFBLGtCQUFrQixFQUFFLE9BRnFCO0FBR3pDQyxRQUFBQSxLQUFLLEVBQUU7QUFIa0MsT0E5QzdDO0FBb0RFLGdHQUEwRjtBQUN4Rix5REFBaUQ7QUFDL0NBLFVBQUFBLEtBQUssRUFBRVQ7QUFEd0M7QUFEdUMsT0FwRDVGO0FBMERFLGtMQUE0SztBQUMxSyxtREFBMkM7QUFDekNTLFVBQUFBLEtBQUssRUFBRU47QUFEa0M7QUFEK0gsT0ExRDlLO0FBZ0VFLHNHQUFnRztBQUM5RlMsUUFBQUEsY0FBYyxFQUFFO0FBRDhFO0FBaEVsRyxPQW9FSywwQkFBWSxvQ0FBWixFQUFrRDtBQUNuRCx1REFBaUQ7QUFDL0NDLFFBQUFBLFVBQVUsRUFBRVY7QUFEbUMsT0FERTtBQUtuRCxxREFBK0M7QUFDN0NVLFFBQUFBLFVBQVUsRUFBRSxDQUFDVjtBQURnQyxPQUxJO0FBU25ELG9EQUE4QztBQUM1Q1csUUFBQUEsV0FBVyxFQUFFWDtBQUQrQixPQVRLO0FBYW5ELGdHQUEwRjtBQUN4Rix1REFBK0M7QUFDN0NVLFVBQUFBLFVBQVUsRUFBRSxFQUFFYixVQUFVLEdBQUdHLGNBQWMsR0FBRyxDQUFoQztBQURpQyxTQUR5QztBQUt4RixrRUFBMEQ7QUFDeERXLFVBQUFBLFdBQVcsRUFBRWQsVUFBVSxHQUFHRyxjQUFjLEdBQUc7QUFEYTtBQUw4QixPQWJ2QztBQXVCbkQsMEZBQW9GO0FBQ2xGLHFHQUE2RjtBQUMzRix5REFBK0M7QUFDN0NVLFlBQUFBLFVBQVUsRUFBRSxDQUFDVixjQUFELEdBQWtCO0FBRGUsV0FENEM7QUFLM0Ysb0VBQTBEO0FBQ3hEVyxZQUFBQSxXQUFXLEVBQUVYLGNBQWMsR0FBRztBQUQwQjtBQUxpQztBQURYO0FBdkJqQyxLQUFsRCxDQXBFTDtBQURLLEdBQVA7QUEwR0QiLCJzb3VyY2VSb290IjoiY29tcG9uZW50Oi8vLyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludCBuby1tYWdpYy1udW1iZXJzOiBbXCJlcnJvclwiLCB7IFwiaWdub3JlXCI6IFsyXSB9XSAqL1xuXG5pbXBvcnQgbWlycm9yU3R5bGUgZnJvbSAnLi4vbWlycm9yU3R5bGUnO1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBDYXJvdXNlbEZpbG1TdHJpcCh7XG4gIGF2YXRhclNpemUsXG4gIGJ1YmJsZU1heFdpZHRoLFxuICBidWJibGVNaW5XaWR0aCxcbiAgcGFkZGluZ1JlZ3VsYXIsXG4gIHRyYW5zaXRpb25EdXJhdGlvblxufSkge1xuICByZXR1cm4ge1xuICAgICcmLndlYmNoYXRfX2Nhcm91c2VsLWZpbG1zdHJpcCc6IHtcbiAgICAgIC8vIEJyb3dzZXIgcXVpcmtzOiBGaXJlZm94IGhhcyBubyB3YXkgdG8gaGlkZSBzY3JvbGxiYXIgYW5kIHdoaWxlIGtlZXBpbmcgaXQgaW4gZnVuY3Rpb25cbiAgICAgIC8vIGh0dHBzOi8vZGV2ZWxvcGVyLm1vemlsbGEub3JnL2VuLVVTL2RvY3MvV2ViL0NTUy9vdmVyZmxvd1xuICAgICAgJ0BzdXBwb3J0cyAoLW1vei1hcHBlYXJhbmNlOiBub25lKSc6IHtcbiAgICAgICAgbWFyZ2luQm90dG9tOiAtMTdcbiAgICAgIH0sXG5cbiAgICAgICcmIC53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXBfX2F0dGFjaG1lbnQnOiB7XG4gICAgICAgIG1pbldpZHRoOiBidWJibGVNaW5XaWR0aCxcbiAgICAgICAgbWF4V2lkdGg6IGJ1YmJsZU1heFdpZHRoLFxuICAgICAgICB0cmFuc2l0aW9uRHVyYXRpb24sXG4gICAgICAgIHRyYW5zaXRpb25Qcm9wZXJ0eTogJ21heC13aWR0aCwgbWluLXdpZHRoJ1xuICAgICAgfSxcblxuICAgICAgJyYgLndlYmNoYXRfX2Nhcm91c2VsLWZpbG1zdHJpcF9fbWVzc2FnZSc6IHtcbiAgICAgICAgbWF4V2lkdGg6IGJ1YmJsZU1heFdpZHRoLFxuICAgICAgICB0cmFuc2l0aW9uRHVyYXRpb24sXG4gICAgICAgIHRyYW5zaXRpb25Qcm9wZXJ0eTogJ21heC13aWR0aCdcbiAgICAgIH0sXG5cbiAgICAgICcmLndlYmNoYXRfX2Nhcm91c2VsLWZpbG1zdHJpcC0taGlkZS1udWIsICYud2ViY2hhdF9fY2Fyb3VzZWwtZmlsbXN0cmlwLS1zaG93LW51YiwgJi53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXAtLWhpZGUtYXZhdGFyLCAmLndlYmNoYXRfX2Nhcm91c2VsLWZpbG1zdHJpcC0tc2hvdy1hdmF0YXInOiB7XG4gICAgICAgICcmIC53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXBfX21lc3NhZ2UnOiB7XG4gICAgICAgICAgbWF4V2lkdGg6IGJ1YmJsZU1heFdpZHRoICsgcGFkZGluZ1JlZ3VsYXJcbiAgICAgICAgfVxuICAgICAgfSxcblxuICAgICAgJyYgLndlYmNoYXRfX2Nhcm91c2VsLWZpbG1zdHJpcF9fYWxpZ25tZW50LXBhZCc6IHtcbiAgICAgICAgdHJhbnNpdGlvbkR1cmF0aW9uLFxuICAgICAgICB0cmFuc2l0aW9uUHJvcGVydHk6ICd3aWR0aCcsXG4gICAgICAgIHdpZHRoOiBwYWRkaW5nUmVndWxhclxuICAgICAgfSxcblxuICAgICAgJyYud2ViY2hhdF9fY2Fyb3VzZWwtZmlsbXN0cmlwLS1leHRyYS10cmFpbGluZyAud2ViY2hhdF9fY2Fyb3VzZWwtZmlsbXN0cmlwX19hbGlnbm1lbnQtcGFkJzoge1xuICAgICAgICB3aWR0aDogcGFkZGluZ1JlZ3VsYXIgKiAyXG4gICAgICB9LFxuXG4gICAgICAnJjpub3QoLndlYmNoYXRfX2Nhcm91c2VsLWZpbG1zdHJpcC0tbm8tbWVzc2FnZSkgLndlYmNoYXRfX2Nhcm91c2VsLWZpbG1zdHJpcF9fYXR0YWNobWVudHMnOiB7XG4gICAgICAgIG1hcmdpblRvcDogcGFkZGluZ1JlZ3VsYXJcbiAgICAgIH0sXG5cbiAgICAgICcmIC53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXBfX2F2YXRhci1ndXR0ZXInOiB7XG4gICAgICAgIGFsaWduSXRlbXM6ICdmbGV4LWVuZCcsXG4gICAgICAgIHRyYW5zaXRpb25EdXJhdGlvbixcbiAgICAgICAgdHJhbnNpdGlvblByb3BlcnR5OiAnd2lkdGgnXG4gICAgICB9LFxuXG4gICAgICAnJiAud2ViY2hhdF9fY2Fyb3VzZWwtZmlsbXN0cmlwX19udWItcGFkJzoge1xuICAgICAgICB0cmFuc2l0aW9uRHVyYXRpb24sXG4gICAgICAgIHRyYW5zaXRpb25Qcm9wZXJ0eTogJ3dpZHRoJyxcbiAgICAgICAgd2lkdGg6IDBcbiAgICAgIH0sXG5cbiAgICAgICcmLndlYmNoYXRfX2Nhcm91c2VsLWZpbG1zdHJpcC0taGlkZS1hdmF0YXIsICYud2ViY2hhdF9fY2Fyb3VzZWwtZmlsbXN0cmlwLS1zaG93LWF2YXRhcic6IHtcbiAgICAgICAgJyYgLndlYmNoYXRfX2Nhcm91c2VsLWZpbG1zdHJpcF9fYXZhdGFyLWd1dHRlcic6IHtcbiAgICAgICAgICB3aWR0aDogYXZhdGFyU2l6ZVxuICAgICAgICB9XG4gICAgICB9LFxuXG4gICAgICAnJi53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXAtLWhpZGUtYXZhdGFyLCAmLndlYmNoYXRfX2Nhcm91c2VsLWZpbG1zdHJpcC0tc2hvdy1hdmF0YXIsICYud2ViY2hhdF9fY2Fyb3VzZWwtZmlsbXN0cmlwLS1oaWRlLW51YiwgJi53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXAtLXNob3ctbnViJzoge1xuICAgICAgICAnJiAud2ViY2hhdF9fY2Fyb3VzZWwtZmlsbXN0cmlwX19udWItcGFkJzoge1xuICAgICAgICAgIHdpZHRoOiBwYWRkaW5nUmVndWxhclxuICAgICAgICB9XG4gICAgICB9LFxuXG4gICAgICAnJjpub3QoLndlYmNoYXRfX2Nhcm91c2VsLWZpbG1zdHJpcC0tdG9wLWNhbGxvdXQpIC53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXBfX2F2YXRhci1ndXR0ZXInOiB7XG4gICAgICAgIGp1c3RpZnlDb250ZW50OiAnZmxleC1lbmQnXG4gICAgICB9LFxuXG4gICAgICAuLi5taXJyb3JTdHlsZSgnJi53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXAtLXJ0bCcsIHtcbiAgICAgICAgJyYgLndlYmNoYXRfX2Nhcm91c2VsLWZpbG1zdHJpcF9fYXZhdGFyLWd1dHRlcic6IHtcbiAgICAgICAgICBtYXJnaW5MZWZ0OiBwYWRkaW5nUmVndWxhclxuICAgICAgICB9LFxuXG4gICAgICAgICcmIC53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXBfX2F0dGFjaG1lbnRzJzoge1xuICAgICAgICAgIG1hcmdpbkxlZnQ6IC1wYWRkaW5nUmVndWxhclxuICAgICAgICB9LFxuXG4gICAgICAgICcmIC53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXBfX2F0dGFjaG1lbnQnOiB7XG4gICAgICAgICAgcGFkZGluZ0xlZnQ6IHBhZGRpbmdSZWd1bGFyXG4gICAgICAgIH0sXG5cbiAgICAgICAgJyYud2ViY2hhdF9fY2Fyb3VzZWwtZmlsbXN0cmlwLS1oaWRlLWF2YXRhciwgJi53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXAtLXNob3ctYXZhdGFyJzoge1xuICAgICAgICAgICcmIC53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXBfX2F0dGFjaG1lbnRzJzoge1xuICAgICAgICAgICAgbWFyZ2luTGVmdDogLShhdmF0YXJTaXplICsgcGFkZGluZ1JlZ3VsYXIgKiAyKVxuICAgICAgICAgIH0sXG5cbiAgICAgICAgICAnJiAud2ViY2hhdF9fY2Fyb3VzZWwtZmlsbXN0cmlwX19hdHRhY2htZW50OmZpcnN0LWNoaWxkJzoge1xuICAgICAgICAgICAgcGFkZGluZ0xlZnQ6IGF2YXRhclNpemUgKyBwYWRkaW5nUmVndWxhciAqIDJcbiAgICAgICAgICB9XG4gICAgICAgIH0sXG5cbiAgICAgICAgJyYud2ViY2hhdF9fY2Fyb3VzZWwtZmlsbXN0cmlwLS1oaWRlLW51YiwgJi53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXAtLXNob3ctbnViJzoge1xuICAgICAgICAgICcmOm5vdCgud2ViY2hhdF9fY2Fyb3VzZWwtZmlsbXN0cmlwLS1oaWRlLWF2YXRhci53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXAtLXNob3ctYXZhdGFyKSc6IHtcbiAgICAgICAgICAgICcmIC53ZWJjaGF0X19jYXJvdXNlbC1maWxtc3RyaXBfX2F0dGFjaG1lbnRzJzoge1xuICAgICAgICAgICAgICBtYXJnaW5MZWZ0OiAtcGFkZGluZ1JlZ3VsYXIgKiAyXG4gICAgICAgICAgICB9LFxuXG4gICAgICAgICAgICAnJiAud2ViY2hhdF9fY2Fyb3VzZWwtZmlsbXN0cmlwX19hdHRhY2htZW50OmZpcnN0LWNoaWxkJzoge1xuICAgICAgICAgICAgICBwYWRkaW5nTGVmdDogcGFkZGluZ1JlZ3VsYXIgKiAyXG4gICAgICAgICAgICB9XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9KVxuICAgIH1cbiAgfTtcbn1cbiJdfQ==