Skip to content

Commit d5f93ec

Browse files
James-BaloyiJames-Baloyi
authored
Merge pull request #3097 from HackGenesis/derik/en/numberInput
Derik/en/number input
2 parents 6826f14 + 3ef40ed commit d5f93ec

File tree

6 files changed

+128
-51
lines changed

6 files changed

+128
-51
lines changed

‎shesha-reactjs/src/designer-components/dropdown/settingsForm.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ export const getSettings = (data: IDropdownComponentProps) => {
181181
inputType: 'referenceListAutocomplete',
182182
settingsValidationErrors: [],
183183
})
184-
.addQueryBuilder({
184+
.addSettingsInput({
185185
id: 'Scip2BCqWk6HniFIGHwtA',
186186
parentId: '6eBJvoll3xtLJxdvOAlnB',
187187
propertyName: 'filter',
@@ -191,6 +191,7 @@ export const getSettings = (data: IDropdownComponentProps) => {
191191
settingsValidationErrors: [],
192192
modelType: 'Shesha.Framework.ReferenceListItem',
193193
version: 2,
194+
inputType: 'queryBuilder',
194195
})
195196
.addSettingsInput({
196197
id: 'Scip2BCqWk6HniFIGHHqA',
@@ -208,7 +209,7 @@ export const getSettings = (data: IDropdownComponentProps) => {
208209
},
209210
{
210211
value: 'listItem',
211-
label: 'Reference List item',
212+
label: 'Reference list item',
212213
},
213214
{
214215
value: 'custom',
@@ -378,8 +379,8 @@ export const getSettings = (data: IDropdownComponentProps) => {
378379
propertyName: 'queryParams',
379380
parentId: 'Xp6zDosEy-IrSeDfHHwh-',
380381
label: 'Values',
381-
labelTitle: 'Param',
382-
labelName: 'param',
382+
labelTitle: 'Label',
383+
labelName: 'label',
383384
valueTitle: 'Value',
384385
valueName: 'value',
385386
ignorePrefixesOnNewItems: true,

‎shesha-reactjs/src/designer-components/numberField/control.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import { getStyle, pickStyleFromModel, useAvailableConstantsData } from '@/provi
66
import { INumberFieldComponentProps } from './interfaces';
77
import { IconType, ShaIcon, ValidationErrors } from '@/components';
88
import { getBackgroundStyle } from '../_settings/utils/background/utils';
9-
import { getSizeStyle } from '../_settings/utils/dimensions/utils';
109
import { useStyles } from './styles';
1110
import { getBorderStyle } from '../_settings/utils/border/utils';
1211
import { getFontStyle } from '../_settings/utils/font/utils';
1312
import { getShadowStyle } from '../_settings/utils/shadow/utils';
1413
import { removeUndefinedProps } from '@/utils/object';
14+
import { dimensionStyles, MAX_SAFE_INTEGER } from './utils';
1515

1616
interface IProps {
1717
disabled: boolean;
@@ -38,7 +38,6 @@ const NumberFieldControl: FC<IProps> = ({ disabled, model, onChange, value, onBl
3838
const jsStyle = getStyle(model?.style, model);
3939
const allData = useAvailableConstantsData();
4040

41-
const dimensionsStyles = useMemo(() => getSizeStyle(dimensions), [dimensions]);
4241
const borderStyles = useMemo(() => getBorderStyle(border, jsStyle), [border]);
4342
const fontStyles = useMemo(() => getFontStyle(font), [font]);
4443
const [backgroundStyles, setBackgroundStyles] = useState({});
@@ -74,21 +73,20 @@ const NumberFieldControl: FC<IProps> = ({ disabled, model, onChange, value, onBl
7473
return <ValidationErrors error="The provided StoredFileId is invalid" />;
7574
}
7675

77-
const styling = JSON.parse(model.stylingBox || '{}');
76+
const styling = JSON.parse(model?.stylingBox || '{}');
7877
const stylingBoxAsCSS = pickStyleFromModel(styling);
7978

8079
const additionalStyles: CSSProperties = removeUndefinedProps({
8180
...stylingBoxAsCSS,
82-
...dimensionsStyles,
8381
...borderStyles,
8482
...fontStyles,
8583
...backgroundStyles,
8684
...shadowStyles,
8785
});
8886

8987
const finalStyle = removeUndefinedProps({
88+
...dimensionStyles(dimensions, additionalStyles),
9089
...additionalStyles,
91-
fontWeight: model?.font?.weight ? Number(model?.font?.weight.split(' - ')[0]) : 400,
9290
});
9391

9492
const style = model.style;
@@ -97,8 +95,8 @@ const NumberFieldControl: FC<IProps> = ({ disabled, model, onChange, value, onBl
9795
className: 'sha-number-field',
9896
disabled: disabled,
9997
variant: model.hideBorder ? 'borderless' : undefined,
100-
min: model?.min,
101-
max: model?.max,
98+
min: model?.validate?.minValue ?? 0,
99+
max: model?.validate?.maxValue ?? MAX_SAFE_INTEGER,
102100
placeholder: model?.placeholder,
103101
size: model?.size,
104102
style: style ? getStyle(style, allData.data, allData.globalState) : { width: '100%' },
@@ -120,23 +118,24 @@ const NumberFieldControl: FC<IProps> = ({ disabled, model, onChange, value, onBl
120118
),
121119
};
122120

121+
123122
return (
124123
<ConfigProvider
125124
theme={{
126125
components: {
127126
InputNumber: {
128127
fontFamily: model?.font?.type,
129128
fontSize: model?.font?.size || 14,
130-
fontWeightStrong: Number(fontStyles.fontWeight) || 400,
129+
fontWeightStrong: Number(model.font.weight) ?? 400,
131130
colorText: model?.font?.color,
132131
},
133132
},
134133
}}
135134
>
136135
<InputNumber
137-
value={value ?? model.defaultValue}
136+
value={value ?? model?.defaultValue}
138137
{...inputProps}
139-
stringMode={model?.highPrecision}
138+
stringMode={!model?.highPrecision}
140139
style={{ ...finalStyle, ...jsStyle }}
141140
className={`sha-input ${styles.numberField}`}
142141
onBlur={onBlur}

‎shesha-reactjs/src/designer-components/numberField/numberField.tsx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -56,25 +56,6 @@ const NumberFieldComponent: IToolboxComponent<INumberFieldComponentProps> = {
5656
>
5757
{(value, onChange) => {
5858
const customEvents = getEventHandlers(model, allData);
59-
60-
const onChangeInternal = (...args: any[]) => {
61-
// Handle the case where the user clears the input
62-
if (args[0] === null) {
63-
// Fire custom event with `null` or fallback value
64-
customEvents.onChange({ target: { value: null } } as unknown as React.ChangeEvent<HTMLInputElement>);
65-
66-
if (typeof onChange === 'function') onChange(null);
67-
return;
68-
}
69-
70-
// Handle normal case where args[0] is a valid number
71-
customEvents.onChange({
72-
target: { value: args[0] },
73-
} as unknown as React.ChangeEvent<HTMLInputElement>);
74-
75-
if (typeof onChange === 'function') onChange(...args);
76-
};
77-
7859
return model.readOnly ? (
7960
<ReadOnlyDisplayFormItem
8061
type="number"
@@ -85,7 +66,7 @@ const NumberFieldComponent: IToolboxComponent<INumberFieldComponentProps> = {
8566
disabled={model.readOnly}
8667
model={model}
8768
value={value}
88-
onChange={onChangeInternal}
69+
onChange={onChange}
8970
onBlur={customEvents.onBlur}
9071
onFocus={customEvents.onFocus}
9172
/>

‎shesha-reactjs/src/designer-components/numberField/settingsForm.ts‎

Lines changed: 71 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,62 @@ export const getSettings = (data: INumberFieldComponentProps) => {
151151
],
152152
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
153153
})
154+
.addSettingsInput({
155+
id: 'f6f4a345-a529-4720-a90b-d84532e556fb',
156+
inputType: 'switch',
157+
propertyName: 'highPrecision',
158+
label: 'High Precision',
159+
tooltip: 'To support high precision decimals support',
160+
version: 2,
161+
defaultValue: false,
162+
})
163+
164+
.addSettingsInputRow({
165+
id: 'type-default-value-s4gmBg31azZC0UjZjpfTm',
166+
parentId: 's4gmBg31azZC0UjZjpfTm',
167+
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
168+
hidden: {
169+
_code: 'return getSettingValue(data?.highPrecision)',
170+
_mode: 'code',
171+
_value: false,
172+
},
173+
inputs: [
174+
{
175+
id: '874aa450-6274-48d4-8032-395fdd680fa5',
176+
type: 'numberField',
177+
propertyName: 'stepNumeric',
178+
parentId: 'jNmEKg7HtYXwaL9CylTOX',
179+
label: 'Step',
180+
defaultValue: 1,
181+
validate: {},
182+
settingsValidationErrors: [],
183+
},
184+
],
185+
})
186+
187+
.addSettingsInputRow({
188+
id: 'type-default-value-s4gmBg31azZC0UjZjpfTm',
189+
parentId: 's4gmBg31azZC0UjZjpfTm',
190+
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
191+
hidden: {
192+
_code: 'return !getSettingValue(data?.highPrecision)',
193+
_mode: 'code',
194+
_value: false,
195+
} as any,
196+
inputs: [
197+
{
198+
id: '874aa450-6274-48d4-8032-395fdd680fa5',
199+
type: 'textField',
200+
propertyName: 'stepString',
201+
parentId: 'jNmEKg7HtYXwaL9CylTOX',
202+
label: 'Step',
203+
defaultValue: 0.1,
204+
validate: {},
205+
settingsValidationErrors: [],
206+
},
207+
],
208+
})
209+
154210
.toJson(),
155211
],
156212
},
@@ -160,24 +216,34 @@ export const getSettings = (data: INumberFieldComponentProps) => {
160216
id: '6eBJvoll3xtLJxdvOAlnB',
161217
components: [
162218
...new DesignerToolbarSettings()
163-
219+
.addSettingsInput({
220+
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
221+
id: '3be9da3f-f47e-48ae-b4c3-f5cc36e534d9',
222+
propertyName: 'validate.required',
223+
label: 'Required',
224+
inputType: 'switch',
225+
size: 'small',
226+
layout: 'horizontal',
227+
jsSetting: true,
228+
parentId: '6eBJvoll3xtLJxdvOAlnB',
229+
})
164230
.addSettingsInputRow({
165231
id: 'qOkkwAnHvKJ0vYXeXMLsd',
166232
parentId: '6eBJvoll3xtLJxdvOAlnB',
167233
inputs: [
168234
{
169235
type: 'numberField',
170236
id: 'minLength-s4gmBg31azZC0UjZjpfTm',
171-
propertyName: 'validate.minLength',
172-
label: 'Min Length',
237+
propertyName: 'validate.minValue',
238+
label: 'Min Value',
173239
size: 'small',
174240
jsSetting: true,
175241
},
176242
{
177243
type: 'numberField',
178244
id: 'maxLength-s4gmBg31azZC0UjZjpfTm',
179-
propertyName: 'validate.maxLength',
180-
label: 'Max Length',
245+
propertyName: 'validate.maxValue',
246+
label: 'Max Value',
181247
size: 'small',
182248
jsSetting: true,
183249
},

‎shesha-reactjs/src/designer-components/numberField/styles.ts‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import { createStyles } from '@/styles';
22

33
export const useStyles = createStyles(({ css, cx }, { fontWeight, fontFamily, textAlign }) => {
4-
5-
const numberField = cx("sha-inputNumber", css`
6-
.ant-input {
7-
font-weight: ${fontWeight};
8-
font-family: ${fontFamily};
9-
text-align: ${textAlign};
10-
}
11-
`);
12-
return {
13-
numberField,
14-
};
15-
});
4+
const numberField = cx(
5+
'sha-ant-input-number-input',
6+
css`
7+
.ant-input-number-input {
8+
font-weight: ${fontWeight} !important;
9+
font-family: ${fontFamily};
10+
text-align: ${textAlign};
11+
}
12+
`
13+
);
14+
return {
15+
numberField,
16+
};
17+
});

‎shesha-reactjs/src/designer-components/numberField/utils.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { IStyleType } from '@/index';
2+
import { addPx } from '../_settings/utils';
3+
import { IDimensionsValue } from '../_settings/utils/dimensions/interfaces';
24

35
export const defaultStyles = (): IStyleType => {
46
return {
@@ -31,3 +33,29 @@ export const defaultStyles = (): IStyleType => {
3133
},
3234
};
3335
};
36+
37+
export const dimensionStyles = (dimensions: IDimensionsValue, additionalStyles: React.CSSProperties) => {
38+
return {
39+
width: dimensions?.width
40+
? `calc(${addPx(dimensions.width)} - ${additionalStyles?.marginLeft || '0px'} - ${additionalStyles?.marginRight || '0px'})`
41+
: undefined,
42+
height: dimensions?.height
43+
? `calc(${addPx(dimensions.height)} - ${additionalStyles?.marginTop || '0px'} - ${additionalStyles?.marginBottom || '0px'})`
44+
: undefined,
45+
46+
minWidth: dimensions?.minWidth
47+
? `calc(${addPx(dimensions.minWidth)} - ${additionalStyles?.marginLeft || '0px'} - ${additionalStyles?.marginRight || '0px'})`
48+
: undefined,
49+
minHeight: dimensions?.minHeight
50+
? `calc(${addPx(dimensions.minHeight)} - ${additionalStyles?.marginTop || '0px'} - ${additionalStyles?.marginBottom || '0px'})`
51+
: undefined,
52+
maxWidth: dimensions?.maxWidth
53+
? `calc(${addPx(dimensions.maxWidth)} - ${additionalStyles?.marginLeft || '0px'} - ${additionalStyles?.marginRight || '0px'})`
54+
: undefined,
55+
maxHeight: dimensions?.maxHeight
56+
? `calc(${addPx(dimensions.maxHeight)} - ${additionalStyles?.marginTop || '0px'} - ${additionalStyles?.marginBottom || '0px'})`
57+
: undefined,
58+
};
59+
};
60+
61+
export const MAX_SAFE_INTEGER = 9007199254740991;

0 commit comments

Comments
 (0)