@deviceinsight/ng-ui-components 7.21.0 → 7.23.0

package/dist/index.js

@@ -394,9 +394,11 @@ var ValidatedTextInput = class extends React.Component {
 //#region src/components/colorpicker/ColorTextInput.tsx
 function ColorTextInput({ value, pattern, onChange, placeholder, style }) {
 	const [text, setText] = useState(value);
-	useEffect(() => {
+	const [lastValue, setLastValue] = useState(value);
+	if (value !== lastValue) {
+		setLastValue(value);
 		setText(value);
-	}, [value]);
+	}
 	function handleChange(value, valid) {
 		setText(value);
 		if (valid) onChange(value);
@@ -527,9 +529,7 @@ function inputToTzDate(value, pattern, timezone) {
 var DateInput = forwardRef(({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, timezone, ...otherProps }, ref) => {
 	const [pattern, setPattern] = useState(dayjs.localeData().longDateFormat("L"));
 	const { t } = useTranslation();
-	const [valid, setValid] = useState(false);
 	const [popupOpen, setPopupOpen] = useState(false);
-	const [inputText, setInputText] = useState("");
 	const debouncedSetPopupActive = useMemo(() => debounce(setPopupOpen, 30), []);
 	useEffect(() => {
 		const language = locale ?? i18n.language;
@@ -547,17 +547,22 @@ var DateInput = forwardRef(({ value, clearable, inline, readOnly, wrapperClassNa
 		t,
 		timezone
 	]);
-	useEffect(() => {
-		if (value == null) setInputText("");
-		else setInputText(formattedDate(value));
-	}, [formattedDate, value]);
-	useEffect(() => {
+	const [valid, setValid] = useState(() => isInputValid(value, pattern));
+	const [inputText, setInputText] = useState(() => value == null ? "" : formattedDate(value));
+	const [lastInput, setLastInput] = useState({
+		value,
+		pattern,
+		timezone
+	});
+	if (!Object.is(value, lastInput.value) || pattern !== lastInput.pattern || timezone !== lastInput.timezone) {
+		setLastInput({
+			value,
+			pattern,
+			timezone
+		});
+		setInputText(value == null ? "" : formattedDate(value));
 		setValid(isInputValid(value, pattern));
-	}, [pattern, value]);
-	useEffect(() => {
-		dayjs.locale(locale ?? i18n.language);
-		setPattern(dayjs.localeData().longDateFormat("L"));
-	}, [locale]);
+	}
 	const handleInputTextChange = (text) => {
 		setInputText(text);
 		if (text) {
@@ -1097,7 +1102,6 @@ var Node = class Node extends Component {
 		super(..._args);
 		this.state = {
 			expanded: false,
-			selectionState: this.getSelectionState(),
 			isLoading: false
 		};
 		this.toggleExpand = () => {
@@ -1123,28 +1127,23 @@ var Node = class Node extends Component {
 	* @param {Props} prevProps
 	* @param {State} prevState
 	*/
-	shouldComponentUpdate(prevProps, prevState) {
-		const { selectedNodes: prevSelectedNodes, treeSize: prevTreeSize } = prevProps;
-		const { expanded: prevExpanded, selectionState: prevSelectionState, isLoading: prevIsLoading } = prevState;
+	shouldComponentUpdate(nextProps, nextState) {
+		const { selectedNodes: nextSelectedNodes, treeSize: nextTreeSize } = nextProps;
+		const { expanded: nextExpanded, isLoading: nextIsLoading } = nextState;
 		const { selectedNodes, node, treeSize } = this.props;
-		const { expanded, selectionState, isLoading } = this.state;
-		if (prevIsLoading !== isLoading) return true;
-		if (prevTreeSize !== treeSize) return true;
-		if (this.isLeaf()) return prevSelectedNodes.includes(node.id) && !selectedNodes.includes(node.id) || !prevSelectedNodes.includes(node.id) && selectedNodes.includes(node.id) || prevSelectionState !== selectionState;
-		else return prevSelectedNodes.length !== selectedNodes.length || prevExpanded !== expanded || prevSelectionState !== selectionState;
-	}
-	componentDidMount() {
-		this.setState({ selectionState: this.getSelectionState() });
-	}
-	componentDidUpdate() {
-		this.setState({ selectionState: this.getSelectionState() });
+		const { expanded, isLoading } = this.state;
+		const selectionStateChanged = this.getSelectionState(this.props) !== this.getSelectionState(nextProps);
+		if (isLoading !== nextIsLoading) return true;
+		if (treeSize !== nextTreeSize) return true;
+		if (this.isLeaf()) return selectedNodes.includes(node.id) && !nextSelectedNodes.includes(node.id) || !selectedNodes.includes(node.id) && nextSelectedNodes.includes(node.id) || selectionStateChanged;
+		else return selectedNodes.length !== nextSelectedNodes.length || expanded !== nextExpanded || selectionStateChanged;
 	}
 	isLeaf() {
 		const { node } = this.props;
 		return node.children === void 0;
 	}
-	getSelectionState() {
-		const { node, selectedNodes } = this.props;
+	getSelectionState(props = this.props) {
+		const { node, selectedNodes } = props;
 		if (this.isLeaf()) return selectedNodes.includes(node.id) ? SelectionState.ALL : SelectionState.NONE;
 		else {
 			const leafIds = getAllLeafIds(node);
@@ -1156,7 +1155,8 @@ var Node = class Node extends Component {
 	}
 	render() {
 		const { node, isLastChild, ...commonNodeProps } = this.props;
-		const { expanded, selectionState, isLoading } = this.state;
+		const { expanded, isLoading } = this.state;
+		const selectionState = this.getSelectionState();
 		return /* @__PURE__ */ jsxs("div", {
 			className: "node",
 			children: [/* @__PURE__ */ jsx(NodeInfo, {
@@ -1187,19 +1187,15 @@ var Node = class Node extends Component {
 var TreeView = class extends Component {
 	constructor(..._args) {
 		super(..._args);
+		this.convert = convertToTree(this.props.dataSetConfig);
+		this.initialTree = this.initTree(this.props.treeData);
 		this.state = {
 			treeData: this.props.treeData,
-			tree: {
-				id: "virtualRootNode",
-				name: "",
-				children: [],
-				path: "/",
-				originalNode: {}
-			},
-			treeSize: 0,
-			selectedNodes: this.props.selectedNodes || []
+			tree: this.initialTree,
+			treeSize: getTreeSize(this.initialTree),
+			selectedNodes: this.props.selectedNodes || [],
+			lastSelectedNodes: this.props.selectedNodes || []
 		};
-		this.convert = convertToTree(this.props.dataSetConfig);
 		this.selectNodes = (nodes) => {
 			const { onSelect } = this.props;
 			const { selectedNodes } = this.state;
@@ -1247,19 +1243,15 @@ var TreeView = class extends Component {
 			});
 		};
 	}
-	componentDidMount() {
-		const { treeData } = this.props;
-		const tree = this.initTree(treeData);
-		const treeSize = getTreeSize(tree);
-		this.setState({
-			tree,
-			treeSize
-		});
-	}
-	componentDidUpdate(prevProps) {
-		const { selectedNodes: prevNodes } = prevProps;
-		const { selectedNodes } = this.props;
-		if (selectedNodes && prevNodes && prevNodes.length !== selectedNodes.length) this.setState({ selectedNodes });
+	static {
+		this.getDerivedStateFromProps = (props, state) => {
+			const { selectedNodes } = props;
+			if (selectedNodes && selectedNodes.length !== state.lastSelectedNodes.length) return {
+				selectedNodes,
+				lastSelectedNodes: selectedNodes
+			};
+			return null;
+		};
 	}
 	initTree(treeData) {
 		return {
@@ -1336,9 +1328,11 @@ function Pagination({ onChangePage, page, totalPages, onChangeSize, size }) {
 	useEffect(() => {
 		changePageDebouncedRef.current = debounce(onChangePage, 500);
 	}, [onChangePage]);
-	useEffect(() => {
+	const [lastPage, setLastPage] = useState(page);
+	if (page !== lastPage) {
+		setLastPage(page);
 		setPageRaw(`${page + 1}`);
-	}, [page]);
+	}
 	function goToFirstPage() {
 		onChangePage(0);
 	}
@@ -1558,8 +1552,10 @@ var SelectWithSearch = class extends Component {
 							value: this.state.inputValue,
 							label: this.state.inputValue
 						};
-						this.setState((prevState) => ({ options: [newItem, ...prevState.options] }));
-						this.state.inputValue = null;
+						this.setState((prevState) => ({
+							options: [newItem, ...prevState.options],
+							inputValue: null
+						}));
 						onChange(newItem);
 					});
 				}
@@ -2083,16 +2079,27 @@ var ReactableWithClientSidePagination = class extends Component {
 		this.state = {
 			paginationSettings: paginationSettings || DEFAULT_PAGINATION_SETTINGS,
 			filterSettings: {},
-			filteredItems: null
+			filteredItems: null,
+			lastSettings: paginationSettings
 		};
 	}
 	componentDidUpdate(prevProps) {
 		const { items } = this.props;
 		const { items: prevItems } = prevProps;
-		const settings = this.props.paginationSettings || this.props.initialPaginationSettings;
-		const prevSettings = prevProps.paginationSettings || prevProps.initialPaginationSettings;
 		if (items && prevItems && items.length !== prevItems.length) this.calculatePageNumber(items, this.state.paginationSettings);
-		if (settings && !isEqual(settings, prevSettings)) this.setState({ paginationSettings: settings }, () => this.handleChangePage(0));
+	}
+	static {
+		this.getDerivedStateFromProps = (props, state) => {
+			const settings = props.paginationSettings || props.initialPaginationSettings;
+			if (settings && !isEqual(settings, state.lastSettings)) return {
+				lastSettings: settings,
+				paginationSettings: {
+					...settings,
+					page: 0
+				}
+			};
+			return null;
+		};
 	}
 	render() {
 		const { uniqueItemKey, isLoading, columnDefs, rowDef, tableName, clickable, selectable, selectedItems, onChangeSize } = this.props;
@@ -2275,20 +2282,17 @@ var ImageUpload = class extends Component {
 	constructor(..._args) {
 		super(..._args);
 		this.state = {
-			dragOverPreview: false,
+			dragOverUrl: void 0,
 			file: null
 		};
 		this.handleDragOver = () => {
-			this.setState({ dragOverPreview: true });
+			this.setState({ dragOverUrl: this.props.imageUrl });
 		};
 	}
-	componentDidUpdate(prevProps) {
-		if (prevProps.imageUrl !== this.props.imageUrl) this.setState({ dragOverPreview: false });
-	}
 	render() {
 		const { accept, imageUrl, imageSize, onSelectFile, onRemoveFile, onDownloadFile, ...otherProps } = this.props;
-		const { dragOverPreview, file } = this.state;
-		if (imageUrl && !dragOverPreview && file) return /* @__PURE__ */ jsx(PreviewImage, {
+		const { dragOverUrl, file } = this.state;
+		if (imageUrl && !(dragOverUrl !== void 0 && dragOverUrl === imageUrl) && file) return /* @__PURE__ */ jsx(PreviewImage, {
 			url: imageUrl,
 			imageSize,
 			onRemoveFile: () => onRemoveFile?.(file),
@@ -2298,7 +2302,10 @@ var ImageUpload = class extends Component {
 		else return /* @__PURE__ */ jsx(FileUpload, {
 			...otherProps,
 			onRemoveFile: (file) => {
-				this.setState({ file: null });
+				this.setState({
+					file: null,
+					dragOverUrl: void 0
+				});
 				onRemoveFile?.(file);
 			},
 			onSelectFile: (file) => {
@@ -2377,9 +2384,17 @@ var formatTime = (timezone, date) => {
 var DateTimeInput = forwardRef(({ timestamp, timezone, warning, readOnly = false, onChange, ...otherProps }, ref) => {
 	const [time, setTime] = useState(formatTime(timezone, timestamp));
 	const timeValue = time == null ? formatTime(timezone, timestamp) : time;
-	useEffect(() => {
+	const [lastInput, setLastInput] = useState({
+		timestamp,
+		timezone
+	});
+	if (timestamp !== lastInput.timestamp || timezone !== lastInput.timezone) {
+		setLastInput({
+			timestamp,
+			timezone
+		});
 		setTime(formatTime(timezone, timestamp));
-	}, [timezone, timestamp]);
+	}
 	function handleChangeDate(date, fromTextField) {
 		const currentDate = dayjs.tz(timestamp, timezone);
 		onChange(dayjs.tz(date, timezone).set("hour", currentDate.hour()).set("minute", currentDate.minute()).set("second", currentDate.second()).set("millisecond", currentDate.millisecond()).valueOf(), fromTextField);
@@ -2498,7 +2513,13 @@ var SelectWithSearchAsync = class extends Component {
 		const { currentItem } = this.state;
 		if (value && (!currentItem || currentItem.value !== value)) {
 			if (!this.reloadItemFromCache()) searchById(value).then(this.addBackendItemToCache);
-		} else if (!value && currentItem) this.setState({ currentItem: null });
+		}
+	}
+	static {
+		this.getDerivedStateFromProps = (props, state) => {
+			if (!props.value && state.currentItem) return { currentItem: null };
+			return null;
+		};
 	}
 	render() {
 		const { clearable, noResultsMessage, disabled, menuPortalTarget } = this.props;
@@ -2784,7 +2805,7 @@ function Menu({ onChange, onShowCustomPeriod, periodName, timezone }) {
 	const [visible, setVisible] = useState(false);
 	const [showDatePicker, setShowDatePicker] = useState(false);
 	const [showMonthPicker, setShowMonthPicker] = useState(false);
-	const [datePickerDate, setDatePickerDate] = useState(Date.now());
+	const [datePickerDate, setDatePickerDate] = useState(() => Date.now());
 	function setPeriod(period) {
 		onChange(period);
 		setVisible(false);
@@ -3210,17 +3231,18 @@ function sortModifications(modifications) {
 //#endregion
 //#region src/components/svg/SvgImage.tsx
 function useGlobalStyleElement() {
-	const styleElementRef = useRef(null);
+	const [styleElement] = useState(() => {
+		const element = document.createElement("style");
+		element.appendChild(document.createTextNode(""));
+		return element;
+	});
 	useEffect(() => {
-		const styleElement = document.createElement("style");
-		styleElement.appendChild(document.createTextNode(""));
 		if (document && document.head) document.head.appendChild(styleElement);
-		styleElementRef.current = styleElement;
 		return () => {
-			if (document && document.head && styleElement) document.head.removeChild(styleElement);
+			if (document && document.head) document.head.removeChild(styleElement);
 		};
-	}, []);
-	return styleElementRef.current;
+	}, [styleElement]);
+	return styleElement;
 }
 function SvgImage({ imageData, modifications, onConflict }) {
 	const svgWrapperRef = useRef(null);
@@ -3309,9 +3331,10 @@ var getClickConfiguration = (onClick) => {
 var Chart = class extends Component {
 	constructor(..._args) {
 		super(..._args);
-		this.state = {};
+		this.state = { titleApplied: false };
 		this.chart = null;
 		this.ro = null;
+		this.titleTimeoutId = void 0;
 		this.handleChart = (chart) => {
 			this.chart = chart;
 			this.ro = new ResizeObserver(() => {
@@ -3321,8 +3344,16 @@ var Chart = class extends Component {
 		};
 	}
 	componentDidMount() {
+		this.titleTimeoutId = setTimeout(() => this.setState({ titleApplied: true }), 0);
+	}
+	/**
+	* Builds the Highcharts configuration from the props. Everything here is derived, so it is
+	* rebuilt while rendering rather than mirrored into state.
+	*/
+	buildOptions() {
 		const { type, title, items, tooltipTitle, valueFormatter, onClick } = this.props;
-		this.setState({
+		const { titleApplied } = this.state;
+		return {
 			...initialOptions,
 			plotOptions: {
 				...initialOptions.plotOptions,
@@ -3339,44 +3370,12 @@ var Chart = class extends Component {
 				...initialOptions.legend,
 				enabled: type === "pie"
 			},
-			yAxis: {
-				...initialOptions.yAxis,
-				enabled: type === "column",
-				title: { text: title || "" }
-			},
-			series: [{
-				type,
-				innerSize: "50%",
-				data: items.map(({ label, value }) => [label, value])
-			}]
-		});
-		setTimeout(() => {
-			this.setState({ title: {
-				...initialOptions.title,
-				text: type === "column" ? "" : title || ""
-			} });
-		}, 0);
-	}
-	componentDidUpdate(prevProps) {
-		const { type, title, items, tooltipTitle, valueFormatter, onClick } = this.props;
-		if (title !== prevProps.title) this.setState({
 			title: {
-				...this.state.title,
-				text: type === "column" ? "" : title || ""
-			},
-			yAxis: {
-				...this.state.yAxis,
-				title: { text: title || "" }
-			}
-		});
-		if (type !== prevProps.type) this.setState({
-			legend: {
-				...this.state.legend,
-				enabled: type === "pie"
+				...initialOptions.title,
+				text: titleApplied && type !== "column" ? title || "" : ""
 			},
-			title: { text: type === "column" ? "" : title || "" },
 			yAxis: {
-				...this.state.yAxis,
+				...initialOptions.yAxis,
 				enabled: type === "column",
 				title: { text: type === "column" ? title || "" : "" }
 			},
@@ -3385,35 +3384,19 @@ var Chart = class extends Component {
 				innerSize: "50%",
 				data: items.map(({ label, value }) => [label, value])
 			}]
-		});
-		if (!isEqual(items, prevProps.items)) this.setState({ series: [{
-			type,
-			innerSize: "50%",
-			data: items.map(({ label, value }) => [label, value])
-		}] });
-		if (tooltipTitle !== prevProps.tooltipTitle || valueFormatter !== prevProps.valueFormatter || onClick !== prevProps.onClick) this.setState({
-			tooltip: {
-				...initialOptions.tooltip,
-				formatter() {
-					const format = valueFormatter || ((value) => value);
-					return createTooltip(tooltipTitle || "", this.point.name, format(this.point.y));
-				}
-			},
-			plotOptions: {
-				...initialOptions.plotOptions,
-				...getClickConfiguration(onClick)
-			}
-		});
+		};
 	}
 	componentWillUnmount() {
+		clearTimeout(this.titleTimeoutId);
 		if (this.ro && this.chart?.renderTo) this.ro.unobserve(this.chart.renderTo);
 		this.chart = null;
 		this.ro = null;
 	}
 	render() {
+		const built = this.buildOptions();
 		return /* @__PURE__ */ jsx(HighchartsReact, {
 			highcharts: Highcharts,
-			options: this.props.updateOptions ? this.props.updateOptions(this.state) : this.state,
+			options: this.props.updateOptions ? this.props.updateOptions(built) : built,
 			containerProps: { className: this.props.className },
 			callback: this.handleChart
 		});