ag-common 0.0.386 → 0.0.388

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface IAutoHideSearchBox {
+    searchText: string;
+    setSearchText: (val: string, enterPressed: boolean) => void;
+    onOpenToggle?: (open: boolean) => void;
+    className?: string;
+}
+export declare const AutoHideSearchBox: (p: IAutoHideSearchBox) => JSX.Element;

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

@@ -0,0 +1,103 @@
+"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.AutoHideSearchBox = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = __importStar(require("react"));
+const helpers_1 = require("../../helpers");
+const icons_1 = require("../../icons");
+const styles_1 = require("../../styles");
+const SearchBox_1 = require("./SearchBox");
+const Base = styled_1.default.div `
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  margin-left: 1rem;
+
+  @media ${styles_1.bigScreen} {
+    width: 20rem;
+  }
+`;
+const Icon = styled_1.default.div `
+  display: flex;
+  margin-right: 0.5rem;
+  > svg {
+    width: 1.2rem;
+    height: 1.2rem;
+    fill: white;
+  }
+`;
+const SearchBoxStyled = (0, styled_1.default)(SearchBox_1.SearchBox) `
+  transition: width 200ms ease-in-out;
+
+  overflow: hidden;
+  padding: 0;
+  &[data-open='false'] {
+    width: 0;
+    padding: 0;
+  }
+  @media ${styles_1.smallScreen} {
+    padding: 0;
+  }
+`;
+const AutoHideSearchBox = (p) => {
+    const [open, setOpen] = (0, react_1.useState)(!!p.searchText);
+    const textEditRef = (0, react_1.createRef)();
+    (0, helpers_1.useGranularEffect)(() => {
+        var _a;
+        const newOpen = !!p.searchText;
+        if (newOpen !== open) {
+            setOpen(!open);
+            (_a = p.onOpenToggle) === null || _a === void 0 ? void 0 : _a.call(p, !open);
+        }
+    }, [p.searchText], [open]);
+    return (react_1.default.createElement(Base, { className: p.className, "data-open": open },
+        react_1.default.createElement(Icon, { style: { cursor: 'pointer' }, onClick: () => {
+                var _a, _b;
+                if (open) {
+                    p.setSearchText('', false);
+                }
+                setOpen(!open);
+                (_a = p.onOpenToggle) === null || _a === void 0 ? void 0 : _a.call(p, !open);
+                if (!open) {
+                    (_b = textEditRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+            } },
+            open && react_1.default.createElement(icons_1.CrossIcon, null),
+            !open && react_1.default.createElement(icons_1.Magnify, { colour: "white" })),
+        react_1.default.createElement(SearchBoxStyled, Object.assign({ ref: textEditRef }, p, { className: "", "data-open": open, defaultValue: p.searchText, setSearchText: (val, enter) => {
+                //we dont want empty enters to do anything
+                if (val === '' && enter) {
+                    p.setSearchText(val, false);
+                }
+                else {
+                    p.setSearchText(val, enter);
+                }
+            } }))));
+};
+exports.AutoHideSearchBox = AutoHideSearchBox;

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

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
+import { IRefTextEdit } from '../TextEdit';
 export interface ISearchBox {
     placeholderText?: string;
     searchText: string;
@@ -6,4 +7,4 @@ export interface ISearchBox {
     defaultValue?: string;
     className?: string;
 }
-export declare const SearchBox: (p: ISearchBox) => JSX.Element;
+export declare const SearchBox: React.ForwardRefExoticComponent<ISearchBox & React.RefAttributes<IRefTextEdit>>;

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

@@ -50,10 +50,11 @@ const Base = styled_1.default.div `
     width: 100%;
   }
 `;
-const Icon = styled_1.default.div `
+const MagnifyIcon = styled_1.default.div `
   width: 1.5rem;
   height: 1.5rem;
   margin-right: 0.5rem;
+  cursor: pointer;
 `;
 const CrossIconStyled = (0, styled_1.default)(icons_1.CrossIcon) `
   position: absolute;
@@ -62,14 +63,26 @@ const CrossIconStyled = (0, styled_1.default)(icons_1.CrossIcon) `
     right: 2rem;
   }
 `;
-const SearchBox = (p) => {
+exports.SearchBox = (0, react_1.forwardRef)((p, ref) => {
     const textEditRef = (0, react_1.createRef)();
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setValue: (v) => {
+            var _a, _b;
+            const value = (_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.getValue();
+            if (v === value) {
+                return;
+            }
+            (_b = textEditRef.current) === null || _b === void 0 ? void 0 : _b.setValue(v);
+        },
+        focus: () => { var _a; return (_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        getValue: () => { var _a; return (_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.getValue(); },
+    }));
     (0, react_1.useEffect)(() => {
         var _a;
-        (_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.setValue(p.searchText);
+        (_a = textEditRef === null || textEditRef === void 0 ? void 0 : textEditRef.current) === null || _a === void 0 ? void 0 : _a.setValue(p.searchText);
     }, [p.searchText, textEditRef]);
     return (react_1.default.createElement(Base, Object.assign({ "data-type": "search", className: p.className }, (0, helpers_1.filterDataProps)(p)),
-        react_1.default.createElement(TextEdit_1.TextEdit, { ref: textEditRef, placeholder: p.placeholderText, defaultEditing: { focus: true }, singleLine: true, leftContent: react_1.default.createElement(Icon, { onClick: () => { var _a; return p.setSearchText(((_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.getValue()) || '', true); } },
+        react_1.default.createElement(TextEdit_1.TextEdit, { ref: textEditRef, placeholder: p.placeholderText, defaultEditing: { focus: true }, singleLine: true, leftContent: react_1.default.createElement(MagnifyIcon, { onClick: () => { var _a; return p.setSearchText(((_a = textEditRef === null || textEditRef === void 0 ? void 0 : textEditRef.current) === null || _a === void 0 ? void 0 : _a.getValue()) || '', true); } },
                 react_1.default.createElement(icons_1.Magnify, null)), noGrow: true, allowUndo: false, onClickOutsideWithNoValue: null, onSubmit: (v, enterPressed) => (0, helpers_1.debounce)(() => {
                 p.setSearchText(v, enterPressed);
             }, { key: 'pagesearch', time: 200 }), defaultValue: p.defaultValue }),
@@ -78,5 +91,4 @@ const SearchBox = (p) => {
                 (_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.setValue('');
                 p.setSearchText('', true);
             } }))));
-};
-exports.SearchBox = SearchBox;
+});

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

@@ -1,3 +1,4 @@
+export * from './AutoHideSearchBox';
 export * from './Base';
 export * from './Dialog';
 export * from './Inline';

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

@@ -14,6 +14,7 @@ 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 });
+__exportStar(require("./AutoHideSearchBox"), exports);
 __exportStar(require("./Base"), exports);
 __exportStar(require("./Dialog"), exports);
 __exportStar(require("./Inline"), exports);

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

@@ -103,10 +103,7 @@ exports.TextEdit = (0, react_2.forwardRef)((p, ref) => {
             }
             setValue(v);
         },
-        focus: () => {
-            var _a, _b;
-            (_b = (_a = taref.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-        },
+        focus: () => { var _a; return (_a = taref.current) === null || _a === void 0 ? void 0 : _a.focus(); },
         getValue: () => { var _a; return (_a = taref.current) === null || _a === void 0 ? void 0 : _a.value; },
     }));
     (0, useOnClickOutside_1.useOnClickOutside)({

package/package.json

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