recharts
Advanced tools
Comparing version 2.3.0 to 2.3.1
@@ -13,3 +13,3 @@ import _debounce from "lodash/debounce"; | ||
import classNames from 'classnames'; | ||
import React, { forwardRef, cloneElement, useState, useImperativeHandle, useRef, useEffect, useCallback, useMemo } from 'react'; | ||
import React, { forwardRef, cloneElement, useState, useImperativeHandle, useRef, useEffect } from 'react'; | ||
import ReactResizeDetector from 'react-resize-detector'; | ||
@@ -43,3 +43,7 @@ import { isPercent } from '../util/DataUtils'; | ||
}, [containerRef]); | ||
var getContainerSize = useCallback(function () { | ||
var _useState3 = useState(false), | ||
_useState4 = _slicedToArray(_useState3, 2), | ||
mounted = _useState4[0], | ||
setMounted = _useState4[1]; | ||
var getContainerSize = function getContainerSize() { | ||
if (!containerRef.current) { | ||
@@ -52,25 +56,23 @@ return null; | ||
}; | ||
}, []); | ||
var updateDimensionsImmediate = useCallback(function () { | ||
}; | ||
var updateDimensionsImmediate = function updateDimensionsImmediate() { | ||
if (!mounted) { | ||
return; | ||
} | ||
var newSize = getContainerSize(); | ||
if (newSize) { | ||
var oldWidth = sizes.containerWidth, | ||
oldHeight = sizes.containerHeight; | ||
var containerWidth = newSize.containerWidth, | ||
containerHeight = newSize.containerHeight; | ||
setSizes(function (currentSizes) { | ||
var oldWidth = currentSizes.containerWidth, | ||
oldHeight = currentSizes.containerHeight; | ||
if (containerWidth !== oldWidth || containerHeight !== oldHeight) { | ||
return { | ||
containerWidth: containerWidth, | ||
containerHeight: containerHeight | ||
}; | ||
} | ||
return currentSizes; | ||
}); | ||
if (containerWidth !== oldWidth || containerHeight !== oldHeight) { | ||
setSizes({ | ||
containerWidth: containerWidth, | ||
containerHeight: containerHeight | ||
}); | ||
} | ||
} | ||
}, [getContainerSize]); | ||
var handleResize = useMemo(function () { | ||
return debounce > 0 ? _debounce(updateDimensionsImmediate, debounce) : updateDimensionsImmediate; | ||
}, [debounce, updateDimensionsImmediate]); | ||
var computedSizes = useMemo(function () { | ||
}; | ||
var handleResize = debounce > 0 ? _debounce(updateDimensionsImmediate, debounce) : updateDimensionsImmediate; | ||
var renderChart = function renderChart() { | ||
var containerWidth = sizes.containerWidth, | ||
@@ -101,13 +103,18 @@ containerHeight = sizes.containerHeight; | ||
warn(calculatedWidth > 0 || calculatedHeight > 0, "The width(%s) and height(%s) of chart should be greater than 0,\n please check the style of container, or the props width(%s) and height(%s),\n or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the\n height and width.", calculatedWidth, calculatedHeight, width, height, minWidth, minHeight, aspect); | ||
return { | ||
return /*#__PURE__*/cloneElement(children, { | ||
width: calculatedWidth, | ||
height: calculatedHeight | ||
}; | ||
}, [aspect, height, maxHeight, minHeight, minWidth, sizes, width]); | ||
}); | ||
}; | ||
useEffect(function () { | ||
var size = getContainerSize(); | ||
if (size) { | ||
setSizes(size); | ||
if (mounted) { | ||
var size = getContainerSize(); | ||
if (size) { | ||
setSizes(size); | ||
} | ||
} | ||
}, [getContainerSize]); | ||
}, [mounted]); | ||
useEffect(function () { | ||
setMounted(true); | ||
}, []); | ||
var style = { | ||
@@ -131,3 +138,3 @@ width: width, | ||
ref: containerRef | ||
}), /*#__PURE__*/cloneElement(children, computedSizes))); | ||
}), renderChart())); | ||
}); |
@@ -49,3 +49,7 @@ "use strict"; | ||
}, [containerRef]); | ||
var getContainerSize = (0, _react.useCallback)(function () { | ||
var _useState3 = (0, _react.useState)(false), | ||
_useState4 = _slicedToArray(_useState3, 2), | ||
mounted = _useState4[0], | ||
setMounted = _useState4[1]; | ||
var getContainerSize = function getContainerSize() { | ||
if (!containerRef.current) { | ||
@@ -58,25 +62,23 @@ return null; | ||
}; | ||
}, []); | ||
var updateDimensionsImmediate = (0, _react.useCallback)(function () { | ||
}; | ||
var updateDimensionsImmediate = function updateDimensionsImmediate() { | ||
if (!mounted) { | ||
return; | ||
} | ||
var newSize = getContainerSize(); | ||
if (newSize) { | ||
var oldWidth = sizes.containerWidth, | ||
oldHeight = sizes.containerHeight; | ||
var containerWidth = newSize.containerWidth, | ||
containerHeight = newSize.containerHeight; | ||
setSizes(function (currentSizes) { | ||
var oldWidth = currentSizes.containerWidth, | ||
oldHeight = currentSizes.containerHeight; | ||
if (containerWidth !== oldWidth || containerHeight !== oldHeight) { | ||
return { | ||
containerWidth: containerWidth, | ||
containerHeight: containerHeight | ||
}; | ||
} | ||
return currentSizes; | ||
}); | ||
if (containerWidth !== oldWidth || containerHeight !== oldHeight) { | ||
setSizes({ | ||
containerWidth: containerWidth, | ||
containerHeight: containerHeight | ||
}); | ||
} | ||
} | ||
}, [getContainerSize]); | ||
var handleResize = (0, _react.useMemo)(function () { | ||
return debounce > 0 ? (0, _debounce2["default"])(updateDimensionsImmediate, debounce) : updateDimensionsImmediate; | ||
}, [debounce, updateDimensionsImmediate]); | ||
var computedSizes = (0, _react.useMemo)(function () { | ||
}; | ||
var handleResize = debounce > 0 ? (0, _debounce2["default"])(updateDimensionsImmediate, debounce) : updateDimensionsImmediate; | ||
var renderChart = function renderChart() { | ||
var containerWidth = sizes.containerWidth, | ||
@@ -107,13 +109,18 @@ containerHeight = sizes.containerHeight; | ||
(0, _LogUtils.warn)(calculatedWidth > 0 || calculatedHeight > 0, "The width(%s) and height(%s) of chart should be greater than 0,\n please check the style of container, or the props width(%s) and height(%s),\n or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the\n height and width.", calculatedWidth, calculatedHeight, width, height, minWidth, minHeight, aspect); | ||
return { | ||
return /*#__PURE__*/(0, _react.cloneElement)(children, { | ||
width: calculatedWidth, | ||
height: calculatedHeight | ||
}; | ||
}, [aspect, height, maxHeight, minHeight, minWidth, sizes, width]); | ||
}); | ||
}; | ||
(0, _react.useEffect)(function () { | ||
var size = getContainerSize(); | ||
if (size) { | ||
setSizes(size); | ||
if (mounted) { | ||
var size = getContainerSize(); | ||
if (size) { | ||
setSizes(size); | ||
} | ||
} | ||
}, [getContainerSize]); | ||
}, [mounted]); | ||
(0, _react.useEffect)(function () { | ||
setMounted(true); | ||
}, []); | ||
var style = { | ||
@@ -137,4 +144,4 @@ width: width, | ||
ref: containerRef | ||
}), /*#__PURE__*/(0, _react.cloneElement)(children, computedSizes))); | ||
}), renderChart())); | ||
}); | ||
exports.ResponsiveContainer = ResponsiveContainer; |
{ | ||
"name": "recharts", | ||
"version": "2.3.0", | ||
"version": "2.3.1", | ||
"description": "React charts", | ||
@@ -5,0 +5,0 @@ "main": "lib/index", |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
38910
4688311