@onesy/ui-react
Version:
UI for React
145 lines (144 loc) • 6.44 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "version", "gap", "rowGap", "columnGap", "columns", "Component", "className", "style", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => ({
root: {
listStyleType: 'none'
},
version_standard: {
display: 'grid'
},
version_quilted: {
display: 'grid'
},
version_vowen: {
display: 'grid',
'& > *:nth-of-type(2n)': {
height: '70%',
overflow: 'hidden',
alignSelf: 'center'
}
},
version_masonry: {
display: 'block'
}
}), {
name: 'onesy-ImageList'
});
const ImageList = props_ => {
var _theme$ui, _theme$ui2;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyImageList) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const {
classes
} = useStyle();
const {
ref,
version = 'standard',
gap: gap_,
rowGap: rowGap_,
columnGap: columnGap_,
columns: columns_,
Component = 'ul',
className,
style,
children
} = props,
otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
const other = otherProps;
const refs = {
root: _react.default.useRef(undefined)
};
const keys = _react.default.useMemo(() => {
const result = [];
const items = [gap_, rowGap_, columnGap_, columns_];
items.forEach(item => {
if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
});
return (0, _utils.unique)(result);
}, [gap_, rowGap_, columnGap_, columns_]);
const breakpoints = {};
keys.forEach(key_1 => {
breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
element: refs.root.current
});
});
const gap = (0, _utils2.valueBreakpoints)(gap_, 0.5, breakpoints, theme);
const rowGap = (0, _utils2.valueBreakpoints)(rowGap_, undefined, breakpoints, theme);
const columnGap = (0, _utils2.valueBreakpoints)(columnGap_, undefined, breakpoints, theme);
const columns = (0, _utils2.valueBreakpoints)(columns_, {
400: 1,
500: 2,
700: 3,
1100: 4,
1400: 5,
1700: 6,
2000: 7,
default: 4
}, breakpoints, theme);
const styles = {
root: {},
item: {}
};
if (['standard', 'quilted', 'vowen'].includes(version)) {
styles.root.gridTemplateColumns = `repeat(${columns}, 1fr)`;
}
if (version === 'masonry') styles.root.columnCount = columns;
if (rowGap !== undefined || columnGap !== undefined) {
if (rowGap !== undefined) {
styles.root.rowGap = `${rowGap}px`;
if (version === 'masonry') styles.item.marginBottom = `${rowGap * theme.space.unit}px`;
}
if (columnGap !== undefined) styles.root.columnGap = `${columnGap * theme.space.unit}px`;
} else {
styles.root.gap = `${gap * theme.space.unit}px`;
if (version === 'masonry') styles.item.marginBottom = `${gap * theme.space.unit}px`;
}
const Wrapper = version !== 'masonry' ? _react.default.Fragment : 'div';
const WrapperProps = {};
if (version === 'masonry') {
WrapperProps.ref = item_0 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
}
refs.root.current = item_0;
};
WrapperProps.style = _objectSpread({}, style);
other.style = _objectSpread({}, styles.root);
} else {
other.ref = item_1 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_1);else ref.current = item_1;
}
refs.root.current = item_1;
};
other.style = _objectSpread(_objectSpread({}, styles.root), style);
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, _objectSpread(_objectSpread({}, WrapperProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread({
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageList', theme) && [`onesy-ImageList-root`], className, classes.root, classes[`version_${version}`]])
}, other), {}, {
children: _react.default.Children.toArray(children).map((item_2, index) => (/*#__PURE__*/_react.default.cloneElement(item_2, {
key: index,
version,
style: _objectSpread(_objectSpread({}, styles.item), item_2.props.style)
})))
}))
}));
};
ImageList.displayName = 'onesy-ImageList';
var _default = exports.default = ImageList;