ag-common 0.0.554 → 0.0.555

package/dist/ui/components/RadioGroup/DarkMode.d.ts

@@ -1,17 +1,13 @@
 import React from 'react';
-export declare enum TDarkMode {
-    'dark' = 0,
-    'light' = 1,
-    'system' = 2
-}
+import { TDarkMode } from './types';
 export interface IDarkMode {
-    /** default system */
-    default?: TDarkMode;
-    onSubmit: (p: TDarkMode) => void;
+    onSubmit?: (p: TDarkMode) => void;
     /** default horiz */
     mode?: 'vert' | 'horiz';
     /** default 2.5rem */
     iconSize?: string;
     className?: string;
+    cookieDocument: string;
 }
+/** shows darkmode toggle. Persists to cookie, and modifies html classList with either dark-mode or light-mode */
 export declare const DarkMode: (p: IDarkMode) => React.JSX.Element;

package/dist/ui/components/RadioGroup/DarkMode.js

@@ -1,45 +1,18 @@
 "use strict";
 'use client';
-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.DarkMode = exports.TDarkMode = void 0;
+exports.DarkMode = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
+const use_1 = require("../../helpers/cookie/use");
 const icons_1 = require("../../icons");
 const FlexColumn_1 = require("../FlexColumn");
 const Icon_1 = require("../Icon");
 const Base_1 = require("./Base");
-var TDarkMode;
-(function (TDarkMode) {
-    TDarkMode[TDarkMode["dark"] = 0] = "dark";
-    TDarkMode[TDarkMode["light"] = 1] = "light";
-    TDarkMode[TDarkMode["system"] = 2] = "system";
-})(TDarkMode || (exports.TDarkMode = TDarkMode = {}));
+const types_1 = require("./types");
 const IconStyled = (0, styled_1.default)(Icon_1.Icon) `
   > svg {
     height: 60%;
@@ -55,38 +28,61 @@ const Label = (0, styled_1.default)(FlexColumn_1.FlexColumn) `
 const getColours = (p, vert) => {
     const deg = vert ? '180deg' : '90deg';
     switch (p) {
-        case TDarkMode.dark: {
+        case types_1.TDarkMode.dark: {
             const d1 = 'rgba(173,128,227,1)';
             const d2 = 'rgba(106,44,181,1)';
             return [d1, `linear-gradient(${deg}, ${d1} 0%, ${d2} 76%)`];
         }
-        case TDarkMode.light: {
+        case types_1.TDarkMode.light: {
             const l1 = 'rgba(255,169,54,1)';
             const l2 = 'rgba(255,189,100,1)';
             return [l1, `linear-gradient(${deg}, ${l1} 0%, ${l2} 76%)`];
         }
-        case TDarkMode.system: {
+        case types_1.TDarkMode.system: {
             return ['green', 'green'];
         }
     }
 };
-const v = [
-    { mode: TDarkMode.dark, icon: icons_1.Moon },
-    { mode: TDarkMode.system, icon: icons_1.Computer },
-    { mode: TDarkMode.light, icon: icons_1.Sun },
+const modes = [
+    { mode: types_1.TDarkMode.dark, icon: icons_1.Moon },
+    { mode: types_1.TDarkMode.system, icon: icons_1.Computer },
+    { mode: types_1.TDarkMode.light, icon: icons_1.Sun },
 ];
+/** shows darkmode toggle. Persists to cookie, and modifies html classList with either dark-mode or light-mode */
 const DarkMode = (p) => {
     const { iconSize = '2.5rem' } = p;
-    let defaultIndex = v.findIndex((v2) => v2.mode === p.default);
-    if (defaultIndex === -1) {
-        defaultIndex = 1;
-    }
-    const [index, setIndex] = (0, react_1.useState)(defaultIndex);
-    const [fill, background] = getColours(v[index].mode, p.mode === 'vert');
+    const [darkmode, setDarkmodeRaw] = (0, use_1.useCookie)({
+        defaultValue: types_1.TDarkMode.system,
+        name: 'darkmode',
+        cookieDocument: p.cookieDocument,
+        parse: (v) => Number(v),
+        stringify: (v) => v.toString(),
+    });
+    const index = modes.findIndex((d) => d.mode === darkmode);
+    const [fill, background] = getColours(modes[index].mode, p.mode === 'vert');
     const twCalc = `calc(${iconSize} + ${iconSize} + ${iconSize} + 20px)`;
-    return (react_1.default.createElement(Base_1.RadioGroup, { className: p.className, mode: p.mode, values: v, defaultIndex: index, onSubmit: (v, i) => {
-            setIndex(i);
-            p.onSubmit(v.mode);
+    const setDarkmode = (newDarkMode) => {
+        var _a;
+        let className = '';
+        if (newDarkMode === types_1.TDarkMode.dark) {
+            className += 'dark-mode';
+        }
+        else if (newDarkMode === types_1.TDarkMode.light) {
+            className += 'light-mode';
+        }
+        else {
+            className = '';
+        }
+        document.getElementsByTagName('html')[0].classList.remove('dark-mode');
+        document.getElementsByTagName('html')[0].classList.remove('light-mode');
+        if (className) {
+            document.getElementsByTagName('html')[0].classList.add(className);
+        }
+        setDarkmodeRaw(newDarkMode);
+        (_a = p.onSubmit) === null || _a === void 0 ? void 0 : _a.call(p, newDarkMode);
+    };
+    return (react_1.default.createElement(Base_1.RadioGroup, { className: p.className, mode: p.mode, values: modes, defaultIndex: index, onSubmit: ({ mode }) => {
+            setDarkmode(mode);
         }, style: Object.assign({ background, border: `solid 2px ${fill}`, width: twCalc, height: iconSize }, (p.mode === 'vert' && {
             width: iconSize,
             height: twCalc,

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

@@ -0,0 +1,5 @@
+export declare enum TDarkMode {
+    'dark' = 0,
+    'light' = 1,
+    'system' = 2
+}

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TDarkMode = void 0;
+var TDarkMode;
+(function (TDarkMode) {
+    TDarkMode[TDarkMode["dark"] = 0] = "dark";
+    TDarkMode[TDarkMode["light"] = 1] = "light";
+    TDarkMode[TDarkMode["system"] = 2] = "system";
+})(TDarkMode || (exports.TDarkMode = TDarkMode = {}));

package/dist/ui/helpers/cookie/get.js

@@ -12,7 +12,7 @@ const raw_1 = require("./raw");
  */
 function getCookieRawWrapper({ name, cookieDocument, defaultValue, parse: parseRaw, }) {
     const parse = (s) => {
-        if (!s) {
+        if (s === undefined || s === null) {
             return defaultValue;
         }
         if (parseRaw) {
@@ -28,7 +28,7 @@ function getCookieRawWrapper({ name, cookieDocument, defaultValue, parse: parseR
             name: name + currentCount,
             cookieDocument,
         });
-        if (!newv) {
+        if (newv === undefined || newv === null) {
             break;
         }
         raw += newv;

package/dist/ui/helpers/cookie/set.js

@@ -18,7 +18,7 @@ function setCookieRawWrapper(p) {
         return JSON.stringify(s);
     };
     (0, raw_1.wipeCookies)(p.name);
-    if (!p.value) {
+    if (p.value === undefined) {
         return;
     }
     const str = (0, base64_1.toBase64)(stringify(p.value));

package/dist/ui/helpers/cookie/use.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const get_1 = require("./get");
 const set_1 = require("./set");
 function useCookie(p) {
+    var _a;
     const parse = (s) => {
         if (!s) {
             return p.defaultValue;
@@ -20,7 +21,7 @@ function useCookie(p) {
         }
         return JSON.stringify(s);
     };
-    const [cookie, setCookie] = (0, react_1.useState)((0, get_1.getCookieRawWrapper)(Object.assign(Object.assign({}, p), { parse })) || p.defaultValue);
+    const [cookie, setCookie] = (0, react_1.useState)((_a = (0, get_1.getCookieRawWrapper)(Object.assign(Object.assign({}, p), { parse }))) !== null && _a !== void 0 ? _a : p.defaultValue);
     const setState = (valueRaw) => {
         const value = (valueRaw instanceof Function ? valueRaw(cookie) : valueRaw);
         (0, set_1.setCookieRawWrapper)(Object.assign(Object.assign({}, p), { stringify, value }));
@@ -29,7 +30,10 @@ function useCookie(p) {
     return [cookie, setState];
 }
 exports.useCookie = useCookie;
-const useCookieString = (p) => useCookie(Object.assign(Object.assign({}, p), { parse: (s) => s || '', stringify: (s) => s, defaultValue: p.defaultValue || '' }));
+const useCookieString = (p) => {
+    var _a;
+    return useCookie(Object.assign(Object.assign({}, p), { parse: (s) => s !== null && s !== void 0 ? s : '', stringify: (s) => s, defaultValue: (_a = p.defaultValue) !== null && _a !== void 0 ? _a : '' }));
+};
 exports.useCookieString = useCookieString;
 const useCookieNumber = (p) => useCookie(Object.assign(Object.assign({}, p), { parse: (s) => (!s ? undefined : Number.parseFloat(s)), stringify: (s) => (!s ? '' : s.toString()), defaultValue: p.defaultValue }));
 exports.useCookieNumber = useCookieNumber;

package/package.json

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