@overlastic/react 0.4.8

package/LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2022-PRESENT Hairyf<https://github.com/hairyf>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+

package/README.md

@@ -0,0 +1,175 @@
+# @overlastic/react
+
+@overlastic/react is used to define Overlay components in react and supports both imperative and declarative usage!
+
+## Install
+
+With pnpm: 
+```sh
+pnpm add @overlastic/react
+```
+
+With yarn:
+```sh
+yarn add @overlastic/react
+```
+
+## Usage
+
+### Step 1: Define Component
+
+```tsx
+// overlay.tsx
+export function Component(props) {
+  const { visible, resolve, reject } = usePrograms({
+    // Duration of overlay duration, helps prevent premature component destruction
+    duration: 200,
+  })
+
+  return <div className={visible && 'is--visible'}>
+    <span onClick={() => resolve(`${props.title}:confirmed`)}> Confirm </span>
+  </div>
+}
+```
+
+### Step 2: Create Overlay
+
+You can convert the component into a modal dialog box by using the `defineOverlay` method, which allows you to call it in Javascript / Typescript.
+```ts
+import { defineOverlay } from '@overlastic/react'
+import { Component } from './overlay'
+
+// Convert to imperative callback
+const callback = defineOverlay(Component)
+// Call the component and get the resolve callback value
+const value = await callback({ title: 'callbackOverlay' })
+// value === "callbackOverlay:confirmed"
+```
+
+You can also directly call the component through `renderOverlay`, bypassing the `defineOverlay` method.
+
+```ts
+import { renderOverlay } from '@overlastic/react'
+import { Component } from './overlay'
+
+const value = await renderOverlay(Component, {
+  title: 'usePrograms'
+})
+// value === "usePrograms:confirmed"
+```
+
+## Injection Holder
+
+In addition to using `defineOverlay` and `renderOverlay` to create popup components, you can also use useOverlayHolder to create popup components within a component and inherit the current context of the application.
+
+```tsx
+import { useOverlayHolder } from '@overlastic/react'
+import { OverlayComponent } from './overlay'
+
+export function Main() {
+  // Use useOverlayHolder(Component) to create a component holder that supports the current context.
+  const [holder, overlayApi] = useOverlayHolder(OverlayComponent)
+
+  function open() {
+    // Open the popup component
+    overlayApi()
+      .then((result) => {})
+  }
+  return (<>
+    <div onClick={open}> open </div>
+    {/* Mount the holder */}
+    {holder}
+  </>)
+}
+```
+
+## Define Component
+
+Components created using `@overlastic/react` support both imperative and declarative methods of calling. In addition to imperative methods, these components can also be used in JSX.
+
+> This is an optional option that is very useful when porting old components.
+
+```tsx
+// If using Typescript, use PropsWithOverlays to define props type
+import type { PropsWithOverlays } from '@overlastic/react'
+import { usePrograms } from '@overlastic/react'
+
+export function Component(props: PropsWithOverlays<{ /* ...you props */ }>) {
+  const { visible, resolve, reject } = usePrograms({
+    // pass props to usePrograms for processing
+    props
+  })
+
+  return <div className={visible && 'is--visible'}>
+    ...
+  </div>
+}
+```
+
+Once the Overlay component has received props, the popup layer component can be used in JSX.
+
+```tsx
+import { useState } from 'react'
+import { Component } from './overlay'
+
+export function Main() {
+  const [visible, setVisible] = useState(false)
+
+  function openOverlay() {
+    setVisible(true)
+  }
+
+  function onResolve(value) {
+    setVisible(false)
+  }
+
+  function onReject(value) {
+    setVisible(false)
+  }
+
+  return (
+    <Component visible={visible} onResolve={onResolve} onReject={onReject} />
+  )
+}
+```
+
+If you want to replace other fields and event names, you can do so using the `model` and `events` config of usePrograms.
+
+```jsx
+function Component(props: { onOn?: Function; onNook?: Function; open: boolean }) {
+  const { visible, resolve, reject } = usePrograms({
+    events: { resolve: 'onOk', reject: 'onNook' },
+    model: 'open',
+    props,
+  })
+  // ...
+}
+```
+
+## Customized
+
+You can use `@overlastic/react` to modify existing components or component libraries
+
+Take [antd(drawer)](https://ant.design/components/drawer-cn) as an example：
+
+```tsx
+import type { PropsWithOverlays } from '@overlastic/react'
+import { usePrograms } from '@overlastic/react'
+import { Button, Drawer } from 'antd'
+
+function MyDrawer(props: PropsWithOverlays<{ title: string }>) {
+  const { visible, resolve, reject } = usePrograms({
+    duration: 200,
+    props,
+  })
+
+  return (
+    <Drawer title={props.title} onClose={reject} open={visible}>
+      {/* Custom contents.... */}
+      <Button type="primary" onClick={() => resolve(`${props.title}:confirmed`)}>
+        Confirm
+      </Button>
+    </Drawer>
+  )
+}
+```

package/dist/index.cjs

@@ -0,0 +1,243 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  defineOverlay: () => defineOverlay,
+  renderOverlay: () => renderOverlay,
+  useOverlay: () => useOverlay,
+  useOverlayHolder: () => useOverlayHolder,
+  usePrograms: () => usePrograms
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/composable/usePrograms.ts
+var import_core2 = require("@overlastic/core");
+var import_react2 = require("react");
+
+// src/internal/contexts.tsx
+var import_core = require("@overlastic/core");
+var import_react = require("react");
+var ScriptsContext = (0, import_react.createContext)({
+  reject: import_core.noop,
+  resolve: import_core.noop,
+  setVisible: import_core.noop,
+  vanish: import_core.noop,
+  visible: false,
+  in_dec: true
+});
+var InstancesContext = (0, import_react.createContext)({});
+InstancesContext.displayName = "OverlayInstancesContext";
+ScriptsContext.displayName = "OverlayScriptsContext";
+
+// src/internal/utils.ts
+function defineAnonymousComponent(component) {
+  return { "--": component }["--"];
+}
+
+// src/composable/usePrograms.ts
+function usePrograms(options = {}) {
+  const { immediate = true, duration = 0, automatic = true } = options;
+  const context = (0, import_react2.useContext)(ScriptsContext);
+  const dec = Reflect.get(context, "in_dec");
+  const overlay = dec ? useDeclarative(options) : context;
+  const { setVisible, vanish, deferred } = overlay;
+  async function destroy() {
+    setVisible(false);
+    await (0, import_core2.delay)(duration);
+    vanish == null ? void 0 : vanish();
+    return Promise.resolve();
+  }
+  useMount(() => immediate && setVisible(true));
+  useMount(() => {
+    if (!dec && automatic)
+      deferred == null ? void 0 : deferred.then(destroy).catch(destroy);
+  });
+  return overlay;
+}
+function useDeclarative(options = {}) {
+  const { props = {}, model = "visible", events = {} } = options;
+  const { reject = "onReject", resolve = "onResolve" } = events;
+  const _reject = (value) => {
+    var _a;
+    (_a = props[reject]) == null ? void 0 : _a.call(props, value);
+  };
+  const _resolve = (value) => {
+    var _a;
+    (_a = props[resolve]) == null ? void 0 : _a.call(props, value);
+  };
+  return {
+    reject: _reject,
+    resolve: _resolve,
+    visible: props[model],
+    vanish: import_core2.noop,
+    setVisible: import_core2.noop,
+    deferred: void 0
+  };
+}
+function useMount(callback = import_core2.noop) {
+  (0, import_react2.useEffect)(() => callback(), []);
+}
+
+// src/composable/useScripts.ts
+var import_react3 = require("react");
+function useScripts(options) {
+  const { reject: _reject } = options.deferred || {};
+  const { vanish: _vanish } = options;
+  const [visible, setVisible] = (0, import_react3.useState)(false);
+  function vanish() {
+    _vanish == null ? void 0 : _vanish();
+    _reject == null ? void 0 : _reject();
+  }
+  return {
+    resolve: options.deferred.resolve,
+    reject: options.deferred.reject,
+    deferred: options.deferred,
+    setVisible,
+    visible,
+    vanish
+  };
+}
+
+// src/composable/useOverlay.tsx
+var import_core3 = require("@overlastic/core");
+var import_react4 = require("react");
+var import_pascal_case = require("pascal-case");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime = require("react/jsx-runtime");
+var { define } = (0, import_core3.createConstructor)((Instance, props, options) => {
+  const { container, id, deferred, render, vanish: _vanish } = options;
+  const InstanceWithProvider = defineAnonymousComponent(() => {
+    const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ScriptsContext.Provider,
+      {
+        value: useScripts({ deferred, vanish }),
+        ...{ id: (0, import_pascal_case.pascalCase)(id) },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Instance, { ...props })
+      }
+    );
+    return (0, import_react_dom.createPortal)(content, container);
+  });
+  function vanish() {
+    _vanish(InstanceWithProvider);
+    container.remove();
+  }
+  render(InstanceWithProvider, props);
+});
+function useOverlay(Instance) {
+  const { render, vanish } = (0, import_react4.useContext)(InstancesContext);
+  return define(Instance, { render, vanish });
+}
+
+// src/composable/useOverlayHolder.tsx
+var import_core4 = require("@overlastic/core");
+var import_pascal_case2 = require("pascal-case");
+var import_react5 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function useOverlayHolder(Component, options = {}) {
+  const { callback, scripts, props, refresh } = useRefreshMetadata();
+  const name = (0, import_core4.defineName)(options.id, options.autoIncrement);
+  function render() {
+    const root = options.root || (typeof document !== "undefined" ? document.body : void 0);
+    const content = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { id: name, children: [
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...props }),
+      " "
+    ] });
+    return options.root !== false && root ? (0, import_react_dom2.createPortal)(content, root) : content;
+  }
+  const holder = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    ScriptsContext.Provider,
+    {
+      value: scripts,
+      ...{ id: (0, import_pascal_case2.pascalCase)(name) },
+      children: refresh ? render() : null
+    }
+  );
+  return [holder, callback];
+}
+function useRefreshMetadata() {
+  const [props, setProps] = (0, import_react5.useState)();
+  const [refresh, setRefresh] = (0, import_react5.useState)(false);
+  const [visible, setVisible] = (0, import_react5.useState)(false);
+  const deferred = (0, import_react5.useRef)({});
+  const scripts = {
+    deferred: deferred.current,
+    resolve: deferred.current.resolve,
+    reject: deferred.current.reject,
+    vanish,
+    visible,
+    setVisible
+  };
+  function vanish() {
+    var _a;
+    setRefresh(false);
+    setProps({});
+    (_a = scripts.reject) == null ? void 0 : _a.call(scripts);
+  }
+  async function callback(props2) {
+    deferred.current = (0, import_core4.createDeferred)();
+    setProps(props2);
+    setRefresh(true);
+    return deferred.current;
+  }
+  return { callback, scripts, props, refresh };
+}
+
+// src/define/constructor.tsx
+var import_core5 = require("@overlastic/core");
+var import_client = require("react-dom/client");
+var import_pascal_case3 = require("pascal-case");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var constructor = (0, import_core5.createConstructor)((Instance, props, options) => {
+  const { container, id, deferred } = options;
+  const root = (0, import_client.createRoot)(container);
+  const Provider = defineAnonymousComponent(() => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ScriptsContext.Provider,
+      {
+        value: useScripts({ deferred, vanish }),
+        ...{ id: (0, import_pascal_case3.pascalCase)(id) },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Instance, { ...props })
+      }
+    );
+  });
+  function vanish() {
+    const handle = requestAnimationFrame(() => {
+      root.unmount();
+      container.remove();
+      cancelAnimationFrame(handle);
+    });
+  }
+  root.render(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Provider, {}));
+});
+
+// src/define/index.ts
+var defineOverlay = constructor.define;
+var renderOverlay = constructor.render;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defineOverlay,
+  renderOverlay,
+  useOverlay,
+  useOverlayHolder,
+  usePrograms
+});

package/dist/index.d.cts

@@ -0,0 +1,80 @@
+import * as react from 'react';
+import { Dispatch, SetStateAction, FC } from 'react';
+import * as _overlastic_core from '@overlastic/core';
+import { ImperativeOverlay, MountOptions } from '@overlastic/core';
+
+type PropsWidthOverlays<P = unknown> = P & {
+    visible?: boolean;
+    onReject?: (value: any) => void;
+    onResolve?: (value: any) => void;
+};
+
+interface PromptifyEvents {
+    /**
+     * reject event name used by the template
+     *
+     * @default 'onReject'
+     */
+    reject?: string;
+    /**
+     * resolve event name used by the template
+     *
+     * @default 'onResolve'
+     */
+    resolve?: string;
+}
+interface ProgramsOptions {
+    /** animation duration to avoid premature destruction of components */
+    duration?: number;
+    /** whether to set visible to true immediately */
+    immediate?: boolean;
+    /**
+     * pass in the required props on jsx
+     */
+    props?: PropsWidthOverlays;
+    /**
+     *  fields used by jsx show
+     *
+     * @default 'visible'
+     */
+    model?: string;
+    /**
+     * props use event name
+     */
+    events?: PromptifyEvents;
+    /**
+     * whether to automatically handle components based on visible and duration
+     *
+     * @default true
+     */
+    automatic?: boolean;
+}
+interface ProgramsReturn {
+    /** the notification reject, modify visible, and destroy it after the duration ends */
+    reject: Function;
+    /** the notification resolve, modify visible, and destroy it after the duration ends */
+    resolve: Function;
+    /** destroy the current instance (immediately) */
+    vanish: Function;
+    /** visible control popup display and hide */
+    visible: boolean;
+    /** visible dispatch change */
+    setVisible: Dispatch<SetStateAction<boolean>>;
+    /** current deferred */
+    deferred?: Promise<any>;
+}
+declare function usePrograms(options?: ProgramsOptions): ProgramsReturn;
+
+interface Options {
+    render: (instance: FC, props: any) => void;
+    vanish: (instance: FC) => void;
+}
+declare function useOverlay<Props, Resolved>(Instance: FC<Props>): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
+
+type InjectionHolder<Props, Resolved> = [JSX.Element, ImperativeOverlay<Props, Resolved>];
+declare function useOverlayHolder<Props, Resolved = void>(Component: FC<Props>, options?: MountOptions): InjectionHolder<Props, Resolved>;
+
+declare const defineOverlay: <Props, Resolved = void>(instance: react.FC<any>, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, {}>;
+declare const renderOverlay: <Props, Resolved = void>(instance: react.FC<any>, props?: Props | undefined, options?: _overlastic_core.GlobalMountOptions | undefined) => Promise<Resolved>;
+
+export { type InjectionHolder, type ProgramsOptions, type ProgramsReturn, type PropsWidthOverlays, defineOverlay, renderOverlay, useOverlay, useOverlayHolder, usePrograms };

package/dist/index.d.ts

@@ -0,0 +1,80 @@
+import * as react from 'react';
+import { Dispatch, SetStateAction, FC } from 'react';
+import * as _overlastic_core from '@overlastic/core';
+import { ImperativeOverlay, MountOptions } from '@overlastic/core';
+
+type PropsWidthOverlays<P = unknown> = P & {
+    visible?: boolean;
+    onReject?: (value: any) => void;
+    onResolve?: (value: any) => void;
+};
+
+interface PromptifyEvents {
+    /**
+     * reject event name used by the template
+     *
+     * @default 'onReject'
+     */
+    reject?: string;
+    /**
+     * resolve event name used by the template
+     *
+     * @default 'onResolve'
+     */
+    resolve?: string;
+}
+interface ProgramsOptions {
+    /** animation duration to avoid premature destruction of components */
+    duration?: number;
+    /** whether to set visible to true immediately */
+    immediate?: boolean;
+    /**
+     * pass in the required props on jsx
+     */
+    props?: PropsWidthOverlays;
+    /**
+     *  fields used by jsx show
+     *
+     * @default 'visible'
+     */
+    model?: string;
+    /**
+     * props use event name
+     */
+    events?: PromptifyEvents;
+    /**
+     * whether to automatically handle components based on visible and duration
+     *
+     * @default true
+     */
+    automatic?: boolean;
+}
+interface ProgramsReturn {
+    /** the notification reject, modify visible, and destroy it after the duration ends */
+    reject: Function;
+    /** the notification resolve, modify visible, and destroy it after the duration ends */
+    resolve: Function;
+    /** destroy the current instance (immediately) */
+    vanish: Function;
+    /** visible control popup display and hide */
+    visible: boolean;
+    /** visible dispatch change */
+    setVisible: Dispatch<SetStateAction<boolean>>;
+    /** current deferred */
+    deferred?: Promise<any>;
+}
+declare function usePrograms(options?: ProgramsOptions): ProgramsReturn;
+
+interface Options {
+    render: (instance: FC, props: any) => void;
+    vanish: (instance: FC) => void;
+}
+declare function useOverlay<Props, Resolved>(Instance: FC<Props>): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
+
+type InjectionHolder<Props, Resolved> = [JSX.Element, ImperativeOverlay<Props, Resolved>];
+declare function useOverlayHolder<Props, Resolved = void>(Component: FC<Props>, options?: MountOptions): InjectionHolder<Props, Resolved>;
+
+declare const defineOverlay: <Props, Resolved = void>(instance: react.FC<any>, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, {}>;
+declare const renderOverlay: <Props, Resolved = void>(instance: react.FC<any>, props?: Props | undefined, options?: _overlastic_core.GlobalMountOptions | undefined) => Promise<Resolved>;
+
+export { type InjectionHolder, type ProgramsOptions, type ProgramsReturn, type PropsWidthOverlays, defineOverlay, renderOverlay, useOverlay, useOverlayHolder, usePrograms };