react-cm-ui
Version:
React UI for Healthy Church
321 lines (276 loc) • 12.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _lodash = require("lodash");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _constants = require("../../global/constants");
var _gridConstants = require("./gridConstants");
var _gridColumn = _interopRequireDefault(require("./gridColumn"));
var _gridRowDeprecated = _interopRequireDefault(require("./gridRowDeprecated"));
var _makeStyles = _interopRequireDefault(require("../../styles/makeStyles"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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; }
var propTypes = {
/**
* Defines the `align-content` style property.
* It's applied for all screen sizes.
*/
alignContent: _propTypes["default"].oneOf(['center', 'flex-end', 'flex-start', 'space-around', 'space-between', 'stretch']),
/**
* Defines the `align-items` style property.
* It's applied for all screen sizes.
*/
alignItems: _propTypes["default"].oneOf(['baseline', 'center', 'flex-end', 'flex-start', 'stretch']),
/**
* The content of the Grid
*/
children: _propTypes["default"].node,
/**
* Override or extend the styles applied to the component.
*/
classes: _propTypes["default"].shape({}),
/**
* Assign additional class names to Grid.
*/
className: _propTypes["default"].string,
/**
* Used for DOM testing. https://testing-library.com/docs/queries/bytestid/
*/
dataTestId: _propTypes["default"].string,
/**
* Defines the `flex-direction` style property.
* It is applied for all screen sizes.
*/
direction: _propTypes["default"].oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
/**
* The `id` of the Grid.
*/
id: _propTypes["default"].string,
/**
* Defines the `justify-content` style property.
* It is applied for all screen sizes.
*/
justifyContent: _propTypes["default"].oneOf(['center', 'flex-end', 'flex-start', 'space-around', 'space-between', 'space-evenly']),
/**
* Defines the space between the type `item` component.
* It can only be used on a type `container` component.
*/
spacing: _propTypes["default"].oneOf(_gridConstants.SPACINGS),
/**
* Override styles applied to the component.
*/
style: _propTypes["default"].shape({}),
/**
* Defines the `flex-wrap` style property.
* It's applied for all screen sizes.
*/
wrap: _propTypes["default"].oneOf(['nowrap', 'wrap-reverse', 'wrap']),
// ****
// NOTE: All props below are deprecated and should not be used.
// ****
/**
* Deprecated prop. Please use breakpoint props on the Grid.Column
*/
columns: _propTypes["default"].oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**
* Deprecated prop. Please use `classes` to override styles.
*/
textAlign: _propTypes["default"].oneOf(['center', 'left', 'right']),
/**
* Deprecated prop. Please use `classes` to override styles.
*/
verticalAlign: _propTypes["default"].oneOf(['bottom', 'middle', 'top'])
};
var defaultProps = {
alignContent: 'stretch',
alignItems: 'stretch',
children: null,
classes: null,
className: null,
dataTestId: "".concat(_constants.UI_CLASS_NAME, "-").concat(_constants.BEM_GRID),
direction: 'row',
id: null,
justifyContent: 'flex-start',
spacing: 0,
style: null,
wrap: 'wrap',
// ****
// NOTE: All props below are deprecated and should not be used.
// ****
columns: undefined,
textAlign: undefined,
verticalAlign: undefined
};
var useStyles = (0, _makeStyles["default"])(function (_ref) {
var spacing = _ref.spacing;
function getOffset(val) {
var div = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
var parse = parseFloat(val);
return "".concat(parse / div).concat(String(val).replace(String(parse), '') || 'px');
}
var gutters = {}; // eslint-disable-next-line consistent-return
(0, _lodash.forEach)(_gridConstants.SPACINGS, function (value) {
var _gutters$spacing$con;
var themeSpacing = spacing(value);
if (themeSpacing === 0) {
return null;
}
gutters["spacing-".concat(value)] = (_gutters$spacing$con = {
margin: "-".concat(getOffset(themeSpacing, 2)),
width: "calc(100% + ".concat(getOffset(themeSpacing), ")")
}, _defineProperty(_gutters$spacing$con, "& > .".concat(_constants.BEM_GRID_COLUMN), {
padding: getOffset(themeSpacing, 2)
}), _defineProperty(_gutters$spacing$con, "& > .".concat(_constants.BEM_GRID_ROW, " > .").concat(_constants.BEM_GRID_COLUMN), {
padding: getOffset(themeSpacing, 2)
}), _gutters$spacing$con);
});
return _objectSpread({
root: {
display: 'flex',
flexWrap: 'wrap',
width: '100%',
/**
* Deprecated classses
*/
'&$deprecatedTextAlignCenter': {
textAlign: 'center'
},
'&$deprecatedTextAlignLeft': {
textAlign: 'left'
},
'&$deprecatedTextAlignRight': {
textAlign: 'right'
},
'&$deprecatedVerticalAlignBottom': {
alignItems: 'flex-end'
},
'&$deprecatedVerticalAlignMiddle': {
alignItems: 'center'
},
'&$deprecatedVerticalAlignTop': {
alignItems: 'flex-start'
}
/**
* End of deprecated classes
*/
},
'alignContent-center': {
alignContent: 'center'
},
'alignContent-flexStart': {
alignContent: 'flex-start'
},
'alignContent-flexEnd': {
alignContent: 'flex-end'
},
'alignContent-spaceBetween': {
alignContent: 'space-between'
},
'alignContent-spaceAround': {
alignContent: 'space-around'
},
'alignItems-center': {
alignItems: 'center'
},
'alignItems-flexStart': {
alignItems: 'flex-start'
},
'alignItems-flexEnd': {
alignItems: 'flex-end'
},
'alignItems-baseline': {
alignItems: 'baseline'
},
/**
* Deprecated classses
*/
deprecatedColumns: _defineProperty({}, "& > .".concat(_constants.BEM_GRID_COLUMN, ", & > .").concat(_constants.BEM_GRID_ROW, " > .").concat(_constants.BEM_GRID_COLUMN), {
width: function width(_ref2) {
var columns = _ref2.columns;
return "".concat(1 / columns * 100, "%");
}
}),
deprecatedTextAlignCenter: {},
deprecatedTextAlignLeft: {},
deprecatedTextAlignRight: {},
deprecatedVerticalAlignBottom: {},
deprecatedVerticalAlignMiddle: {},
deprecatedVerticalAlignTop: {},
/**
* End of deprecated classses
*/
'direction-column': {
flexDirection: 'column'
},
'direction-columnReverse': {
flexDirection: 'column-reverse'
},
'direction-rowReverse': {
flexDirection: 'row-reverse'
},
'justifyContent-center': {
justifyContent: 'center'
},
'justifyContent-flexEnd': {
justifyContent: 'flex-end'
},
'justifyContent-spaceBetween': {
justifyContent: 'space-between'
},
'justifyContent-spaceAround': {
justifyContent: 'space-around'
},
'justifyContent-spaceEvenly': {
justifyContent: 'space-evenly'
},
'wrap-nowrap': {
flexWrap: 'nowrap'
},
'wrap-wrapReverse': {
flexWrap: 'wrap-reverse'
}
}, gutters);
});
/**
* The Grid layout responsivly adapts to screen size, aiding in dividing
* up content into their own regions.
*/
var Grid = /*#__PURE__*/_react["default"].forwardRef( // eslint-disable-next-line prefer-arrow-callback
function Grid(props, ref) {
var _ClassNames;
var alignContent = props.alignContent,
alignItems = props.alignItems,
children = props.children,
className = props.className,
dataTestId = props.dataTestId,
id = props.id,
direction = props.direction,
justifyContent = props.justifyContent,
spacing = props.spacing,
style = props.style,
wrap = props.wrap,
otherProps = _objectWithoutProperties(props, ["alignContent", "alignItems", "children", "className", "dataTestId", "id", "direction", "justifyContent", "spacing", "style", "wrap"]);
var classes = useStyles(props);
var rootClasses = (0, _classnames["default"])(_constants.UI_CLASS_NAME, _constants.BEM_GRID, classes.root, className, (_ClassNames = {}, _defineProperty(_ClassNames, classes["alignContent-".concat((0, _lodash.camelCase)(alignContent))], alignContent !== 'stretch'), _defineProperty(_ClassNames, classes["alignItems-".concat((0, _lodash.camelCase)(alignItems))], alignItems !== 'stretch'), _defineProperty(_ClassNames, classes["direction-".concat((0, _lodash.camelCase)(direction))], direction !== 'row'), _defineProperty(_ClassNames, classes["justifyContent-".concat((0, _lodash.camelCase)(justifyContent))], justifyContent !== 'flex-start'), _defineProperty(_ClassNames, classes["spacing-".concat(String(spacing))], spacing !== 0), _defineProperty(_ClassNames, classes["wrap-".concat((0, _lodash.camelCase)(wrap))], wrap !== 'wrap'), _defineProperty(_ClassNames, classes.deprecatedColumns, (0, _lodash.isNumber)(otherProps.columns)), _defineProperty(_ClassNames, classes.deprecatedTextAlignCenter, otherProps.textAlign === 'center'), _defineProperty(_ClassNames, classes.deprecatedTextAlignLeft, otherProps.textAlign === 'left'), _defineProperty(_ClassNames, classes.deprecatedTextAlignRight, otherProps.textAlign === 'right'), _defineProperty(_ClassNames, classes.deprecatedVerticalAlignBottom, otherProps.verticalAlign === 'bottom'), _defineProperty(_ClassNames, classes.deprecatedVerticalAlignMiddle, otherProps.verticalAlign === 'middle'), _defineProperty(_ClassNames, classes.deprecatedVerticalAlignTop, otherProps.verticalAlign === 'top'), _ClassNames));
return /*#__PURE__*/_react["default"].createElement("div", {
className: rootClasses,
"data-testid": dataTestId,
id: id,
ref: ref,
style: style
}, children);
});
Grid.Column = _gridColumn["default"];
Grid.RowDeprecated = _gridRowDeprecated["default"];
Grid.propTypes = propTypes;
Grid.defaultProps = defaultProps;
var _default = Grid;
exports["default"] = _default;