@yamada-ui/react/dist/cjs/components/loading/loading-provider.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_effect = require('../../utils/effect.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_portal = require('../portal/portal.cjs');
const require_background = require('./background.cjs');
const require_page = require('./page.cjs');
const require_screen = require('./screen.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
let motion_react = require("motion/react");
motion_react = require_rolldown_runtime.__toESM(motion_react);
let react_remove_scroll = require("react-remove-scroll");
react_remove_scroll = require_rolldown_runtime.__toESM(react_remove_scroll);

//#region src/components/loading/loading-provider.tsx
const LoadingContext = (0, react.createContext)({});
const createController = () => ({
	finish: (0, react.createRef)(),
	force: (0, react.createRef)(),
	start: (0, react.createRef)(),
	update: (0, react.createRef)()
});
const createMethods = (refs) => ({
	finish: () => refs.current.finish.current?.(),
	force: (state) => refs.current.force.current?.(state),
	start: (props) => refs.current.start.current?.(props),
	update: (props) => refs.current.update.current?.(props)
});
const incrementCount = (prev) => prev + 1;
const decrementCount = (prev) => prev === 0 ? prev : prev - 1;
const LoadingProvider = ({ background: backgroundConfig, children, page: pageConfig, screen: screenConfig }) => {
	const screen = (0, react.useRef)(createController());
	const page = (0, react.useRef)(createController());
	const background = (0, react.useRef)(createController());
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LoadingContext, {
		value: (0, react.useMemo)(() => ({
			background: createMethods(background),
			page: createMethods(page),
			screen: createMethods(screen)
		}), []),
		children: [
			children,
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Controller, {
				ref: screen,
				...screenConfig,
				component: require_screen.Screen
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Controller, {
				ref: page,
				...pageConfig,
				component: require_page.Page
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Controller, {
				ref: background,
				...backgroundConfig,
				blockScrollOnMount: backgroundConfig?.blockScrollOnMount ?? false,
				component: require_background.Background
			})
		]
	});
};
const Controller = ({ ref, allowPinchZoom = false, blockScrollOnMount = true, component: Component, duration: durationProp = null, loadingCount: loadingCountProp = 0, loadingScheme: loadingSchemeProp = "oval" }) => {
	const loading = (0, react.useRef)(false);
	const [{ duration, loadingCount, loadingScheme, message }, setState] = (0, react.useState)({
		duration: durationProp,
		loadingCount: loadingCountProp,
		loadingScheme: loadingSchemeProp,
		message: void 0
	});
	const { finish, force, start, update } = (0, react.useMemo)(() => ({
		finish: () => {
			loading.current = false;
			setState(({ loadingCount: loadingCount$1 }) => ({
				duration: durationProp,
				loadingCount: decrementCount(loadingCount$1),
				loadingScheme: loadingSchemeProp,
				message: void 0
			}));
		},
		force: ({ duration: duration$1 = durationProp, loadingCount: loadingCount$1 = 0, loadingScheme: loadingScheme$1 = loadingSchemeProp, message: message$1 }) => {
			loading.current = !!loadingCount$1;
			setState({
				duration: duration$1,
				loadingCount: loadingCount$1,
				loadingScheme: loadingScheme$1,
				message: message$1
			});
		},
		start: ({ duration: duration$1 = durationProp, loadingScheme: loadingScheme$1 = loadingSchemeProp, message: message$1 } = {}) => {
			loading.current = true;
			setState(({ loadingCount: loadingCount$1 }) => ({
				duration: duration$1,
				loadingCount: incrementCount(loadingCount$1),
				loadingScheme: loadingScheme$1,
				message: message$1
			}));
		},
		update: (next) => setState((prev) => ({
			...prev,
			...next
		}))
	}), [durationProp, loadingSchemeProp]);
	require_ref.assignRef(ref.current.start, start);
	require_ref.assignRef(ref.current.finish, finish);
	require_ref.assignRef(ref.current.update, update);
	require_ref.assignRef(ref.current.force, force);
	const props = {
		duration,
		initial: loadingCountProp > 0 ? false : "initial",
		loadingScheme,
		message,
		onFinish: finish
	};
	require_effect.useUpdateEffect(() => {
		if (loadingCountProp > 0 || (0, require_utils_index.utils_exports.isNumber)(durationProp)) setState({
			duration: durationProp,
			loadingCount: loadingCountProp,
			loadingScheme: loadingSchemeProp,
			message: void 0
		});
	}, [
		loadingCountProp,
		durationProp,
		loadingSchemeProp
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
		initial: false,
		children: loadingCount ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_remove_scroll.RemoveScroll, {
			allowPinchZoom,
			enabled: blockScrollOnMount,
			forwardProps: true,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...props })
		}) }) : null
	});
};
/**
* `useLoading` is a custom hook for controlling the loading of the application.
*
* @see https://yamada-ui.com/docs/hooks/use-loading
*/
const useLoading = () => {
	const { background, page, screen } = (0, react.use)(LoadingContext);
	return (0, react.useMemo)(() => ({
		background,
		page,
		screen
	}), [
		background,
		page,
		screen
	]);
};

//#endregion
exports.LoadingProvider = LoadingProvider;
exports.useLoading = useLoading;
//# sourceMappingURL=loading-provider.cjs.map