cpui-components/lib/components/Button/Button.js

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _reactRouterDom = require("react-router-dom");

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _blacklist = require("blacklist");

var _blacklist2 = _interopRequireDefault(_blacklist);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var BUTTON_SIZES = ["sm", "small"];

var BUTTON_TYPES = ["cancel", "caution", "default", "default-primary", "default-success", "default-warning", "default-danger", "filters", "hollow-primary", "hollow-success", "hollow-warning", "hollow-danger", "primary", "success", "warning", "danger", "link", "link-text", "link-primary", "link-success", "link-warning", "link-danger", "link-cancel", "link-delete", "remove"];

/**
 * The standard CivicPlus button.
 */

var Button = exports.Button = function (_Component) {
	_inherits(Button, _Component);

	function Button() {
		var _ref;

		var _temp, _this, _ret;

		_classCallCheck(this, Button);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
			args[_key] = arguments[_key];
		}

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.render = function () {
			// classes
			var componentClass = (0, _classnames2.default)({
				"cp-Btn": !_this.props.noStyles,
				"cp-Btn--nonStyled": _this.props.noStyles,
				"cp-Btn--block": _this.props.block,
				"is-active": _this.props.isActive,
				"cp-Btn--small": _this.props.size === "sm" || _this.props.size === "small"
			}, _this.props.className);

			// props
			var props = (0, _blacklist2.default)(_this.props, "type", "size", "component", "className", "submit", "noStyles");
			props.className = componentClass;

			if (_this.props.component) {
				return _react2.default.cloneElement(_this.props.component, props);
			}

			if (_this.props.type) {
				props.className += " cp-Btn--" + _this.props.type;
			}

			var tag = "button";
			props.type = _this.props.submit ? "submit" : "button";

			if (props.href) {
				tag = "a";

				if (_this.props.newWindow) {
					props.target = "_blank";
					props.rel = "noopener noreferrer";
				}

				delete props.newWindow;
				delete props.type;
			}

			if (_this.props.linkTo) {
				props.to = props.linkTo;
				delete props.linkTo;
				return _react2.default.createElement(
					_reactRouterDom.Link,
					props,
					_this.props.children
				);
			}

			return _react2.default.createElement(tag, props, _this.props.children);
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	return Button;
}(_react.Component);

Button.propTypes = {
	/** Determines whether or not the button is of display type "block." */
	block: _propTypes2.default.bool,
	/** Adds to the button classes. */
	className: _propTypes2.default.string,
	/** Necessary to specify that this component extends the standard button element. */
	component: _propTypes2.default.element,
	/** Include if the button is a link. This will also change the element to an anchor. */
	href: _propTypes2.default.string,
	/** Adds is-active class to the button in case there are styles associated with it. */
	isActive: _propTypes2.default.bool,
	/** Specifies what size the button is. */
	size: _propTypes2.default.oneOf(BUTTON_SIZES),
	/** Determines whether the button is a submit input. */
	submit: _propTypes2.default.bool,
	/** Specifies button type for use in styling. The type is added as another class along with .cp-Btn (e.g. .cp-Btn--primary). */
	type: _propTypes2.default.oneOf(BUTTON_TYPES),
	/** Set this property if you want the button to have no styles at all. */
	noStyles: _propTypes2.default.bool,
	/** Set this property if you uwant the button to have a unique id */
	id: _propTypes2.default.string,
	/** Set this property to true if you want the href to open in a new tab */
	newWindow: _propTypes2.default.bool,
	/** Set this property to use React Link instead of refreshing the page with an a-href. */
	linkTo: _propTypes2.default.string
};
Button.defaultProps = {
	type: "default"
};
exports.default = Button;