codogo-react-widgets/lib/components/collapsable.js

Provides a unified way to access the styling of commonly used widgets across different apps

import _extends from "babel-runtime/helpers/extends";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import _taggedTemplateLiteral from "babel-runtime/helpers/taggedTemplateLiteral";

var _desc, _value, _class;

var _templateObject = _taggedTemplateLiteral([""], [""]),
    _templateObject2 = _taggedTemplateLiteral(["\n\tposition: relative;\n\tcursor: pointer;\n\tpadding-left: ", "em;\n\tmargin-bottom: ", "em;\n\n\t&:hover {\n\t\topacity: ", ";\n\t}\n\n\t&:before {\n\t\tmargin-top: 3px;\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tborder: ", "em solid transparent;\n\t\tborder-top-width: ", "em;\n\t\tborder-bottom-width: 0;\n\t\tborder-top-color: ", ";\n\t\theight: ", "em;\n\t\twidth: ", "em;\n\t\ttransform: rotate(", ");\n\t}\n"], ["\n\tposition: relative;\n\tcursor: pointer;\n\tpadding-left: ", "em;\n\tmargin-bottom: ", "em;\n\n\t&:hover {\n\t\topacity: ", ";\n\t}\n\n\t&:before {\n\t\tmargin-top: 3px;\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tborder: ", "em solid transparent;\n\t\tborder-top-width: ", "em;\n\t\tborder-bottom-width: 0;\n\t\tborder-top-color: ", ";\n\t\theight: ", "em;\n\t\twidth: ", "em;\n\t\ttransform: rotate(", ");\n\t}\n"]),
    _templateObject3 = _taggedTemplateLiteral(["\n\tbackground: ", ";\n\tborder-radius: ", ";\n\tborder: 1px solid ", ";\n\tdisplay: ", ";\n\tpadding: ", ";\n\n\t&.scrolled {\n\t\tbox-shadow: none;\n\t}\n"], ["\n\tbackground: ", ";\n\tborder-radius: ", ";\n\tborder: 1px solid ", ";\n\tdisplay: ", ";\n\tpadding: ", ";\n\n\t&.scrolled {\n\t\tbox-shadow: none;\n\t}\n"]);

function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
	var desc = {};
	Object['ke' + 'ys'](descriptor).forEach(function (key) {
		desc[key] = descriptor[key];
	});
	desc.enumerable = !!desc.enumerable;
	desc.configurable = !!desc.configurable;

	if ('value' in desc || desc.initializer) {
		desc.writable = true;
	}

	desc = decorators.slice().reverse().reduce(function (desc, decorator) {
		return decorator(target, property, desc) || desc;
	}, desc);

	if (context && desc.initializer !== void 0) {
		desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
		desc.initializer = undefined;
	}

	if (desc.initializer === void 0) {
		Object['define' + 'Property'](target, property, desc);
		desc = null;
	}

	return desc;
}

import React from "react";
import * as R from "ramda";
import styled from "styled-components";
import autobind from "autobind-decorator";

import { getArrowWidth, getBorderRadius, getColor, getPadding2, getPaddingHorizontal, getPaddingVertical } from "../getters";

// --------------------------------------------------

var getHalfArrowWidth = R.pipe(getArrowWidth, R.multiply(0.5));

// --------------------------------------------------

var Wrapper = styled.div(_templateObject);

var Trigger = styled.div(_templateObject2, getPaddingHorizontal, getPaddingVertical, R.path(["theme", "colors", "translucent"]), getHalfArrowWidth, getArrowWidth, getColor("darkgray"), getArrowWidth, getArrowWidth, function (props) {
	return props.active ? "0deg" : "-90deg";
});

var Content = styled.div(_templateObject3, getColor("lightgray"), getBorderRadius, getColor("gray"), function (props) {
	return props.active ? "block" : "none";
}, getPadding2);

// --------------------------------------------------

var Collapsable = (_class = function (_React$Component) {
	_inherits(Collapsable, _React$Component);

	function Collapsable(props) {
		_classCallCheck(this, Collapsable);

		var _this = _possibleConstructorReturn(this, (Collapsable.__proto__ || Object.getPrototypeOf(Collapsable)).call(this, props));

		_this.state = {
			active: false
		};
		return _this;
	}

	_createClass(Collapsable, [{
		key: "toggle",
		value: function toggle() {
			this.setState(function (pState) {
				return { active: !pState.active };
			});
		}
	}, {
		key: "render",
		value: function render() {
			return React.createElement(
				Wrapper,
				null,
				React.createElement(
					Trigger,
					_extends({ onClick: this.toggle }, this.state),
					this.props.label ? this.props.label : "Collapsed Content"
				),
				React.createElement(
					Content,
					this.state,
					this.props.children
				)
			);
		}
	}]);

	return Collapsable;
}(React.Component), (_applyDecoratedDescriptor(_class.prototype, "toggle", [autobind], Object.getOwnPropertyDescriptor(_class.prototype, "toggle"), _class.prototype)), _class);

// --------------------------------------------------

export default Collapsable;