Page MenuHomec4science
Files F124490474

ThemeProvider.js
No OneTemporary
Actions

File Metadata

Created
Sat, Aug 2, 20:09

ThemeProvider.js
View Options

import * as React from 'react';
import { useContext, useMemo } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
export const DEFAULT_BREAKPOINTS = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
export const DEFAULT_MIN_BREAKPOINT = 'xs';
const ThemeContext = /*#__PURE__*/React.createContext({
prefixes: {},
breakpoints: DEFAULT_BREAKPOINTS,
minBreakpoint: DEFAULT_MIN_BREAKPOINT
});
const {
Consumer,
Provider
} = ThemeContext;
function ThemeProvider({
prefixes = {},
breakpoints = DEFAULT_BREAKPOINTS,
minBreakpoint = DEFAULT_MIN_BREAKPOINT,
dir,
children
}) {
const contextValue = useMemo(() => ({
prefixes: {
...prefixes
},
breakpoints,
minBreakpoint,
dir
}), [prefixes, breakpoints, minBreakpoint, dir]);
return /*#__PURE__*/_jsx(Provider, {
value: contextValue,
children: children
});
}
export function useBootstrapPrefix(prefix, defaultPrefix) {
const {
prefixes
} = useContext(ThemeContext);
return prefix || prefixes[defaultPrefix] || defaultPrefix;
}
export function useBootstrapBreakpoints() {
const {
breakpoints
} = useContext(ThemeContext);
return breakpoints;
}
export function useBootstrapMinBreakpoint() {
const {
minBreakpoint
} = useContext(ThemeContext);
return minBreakpoint;
}
export function useIsRTL() {
const {
dir
} = useContext(ThemeContext);
return dir === 'rtl';
}
function createBootstrapComponent(Component, opts) {
if (typeof opts === 'string') opts = {
prefix: opts
};
const isClassy = Component.prototype && Component.prototype.isReactComponent;
// If it's a functional component make sure we don't break it with a ref
const {
prefix,
forwardRefAs = isClassy ? 'ref' : 'innerRef'
} = opts;
const Wrapped = /*#__PURE__*/React.forwardRef(({
...props
}, ref) => {
props[forwardRefAs] = ref;
const bsPrefix = useBootstrapPrefix(props.bsPrefix, prefix);
return /*#__PURE__*/_jsx(Component, {
...props,
bsPrefix: bsPrefix
});
});
Wrapped.displayName = `Bootstrap(${Component.displayName || Component.name})`;
return Wrapped;
}
export { createBootstrapComponent, Consumer as ThemeConsumer };
export default ThemeProvider;

Event Timeline

c4science · Help