@findify/react-components
Version:
Findify react UI components
127 lines (116 loc) • 7.07 kB
JavaScript
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; }
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; }
/**
* @module components/common/Grid
*/
import { useMemo, cloneElement, Children, memo } from 'react';
import { Column as _Column, Placeholder } from "./Column";
import cx from 'classnames';
import useColumns from "../../../helpers/useColumns";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var styles = {
"root": "findify-components-common--grid",
"container": "findify-components-common--grid__container",
"column": "findify-components-common--grid__column",
"placeholder": "findify-components-common--grid__placeholder",
"column-auto": "findify-components-common--grid__column-auto",
"column-full": "findify-components-common--grid__column-full",
"column-fit": "findify-components-common--grid__column-fit",
"column-1": "findify-components-common--grid__column-1",
"column-2": "findify-components-common--grid__column-2",
"column-3": "findify-components-common--grid__column-3",
"column-4": "findify-components-common--grid__column-4",
"column-5": "findify-components-common--grid__column-5",
"column-6": "findify-components-common--grid__column-6",
"column-7": "findify-components-common--grid__column-7",
"column-8": "findify-components-common--grid__column-8",
"column-9": "findify-components-common--grid__column-9",
"column-10": "findify-components-common--grid__column-10",
"column-11": "findify-components-common--grid__column-11",
"column-12": "findify-components-common--grid__column-12",
"columnAuto": "findify-components-common--grid__column-auto",
"columnFull": "findify-components-common--grid__column-full",
"columnFit": "findify-components-common--grid__column-fit",
"column1": "findify-components-common--grid__column-1",
"column2": "findify-components-common--grid__column-2",
"column3": "findify-components-common--grid__column-3",
"column4": "findify-components-common--grid__column-4",
"column5": "findify-components-common--grid__column-5",
"column6": "findify-components-common--grid__column-6",
"column7": "findify-components-common--grid__column-7",
"column8": "findify-components-common--grid__column-8",
"column9": "findify-components-common--grid__column-9",
"column10": "findify-components-common--grid__column-10",
"column11": "findify-components-common--grid__column-11",
"column12": "findify-components-common--grid__column-12"
};
var usePlaceholders = function usePlaceholders(columns, gutter) {
if (columns.length !== 1 || isNaN(Number(columns[0]))) return null;
return useMemo(function () {
return Array.from(Array(Number(columns[0])).keys()).map(function (i) {
return /*#__PURE__*/_jsx(Placeholder, {
size: columns[0],
gutter: gutter
}, i);
});
}, [columns]);
};
export var Column = _Column;
export default /*#__PURE__*/memo(function (_ref) {
var _children = _ref.children,
_ref$theme = _ref.theme,
theme = _ref$theme === void 0 ? styles : _ref$theme,
_columns = _ref.columns,
_gutter = _ref.gutter,
className = _ref.className,
style = _ref.style,
_ref$wrapperComponent = _ref.wrapperComponent,
WrapperComponent = _ref$wrapperComponent === void 0 ? 'div' : _ref$wrapperComponent,
columnComponent = _ref.columnComponent,
baseColumnClass = _ref.columnClass,
rest = _objectWithoutProperties(_ref, ["children", "theme", "columns", "gutter", "className", "style", "wrapperComponent", "columnComponent", "columnClass"]);
var computedColumns = typeof _columns === 'string' ? _columns : useColumns(_columns);
var columns = computedColumns.split('|');
var gutter = _gutter && (isNaN(Number(_gutter)) ? _gutter : "".concat(_gutter, "px"));
var placeholders = usePlaceholders(columns, gutter);
var children = Children.map(_children, function (child, index) {
if (!child) return null;
var _child$props = child.props,
order = _child$props.order,
size = _child$props.size,
columnClass = _child$props.columnClass,
columnStyle = _child$props.columnStyle,
props = _objectWithoutProperties(_child$props, ["order", "size", "columnClass", "columnStyle"]);
if (child.type === Column) {
return /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
size: size || columns[index] || columns[0],
component: columnComponent,
key: child.key || index,
gutter: gutter
}));
}
return /*#__PURE__*/_jsx(Column, {
gutter: gutter,
order: order || index + 2,
size: size || columns[index] || columns[0],
className: columnClass || baseColumnClass,
style: columnStyle,
component: columnComponent,
children: /*#__PURE__*/cloneElement(child, props)
}, child.key || index);
});
return /*#__PURE__*/_jsxs(WrapperComponent, _objectSpread(_objectSpread({
className: cx(theme.root, className),
style: _objectSpread(_objectSpread({}, style), {}, {
marginLeft: "-".concat(gutter)
})
}, rest), {}, {
children: [children, placeholders]
}));
}, function (a, b) {
return a.children === b.children && a.columns === b.columns;
});