Skip to content

Commit 3f71caa

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #1683 from iamfaran/feat/LCS-51-tab-index
[FEAT]: Tab Index for Inputs
2 parents f2b7d10 + 41cb384 commit 3f71caa

File tree

20 files changed

+100
-11
lines changed

20 files changed

+100
-11
lines changed

‎client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
import styled, { css } from "styled-components";
2121
import { UICompBuilder } from "../../generators";
2222
import { FormDataPropertyView } from "../formComp/formDataConstants";
23-
import { jsonControl } from "comps/controls/codeControl";
23+
import { jsonControl, NumberControl } from "comps/controls/codeControl";
2424
import { dropdownControl } from "comps/controls/dropdownControl";
2525
import {
2626
getStyle,
@@ -92,6 +92,7 @@ const childrenMap = {
9292
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
9393
childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'),
9494
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
95+
tabIndex: NumberControl,
9596
};
9697

9798
const getValidate = (value: any): "" | "warning" | "error" | undefined => {
@@ -271,6 +272,7 @@ let AutoCompleteCompBase = (function () {
271272
suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
272273
status={getValidate(validateState)}
273274
onPressEnter={undefined}
275+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
274276
/>
275277
</AutoComplete>
276278
</>
@@ -354,6 +356,9 @@ let AutoCompleteCompBase = (function () {
354356
>
355357
{children.animationStyle.getPropertyView()}
356358
</Section>
359+
<Section name={sectionNames.advanced}>
360+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
361+
</Section>
357362
</>
358363
);
359364
})

‎client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"
44
import {
55
BoolCodeControl,
66
CustomRuleControl,
7+
NumberControl,
78
RangeControl,
89
StringControl,
910
} from "../../controls/codeControl";
@@ -99,6 +100,7 @@ const commonChildren = {
99100
childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'),
100101
timeZone: dropdownControl(timeZoneOptions, Intl.DateTimeFormat().resolvedOptions().timeZone),
101102
pickerMode: dropdownControl(PickerModeOptions, 'date'),
103+
tabIndex: NumberControl,
102104
};
103105
type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
104106

@@ -185,6 +187,7 @@ export type DateCompViewProps = Pick<
185187
disabledTime: () => ReturnType<typeof disabledTime>;
186188
suffixIcon: ReactNode;
187189
placeholder?: string | [string, string];
190+
tabIndex?: number;
188191
};
189192

190193
const getFormattedDate = (
@@ -281,6 +284,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
281284
onFocus={() => props.onEvent("focus")}
282285
onBlur={() => props.onEvent("blur")}
283286
suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
287+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
284288
/>
285289
),
286290
showValidationWhenEmpty: props.showValidationWhenEmpty,
@@ -340,6 +344,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
340344
<><Section name={sectionNames.advanced}>
341345
{timeFields(children, isMobile)}
342346
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
347+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
343348
</Section></>
344349
)}
345350
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && !isMobile && commonAdvanceSection(children)}
@@ -475,7 +480,9 @@ let DateRangeTmpCmp = (function () {
475480
}}
476481
onFocus={() => props.onEvent("focus")}
477482
onBlur={() => props.onEvent("blur")}
478-
suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon} />
483+
suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
484+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
485+
/>
479486
);
480487

481488
const startResult = validate({ ...props, value: props.start });
@@ -553,6 +560,7 @@ let DateRangeTmpCmp = (function () {
553560
<><Section name={sectionNames.advanced}>
554561
{timeFields(children, isMobile)}
555562
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
563+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
556564
</Section></>
557565
)}
558566
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && commonAdvanceSection(children)}

‎client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ export interface DateRangeUIViewProps extends DateCompViewProps {
4444
placeholder?: string | [string, string];
4545
onChange: (start?: dayjs.Dayjs | null, end?: dayjs.Dayjs | null) => void;
4646
onPanelChange: (value: any, mode: [string, string]) => void;
47-
onClickDateRangeTimeZone:(value:any)=>void
47+
onClickDateRangeTimeZone:(value:any)=>void;
48+
tabIndex?: number;
4849
}
4950

5051
export const DateRangeUIView = (props: DateRangeUIViewProps) => {

‎client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export interface DataUIViewProps extends DateCompViewProps {
3939
onChange: DatePickerProps<Dayjs>['onChange'];
4040
onPanelChange: () => void;
4141
onClickDateTimeZone:(value:any)=>void;
42-
42+
tabIndex?: number;
4343
}
4444

4545
const DateMobileUIView = React.lazy(() =>

‎client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"
44
import {
55
BoolCodeControl,
66
CustomRuleControl,
7+
NumberControl,
78
RangeControl,
89
StringControl,
910
} from "../../controls/codeControl";
@@ -92,6 +93,7 @@ const commonChildren = {
9293
suffixIcon: withDefault(IconControl, "/icon:regular/clock"),
9394
timeZone: dropdownControl(timeZoneOptions, Intl.DateTimeFormat().resolvedOptions().timeZone),
9495
viewRef: RefControl<CommonPickerMethods>,
96+
tabIndex: NumberControl,
9597
...validationChildren,
9698
};
9799

@@ -212,6 +214,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
212214
onFocus={() => props.onEvent("focus")}
213215
onBlur={() => props.onEvent("blur")}
214216
suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
217+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
215218
/>
216219
),
217220
showValidationWhenEmpty: props.showValidationWhenEmpty,
@@ -263,6 +266,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
263266
{commonAdvanceSection(children)}
264267
{children.use12Hours.propertyView({ label: trans("prop.use12Hours") })}
265268
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
269+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
266270
</Section>
267271
)}
268272

@@ -368,6 +372,7 @@ const TimeRangeTmpCmp = (function () {
368372
onFocus={() => props.onEvent("focus")}
369373
onBlur={() => props.onEvent("blur")}
370374
suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
375+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
371376
/>
372377
);
373378

@@ -439,6 +444,7 @@ const TimeRangeTmpCmp = (function () {
439444
{commonAdvanceSection(children)}
440445
{children.use12Hours.propertyView({ label: trans("prop.use12Hours") })}
441446
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
447+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
442448
</Section>
443449
)}
444450

‎client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export interface TimeRangeUIViewProps extends TimeCompViewProps {
3939
placeholder?: string | [string, string];
4040
onChange: (start?: dayjs.Dayjs | null, end?: dayjs.Dayjs | null) => void;
4141
handleTimeRangeZoneChange: (value:any) => void;
42+
tabIndex?: number;
4243
}
4344

4445
export const TimeRangeUIView = (props: TimeRangeUIViewProps) => {

‎client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export interface TimeUIViewProps extends TimeCompViewProps {
3434
value: dayjs.Dayjs | null;
3535
onChange: (value: dayjs.Dayjs | null) => void;
3636
handleTimeZoneChange: (value:any) => void;
37+
tabIndex?: number;
3738
}
3839

3940
export const TimeUIView = (props: TimeUIViewProps) => {

‎client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,7 @@ const childrenMap = {
272272
min: UndefinedNumberControl,
273273
max: UndefinedNumberControl,
274274
customRule: CustomRuleControl,
275+
tabIndex: NumberControl,
275276

276277
...formDataChildren,
277278
};
@@ -330,6 +331,7 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
330331
precision={props.precision}
331332
$style={props.inputFieldStyle}
332333
prefix={hasIcon(props.prefixIcon) ? props.prefixIcon : props.prefixText.value}
334+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
333335
onPressEnter={() => {
334336
handleFinish();
335337
props.onEvent("submit");
@@ -436,6 +438,7 @@ let NumberInputTmpComp = (function () {
436438
})}
437439
{children.controls.propertyView({ label: trans("numberInput.controls") })}
438440
{readOnlyPropertyView(children)}
441+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
439442
</Section>
440443
)}
441444

‎client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generat
66
import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants";
77
import { hasIcon } from "comps/utils";
88
import { BoolControl } from "comps/controls/boolControl";
9+
import { NumberControl } from "comps/controls/codeControl";
910

1011
const RangeSliderBasicComp = (function () {
1112
const childrenMap = {
1213
...SliderChildren,
1314
start: numberExposingStateControl("start", 10),
1415
end: numberExposingStateControl("end", 60),
1516
vertical: BoolControl,
17+
tabIndex: NumberControl,
1618
};
1719
return new UICompBuilder(childrenMap, (props, dispatch) => {
1820
return props.label({
@@ -36,6 +38,7 @@ const RangeSliderBasicComp = (function () {
3638
$style={props.inputFieldStyle}
3739
style={{ margin: 0 }}
3840
$vertical={Boolean(props.vertical) || false}
41+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
3942
onChange={([start, end]) => {
4043
props.start.onChange(start);
4144
props.end.onChange(end);
@@ -60,6 +63,7 @@ const RangeSliderBasicComp = (function () {
6063
tooltip: trans("rangeSlider.stepTooltip"),
6164
})}
6265
{children.vertical.propertyView({ label: trans("slider.vertical") })}
66+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
6367
</Section>
6468

6569
<SliderPropertyView {...children} />

‎client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
77
import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants";
88
import { hasIcon } from "comps/utils";
99
import { BoolControl } from "comps/controls/boolControl";
10+
import { NumberControl } from "comps/controls/codeControl";
1011

1112
const SliderBasicComp = (function () {
1213
/**
@@ -16,6 +17,7 @@ const SliderBasicComp = (function () {
1617
...SliderChildren,
1718
value: numberExposingStateControl("value", 60),
1819
vertical: BoolControl,
20+
tabIndex: NumberControl,
1921
...formDataChildren,
2022
};
2123
return new UICompBuilder(childrenMap, (props) => {
@@ -39,6 +41,7 @@ const SliderBasicComp = (function () {
3941
$style={props.inputFieldStyle}
4042
style={{margin: 0}}
4143
$vertical={Boolean(props.vertical) || false}
44+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
4245
onChange={(e) => {
4346
props.value.onChange(e);
4447
props.onEvent("change");
@@ -61,6 +64,7 @@ const SliderBasicComp = (function () {
6164
tooltip: trans("slider.stepTooltip"),
6265
})}
6366
{children.vertical.propertyView({ label: trans("slider.vertical") })}
67+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
6468
</Section>
6569
<FormDataPropertyView {...children} />
6670
<SliderPropertyView {...children} />

0 commit comments

Comments
 (0)