@artsy/palette-charts 36.1.0 → 36.2.0-canary.1341.29631.0
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/elements/BarChart/BarChart.js +19 -7
- package/dist/elements/BarChart/BarChart.js.map +1 -1
- package/dist/elements/DataVis/useIntersectionObserver.d.ts +16 -0
- package/dist/elements/DataVis/useIntersectionObserver.js +67 -0
- package/dist/elements/DataVis/useIntersectionObserver.js.map +1 -0
- package/package.json +3 -3
- package/dist/elements/DataVis/utils/useHasEnteredViewPort.d.ts +0 -5
- package/dist/elements/DataVis/utils/useHasEnteredViewPort.js +0 -40
- package/dist/elements/DataVis/utils/useHasEnteredViewPort.js.map +0 -1
|
@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
12
12
|
var _ChartTooltip = require("../DataVis/ChartTooltip");
|
|
13
13
|
var _MousePositionContext = require("../DataVis/MousePositionContext");
|
|
14
|
-
var
|
|
14
|
+
var _useIntersectionObserver = require("../DataVis/useIntersectionObserver");
|
|
15
15
|
var _Bar = require("./Bar");
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -68,14 +68,26 @@ var BarChart = function BarChart(_ref) {
|
|
|
68
68
|
var bars = _ref.bars,
|
|
69
69
|
minLabel = _ref.minLabel,
|
|
70
70
|
maxLabel = _ref.maxLabel;
|
|
71
|
-
var wrapperRef = (0, _react.useRef)(null);
|
|
72
71
|
var highlightLabelRef = (0, _react.useRef)(null);
|
|
73
|
-
|
|
74
|
-
var hasEnteredViewport = (0, _useHasEnteredViewPort.useHasEnteredViewport)(wrapperRef);
|
|
75
|
-
var _useState = (0, _react.useState)(0),
|
|
72
|
+
var _useState = (0, _react.useState)(false),
|
|
76
73
|
_useState2 = _slicedToArray(_useState, 2),
|
|
77
|
-
|
|
78
|
-
|
|
74
|
+
hasEnteredViewport = _useState2[0],
|
|
75
|
+
setHasEnteredViewport = _useState2[1];
|
|
76
|
+
var _useIntersectionObser = (0, _useIntersectionObserver.useIntersectionObserver)({
|
|
77
|
+
once: true,
|
|
78
|
+
options: {
|
|
79
|
+
threshold: 0.2
|
|
80
|
+
},
|
|
81
|
+
onIntersection: function onIntersection() {
|
|
82
|
+
setHasEnteredViewport(true);
|
|
83
|
+
}
|
|
84
|
+
}),
|
|
85
|
+
wrapperRef = _useIntersectionObser.ref;
|
|
86
|
+
useHighlightLabelPositionConstraints(wrapperRef.current, highlightLabelRef.current);
|
|
87
|
+
var _useState3 = (0, _react.useState)(0),
|
|
88
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
89
|
+
minHeight = _useState4[0],
|
|
90
|
+
setMinHeight = _useState4[1];
|
|
79
91
|
var maxValue = Math.max.apply(Math, _toConsumableArray(bars.map(function (_ref2) {
|
|
80
92
|
var value = _ref2.value;
|
|
81
93
|
return value;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.js","names":["_palette","require","_themeGet","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_ChartTooltip","_MousePositionContext","_useHasEnteredViewPort","_Bar","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","i","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","length","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","ChartContainer","styled","Flex","withConfig","displayName","componentId","themeGet","useHighlightLabelPositionConstraints","wrapperDiv","labelDiv","useEffect","style","left","right","offsetWidth","wrapperRect","getBoundingClientRect","labelRect","labelLeftOffset","labelRightOffset","BarChart","_ref","bars","minLabel","maxLabel","wrapperRef","useRef","highlightLabelRef","current","hasEnteredViewport","useHasEnteredViewport","_useState","useState","_useState2","minHeight","setMinHeight","maxValue","Math","max","apply","map","_ref2","allZero","every","item","createElement","ProvideMousePosition","flexDirection","ref","flexGrow","id","height","alignItems","mb","_ref3","index","label","axisLabelX","highlightLabel","onClick","onHover","heightPercent","Bar","coerceTooltip","onMeasureHeight","justifyContent","Text","color","variant","filter","bar","_ref4","BarAxisLabelContainer","AxisLabelX","exports","div"],"sources":["../../../src/elements/BarChart/BarChart.tsx"],"sourcesContent":["import { Flex, Text } from \"@artsy/palette\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChartTooltipProps, coerceTooltip } from \"../DataVis/ChartTooltip\"\nimport { ProvideMousePosition } from \"../DataVis/MousePositionContext\"\nimport { useHasEnteredViewport } from \"../DataVis/utils/useHasEnteredViewPort\"\nimport { Bar } from \"./Bar\"\n\nconst ChartContainer = styled(Flex)`\n border-bottom: 1px solid ${themeGet(\"colors.black10\")};\n`\n\nfunction useHighlightLabelPositionConstraints(\n wrapperDiv: HTMLDivElement | null,\n labelDiv: HTMLDivElement | null\n) {\n // Constrain highlight label to be within the bounds of the graph\n useEffect(() => {\n if (!wrapperDiv || !labelDiv) {\n return\n }\n // reset highlight label position\n labelDiv.style.left = null\n labelDiv.style.right = null\n // force layout to find centered position\n labelDiv.offsetWidth\n\n const wrapperRect = wrapperDiv.getBoundingClientRect()\n const labelRect = labelDiv.getBoundingClientRect()\n\n // check for overlap with BarChart left bound\n const labelLeftOffset = wrapperRect.left - labelRect.left\n if (labelLeftOffset > 0) {\n // label is too far to the left, compensate\n labelDiv.style.left = labelLeftOffset + \"px\"\n return\n }\n // check for overlap with BarChart right bound\n const labelRightOffset = labelRect.right - wrapperRect.right\n if (labelRightOffset > 0) {\n // label is too far to the right, compensate\n labelDiv.style.right = labelRightOffset + \"px\"\n }\n })\n}\n\nexport interface BarDescriptor {\n value: number\n label?: React.ReactNode | ChartTooltipProps\n axisLabelX?: React.ReactNode\n highlightLabel?: React.ReactNode | ChartTooltipProps\n onClick?: any\n onHover?: any\n}\n\nexport interface BarChartProps {\n bars: BarDescriptor[]\n minLabel: React.ReactNode\n maxLabel: React.ReactNode\n}\n/**\n * BarChart is a component which displays some bars of varying heights in a row.\n * Useful for histograms etc.\n * @param props props\n */\nexport const BarChart = ({ bars, minLabel, maxLabel }: BarChartProps) => {\n const wrapperRef = useRef<HTMLDivElement>(null)\n const highlightLabelRef = useRef<HTMLDivElement>(null)\n\n useHighlightLabelPositionConstraints(\n wrapperRef.current,\n highlightLabelRef.current\n )\n\n const hasEnteredViewport = useHasEnteredViewport(wrapperRef)\n const [minHeight, setMinHeight] = useState(0)\n const maxValue = Math.max(...bars.map(({ value }) => value))\n const allZero = bars.every((item) => item.value === 0)\n return (\n <ProvideMousePosition>\n <Flex\n flexDirection=\"column\"\n ref={wrapperRef as any}\n flexGrow={1}\n id=\"flex-wrapper\"\n >\n <ChartContainer\n height=\"80px\"\n alignItems=\"flex-end\"\n mb={0.5}\n style={{ minHeight }}\n >\n {bars.map(\n (\n { value, label, axisLabelX, highlightLabel, onClick, onHover },\n index\n ) => {\n const heightPercent =\n maxValue === 0 ? 100 : (100 / maxValue) * value\n return (\n <Bar\n key={index}\n heightPercent={allZero ? 0 : heightPercent}\n label={coerceTooltip(label)}\n axisLabelX={axisLabelX}\n highlightLabelRef={highlightLabelRef}\n highlightLabel={coerceTooltip(highlightLabel)}\n hasEnteredViewport={hasEnteredViewport}\n onMeasureHeight={highlightLabel ? setMinHeight : null}\n onClick={onClick}\n onHover={onHover}\n />\n )\n }\n )}\n </ChartContainer>\n\n <Flex justifyContent=\"space-between\">\n <Text color=\"black60\" variant=\"xs\">\n {minLabel}\n </Text>\n\n <Text color=\"black60\" variant=\"xs\">\n {maxLabel}\n </Text>\n </Flex>\n\n {bars.filter((bar) => bar.axisLabelX).length > 0 && (\n <Flex>\n {bars.map(({ axisLabelX }, i) => (\n <BarAxisLabelContainer key={i}>\n <AxisLabelX color=\"black60\" variant=\"xs\">\n {axisLabelX}\n </AxisLabelX>\n </BarAxisLabelContainer>\n ))}\n </Flex>\n )}\n </Flex>\n </ProvideMousePosition>\n )\n}\n\nconst BarAxisLabelContainer = styled.div`\n flex: 1;\n min-height: ${themeGet(\"space.2\")};\n position: relative;\n`\n\nconst AxisLabelX = styled(Text)`\n position: absolute;\n text-align: center;\n white-space: nowrap;\n left: 50%;\n transform: translateX(-50%);\n`\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BarChart.js","names":["_palette","require","_themeGet","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_ChartTooltip","_MousePositionContext","_useIntersectionObserver","_Bar","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","i","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","length","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","ChartContainer","styled","Flex","withConfig","displayName","componentId","themeGet","useHighlightLabelPositionConstraints","wrapperDiv","labelDiv","useEffect","style","left","right","offsetWidth","wrapperRect","getBoundingClientRect","labelRect","labelLeftOffset","labelRightOffset","BarChart","_ref","bars","minLabel","maxLabel","highlightLabelRef","useRef","_useState","useState","_useState2","hasEnteredViewport","setHasEnteredViewport","_useIntersectionObser","useIntersectionObserver","once","options","threshold","onIntersection","wrapperRef","ref","current","_useState3","_useState4","minHeight","setMinHeight","maxValue","Math","max","apply","map","_ref2","allZero","every","item","createElement","ProvideMousePosition","flexDirection","flexGrow","id","height","alignItems","mb","_ref3","index","label","axisLabelX","highlightLabel","onClick","onHover","heightPercent","Bar","coerceTooltip","onMeasureHeight","justifyContent","Text","color","variant","filter","bar","_ref4","BarAxisLabelContainer","AxisLabelX","exports","div"],"sources":["../../../src/elements/BarChart/BarChart.tsx"],"sourcesContent":["import { Flex, Text } from \"@artsy/palette\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { ChartTooltipProps, coerceTooltip } from \"../DataVis/ChartTooltip\"\nimport { ProvideMousePosition } from \"../DataVis/MousePositionContext\"\nimport { useIntersectionObserver } from \"../DataVis/useIntersectionObserver\"\nimport { Bar } from \"./Bar\"\n\nconst ChartContainer = styled(Flex)`\n border-bottom: 1px solid ${themeGet(\"colors.black10\")};\n`\n\nfunction useHighlightLabelPositionConstraints(\n wrapperDiv: HTMLDivElement | null,\n labelDiv: HTMLDivElement | null\n) {\n // Constrain highlight label to be within the bounds of the graph\n useEffect(() => {\n if (!wrapperDiv || !labelDiv) {\n return\n }\n // reset highlight label position\n labelDiv.style.left = null\n labelDiv.style.right = null\n // force layout to find centered position\n labelDiv.offsetWidth\n\n const wrapperRect = wrapperDiv.getBoundingClientRect()\n const labelRect = labelDiv.getBoundingClientRect()\n\n // check for overlap with BarChart left bound\n const labelLeftOffset = wrapperRect.left - labelRect.left\n if (labelLeftOffset > 0) {\n // label is too far to the left, compensate\n labelDiv.style.left = labelLeftOffset + \"px\"\n return\n }\n // check for overlap with BarChart right bound\n const labelRightOffset = labelRect.right - wrapperRect.right\n if (labelRightOffset > 0) {\n // label is too far to the right, compensate\n labelDiv.style.right = labelRightOffset + \"px\"\n }\n })\n}\n\nexport interface BarDescriptor {\n value: number\n label?: React.ReactNode | ChartTooltipProps\n axisLabelX?: React.ReactNode\n highlightLabel?: React.ReactNode | ChartTooltipProps\n onClick?: any\n onHover?: any\n}\n\nexport interface BarChartProps {\n bars: BarDescriptor[]\n minLabel: React.ReactNode\n maxLabel: React.ReactNode\n}\n/**\n * BarChart is a component which displays some bars of varying heights in a row.\n * Useful for histograms etc.\n * @param props props\n */\nexport const BarChart = ({ bars, minLabel, maxLabel }: BarChartProps) => {\n const highlightLabelRef = useRef<HTMLDivElement>(null)\n const [hasEnteredViewport, setHasEnteredViewport] = useState(false)\n\n const { ref: wrapperRef } = useIntersectionObserver({\n once: true,\n options: { threshold: 0.2 },\n onIntersection: () => {\n setHasEnteredViewport(true)\n },\n })\n\n useHighlightLabelPositionConstraints(\n wrapperRef.current as HTMLDivElement,\n highlightLabelRef.current\n )\n\n const [minHeight, setMinHeight] = useState(0)\n const maxValue = Math.max(...bars.map(({ value }) => value))\n const allZero = bars.every((item) => item.value === 0)\n return (\n <ProvideMousePosition>\n <Flex\n flexDirection=\"column\"\n ref={wrapperRef as any}\n flexGrow={1}\n id=\"flex-wrapper\"\n >\n <ChartContainer\n height=\"80px\"\n alignItems=\"flex-end\"\n mb={0.5}\n style={{ minHeight }}\n >\n {bars.map(\n (\n { value, label, axisLabelX, highlightLabel, onClick, onHover },\n index\n ) => {\n const heightPercent =\n maxValue === 0 ? 100 : (100 / maxValue) * value\n return (\n <Bar\n key={index}\n heightPercent={allZero ? 0 : heightPercent}\n label={coerceTooltip(label)}\n axisLabelX={axisLabelX}\n highlightLabelRef={highlightLabelRef}\n highlightLabel={coerceTooltip(highlightLabel)}\n hasEnteredViewport={hasEnteredViewport}\n onMeasureHeight={highlightLabel ? setMinHeight : null}\n onClick={onClick}\n onHover={onHover}\n />\n )\n }\n )}\n </ChartContainer>\n\n <Flex justifyContent=\"space-between\">\n <Text color=\"black60\" variant=\"xs\">\n {minLabel}\n </Text>\n\n <Text color=\"black60\" variant=\"xs\">\n {maxLabel}\n </Text>\n </Flex>\n\n {bars.filter((bar) => bar.axisLabelX).length > 0 && (\n <Flex>\n {bars.map(({ axisLabelX }, i) => (\n <BarAxisLabelContainer key={i}>\n <AxisLabelX color=\"black60\" variant=\"xs\">\n {axisLabelX}\n </AxisLabelX>\n </BarAxisLabelContainer>\n ))}\n </Flex>\n )}\n </Flex>\n </ProvideMousePosition>\n )\n}\n\nconst BarAxisLabelContainer = styled.div`\n flex: 1;\n min-height: ${themeGet(\"space.2\")};\n position: relative;\n`\n\nconst AxisLabelX = styled(Text)`\n position: absolute;\n text-align: center;\n white-space: nowrap;\n left: 50%;\n transform: translateX(-50%);\n`\n"],"mappings":";;;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,aAAA,GAAAN,OAAA;AACA,IAAAO,qBAAA,GAAAP,OAAA;AACA,IAAAQ,wBAAA,GAAAR,OAAA;AACA,IAAAS,IAAA,GAAAT,OAAA;AAA2B,SAAAK,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAX,wBAAAO,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAQ,OAAA,CAAAR,GAAA,yBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAS,KAAA,GAAAN,wBAAA,CAAAC,WAAA,OAAAK,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAV,GAAA,YAAAS,KAAA,CAAAE,GAAA,CAAAX,GAAA,SAAAY,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAjB,GAAA,QAAAiB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAApB,GAAA,EAAAiB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAhB,GAAA,EAAAiB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAjB,GAAA,CAAAiB,GAAA,SAAAL,MAAA,CAAAV,OAAA,GAAAF,GAAA,MAAAS,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAtB,GAAA,EAAAY,MAAA,YAAAA,MAAA;AAAA,SAAAW,mBAAAC,GAAA,WAAAC,kBAAA,CAAAD,GAAA,KAAAE,gBAAA,CAAAF,GAAA,KAAAG,2BAAA,CAAAH,GAAA,KAAAI,kBAAA;AAAA,SAAAA,mBAAA,cAAAC,SAAA;AAAA,SAAAH,iBAAAI,IAAA,eAAAC,MAAA,oBAAAD,IAAA,CAAAC,MAAA,CAAAC,QAAA,aAAAF,IAAA,+BAAAG,KAAA,CAAAC,IAAA,CAAAJ,IAAA;AAAA,SAAAL,mBAAAD,GAAA,QAAAS,KAAA,CAAAE,OAAA,CAAAX,GAAA,UAAAY,iBAAA,CAAAZ,GAAA;AAAA,SAAAa,eAAAb,GAAA,EAAAc,CAAA,WAAAC,eAAA,CAAAf,GAAA,KAAAgB,qBAAA,CAAAhB,GAAA,EAAAc,CAAA,KAAAX,2BAAA,CAAAH,GAAA,EAAAc,CAAA,KAAAG,gBAAA;AAAA,SAAAA,iBAAA,cAAAZ,SAAA;AAAA,SAAAF,4BAAAe,CAAA,EAAAC,MAAA,SAAAD,CAAA,qBAAAA,CAAA,sBAAAN,iBAAA,CAAAM,CAAA,EAAAC,MAAA,OAAAC,CAAA,GAAA9B,MAAA,CAAAI,SAAA,CAAA2B,QAAA,CAAAzB,IAAA,CAAAsB,CAAA,EAAAI,KAAA,aAAAF,CAAA,iBAAAF,CAAA,CAAAK,WAAA,EAAAH,CAAA,GAAAF,CAAA,CAAAK,WAAA,CAAAC,IAAA,MAAAJ,CAAA,cAAAA,CAAA,mBAAAX,KAAA,CAAAC,IAAA,CAAAQ,CAAA,OAAAE,CAAA,+DAAAK,IAAA,CAAAL,CAAA,UAAAR,iBAAA,CAAAM,CAAA,EAAAC,MAAA;AAAA,SAAAP,kBAAAZ,GAAA,EAAA0B,GAAA,QAAAA,GAAA,YAAAA,GAAA,GAAA1B,GAAA,CAAA2B,MAAA,EAAAD,GAAA,GAAA1B,GAAA,CAAA2B,MAAA,WAAAb,CAAA,MAAAc,IAAA,OAAAnB,KAAA,CAAAiB,GAAA,GAAAZ,CAAA,GAAAY,GAAA,EAAAZ,CAAA,MAAAc,IAAA,CAAAd,CAAA,IAAAd,GAAA,CAAAc,CAAA,YAAAc,IAAA;AAAA,SAAAZ,sBAAAhB,GAAA,EAAAc,CAAA,QAAAe,EAAA,WAAA7B,GAAA,gCAAAO,MAAA,IAAAP,GAAA,CAAAO,MAAA,CAAAC,QAAA,KAAAR,GAAA,4BAAA6B,EAAA,QAAAC,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,IAAA,OAAAC,EAAA,OAAAC,EAAA,iBAAAJ,EAAA,IAAAH,EAAA,GAAAA,EAAA,CAAAjC,IAAA,CAAAI,GAAA,GAAAqC,IAAA,QAAAvB,CAAA,QAAAxB,MAAA,CAAAuC,EAAA,MAAAA,EAAA,UAAAM,EAAA,uBAAAA,EAAA,IAAAL,EAAA,GAAAE,EAAA,CAAApC,IAAA,CAAAiC,EAAA,GAAAS,IAAA,MAAAJ,IAAA,CAAAK,IAAA,CAAAT,EAAA,CAAAU,KAAA,GAAAN,IAAA,CAAAP,MAAA,KAAAb,CAAA,GAAAqB,EAAA,sBAAAM,GAAA,IAAAL,EAAA,OAAAL,EAAA,GAAAU,GAAA,yBAAAN,EAAA,YAAAN,EAAA,CAAAa,MAAA,KAAAT,EAAA,GAAAJ,EAAA,CAAAa,MAAA,IAAApD,MAAA,CAAA2C,EAAA,MAAAA,EAAA,2BAAAG,EAAA,QAAAL,EAAA,aAAAG,IAAA;AAAA,SAAAnB,gBAAAf,GAAA,QAAAS,KAAA,CAAAE,OAAA,CAAAX,GAAA,UAAAA,GAAA;AAE3B,IAAM2C,cAAc,GAAG,IAAAC,yBAAM,EAACC,aAAI,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sCACN,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,CACtD;AAED,SAASC,oCAAoCA,CAC3CC,UAAiC,EACjCC,QAA+B,EAC/B;EACA;EACA,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAI,CAACF,UAAU,IAAI,CAACC,QAAQ,EAAE;MAC5B;IACF;IACA;IACAA,QAAQ,CAACE,KAAK,CAACC,IAAI,GAAG,IAAI;IAC1BH,QAAQ,CAACE,KAAK,CAACE,KAAK,GAAG,IAAI;IAC3B;IACAJ,QAAQ,CAACK,WAAW;IAEpB,IAAMC,WAAW,GAAGP,UAAU,CAACQ,qBAAqB,EAAE;IACtD,IAAMC,SAAS,GAAGR,QAAQ,CAACO,qBAAqB,EAAE;;IAElD;IACA,IAAME,eAAe,GAAGH,WAAW,CAACH,IAAI,GAAGK,SAAS,CAACL,IAAI;IACzD,IAAIM,eAAe,GAAG,CAAC,EAAE;MACvB;MACAT,QAAQ,CAACE,KAAK,CAACC,IAAI,GAAGM,eAAe,GAAG,IAAI;MAC5C;IACF;IACA;IACA,IAAMC,gBAAgB,GAAGF,SAAS,CAACJ,KAAK,GAAGE,WAAW,CAACF,KAAK;IAC5D,IAAIM,gBAAgB,GAAG,CAAC,EAAE;MACxB;MACAV,QAAQ,CAACE,KAAK,CAACE,KAAK,GAAGM,gBAAgB,GAAG,IAAI;IAChD;EACF,CAAC,CAAC;AACJ;AAgBA;AACA;AACA;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAAoD;EAAA,IAA9CC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;EACjD,IAAMC,iBAAiB,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EACtD,IAAAC,SAAA,GAAoD,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,GAAA3D,cAAA,CAAAyD,SAAA;IAA5DG,kBAAkB,GAAAD,UAAA;IAAEE,qBAAqB,GAAAF,UAAA;EAEhD,IAAAG,qBAAA,GAA4B,IAAAC,gDAAuB,EAAC;MAClDC,IAAI,EAAE,IAAI;MACVC,OAAO,EAAE;QAAEC,SAAS,EAAE;MAAI,CAAC;MAC3BC,cAAc,EAAE,SAAAA,eAAA,EAAM;QACpBN,qBAAqB,CAAC,IAAI,CAAC;MAC7B;IACF,CAAC,CAAC;IANWO,UAAU,GAAAN,qBAAA,CAAfO,GAAG;EAQXhC,oCAAoC,CAClC+B,UAAU,CAACE,OAAO,EAClBf,iBAAiB,CAACe,OAAO,CAC1B;EAED,IAAAC,UAAA,GAAkC,IAAAb,eAAQ,EAAC,CAAC,CAAC;IAAAc,UAAA,GAAAxE,cAAA,CAAAuE,UAAA;IAAtCE,SAAS,GAAAD,UAAA;IAAEE,YAAY,GAAAF,UAAA;EAC9B,IAAMG,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAAAC,KAAA,CAARF,IAAI,EAAA1F,kBAAA,CAAQkE,IAAI,CAAC2B,GAAG,CAAC,UAAAC,KAAA;IAAA,IAAGrD,KAAK,GAAAqD,KAAA,CAALrD,KAAK;IAAA,OAAOA,KAAK;EAAA,EAAC,EAAC;EAC5D,IAAMsD,OAAO,GAAG7B,IAAI,CAAC8B,KAAK,CAAC,UAACC,IAAI;IAAA,OAAKA,IAAI,CAACxD,KAAK,KAAK,CAAC;EAAA,EAAC;EACtD,oBACExE,MAAA,CAAAU,OAAA,CAAAuH,aAAA,CAAC5H,qBAAA,CAAA6H,oBAAoB,qBACnBlI,MAAA,CAAAU,OAAA,CAAAuH,aAAA,CAACpI,QAAA,CAAAgF,IAAI;IACHsD,aAAa,EAAC,QAAQ;IACtBjB,GAAG,EAAED,UAAkB;IACvBmB,QAAQ,EAAE,CAAE;IACZC,EAAE,EAAC;EAAc,gBAEjBrI,MAAA,CAAAU,OAAA,CAAAuH,aAAA,CAACtD,cAAc;IACb2D,MAAM,EAAC,MAAM;IACbC,UAAU,EAAC,UAAU;IACrBC,EAAE,EAAE,GAAI;IACRlD,KAAK,EAAE;MAAEgC,SAAS,EAATA;IAAU;EAAE,GAEpBrB,IAAI,CAAC2B,GAAG,CACP,UAAAa,KAAA,EAEEC,KAAK,EACF;IAAA,IAFDlE,KAAK,GAAAiE,KAAA,CAALjE,KAAK;MAAEmE,KAAK,GAAAF,KAAA,CAALE,KAAK;MAAEC,UAAU,GAAAH,KAAA,CAAVG,UAAU;MAAEC,cAAc,GAAAJ,KAAA,CAAdI,cAAc;MAAEC,OAAO,GAAAL,KAAA,CAAPK,OAAO;MAAEC,OAAO,GAAAN,KAAA,CAAPM,OAAO;IAG5D,IAAMC,aAAa,GACjBxB,QAAQ,KAAK,CAAC,GAAG,GAAG,GAAI,GAAG,GAAGA,QAAQ,GAAIhD,KAAK;IACjD,oBACExE,MAAA,CAAAU,OAAA,CAAAuH,aAAA,CAAC1H,IAAA,CAAA0I,GAAG;MACFxH,GAAG,EAAEiH,KAAM;MACXM,aAAa,EAAElB,OAAO,GAAG,CAAC,GAAGkB,aAAc;MAC3CL,KAAK,EAAE,IAAAO,2BAAa,EAACP,KAAK,CAAE;MAC5BC,UAAU,EAAEA,UAAW;MACvBxC,iBAAiB,EAAEA,iBAAkB;MACrCyC,cAAc,EAAE,IAAAK,2BAAa,EAACL,cAAc,CAAE;MAC9CpC,kBAAkB,EAAEA,kBAAmB;MACvC0C,eAAe,EAAEN,cAAc,GAAGtB,YAAY,GAAG,IAAK;MACtDuB,OAAO,EAAEA,OAAQ;MACjBC,OAAO,EAAEA;IAAQ,EACjB;EAEN,CAAC,CACF,CACc,eAEjB/I,MAAA,CAAAU,OAAA,CAAAuH,aAAA,CAACpI,QAAA,CAAAgF,IAAI;IAACuE,cAAc,EAAC;EAAe,gBAClCpJ,MAAA,CAAAU,OAAA,CAAAuH,aAAA,CAACpI,QAAA,CAAAwJ,IAAI;IAACC,KAAK,EAAC,SAAS;IAACC,OAAO,EAAC;EAAI,GAC/BrD,QAAQ,CACJ,eAEPlG,MAAA,CAAAU,OAAA,CAAAuH,aAAA,CAACpI,QAAA,CAAAwJ,IAAI;IAACC,KAAK,EAAC,SAAS;IAACC,OAAO,EAAC;EAAI,GAC/BpD,QAAQ,CACJ,CACF,EAENF,IAAI,CAACuD,MAAM,CAAC,UAACC,GAAG;IAAA,OAAKA,GAAG,CAACb,UAAU;EAAA,EAAC,CAACjF,MAAM,GAAG,CAAC,iBAC9C3D,MAAA,CAAAU,OAAA,CAAAuH,aAAA,CAACpI,QAAA,CAAAgF,IAAI,QACFoB,IAAI,CAAC2B,GAAG,CAAC,UAAA8B,KAAA,EAAiB5G,CAAC;IAAA,IAAf8F,UAAU,GAAAc,KAAA,CAAVd,UAAU;IAAA,oBACrB5I,MAAA,CAAAU,OAAA,CAAAuH,aAAA,CAAC0B,qBAAqB;MAAClI,GAAG,EAAEqB;IAAE,gBAC5B9C,MAAA,CAAAU,OAAA,CAAAuH,aAAA,CAAC2B,UAAU;MAACN,KAAK,EAAC,SAAS;MAACC,OAAO,EAAC;IAAI,GACrCX,UAAU,CACA,CACS;EAAA,CACzB,CAAC,CAEL,CACI,CACc;AAE3B,CAAC;AAAAiB,OAAA,CAAA9D,QAAA,GAAAA,QAAA;AAnFYA,QAAQ,CAAAhB,WAAA;AAqFrB,IAAM4E,qBAAqB,GAAG/E,yBAAM,CAACkF,GAAG,CAAAhF,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kDAExB,IAAAC,kBAAQ,EAAC,SAAS,CAAC,CAElC;AAED,IAAM2E,UAAU,GAAG,IAAAhF,yBAAM,EAACyE,aAAI,CAAC,CAAAvE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mGAM9B"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { RefObject } from "react";
|
|
2
|
+
interface UseIntersectionObserverProperties {
|
|
3
|
+
ref?: RefObject<Element> | null;
|
|
4
|
+
once?: boolean;
|
|
5
|
+
options?: {
|
|
6
|
+
threshold: number | number[];
|
|
7
|
+
root?: Element;
|
|
8
|
+
rootMargin?: string;
|
|
9
|
+
};
|
|
10
|
+
onIntersection?: (entries: IntersectionObserverEntry[]) => void;
|
|
11
|
+
onOffIntersection?: (entries: IntersectionObserverEntry[]) => void;
|
|
12
|
+
}
|
|
13
|
+
export declare const useIntersectionObserver: ({ once, options, onIntersection, onOffIntersection, }: UseIntersectionObserverProperties) => {
|
|
14
|
+
ref: import("react").MutableRefObject<HTMLElement>;
|
|
15
|
+
};
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useIntersectionObserver = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
9
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
11
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
12
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
+
// tslint:disable-next-line:completed-docs
|
|
15
|
+
var useIntersectionObserver = function useIntersectionObserver(_ref) {
|
|
16
|
+
var _ref$once = _ref.once,
|
|
17
|
+
once = _ref$once === void 0 ? true : _ref$once,
|
|
18
|
+
_ref$options = _ref.options,
|
|
19
|
+
options = _ref$options === void 0 ? {
|
|
20
|
+
threshold: 0
|
|
21
|
+
} : _ref$options,
|
|
22
|
+
onIntersection = _ref.onIntersection,
|
|
23
|
+
onOffIntersection = _ref.onOffIntersection;
|
|
24
|
+
var ref = (0, _react.useRef)(null);
|
|
25
|
+
var handleIntersect = function handleIntersect(entries) {
|
|
26
|
+
if (!observer) return;
|
|
27
|
+
if (once) {
|
|
28
|
+
var hasIntersected = entries.some(
|
|
29
|
+
// tslint:disable-next-line:no-shadowed-variable
|
|
30
|
+
function (_ref2) {
|
|
31
|
+
var isIntersecting = _ref2.isIntersecting;
|
|
32
|
+
return isIntersecting;
|
|
33
|
+
});
|
|
34
|
+
if (hasIntersected) {
|
|
35
|
+
onIntersection === null || onIntersection === void 0 ? void 0 : onIntersection(entries);
|
|
36
|
+
observer.disconnect();
|
|
37
|
+
} else {
|
|
38
|
+
onOffIntersection === null || onOffIntersection === void 0 ? void 0 : onOffIntersection(entries);
|
|
39
|
+
}
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
var isIntersecting = entries[entries.length - 1].isIntersecting;
|
|
43
|
+
if (!isIntersecting) {
|
|
44
|
+
onOffIntersection === null || onOffIntersection === void 0 ? void 0 : onOffIntersection(entries);
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
onIntersection === null || onIntersection === void 0 ? void 0 : onIntersection(entries);
|
|
48
|
+
};
|
|
49
|
+
var _useState = (0, _react.useState)(function () {
|
|
50
|
+
return isClientSide ? new IntersectionObserver(handleIntersect, options) : undefined;
|
|
51
|
+
}),
|
|
52
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
53
|
+
observer = _useState2[0];
|
|
54
|
+
(0, _react.useEffect)(function () {
|
|
55
|
+
if (!ref.current || !observer) return;
|
|
56
|
+
observer.observe(ref.current);
|
|
57
|
+
return function () {
|
|
58
|
+
observer.disconnect();
|
|
59
|
+
};
|
|
60
|
+
}, [ref, observer]);
|
|
61
|
+
return {
|
|
62
|
+
ref: ref
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
exports.useIntersectionObserver = useIntersectionObserver;
|
|
66
|
+
var isClientSide = typeof window !== "undefined";
|
|
67
|
+
//# sourceMappingURL=useIntersectionObserver.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIntersectionObserver.js","names":["_react","require","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","useIntersectionObserver","_ref","_ref$once","once","_ref$options","options","threshold","onIntersection","onOffIntersection","ref","useRef","handleIntersect","entries","observer","hasIntersected","some","_ref2","isIntersecting","disconnect","_useState","useState","isClientSide","IntersectionObserver","undefined","_useState2","useEffect","current","observe","exports","window"],"sources":["../../../src/elements/DataVis/useIntersectionObserver.ts"],"sourcesContent":["import { RefObject, useEffect, useRef, useState } from \"react\"\n\ninterface UseIntersectionObserverProperties {\n ref?: RefObject<Element> | null\n once?: boolean\n options?: {\n threshold: number | number[]\n root?: Element\n rootMargin?: string\n }\n onIntersection?: (entries: IntersectionObserverEntry[]) => void\n onOffIntersection?: (entries: IntersectionObserverEntry[]) => void\n}\n\n// tslint:disable-next-line:completed-docs\nexport const useIntersectionObserver = ({\n once = true,\n options = { threshold: 0 },\n onIntersection,\n onOffIntersection,\n}: UseIntersectionObserverProperties) => {\n const ref = useRef<HTMLElement | null>(null)\n\n const handleIntersect = (entries: IntersectionObserverEntry[]) => {\n if (!observer) return\n\n if (once) {\n const hasIntersected = entries.some(\n // tslint:disable-next-line:no-shadowed-variable\n ({ isIntersecting }) => isIntersecting\n )\n\n if (hasIntersected) {\n onIntersection?.(entries)\n observer.disconnect()\n } else {\n onOffIntersection?.(entries)\n }\n\n return\n }\n\n const isIntersecting = entries[entries.length - 1].isIntersecting\n\n if (!isIntersecting) {\n onOffIntersection?.(entries)\n return\n }\n\n onIntersection?.(entries)\n }\n\n const [observer] = useState(() =>\n isClientSide\n ? new IntersectionObserver(handleIntersect, options)\n : undefined\n )\n\n useEffect(() => {\n if (!ref.current || !observer) return\n\n observer.observe(ref.current)\n\n return () => {\n observer.disconnect()\n }\n }, [ref, observer])\n\n return { ref }\n}\n\nconst isClientSide = typeof window !== \"undefined\"\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette-charts",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "36.
|
|
4
|
+
"version": "36.2.0-canary.1341.29631.0",
|
|
5
5
|
"description": "Design system library for react components",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"publishConfig": {
|
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
"typescript-styled-plugin": "0.10.0"
|
|
116
116
|
},
|
|
117
117
|
"dependencies": {
|
|
118
|
-
"@artsy/palette": "
|
|
118
|
+
"@artsy/palette": "37.2.0-canary.1341.29631.0",
|
|
119
119
|
"@seznam/compose-react-refs": "^1.0.6",
|
|
120
120
|
"@styled-system/theme-get": "^5.1.2",
|
|
121
121
|
"d3-interpolate": "^1.3.2",
|
|
@@ -174,5 +174,5 @@
|
|
|
174
174
|
"url": "http://localhost"
|
|
175
175
|
}
|
|
176
176
|
},
|
|
177
|
-
"gitHead": "
|
|
177
|
+
"gitHead": "0b1b1738813955c440a7c3fe19af42afc9d63568"
|
|
178
178
|
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useHasEnteredViewport = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
9
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
11
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
12
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
13
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
-
/**
|
|
15
|
-
* Returns true when component enters viewport
|
|
16
|
-
* @param ref reference to component
|
|
17
|
-
*/
|
|
18
|
-
var useHasEnteredViewport = function useHasEnteredViewport(ref) {
|
|
19
|
-
var _useState = (0, _react.useState)(false),
|
|
20
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
21
|
-
hasEntered = _useState2[0],
|
|
22
|
-
setHasEntered = _useState2[1];
|
|
23
|
-
(0, _react.useEffect)(function () {
|
|
24
|
-
var handleScroll = function handleScroll() {
|
|
25
|
-
var rect = ref.current.getBoundingClientRect();
|
|
26
|
-
if (rect.top <= window.innerHeight - rect.height) {
|
|
27
|
-
setHasEntered(true);
|
|
28
|
-
window.removeEventListener("scroll", handleScroll);
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
window.addEventListener("scroll", handleScroll);
|
|
32
|
-
window.dispatchEvent(new Event("scroll"));
|
|
33
|
-
return function () {
|
|
34
|
-
window.removeEventListener("scroll", handleScroll);
|
|
35
|
-
};
|
|
36
|
-
}, []);
|
|
37
|
-
return hasEntered;
|
|
38
|
-
};
|
|
39
|
-
exports.useHasEnteredViewport = useHasEnteredViewport;
|
|
40
|
-
//# sourceMappingURL=useHasEnteredViewPort.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useHasEnteredViewPort.js","names":["_react","require","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","useHasEnteredViewport","ref","_useState","useState","_useState2","hasEntered","setHasEntered","useEffect","handleScroll","rect","current","getBoundingClientRect","top","window","innerHeight","height","removeEventListener","addEventListener","dispatchEvent","Event","exports"],"sources":["../../../../src/elements/DataVis/utils/useHasEnteredViewPort.ts"],"sourcesContent":["import { useEffect, useState } from \"react\"\n\n/**\n * Returns true when component enters viewport\n * @param ref reference to component\n */\nexport const useHasEnteredViewport = (ref: React.RefObject<HTMLElement>) => {\n const [hasEntered, setHasEntered] = useState(false)\n useEffect(() => {\n const handleScroll = () => {\n const rect = ref.current.getBoundingClientRect()\n if (rect.top <= window.innerHeight - rect.height) {\n setHasEntered(true)\n window.removeEventListener(\"scroll\", handleScroll)\n }\n }\n window.addEventListener(\"scroll\", handleScroll)\n window.dispatchEvent(new Event(\"scroll\"))\n return () => {\n window.removeEventListener(\"scroll\", handleScroll)\n }\n }, [])\n return hasEntered\n}\n"],"mappings":"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"}
|