ag-common 0.0.528 → 0.0.529

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

@@ -74,6 +74,7 @@ const ListItemStyle = styled_1.default.div `
     &[data-selected='true'] {
       opacity: 1 !important;
       background-color: ${colours_1.colours.orangeRed} !important;
+      cursor: default;
     }
     &[data-selected='false'] {
       &:hover {
@@ -156,7 +157,7 @@ function DropdownList(p) {
             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 })))),
+            options.map((s, i) => (react_1.default.createElement(ListItem, { key: typeof s === 'string' ? s : p.renderF(s).key, render: p.renderF(s), onChange: () => p.onChange(s, i), selected: s === state })))),
         openDisplay));
 }
 exports.DropdownList = DropdownList;

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

@@ -44,7 +44,7 @@ const Content = styled_1.default.div `
   margin: auto;
   display: flex;
   flex-flow: column;
-  justify-content: flex-start;
+  justify-content: space-evenly;
   align-items: center;
   max-height: calc(100vh - 20rem);
   overflow-y: auto;
@@ -62,11 +62,10 @@ const Content = styled_1.default.div `
 `;
 const Row = styled_1.default.div `
   width: 100%;
-  cursor: pointer;
 `;
 const SearchBase = (p) => {
     var _a, _b, _c, _d;
-    const { maxDisplayItems = 20 } = p;
+    const { maxDisplayItems = 1000 } = p;
     const [searchText, setSearchText] = (0, react_1.useState)((_a = p.defaultValue) !== null && _a !== void 0 ? _a : '');
     const resWrap = (foundItem, target) => {
         var _a, _b;
@@ -78,13 +77,17 @@ const SearchBase = (p) => {
         }
     };
     const filteredItemsRaw = p.displayItems.filter((i) => p.willDisplayItem(searchText, i));
-    const { part: filteredItems } = (0, array_1.take)(filteredItemsRaw, maxDisplayItems);
+    const { part: filteredItems } = (0, array_1.take)(filteredItemsRaw, maxDisplayItems < 0 ? filteredItemsRaw.length : maxDisplayItems);
+    const outdiff = filteredItems.length !== p.displayItems.length;
     const showText = (_d = (_c = (_b = p.texts) === null || _b === void 0 ? void 0 : _b.totalItems) === null || _c === void 0 ? void 0 : _c.call(_b, filteredItems.length, p.displayItems.length)) !== null && _d !== void 0 ? _d : `Showing ${filteredItems.length} out of ${p.displayItems.length} total
   items`;
     return (react_1.default.createElement(Base, { className: p.className },
         react_1.default.createElement(SearchBox_1.SearchBox, Object.assign({}, p, { searchText: searchText, setSearchText: setSearchText })),
         react_1.default.createElement(Content, { "data-hasitems": !!filteredItems.length, "data-type": "content" },
-            filteredItems.map((item, index) => (react_1.default.createElement(Row, { key: p.getKeyF(item), onClick: (e) => resWrap(item, e.target) }, p.renderItem({ searchText, item, index })))),
-            searchText && react_1.default.createElement(Row, null, showText))));
+            filteredItems.map((item, index) => (0, react_1.cloneElement)(p.renderItem({ searchText, item, index }), {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onClick: (e) => resWrap(item, e.target),
+            })),
+            outdiff && react_1.default.createElement(Row, null, showText))));
 };
 exports.SearchBase = SearchBase;

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

@@ -57,6 +57,7 @@ const MagnifyIcon = styled_1.default.div `
   height: 1.5rem;
   margin-right: 0.5rem;
   cursor: pointer;
+  margin-left: 0.5rem;
 `;
 const CrossIconStyled = (0, styled_1.default)(icons_1.CrossIcon) `
   position: absolute;
@@ -65,6 +66,10 @@ const CrossIconStyled = (0, styled_1.default)(icons_1.CrossIcon) `
     right: 2rem;
   }
 `;
+const TextEditStyled = (0, styled_1.default)(TextEdit_1.TextEdit) `
+  padding: 0;
+  height: 2.5rem;
+`;
 exports.SearchBox = (0, react_1.forwardRef)((p, ref) => {
     const textEditRef = (0, react_1.createRef)();
     (0, react_1.useImperativeHandle)(ref, () => ({
@@ -84,7 +89,7 @@ exports.SearchBox = (0, react_1.forwardRef)((p, ref) => {
         (_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, dom_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(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(TextEditStyled, { 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, debounce_1.debounce)(() => {
                 p.setSearchText(v, enterPressed);
             }, { key: 'pagesearch', time: 200 }), defaultValue: p.defaultValue }),

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

@@ -4,12 +4,13 @@ export interface ISearchDialog<T> {
     placeholderText?: string;
     /**
      * method run to render each filtered item
+     * will inject onClick handler
      */
     renderItem: ({ searchText, item, index, }: {
         searchText: string;
         item: T;
         index: number;
-    }) => JSX.Element | string;
+    }) => JSX.Element;
     /**
      * all potential items
      */
@@ -18,7 +19,7 @@ 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 */
+    /** how many search items to return at most. default 1000. if -1 will return all */
     maxDisplayItems?: number;
     /**
      * get unique render key

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

@@ -53,6 +53,7 @@ const basecss = (0, react_1.css) `
   resize: none;
   overflow: hidden;
   background-color: white;
+  color: black;
   font-size: inherit;
   font-weight: inherit;
   font-family: inherit;
@@ -67,7 +68,7 @@ const ValueTextArea = styled_1.default.textarea `
   }
 `;
 const ValueTextBox = styled_1.default.input `
-  ${basecss}
+  ${basecss};
 `;
 const ValueBoxEdit = (0, styled_1.default)(common_2.ValueBox) `
   border: solid 1px #ccc;

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

@@ -31,6 +31,7 @@ exports.ValueBox = styled_1.default.div `
 exports.valueCss = (0, react_1.css) `
   width: 100%;
   height: 100%;
+  padding: 0;
   word-break: break-all;
   font-size: inherit;
   font-weight: inherit;

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

@@ -8,7 +8,7 @@ export type ITimelineItem = {
     checked: false;
     disabled?: boolean;
 });
-export declare const Timeline: ({ lineColour, items, onClick, maxCircleSize, className, bgColour, titleHover, showTitles, }: {
+export declare const Timeline: ({ lineColour, items, onClick, maxCircleSize, className, bgColour, showTitles, }: {
     /** default min(5vw,3rem) */
     maxCircleSize?: string | undefined;
     /** default #ccc */
@@ -18,7 +18,6 @@ export declare const Timeline: ({ lineColour, items, onClick, maxCircleSize, cla
     className?: string | undefined;
     /** used for behind icons. default white */
     bgColour?: string | undefined;
-    titleHover?: ((i: ITimelineItem) => string) | undefined;
     /** if true, will show titles under timeline. default true */
     showTitles?: boolean | undefined;
 }) => React.JSX.Element;

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

@@ -29,8 +29,8 @@ const Line = styled_1.default.div `
   position: absolute;
   top: 45%;
   height: 10%;
-  left: 0;
-  right: 0;
+  left: 1px;
+  right: 1px;
 `;
 const Item = styled_1.default.div `
   z-index: 1;
@@ -43,7 +43,7 @@ const Item = styled_1.default.div `
 const Title = styled_1.default.span `
   text-align: center;
 `;
-const Timeline = ({ lineColour = '#ccc', items, onClick, maxCircleSize = 'min(5vw,3rem)', className, bgColour = 'white', titleHover, showTitles = true, }) => {
+const Timeline = ({ lineColour = '#ccc', items, onClick, maxCircleSize = 'min(5vw,3rem)', className, bgColour = 'white', showTitles = true, }) => {
     const firstFalse = items.findIndex((i) => !i.checked && !i.disabled);
     const lastTrue = (0, array_1.findLastIndex)(items, (i) => i.checked);
     return (react_1.default.createElement(Base, { className: className },
@@ -51,7 +51,7 @@ const Timeline = ({ lineColour = '#ccc', items, onClick, maxCircleSize = 'min(5v
             react_1.default.createElement(Line, { style: { backgroundColor: lineColour } }),
             items.map((p, index) => {
                 const enabled = index === lastTrue || index === firstFalse;
-                return (react_1.default.createElement(Item, { key: p.key, title: titleHover === null || titleHover === void 0 ? void 0 : titleHover(p) },
+                return (react_1.default.createElement(Item, { key: p.key, title: p === null || p === void 0 ? void 0 : p.title },
                     react_1.default.createElement(Icon_1.Icon, { style: {
                             maxWidth: maxCircleSize,
                             cursor: enabled ? 'pointer' : 'default',

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { User } from '../../helpers/jwt';
 export interface IUserImage {
     image?: string;
     className?: string;
@@ -9,6 +8,10 @@ export interface IUserImage {
 export declare const UserImage: ({ image, className, title, }: IUserImage) => React.JSX.Element;
 export interface IUserProfileImage {
     className?: string;
-    user?: Pick<User, 'picture' | 'fullname' | 'userId'>;
+    user?: {
+        picture: string;
+        fullname: string;
+        userId: string;
+    };
 }
 export declare const UserProfileImage: ({ className, user }: IUserProfileImage) => React.JSX.Element;

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

@@ -31,7 +31,6 @@ exports.UserProfileImage = exports.UserImage = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importStar(require("react"));
 const array_1 = require("../../../common/helpers/array");
-const log_1 = require("../../../common/helpers/log");
 const UserOutline_1 = require("../../icons/UserOutline");
 const Base = styled_1.default.div `
   width: 2.5rem;
@@ -40,28 +39,58 @@ const Base = styled_1.default.div `
   border: solid 1px white;
   overflow: hidden;
   position: relative;
+
+  @keyframes color {
+    0% {
+      fill: #bbb;
+    }
+    50% {
+      fill: #aaa;
+    }
+    100% {
+      fill: #bbb;
+    }
+  }
+  svg {
+    transition: all 1s;
+  }
+  &[data-fail='0'] {
+    svg {
+      fill: white;
+    }
+  }
+  &[data-fail='0.5'] {
+    svg {
+      animation-name: color;
+      animation-duration: 2s;
+      animation-iteration-count: infinite;
+    }
+  }
+  &[data-fail='1'] {
+    svg {
+      fill: #333;
+    }
+  }
 `;
 const Img = styled_1.default.img `
   width: 2.5rem;
   height: 2.5rem;
+  position: absolute;
+  top: 0;
+  left: 0;
 `;
-const images = {
-    domains: ['platform-lookaside.fbsbx.com', 'lh3.googleusercontent.com'],
-};
 const UserImage = ({ image, className, title = 'user image', }) => {
-    const [fallback, setFallback] = (0, react_1.useState)(false);
-    return (react_1.default.createElement(Base, { className: className, title: title },
-        image && !fallback && (react_1.default.createElement(Img, { alt: "user", src: image, onError: () => setFallback(true) })),
-        (!image || fallback) && UserOutline_1.UserOutline));
+    const [failed, setFailed] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        setFailed(0.5);
+    }, []);
+    return (react_1.default.createElement(Base, { className: className, title: title, "data-fail": failed },
+        UserOutline_1.UserOutline,
+        failed !== 1 && (react_1.default.createElement(Img, { alt: "user", src: image, onError: () => setFailed(1) }))));
 };
 exports.UserImage = UserImage;
 const UserProfileImage = ({ className, user }) => {
     const image = user === null || user === void 0 ? void 0 : user.picture;
-    if (image) {
-        if (!images.domains.find((i) => image.includes(i))) {
-            (0, log_1.warn)(`bad domain:${image}`);
-        }
-    }
     const titleA = [user === null || user === void 0 ? void 0 : user.fullname, user === null || user === void 0 ? void 0 : user.userId].filter(array_1.notEmpty);
     const title = titleA.length === 0 ? '' : titleA.join(' - ');
     return react_1.default.createElement(exports.UserImage, { image: image, title: title, className: className });

package/dist/ui/icons/Checkmark.js

@@ -8,6 +8,6 @@ const react_1 = __importDefault(require("react"));
 const Checkmark = ({ style, }) => {
     var _a;
     return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "2 2 20 20", style: Object.assign(Object.assign({}, style), { fill: undefined }) },
-        react_1.default.createElement("path", { stroke: (_a = style === null || style === void 0 ? void 0 : style.fill) !== null && _a !== void 0 ? _a : '#000', strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 12.333 10.461 15 16 9m5 3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" })));
+        react_1.default.createElement("path", { fill: "none", stroke: (_a = style === null || style === void 0 ? void 0 : style.fill) !== null && _a !== void 0 ? _a : '#000', strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 12.333 10.461 15 16 9m5 3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" })));
 };
 exports.Checkmark = Checkmark;

package/dist/ui/icons/Circle.js

@@ -8,6 +8,6 @@ const react_1 = __importDefault(require("react"));
 const Circle = ({ style, dotted = false, }) => {
     var _a;
     return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "2 2 20 20", style: Object.assign(Object.assign({}, style), { fill: undefined }) },
-        react_1.default.createElement("path", { stroke: (_a = style === null || style === void 0 ? void 0 : style.fill) !== null && _a !== void 0 ? _a : '#000', strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: !dotted ? '' : '4 4', strokeWidth: "2", d: "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" })));
+        react_1.default.createElement("path", { fill: "none", stroke: (_a = style === null || style === void 0 ? void 0 : style.fill) !== null && _a !== void 0 ? _a : '#000', strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: !dotted ? '' : '4 4', strokeWidth: "2", d: "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" })));
 };
 exports.Circle = Circle;

package/dist/ui/icons/Warning.js

@@ -11,6 +11,6 @@ const Warning = ({ className }) => (react_1.default.createElement("svg", { xmlns
         react_1.default.createElement("linearGradient", { id: "a", x2: "0", y1: "45.47", y2: "-.599", gradientTransform: "matrix(1.31117 0 0 1.30239 737.39 159.91)", gradientUnits: "userSpaceOnUse" },
             react_1.default.createElement("stop", { stopColor: "#ffc515" }),
             react_1.default.createElement("stop", { offset: "1", stopColor: "#ffd55b" }))),
-    react_1.default.createElement("path", { fill: "white", stroke: "url(#a)", strokeWidth: "4px", d: "m797.94 212.01-25.607-48c-.736-1.333-2.068-2.074-3.551-2.074s-2.822.889-3.569 2.222l-25.417 48c-.598 1.185-.605 2.815.132 4s1.921 1.778 3.404 1.778h51.02c1.483 0 2.821-.741 3.42-1.926.747-1.185.753-2.667.165-4", transform: "translate(-627.02 -130.8) scale(.85714)" }),
+    react_1.default.createElement("path", { fill: "none", stroke: "url(#a)", strokeWidth: "4px", d: "m797.94 212.01-25.607-48c-.736-1.333-2.068-2.074-3.551-2.074s-2.822.889-3.569 2.222l-25.417 48c-.598 1.185-.605 2.815.132 4s1.921 1.778 3.404 1.778h51.02c1.483 0 2.821-.741 3.42-1.926.747-1.185.753-2.667.165-4", transform: "translate(-627.02 -130.8) scale(.85714)" }),
     react_1.default.createElement("path", { fillOpacity: ".75", stroke: "#40330d", strokeWidth: ".90168", d: "M31.996 24.239a1.93 1.93 0 0 0-1.926 1.92v11.559c0 1.06.855 1.92 1.926 1.92a1.929 1.929 0 0 0 1.925-1.92v-11.56c0-1.06-.853-1.92-1.925-1.92zm0 19.249c-1.064 0-1.926.86-1.926 1.925 0 1.064.86 1.925 1.926 1.925 1.064 0 1.925-.86 1.925-1.925a1.922 1.922 0 0 0-1.925-1.925z" })));
 exports.Warning = Warning;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.528",
+  "version": "0.0.529",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",