ag-common 0.0.367 → 0.0.369

package/dist/ui/components/DropdownList/Base.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IDropdownList } from './types';
+export declare function DropdownList<T>(p: IDropdownList<T>): JSX.Element;

package/dist/ui/components/DropdownList/Base.js

@@ -0,0 +1,161 @@
+"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.DropdownList = void 0;
+const dom_1 = require("../../helpers/dom");
+const common_1 = require("../../styles/common");
+const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
+const colours_1 = require("../../styles/colours");
+const KebabDots_1 = require("../KebabDots");
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importStar(require("react"));
+const Base = styled_components_1.default.div `
+  display: flex;
+  flex-flow: row;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  flex-grow: 0;
+`;
+const DropItems = styled_components_1.default.div `
+  flex-flow: column;
+  z-index: 5;
+  display: none;
+  background-color: white;
+  cursor: default;
+  width: 100%;
+  position: absolute;
+
+  overflow-y: auto;
+  &[data-open='true'] {
+    display: flex;
+  }
+  ${(0, common_1.bounce)('data-bounced')}
+`;
+const ListItemStyle = styled_components_1.default.div `
+  z-index: 1;
+  font-weight: 500;
+  padding-left: 0.5rem;
+  flex-grow: 1;
+  padding: 1rem;
+  cursor: pointer;
+  display: flex;
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  &[data-default='false'] {
+    &[data-selected='true'] {
+      opacity: 1 !important;
+      background-color: ${colours_1.colours.orangeRed} !important;
+    }
+    &[data-selected='false'] {
+      &:hover {
+        opacity: 0.9 !important;
+        background-color: ${colours_1.colours.orange} !important;
+      }
+    }
+  }
+
+  &:nth-child(even) {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  &:nth-child(odd) {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+`;
+const ListItem = ({ render, onChange, selected, defaultV = false, }) => (react_1.default.createElement(ListItemStyle, { "data-selected": selected, "data-default": defaultV, onClick: (e) => {
+        if (!selected) {
+            onChange === null || onChange === void 0 ? void 0 : onChange();
+        }
+        e.preventDefault();
+    } }, render));
+function DropdownList(p) {
+    const { options, value, placeholder, className, renderF, shadow = '#555', maxHeight = '50vh', } = p;
+    const ref = (0, react_1.useRef)(null);
+    const [state, setState] = (0, react_1.useState)(value);
+    const [open, setOpen] = (0, react_1.useState)(p.open);
+    const [bounced, setBounced] = (0, react_1.useState)(false);
+    (0, useOnClickOutside_1.useOnClickOutside)({ disabled: !open, ref, moveMouseOutside: false }, () => {
+        setOpen(false);
+        setBounced(false);
+        p.onChange(undefined, 0);
+    });
+    (0, react_1.useEffect)(() => {
+        const newv = value;
+        if (JSON.stringify(newv) !== JSON.stringify(value)) {
+            setState(newv);
+        }
+    }, [options, value]);
+    const [style, setStyle] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d;
+        const maxLen = 20;
+        const newStyle = {
+            minWidth: `calc(${maxLen}ch + 2rem)`,
+        };
+        const minPx = (0, dom_1.convertRemToPixels)(2 + maxLen / 2);
+        const offsetLeft = (_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetLeft) !== null && _b !== void 0 ? _b : 0;
+        if (offsetLeft < minPx) {
+            newStyle.left = '0';
+        }
+        else {
+            newStyle.right = '0';
+        }
+        const b = (_d = (_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) !== null && _d !== void 0 ? _d : { bottom: 0 };
+        const ih = typeof window !== 'undefined' ? window.innerHeight : 0;
+        //below screen
+        if (b.bottom + 50 > ih) {
+            newStyle.bottom = '1rem';
+        }
+        else {
+            newStyle.top = '0';
+        }
+        newStyle.filter = `drop-shadow(1px 1px 0.5rem ${shadow})`;
+        newStyle.maxHeight = maxHeight;
+        if (JSON.stringify(style) !== JSON.stringify(newStyle)) {
+            setStyle(newStyle);
+        }
+    }, [maxHeight, open, options, renderF, shadow, style]);
+    const defaultRender = !p.value ? react_1.default.createElement(KebabDots_1.KebabDots, null) : react_1.default.createElement(react_1.default.Fragment, null, p.renderF(p.value));
+    const openDisplay = p.children || (react_1.default.createElement(ListItem, { selected: true, render: defaultRender, key: defaultRender.key, defaultV: !p.value }));
+    (0, react_1.useEffect)(() => {
+        if (!bounced && open) {
+            setBounced(true);
+        }
+    }, [bounced, open]);
+    return (react_1.default.createElement(Base, { className: className, ref: ref, title: placeholder, onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            setOpen(!open);
+        } },
+        react_1.default.createElement(DropItems, { "data-open": open, style: style, "data-bounced": bounced }, open &&
+            options.map((s, i) => (react_1.default.createElement(ListItem, { key: p.renderF(s).key, render: p.renderF(s), onChange: () => p.onChange(s, i), selected: s === state })))),
+        openDisplay));
+}
+exports.DropdownList = DropdownList;

package/dist/ui/components/DropdownList/Dialog.d.ts

@@ -0,0 +1,7 @@
+import { IDropdownList } from './types';
+export declare const DropdownListDialog: <T>(p: {
+    position: {
+        x: number;
+        y: number;
+    };
+} & Omit<IDropdownList<T>, "onChange">) => Promise<[v: T, index: number] | undefined>;

package/dist/ui/components/DropdownList/Dialog.js

@@ -0,0 +1,38 @@
+"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.DropdownListDialog = void 0;
+const index_1 = require("./index");
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const DropdownListDialog = (p) => __awaiter(void 0, void 0, void 0, function* () {
+    return new Promise((res) => {
+        const id = 'ag-common-ddld';
+        if (document.querySelectorAll('#' + id).length) {
+            res(undefined);
+            return;
+        }
+        const wrapper = document.body.appendChild(document.createElement('div'));
+        wrapper.id = id;
+        wrapper.style.position = 'absolute';
+        wrapper.style.top = `${p.position.y}px`;
+        wrapper.style.left = `${p.position.x}px`;
+        react_dom_1.default.render(react_1.default.createElement(index_1.DropdownList, Object.assign({}, p, { open: true, onChange: (v, i) => {
+                react_dom_1.default.unmountComponentAtNode(wrapper);
+                wrapper.remove();
+                res(!v ? undefined : [v, i]);
+            } }), "\u00A0"), wrapper);
+    });
+});
+exports.DropdownListDialog = DropdownListDialog;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { IDropdownList } from './types';
-export declare function DropdownList<T>(p: IDropdownList<T>): JSX.Element;
+export * from './Base';
+export * from './Dialog';

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

@@ -10,151 +10,9 @@ 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 __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.DropdownList = void 0;
-const dom_1 = require("../../helpers/dom");
-const common_1 = require("../../styles/common");
-const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
-const colours_1 = require("../../styles/colours");
-const KebabDots_1 = require("../KebabDots");
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_1 = __importStar(require("react"));
-const Base = styled_components_1.default.div `
-  display: flex;
-  flex-flow: row;
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  flex-grow: 0;
-`;
-const DropItems = styled_components_1.default.div `
-  flex-flow: column;
-  z-index: 5;
-  display: none;
-  background-color: white;
-  cursor: default;
-  width: 100%;
-  position: absolute;
-
-  overflow-y: auto;
-  &[data-open='true'] {
-    display: flex;
-  }
-  ${(0, common_1.bounce)('data-bounced')}
-`;
-const ListItemStyle = styled_components_1.default.div `
-  z-index: 1;
-  font-weight: 500;
-  padding-left: 0.5rem;
-  flex-grow: 1;
-  padding: 1rem;
-  cursor: pointer;
-  display: flex;
-  overflow: hidden;
-  justify-content: center;
-  align-items: center;
-  &[data-default='false'] {
-    &[data-selected='true'] {
-      opacity: 1 !important;
-      background-color: ${colours_1.colours.orangeRed} !important;
-    }
-    &[data-selected='false'] {
-      &:hover {
-        opacity: 0.9 !important;
-        background-color: ${colours_1.colours.orange} !important;
-      }
-    }
-  }
-
-  &:nth-child(even) {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-  &:nth-child(odd) {
-    background-color: rgba(0, 0, 0, 0.2);
-  }
-`;
-const ListItem = ({ render, onChange, selected, defaultV = false, }) => (react_1.default.createElement(ListItemStyle, { "data-selected": selected, "data-default": defaultV, onClick: (e) => {
-        if (!selected) {
-            onChange === null || onChange === void 0 ? void 0 : onChange();
-        }
-        e.preventDefault();
-    } }, render));
-function DropdownList(p) {
-    const { options, value, placeholder, className, renderF, shadow = '#555', maxHeight = '50vh', } = p;
-    const ref = (0, react_1.useRef)(null);
-    const [state, setState] = (0, react_1.useState)(value);
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const [bounced, setBounced] = (0, react_1.useState)(false);
-    (0, useOnClickOutside_1.useOnClickOutside)({ disabled: !open, ref, moveMouseOutside: false }, () => {
-        setOpen(false);
-        setBounced(false);
-    });
-    (0, react_1.useEffect)(() => {
-        const newv = value;
-        if (JSON.stringify(newv) !== JSON.stringify(value)) {
-            setState(newv);
-        }
-    }, [options, value]);
-    const [style, setStyle] = (0, react_1.useState)({});
-    (0, react_1.useEffect)(() => {
-        var _a, _b, _c, _d;
-        const maxLen = 20;
-        const newStyle = {
-            minWidth: `calc(${maxLen}ch + 2rem)`,
-        };
-        const minPx = (0, dom_1.convertRemToPixels)(2 + maxLen / 2);
-        const offsetLeft = (_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetLeft) !== null && _b !== void 0 ? _b : 0;
-        if (offsetLeft < minPx) {
-            newStyle.left = '0';
-        }
-        else {
-            newStyle.right = '0';
-        }
-        const b = (_d = (_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) !== null && _d !== void 0 ? _d : { bottom: 0 };
-        const ih = typeof window !== 'undefined' ? window.innerHeight : 0;
-        //below screen
-        if (b.bottom + 50 > ih) {
-            newStyle.bottom = '1rem';
-        }
-        else {
-            newStyle.top = '0';
-        }
-        newStyle.filter = `drop-shadow(1px 1px 0.5rem ${shadow})`;
-        newStyle.maxHeight = maxHeight;
-        if (JSON.stringify(style) !== JSON.stringify(newStyle)) {
-            setStyle(newStyle);
-        }
-    }, [maxHeight, open, options, renderF, shadow, style]);
-    const defaultRender = !p.value ? react_1.default.createElement(KebabDots_1.KebabDots, null) : react_1.default.createElement(react_1.default.Fragment, null, p.renderF(p.value));
-    const openDisplay = p.children || (react_1.default.createElement(ListItem, { selected: true, render: defaultRender, key: defaultRender.key, defaultV: !p.value }));
-    (0, react_1.useEffect)(() => {
-        if (!bounced && open) {
-            setBounced(true);
-        }
-    }, [bounced, open]);
-    return (react_1.default.createElement(Base, { className: className, ref: ref, title: placeholder, onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            setOpen(!open);
-        } },
-        react_1.default.createElement(DropItems, { "data-open": open, style: style, "data-bounced": bounced }, open &&
-            options.map((s, i) => (react_1.default.createElement(ListItem, { key: p.renderF(s).key, render: p.renderF(s), onChange: () => p.onChange(s, i), selected: s === state })))),
-        openDisplay));
-}
-exports.DropdownList = DropdownList;
+__exportStar(require("./Base"), exports);
+__exportStar(require("./Dialog"), exports);

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

@@ -5,10 +5,10 @@ export interface IDropdownList<T> {
      */
     options: T[];
     /**
-     * selected item from options.
+     * selected item from options. closing will return undefined
      */
     value?: T;
-    onChange: (v: T, index: number) => void;
+    onChange: (v: T | undefined, index: number) => void;
     /**
      * placeholder title for list
      */
@@ -30,4 +30,6 @@ export interface IDropdownList<T> {
      * if not provided, will default display value, then kebab dots
      */
     children?: ReactNode;
+    /** default false */
+    open?: boolean;
 }

package/dist/ui/components/Search/Base.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ISearchDialog, TSearchModalRes } from './types';
-export declare const SearchBase: <T>({ onSelectItem, onSearchTextChange, placeholderText, renderItem, displayItems, willDisplayItem, getKeyF, className, texts, }: ISearchDialog<T> & {
+export declare const SearchBase: <T>({ onSelectItem, onSearchTextChange, placeholderText, renderItem, displayItems, willDisplayItem, getKeyF, className, texts, maxDisplayItems, }: ISearchDialog<T> & {
     onSearchTextChange?: ((v: string) => void) | undefined;
     onSelectItem?: ((v: TSearchModalRes<T>) => void) | undefined;
 }) => JSX.Element;

package/dist/ui/components/Search/Base.js

@@ -34,6 +34,7 @@ const styles_1 = require("../../styles");
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_1 = __importStar(require("react"));
 const Magnify_1 = require("../../icons/Magnify");
+const common_1 = require("../../../common");
 const Base = styled_components_1.default.div `
   display: flex;
   flex-flow: column;
@@ -93,7 +94,7 @@ const CrossIconStyled = (0, styled_components_1.default)(CrossIcon_1.CrossIcon)
     right: 2rem;
   }
 `;
-const SearchBase = ({ onSelectItem, onSearchTextChange, placeholderText, renderItem, displayItems, willDisplayItem, getKeyF, className, texts, }) => {
+const SearchBase = ({ onSelectItem, onSearchTextChange, placeholderText, renderItem, displayItems, willDisplayItem, getKeyF, className, texts, maxDisplayItems = 20, }) => {
     var _a, _b;
     const [searchText, setSearchText] = (0, react_1.useState)('');
     const resWrap = (foundItem) => {
@@ -104,7 +105,8 @@ const SearchBase = ({ onSelectItem, onSearchTextChange, placeholderText, renderI
             onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem({ foundItem, searchText });
         }
     };
-    const filteredItems = displayItems.filter((i) => willDisplayItem(searchText, i));
+    const filteredItemsRaw = displayItems.filter((i) => willDisplayItem(searchText, i));
+    const { part: filteredItems } = (0, common_1.take)(filteredItemsRaw, maxDisplayItems);
     const showText = (_b = (_a = texts === null || texts === void 0 ? void 0 : texts.totalItems) === null || _a === void 0 ? void 0 : _a.call(texts, filteredItems.length, displayItems.length)) !== null && _b !== void 0 ? _b : `Showing ${filteredItems.length} out of ${displayItems.length} total
   items`;
     const textEditRef = (0, react_1.createRef)();

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

@@ -17,6 +17,8 @@ export interface ISearchDialog<T> {
      * run to filter items by search text
      */
     willDisplayItem: (searchText: string, item: T) => boolean;
+    /** how many search items to return at most. default 20 */
+    maxDisplayItems?: number;
     /**
      * get unique render key
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-common",
-  "version": "0.0.367",
+  "version": "0.0.369",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Andrei Gec <@andreigec> (https://gec.dev/)",
@@ -26,7 +26,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hot-toast": "2.x",
-    "typescript": "4.x"
+    "typescript": "4.x",
+    "eslint-import-resolver-typescript": "3.x"
   },
   "peerDependencies": {
     "styled-components": ">=5"
@@ -47,7 +48,7 @@
     "@types/react-dom": "18.0.9",
     "@types/styled-components": "5.1.26",
     "cross-env": "7.0.3",
-    "eslint-config-e7npm": "0.0.5",
+    "eslint-config-e7npm": "0.0.6",
     "rimraf": "3.0.2",
     "styled-components": "5.3.6"
   },