ag-common 0.0.152 → 0.0.156

package/LICENSE.md

@@ -1,6 +1,10 @@
 ISC License
+---
 
-Copyright 2021 Andrei Gec
+ag-common - Copyright 2021 Andrei Gec
+check out https://github.com/andreigec/ag-common or https://gec.dev for more info
+
+---
 
 Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
 

package/dist/common/helpers/i18n.d.ts

@@ -2,7 +2,7 @@ declare type TLangExceptEn = 'id' | 'vi';
 export declare type TLang = TLangExceptEn | 'en';
 export declare const AllLang: TLang[];
 export declare type TResource = {
-    [k in TLangExceptEn]: string | null;
+    [k in TLangExceptEn]?: string;
 } & {
     en: string;
 };

package/dist/common/helpers/string.d.ts

@@ -25,7 +25,26 @@ export declare function toTitleCase(str: string): string;
  * @returns
  */
 export declare function replaceRemove(str: string, ...params: string[]): string;
-export declare function containsInsensitive(str: string, ...args: string[]): boolean;
+/**
+ * returns >-1 if found
+ * @param str
+ * @param args
+ * @returns
+ */
+export declare function containsInsensitiveIndex({ str, fromLast, }: {
+    /**
+     * if true, will return highest number. default false
+     */
+    fromLast?: boolean;
+    str: string;
+}, ...args: string[]): number;
+/**
+ * returns true if text is found
+ * @param str
+ * @param args
+ * @returns
+ */
+export declare const containsInsensitive: (str: string, ...args: string[]) => boolean;
 /**
  * safely handles circular references
  * @param obj

package/dist/common/helpers/string.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stringToObject = exports.chunkString = exports.safeStringify = exports.containsInsensitive = exports.replaceRemove = exports.toTitleCase = exports.niceUrl = exports.truncate = exports.trim = exports.trimSide = exports.csvJSON = exports.fromBase64 = exports.toBase64 = void 0;
+exports.stringToObject = exports.chunkString = exports.safeStringify = exports.containsInsensitive = exports.containsInsensitiveIndex = exports.replaceRemove = exports.toTitleCase = exports.niceUrl = exports.truncate = exports.trim = exports.trimSide = exports.csvJSON = exports.fromBase64 = exports.toBase64 = void 0;
 const toBase64 = (str) => Buffer.from(str).toString('base64');
 exports.toBase64 = toBase64;
 const fromBase64 = (str) => Buffer.from(decodeURIComponent(str), 'base64').toString();
@@ -116,13 +116,35 @@ function replaceRemove(str, ...params) {
     return ret;
 }
 exports.replaceRemove = replaceRemove;
-function containsInsensitive(str, ...args) {
+/**
+ * returns >-1 if found
+ * @param str
+ * @param args
+ * @returns
+ */
+function containsInsensitiveIndex({ str, fromLast = false, }, ...args) {
     if (!str || !args) {
-        return false;
+        return -1;
+    }
+    const largs = args.map((a) => a.toLowerCase());
+    const lstr = str.toLowerCase();
+    const finds = largs
+        .map((arg) => (fromLast ? lstr.lastIndexOf(arg) : lstr.indexOf(arg)))
+        .filter((s) => s !== -1)
+        .sort();
+    if (finds.length === 0) {
+        return -1;
     }
-    const l = str.toLowerCase();
-    return !!args.find((a) => l.includes(a));
+    return !fromLast ? finds[0] : finds[finds.length - 1];
 }
+exports.containsInsensitiveIndex = containsInsensitiveIndex;
+/**
+ * returns true if text is found
+ * @param str
+ * @param args
+ * @returns
+ */
+const containsInsensitive = (str, ...args) => containsInsensitiveIndex({ str }, ...args) !== -1;
 exports.containsInsensitive = containsInsensitive;
 /**
  * safely handles circular references

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

@@ -50,7 +50,7 @@ const SItems = styled_components_1.default.div `
       max-height: ${maxHeight};
     `}
 
-  overflow-y: scroll;
+  overflow-y: auto;
   ${({ open }) => open &&
     (0, styled_components_1.css) `
       display: flex;

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

@@ -0,0 +1,22 @@
+/// <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 const searchDialog: <T>(p: ISearchDialog<T>) => Promise<T | undefined>;

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

@@ -0,0 +1,129 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __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 react_1 = __importStar(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const debounce_1 = require("../../helpers/debounce");
+const media_1 = require("../../styles/media");
+const Modal_1 = require("../Modal");
+const TextEdit_1 = require("../TextEdit/TextEdit");
+const ModalStyled = (0, styled_components_1.default)(Modal_1.Modal) `
+  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;
+  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 ret = (v) => {
+        try {
+            document.body.style.overflow = originalStyle || '';
+            res(v);
+        }
+        finally {
+            wrapper.remove();
+        }
+    };
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const filteredItems = displayItems.filter((i) => willDisplayItem(searchText, i));
+    return (react_1.default.createElement(ModalStyled, { position: "center", topPosition: "center", open: true, setOpen: () => ret(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: () => ret(undefined) }, closeText)),
+        react_1.default.createElement(Content, null, filteredItems.map((i) => (react_1.default.createElement(Row, { key: getKeyF(i), onClick: () => ret(i) }, renderItem(searchText, i)))))));
+};
+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;

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

@@ -1,23 +1,26 @@
 /// <reference types="react" />
 import { StyledComponent } from 'styled-components';
 export declare const ValueReadonly: StyledComponent<"div", any, {}, never>;
-export declare const TextEdit: ({ defaultValue, defaultEditing, onSubmit, disableEdit, placeholder, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, className, singleLine, noGrow, }: {
+export declare const TextEdit: ({ defaultValue, defaultEditing, disableEdit, placeholder, className, singleLine, noGrow, attributes, leftContent, onSubmit, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, allowUndo, }: {
     /**
      * forces single row input style. will also enable 'Enter' to auto submit
      */
     singleLine?: boolean | undefined;
     className?: string | undefined;
-    defaultValue: string;
     /**
-     * if truthy will enable. if focus is true, will also focus on open
+     * default value of field. default empty
+     */
+    defaultValue?: string | undefined;
+    /**
+     * if truthy will enable text edit mode by default. if focus is true, will also focus on open
      */
     defaultEditing?: {
-        focus: boolean;
+        focus?: boolean | undefined;
     } | undefined;
+    onSubmit: (val: string, enterPressed: boolean) => void;
     /**
-     * on submit.
+     * disable edit text functionality
      */
-    onSubmit: (val: string, enterPressed: boolean) => void;
     disableEdit?: boolean | undefined;
     placeholder?: string | undefined;
     onEditingChange?: ((editing: boolean) => void) | undefined;
@@ -27,4 +30,16 @@ export declare const TextEdit: ({ defaultValue, defaultEditing, onSubmit, disabl
      * if true, will not grow. default false
      */
     noGrow?: boolean | undefined;
+    /**
+     * will set these attributes directly on element. can put data-* here
+     */
+    attributes?: Record<string, string | number | boolean> | undefined;
+    /**
+     * optional content at the left of the box
+     */
+    leftContent?: JSX.Element | undefined;
+    /**
+     * if true, will add undo button after changes. if false, will submit after every keypress. default true
+     */
+    allowUndo?: boolean | undefined;
 }) => JSX.Element;

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

@@ -69,7 +69,7 @@ const Icon = styled_components_1.default.div `
     filter: saturate(3);
   }
 `;
-const TextEdit = ({ defaultValue, defaultEditing, onSubmit, disableEdit = false, placeholder, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, className, singleLine = false, noGrow = false, }) => {
+const TextEdit = ({ defaultValue = '', defaultEditing, disableEdit = false, placeholder, className, singleLine = false, noGrow = false, attributes, leftContent, onSubmit, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, allowUndo = true, }) => {
     const ref = (0, react_1.useRef)(null);
     const taref = (0, react_1.useRef)(null);
     const [value, setValue] = (0, react_1.useState)(defaultValue);
@@ -107,7 +107,8 @@ const TextEdit = ({ defaultValue, defaultEditing, onSubmit, disableEdit = false,
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [defaultEditing]);
     if (!editing || disableEdit) {
-        return (react_1.default.createElement(common_1.ValueBox, Object.assign({}, common_2.noDrag, { className: className, "data-editing": "false", onClick: () => onClickNotEditing === null || onClickNotEditing === void 0 ? void 0 : onClickNotEditing(), "data-pointer": onClickNotEditing ? 'true' : 'false', "data-nogrow": noGrow }),
+        return (react_1.default.createElement(common_1.ValueBox, Object.assign({}, common_2.noDrag, { className: className, "data-editing": "false", onClick: () => onClickNotEditing === null || onClickNotEditing === void 0 ? void 0 : onClickNotEditing(), "data-pointer": onClickNotEditing ? 'true' : 'false', "data-nogrow": noGrow }, attributes),
+            leftContent || null,
             react_1.default.createElement(exports.ValueReadonly, { "data-type": "text" }, value),
             react_1.default.createElement(Right, null, !disableEdit && (react_1.default.createElement(Icon, { style: common_1.iconRight, onClick: (e) => {
                     e.stopPropagation();
@@ -115,9 +116,6 @@ const TextEdit = ({ defaultValue, defaultEditing, onSubmit, disableEdit = false,
                 } },
                 react_1.default.createElement(images_1.PencilIcon, null))))));
     }
-    if (!open) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const Comp = singleLine
         ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -125,18 +123,24 @@ const TextEdit = ({ defaultValue, defaultEditing, onSubmit, disableEdit = false,
         : ValueTextArea;
     return (react_1.default.createElement(ValueBoxEdit, Object.assign({}, common_2.noDrag, { className: className, "data-editing": "true", 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ref: ref, tabIndex: editing ? 0 : undefined, "data-nogrow": noGrow }),
-        react_1.default.createElement(Comp, { "data-editing": "true", "data-valuechange": valueChange.toString(), ref: taref, "data-type": "text", value: value, onChange: (v) => setValue(v.currentTarget.value), placeholder: placeholder, rows: singleLine ? 1 : undefined, onKeyDown: (e) => singleLine &&
+        ref: ref, tabIndex: editing ? 0 : undefined, "data-nogrow": noGrow }, attributes),
+        leftContent || null,
+        react_1.default.createElement(Comp, { "data-editing": "true", "data-valuechange": valueChange.toString(), ref: taref, "data-type": "text", value: value, onChange: (v) => {
+                setValue(v.currentTarget.value);
+                if (!allowUndo) {
+                    onSubmit(v.currentTarget.value, false);
+                }
+            }, placeholder: placeholder, rows: singleLine ? 1 : undefined, onKeyDown: (e) => singleLine &&
                 e.code.endsWith('Enter') &&
                 onSubmit(value, true) &&
                 false }),
-        react_1.default.createElement(Right, null,
+        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))),
             (valueChange || editing !== !!defaultEditing) && (react_1.default.createElement(Icon, { style: common_1.iconRight, onClick: () => {
                     setEditing(!!defaultEditing);
                     setValue(defaultValue);
                 } },
-                react_1.default.createElement(images_1.UndoIcon, null))))));
+                react_1.default.createElement(images_1.UndoIcon, null)))))));
 };
 exports.TextEdit = TextEdit;

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

@@ -15,6 +15,7 @@ export * from './LogoutButton';
 export * from './Modal';
 export * from './Prompt';
 export * from './RowOrColumn';
+export * from './SearchModal';
 export * from './Sidebar';
 export * from './Table';
 export * from './TextEdit';

package/dist/ui/components/index.js

@@ -27,6 +27,7 @@ __exportStar(require("./LogoutButton"), exports);
 __exportStar(require("./Modal"), exports);
 __exportStar(require("./Prompt"), exports);
 __exportStar(require("./RowOrColumn"), exports);
+__exportStar(require("./SearchModal"), exports);
 __exportStar(require("./Sidebar"), exports);
 __exportStar(require("./Table"), exports);
 __exportStar(require("./TextEdit"), exports);

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

@@ -16,5 +16,6 @@ export * from './useLocalStorage';
 export * from './useLockBodyScroll';
 export * from './useOnClickOutside';
 export * from './useOnScroll';
+export * from './useOverloadPageSearch';
 export * from './useQueryString';
 export * from './useResize';

package/dist/ui/helpers/index.js

@@ -28,5 +28,6 @@ __exportStar(require("./useLocalStorage"), exports);
 __exportStar(require("./useLockBodyScroll"), exports);
 __exportStar(require("./useOnClickOutside"), exports);
 __exportStar(require("./useOnScroll"), exports);
+__exportStar(require("./useOverloadPageSearch"), exports);
 __exportStar(require("./useQueryString"), exports);
 __exportStar(require("./useResize"), exports);

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

@@ -2,4 +2,4 @@
 import { TLang, TResource } from '../../common/helpers/i18n';
 export declare const useTranslation: <T extends {
     [a: string]: TResource;
-}>(texts: T, lang: TLang) => (lineText: keyof T) => string | JSX.Element | null | undefined;
+}>(texts: T, lang: TLang) => (lineText: keyof T) => string | JSX.Element | undefined;

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

@@ -0,0 +1,7 @@
+export declare const useOverloadPageSearch: ({ disabled, onTrigger, }: {
+    /**
+     * default false
+     */
+    disabled?: boolean | undefined;
+    onTrigger: () => void;
+}) => void;

package/dist/ui/helpers/useOverloadPageSearch.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOverloadPageSearch = void 0;
+const react_1 = require("react");
+const useOverloadPageSearch = ({ disabled = false, onTrigger, }) => {
+    (0, react_1.useEffect)(() => {
+        const ctrlF = (e) => {
+            if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
+                e.preventDefault();
+                onTrigger();
+            }
+        };
+        window.removeEventListener('keydown', ctrlF);
+        if (!disabled) {
+            window.addEventListener('keydown', ctrlF);
+        }
+        return () => window.removeEventListener('keydown', ctrlF);
+    }, [disabled, onTrigger]);
+};
+exports.useOverloadPageSearch = useOverloadPageSearch;

package/dist/ui/styles/common.d.ts

@@ -2,6 +2,7 @@
 export declare const HardOutline: (colour: string) => import("styled-components").FlattenSimpleInterpolation;
 export declare const Shadow: (colour?: string) => import("styled-components").FlattenSimpleInterpolation;
 export declare const NoTextSelect: import("styled-components").FlattenSimpleInterpolation;
+export declare const TextOverflowEllipsis: import("styled-components").FlattenSimpleInterpolation;
 export declare const CssTransparentBlock: import("styled-components").FlattenSimpleInterpolation;
 export declare const FadeBottom: ({ height }: {
     height: string;

package/dist/ui/styles/common.js

@@ -19,7 +19,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullScreenPage = exports.noDrag = exports.Card = exports.FadeBottom = exports.CssTransparentBlock = exports.NoTextSelect = exports.Shadow = exports.HardOutline = void 0;
+exports.FullScreenPage = exports.noDrag = exports.Card = exports.FadeBottom = exports.CssTransparentBlock = exports.TextOverflowEllipsis = exports.NoTextSelect = exports.Shadow = exports.HardOutline = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
 const colours_1 = require("./colours");
 const HardOutline = (colour) => (0, styled_components_1.css) `
@@ -42,6 +42,10 @@ exports.NoTextSelect = (0, styled_components_1.css) `
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
 `;
+exports.TextOverflowEllipsis = (0, styled_components_1.css) `
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
 exports.CssTransparentBlock = (0, styled_components_1.css) `
   background-color: rgba(150, 150, 150, 0.5);
   border-radius: 3px;

package/package.json

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