adam-ui-beta/dist/Button.js

adam ui(beta release)

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Button = void 0;

var _react = _interopRequireDefault(require("react"));

var _lodash = require("lodash");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _themes = require("./tools/themes");

var _tools = require("./tools");

var _templateObject;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var StyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  @keyframes clickBefore \n  {\n    0% { \n      transform: translate(-50%,-50%) scale(0);\n    }\n    100% { \n      transform: translate(-50%,-50%) scale(3);\n    }\n  }\n  position: relative;\n  box-sizing: border-box;\n  padding: 10px 0;\n  border-radius:50px ;\n  width: ", ";\n  font-size: ", ";\n  color: ", ";\n  border:2px solid ", ";\n  background-color:", ";\n  /* transition:.3s ; */\n  overflow:hidden ;\n  cursor: pointer;\n  span {\n    position:relative;\n    z-index:2 ;\n    pointer-events:none;\n  }\n  .pop {\n    opacity:0.5;\n    position:absolute;\n    top:0;\n    left:0;\n    width:50%;\n    padding-bottom:50% ;\n    transform: translate(-50%,-50%) scale(0);\n    border-radius:50px;\n    background-color: ", ";\n    z-index:1 ;\n    pointer-events:none ;\n  }\n  &:active .pop {\n    animation:clickBefore .2s linear;\n  }\n  &:hover {\n    border:2px solid ", ";\n  }\n"])), function (_ref) {
  var props = _ref.props;
  return props.width;
}, function (_ref2) {
  var props = _ref2.props;
  return props.fontSize;
}, function (_ref3) {
  var props = _ref3.props;
  return props.themeColor.btnColor;
}, function (_ref4) {
  var props = _ref4.props;
  return props.themeColor.btnBorder;
}, function (_ref5) {
  var props = _ref5.props;
  return props.themeColor.main;
}, function (_ref6) {
  var props = _ref6.props;
  return props.themeColor.btnBorder;
}, function (_ref7) {
  var props = _ref7.props;
  return props.themeColor.btnColor;
});

var Button = function Button(_ref8) {
  var _ref8$theme = _ref8.theme,
      theme = _ref8$theme === void 0 ? 'light' : _ref8$theme,
      _ref8$text = _ref8.text,
      text = _ref8$text === void 0 ? 'button' : _ref8$text,
      _ref8$width = _ref8.width,
      width = _ref8$width === void 0 ? '120px' : _ref8$width,
      _ref8$fontSize = _ref8.fontSize,
      fontSize = _ref8$fontSize === void 0 ? '16px' : _ref8$fontSize,
      _ref8$onClick = _ref8.onClick,
      _onClick = _ref8$onClick === void 0 ? _lodash.noop : _ref8$onClick;

  var buttonPopId = "ui-buttonPopId-".concat((0, _tools.randomMakeId)(6));
  return /*#__PURE__*/_react.default.createElement(StyledButton, {
    props: {
      themeColor: _themes.themes[theme] || _themes.themes.light,
      width: width,
      fontSize: fontSize
    },
    onMouseMove: function onMouseMove(e) {
      var rect = e.target.getBoundingClientRect();
      var xPosition = e.clientX - rect.x;
      var yPosition = e.clientY - rect.y;
      document.getElementById(buttonPopId).style.left = "".concat(xPosition, "px");
      document.getElementById(buttonPopId).style.top = "".concat(yPosition, "px");
    },
    onClick: function onClick() {
      return _onClick();
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    id: buttonPopId,
    className: "pop"
  }), /*#__PURE__*/_react.default.createElement("span", null, text));
};

exports.Button = Button;