ag-common 0.0.115 → 0.0.119

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare function DropdownList<T>({ options, value, onChange, placeholder, className, renderF, children, }: {
+export declare function DropdownList<T>({ options, value, onChange, placeholder, className, renderF, children, shadow, }: {
     options: T[];
     value?: T;
     onChange: (v: T, index: number) => void;
@@ -7,4 +7,8 @@ export declare function DropdownList<T>({ options, value, onChange, placeholder,
     className?: string;
     renderF: (v: T) => string;
     children?: JSX.Element;
+    /**
+     * colour of dropdown shadow. default #555
+     */
+    shadow?: string;
 }): JSX.Element;

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

@@ -25,6 +25,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const Icon_1 = require("../Icon");
 const dom_1 = require("../../helpers/dom");
+const common_1 = require("../../styles/common");
 const SBase = styled_components_1.default.div `
   display: flex;
   flex-flow: row;
@@ -48,6 +49,7 @@ const SItems = styled_components_1.default.div `
     (0, styled_components_1.css) `
       display: flex;
     `}
+  ${({ 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" })));
@@ -80,7 +82,7 @@ const SItem = styled_components_1.default.div `
     background-color: rgba(0, 0, 0, 0.2);
   }
 `;
-function DropdownList({ options, value, onChange, placeholder, className, renderF, children, }) {
+function DropdownList({ options, value, onChange, placeholder, className, renderF, children, shadow = '#555', }) {
     var _a, _b;
     const ref = (0, react_1.useRef)(null);
     const [state, setState] = (0, react_1.useState)(value);
@@ -122,7 +124,7 @@ function DropdownList({ options, value, onChange, placeholder, className, render
             e.preventDefault();
             setOpen(!open);
         } },
-        react_1.default.createElement(SItems, { open: open, style: style }, open &&
+        react_1.default.createElement(SItems, { open: open, style: style, shadow: shadow }, open &&
             options.map((s, i) => (react_1.default.createElement(SItem, { key: renderF(s), selected: s === state, onClick: (e) => {
                     if (s !== state) {
                         onChange(s, i);

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

@@ -65,7 +65,7 @@ exports.IconF = styled_components_1.default.span `
         stop-color: ${fill} !important;
       }
     `};
-  ${({ outline }) => outline && (0, common_1.DropShadow)(outline)};
+  ${({ outline }) => outline && (0, common_1.HardOutline)(outline)};
 
   width: ${({ width }) => width || '100%'};
   height: ${({ height }) => height || '100%'};

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

@@ -0,0 +1,6 @@
+export declare const prompt: (p: {
+    topText?: string;
+    bottomText: string;
+    defaultValue?: string;
+    placeholder?: string;
+}) => Promise<string | undefined>;

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

@@ -0,0 +1,99 @@
+"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.prompt = void 0;
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+const react_1 = __importStar(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../Button");
+const FlexColumn_1 = require("../FlexColumn");
+const FlexRow_1 = require("../FlexRow");
+const Modal_1 = require("../Modal");
+const TextInput_1 = require("../TextInput");
+const Base = styled_components_1.default.div `
+  width: 95vw;
+  max-width: 30rem;
+  height: 50vh;
+  max-height: 15rem;
+  padding: 1rem;
+`;
+const Content = (0, styled_components_1.default)(FlexColumn_1.FlexColumn) `
+  height: 100%;
+`;
+const TopText = styled_components_1.default.div `
+  font-weight: bold;
+  border-bottom: solid 1px #ccc;
+  padding-bottom: 0.25rem;
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+`;
+const BottomText = styled_components_1.default.div `
+  padding-bottom: 0.25rem;
+  font-size: 1.1rem;
+`;
+const Bottom = (0, styled_components_1.default)(FlexRow_1.FlexRow) `
+  margin-top: auto;
+  justify-content: flex-end;
+  > button:first-child {
+    margin-right: 1rem;
+  }
+`;
+const PromptModal = ({ wrapper, res, bottomText, topText, okText = 'OK', cancelText = 'Cancel', defaultValue, placeholder, }) => {
+    const [text, setText] = (0, react_1.useState)(defaultValue || '');
+    const ret = (v) => {
+        try {
+            res(v);
+        }
+        finally {
+            wrapper.remove();
+        }
+    };
+    return (react_1.default.createElement(Modal_1.Modal, { position: "center", topPosition: "center", open: true, setOpen: () => ret(undefined), showCloseButton: false, closeOnClickOutside: false },
+        react_1.default.createElement(Base, null,
+            react_1.default.createElement(Content, null,
+                topText && react_1.default.createElement(TopText, null, topText),
+                react_1.default.createElement(BottomText, null, bottomText),
+                react_1.default.createElement(TextInput_1.TextInput, { value: text, onChange: (c) => setText(c), type: "text", placeholder: placeholder }),
+                react_1.default.createElement(Bottom, { noGrow: true },
+                    react_1.default.createElement(Button_1.Button, { onClick: () => ret(text) }, okText),
+                    react_1.default.createElement(Button_1.Button, { invert: true, onClick: () => ret(undefined) }, cancelText))))));
+};
+const prompt = (p) => __awaiter(void 0, void 0, void 0, function* () {
+    return new Promise((res) => {
+        const wrapper = document.body.appendChild(document.createElement('div'));
+        react_dom_1.default.render(react_1.default.createElement(PromptModal, Object.assign({}, p, { res: res, wrapper: wrapper })), wrapper);
+    });
+});
+exports.prompt = prompt;

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

@@ -13,6 +13,7 @@ export * from './Loader';
 export * from './LoginButton';
 export * from './LogoutButton';
 export * from './Modal';
+export * from './Prompt';
 export * from './RowOrColumn';
 export * from './Table';
 export * from './TextEdit';

package/dist/ui/components/index.js

@@ -25,6 +25,7 @@ __exportStar(require("./Loader"), exports);
 __exportStar(require("./LoginButton"), exports);
 __exportStar(require("./LogoutButton"), exports);
 __exportStar(require("./Modal"), exports);
+__exportStar(require("./Prompt"), exports);
 __exportStar(require("./RowOrColumn"), exports);
 __exportStar(require("./Table"), exports);
 __exportStar(require("./TextEdit"), exports);

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

@@ -1,3 +1,3 @@
 import { AxiosWrapper } from './jwt';
 import { ICallOpenApi } from './types';
-export declare const callOpenApi: <T, TDefaultApi>({ func, apiUrl, overrideAuth, refreshToken, logout, newDefaultApi, }: ICallOpenApi<T, TDefaultApi>) => Promise<AxiosWrapper<T>>;
+export declare const callOpenApi: <T, TDefaultApi>({ func, apiUrl, overrideAuth, refreshToken, logout, newDefaultApi, headers, }: ICallOpenApi<T, TDefaultApi>) => Promise<AxiosWrapper<T>>;

package/dist/ui/helpers/callOpenApi.js

@@ -13,14 +13,14 @@ exports.callOpenApi = void 0;
 const cookie_1 = require("./cookie");
 const sleep_1 = require("../../common/helpers/sleep");
 const array_1 = require("../../common/helpers/array");
-const callOpenApi = ({ func, apiUrl, overrideAuth, refreshToken, logout, newDefaultApi, }) => __awaiter(void 0, void 0, void 0, function* () {
+const callOpenApi = ({ func, apiUrl, overrideAuth, refreshToken, logout, newDefaultApi, headers, }) => __awaiter(void 0, void 0, void 0, function* () {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let error;
     let data = undefined;
     const config = {
         basePath: apiUrl,
-        baseOptions: { headers: { authorization: '' } },
+        baseOptions: { headers: Object.assign({ authorization: '' }, (headers || {})) },
     };
     const isAuthed = !!(0, cookie_1.getCookieWrapper)({ cname: 'id_token' });
     if (overrideAuth === null || overrideAuth === void 0 ? void 0 : overrideAuth.id_token) {

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

@@ -11,4 +11,5 @@ export interface ICallOpenApi<T, TDefaultApi> {
     refreshToken: () => Promise<User | undefined>;
     newDefaultApi: (config: any) => TDefaultApi;
     disabled?: boolean;
+    headers?: Record<string, string | number>;
 }

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export declare const DropShadow: (outline: string) => import("styled-components").FlattenSimpleInterpolation;
+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 CssTransparentBlock: import("styled-components").FlattenSimpleInterpolation;
 export declare const FadeBottom: ({ height }: {

package/dist/ui/styles/common.js

@@ -19,15 +19,18 @@ 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.DropShadow = void 0;
+exports.FullScreenPage = exports.noDrag = exports.Card = exports.FadeBottom = exports.CssTransparentBlock = exports.NoTextSelect = exports.Shadow = exports.HardOutline = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
 const colours_1 = require("./colours");
-const DropShadow = (outline) => (0, styled_components_1.css) `
-  filter: drop-shadow(1px 1px 0px ${outline})
-    drop-shadow(-1px 1px 0px ${outline}) drop-shadow(1px -1px 0px ${outline})
-    drop-shadow(-1px -1px 0px ${outline});
+const HardOutline = (colour) => (0, styled_components_1.css) `
+  filter: drop-shadow(1px 1px 0px ${colour}) drop-shadow(-1px 1px 0px ${colour})
+    drop-shadow(1px -1px 0px ${colour}) drop-shadow(-1px -1px 0px ${colour});
 `;
-exports.DropShadow = DropShadow;
+exports.HardOutline = HardOutline;
+const Shadow = (colour) => (0, styled_components_1.css) `
+  filter: drop-shadow(1px 1px 0.5rem ${colour});
+`;
+exports.Shadow = Shadow;
 exports.NoTextSelect = (0, styled_components_1.css) `
   user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-common",
-  "version": "0.0.115",
+  "version": "0.0.119",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Andrei Gec <@andreigec> (https://gec.dev/)",
@@ -32,9 +32,9 @@
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
     "@types/styled-components": "5.1.21",
-    "@typescript-eslint/eslint-plugin": "5.10.1",
-    "@typescript-eslint/parser": "5.10.1",
-    "eslint": "8.7.0",
+    "@typescript-eslint/eslint-plugin": "5.10.2",
+    "@typescript-eslint/parser": "5.10.2",
+    "eslint": "8.8.0",
     "eslint-config-airbnb-typescript": "16.1.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-react-app": "7.0.0",