react-custom-share
Version:
Social sharing buttons for React
229 lines (183 loc) • 10.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _templateObject = _taggedTemplateLiteral(['\n body {\n height: 100%;\n }\n'], ['\n body {\n height: 100%;\n }\n']),
_templateObject2 = _taggedTemplateLiteral(['\n display: flex;\n flex-direction: column;\n\n & .rcs-buttons {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: center;\n width: 100%;\n }\n\n & .rcs-buttons--fixed {\n flex-direction: column;\n left: 0;\n position: fixed;\n top: 50%;\n transform: translate(-101%, -50%);\n transform-origin: center;\n transition: 0.3s;\n width: 44px;\n\n & .rcs-button {\n margin-left: 0;\n margin-right: 0;\n }\n }\n\n & .rcs-header {\n font-family: \'-apple-system\', BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen,\n Ubuntu, Cantarell, \'Fira Sans\', \'Droid Sans\', \'Helvetica Neue\', sans-serif;\n font-size: 24px;\n line-height: 1;\n margin: 0 0 0.5em 0;\n text-align: center;\n }\n'], ['\n display: flex;\n flex-direction: column;\n\n & .rcs-buttons {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: center;\n width: 100%;\n }\n\n & .rcs-buttons--fixed {\n flex-direction: column;\n left: 0;\n position: fixed;\n top: 50%;\n transform: translate(-101%, -50%);\n transform-origin: center;\n transition: 0.3s;\n width: 44px;\n\n & .rcs-button {\n margin-left: 0;\n margin-right: 0;\n }\n }\n\n & .rcs-header {\n font-family: \'-apple-system\', BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen,\n Ubuntu, Cantarell, \'Fira Sans\', \'Droid Sans\', \'Helvetica Neue\', sans-serif;\n font-size: 24px;\n line-height: 1;\n margin: 0 0 0.5em 0;\n text-align: center;\n }\n']),
_templateObject3 = _taggedTemplateLiteral(['\n & .rcs-buttons--fixed {\n transform: ', ';\n }\n'], ['\n & .rcs-buttons--fixed {\n transform: ', ';\n }\n']);
var _emotion = require('emotion');
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _lodash = require('lodash.debounce');
var _lodash2 = _interopRequireDefault(_lodash);
var _ShareBlock = require('../ShareBlock');
var _ShareBlock2 = _interopRequireDefault(_ShareBlock);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
if (typeof window !== 'undefined') {
require('intersection-observer');
}
(0, _emotion.injectGlobal)(_templateObject);
var styles = (0, _emotion.css)(_templateObject2);
var dynamicStyles = function dynamicStyles(state) {
return (0, _emotion.css)(_templateObject3, state.fixedButtonsVisible ? 'translate(' + state.fixedButtonsTranslation + 'px, -50%)' : 'translate(-101%, -50%)');
};
var ShareBlockAside = function (_React$Component) {
_inherits(ShareBlockAside, _React$Component);
function ShareBlockAside() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, ShareBlockAside);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ShareBlockAside.__proto__ || Object.getPrototypeOf(ShareBlockAside)).call.apply(_ref, [this].concat(args))), _this), _this.timeouts = {}, _this.observerTargets = [], _this.shareBlock = _react2.default.createRef(), _this.state = {
fixedButtonsVisible: false,
fixedButtonsTranslation: -101
}, _this.setFixedButtonsTranslation = function () {
var documentWidth = document.documentElement.clientWidth;
var blockWidth = document.querySelector('.rcs-block').offsetWidth;
var freeSpace = (documentWidth - blockWidth) / 2;
var fixedButtonsWidth = document.querySelector('.rcs-buttons--fixed').offsetWidth;
var fixedButtonsTranslation = (freeSpace - fixedButtonsWidth) / 2;
var isFreeSpace = freeSpace > fixedButtonsWidth * 2;
_this.setState({
fixedButtonsTranslation: isFreeSpace ? fixedButtonsTranslation : -101
});
}, _this.setupObserver = function () {
var options = { rootMargin: '0px', threshold: [0.5] };
_this.observer = new IntersectionObserver(_this.handleIntersect, options);
// add inline buttons to targets
_this.observerTargets.push(document.querySelector('.rcs-buttons--inline'));
// add page header to targets, if selector is provided
var pageHeaderSelector = _this.props.pageHeaderSelector;
if (_this.props.pageHeaderSelector) {
_this.observerTargets.push(document.querySelector(pageHeaderSelector));
}
// observe the targets
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = _this.observerTargets[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var value = _step.value;
_this.observer.observe(value);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}, _this.handleIntersect = function (entries, observer) {
entries.forEach(function (entry) {
if (_this.state.fixedButtonsTranslation) {
_this.setState({
fixedButtonsVisible: entry.intersectionRatio > 0.5 ? false : true
});
}
});
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(ShareBlockAside, [{
key: 'componentDidMount',
value: function componentDidMount() {
if (typeof window !== 'undefined') {
this.setupObserver();
this.setFixedButtonsTranslation();
window.addEventListener('resize', (0, _lodash2.default)(this.setFixedButtonsTranslation, this.props.debounce), false);
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
// unobserve the targets
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = this.observerTargets[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var value = _step2.value;
this.observer.unobserve(value);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
className = _props.className,
header = _props.header,
htmlAttributes = _props.htmlAttributes;
var dynamicStylesStr = dynamicStyles(this.state);
return _react2.default.createElement(
'div',
{
ref: this.shareBlock,
className: (0, _emotion.cx)(styles, dynamicStylesStr, className, 'rcs-block'),
'data-testid': 'rcs-block'
},
header && _react2.default.createElement(
'p',
{ className: 'rcs-header' },
header
),
_react2.default.createElement(_ShareBlock2.default, _extends({}, this.props, {
className: 'rcs-buttons--inline',
htmlAttributes: _extends({}, htmlAttributes, {
'data-testid': 'rcs-inline-buttons'
})
})),
_react2.default.createElement(_ShareBlock2.default, _extends({}, this.props, {
className: 'rcs-buttons--fixed',
htmlAttributes: _extends({}, htmlAttributes, {
'data-testid': 'rcs-fixed-buttons'
})
}))
);
}
}]);
return ShareBlockAside;
}(_react2.default.Component);
ShareBlockAside.propTypes = {
header: _propTypes2.default.string,
className: _propTypes2.default.any,
htmlAttributes: _propTypes2.default.object,
debounce: _propTypes2.default.number,
pageHeaderSelector: _propTypes2.default.string
};
ShareBlockAside.defaultProps = {
className: '',
header: '',
htmlAttributes: {},
debounce: 250
};
exports.default = ShareBlockAside;