ag-common 0.0.189 → 0.0.192

package/dist/ui/components/SearchModal/SearchModal.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ISearchDialog, TSearchModalRes } from './types';
+export declare const SearchModal: <T>({ res, wrapper, placeholderText, closeText, renderItem, displayItems, willDisplayItem, getKeyF, }: ISearchDialog<T> & {
+    res: (v: TSearchModalRes<T>) => void;
+    wrapper: HTMLDivElement;
+}) => JSX.Element;

package/dist/ui/components/SearchModal/SearchModal.js

@@ -0,0 +1,123 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchModal = void 0;
+const debounce_1 = require("../../helpers/debounce");
+const media_1 = require("../../styles/media");
+const Modal_1 = require("../Modal");
+const TextEdit_1 = require("../TextEdit/TextEdit");
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importStar(require("react"));
+const ModalStyled = (0, styled_components_1.default)(Modal_1.Modal) `
+  display: flex;
+  flex-flow: column;
+  top: 10rem;
+  @media ${media_1.bigScreen} {
+    width: 50vw;
+    max-width: 60rem;
+  }
+  @media ${media_1.smallScreen} {
+    max-width: 95vw;
+  }
+`;
+const SearchBox = styled_components_1.default.div `
+  padding: 1rem;
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  align-items: center;
+`;
+const MagnifyIconSvg = (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490 490" },
+    react_1.default.createElement("path", { fill: "none", stroke: "#000", strokeWidth: "36", strokeLinecap: "round", d: "M280 278a153 153 0 1 0-2 2l170 170m-91-117 110 110-26 26-110-110" })));
+const Icon = styled_components_1.default.div `
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.5rem;
+`;
+const CloseButton = styled_components_1.default.div `
+  font-weight: bold;
+  margin-left: 1rem;
+  font-size: 1.1rem;
+  z-index: 1;
+  color: #333;
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+const Content = styled_components_1.default.div `
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  align-items: center;
+  max-height: calc(100vh - 20rem);
+  overflow-y: auto;
+  padding-bottom: 0.5rem;
+`;
+const Row = styled_components_1.default.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+`;
+const SearchModal = ({ res, wrapper, placeholderText, closeText, renderItem, displayItems, willDisplayItem, getKeyF, }) => {
+    let originalStyle;
+    (0, react_1.useEffect)(() => {
+        if (originalStyle === undefined) {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            originalStyle = window.getComputedStyle(document.body).overflow || '';
+            document.body.style.overflow = 'hidden';
+        }
+    }, []);
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const resWrap = (foundItem) => {
+        try {
+            document.body.style.overflow = originalStyle || '';
+            if (!foundItem) {
+                res(undefined);
+            }
+            else {
+                res({ foundItem, searchText });
+            }
+        }
+        finally {
+            wrapper.remove();
+        }
+    };
+    const filteredItems = displayItems.filter((i) => willDisplayItem(searchText, i));
+    return (react_1.default.createElement(ModalStyled, { position: "center", topPosition: "center", open: true, setOpen: () => resWrap(undefined), showCloseButton: false, closeOnClickOutside: true },
+        react_1.default.createElement(SearchBox, null,
+            react_1.default.createElement(TextEdit_1.TextEdit, { placeholder: placeholderText, defaultValue: "", onSubmit: (v) => (0, debounce_1.debounce)(() => {
+                    setSearchText(v);
+                }, { key: 'pagesearch', time: 200 }), defaultEditing: { focus: true }, singleLine: true, leftContent: react_1.default.createElement(Icon, null, MagnifyIconSvg), noGrow: true, allowUndo: false, onEscape: () => resWrap(undefined) }),
+            react_1.default.createElement(CloseButton, { onClick: () => resWrap(undefined) }, closeText)),
+        react_1.default.createElement(Content, null, filteredItems.map((i) => (react_1.default.createElement(Row, { key: getKeyF(i), onClick: () => resWrap(i) }, renderItem(searchText, i)))))));
+};
+exports.SearchModal = SearchModal;

package/dist/ui/components/SearchModal/index.d.ts

@@ -1,31 +1,3 @@
-/// <reference types="react" />
-export interface ISearchDialog<T> {
-    placeholderText?: string;
-    closeText?: string;
-    /**
-     * method run to render each filtered item
-     */
-    renderItem: (searchText: string, item: T) => JSX.Element | string;
-    /**
-     * all potential items
-     */
-    displayItems: T[];
-    /**
-     * run to filter items by search text
-     */
-    willDisplayItem: (searchText: string, item: T) => boolean;
-    /**
-     * get unique render key
-     */
-    getKeyF: (i: T) => string;
-}
-export declare type TSearchModalRes<T> = undefined | {
-    foundItem: T;
-    searchText: string;
-};
-/**
- * opens a searchmodal programatically, and resolves to either undefined, or the selected item
- * @param p
- * @returns
- */
-export declare const searchDialog: <T>(p: ISearchDialog<T>) => Promise<TSearchModalRes<T>>;
+export * from './types';
+export * from './SearchModal';
+export * from './searchDialog';

package/dist/ui/components/SearchModal/index.js

@@ -10,137 +10,10 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.searchDialog = void 0;
-const debounce_1 = require("../../helpers/debounce");
-const media_1 = require("../../styles/media");
-const Modal_1 = require("../Modal");
-const TextEdit_1 = require("../TextEdit/TextEdit");
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_dom_1 = __importDefault(require("react-dom"));
-const react_1 = __importStar(require("react"));
-const ModalStyled = (0, styled_components_1.default)(Modal_1.Modal) `
-  display: flex;
-  flex-flow: column;
-  top: 10rem;
-  @media ${media_1.bigScreen} {
-    width: 50vw;
-    max-width: 60rem;
-  }
-  @media ${media_1.smallScreen} {
-    max-width: 95vw;
-  }
-`;
-const SearchBox = styled_components_1.default.div `
-  padding: 1rem;
-  display: flex;
-  flex-flow: row;
-  justify-content: center;
-  align-items: center;
-`;
-const MagnifyIconSvg = (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490 490" },
-    react_1.default.createElement("path", { fill: "none", stroke: "#000", strokeWidth: "36", strokeLinecap: "round", d: "M280 278a153 153 0 1 0-2 2l170 170m-91-117 110 110-26 26-110-110" })));
-const Icon = styled_components_1.default.div `
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-right: 0.5rem;
-`;
-const CloseButton = styled_components_1.default.div `
-  font-weight: bold;
-  margin-left: 1rem;
-  font-size: 1.1rem;
-  z-index: 1;
-  color: #333;
-  cursor: pointer;
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-const Content = styled_components_1.default.div `
-  display: flex;
-  flex-flow: column;
-  justify-content: flex-start;
-  align-items: center;
-  max-height: calc(100vh - 20rem);
-  overflow-y: auto;
-  padding-bottom: 0.5rem;
-`;
-const Row = styled_components_1.default.div `
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
-`;
-const SearchModal = ({ res, wrapper, placeholderText, closeText, renderItem, displayItems, willDisplayItem, getKeyF, }) => {
-    let originalStyle;
-    (0, react_1.useEffect)(() => {
-        if (originalStyle === undefined) {
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-            originalStyle = window.getComputedStyle(document.body).overflow || '';
-            document.body.style.overflow = 'hidden';
-        }
-    }, []);
-    const [searchText, setSearchText] = (0, react_1.useState)('');
-    const resWrap = (foundItem) => {
-        try {
-            document.body.style.overflow = originalStyle || '';
-            if (!foundItem) {
-                res(undefined);
-            }
-            else {
-                res({ foundItem, searchText });
-            }
-        }
-        finally {
-            wrapper.remove();
-        }
-    };
-    const filteredItems = displayItems.filter((i) => willDisplayItem(searchText, i));
-    return (react_1.default.createElement(ModalStyled, { position: "center", topPosition: "center", open: true, setOpen: () => resWrap(undefined), showCloseButton: false, closeOnClickOutside: true },
-        react_1.default.createElement(SearchBox, null,
-            react_1.default.createElement(TextEdit_1.TextEdit, { placeholder: placeholderText, defaultValue: "", onSubmit: (v) => (0, debounce_1.debounce)(() => {
-                    setSearchText(v);
-                }, { key: 'pagesearch', time: 200 }), defaultEditing: { focus: true }, singleLine: true, leftContent: react_1.default.createElement(Icon, null, MagnifyIconSvg), noGrow: true, allowUndo: false }),
-            react_1.default.createElement(CloseButton, { onClick: () => resWrap(undefined) }, closeText)),
-        react_1.default.createElement(Content, null, filteredItems.map((i) => (react_1.default.createElement(Row, { key: getKeyF(i), onClick: () => resWrap(i) }, renderItem(searchText, i)))))));
-};
-/**
- * opens a searchmodal programatically, and resolves to either undefined, or the selected item
- * @param p
- * @returns
- */
-const searchDialog = (p) => __awaiter(void 0, void 0, void 0, function* () {
-    const placeholderText = p.placeholderText || '';
-    const closeText = p.closeText || 'CLOSE';
-    return new Promise((res) => {
-        const wrapper = document.body.appendChild(document.createElement('div'));
-        react_dom_1.default.render(react_1.default.createElement(SearchModal, Object.assign({}, p, { placeholderText: placeholderText, closeText: closeText, res: (r) => res(r), wrapper: wrapper })), wrapper);
-    });
-});
-exports.searchDialog = searchDialog;
+__exportStar(require("./types"), exports);
+__exportStar(require("./SearchModal"), exports);
+__exportStar(require("./searchDialog"), exports);

package/dist/ui/components/SearchModal/searchDialog.d.ts

@@ -0,0 +1,7 @@
+import { ISearchDialog, TSearchModalRes } from './types';
+/**
+ * opens a searchmodal programatically, and resolves to either undefined, or the selected item
+ * @param p
+ * @returns
+ */
+export declare const searchDialog: <T>(p: ISearchDialog<T>) => Promise<TSearchModalRes<T>>;

package/dist/ui/components/SearchModal/searchDialog.js

@@ -0,0 +1,32 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchDialog = void 0;
+const SearchModal_1 = require("./SearchModal");
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+/**
+ * opens a searchmodal programatically, and resolves to either undefined, or the selected item
+ * @param p
+ * @returns
+ */
+const searchDialog = (p) => __awaiter(void 0, void 0, void 0, function* () {
+    const placeholderText = p.placeholderText || '';
+    const closeText = p.closeText || 'CLOSE';
+    return new Promise((res) => {
+        const wrapper = document.body.appendChild(document.createElement('div'));
+        react_dom_1.default.render(react_1.default.createElement(SearchModal_1.SearchModal, Object.assign({}, p, { placeholderText: placeholderText, closeText: closeText, res: (r) => res(r), wrapper: wrapper })), wrapper);
+    });
+});
+exports.searchDialog = searchDialog;

package/dist/ui/components/SearchModal/types.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export interface ISearchDialog<T> {
+    placeholderText?: string;
+    closeText?: string;
+    /**
+     * method run to render each filtered item
+     */
+    renderItem: (searchText: string, item: T) => JSX.Element | string;
+    /**
+     * all potential items
+     */
+    displayItems: T[];
+    /**
+     * run to filter items by search text
+     */
+    willDisplayItem: (searchText: string, item: T) => boolean;
+    /**
+     * get unique render key
+     */
+    getKeyF: (i: T) => string;
+}
+export declare type TSearchModalRes<T> = undefined | {
+    foundItem: T;
+    searchText: string;
+};

package/dist/ui/components/SearchModal/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/ui/components/TextEdit/TextEdit.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { StyledComponent } from 'styled-components';
 export declare const ValueReadonly: StyledComponent<"div", any, {}, never>;
-export declare const TextEdit: ({ defaultValue, defaultEditing, disableEdit, placeholder, className, singleLine, noGrow, attributes, leftContent, onSubmit, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, allowUndo, }: {
+export declare const TextEdit: ({ defaultValue, defaultEditing, disableEdit, placeholder, className, singleLine, noGrow, attributes, leftContent, onSubmit, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, allowUndo, onEscape, }: {
     /**
      * forces single row input style. will also enable 'Enter' to auto submit
      */
@@ -42,4 +42,8 @@ export declare const TextEdit: ({ defaultValue, defaultEditing, disableEdit, pla
      * if true, will add undo button after changes. if false, will submit after every keypress. default true
      */
     allowUndo?: boolean | undefined;
+    /**
+     * will call on user pressed escape
+     */
+    onEscape?: (() => void) | undefined;
 }) => JSX.Element;

package/dist/ui/components/TextEdit/TextEdit.js

@@ -73,7 +73,7 @@ const Icon = styled_components_1.default.div `
     filter: saturate(3);
   }
 `;
-const TextEdit = ({ defaultValue = '', defaultEditing, disableEdit = false, placeholder, className, singleLine = false, noGrow = false, attributes, leftContent, onSubmit, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, allowUndo = true, }) => {
+const TextEdit = ({ defaultValue = '', defaultEditing, disableEdit = false, placeholder, className, singleLine = false, noGrow = false, attributes, leftContent, onSubmit, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, allowUndo = true, onEscape, }) => {
     const ref = (0, react_1.useRef)(null);
     const taref = (0, react_1.useRef)(null);
     const [value, setValue] = (0, react_1.useState)(defaultValue);
@@ -134,10 +134,14 @@ const TextEdit = ({ defaultValue = '', defaultEditing, disableEdit = false, plac
                 if (!allowUndo) {
                     onSubmit(v.currentTarget.value, false);
                 }
-            }, placeholder: placeholder, rows: singleLine ? 1 : undefined, onKeyDown: (e) => singleLine &&
-                e.code.endsWith('Enter') &&
-                onSubmit(value, true) &&
-                false }),
+            }, placeholder: placeholder, rows: singleLine ? 1 : undefined, onKeyDown: (e) => {
+                if (singleLine && e.code.endsWith('Enter')) {
+                    onSubmit(value, true);
+                }
+                if (onEscape && e.code.endsWith('Escape')) {
+                    onEscape();
+                }
+            } }),
         allowUndo && (react_1.default.createElement(Right, null,
             valueChange && (react_1.default.createElement(Icon, { style: common_1.iconLeft, onClick: () => valueChange && onSubmit(value, false) },
                 react_1.default.createElement(images_1.SaveIcon, null))),

package/dist/ui/helpers/useOnScroll.d.ts

@@ -3,4 +3,13 @@ export interface IScroll {
     x: number;
     scrolled: boolean;
 }
-export declare function useOnScroll(): IScroll;
+export declare function useOnScroll({ onScroll, element, }?: {
+    /**
+     * defaults to window
+     */
+    element?: Element;
+    /**
+     * if provided will call on move
+     */
+    onScroll?: (e: Event, st: IScroll) => void;
+}): IScroll;

package/dist/ui/helpers/useOnScroll.js

@@ -14,20 +14,24 @@ function debounce(callback, time, ...args) {
         }, time);
     };
 }
-function useOnScroll() {
+function useOnScroll({ onScroll, element, } = {}) {
     const [state, setState] = (0, react_1.useState)({ scrolled: false, x: 0, y: 0 });
     (0, react_1.useEffect)(() => {
-        const listener = () => {
-            const y = window.scrollY;
-            const x = window.scrollX;
+        const listener = (e) => {
+            var _a, _b;
+            const y = (_a = element === null || element === void 0 ? void 0 : element.scrollTop) !== null && _a !== void 0 ? _a : window.scrollY;
+            const x = (_b = element === null || element === void 0 ? void 0 : element.scrollLeft) !== null && _b !== void 0 ? _b : window.scrollX;
             const r = { y, x, scrolled: !!y || !!x };
             setState(r);
+            onScroll === null || onScroll === void 0 ? void 0 : onScroll(e, r);
         };
-        document.addEventListener(`scroll`, debounce(listener, 10));
+        document.addEventListener(`scroll`, (e) => debounce(() => listener(e), 10), {
+            passive: true,
+        });
         return () => {
             document.removeEventListener(`scroll`, listener);
         };
-    }, []);
+    }, [element, onScroll]);
     return state;
 }
 exports.useOnScroll = useOnScroll;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-common",
-  "version": "0.0.189",
+  "version": "0.0.192",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Andrei Gec <@andreigec> (https://gec.dev/)",