@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
89 lines (88 loc) • 3.31 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useSkeletonContext = exports.useSkeletonConfig = exports.useSkeletonAnimation = exports.default = exports.SkeletonContext = void 0;
var _react = _interopRequireWildcard(require("react"));
var _chaynsApi = require("chayns-api");
var _types = require("../types");
var _react2 = require("motion/react");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const SkeletonContext = exports.SkeletonContext = /*#__PURE__*/(0, _react.createContext)(undefined);
SkeletonContext.displayName = 'SkeletonContext';
const useSkeletonConfig = ({
highlightColor,
baseColor,
animationType = _types.SkeletonAnimationType.PULSE,
borderRadius = 4
}) => {
const {
colorMode
} = (0, _chaynsApi.useSite)();
const progress = (0, _react2.useMotionValue)(0);
(0, _react.useEffect)(() => {
const controls = (0, _react2.animate)(progress, 1, {
duration: 2.4,
repeat: Infinity,
repeatType: 'loop',
ease: 'linear'
});
return controls.stop;
}, [progress]);
const defaultHighlightColor = colorMode === _chaynsApi.ColorMode.Dark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)';
const defaultBaseColor = colorMode === _chaynsApi.ColorMode.Dark ? '#262626' : '#e5e5e5';
return {
animationType,
borderRadius,
baseColor: baseColor ?? defaultBaseColor,
highlightColor: highlightColor ?? defaultHighlightColor,
progress
};
};
exports.useSkeletonConfig = useSkeletonConfig;
const useSkeletonAnimation = () => {
const {
animationType,
progress
} = useSkeletonContext();
const opacity = (0, _react2.useTransform)(progress, [0, 0.5, 1], [0.06, 0.18, 0.06]);
const x = (0, _react2.useTransform)(progress, [0, 1], ['-100%', '100%']);
if (animationType === _types.SkeletonAnimationType.PULSE) {
return {
opacity
};
}
return {
x
};
};
exports.useSkeletonAnimation = useSkeletonAnimation;
const useSkeletonContext = () => {
const defaultValues = useSkeletonConfig({});
const context = (0, _react.useContext)(SkeletonContext);
if (!context) {
return defaultValues;
}
return context;
};
exports.useSkeletonContext = useSkeletonContext;
const SkeletonProvider = ({
animationType = _types.SkeletonAnimationType.PULSE,
baseColor,
highlightColor,
borderRadius = 4,
children
}) => {
const value = useSkeletonConfig({
baseColor,
borderRadius,
highlightColor,
animationType
});
return /*#__PURE__*/_react.default.createElement(SkeletonContext.Provider, {
value: value
}, children);
};
SkeletonProvider.displayName = 'Skeleton.Config';
var _default = exports.default = SkeletonProvider;
//# sourceMappingURL=SkeletonProvider.js.map