@krowdy/kds-auth/esm/LoginSinglePage/FacebookButton.js

React components that implement Google's Material Design.

import React, { useCallback } from 'react';
import FacebookLogin from 'react-facebook-login';
import { IMAGES_SOCIAL, METHODS_SESSION } from './constants';
import { makeStyles } from '@krowdy/kds-core';
import { useAuth } from '../utils';

var FacebookButton = function FacebookButton() {
  var classes = useStyles();

  var _useAuth = useAuth(),
      _useAuth$facebookCred = _useAuth.facebookCredentials;

  _useAuth$facebookCred = _useAuth$facebookCred === void 0 ? {} : _useAuth$facebookCred;
  var clientId = _useAuth$facebookCred.clientId,
      validateSocialNetwork = _useAuth.validateSocialNetwork;

  var _handleSuccess = useCallback(function (response) {
    if (response && response.accessToken) {
      var tokenId = response.accessToken;
      validateSocialNetwork('facebook', {
        method: METHODS_SESSION['facebook'],
        tokenId: tokenId
      });
    }
  }, [validateSocialNetwork]);

  return clientId ? /*#__PURE__*/React.createElement(FacebookLogin, {
    appId: clientId,
    callback: _handleSuccess,
    cssClass: classes.buttonFb,
    fields: "name,email,picture",
    icon: /*#__PURE__*/React.createElement("img", {
      alt: "facebookSocial",
      className: classes.icon,
      src: IMAGES_SOCIAL['facebook']
    }),
    textButton: "Ingresa con Facebook"
  }) : null;
};

var useStyles = makeStyles(function (_ref) {
  var spacing = _ref.spacing,
      palette = _ref.palette;
  return {
    buttonFb: {
      '&:hover': {
        background: '#4A6BB3'
      },
      background: '#4A6BB3',
      border: 'none',
      borderRadius: spacing(.5),
      color: palette.common.white,
      cursor: 'pointer',
      fontSize: 14,
      height: 40,
      marginTop: spacing(2),
      width: '100%'
    },
    icon: {
      marginRight: spacing(2)
    }
  };
}, {
  name: 'FacebookButton'
});
export default React.memo(FacebookButton);