react-native-ios-list
Version:
iOS-styled List component
91 lines • 3.98 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.List = void 0;
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const utils_1 = require("../../utils");
const Caption_1 = require("../Caption");
const ListStyleProvider_1 = require("../ListStyleProvider");
const List = ({ inset = false, sideBar = false, hideDividers = false, header, footer, backgroundColor, containerBackgroundColor, headerColor = utils_1.colors.systemgray, footerColor = utils_1.colors.systemgray, dividerColor = utils_1.colors.systemgray3, style, children, }) => {
const listStyle = inset ? 'insetGrouped' : 'grouped';
return (react_1.default.createElement(ListStyleProvider_1.ListStyleProvider, { sideBar: sideBar, dividerColor: dividerColor },
react_1.default.createElement(react_native_1.View, { style: [
getOuterContainerStyles(listStyle),
containerBackgroundColor && {
backgroundColor: containerBackgroundColor,
},
] },
header && react_1.default.createElement(Caption_1.Caption, { caption: header, color: headerColor }),
react_1.default.createElement(react_native_1.View, { style: [
getContainerStyles(listStyle),
backgroundColor && { backgroundColor },
dividerColor && { borderColor: dividerColor },
style,
] }, react_1.Children.map(children, (child, index) => react_1.cloneElement(child, {
hideDivider: hideDividers || index === react_1.Children.count(children) - 1,
...child.props,
}))),
footer && react_1.default.createElement(Caption_1.Caption, { caption: footer, color: footerColor }))));
};
exports.List = List;
const getOuterContainerStyles = (type) => {
switch (type) {
case 'grouped':
return styles.groupedOuterContainer;
case 'insetGrouped':
return styles.insetGroupedOuterContainer;
default:
return styles.groupedOuterContainer;
}
};
const getContainerStyles = (type) => {
switch (type) {
case 'grouped':
return styles.groupedContainer;
case 'insetGrouped':
return styles.insetGroupedContainer;
default:
return styles.groupedContainer;
}
};
const styles = react_native_1.StyleSheet.create({
groupedOuterContainer: {
width: '100%',
backgroundColor: utils_1.colors.transparent,
},
insetGroupedOuterContainer: {
width: '90%',
backgroundColor: utils_1.colors.transparent,
alignSelf: 'center',
},
groupedContainer: {
backgroundColor: utils_1.colors.white,
borderBottomWidth: react_native_1.StyleSheet.hairlineWidth * 1.2,
borderTopWidth: react_native_1.StyleSheet.hairlineWidth * 1.2,
},
insetGroupedContainer: {
backgroundColor: utils_1.colors.white,
borderRadius: 10,
overflow: 'hidden',
},
});
//# sourceMappingURL=List.js.map