@stokr/components-library
Version:
STOKR - Components Library
232 lines (231 loc) • 10.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.socialSvg = exports.default = exports.ShareButton = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _theme = _interopRequireDefault(require("../../styles/theme"));
var _Facebook_Logo = _interopRequireDefault(require("../../static/images/social/Facebook_Logo.png"));
var _LIInBug = _interopRequireDefault(require("../../static/images/social/LI-In-Bug.png"));
var _XLogoBlack = _interopRequireDefault(require("../../static/images/social/X-logo-black.png"));
var _TelegramLogo = _interopRequireDefault(require("../../static/images/social/Telegram-Logo.png"));
var _Button = _interopRequireDefault(require("../Button/Button.styles"));
var _Icon = _interopRequireDefault(require("../Icon/Icon2"));
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); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const duration = 700;
const Outer = _styledComponents.default.div.withConfig({
displayName: "ShareButton__Outer",
componentId: "sc-1yaoiai-0"
})(["display:inline-block;height:40px;position:relative;z-index:0;a{svg{fill:", " !important;transition:all 0.3s;}}a:hover{svg{fill:", " !important;}}"], _theme.default.cGray, _theme.default.cRed);
const rightCss = (0, _styledComponents.css)(["right:auto;left:-10px;padding-left:30px;padding-right:0;border-radius:5px 25px 25px 5px;border-left:0;border-right:1px solid ", ";"], _theme.default.cGray);
const openHelper = _ref => {
let {
right
} = _ref;
return right && rightCss;
};
const buttonsWrapperRightCss = (0, _styledComponents.css)(["right:auto;left:20px;"]);
const buttonsWrapperHelper = _ref2 => {
let {
right
} = _ref2;
return right && buttonsWrapperRightCss;
};
const ButtonsWrapper = _styledComponents.default.div.withConfig({
displayName: "ShareButton__ButtonsWrapper",
componentId: "sc-1yaoiai-1"
})(["position:absolute;top:50%;transform:translateY(-50%);overflow:hidden;width:", ";height:50px;right:20px;transition:all ", "ms ease-out;", ";"], _ref3 => {
let {
open
} = _ref3;
return open ? '300px' : 0;
}, duration, buttonsWrapperHelper);
const Buttons = _styledComponents.default.div.withConfig({
displayName: "ShareButton__Buttons",
componentId: "sc-1yaoiai-2"
})(["display:flex;position:absolute;width:auto;white-space:nowrap;top:50%;right:0;transform:translateY(-50%);padding-right:20px;border-right:0;z-index:-2;overflow:hidden;transition-property:left,right,opacity;transition-duration:0.3s;", " ", "{margin-right:1px;border-radius:0;transition-property:color,background !important;position:relative;z-index:1;&:not(:first-child){border-left:1px solid ", " !important;}&:hover{color:", " !important;background:transparent !important;}&:focus,&:active{color:", " !important;border-left-color:transparent;&::before{opacity:1;}&::after{border-radius:50%;background:", " !important;}+ ", "::before{opacity:1;}}&::before{content:'';display:block;position:absolute;left:-1px;top:1px;bottom:1px;border-left:1px solid ", ";border-left-color:", ";z-index:1;opacity:0;transition:opacity 0.3s;}&::after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;z-index:-1;border-radius:30%;transition:all 0.3s;}}svg,img{width:24px;height:24px;}&::after{position:absolute;content:'';border:1px solid ", ";border-right:none;border-radius:25px 0 0 25px;background:", ";top:0;left:0;height:40px;width:100%;z-index:-1;", ";}", "{color:", ";}", ""], openHelper, _Button.default, _theme.default.cGrayLight, _theme.default.cRed, _theme.default.cWhite, _theme.default.cRed, _Button.default, _theme.default.cWhite, _ref4 => {
let {
inverted
} = _ref4;
return inverted ? _theme.default.cBlue : _theme.default.cWhite;
}, _theme.default.cGrayLight, _theme.default.cWhite, _ref5 => {
let {
inverted
} = _ref5;
return inverted && " background: ".concat(_theme.default.cBlue, ";");
}, _Button.default, _theme.default.cGray, props => !props.inverted && "\n & > a:hover {\n background: ".concat(_theme.default.cGray, ";\n }\n "));
const activeCss = (0, _styledComponents.css)(["color:", ";background:", ";"], _theme.default.cWhite, _theme.default.cRed);
const activeHelper = _ref6 => {
let {
active
} = _ref6;
return active && activeCss;
};
const ShareButtonStyled = (0, _styledComponents.default)(_Button.default).withConfig({
displayName: "ShareButton__ShareButtonStyled",
componentId: "sc-1yaoiai-3"
})(["z-index:10;color:", ";background:", ";border-color:", ";", ";&:hover{color:", ";background:", ";}svg,img{transition:unset !important;}> div{line-height:0;padding-left:2px;}"], _ref7 => {
let {
startcolor
} = _ref7;
return startcolor || _theme.default.cRed;
}, _ref8 => {
let {
forceTransparency
} = _ref8;
return forceTransparency ? 'transparent' : _theme.default.cWhite;
}, _ref9 => {
let {
forceTransparency
} = _ref9;
return forceTransparency ? _theme.default.cWhite : _theme.default.cGrayLight;
}, activeHelper, _theme.default.cWhite, _theme.default.cRed);
// parse class for <Icon />
const parseButtonClass = input => {
let isFacebook = input.includes('facebook.');
if (isFacebook) return socialSvg.facebook;
let isLinkedIn = input.includes('linkedin.');
if (isLinkedIn) return socialSvg.linkedin;
let isTwitter = input.includes('twitter.');
if (isTwitter) return socialSvg.twitter;
let isTelegram = input.includes('telegram.');
if (isTelegram) return socialSvg.telegram;
// let isMedium = input.includes('medium.')
// if (isMedium) return 'Medium'
// let isYouTube = input.includes('youtube.')
// if (isYouTube) return 'Youtube'
return '';
};
const socialSvg = exports.socialSvg = {
linkedin: /*#__PURE__*/_react.default.createElement("img", {
src: _LIInBug.default,
alt: "Linkedin Logo",
style: {
padding: 1
}
}),
//instagram: <SocialInstagram />,
twitter: /*#__PURE__*/_react.default.createElement("img", {
src: _XLogoBlack.default,
alt: "X Logo",
style: {
padding: 2
}
}),
facebook: /*#__PURE__*/_react.default.createElement("img", {
src: _Facebook_Logo.default,
alt: "Facebook Logo"
}),
telegram: /*#__PURE__*/_react.default.createElement("img", {
src: _TelegramLogo.default,
alt: "Telegram Logo"
})
//medium: <SocialMedium />,
// youtube: <img src={YtLogo} alt="Youtube Logo" />,
// reddit: <SocialReddit />,
};
class ShareButton extends _react.Component {
constructor() {
super(...arguments);
_defineProperty(this, "state", {
open: false,
activeShareButton: false //this state manages share button color and open state (used to keep share button red until the transition finishes)
});
_defineProperty(this, "node", /*#__PURE__*/_react.default.createRef());
_defineProperty(this, "handleOpen", () => this.setState(_ref0 => {
let {
open,
activeShareButton
} = _ref0;
return {
open: !open,
activeShareButton: !activeShareButton
};
}));
_defineProperty(this, "handleClickOutside", event => {
const {
current
} = this.node;
if (current && !current.contains(event.target)) {
this.setState({
open: false
});
setTimeout(() => {
this.setState({
activeShareButton: false
});
}, duration);
}
});
}
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside);
}
render() {
const {
forceTransparency,
inverted,
startcolor,
right,
blockContent
} = this.props;
const {
open,
activeShareButton
} = this.state;
return /*#__PURE__*/_react.default.createElement(Outer, {
ref: this.node
}, /*#__PURE__*/_react.default.createElement(ShareButtonStyled, {
onClick: this.handleOpen,
color: "transparent",
inverted: inverted,
active: activeShareButton,
startcolor: startcolor,
forceTransparency: forceTransparency,
icononly: true,
id: "share-button"
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
name: "Share"
})), /*#__PURE__*/_react.default.createElement(ButtonsWrapper, {
open: open,
right: right,
inverted: inverted
}, /*#__PURE__*/_react.default.createElement(Buttons, {
right: right,
inverted: inverted,
onClick: () => setTimeout(this.handleOpen, 550)
}, blockContent.socialMedia && blockContent.socialMedia.length > 0 && blockContent.socialMedia.map((item, index) => {
if (item.uri !== '' && item.label.includes('Share')) return /*#__PURE__*/_react.default.createElement(_Button.default, {
key: index,
icononly: true,
noborder: true,
color: "transparent",
as: "a",
href: item.uri,
target: "_blank",
rel: "noopener noreferrer"
}, parseButtonClass(item.uri));
return '';
}))));
}
}
exports.ShareButton = ShareButton;
_defineProperty(ShareButton, "propTypes", {
inverted: _propTypes.default.bool,
startcolor: _propTypes.default.string,
right: _propTypes.default.bool,
forceTransparency: _propTypes.default.bool
});
_defineProperty(ShareButton, "defaultProps", {
startcolor: _theme.default.cRed
});
var _default = exports.default = ShareButton;