@whitemordred/react-native-bootstrap5
Version:
A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode
161 lines (160 loc) • 6.65 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (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 () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccordionBody = exports.AccordionHeader = exports.AccordionItem = exports.Accordion = exports.Collapse = void 0;
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const AccordionContext = react_1.default.createContext(null);
const Collapse = ({ children, isOpen, style, }) => {
const animatedHeight = react_1.default.useRef(new react_native_1.Animated.Value(isOpen ? 1 : 0)).current;
react_1.default.useEffect(() => {
react_native_1.Animated.timing(animatedHeight, {
toValue: isOpen ? 1 : 0,
duration: 300,
useNativeDriver: false,
}).start();
}, [isOpen, animatedHeight]);
return (<react_native_1.Animated.View style={[
{
overflow: 'hidden',
opacity: animatedHeight,
maxHeight: animatedHeight.interpolate({
inputRange: [0, 1],
outputRange: [0, 1000], // Adjust max height as needed
}),
},
style,
]}>
{children}
</react_native_1.Animated.View>);
};
exports.Collapse = Collapse;
const Accordion = ({ children, allowMultiple = false, style, }) => {
const [activeKeys, setActiveKeys] = (0, react_1.useState)([]);
const toggleItem = (key) => {
setActiveKeys((prev) => {
if (allowMultiple) {
return prev.includes(key)
? prev.filter((k) => k !== key)
: [...prev, key];
}
else {
return prev.includes(key) ? [] : [key];
}
});
};
const contextValue = {
activeKeys,
toggleItem,
allowMultiple,
};
return (<AccordionContext.Provider value={contextValue}>
<react_native_1.View style={style}>{children}</react_native_1.View>
</AccordionContext.Provider>);
};
exports.Accordion = Accordion;
const AccordionItem = ({ children, eventKey, style, }) => {
var _a;
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const context = react_1.default.useContext(AccordionContext);
const itemStyles = {
borderWidth: 1,
borderColor: ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[300]) || currentColors.secondary,
borderRadius: theme.borderRadius.base,
marginBottom: theme.spacing[2],
overflow: 'hidden',
};
const isOpen = (context === null || context === void 0 ? void 0 : context.activeKeys.includes(eventKey)) || false;
return (<react_native_1.View style={[itemStyles, style]}>
{react_1.default.Children.map(children, (child) => {
if (react_1.default.isValidElement(child)) {
return react_1.default.cloneElement(child, Object.assign(Object.assign({}, child.props), { eventKey, _isOpen: isOpen }));
}
return child;
})}
</react_native_1.View>);
};
exports.AccordionItem = AccordionItem;
const AccordionHeader = ({ children, eventKey, style, textStyle, _isOpen = false, }) => {
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const context = react_1.default.useContext(AccordionContext);
const headerStyles = {
paddingHorizontal: theme.spacing[3],
paddingVertical: theme.spacing[3],
backgroundColor: _isOpen
? currentColors.primary
: currentColors.light,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
};
const headerTextStyles = {
fontSize: theme.typography.fontSizes.base,
fontWeight: theme.typography.fontWeights.medium,
color: _isOpen ? currentColors.white : currentColors.dark,
flex: 1,
};
const handlePress = () => {
if (eventKey && context) {
context.toggleItem(eventKey);
}
};
return (<react_native_1.TouchableOpacity style={[headerStyles, style]} onPress={handlePress}>
{typeof children === 'string' ? (<react_native_1.Text style={[headerTextStyles, textStyle]}>{children}</react_native_1.Text>) : (children)}
<react_native_1.Text style={{
fontSize: theme.typography.fontSizes.lg,
color: _isOpen ? currentColors.white : currentColors.dark,
}}>
{_isOpen ? '−' : '+'}
</react_native_1.Text>
</react_native_1.TouchableOpacity>);
};
exports.AccordionHeader = AccordionHeader;
const AccordionBody = ({ children, style, _isOpen = false, }) => {
var _a;
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const bodyStyles = {
paddingHorizontal: theme.spacing[3],
paddingVertical: theme.spacing[3],
backgroundColor: currentColors.white,
borderTopWidth: 1,
borderTopColor: ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[300]) || currentColors.secondary,
};
return (<exports.Collapse isOpen={_isOpen} style={style} children={<react_native_1.View style={bodyStyles}>
{children}
</react_native_1.View>}/>);
};
exports.AccordionBody = AccordionBody;