21364586882

Committed 26 Jan 2026 04:05PM UTC coverage: 57.213% (+0.04%) from 57.173%

Build # 21364586882

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #2696 from geostyler/2694-fix

Fix inputValue update logic

Run Details

921 of 1964 branches covered (46.89%)

Branch coverage included in aggregate %.

3 of 4 new or added lines in 1 file covered. (75.0%)

2089 of 3297 relevant lines covered (63.36%)

23.27 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

67.35

/src/Component/ExpressionInput/NumberExpressionInput/NumberExpressionInput.tsx

/* Released under the BSD 2-Clause License
 *
 * Copyright © 2023-present, terrestris GmbH & Co. KG and GeoStyler contributors
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 * * Redistributions of source code must retain the above copyright notice,
 *   this list of conditions and the following disclaimer.
 *
 * * Redistributions in binary form must reproduce the above copyright notice,
 *   this list of conditions and the following disclaimer in the documentation
 *   and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
 * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
 * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 * POSSIBILITY OF SUCH DAMAGE.
 */

import React, { useEffect, useState } from 'react';

import {
  Button,
  Slider,
  InputNumber,
} from 'antd';
import { InputNumberProps } from 'antd/lib/input-number';
import { FunctionUI, FunctionUIProps } from '../../FunctionUI/FunctionUI';
import {
  Expression,
  GeoStylerNumberFunction,
  isGeoStylerFunction
} from 'geostyler-style';
import { FunctionOutlined } from '@ant-design/icons';

import './NumberExpressionInput.css';

type SliderProps = {
  min?: number;
  max?: number;
  step?: number;
};
export interface NumberExpressionInputProps {
  className?: string;
  slider?: boolean;
  sliderProps?: SliderProps;
  functionUiProps?: FunctionUIProps<GeoStylerNumberFunction>;
  inputProps?: Omit<InputNumberProps, 'value' | 'onChange' | 'className'>;
  onCancel?: (type: 'number') => void;
  onChange?: (newValue: Expression<number> | undefined) => void;
  value?: Expression<number>;
}

export const NumberExpressionInput: React.FC<NumberExpressionInputProps> = ({
  slider = false,
  sliderProps = {}, /* more safety */
  onChange,
  onCancel,
  value,
  className,
  inputProps = {},  /* more safety */
  functionUiProps
}) => {
  let finalClassName = 'number-expression-input';
  if (className) {
    finalClassName += ` ${className}`;
  }

  const [inputValue, setInputValue] = useState<number>(() => {
    return isGeoStylerFunction(value) ? undefined : value;
  });

  useEffect(() => {
    if (!isGeoStylerFunction(value)) {
      setInputValue(value);
    }
  }, [value]);

  if (isGeoStylerFunction(value)) {
    return (
      <span className={finalClassName}>
        <FunctionUI<GeoStylerNumberFunction>
          type='number'
          value={value}
          {...functionUiProps}
          onChange={onChange}
          onCancel={() => onCancel?.('number')}
        />
      </span>
    );
  }

  return (
    <span className={finalClassName}>
      {slider ? (
        <div className={'slider-wrapper'}>
          <Slider
            {...sliderProps}
            value={inputValue}
            range={false}
            onChange={(val) => {
              if (val === null) {
                onChange?.(undefined);
              }
              onChange?.(val);
              setInputValue(val === null ? undefined : Number(val));
            }}
          />
          <div className={'number-wrapper'}>
            <InputNumber
              {...sliderProps}
              value={inputValue}
              onChange={(val) => {
                if (val === null) {
                  onChange?.(undefined);
                }
                onChange?.(Number(val));
                setInputValue(val === null ? undefined : Number(val));
              }}
            />
            <Button
              icon={<FunctionOutlined />}
              onClick={() => {
                onChange?.({
                  name: 'property',
                  args: ['']
                });
              }}
            />
          </div>
        </div>
      ) : (
        <>
          <InputNumber
            value={value}
            onChange={(val) => {
              if (val === null) {
                onChange?.(undefined);
              }
              onChange?.(val as number);
            }}
            {...inputProps}
          />
          <Button
            icon={<FunctionOutlined />}
            onClick={() => {
              onChange?.({
                name: 'property',
                args: ['']
              });
            }}
          />
        </>

      )}
    </span>
  );
};

export default NumberExpressionInput;

1	/* Released under the BSD 2-Clause License
2	*
3	* Copyright © 2023-present, terrestris GmbH & Co. KG and GeoStyler contributors
4	* All rights reserved.
5	*
6	* Redistribution and use in source and binary forms, with or without
7	* modification, are permitted provided that the following conditions are met:
8	*
9	* * Redistributions of source code must retain the above copyright notice,
10	* this list of conditions and the following disclaimer.
11	*
12	* * Redistributions in binary form must reproduce the above copyright notice,
13	* this list of conditions and the following disclaimer in the documentation
14	* and/or other materials provided with the distribution.
15	*
16	* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
17	* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
18	* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
19	* ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
20	* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
21	* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
22	* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
23	* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
24	* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
25	* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
26	* POSSIBILITY OF SUCH DAMAGE.
27	*/
28
29	import React, { useEffect, useState } from 'react';
30
31	import {
32	Button,
33	Slider,
34	InputNumber,
35	} from 'antd';
36	import { InputNumberProps } from 'antd/lib/input-number';
37	import { FunctionUI, FunctionUIProps } from '../../FunctionUI/FunctionUI';
38	import {
39	Expression,
40	GeoStylerNumberFunction,
41	isGeoStylerFunction
42	} from 'geostyler-style';
43	import { FunctionOutlined } from '@ant-design/icons';
44
45	import './NumberExpressionInput.css';
46
47	type SliderProps = {
48	min?: number;
49	max?: number;
50	step?: number;
51	};
52	export interface NumberExpressionInputProps {
53	className?: string;
54	slider?: boolean;
55	sliderProps?: SliderProps;
56	functionUiProps?: FunctionUIProps<GeoStylerNumberFunction>;
57	inputProps?: Omit<InputNumberProps, 'value' \| 'onChange' \| 'className'>;
58	onCancel?: (type: 'number') => void;
59	onChange?: (newValue: Expression<number> \| undefined) => void;
60	value?: Expression<number>;
61	}
62
63	export const NumberExpressionInput: React.FC<NumberExpressionInputProps> = ({	42✔
64	slider = false,	288✔
65	sliderProps = {}, /* more safety */	288✔
66	onChange,
67	onCancel,
68	value,
69	className,
70	inputProps = {}, /* more safety */	165✔
71	functionUiProps
72	}) => {
73	let finalClassName = 'number-expression-input';	450✔
74	if (className) {	450✔
75	finalClassName += ` ${className}`;	444✔
76	}
77
78	const [inputValue, setInputValue] = useState<number>(() => {	450✔
79	return isGeoStylerFunction(value) ? undefined : value;	414✔
80	});
81
82	useEffect(() => {	450✔
83	if (!isGeoStylerFunction(value)) {	416✔
84	setInputValue(value);	415✔
85	}
86	}, [value]);
87
88	if (isGeoStylerFunction(value)) {	450✔
89	return (	1✔
90	<span className={finalClassName}>
91	<FunctionUI<GeoStylerNumberFunction>
92	type='number'
93	value={value}
94	{...functionUiProps}
95	onChange={onChange}
96	onCancel={() => onCancel?.('number')}	×
97	/>
98	</span>
99	);
100	}
101
102	return (	449✔
103	<span className={finalClassName}>
104	{slider ? (	449✔
105	<div className={'slider-wrapper'}>
106	<Slider
107	{...sliderProps}
108	value={inputValue}
109	range={false}
110	onChange={(val) => {
111	if (val === null) {	×
112	onChange?.(undefined);	×
113	}
114	onChange?.(val);	×
NEW 115	setInputValue(val === null ? undefined : Number(val));	×
116	}}
117	/>
118	<div className={'number-wrapper'}>
119	<InputNumber
120	{...sliderProps}
121	value={inputValue}
122	onChange={(val) => {
123	if (val === null) {	12!
124	onChange?.(undefined);	×
125	}
126	onChange?.(Number(val));	12✔
127	setInputValue(val === null ? undefined : Number(val));	12!
128	}}
129	/>
130	<Button
131	icon={<FunctionOutlined />}
132	onClick={() => {
133	onChange?.({	×
134	name: 'property',
135	args: ['']
136	});
137	}}
138	/>
139	</div>
140	</div>
141	) : (
142	<>
143	<InputNumber
144	value={value}
145	onChange={(val) => {
146	if (val === null) {	28!
147	onChange?.(undefined);	×
148	}
149	onChange?.(val as number);	28✔
150	}}
151	{...inputProps}
152	/>
153	<Button
154	icon={<FunctionOutlined />}
155	onClick={() => {
156	onChange?.({	×
157	name: 'property',
158	args: ['']
159	});
160	}}
161	/>
162	</>
163
164	)}
165	</span>
166	);
167	};
168
169	export default NumberExpressionInput;

geostyler / geostyler / 21364586882

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous