@kirz/react-native-toolkit
Version:
Toolkit to speed up React Native development
111 lines (110 loc) • 5.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ThemeContext = void 0;
exports.ThemeProvider = ThemeProvider;
var _color = _interopRequireDefault(require("color"));
var _fontColorContrast = _interopRequireDefault(require("font-color-contrast"));
var _react = _interopRequireWildcard(require("react"));
var _reactNativeReanimated = require("react-native-reanimated");
var _useColorScheme = require("../hooks/useColorScheme");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const ThemeContext = /*#__PURE__*/(0, _react.createContext)({});
exports.ThemeContext = ThemeContext;
function ThemeProvider(_ref) {
let {
children,
theme
} = _ref;
const {
colorScheme
} = (0, _useColorScheme.useColorScheme)();
const skeletonValue = (0, _reactNativeReanimated.useSharedValue)(0);
const computedTheme = (0, _react.useMemo)(() => {
// @ts-ignore
const colorsDef = theme.colors;
const colors = Object.fromEntries(Object.entries(colorsDef).map(_ref2 => {
let [name, color] = _ref2;
if (typeof color === 'object' && typeof color !== 'function') {
// @ts-ignore
return [name, color[colorScheme]];
}
return [name, color];
}));
const typographyDef = theme.typography;
const typography = Object.fromEntries(Object.entries(typographyDef).map(_ref3 => {
let [name, textStyle] = _ref3;
if (textStyle.color && typeof textStyle.color === 'object') {
return [name, {
...textStyle,
color: textStyle.color[colorScheme]
}];
}
return [name, textStyle];
}));
const tempTheme = {
...theme,
colors: colors,
typography,
getContrastColor: color => (0, _fontColorContrast.default)(color) === '#ffffff' ? 'white' : 'black',
parseColor: (obj, model) => new _color.default(obj, model)
};
const finalColors = Object.fromEntries(Object.entries(colors).map(_ref4 => {
let [name, color] = _ref4;
if (typeof color === 'function') {
// @ts-ignore
return [name, color(tempTheme)];
}
return [name, color];
}));
return {
...tempTheme,
colors: finalColors,
getContrastColor: color => (0, _fontColorContrast.default)(color) === '#ffffff' ? 'white' : 'black',
parseColor: (obj, model) => new _color.default(obj, model)
};
}, [theme, colorScheme]);
const skeletonDef = (0, _react.useMemo)(() => {
return {
color: computedTheme.colors.skeleton,
// @ts-ignore
interval: computedTheme.values.skeletonAnimationInterval ?? 800,
// @ts-ignore
transform: computedTheme.values.skeletonColorTransform ?? 0.3
};
}, [computedTheme]);
const skeletonColors = (0, _react.useMemo)(() => {
const skeletonColorTransform = skeletonDef.transform;
const color1 = skeletonDef.color;
const colorObj = skeletonColorTransform < 0 ? computedTheme.parseColor(color1, 'rgb').darken(Math.abs(skeletonColorTransform)) : computedTheme.parseColor(color1, 'rgb').lighten(skeletonColorTransform);
const color2 = `rgba(${colorObj.red()},${colorObj.green()},${colorObj.blue()},${colorObj.alpha()})`;
return {
color1,
color2
};
}, [computedTheme, skeletonDef]);
const skeletonStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
backgroundColor: (0, _reactNativeReanimated.interpolateColor)(skeletonValue.value, [0, 1], [(skeletonColors === null || skeletonColors === void 0 ? void 0 : skeletonColors.color1) ?? 'rgba(255,255,255,0.3)', (skeletonColors === null || skeletonColors === void 0 ? void 0 : skeletonColors.color2) ?? 'rgba(255,255,255,0.3)'])
}), [skeletonColors]);
const contextData = (0, _react.useMemo)(() => {
return {
theme: computedTheme,
skeletonStyle
};
}, [computedTheme, skeletonStyle]);
(0, _react.useEffect)(() => {
skeletonValue.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(1, {
duration: skeletonDef.interval
}), -1, true);
return () => {
(0, _reactNativeReanimated.cancelAnimation)(skeletonValue);
};
}, [skeletonDef.interval]);
return /*#__PURE__*/_react.default.createElement(ThemeContext.Provider, {
value: contextData
}, children);
}
//# sourceMappingURL=ThemeContext.js.map