@xylabs/sdk-react 2.9.16 → 2.9.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs5/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
- package/dist/cjs5/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
- package/dist/cjs5/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
- package/dist/cjs5/components/Pixel/index.d.ts +1 -0
- package/dist/cjs5/components/TokenAmount/TokenAmountProps.d.ts +1 -0
- package/dist/cjs5/contexts/UserEvents/Context.d.ts +6 -1
- package/dist/cjs5/contexts/UserEvents/index.d.ts +1 -2
- package/dist/cjs5/index.js +48 -27
- package/dist/cjs5/index.js.map +1 -1
- package/dist/components/InvertableThemeProvider/InvertableThemeProvider.js +6 -2
- package/dist/components/InvertableThemeProvider/InvertableThemeProvider.js.map +1 -1
- package/dist/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
- package/dist/components/InvertableThemeProvider/InvertableThemeProvider.stories.js +33 -3
- package/dist/components/InvertableThemeProvider/InvertableThemeProvider.stories.js.map +1 -1
- package/dist/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
- package/dist/components/Pixel/PixelDebugger.js +13 -7
- package/dist/components/Pixel/PixelDebugger.js.map +1 -1
- package/dist/components/Pixel/PixelDebugger.stories.js +3 -2
- package/dist/components/Pixel/PixelDebugger.stories.js.map +1 -1
- package/dist/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
- package/dist/components/Pixel/PixelDebuggerProvider.js +8 -0
- package/dist/components/Pixel/PixelDebuggerProvider.js.map +1 -0
- package/dist/components/Pixel/PixelDebuggerToggle.js +4 -5
- package/dist/components/Pixel/PixelDebuggerToggle.js.map +1 -1
- package/dist/components/Pixel/index.d.ts +1 -0
- package/dist/components/Pixel/index.js +1 -0
- package/dist/components/Pixel/index.js.map +1 -1
- package/dist/components/TokenAmount/TokenAmountProps.d.ts +1 -0
- package/dist/contexts/UserEvents/Context.d.ts +6 -1
- package/dist/contexts/UserEvents/Context.js +7 -1
- package/dist/contexts/UserEvents/Context.js.map +1 -1
- package/dist/contexts/UserEvents/index.d.ts +1 -2
- package/dist/contexts/UserEvents/index.js +1 -2
- package/dist/contexts/UserEvents/index.js.map +1 -1
- package/dist/esm2015/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
- package/dist/esm2015/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
- package/dist/esm2015/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
- package/dist/esm2015/components/Pixel/index.d.ts +1 -0
- package/dist/esm2015/components/TokenAmount/TokenAmountProps.d.ts +1 -0
- package/dist/esm2015/contexts/UserEvents/Context.d.ts +6 -1
- package/dist/esm2015/contexts/UserEvents/index.d.ts +1 -2
- package/dist/esm2015/index.js +47 -28
- package/dist/esm2015/index.js.map +1 -1
- package/dist/esm2017/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
- package/dist/esm2017/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
- package/dist/esm2017/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
- package/dist/esm2017/components/Pixel/index.d.ts +1 -0
- package/dist/esm2017/components/TokenAmount/TokenAmountProps.d.ts +1 -0
- package/dist/esm2017/contexts/UserEvents/Context.d.ts +6 -1
- package/dist/esm2017/contexts/UserEvents/index.d.ts +1 -2
- package/dist/esm2017/index.js +47 -28
- package/dist/esm2017/index.js.map +1 -1
- package/dist/esm5/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
- package/dist/esm5/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
- package/dist/esm5/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
- package/dist/esm5/components/Pixel/index.d.ts +1 -0
- package/dist/esm5/components/TokenAmount/TokenAmountProps.d.ts +1 -0
- package/dist/esm5/contexts/UserEvents/Context.d.ts +6 -1
- package/dist/esm5/contexts/UserEvents/index.d.ts +1 -2
- package/dist/esm5/index.js +47 -28
- package/dist/esm5/index.js.map +1 -1
- package/dist/hooks/useLocalStorage.js +1 -1
- package/dist/hooks/useLocalStorage.js.map +1 -1
- package/dist/node/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
- package/dist/node/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
- package/dist/node/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
- package/dist/node/components/Pixel/index.d.ts +1 -0
- package/dist/node/components/TokenAmount/TokenAmountProps.d.ts +1 -0
- package/dist/node/contexts/UserEvents/Context.d.ts +6 -1
- package/dist/node/contexts/UserEvents/index.d.ts +1 -2
- package/dist/node/index.js +48 -27
- package/dist/node/index.js.map +1 -1
- package/dist/node-esm/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
- package/dist/node-esm/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
- package/dist/node-esm/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
- package/dist/node-esm/components/Pixel/index.d.ts +1 -0
- package/dist/node-esm/components/TokenAmount/TokenAmountProps.d.ts +1 -0
- package/dist/node-esm/contexts/UserEvents/Context.d.ts +6 -1
- package/dist/node-esm/contexts/UserEvents/index.d.ts +1 -2
- package/dist/node-esm/index.js +47 -28
- package/dist/node-esm/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/InvertableThemeProvider/InvertableThemeProvider.stories.tsx +49 -2
- package/src/components/InvertableThemeProvider/InvertableThemeProvider.tsx +7 -1
- package/src/components/InvertableThemeProvider/InvertableThemeProviderProps.ts +1 -0
- package/src/components/Pixel/PixelDebugger.stories.tsx +5 -4
- package/src/components/Pixel/PixelDebugger.tsx +44 -35
- package/src/components/Pixel/PixelDebuggerProvider.tsx +11 -0
- package/src/components/Pixel/PixelDebuggerToggle.tsx +4 -10
- package/src/components/Pixel/index.ts +1 -0
- package/src/contexts/UserEvents/Context.ts +14 -2
- package/src/contexts/UserEvents/index.ts +1 -2
- package/src/hooks/useLocalStorage.ts +1 -1
- package/xylabs-sdk-react-v2.8.2.tgz +0 -0
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Badge, Card, Divider, Typography, useTheme } from '@mui/material';
|
|
3
|
-
import { useState } from 'react';
|
|
3
|
+
import { useContext, useState } from 'react';
|
|
4
|
+
import { DebugUserEventsContext } from '../../contexts';
|
|
4
5
|
import { ButtonEx } from '../ButtonEx';
|
|
5
6
|
import { FlexCol } from '../FlexBox';
|
|
7
|
+
import { Portal } from '../Portal';
|
|
6
8
|
import { usePixelAltSendHandler } from './hooks';
|
|
7
9
|
export const PixelDebugger = () => {
|
|
10
|
+
const { isDebugging } = useContext(DebugUserEventsContext);
|
|
8
11
|
//TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
|
|
9
12
|
const theme = useTheme();
|
|
10
13
|
const [displayEvents, setDisplayEvents] = useState(false);
|
|
@@ -12,12 +15,15 @@ export const PixelDebugger = () => {
|
|
|
12
15
|
usePixelAltSendHandler((event, fields) => {
|
|
13
16
|
setEvents((events) => [{ event, fields }, ...events]);
|
|
14
17
|
});
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
if (!isDebugging) {
|
|
19
|
+
return null;
|
|
20
|
+
}
|
|
21
|
+
return (_jsx(Portal, { children: _jsx("div", Object.assign({ style: { bottom: 0, left: 0, position: 'fixed', width: 350 } }, { children: _jsx(Badge, Object.assign({ badgeContent: events.length, color: "primary", sx: { width: '100%' } }, { children: _jsx(Card, Object.assign({ variant: "outlined", sx: {
|
|
22
|
+
backdropFilter: 'blur(16px) saturate(180%)',
|
|
23
|
+
backgroundColor: 'rgba(18, 18, 18, .70)',
|
|
24
|
+
overflowY: 'auto',
|
|
25
|
+
width: '100%',
|
|
26
|
+
}, color: theme.palette.primary.main }, { children: _jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [_jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: _jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" }), void 0) }), void 0), displayEvents && !!events.length && (_jsx(FlexCol, Object.assign({ alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' } }, { children: events.map((e, index) => (_jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }), void 0)), displayEvents && !events.length && _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }), void 0)] }), void 0) }), void 0) }), void 0) }), void 0) }, void 0));
|
|
21
27
|
};
|
|
22
28
|
const PixelEventDetails = ({ event, fields, index, events, }) => {
|
|
23
29
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PixelDebugger.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebugger.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"PixelDebugger.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebugger.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { PixelApi, XyPixel } from '@xylabs/pixel';
|
|
3
3
|
import { useEffect } from 'react';
|
|
4
|
-
import { PixelDebuggerToggle } from './index';
|
|
4
|
+
import { PixelDebugger, PixelDebuggerToggle } from './index';
|
|
5
|
+
import { PixelDebuggerProvider } from './PixelDebuggerProvider';
|
|
5
6
|
const StorybookEntry = {
|
|
6
7
|
argTypes: {},
|
|
7
8
|
component: PixelDebuggerToggle,
|
|
@@ -17,7 +18,7 @@ const Template = (args) => {
|
|
|
17
18
|
XyPixel.selectApi(new PixelApi('local'));
|
|
18
19
|
XyPixel.init('storybookPixel');
|
|
19
20
|
}, []);
|
|
20
|
-
return (_jsxs(
|
|
21
|
+
return (_jsxs(PixelDebuggerProvider, { children: [_jsx(PixelDebuggerToggle, Object.assign({}, args), void 0), _jsx(PixelDebugger, {}, void 0)] }, void 0));
|
|
21
22
|
};
|
|
22
23
|
const Default = Template.bind({});
|
|
23
24
|
Default.args = {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PixelDebugger.stories.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebugger.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"PixelDebugger.stories.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebugger.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,MAAM,cAAc,GAAG;IACrB,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,mBAAmB;IAC9B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,IAAI;SACX;KACF;IACD,KAAK,EAAE,gCAAgC;CACK,CAAA;AAE9C,MAAM,QAAQ,GAA+C,CAAC,IAAI,EAAE,EAAE;IACpE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,SAAS,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAA;QACxC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAChC,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,CACL,MAAC,qBAAqB,eACpB,KAAC,mBAAmB,oBAAK,IAAI,UAAI,EACjC,KAAC,aAAa,aAAG,YACK,CACzB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA;AAEjB,OAAO,EAAE,OAAO,EAAE,CAAA;AAElB,oDAAoD;AACpD,eAAe,cAAc,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { DebugUserEventsContext } from '../../contexts';
|
|
3
|
+
import { useLocalStorage } from '../../hooks';
|
|
4
|
+
export const PixelDebuggerProvider = ({ children }) => {
|
|
5
|
+
const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
|
|
6
|
+
return (_jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children }), void 0));
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=PixelDebuggerProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PixelDebuggerProvider.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebuggerProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,CAAC,MAAM,qBAAqB,GAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAe,CAAU,kBAAkB,EAAE,KAAK,CAAC,CAAA;IACzF,OAAO,CACL,KAAC,sBAAsB,CAAC,QAAQ,kBAAC,KAAK,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,gBACpE,QAAQ,YACuB,CACnC,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { FormControl, FormLabel, Switch } from '@mui/material';
|
|
4
|
-
import {
|
|
4
|
+
import { useContext } from 'react';
|
|
5
|
+
import { DebugUserEventsContext } from '../../contexts';
|
|
5
6
|
import { FlexRow } from '../FlexBox';
|
|
6
|
-
import { Portal } from '../Portal';
|
|
7
|
-
import { PixelDebugger } from './PixelDebugger';
|
|
8
7
|
export const PixelDebuggerToggle = (_a) => {
|
|
9
8
|
var props = __rest(_a, []);
|
|
10
|
-
const
|
|
11
|
-
return (
|
|
9
|
+
const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext);
|
|
10
|
+
return (_jsx(FlexRow, Object.assign({}, props, { children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Enable Debugger" }, void 0), _jsx(Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) }, void 0)] }, void 0) }), void 0));
|
|
12
11
|
};
|
|
13
12
|
//# sourceMappingURL=PixelDebuggerToggle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PixelDebuggerToggle.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebuggerToggle.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"PixelDebuggerToggle.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebuggerToggle.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAgB,OAAO,EAAE,MAAM,YAAY,CAAA;AAElD,MAAM,CAAC,MAAM,mBAAmB,GAA2B,CAAC,EAAY,EAAE,EAAE;QAAX,KAAK,cAAV,EAAY,CAAF;IACpE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAA;IAE1E,OAAO,CACL,KAAC,OAAO,oBAAK,KAAK,cAChB,MAAC,WAAW,eACV,KAAC,SAAS,0CAA4B,EACtC,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,WAAI,YACjE,YACN,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Pixel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Pixel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA"}
|
|
@@ -4,4 +4,9 @@ interface Props {
|
|
|
4
4
|
userEvents?: UserEventHandler<unknown>;
|
|
5
5
|
}
|
|
6
6
|
declare const UserEventsContext: import("react").Context<Props>;
|
|
7
|
-
|
|
7
|
+
interface DebuggingProps {
|
|
8
|
+
isDebugging: boolean;
|
|
9
|
+
setIsDebugging: (value: boolean) => void;
|
|
10
|
+
}
|
|
11
|
+
declare const DebugUserEventsContext: import("react").Context<DebuggingProps>;
|
|
12
|
+
export { DebugUserEventsContext, UserEventsContext };
|
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
import { createContext } from 'react';
|
|
2
2
|
const UserEventsContext = createContext({});
|
|
3
|
-
|
|
3
|
+
const DebugUserEventsContext = createContext({
|
|
4
|
+
isDebugging: false,
|
|
5
|
+
setIsDebugging: (value) => {
|
|
6
|
+
console.warn('set is debugging is not set', value);
|
|
7
|
+
},
|
|
8
|
+
});
|
|
9
|
+
export { DebugUserEventsContext, UserEventsContext };
|
|
4
10
|
//# sourceMappingURL=Context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../src/contexts/UserEvents/Context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../src/contexts/UserEvents/Context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAKrC,MAAM,iBAAiB,GAAG,aAAa,CAAQ,EAAE,CAAC,CAAA;AAOlD,MAAM,sBAAsB,GAAG,aAAa,CAAiB;IAC3D,WAAW,EAAE,KAAK;IAClB,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAA;IACpD,CAAC;CACF,CAAC,CAAA;AAEF,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/UserEvents/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/UserEvents/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA"}
|
package/dist/esm2015/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts
CHANGED
|
@@ -2,5 +2,6 @@
|
|
|
2
2
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
3
3
|
declare const StorybookEntry: ComponentMeta<import("react").FC<import("./InvertableThemeProviderProps").InvertableThemeProviderProps>>;
|
|
4
4
|
declare const Default: ComponentStory<import("react").FC<import("./InvertableThemeProviderProps").InvertableThemeProviderProps>>;
|
|
5
|
-
|
|
5
|
+
declare const DarkThemeEnabled: ComponentStory<import("react").FC<import("./InvertableThemeProviderProps").InvertableThemeProviderProps>>;
|
|
6
|
+
export { DarkThemeEnabled, Default };
|
|
6
7
|
export default StorybookEntry;
|
|
@@ -4,4 +4,9 @@ interface Props {
|
|
|
4
4
|
userEvents?: UserEventHandler<unknown>;
|
|
5
5
|
}
|
|
6
6
|
declare const UserEventsContext: import("react").Context<Props>;
|
|
7
|
-
|
|
7
|
+
interface DebuggingProps {
|
|
8
|
+
isDebugging: boolean;
|
|
9
|
+
setIsDebugging: (value: boolean) => void;
|
|
10
|
+
}
|
|
11
|
+
declare const DebugUserEventsContext: import("react").Context<DebuggingProps>;
|
|
12
|
+
export { DebugUserEventsContext, UserEventsContext };
|
package/dist/esm2015/index.js
CHANGED
|
@@ -1527,6 +1527,12 @@ const NetworkSettingsLoader = (props) => {
|
|
|
1527
1527
|
};
|
|
1528
1528
|
|
|
1529
1529
|
const UserEventsContext = createContext({});
|
|
1530
|
+
const DebugUserEventsContext = createContext({
|
|
1531
|
+
isDebugging: false,
|
|
1532
|
+
setIsDebugging: (value) => {
|
|
1533
|
+
console.warn('set is debugging is not set', value);
|
|
1534
|
+
},
|
|
1535
|
+
});
|
|
1530
1536
|
|
|
1531
1537
|
const UserEventsLoader = ({ userEvents, children }) => {
|
|
1532
1538
|
return jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents } }, { children: children }), void 0);
|
|
@@ -1653,8 +1659,9 @@ const InvertableThemeContext = createContext({
|
|
|
1653
1659
|
options: {},
|
|
1654
1660
|
});
|
|
1655
1661
|
|
|
1656
|
-
const InvertableThemeProvider = ({ options, children, dark, scoped = false, invert = false, noResponsiveFonts, }) => {
|
|
1662
|
+
const InvertableThemeProvider = ({ options, children, dark, scoped = false, invert = false, noResponsiveFonts, darkTheme, }) => {
|
|
1657
1663
|
var _a, _b;
|
|
1664
|
+
let internalDarkTheme = {};
|
|
1658
1665
|
const contextInvertableTheme = useContext(InvertableThemeContext);
|
|
1659
1666
|
const clonedOptions = clone((_a = options !== null && options !== void 0 ? options : contextInvertableTheme.options) !== null && _a !== void 0 ? _a : {});
|
|
1660
1667
|
clonedOptions.palette = (_b = clonedOptions.palette) !== null && _b !== void 0 ? _b : {};
|
|
@@ -1664,7 +1671,10 @@ const InvertableThemeProvider = ({ options, children, dark, scoped = false, inve
|
|
|
1664
1671
|
if (dark !== undefined) {
|
|
1665
1672
|
clonedOptions.palette.mode = dark ? 'dark' : 'light';
|
|
1666
1673
|
}
|
|
1667
|
-
|
|
1674
|
+
if (clonedOptions.palette.mode === 'dark' && (darkTheme === null || darkTheme === void 0 ? void 0 : darkTheme.palette)) {
|
|
1675
|
+
internalDarkTheme = darkTheme;
|
|
1676
|
+
}
|
|
1677
|
+
let theme = createTheme(clonedOptions, internalDarkTheme);
|
|
1668
1678
|
if (!noResponsiveFonts) {
|
|
1669
1679
|
theme = responsiveFontSizes(theme);
|
|
1670
1680
|
}
|
|
@@ -1768,7 +1778,7 @@ const useLocalStorage = (key, defaultValue) => {
|
|
|
1768
1778
|
const [storedValue, setStoredValue] = useState(() => {
|
|
1769
1779
|
try {
|
|
1770
1780
|
const item = getLocalStorageObject(key);
|
|
1771
|
-
return item
|
|
1781
|
+
return Object.keys(item).length ? item : defaultValue;
|
|
1772
1782
|
}
|
|
1773
1783
|
catch (ex) {
|
|
1774
1784
|
//Error is already logged
|
|
@@ -2036,6 +2046,24 @@ const NumberStatus = (_a) => {
|
|
|
2036
2046
|
return (jsx(ButtonEx, Object.assign({ size: size, padding: 0, style: Object.assign({ borderRadius: rounded ? theme.shape.borderRadius : 0, overflow: rounded ? 'hidden' : undefined }, style) }, props, { children: jsxs(FlexCol, Object.assign({ alignItems: "stretch", height: sizePixels, width: autoWidth ? '100%' : sizePixels, busy: value === undefined && !error }, { children: [jsx(FlexGrowRow, Object.assign({ bgcolor: bgColorTop, color: theme.palette.getContrastText(bgColorTop), fontSize: calcFontSize, fontFamily: "Source Code Pro,monospace", alignItems: "center", height: sizePixels * 0.75 }, { children: numeral(value).format(format) }), void 0), jsx(FlexGrowRow, Object.assign({ bgcolor: bgColorBottom, borderTop: "1px", color: theme.palette.getContrastText(bgColorBottom), fontSize: sizePixels * 0.12, fontFamily: theme.typography.fontFamily, height: sizePixels * 0.25 }, { children: title }), void 0)] }), void 0) }), void 0));
|
|
2037
2047
|
};
|
|
2038
2048
|
|
|
2049
|
+
const Portal = ({ children, className, el = 'div', target = 'body' }) => {
|
|
2050
|
+
const [container] = useState(document.createElement(el));
|
|
2051
|
+
if (className) {
|
|
2052
|
+
container.classList.add(className);
|
|
2053
|
+
}
|
|
2054
|
+
useEffect(() => {
|
|
2055
|
+
const targetElement = document.querySelector(target);
|
|
2056
|
+
if (!targetElement) {
|
|
2057
|
+
console.warn(`Unable to find target element: ${target}`);
|
|
2058
|
+
}
|
|
2059
|
+
targetElement === null || targetElement === void 0 ? void 0 : targetElement.appendChild(container);
|
|
2060
|
+
return () => {
|
|
2061
|
+
targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeChild(container);
|
|
2062
|
+
};
|
|
2063
|
+
}, [container, target]);
|
|
2064
|
+
return createPortal(children, container);
|
|
2065
|
+
};
|
|
2066
|
+
|
|
2039
2067
|
const usePixelAltSendHandler = (altHandler) => {
|
|
2040
2068
|
const [pixelSend, setPixelSend] = useState();
|
|
2041
2069
|
useEffect(() => {
|
|
@@ -2059,6 +2087,7 @@ const usePixelAltSendHandler = (altHandler) => {
|
|
|
2059
2087
|
};
|
|
2060
2088
|
|
|
2061
2089
|
const PixelDebugger = () => {
|
|
2090
|
+
const { isDebugging } = useContext(DebugUserEventsContext);
|
|
2062
2091
|
//TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
|
|
2063
2092
|
const theme = useTheme();
|
|
2064
2093
|
const [displayEvents, setDisplayEvents] = useState(false);
|
|
@@ -2066,40 +2095,30 @@ const PixelDebugger = () => {
|
|
|
2066
2095
|
usePixelAltSendHandler((event, fields) => {
|
|
2067
2096
|
setEvents((events) => [{ event, fields }, ...events]);
|
|
2068
2097
|
});
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2098
|
+
if (!isDebugging) {
|
|
2099
|
+
return null;
|
|
2100
|
+
}
|
|
2101
|
+
return (jsx(Portal, { children: jsx("div", Object.assign({ style: { bottom: 0, left: 0, position: 'fixed', width: 350 } }, { children: jsx(Badge, Object.assign({ badgeContent: events.length, color: "primary", sx: { width: '100%' } }, { children: jsx(Card, Object.assign({ variant: "outlined", sx: {
|
|
2102
|
+
backdropFilter: 'blur(16px) saturate(180%)',
|
|
2103
|
+
backgroundColor: 'rgba(18, 18, 18, .70)',
|
|
2104
|
+
overflowY: 'auto',
|
|
2105
|
+
width: '100%',
|
|
2106
|
+
}, color: theme.palette.primary.main }, { children: jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" }), void 0) }), void 0), displayEvents && !!events.length && (jsx(FlexCol, Object.assign({ alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' } }, { children: events.map((e, index) => (jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }), void 0)), displayEvents && !events.length && jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }), void 0)] }), void 0) }), void 0) }), void 0) }), void 0) }, void 0));
|
|
2075
2107
|
};
|
|
2076
2108
|
const PixelEventDetails = ({ event, fields, index, events, }) => {
|
|
2077
2109
|
const [isOpen, setIsOpen] = useState(false);
|
|
2078
2110
|
return (jsxs(FlexCol, Object.assign({ alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen) }, { children: [jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: event }), void 0), isOpen && (jsx(Typography, Object.assign({ marginBottom: 0.5, variant: "caption" }, { children: JSON.stringify(fields, null, 2) }), void 0)), events[index + 1] && jsx(Divider, {}, void 0)] }), void 0));
|
|
2079
2111
|
};
|
|
2080
2112
|
|
|
2081
|
-
const
|
|
2082
|
-
const [
|
|
2083
|
-
|
|
2084
|
-
container.classList.add(className);
|
|
2085
|
-
}
|
|
2086
|
-
useEffect(() => {
|
|
2087
|
-
const targetElement = document.querySelector(target);
|
|
2088
|
-
if (!targetElement) {
|
|
2089
|
-
console.warn(`Unable to find target element: ${target}`);
|
|
2090
|
-
}
|
|
2091
|
-
targetElement === null || targetElement === void 0 ? void 0 : targetElement.appendChild(container);
|
|
2092
|
-
return () => {
|
|
2093
|
-
targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeChild(container);
|
|
2094
|
-
};
|
|
2095
|
-
}, [container, target]);
|
|
2096
|
-
return createPortal(children, container);
|
|
2113
|
+
const PixelDebuggerProvider = ({ children }) => {
|
|
2114
|
+
const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
|
|
2115
|
+
return (jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children }), void 0));
|
|
2097
2116
|
};
|
|
2098
2117
|
|
|
2099
2118
|
const PixelDebuggerToggle = (_a) => {
|
|
2100
2119
|
var props = __rest(_a, []);
|
|
2101
|
-
const
|
|
2102
|
-
return (
|
|
2120
|
+
const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext);
|
|
2121
|
+
return (jsx(FlexRow, Object.assign({}, props, { children: jsxs(FormControl, { children: [jsx(FormLabel, { children: "Enable Debugger" }, void 0), jsx(Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) }, void 0)] }, void 0) }), void 0));
|
|
2103
2122
|
};
|
|
2104
2123
|
|
|
2105
2124
|
const QuickTipButton = (_a) => {
|
|
@@ -2177,5 +2196,5 @@ const TokenAmount = (_a) => {
|
|
|
2177
2196
|
return (jsx(ButtonEx, Object.assign({ style: Object.assign({ backgroundColor: statusColor }, style), variant: "outlined", onClick: onButtonClick }, props, { children: jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%", busy: amount === undefined, busySize: 16 }, { children: [jsxs(FlexRow, { children: [logo ? jsx("img", { src: img, height: 24 }, void 0) : null, label ? (jsx(Typography, Object.assign({ marginRight: 1, marginLeft: logo ? 1 : 0, noWrap: true, fontFamily: textFontFamily, variant: "caption" }, { children: label }), void 0)) : null] }, void 0), jsx(Typography, Object.assign({ color: textColor, noWrap: true, fontFamily: textFontFamily, variant: "body1", style: { textTransform: 'none' } }, { children: amountString }), void 0)] }), void 0) }), void 0));
|
|
2178
2197
|
};
|
|
2179
2198
|
|
|
2180
|
-
export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DripCustomEvent, DripStandardEvents, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, ExperimentsDebugger, FacebookCustomEvent, FacebookStandardEvents, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkToEx, MapCategoryType, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, PixelDebugger, PixelDebuggerToggle, Portal, QuickTipButton, Rdt, RedditCustomEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SnapTr, SnapchatStandardEvents, TiktokCustomEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, UserEventsLoader, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useLocalStorage, useMounted, useNavigateToEthAddress, useSpacing, useUserEvents, useWebP, useWindowSize };
|
|
2199
|
+
export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DebugUserEventsContext, DripCustomEvent, DripStandardEvents, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, ExperimentsDebugger, FacebookCustomEvent, FacebookStandardEvents, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkToEx, MapCategoryType, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, PixelDebugger, PixelDebuggerProvider, PixelDebuggerToggle, Portal, QuickTipButton, Rdt, RedditCustomEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SnapTr, SnapchatStandardEvents, TiktokCustomEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, UserEventsLoader, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useLocalStorage, useMounted, useNavigateToEthAddress, useSpacing, useUserEvents, useWebP, useWindowSize };
|
|
2181
2200
|
//# sourceMappingURL=index.js.map
|