@krowdy/kds-auth/esm/OnetapAuth/OnetapAuth.js

React components that implement Google's Material Design.

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React from 'react';
import { Backdrop, Card, CardContent, IconButton, makeStyles } from '@krowdy/kds-core';
import { Close as CloseIcon } from '@material-ui/icons';
import LoginSinglePage from '../LoginSinglePage';
import { useAuth } from '../utils';

var _ref3 = /*#__PURE__*/React.createElement(CloseIcon, {
  color: "disabled",
  fontSize: "small"
});

var OnetapAuth = function OnetapAuth(_ref) {
  var customMainText = _ref.customMainText;
  var classes = useStyles();

  var _ref2 = useAuth() || {},
      onClose = _ref2.onClose;

  return /*#__PURE__*/React.createElement(Backdrop, {
    className: classes.container,
    onClose: onClose,
    open: true
  }, /*#__PURE__*/React.createElement(Card, {
    className: classes.mainContainer
  }, /*#__PURE__*/React.createElement(IconButton, {
    className: classes.closeButton,
    onClick: onClose,
    size: "small"
  }, _ref3), /*#__PURE__*/React.createElement(CardContent, {
    className: classes.cardContent
  }, /*#__PURE__*/React.createElement(LoginSinglePage, {
    customMainText: customMainText
  }))));
};

var useStyles = makeStyles(function (_ref4) {
  var zIndex = _ref4.zIndex,
      spacing = _ref4.spacing,
      breakpoints = _ref4.breakpoints;
  return {
    cardContent: _defineProperty({
      padding: spacing(8, 1.5)
    }, breakpoints.up('md'), {
      '&:last-child': {
        paddingBottom: spacing(4)
      },
      padding: spacing(8, 12)
    }),
    closeButton: {
      position: 'absolute',
      right: 12,
      top: 12
    },
    closeIcon: {
      position: 'absolute',
      right: 4,
      top: 4
    },
    container: {
      height: '100vh',
      left: 0,
      position: 'fixed',
      top: 0,
      width: '100vw',
      zIndex: zIndex.modal + 1
    },
    containerWithoutBorder: {
      boxShadow: 'none',
      maxWidth: 576
    },
    iframe: {
      border: 'none',
      height: '100%',
      outline: 'hidden',
      width: '100%'
    },
    mainContainer: _defineProperty({
      height: 615,
      position: 'relative',
      width: 576
    }, breakpoints.down('767px'), {
      height: '100%',
      overflow: 'auto'
    })
  };
}, {
  name: 'OnetapAuth'
});
export default React.memo(OnetapAuth);