ag-common 0.0.256 → 0.0.259

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

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

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

@@ -29,8 +29,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchBase = void 0;
 const helpers_1 = require("../../helpers");
 const TextEdit_1 = require("../TextEdit");
+const styles_1 = require("../../styles");
 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: column;
+  flex-grow: 1;
+  width: 100%;
+`;
 const SearchBox = styled_components_1.default.div `
   padding: 1rem;
   display: flex;
@@ -39,6 +46,12 @@ const SearchBox = styled_components_1.default.div `
   align-items: center;
   width: calc(100% - 2rem);
   margin: auto;
+
+  @media ${styles_1.smallScreen} {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
 `;
 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" })));
@@ -68,19 +81,22 @@ const Content = styled_components_1.default.div `
   max-height: calc(100vh - 20rem);
   overflow-y: auto;
   overflow-x: hidden;
+
+  flex-grow: 1;
   &[data-hasitems='true'] {
     padding-bottom: 0.5rem;
   }
+  @media ${styles_1.smallScreen} {
+    margin: 0;
+    width: 100%;
+    margin-top: 1rem;
+  }
 `;
 const Row = styled_components_1.default.div `
   width: 100%;
-  height: 100%;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
 `;
-const SearchBase = ({ onSelectItem, onSearchTextChange, placeholderText, closeText, renderItem, displayItems, willDisplayItem, getKeyF, }) => {
+const SearchBase = ({ onSelectItem, onSearchTextChange, placeholderText, closeText, renderItem, displayItems, willDisplayItem, getKeyF, className, texts, }) => {
+    var _a, _b;
     const [searchText, setSearchText] = (0, react_1.useState)('');
     const resWrap = (foundItem) => {
         if (!foundItem) {
@@ -91,13 +107,17 @@ const SearchBase = ({ onSelectItem, onSearchTextChange, placeholderText, closeTe
         }
     };
     const filteredItems = displayItems.filter((i) => willDisplayItem(searchText, i));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(SearchBox, null,
+    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`;
+    return (react_1.default.createElement(Base, { className: className },
+        react_1.default.createElement(SearchBox, { "data-type": "search" },
             react_1.default.createElement(TextEdit_1.TextEdit, { placeholder: placeholderText, defaultValue: "", onSubmit: (v) => (0, helpers_1.debounce)(() => {
                     setSearchText(v);
                     onSearchTextChange === null || onSearchTextChange === void 0 ? void 0 : onSearchTextChange(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), onClickOutsideWithNoValue: null }),
             react_1.default.createElement(CloseButton, { onClick: () => resWrap(undefined) }, closeText)),
-        react_1.default.createElement(Content, { "data-hasitems": !!filteredItems.length }, filteredItems.map((i, index) => (react_1.default.createElement(Row, { key: getKeyF(i), onClick: () => resWrap(i) }, renderItem(searchText, i, index)))))));
+        react_1.default.createElement(Content, { "data-hasitems": !!filteredItems.length, "data-type": "content" },
+            filteredItems.map((i, index) => (react_1.default.createElement(Row, { key: getKeyF(i), onClick: () => resWrap(i) }, renderItem(searchText, i, index)))),
+            searchText && react_1.default.createElement(Row, null, showText))));
 };
 exports.SearchBase = SearchBase;

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

@@ -17,6 +17,13 @@ export interface ISearchDialog<T> {
      * get unique render key
      */
     getKeyF: (i: T) => string;
+    className?: string;
+    texts?: {
+        /**
+         * default if not provided: "showing X out of Y total items"
+         */
+        totalItems?: (showing: number, outof: number) => string;
+    };
 }
 export declare type TSearchModalRes<T> = undefined | {
     foundItem: T;

package/dist/ui/helpers/useQueryString.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useQueryStringSingle = exports.useQueryStringArray = exports.useQueryStringRaw = exports.isServer = void 0;
 const object_1 = require("../../common/helpers/object");
+const common_1 = require("../../common");
 const react_1 = require("react");
 exports.isServer = typeof window === 'undefined';
 /**
@@ -26,8 +27,13 @@ const useQueryStringRaw = ({ name, queryValues, defaultValue, stringify, parse,
             delete qv[name];
         }
         const qs = '?' + (0, object_1.objectToString)(qv, '=', '&');
-        const loc = location.pathname + qs + window.location.hash;
-        window.history.replaceState({}, '', loc);
+        if (!exports.isServer) {
+            const loc = window.location.pathname + qs + window.location.hash;
+            window.history.replaceState({}, '', loc);
+        }
+        else {
+            (0, common_1.info)('cant change url params on server');
+        }
         setStateRaw(v);
     };
     //

package/package.json

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