jb-modal 1.6.1 → 1.7.0

package/react/dist/JBModal.js

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef, useState, useImperativeHandle } from 'react';
+import 'jb-modal';
+
+function useBindEvent(ref, event, handler, passive = false) {
+    useEffect(() => {
+        const dom = ref.current;
+        if (dom) {
+            // initiate the event handler
+            dom.addEventListener(event, handler, passive);
+        }
+        // this will clean up the event every time the component is re-rendered
+        return function cleanup() {
+            if (dom) {
+                dom.removeEventListener(event, handler, passive);
+            }
+        };
+    }, [ref, event, handler, passive]);
+}
+
+const JBModal = React.forwardRef((props, ref) => {
+    const element = useRef(null);
+    const [refChangeCount, refChangeCountSetter] = useState(0);
+    useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
+    useEffect(() => {
+        refChangeCountSetter(refChangeCount + 1);
+    }, [element.current]);
+    useEffect(() => {
+        if (element.current) {
+            if (props.isOpen == true) {
+                element.current.open();
+            }
+            else {
+                element.current.close();
+            }
+        }
+    }, [props.isOpen]);
+    useEffect(() => {
+        if (props.id !== undefined && element.current) {
+            element.current.addEventListener('urlOpen', onUrlOpen);
+            element.current.id = props.id;
+        }
+        return () => {
+            if (props.id !== undefined && element.current) {
+                element.current.removeEventListener('urlOpen', onUrlOpen);
+            }
+        };
+    }, [props.id]);
+    function onClose() {
+        if (props.onClose) {
+            props.onClose();
+        }
+    }
+    function onUrlOpen() {
+        if (props.onUrlOpen) {
+            props.onUrlOpen();
+        }
+    }
+    useBindEvent(element, 'close', onClose);
+    return (React.createElement("jb-modal", { ref: element, class: props.className ? props.className : '' },
+        React.createElement("div", { slot: "content" }, props.children)));
+});
+JBModal.displayName = "JBModal";
+
+export { JBModal };
+//# sourceMappingURL=JBModal.js.map

package/react/dist/JBModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBModal.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBModal.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import PropTypes from 'prop-types';\r\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react';\r\nimport 'jb-modal';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBModalWebComponent } from 'jb-modal';\r\nimport { useBindEvent } from '../../../../common/hooks/use-event.js';\r\nexport type JBModalProps = React.PropsWithChildren<{\r\n    onClose?: () => void,\r\n    onUrlOpen?: () => void,\r\n    className?:string,\r\n    isOpen?: boolean,\r\n    id?: string,\r\n}>\r\n\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-modal': JBModalType;\r\n      }\r\n      interface JBModalType extends React.DetailedHTMLProps<React.HTMLAttributes<JBModalWebComponent>, JBModalWebComponent> {\r\n        class?:string,\r\n      }\r\n    }\r\n}\r\n\r\nconst JBModal = React.forwardRef((props:JBModalProps, ref) => {\r\n  const element = useRef<JBModalWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : {}),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isOpen == true) {\r\n        element.current.open();\r\n      } else {\r\n        element.current.close();\r\n      }\r\n    }\r\n\r\n  }, [props.isOpen]);\r\n  useEffect(() => {\r\n    if (props.id !== undefined && element.current) {\r\n      element.current.addEventListener('urlOpen', onUrlOpen);\r\n      element.current.id = props.id;\r\n    }\r\n    return () => {\r\n      if (props.id !== undefined && element.current) {\r\n        element.current.removeEventListener('urlOpen', onUrlOpen);\r\n      }\r\n    };\r\n  }, [props.id]);\r\n  function onClose() {\r\n    if (props.onClose) {\r\n      props.onClose();\r\n    }\r\n  }\r\n  function onUrlOpen() {\r\n    if (props.onUrlOpen) {\r\n      props.onUrlOpen();\r\n    }\r\n  }\r\n  useBindEvent(element, 'close', onClose);\r\n  return (\r\n    <jb-modal ref={element} class={props.className ? props.className : ''}>\r\n      <div slot=\"content\">\r\n        {props.children}\r\n      </div>\r\n    </jb-modal>\r\n  );\r\n});\r\n\r\nJBModal.displayName = \"JBModal\";\r\nexport {JBModal};\r\n"],"names":[],"mappings":"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"}

package/react/dist/JBModal.umd.js

@@ -0,0 +1,70 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('jb-modal')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'jb-modal'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JBModal = {}, global.React));
+})(this, (function (exports, React) { 'use strict';
+
+  function useBindEvent(ref, event, handler, passive = false) {
+      React.useEffect(() => {
+          const dom = ref.current;
+          if (dom) {
+              // initiate the event handler
+              dom.addEventListener(event, handler, passive);
+          }
+          // this will clean up the event every time the component is re-rendered
+          return function cleanup() {
+              if (dom) {
+                  dom.removeEventListener(event, handler, passive);
+              }
+          };
+      }, [ref, event, handler, passive]);
+  }
+
+  const JBModal = React.forwardRef((props, ref) => {
+      const element = React.useRef(null);
+      const [refChangeCount, refChangeCountSetter] = React.useState(0);
+      React.useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
+      React.useEffect(() => {
+          refChangeCountSetter(refChangeCount + 1);
+      }, [element.current]);
+      React.useEffect(() => {
+          if (element.current) {
+              if (props.isOpen == true) {
+                  element.current.open();
+              }
+              else {
+                  element.current.close();
+              }
+          }
+      }, [props.isOpen]);
+      React.useEffect(() => {
+          if (props.id !== undefined && element.current) {
+              element.current.addEventListener('urlOpen', onUrlOpen);
+              element.current.id = props.id;
+          }
+          return () => {
+              if (props.id !== undefined && element.current) {
+                  element.current.removeEventListener('urlOpen', onUrlOpen);
+              }
+          };
+      }, [props.id]);
+      function onClose() {
+          if (props.onClose) {
+              props.onClose();
+          }
+      }
+      function onUrlOpen() {
+          if (props.onUrlOpen) {
+              props.onUrlOpen();
+          }
+      }
+      useBindEvent(element, 'close', onClose);
+      return (React.createElement("jb-modal", { ref: element, class: props.className ? props.className : '' },
+          React.createElement("div", { slot: "content" }, props.children)));
+  });
+  JBModal.displayName = "JBModal";
+
+  exports.JBModal = JBModal;
+
+}));
+//# sourceMappingURL=JBModal.umd.js.map

package/react/dist/JBModal.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBModal.umd.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBModal.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import PropTypes from 'prop-types';\r\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react';\r\nimport 'jb-modal';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBModalWebComponent } from 'jb-modal';\r\nimport { useBindEvent } from '../../../../common/hooks/use-event.js';\r\nexport type JBModalProps = React.PropsWithChildren<{\r\n    onClose?: () => void,\r\n    onUrlOpen?: () => void,\r\n    className?:string,\r\n    isOpen?: boolean,\r\n    id?: string,\r\n}>\r\n\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-modal': JBModalType;\r\n      }\r\n      interface JBModalType extends React.DetailedHTMLProps<React.HTMLAttributes<JBModalWebComponent>, JBModalWebComponent> {\r\n        class?:string,\r\n      }\r\n    }\r\n}\r\n\r\nconst JBModal = React.forwardRef((props:JBModalProps, ref) => {\r\n  const element = useRef<JBModalWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : {}),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isOpen == true) {\r\n        element.current.open();\r\n      } else {\r\n        element.current.close();\r\n      }\r\n    }\r\n\r\n  }, [props.isOpen]);\r\n  useEffect(() => {\r\n    if (props.id !== undefined && element.current) {\r\n      element.current.addEventListener('urlOpen', onUrlOpen);\r\n      element.current.id = props.id;\r\n    }\r\n    return () => {\r\n      if (props.id !== undefined && element.current) {\r\n        element.current.removeEventListener('urlOpen', onUrlOpen);\r\n      }\r\n    };\r\n  }, [props.id]);\r\n  function onClose() {\r\n    if (props.onClose) {\r\n      props.onClose();\r\n    }\r\n  }\r\n  function onUrlOpen() {\r\n    if (props.onUrlOpen) {\r\n      props.onUrlOpen();\r\n    }\r\n  }\r\n  useBindEvent(element, 'close', onClose);\r\n  return (\r\n    <jb-modal ref={element} class={props.className ? props.className : ''}>\r\n      <div slot=\"content\">\r\n        {props.children}\r\n      </div>\r\n    </jb-modal>\r\n  );\r\n});\r\n\r\nJBModal.displayName = \"JBModal\";\r\nexport {JBModal};\r\n"],"names":["useEffect","useRef","useState","useImperativeHandle"],"mappings":"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"}

package/react/dist/common/hooks/use-event.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function useEvent(dom: HTMLElement, event: any, handler: any, passive?: boolean): void;
+export declare function useBindEvent<TRef extends React.MutableRefObject<any | null>, TEvent>(ref: TRef, event: string, handler: (e: TEvent) => void, passive?: boolean): void;

package/react/dist/common/hooks/useLazyRef.d.ts

@@ -0,0 +1,4 @@
+import { MutableRefObject } from "react";
+type InitFunc<T> = () => T;
+export declare const useLazyRef: <T>(initValFunc: InitFunc<T>) => MutableRefObject<any>;
+export {};

package/react/dist/common/hooks/useMobx.d.ts

@@ -0,0 +1,4 @@
+type Initializers = any[];
+type Constructor<T extends object = object> = new (...args: any[]) => T;
+export declare const useMobx: <T extends object>(Store: Constructor<T>, initializers: Initializers) => T;
+export {};

package/react/dist/common/scripts/device-detection.d.ts

@@ -0,0 +1 @@
+export declare const isMobile: () => boolean;

package/react/dist/common/scripts/persian-helper.d.ts

@@ -0,0 +1,3 @@
+declare function faToEnDigits(input: string | number): string;
+declare function enToFaDigits(input: string | number): string;
+export { enToFaDigits, faToEnDigits };

package/react/dist/web-component/jb-modal/react/lib/JBModal.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import 'jb-modal';
+import { JBModalWebComponent } from 'jb-modal';
+export type JBModalProps = React.PropsWithChildren<{
+    onClose?: () => void;
+    onUrlOpen?: () => void;
+    className?: string;
+    isOpen?: boolean;
+    id?: string;
+}>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'jb-modal': JBModalType;
+        }
+        interface JBModalType extends React.DetailedHTMLProps<React.HTMLAttributes<JBModalWebComponent>, JBModalWebComponent> {
+            class?: string;
+        }
+    }
+}
+declare const JBModal: React.ForwardRefExoticComponent<{
+    onClose?: () => void;
+    onUrlOpen?: () => void;
+    className?: string;
+    isOpen?: boolean;
+    id?: string;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+export { JBModal };

package/react/index.js

@@ -0,0 +1 @@
+export * from './dist/JBModal.js';

package/react/lib/JBModal.tsx

@@ -0,0 +1,80 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import 'jb-modal';
+// eslint-disable-next-line no-duplicate-imports
+import { JBModalWebComponent } from 'jb-modal';
+import { useBindEvent } from '../../../../common/hooks/use-event.js';
+export type JBModalProps = React.PropsWithChildren<{
+    onClose?: () => void,
+    onUrlOpen?: () => void,
+    className?:string,
+    isOpen?: boolean,
+    id?: string,
+}>
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+      interface IntrinsicElements {
+        'jb-modal': JBModalType;
+      }
+      interface JBModalType extends React.DetailedHTMLProps<React.HTMLAttributes<JBModalWebComponent>, JBModalWebComponent> {
+        class?:string,
+      }
+    }
+}
+
+const JBModal = React.forwardRef((props:JBModalProps, ref) => {
+  const element = useRef<JBModalWebComponent>(null);
+  const [refChangeCount, refChangeCountSetter] = useState(0);
+  useImperativeHandle(
+    ref,
+    () => (element ? element.current : {}),
+    [element],
+  );
+  useEffect(() => {
+    refChangeCountSetter(refChangeCount + 1);
+  }, [element.current]);
+  useEffect(() => {
+    if (element.current) {
+      if (props.isOpen == true) {
+        element.current.open();
+      } else {
+        element.current.close();
+      }
+    }
+
+  }, [props.isOpen]);
+  useEffect(() => {
+    if (props.id !== undefined && element.current) {
+      element.current.addEventListener('urlOpen', onUrlOpen);
+      element.current.id = props.id;
+    }
+    return () => {
+      if (props.id !== undefined && element.current) {
+        element.current.removeEventListener('urlOpen', onUrlOpen);
+      }
+    };
+  }, [props.id]);
+  function onClose() {
+    if (props.onClose) {
+      props.onClose();
+    }
+  }
+  function onUrlOpen() {
+    if (props.onUrlOpen) {
+      props.onUrlOpen();
+    }
+  }
+  useBindEvent(element, 'close', onClose);
+  return (
+    <jb-modal ref={element} class={props.className ? props.className : ''}>
+      <div slot="content">
+        {props.children}
+      </div>
+    </jb-modal>
+  );
+});
+
+JBModal.displayName = "JBModal";
+export {JBModal};

package/react/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "jb-modal-react",
+  "description": "modal react component",
+  "type": "module",
+  "author": {
+		"name": "mohammad javad bathaei",
+		"email": "javadbat@gmail.com"
+	},
+  "keywords": [
+    "jb",
+    "jb-modal",
+    "react component",
+    "dialog",
+    "modal",
+    "react",
+    "react modal",
+    "modal window",
+    "pop up"
+  ],
+  "version": "1.1.0",
+  "bugs": "https://github.com/javadbat/jb-modal/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "lib/",
+    "dist/"
+  ],
+  "main": "index.js",
+  "types": "./dist/web-component/jb-modal/react/lib/JBModal.d.ts",
+  "repository": {
+		"type": "git",
+		"url": "git@github.com:javadbat/jb-modal.git"
+  },
+  "dependencies": {
+    "jb-modal": ">=1.5.3"
+  }
+}

package/react/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "baseUrl": "."
+    },
+    "include": [
+        "../../../common/scripts/**/*.ts",
+        "../../../common/hooks/**/*.ts",
+        "../../../common/hooks/**/*.js",
+        "lib/**/*.ts",
+        "lib/**/*.tsx"
+    ],
+    "exclude": [
+        "node_modules",
+        "**/*.spec.ts",
+        "dist",
+    ],
+    "extends":"../../tsconfig-react.json"
+}

package/lib/global.d.ts

@@ -1,11 +0,0 @@
-type FileStringModule = {
-    readonly default: string;
-}
-declare module '*.scss' {
-    const value: FileStringModule;
-    export default value;
-}
-declare module '*.html' {
-    const value: FileStringModule;
-    export default value.default
-}