UNPKG

wix-style-react

Version:
189 lines (150 loc) • 8.15 kB
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 _class, _temp, _class2, _temp3, _class3, _temp4; 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; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } import React, { Component } from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; import styles from './Grid.scss'; var containerProps = { children: PropTypes.node, fluid: PropTypes.bool, className: PropTypes.string }; var RawContainer = function RawContainer(_ref) { var children = _ref.children, fluid = _ref.fluid, className = _ref.className; return React.createElement('div', { className: classNames(styles.rawContainer, className, _defineProperty({}, styles.fluidContainer, fluid)), children: children }); }; RawContainer.propTypes = containerProps; var Container = function Container(_ref2) { var children = _ref2.children, fluid = _ref2.fluid, className = _ref2.className; return React.createElement('div', { className: classNames(styles.wixContainer, className, _defineProperty({}, styles.fluidContainer, fluid)), children: children }); }; Container.propTypes = containerProps; var Columns = (_temp = _class = function (_Component) { _inherits(Columns, _Component); function Columns() { _classCallCheck(this, Columns); return _possibleConstructorReturn(this, (Columns.__proto__ || Object.getPrototypeOf(Columns)).apply(this, arguments)); } _createClass(Columns, [{ key: 'render', value: function render() { var _classNames3; var _props = this.props, className = _props.className, rtl = _props.rtl, stretchViewsVertically = _props.stretchViewsVertically, dataHook = _props.dataHook, children = _props.children; var rowClasses = classNames(styles.row, className, (_classNames3 = {}, _defineProperty(_classNames3, styles.rtl, rtl), _defineProperty(_classNames3, styles.stretch_vertically_row, stretchViewsVertically), _classNames3)); return React.createElement('div', { className: rowClasses, 'data-hook': dataHook, children: children }); } }]); return Columns; }(Component), _class.propTypes = { children: PropTypes.node, className: PropTypes.string, rtl: PropTypes.bool, stretchViewsVertically: PropTypes.bool, dataHook: PropTypes.string }, _class.defaultProps = { stretchViewsVertically: false }, _temp); var AutoAdjustedColumns = (_temp3 = _class2 = function (_Component2) { _inherits(AutoAdjustedColumns, _Component2); function AutoAdjustedColumns() { var _ref3; var _temp2, _this2, _ret; _classCallCheck(this, AutoAdjustedColumns); for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return _ret = (_temp2 = (_this2 = _possibleConstructorReturn(this, (_ref3 = AutoAdjustedColumns.__proto__ || Object.getPrototypeOf(AutoAdjustedColumns)).call.apply(_ref3, [this].concat(args))), _this2), _this2.DEFAULT_MAX_SPAN = 12, _temp2), _possibleConstructorReturn(_this2, _ret); } _createClass(AutoAdjustedColumns, [{ key: 'render', value: function render() { var children = this.props.children; var cols = Array.isArray(children) ? children : [children]; var spanSize = Math.floor(this.DEFAULT_MAX_SPAN / cols.length); return React.createElement( 'div', { className: classNames(styles.row, styles.flexContainer) }, cols.map(function (col, index) { return React.createElement(Col, { span: spanSize, key: index, children: col }); }) ); } }]); return AutoAdjustedColumns; }(Component), _class2.propTypes = { children: PropTypes.node }, _temp3); var Col = (_temp4 = _class3 = function (_Component3) { _inherits(Col, _Component3); function Col() { _classCallCheck(this, Col); return _possibleConstructorReturn(this, (Col.__proto__ || Object.getPrototypeOf(Col)).apply(this, arguments)); } _createClass(Col, [{ key: 'isVisibleHidden', value: function isVisibleHidden(str) { return str === 'hidden' || str === 'visible'; } }, { key: 'isLegalCol', value: function isLegalCol(numStr) { if (numStr && !this.isVisibleHidden(numStr)) { var num = Number(numStr); return Number.isInteger(num) && num > 0 && num <= 12; } return false; } }, { key: 'render', value: function render() { var _classNames4; var _props2 = this.props, children = _props2.children, className = _props2.className, span = _props2.span, rtl = _props2.rtl, xs = _props2.xs, sm = _props2.sm, md = _props2.md, lg = _props2.lg, xl = _props2.xl, dataHook = _props2.dataHook; var columnClasses = classNames(className, styles.col, (_classNames4 = {}, _defineProperty(_classNames4, styles.rtl, rtl), _defineProperty(_classNames4, styles['colXs' + span], this.isLegalCol(span)), _defineProperty(_classNames4, styles['colXs' + xs], this.isLegalCol(xs)), _defineProperty(_classNames4, styles['colSm' + sm], this.isLegalCol(sm)), _defineProperty(_classNames4, styles['colMd' + md], this.isLegalCol(md)), _defineProperty(_classNames4, styles['colLg' + lg], this.isLegalCol(lg)), _defineProperty(_classNames4, styles['colXl' + xl], this.isLegalCol(xl)), _defineProperty(_classNames4, styles[xs + 'Xs'], this.isVisibleHidden(xs)), _defineProperty(_classNames4, styles[sm + 'Sm'], this.isVisibleHidden(sm)), _defineProperty(_classNames4, styles[md + 'Md'], this.isVisibleHidden(md)), _defineProperty(_classNames4, styles[lg + 'Lg'], this.isVisibleHidden(lg)), _classNames4)); return React.createElement('div', { className: columnClasses, 'data-hook': dataHook, children: children }); } }]); return Col; }(Component), _class3.propTypes = { children: PropTypes.node, className: PropTypes.string, span: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), rtl: PropTypes.bool, xs: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), sm: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), md: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), lg: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), xl: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), dataHook: PropTypes.string }, _class3.defaultProps = { span: 12 }, _temp4); export { Container, RawContainer, Columns, Columns as Row, AutoAdjustedColumns, AutoAdjustedColumns as AutoAdjustedRow, Col };