wix-style-react/dist/es/src/SocialButton/SocialButton.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import FacebookIcon from 'wix-ui-icons-common/system/SocialButtonFacebook';
import InstagramIcon from 'wix-ui-icons-common/system/SocialButtonInstagram';
import LinkedInIcon from 'wix-ui-icons-common/system/SocialButtonLinkedIn';
import PinterestIcon from 'wix-ui-icons-common/system/SocialButtonPinterest';
import YoutubeIcon from 'wix-ui-icons-common/system/SocialButtonYoutube';
import TwitterIcon from 'wix-ui-icons-common/system/SocialButtonTwitter';
import { ButtonNext } from "wix-ui-core/dist/es/src/components/button-next";
import Text from '../Text';
import { st, classes } from './SocialButton.st.css';
import { dataHooks } from './constants';
var iconMap = {
  facebook: FacebookIcon,
  instagram: InstagramIcon,
  twitter: TwitterIcon,
  linkedin: LinkedInIcon,
  pinterest: PinterestIcon,
  youtube: YoutubeIcon
};
var Icon = /*#__PURE__*/React.memo(function (props) {
  var icon = props.icon,
      disabled = props.disabled,
      dataHook = props.dataHook,
      text = props.text;
  var SocialIcon = iconMap[icon];
  return /*#__PURE__*/React.createElement(ButtonNext, {
    className: st(classes.icon, {
      type: icon,
      disabled: disabled,
      single: !text
    }),
    "data-hook": dataHook
  }, !!iconMap[icon] && /*#__PURE__*/React.createElement(SocialIcon, null));
});
/** Social networks share button with title */

var SocialButton = function SocialButton(_ref) {
  var dataHook = _ref.dataHook,
      text = _ref.text,
      onClick = _ref.onClick,
      icon = _ref.icon,
      disabled = _ref.disabled;
  return /*#__PURE__*/React.createElement("div", {
    className: st(classes.root, {
      disabled: disabled
    }),
    "data-hook": dataHook,
    onClick: disabled ? undefined : onClick
  }, /*#__PURE__*/React.createElement(Icon, {
    dataHook: dataHooks.socialIcon,
    text: text,
    icon: icon,
    disabled: disabled
  }), text && /*#__PURE__*/React.createElement(Text, {
    size: "small",
    dataHook: dataHooks.socialTitle,
    skin: disabled ? 'disabled' : 'standard'
  }, text));
};

SocialButton.propTypes = {
  /** hook for testing purposes */
  dataHook: PropTypes.string,

  /** Text for the button */
  text: PropTypes.node,

  /** Click handler */
  onClick: PropTypes.func,

  /** Share button social network type */
  icon: PropTypes.oneOf(['facebook', 'instagram', 'twitter', 'linkedin', 'pinterest', 'youtube']),

  /** Disable button */
  disabled: PropTypes.bool
};
SocialButton.displayName = 'SocialButton';
export default SocialButton;