@confi/conflux-react-ui-test-package/esm/modal/modal-action.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import withDefaults from '../utils/with-defaults';
import useTheme from '../styles/use-theme';
import { useModalContext } from './modal-context';
var defaultProps = {
  className: '',
  passive: false,
  disabled: false
};

var ModalAction = function ModalAction(_ref) {
  var className = _ref.className,
      children = _ref.children,
      onClick = _ref.onClick,
      passive = _ref.passive,
      disabled = _ref.disabled,
      props = _objectWithoutProperties(_ref, ["className", "children", "onClick", "passive", "disabled"]);

  var theme = useTheme();

  var _useModalContext = useModalContext(),
      _close = _useModalContext.close;

  var clickHandler = function clickHandler(event) {
    if (disabled) return;
    var actionEvent = Object.assign({}, event, {
      close: function close() {
        return _close && _close();
      }
    });
    onClick && onClick(actionEvent);
  };

  var color = useMemo(function () {
    return passive || disabled ? theme.palette.accents_5 : theme.palette.foreground;
  }, [theme.palette, passive, disabled]);
  var bgColor = useMemo(function () {
    return disabled ? theme.palette.accents_1 : theme.palette.background;
  }, [theme.palette, disabled]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", _extends({
    onClick: clickHandler
  }, props, {
    className: _JSXStyle.dynamic([["27040490", [color, bgColor, disabled ? 'not-allowed' : 'pointer', disabled ? color : theme.palette.foreground, disabled ? bgColor : theme.palette.accents_1]]]) + " " + (props && props.className != null && props.className || className || "")
  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "27040490",
    dynamic: [color, bgColor, disabled ? 'not-allowed' : 'pointer', disabled ? color : theme.palette.foreground, disabled ? bgColor : theme.palette.accents_1]
  }, "button.__jsx-style-dynamic-selector{font-size:0.75rem;text-transform:uppercase;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;outline:none;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:all 200ms ease-in-out 0s;transition:all 200ms ease-in-out 0s;border:none;color:".concat(color, ";background-color:").concat(bgColor, ";cursor:").concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-flex:1;-ms-flex:1;flex:1;}button.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? color : theme.palette.foreground, ";background-color:").concat(disabled ? bgColor : theme.palette.accents_1, ";}")));
};

export default withDefaults(ModalAction, defaultProps);