Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit3f71caa

Browse files
Merge pull request#1683 from iamfaran/feat/LCS-51-tab-index
[FEAT]: Tab Index for Inputs
2 parentsf2b7d10 +41cb384 commit3f71caa

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
importstyled,{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
constgetValidate=(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={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
274276
/>
275277
</AutoComplete>
276278
</>
@@ -354,6 +356,9 @@ let AutoCompleteCompBase = (function () {
354356
>
355357
{children.animationStyle.getPropertyView()}
356358
</Section>
359+
<Sectionname={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
typeCommonChildrenType=RecordConstructorToComp<typeofcommonChildren>;
104106

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

190193
constgetFormattedDate=(
@@ -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={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
284288
/>
285289
),
286290
showValidationWhenEmpty:props.showValidationWhenEmpty,
@@ -340,6 +344,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
340344
<><Sectionname={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={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
485+
/>
479486
);
480487

481488
conststartResult=validate({ ...props,value:props.start});
@@ -553,6 +560,7 @@ let DateRangeTmpCmp = (function () {
553560
<><Sectionname={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
exportconstDateRangeUIView=(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
constDateMobileUIView=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={typeofprops.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={typeofprops.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
exportconstTimeRangeUIView=(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
exportconstTimeUIView=(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={typeofprops.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
constRangeSliderBasicComp=(function(){
1112
constchildrenMap={
1213
...SliderChildren,
1314
start:numberExposingStateControl("start",10),
1415
end:numberExposingStateControl("end",60),
1516
vertical:BoolControl,
17+
tabIndex:NumberControl,
1618
};
1719
returnnewUICompBuilder(childrenMap,(props,dispatch)=>{
1820
returnprops.label({
@@ -36,6 +38,7 @@ const RangeSliderBasicComp = (function () {
3638
$style={props.inputFieldStyle}
3739
style={{margin:0}}
3840
$vertical={Boolean(props.vertical)||false}
41+
tabIndex={typeofprops.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
constSliderBasicComp=(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
returnnewUICompBuilder(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={typeofprops.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)
[8]ページ先頭
©2009-2025 Movatter.jp