react-tabs-css
Version:
>
201 lines (169 loc) • 7.03 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css = "\r\n .react-tabs-css-module_tabs__1_EUy {\r\n position: relative; \r\n clear: both;\r\n margin: 45px 3px 25px;\r\n background: white;\r\n \r\n min-height: 200px;\r\n \r\n \r\n }\r\n .react-tabs-css-module_tab__hnSh- {\r\n float: left;\r\n \r\n \r\n }\r\n .react-tabs-css-module_tab__hnSh- .react-tabs-css-module_tab_label__32fk8 {\r\n background: #fff; \r\n padding: 10px; \r\n border: 1px solid #ccc; \r\n margin-left: -1px; \r\n position: relative;\r\n left: 1px; \r\n top: -29px;\r\n transition: background-color .17s linear;\r\n cursor: pointer;\r\n }\r\n .react-tabs-css-module_tab__hnSh- .react-tabs-css-module_tab_input__3jTZs {\r\n display: none; \r\n }\r\n .react-tabs-css-module_content__1qcav {\r\n \r\n position: absolute;\r\n top: -1px;\r\n left: 0;\r\n background-color: white;\r\n right: 0;\r\n bottom: 0;\r\n height: max-content;\r\n transition: opacity .6s linear;\r\n opacity: 0;\r\n border:1px solid rgba(0,0,0,0.4);\r\n }\r\n .react-tabs-css-module_tab_input__3jTZs:checked ~ .react-tabs-css-module_tab_label__32fk8 {\r\n background-color: #111;\r\n color: white;\r\n border : 7px solid gray;\r\n border-bottom: 0;\r\n transform: translate(0,5px);\r\n z-index: 2;\r\n }\r\n .react-tabs-css-module_tab_input__3jTZs:checked ~ .react-tabs-css-module_tab_label__32fk8 ~ .react-tabs-css-module_content__1qcav {\r\n z-index: 1;\r\n opacity: 1;\r\n }";
var styles = { "tabs": "react-tabs-css-module_tabs__1_EUy", "tab": "react-tabs-css-module_tab__hnSh-", "tab_label": "react-tabs-css-module_tab_label__32fk8", "tab_input": "react-tabs-css-module_tab_input__3jTZs", "content": "react-tabs-css-module_content__1qcav" };
styleInject(css);
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
var inherits = function (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 possibleConstructorReturn = function (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;
};
var Tabs = function (_Component) {
inherits(Tabs, _Component);
function Tabs() {
classCallCheck(this, Tabs);
return possibleConstructorReturn(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).apply(this, arguments));
}
createClass(Tabs, [{
key: "render",
value: function render() {
var style = this.props.style;
return React__default.createElement(
"div",
{ style: { width: "100%", display: "block", height: "auto", overflowX: "auto", marginBottom: 25 } },
React__default.createElement(
"div",
{
className: styles.tabs,
style: _extends({}, style)
},
this.props.children
)
);
}
}]);
return Tabs;
}(React.Component);
var Tab = function (_Component) {
inherits(Tab, _Component);
function Tab() {
classCallCheck(this, Tab);
return possibleConstructorReturn(this, (Tab.__proto__ || Object.getPrototypeOf(Tab)).apply(this, arguments));
}
createClass(Tab, [{
key: "componentDidMount",
value: function componentDidMount() {
if (this.props.index === 0) {
this.myinput.checked = true;
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
index = _props.index,
group = _props.group,
title = _props.title,
style = _props.style,
active = _props.active;
return React__default.createElement(
"div",
{
className: styles.tab,
style: _extends({}, style)
},
React__default.createElement("input", {
type: "radio",
ref: function ref(input) {
return _this2.myinput = input;
},
id: "tab-" + index,
name: "group-" + group,
className: styles.tab_input,
defaultChecked: active
}),
React__default.createElement(
"label",
{
htmlFor: "tab-" + index,
className: styles.tab_label,
onClick: this.props.onClick
},
title
),
React__default.createElement(
"div",
{ className: styles.content },
this.props.children
)
);
}
}]);
return Tab;
}(React.Component);
exports.Tabs = Tabs;
exports.Tab = Tab;
//# sourceMappingURL=index.js.map