@crossed/sheet/lib/module/provider.js

A Cross Platform(Android & iOS) ActionSheet with a robust and flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import React, {
  createContext,
  useContext,
  useEffect,
  useReducer,
  useRef,
  useState
} from "react";
import { actionSheetEventManager } from "./eventmanager";
const providerRegistryStack = [];
const sheetsRegistry = {
  global: {}
};
function registerSheet(id, Sheet, ...contexts) {
  if (!id || !Sheet)
    return;
  if (!contexts || contexts.length === 0)
    contexts = ["global"];
  for (const context of contexts) {
    const registry = !sheetsRegistry[context] ? sheetsRegistry[context] = {} : sheetsRegistry[context];
    registry[id] = Sheet;
    actionSheetEventManager.publish(`${context}-on-register`);
  }
}
function SheetProvider({
  context = "global",
  children
}) {
  const [, forceUpdate] = useReducer((x) => x + 1, 0);
  const sheetIds = Object.keys(
    sheetsRegistry[context] || sheetsRegistry.global || {}
  );
  const onRegister = React.useCallback(() => {
    forceUpdate();
  }, [forceUpdate]);
  useEffect(() => {
    providerRegistryStack.indexOf(context) > -1 ? providerRegistryStack.indexOf(context) : providerRegistryStack.push(context) - 1;
    const unsub = actionSheetEventManager.subscribe(
      `${context}-on-register`,
      onRegister
    );
    return () => {
      providerRegistryStack.splice(providerRegistryStack.indexOf(context), 1);
      unsub == null ? void 0 : unsub.unsubscribe();
    };
  }, [context, onRegister]);
  const renderSheet = (sheetId) => /* @__PURE__ */ jsx(RenderSheet, { id: sheetId, context }, sheetId);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    children,
    sheetIds.map(renderSheet)
  ] });
}
const ProviderContext = createContext("global");
const SheetIDContext = createContext(void 0);
const SheetRefContext = createContext(
  {}
);
const SheetPayloadContext = createContext(void 0);
const useProviderContext = () => useContext(ProviderContext);
const useSheetIDContext = () => useContext(SheetIDContext);
function useSheetRef(_id) {
  return useContext(SheetRefContext);
}
function useSheetPayload(_id) {
  return useContext(SheetPayloadContext);
}
const RenderSheet = ({ id, context }) => {
  var _a, _b;
  const [payload, setPayload] = useState();
  const [visible, setVisible] = useState(false);
  const ref = useRef(null);
  const Sheet = context.startsWith("$$-auto-") ? (_a = sheetsRegistry == null ? void 0 : sheetsRegistry.global) == null ? void 0 : _a[id] : sheetsRegistry[context] ? (_b = sheetsRegistry[context]) == null ? void 0 : _b[id] : void 0;
  const onShow = React.useCallback(
    (data, ctx = "global") => {
      if (ctx !== context)
        return;
      setPayload(data);
      setVisible(true);
    },
    [context]
  );
  const onClose = React.useCallback(
    (_data, ctx = "global") => {
      if (context !== ctx)
        return;
      setVisible(false);
      setTimeout(() => {
        setPayload(void 0);
      }, 1);
    },
    [context]
  );
  const onHide = React.useCallback(
    (data, ctx = "global") => {
      actionSheetEventManager.publish(`hide_${id}`, data, ctx);
    },
    [id]
  );
  useEffect(() => {
    if (visible) {
      actionSheetEventManager.publish(`show_${id}`, payload, context);
    }
  }, [context, id, payload, visible]);
  useEffect(() => {
    const subs = [
      actionSheetEventManager.subscribe(`show_wrap_${id}`, onShow),
      actionSheetEventManager.subscribe(`onclose_${id}`, onClose),
      actionSheetEventManager.subscribe(`hide_wrap_${id}`, onHide)
    ];
    return () => {
      subs.forEach((s) => s.unsubscribe());
    };
  }, [id, context, onShow, onHide, onClose]);
  if (!Sheet)
    return null;
  return !visible ? null : /* @__PURE__ */ jsx(ProviderContext.Provider, { value: context, children: /* @__PURE__ */ jsx(SheetIDContext.Provider, { value: id, children: /* @__PURE__ */ jsx(SheetRefContext.Provider, { value: ref, children: /* @__PURE__ */ jsx(SheetPayloadContext.Provider, { value: payload, children: /* @__PURE__ */ jsx(Sheet, { sheetId: id, payload }) }) }) }) });
};
export {
  SheetProvider,
  SheetRefContext,
  providerRegistryStack,
  registerSheet,
  sheetsRegistry,
  useProviderContext,
  useSheetIDContext,
  useSheetPayload,
  useSheetRef
};
//# sourceMappingURL=provider.js.map