@unovis/react 1.0.0-beta.9 → 1.0.1-beta.6

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.
@@ -15,7 +15,11 @@ function VisSingleContainerFC(props) {
15
15
  setData(props.data);
16
16
  const c = new SingleContainer(container.current, getConfig(), props.data);
17
17
  setChart(c);
18
- return () => c.destroy();
18
+ return () => {
19
+ if (animationFrameRef.current)
20
+ cancelAnimationFrame(animationFrameRef.current);
21
+ c.destroy();
22
+ };
19
23
  }, []);
20
24
  useEffect(() => {
21
25
  const preventRender = true;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/containers/single-container/index.tsx"],"sourcesContent":["// eslint-disable-next-line no-use-before-define\nimport React, { ReactNode, useEffect, useRef, useState, PropsWithChildren } from 'react'\nimport { SingleContainer, SingleContainerConfigInterface, ComponentCore, Tooltip } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisSingleContainerProps<Data> = SingleContainerConfigInterface<Data> & {\n data?: Data;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisSingleContainerFC<Data> (props: PropsWithChildren<VisSingleContainerProps<Data>>): JSX.Element {\n const container = useRef<HTMLDivElement>(null)\n const [chart, setChart] = useState<SingleContainer<Data>>()\n const [data, setData] = useState<Data | undefined>(undefined)\n const animationFrameRef = useRef<number | null>(null)\n\n const getConfig = (): SingleContainerConfigInterface<Data> => ({\n ...props,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n component: container.current?.querySelector<VisComponentElement<ComponentCore<Data>>>('vis-component')?.__component__,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n })\n\n // On Mount\n useEffect(() => {\n setData(props.data)\n const c = new SingleContainer<Data>(container.current as HTMLDivElement, getConfig(), props.data)\n setChart(c)\n return () => c.destroy()\n }, [])\n\n // On Props Update\n useEffect(() => {\n const preventRender = true\n\n // Set new Data without re-render\n if (props.data && (props.data !== data)) {\n chart?.setData(props.data, preventRender)\n setData(props.data)\n }\n\n // Update and render\n // ! Experimental: we use `requestAnimationFrame` to make the wrapper compatible with React 18 Strict Mode.\n // React 18 in Strict Mode renders components twice. At the same time, this container will get updated only after\n // the first render of its children (VisSankey, VisGraph, ...) meaning that their wrong instances (the ones\n // that will be destroyed soon) are stored in the `__component__` property of their elements at that moment.\n // So we delay the container update with `requestAnimationFrame` to wait till the new instances of children\n // components are available at `__component__`.\n if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n animationFrameRef.current = requestAnimationFrame(() => chart?.updateContainer(getConfig()))\n })\n\n return (\n <div ref={container} style={{ width: '100%', height: '100%', position: 'relative' }}>\n {props.children}\n </div>\n )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n// and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisSingleContainer: (<Data>(props: PropsWithChildren<VisSingleContainerProps<Data>>) => JSX.Element | null) =\n React.memo(VisSingleContainerFC, arePropsEqual)\n"],"names":[],"mappings":";;;;AAeA,SAAS,oBAAoB,CAAQ,KAAuD,EAAA;AAC1F,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAyB,CAAA;IAC3D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,SAAS,CAAC,CAAA;AAC7D,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;IAErD,MAAM,SAAS,GAAG,MAA2C;;AAAC,QAAA,QACzD,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,CAER,EAAA,EAAA,SAAS,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,CAA2C,eAAe,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,EAErH,OAAO,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,CAA+B,aAAa,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,KACrG;KAAA,CAAA;IAGF,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACnB,QAAA,MAAM,CAAC,GAAG,IAAI,eAAe,CAAO,SAAS,CAAC,OAAyB,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QACjG,QAAQ,CAAC,CAAC,CAAC,CAAA;AACX,QAAA,OAAO,MAAM,CAAC,CAAC,OAAO,EAAE,CAAA;KACzB,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,MAAM,aAAa,GAAG,IAAI,CAAA;QAG1B,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;AACvC,YAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;AACzC,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACpB,SAAA;QASD,IAAI,iBAAiB,CAAC,OAAO;AAAE,YAAA,oBAAoB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;QAC9E,iBAAiB,CAAC,OAAO,GAAG,qBAAqB,CAAC,MAAM,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,eAAe,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;AAC9F,KAAC,CAAC,CAAA;IAEF,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,EAChF,EAAA,KAAK,CAAC,QAAQ,CACX,EACP;AACH,CAAC;AAIM,MAAM,kBAAkB,GAC7B,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE,aAAa;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/containers/single-container/index.tsx"],"sourcesContent":["// eslint-disable-next-line no-use-before-define\nimport React, { ReactNode, useEffect, useRef, useState, PropsWithChildren } from 'react'\nimport { SingleContainer, SingleContainerConfigInterface, ComponentCore, Tooltip } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisSingleContainerProps<Data> = SingleContainerConfigInterface<Data> & {\n data?: Data;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction VisSingleContainerFC<Data> (props: PropsWithChildren<VisSingleContainerProps<Data>>): JSX.Element {\n const container = useRef<HTMLDivElement>(null)\n const [chart, setChart] = useState<SingleContainer<Data>>()\n const [data, setData] = useState<Data | undefined>(undefined)\n const animationFrameRef = useRef<number | null>(null)\n\n const getConfig = (): SingleContainerConfigInterface<Data> => ({\n ...props,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n component: container.current?.querySelector<VisComponentElement<ComponentCore<Data>>>('vis-component')?.__component__,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n })\n\n // On Mount\n useEffect(() => {\n setData(props.data)\n const c = new SingleContainer<Data>(container.current as HTMLDivElement, getConfig(), props.data)\n setChart(c)\n return () => {\n if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n c.destroy()\n }\n }, [])\n\n // On Props Update\n useEffect(() => {\n const preventRender = true\n\n // Set new Data without re-render\n if (props.data && (props.data !== data)) {\n chart?.setData(props.data, preventRender)\n setData(props.data)\n }\n\n // Update and render\n // ! Experimental: we use `requestAnimationFrame` to make the wrapper compatible with React 18 Strict Mode.\n // React 18 in Strict Mode renders components twice. At the same time, this container will get updated only after\n // the first render of its children (VisSankey, VisGraph, ...) meaning that their wrong instances (the ones\n // that will be destroyed soon) are stored in the `__component__` property of their elements at that moment.\n // So we delay the container update with `requestAnimationFrame` to wait till the new instances of children\n // components are available at `__component__`.\n if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n animationFrameRef.current = requestAnimationFrame(() => chart?.updateContainer(getConfig()))\n })\n\n return (\n <div ref={container} style={{ width: '100%', height: '100%', position: 'relative' }}>\n {props.children}\n </div>\n )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n// and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisSingleContainer: (<Data>(props: PropsWithChildren<VisSingleContainerProps<Data>>) => JSX.Element | null) =\n React.memo(VisSingleContainerFC, arePropsEqual)\n"],"names":[],"mappings":";;;;AAeA,SAAS,oBAAoB,CAAQ,KAAuD,EAAA;AAC1F,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAyB,CAAA;IAC3D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,SAAS,CAAC,CAAA;AAC7D,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;IAErD,MAAM,SAAS,GAAG,MAA2C;;AAAC,QAAA,QACzD,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,CAER,EAAA,EAAA,SAAS,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,CAA2C,eAAe,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,EAErH,OAAO,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,CAA+B,aAAa,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,KACrG;KAAA,CAAA;IAGF,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACnB,QAAA,MAAM,CAAC,GAAG,IAAI,eAAe,CAAO,SAAS,CAAC,OAAyB,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QACjG,QAAQ,CAAC,CAAC,CAAC,CAAA;AACX,QAAA,OAAO,MAAK;YACV,IAAI,iBAAiB,CAAC,OAAO;AAAE,gBAAA,oBAAoB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;YAC9E,CAAC,CAAC,OAAO,EAAE,CAAA;AACb,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,MAAM,aAAa,GAAG,IAAI,CAAA;QAG1B,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;AACvC,YAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;AACzC,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;AACpB,SAAA;QASD,IAAI,iBAAiB,CAAC,OAAO;AAAE,YAAA,oBAAoB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;QAC9E,iBAAiB,CAAC,OAAO,GAAG,qBAAqB,CAAC,MAAM,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,eAAe,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;AAC9F,KAAC,CAAC,CAAA;IAEF,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,EAChF,EAAA,KAAK,CAAC,QAAQ,CACX,EACP;AACH,CAAC;AAIM,MAAM,kBAAkB,GAC7B,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE,aAAa;;;;"}
@@ -23,7 +23,11 @@ function VisXYContainerFC(props) {
23
23
  setData(props.data);
24
24
  const c = new XYContainer(container.current, getConfig(), props.data);
25
25
  setChart(c);
26
- return () => c.destroy();
26
+ return () => {
27
+ if (animationFrameRef.current)
28
+ cancelAnimationFrame(animationFrameRef.current);
29
+ c.destroy();
30
+ };
27
31
  }, []);
28
32
  useEffect(() => {
29
33
  const preventRender = true;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/containers/xy-container/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { ReactNode, useEffect, useRef, useState, PropsWithChildren } from 'react'\nimport { XYContainer, XYContainerConfigInterface, XYComponentCore, Tooltip, Crosshair, Axis, AxisType } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisXYContainerProps<Datum> = XYContainerConfigInterface<Datum> & {\n data?: Datum[];\n className?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisXYContainerFC<Datum> (props: PropsWithChildren<VisXYContainerProps<Datum>>): JSX.Element {\n const container = useRef<HTMLDivElement>(null)\n const [chart, setChart] = useState<XYContainer<Datum>>()\n const [data, setData] = useState<Datum[] | undefined>(undefined)\n const animationFrameRef = useRef<number | null>(null)\n\n const getConfig = (): XYContainerConfigInterface<Datum> => ({\n components: Array\n .from(container.current?.querySelectorAll<VisComponentElement<XYComponentCore<Datum>>>('vis-component') ?? [])\n .map(c => c.__component__),\n tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n crosshair: container.current?.querySelector<VisComponentElement<Crosshair<Datum>>>('vis-crosshair')?.__component__,\n xAxis: Array\n .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n .map(c => c.__component__)\n .find(c => c.config.type === AxisType.X),\n yAxis: Array\n .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n .map(c => c.__component__)\n .find(c => c.config.type === AxisType.Y),\n margin: { top: 5, left: 5, right: 5, bottom: 5 },\n ...props,\n })\n\n // On Mount\n useEffect(() => {\n setData(props.data)\n const c = new XYContainer<Datum>(container.current as HTMLDivElement, getConfig(), props.data)\n setChart(c)\n\n return () => c.destroy()\n }, [])\n\n // On Props Update\n useEffect(() => {\n const preventRender = true\n\n // Set new Data without re-render\n if (props.data && (props.data !== data)) {\n chart?.setData(props.data, preventRender)\n setData(props.data)\n }\n\n // Update and render\n // ! Experimental: we use `requestAnimationFrame` to make the wrapper compatible with React 18 Strict Mode.\n // React 18 in Strict Mode renders components twice. At the same time, this container will get updated only after\n // the first render of its children (VisLine, VisArea, ...) meaning that their wrong instances (the ones\n // that will be destroyed soon) are stored in the `__component__` property of their elements at that moment.\n // So we delay the container update with `requestAnimationFrame` to wait till the new instances of children\n // components are available at `__component__`.\n if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n animationFrameRef.current = requestAnimationFrame(() => chart?.updateContainer(getConfig()))\n })\n\n return (\n <div ref={container} className={props.className}>\n {props.children}\n </div>\n )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n// and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisXYContainer: (<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>) => JSX.Element | null) =\n React.memo(VisXYContainerFC, arePropsEqual)\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/containers/xy-container/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { ReactNode, useEffect, useRef, useState, PropsWithChildren } from 'react'\nimport { XYContainer, XYContainerConfigInterface, XYComponentCore, Tooltip, Crosshair, Axis, AxisType } from '@unovis/ts'\n\n// Utils\nimport { arePropsEqual } from 'src/utils/react'\n\n// Types\nimport { VisComponentElement } from 'src/types/dom'\n\nexport type VisXYContainerProps<Datum> = XYContainerConfigInterface<Datum> & {\n data?: Datum[];\n className?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisXYContainerFC<Datum> (props: PropsWithChildren<VisXYContainerProps<Datum>>): JSX.Element {\n const container = useRef<HTMLDivElement>(null)\n const [chart, setChart] = useState<XYContainer<Datum>>()\n const [data, setData] = useState<Datum[] | undefined>(undefined)\n const animationFrameRef = useRef<number | null>(null)\n\n const getConfig = (): XYContainerConfigInterface<Datum> => ({\n components: Array\n .from(container.current?.querySelectorAll<VisComponentElement<XYComponentCore<Datum>>>('vis-component') ?? [])\n .map(c => c.__component__),\n tooltip: container.current?.querySelector<VisComponentElement<Tooltip>>('vis-tooltip')?.__component__,\n crosshair: container.current?.querySelector<VisComponentElement<Crosshair<Datum>>>('vis-crosshair')?.__component__,\n xAxis: Array\n .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n .map(c => c.__component__)\n .find(c => c.config.type === AxisType.X),\n yAxis: Array\n .from(container.current?.querySelectorAll<VisComponentElement<Axis<Datum>>>('vis-axis') ?? [])\n .map(c => c.__component__)\n .find(c => c.config.type === AxisType.Y),\n margin: { top: 5, left: 5, right: 5, bottom: 5 },\n ...props,\n })\n\n // On Mount\n useEffect(() => {\n setData(props.data)\n const c = new XYContainer<Datum>(container.current as HTMLDivElement, getConfig(), props.data)\n setChart(c)\n\n return () => {\n if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n c.destroy()\n }\n }, [])\n\n // On Props Update\n useEffect(() => {\n const preventRender = true\n\n // Set new Data without re-render\n if (props.data && (props.data !== data)) {\n chart?.setData(props.data, preventRender)\n setData(props.data)\n }\n\n // Update and render\n // ! Experimental: we use `requestAnimationFrame` to make the wrapper compatible with React 18 Strict Mode.\n // React 18 in Strict Mode renders components twice. At the same time, this container will get updated only after\n // the first render of its children (VisLine, VisArea, ...) meaning that their wrong instances (the ones\n // that will be destroyed soon) are stored in the `__component__` property of their elements at that moment.\n // So we delay the container update with `requestAnimationFrame` to wait till the new instances of children\n // components are available at `__component__`.\n if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)\n animationFrameRef.current = requestAnimationFrame(() => chart?.updateContainer(getConfig()))\n })\n\n return (\n <div ref={container} className={props.className}>\n {props.children}\n </div>\n )\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n// and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisXYContainer: (<Datum>(props: PropsWithChildren<VisXYContainerProps<Datum>>) => JSX.Element | null) =\n React.memo(VisXYContainerFC, arePropsEqual)\n"],"names":[],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { ForwardedRef, Ref } from 'react';
2
2
  import { LeafletFlowMap, LeafletFlowMapConfigInterface } from '@unovis/ts';
3
- export declare type VisLeafletFlowMapProps<PointDatum, FlowDatum> = LeafletFlowMapConfigInterface<PointDatum, FlowDatum> & {
3
+ export declare type VisLeafletFlowMapProps<PointDatum extends Record<string, unknown>, FlowDatum extends Record<string, unknown>> = LeafletFlowMapConfigInterface<PointDatum, FlowDatum> & {
4
4
  data?: {
5
5
  points: PointDatum[];
6
6
  flows: FlowDatum[];
@@ -8,8 +8,8 @@ export declare type VisLeafletFlowMapProps<PointDatum, FlowDatum> = LeafletFlowM
8
8
  ref?: Ref<VisLeafletFlowMapRef<PointDatum, FlowDatum>>;
9
9
  className?: string;
10
10
  };
11
- export declare type VisLeafletFlowMapRef<PointDatum, FlowDatum> = {
11
+ export declare type VisLeafletFlowMapRef<PointDatum extends Record<string, unknown>, FlowDatum extends Record<string, unknown>> = {
12
12
  component: LeafletFlowMap<PointDatum, FlowDatum> | undefined;
13
13
  };
14
- export declare function VisLeafletFlowMapFC<PointDatum, FlowDatum>(props: VisLeafletFlowMapProps<PointDatum, FlowDatum>, ref: ForwardedRef<VisLeafletFlowMapRef<PointDatum, FlowDatum>>): JSX.Element;
15
- export declare const VisLeafletFlowMap: (<PointDatum, FlowDatum>(props: VisLeafletFlowMapProps<PointDatum, FlowDatum>) => JSX.Element | null);
14
+ export declare function VisLeafletFlowMapFC<PointDatum extends Record<string, unknown>, FlowDatum extends Record<string, unknown>>(props: VisLeafletFlowMapProps<PointDatum, FlowDatum>, ref: ForwardedRef<VisLeafletFlowMapRef<PointDatum, FlowDatum>>): JSX.Element;
15
+ export declare const VisLeafletFlowMap: (<PointDatum extends Record<string, unknown>, FlowDatum extends Record<string, unknown>>(props: VisLeafletFlowMapProps<PointDatum, FlowDatum>) => JSX.Element | null);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/html-components/leaflet-flow-map/index.tsx"],"sourcesContent":["import React, { ForwardedRef, Ref, useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { LeafletFlowMap, LeafletFlowMapConfigInterface } from '@unovis/ts'\nimport { arePropsEqual } from '../../utils/react'\n\nexport type VisLeafletFlowMapProps<PointDatum, FlowDatum> = LeafletFlowMapConfigInterface<PointDatum, FlowDatum> & {\n data?: { points: PointDatum[]; flows: FlowDatum[] };\n ref?: Ref<VisLeafletFlowMapRef<PointDatum, FlowDatum>>;\n className?: string;\n}\n\nexport type VisLeafletFlowMapRef<PointDatum, FlowDatum> = {\n component: LeafletFlowMap<PointDatum, FlowDatum> | undefined;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisLeafletFlowMapFC<PointDatum, FlowDatum> (\n props: VisLeafletFlowMapProps<PointDatum, FlowDatum>,\n ref: ForwardedRef<VisLeafletFlowMapRef<PointDatum, FlowDatum>>\n): JSX.Element {\n const container = useRef<HTMLDivElement>(null)\n const [component, setComponent] = useState<LeafletFlowMap<PointDatum, FlowDatum>>()\n\n // On Mount\n useEffect(() => {\n const c = new LeafletFlowMap(container.current as HTMLDivElement, props, props.data)\n setComponent(c)\n\n return () => c?.destroy()\n }, [])\n\n // On Props Update\n useEffect(() => {\n if (props.data) component?.setData(props.data)\n\n component?.setConfig(props)\n })\n\n useImperativeHandle(ref, () => ({ component }))\n return <div ref={container} className={props.className} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n// and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLeafletFlowMap: (<PointDatum, FlowDatum>(props: VisLeafletFlowMapProps<PointDatum, FlowDatum>) => JSX.Element | null) =\n React.memo(React.forwardRef(VisLeafletFlowMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAegB,SAAA,mBAAmB,CACjC,KAAoD,EACpD,GAA8D,EAAA;AAE9D,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAyC,CAAA;IAGnF,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,CAAC,GAAG,IAAI,cAAc,CAAC,SAAS,CAAC,OAAyB,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QACpF,YAAY,CAAC,CAAC,CAAC,CAAA;QAEf,OAAO,MAAM,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,OAAO,EAAE,CAAA;KAC1B,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;IAC/C,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAA,CAAI,CAAA;AAC5D,CAAC;AAIY,MAAA,iBAAiB,GAC5B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,EAAE,aAAa;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/html-components/leaflet-flow-map/index.tsx"],"sourcesContent":["import React, { ForwardedRef, Ref, useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { LeafletFlowMap, LeafletFlowMapConfigInterface } from '@unovis/ts'\nimport { arePropsEqual } from '../../utils/react'\n\nexport type VisLeafletFlowMapProps<\n PointDatum extends Record<string, unknown>,\n FlowDatum extends Record<string, unknown>,\n> = LeafletFlowMapConfigInterface<PointDatum, FlowDatum> & {\n data?: { points: PointDatum[]; flows: FlowDatum[] };\n ref?: Ref<VisLeafletFlowMapRef<PointDatum, FlowDatum>>;\n className?: string;\n}\n\nexport type VisLeafletFlowMapRef<\n PointDatum extends Record<string, unknown>,\n FlowDatum extends Record<string, unknown>,\n> = {\n component: LeafletFlowMap<PointDatum, FlowDatum> | undefined;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function VisLeafletFlowMapFC<\n PointDatum extends Record<string, unknown>,\n FlowDatum extends Record<string, unknown>,\n> (\n props: VisLeafletFlowMapProps<PointDatum, FlowDatum>,\n ref: ForwardedRef<VisLeafletFlowMapRef<PointDatum, FlowDatum>>\n): JSX.Element {\n const container = useRef<HTMLDivElement>(null)\n const [component, setComponent] = useState<LeafletFlowMap<PointDatum, FlowDatum>>()\n\n // On Mount\n useEffect(() => {\n const c = new LeafletFlowMap(container.current as HTMLDivElement, props, props.data)\n setComponent(c)\n\n return () => c?.destroy()\n }, [])\n\n // On Props Update\n useEffect(() => {\n if (props.data) component?.setData(props.data)\n\n component?.setConfig(props)\n })\n\n useImperativeHandle(ref, () => ({ component }))\n return <div ref={container} className={props.className} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n// and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLeafletFlowMap: (<\n PointDatum extends Record<string, unknown>,\n FlowDatum extends Record<string, unknown>,\n>(props: VisLeafletFlowMapProps<PointDatum, FlowDatum>) => JSX.Element | null) =\n React.memo(React.forwardRef(VisLeafletFlowMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAqBgB,SAAA,mBAAmB,CAIjC,KAAoD,EACpD,GAA8D,EAAA;AAE9D,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAyC,CAAA;IAGnF,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,CAAC,GAAG,IAAI,cAAc,CAAC,SAAS,CAAC,OAAyB,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QACpF,YAAY,CAAC,CAAC,CAAC,CAAA;QAEf,OAAO,MAAM,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,OAAO,EAAE,CAAA;KAC1B,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;IAC/C,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAA,CAAI,CAAA;AAC5D,CAAC;AAIY,MAAA,iBAAiB,GAI5B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,EAAE,aAAa;;;;"}
@@ -1,12 +1,12 @@
1
1
  import { ForwardedRef, Ref } from 'react';
2
2
  import { LeafletMap, LeafletMapConfigInterface } from '@unovis/ts';
3
- export declare type VisLeafletMapProps<Datum> = LeafletMapConfigInterface<Datum> & {
3
+ export declare type VisLeafletMapProps<Datum extends Record<string, unknown>> = LeafletMapConfigInterface<Datum> & {
4
4
  data?: Datum[];
5
5
  ref?: Ref<VisLeafletMapRef<Datum>>;
6
6
  className?: string;
7
7
  };
8
- export declare type VisLeafletMapRef<Datum> = {
8
+ export declare type VisLeafletMapRef<Datum extends Record<string, unknown>> = {
9
9
  component: LeafletMap<Datum> | undefined;
10
10
  };
11
- export declare function VisLeafletMapFC<Datum>(props: VisLeafletMapProps<Datum>, ref: ForwardedRef<VisLeafletMapRef<Datum>>): JSX.Element;
12
- export declare const VisLeafletMap: (<Datum>(props: VisLeafletMapProps<Datum>) => JSX.Element | null);
11
+ export declare function VisLeafletMapFC<Datum extends Record<string, unknown>>(props: VisLeafletMapProps<Datum>, ref: ForwardedRef<VisLeafletMapRef<Datum>>): JSX.Element;
12
+ export declare const VisLeafletMap: (<Datum extends Record<string, unknown>>(props: VisLeafletMapProps<Datum>) => JSX.Element | null);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/html-components/leaflet-map/index.tsx"],"sourcesContent":["import React, { ForwardedRef, Ref, useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { LeafletMap, LeafletMapConfigInterface } from '@unovis/ts'\nimport { arePropsEqual } from '../../utils/react'\n\nexport type VisLeafletMapProps<Datum> = LeafletMapConfigInterface<Datum> & {\n data?: Datum[];\n ref?: Ref<VisLeafletMapRef<Datum>>;\n className?: string;\n}\n\nexport type VisLeafletMapRef<Datum> = {\n component: LeafletMap<Datum> | undefined;\n}\n\nexport function VisLeafletMapFC<Datum> (props: VisLeafletMapProps<Datum>, ref: ForwardedRef<VisLeafletMapRef<Datum>>): JSX.Element {\n const container = useRef<HTMLDivElement>(null)\n const [component, setComponent] = useState<LeafletMap<Datum>>()\n\n // On Mount\n useEffect(() => {\n const c = new LeafletMap(container.current as HTMLDivElement, props, props.data)\n setComponent(c)\n\n return () => c?.destroy()\n }, [])\n\n // On Props Update\n useEffect(() => {\n if (props.data) component?.setData(props.data)\n\n component?.setConfig(props)\n })\n\n useImperativeHandle(ref, () => ({ component }))\n return <div ref={container} className={props.className} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n// and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLeafletMap: (<Datum>(props: VisLeafletMapProps<Datum>) => JSX.Element | null) =\n React.memo(React.forwardRef(VisLeafletMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAcgB,SAAA,eAAe,CAAS,KAAgC,EAAE,GAA0C,EAAA;AAClH,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAqB,CAAA;IAG/D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,CAAC,GAAG,IAAI,UAAU,CAAC,SAAS,CAAC,OAAyB,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QAChF,YAAY,CAAC,CAAC,CAAC,CAAA;QAEf,OAAO,MAAM,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,OAAO,EAAE,CAAA;KAC1B,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;IAC/C,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAA,CAAI,CAAA;AAC5D,CAAC;AAIY,MAAA,aAAa,GACxB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/html-components/leaflet-map/index.tsx"],"sourcesContent":["import React, { ForwardedRef, Ref, useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { LeafletMap, LeafletMapConfigInterface } from '@unovis/ts'\nimport { arePropsEqual } from '../../utils/react'\n\nexport type VisLeafletMapProps<Datum extends Record<string, unknown>> = LeafletMapConfigInterface<Datum> & {\n data?: Datum[];\n ref?: Ref<VisLeafletMapRef<Datum>>;\n className?: string;\n}\n\nexport type VisLeafletMapRef<Datum extends Record<string, unknown>> = {\n component: LeafletMap<Datum> | undefined;\n}\n\nexport function VisLeafletMapFC<Datum extends Record<string, unknown>> (props: VisLeafletMapProps<Datum>, ref: ForwardedRef<VisLeafletMapRef<Datum>>): JSX.Element {\n const container = useRef<HTMLDivElement>(null)\n const [component, setComponent] = useState<LeafletMap<Datum>>()\n\n // On Mount\n useEffect(() => {\n const c = new LeafletMap(container.current as HTMLDivElement, props, props.data)\n setComponent(c)\n\n return () => c?.destroy()\n }, [])\n\n // On Props Update\n useEffect(() => {\n if (props.data) component?.setData(props.data)\n\n component?.setConfig(props)\n })\n\n useImperativeHandle(ref, () => ({ component }))\n return <div ref={container} className={props.className} />\n}\n\n// We export a memoized component to avoid unnecessary re-renders\n// and define its type explicitly to help react-docgen-typescript to extract information about props\nexport const VisLeafletMap: (<Datum extends Record<string, unknown>>(props: VisLeafletMapProps<Datum>) => JSX.Element | null) =\n React.memo(React.forwardRef(VisLeafletMapFC), arePropsEqual)\n"],"names":[],"mappings":";;;;AAcgB,SAAA,eAAe,CAAyC,KAAgC,EAAE,GAA0C,EAAA;AAClJ,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAqB,CAAA;IAG/D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,CAAC,GAAG,IAAI,UAAU,CAAC,SAAS,CAAC,OAAyB,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;QAChF,YAAY,CAAC,CAAC,CAAC,CAAA;QAEf,OAAO,MAAM,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,OAAO,EAAE,CAAA;KAC1B,EAAE,EAAE,CAAC,CAAA;IAGN,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,IAAI;YAAE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE9C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAC,CAAA;AAEF,IAAA,mBAAmB,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;IAC/C,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAA,CAAI,CAAA;AAC5D,CAAC;AAIY,MAAA,aAAa,GACxB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,aAAa;;;;"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@unovis/react",
3
3
  "description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
4
- "version": "1.0.0-beta.9",
4
+ "version": "1.0.1-beta.6",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/f5/unovis.git",
@@ -36,9 +36,9 @@
36
36
  },
37
37
  "peerDependencies": {
38
38
  "@emotion/css": "^11.7.1",
39
- "@unovis/ts": "1.0.0-beta.9",
40
- "react": ">=16.8.0",
41
- "react-dom": ">=16.8.0"
39
+ "@unovis/ts": "1.0.1-beta.6",
40
+ "react": ">=16.8.0 || ^17 || ^18",
41
+ "react-dom": ">=16.8.0 || ^17 || ^18"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@emotion/css": "^11.7.1",