ag-common 0.0.232 → 0.0.235

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

@@ -1,18 +1,3 @@
 /// <reference types="react" />
-export declare function DropdownList<T>({ options, value, onChange, placeholder, className, renderF, children, shadow, maxHeight, }: {
-    options: T[];
-    value?: T;
-    onChange: (v: T, index: number) => void;
-    placeholder?: string;
-    className?: string;
-    renderF: (v: T) => string;
-    children?: JSX.Element;
-    /**
-     * colour of dropdown shadow. default #555
-     */
-    shadow?: string;
-    /**
-     * max height of items list. default 50vh
-     */
-    maxHeight?: string;
-}): JSX.Element;
+import { IDropdownList } from './types';
+export declare function DropdownList<T>(p: IDropdownList<T>): JSX.Element;

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

@@ -24,11 +24,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownList = void 0;
-const colours_1 = require("../../styles/colours");
 const Icon_1 = require("../Icon");
 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 styled_components_1 = __importStar(require("styled-components"));
 const react_1 = __importStar(require("react"));
 const SBase = styled_components_1.default.div `
@@ -40,12 +40,12 @@ const SBase = styled_components_1.default.div `
   cursor: pointer;
   flex-grow: 0;
 `;
-const SItems = styled_components_1.default.div `
+const DropItems = styled_components_1.default.div `
   flex-flow: column;
   z-index: 5;
 
   display: none;
-  position: absolute;
+
   background-color: white;
   cursor: default;
   width: 100%;
@@ -56,36 +56,38 @@ const SItems = styled_components_1.default.div `
     `}
 
   overflow-y: auto;
-  ${({ open }) => open &&
-    (0, styled_components_1.css) `
-      display: flex;
-    `}
-  ${({ shadow }) => shadow && (0, common_1.Shadow)(shadow)}
+  &[data-open='true'] {
+    display: flex;
+  }
+  &[data-defaultopen='false'] {
+    position: absolute;
+    ${({ shadow }) => shadow && (0, common_1.Shadow)(shadow)}
+  }
 `;
 const Dots = (react_1.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fillRule: "evenodd", clipRule: "evenodd" },
     react_1.default.createElement("path", { d: "M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" })));
-const SItem = styled_components_1.default.div `
+const IconStyled = (0, styled_components_1.default)(Icon_1.Icon) `
+  position: absolute;
+`;
+const SList = styled_components_1.default.div `
   z-index: 1;
   font-weight: 500;
   padding-left: 0.5rem;
   flex-grow: 1;
   padding: 1rem;
   cursor: pointer;
-  ${({ selected }) => selected &&
-    (0, styled_components_1.css) `
-      opacity: 1 !important;
-    `}
-  &:hover {
-    opacity: 0.9 !important;
-    background-color: ${colours_1.colours.orange} !important;
+  &[data-selected='true'] {
+    cursor: default;
+    opacity: 1 !important;
+    background-color: ${colours_1.colours.orangeRed} !important;
   }
-  ${({ selected }) => selected &&
-    (0, styled_components_1.css) `
-      background-color: ${colours_1.colours.orangeRed} !important;
-      &:hover {
-        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);
   }
@@ -93,11 +95,20 @@ const SItem = styled_components_1.default.div `
     background-color: rgba(0, 0, 0, 0.2);
   }
 `;
-function DropdownList({ options, value, onChange, placeholder, className, renderF, children, shadow = '#555', maxHeight = '50vh', }) {
+const List = ({ options, renderF, onChange, state, }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null, options.map((s, i) => (react_1.default.createElement(SList, { key: renderF(s), "data-selected": s === state, onClick: (e) => {
+            if (s !== state) {
+                onChange(s, i);
+            }
+            e.preventDefault();
+        } }, renderF(s))))));
+};
+function DropdownList(p) {
+    const { options, value, placeholder, className, renderF, children, shadow = '#555', maxHeight = '50vh', defaultOpen = false, } = p;
     const ref = (0, react_1.useRef)(null);
     const [state, setState] = (0, react_1.useState)(value);
-    const [open, setOpen] = (0, react_1.useState)(false);
-    (0, useOnClickOutside_1.useOnClickOutside)({ disabled: !open, ref, moveMouseOutside: false }, () => {
+    const [open, setOpen] = (0, react_1.useState)(defaultOpen);
+    (0, useOnClickOutside_1.useOnClickOutside)({ disabled: !open || defaultOpen, ref, moveMouseOutside: false }, () => {
         setOpen(false);
     });
     (0, react_1.useEffect)(() => {
@@ -111,7 +122,7 @@ function DropdownList({ options, value, onChange, placeholder, className, render
         var _a, _b, _c, _d;
         const maxLen = Math.max(...options.map((s) => renderF(s).length));
         const newStyle = {
-            width: `calc(${maxLen}ch + 2rem)`,
+            width: defaultOpen ? '100%' : `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;
@@ -133,23 +144,21 @@ function DropdownList({ options, value, onChange, placeholder, className, render
         if (JSON.stringify(style) !== JSON.stringify(newStyle)) {
             setStyle(newStyle);
         }
-    }, [open, options, renderF, style]);
+    }, [defaultOpen, open, options, renderF, style]);
     return (react_1.default.createElement(SBase, { className: className, ref: ref, title: placeholder, onClick: (e) => {
+            if (defaultOpen) {
+                return;
+            }
             e.stopPropagation();
             e.preventDefault();
             setOpen(!open);
         } },
-        react_1.default.createElement(SItems, { open: open, style: style, shadow: shadow, maxHeight: maxHeight }, open &&
-            options.map((s, i) => (react_1.default.createElement(SItem, { key: renderF(s), selected: s === state, onClick: (e) => {
-                    if (s !== state) {
-                        onChange(s, i);
-                    }
+        react_1.default.createElement(DropItems, { "data-defaultopen": p.defaultOpen, "data-open": open, style: style, shadow: shadow, maxHeight: maxHeight }, open && react_1.default.createElement(List, Object.assign({}, p, { state: state }))),
+        children ||
+            (!defaultOpen && (react_1.default.createElement(IconStyled, { width: "2rem", height: "2rem", onClick: (e) => {
+                    e.stopPropagation();
                     e.preventDefault();
-                } }, renderF(s))))),
-        children || (react_1.default.createElement(Icon_1.Icon, { width: "2rem", height: "2rem", onClick: (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                setOpen(!open);
-            } }, Dots))));
+                    setOpen(!open);
+                } }, Dots)))));
 }
 exports.DropdownList = DropdownList;

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export interface IDropdownList<T> {
+    options: T[];
+    value?: T;
+    onChange: (v: T, index: number) => void;
+    placeholder?: string;
+    className?: string;
+    renderF: (v: T) => string;
+    children?: JSX.Element;
+    /**
+     * colour of dropdown shadow. default #555
+     */
+    shadow?: string;
+    /**
+     * max height of items list. default 50vh
+     */
+    maxHeight?: string;
+    /**
+     * if true, will show expanded. default false
+     */
+    defaultOpen?: boolean;
+}

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

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

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

@@ -139,9 +139,9 @@ const TextEdit = ({ defaultValue = '', defaultEditing, disableEdit = false, plac
         : 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 }, attributes),
+        ref: ref, tabIndex: -1, "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) => {
+        react_1.default.createElement(Comp, { tabIndex: editing ? 0 : undefined, "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);

package/dist/ui/helpers/callOpenApi/cached.d.ts

@@ -22,6 +22,8 @@ export declare type TCallOpenApiCached<T, TDefaultApi> = ICallOpenApi<T, TDefaul
 export declare const setOpenApiCacheRaw: <T>(p: {
     cacheKey: string;
     overrideAuth?: OverrideAuth | undefined;
+    ssrCacheItems?: any;
+    cacheTtl?: number;
 }, data: T) => Promise<void>;
 /**
  * sync call to callOpenApiCache.

package/dist/ui/helpers/callOpenApi/cached.js

@@ -16,26 +16,39 @@ exports.callOpenApiCached = exports.callOpenApiCachedRaw = exports.setOpenApiCac
 const direct_1 = require("./direct");
 const cookie_1 = require("../cookie");
 const string_1 = require("../../../common/helpers/string");
+const common_1 = require("../../../common");
 const node_cache_1 = __importDefault(require("node-cache"));
 let callOpenApiCache;
-function getCacheKey({ cacheKey, overrideAuth, }) {
-    const authkeyPrefix = (overrideAuth === null || overrideAuth === void 0 ? void 0 : overrideAuth.id_token) ||
+/**
+ * cache differs per user and per SSR provided data
+ * @param param0
+ * @returns
+ */
+function getCacheKey({ cacheKey, overrideAuth, ssrCacheItems, }) {
+    const authkeyPrefix1 = (overrideAuth === null || overrideAuth === void 0 ? void 0 : overrideAuth.id_token) ||
         (0, cookie_1.getCookieString)({
             name: 'id_token',
             defaultValue: '',
         });
+    const authPref = !authkeyPrefix1 ? '' : (0, common_1.hashCode)((0, string_1.toBase64)(authkeyPrefix1));
+    const ssrCachePref = !ssrCacheItems
+        ? ''
+        : (0, common_1.hashCode)((0, string_1.toBase64)(JSON.stringify(ssrCacheItems)));
     let cacheKeyRet;
     if (cacheKey) {
-        const pref = !authkeyPrefix ? '' : (0, string_1.toBase64)(authkeyPrefix);
-        cacheKeyRet = cacheKey + '||' + pref;
+        cacheKeyRet = `${cacheKey}||${authPref}||${ssrCachePref}`;
     }
     return cacheKeyRet;
 }
 const setOpenApiCacheRaw = (p, data) => __awaiter(void 0, void 0, void 0, function* () {
     const userPrefixedCacheKey = getCacheKey(p);
-    if (callOpenApiCache && userPrefixedCacheKey) {
-        callOpenApiCache.set(userPrefixedCacheKey, data);
+    if (!userPrefixedCacheKey) {
+        return;
+    }
+    if (!callOpenApiCache) {
+        callOpenApiCache = new node_cache_1.default({ stdTTL: p.cacheTtl || 120 });
     }
+    callOpenApiCache.set(userPrefixedCacheKey, data);
 });
 exports.setOpenApiCacheRaw = setOpenApiCacheRaw;
 /**

package/dist/ui/helpers/callOpenApi/hook.d.ts

@@ -6,10 +6,6 @@ export declare type TUseCallOpenApi<T> = AxiosWrapper<T> & {
     loaded: boolean;
     loadcount: number;
     setData: (d: TUseCallOpenApiDispatch<T | undefined>) => void;
-    /**
-     * call when you want to refetch, but at a later point (ie same hook/cachekey across different components)
-     */
-    invalidateCacheKey: () => void;
 };
 declare type TUseCallOpenApiInt<T, TDefaultApi> = ICallOpenApi<T, TDefaultApi> & {
     cacheKey: string;

package/dist/ui/helpers/callOpenApi/hook.js

@@ -51,7 +51,7 @@ const useCallOpenApi = (pIn) => {
         if (ng) {
             return;
         }
-        setData((d) => (Object.assign(Object.assign({}, d), { loading: true })));
+        setData((d) => [d[0], Object.assign(Object.assign({}, d[1]), { loading: true })]);
         void run();
     }, [data, setData]);
     const ret = Object.assign(Object.assign({}, data[1]), { reFetch: () => __awaiter(void 0, void 0, void 0, function* () { return setData([data[0], defaultState(data[0], true)]); }), setData: (d) => {
@@ -59,7 +59,7 @@ const useCallOpenApi = (pIn) => {
                 data[0],
                 Object.assign(Object.assign({}, data[1]), { data: d(data[1].data), datetime: new Date().getTime() }),
             ]);
-        }, invalidateCacheKey: () => (0, cached_1.setOpenApiCacheRaw)(data[0], undefined) });
+        } });
     return ret;
 };
 exports.useCallOpenApi = useCallOpenApi;

package/package.json

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