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

Commit55b6b54

Browse files
Merge pull request#1911 from iamfaran/feat/1883-tab-index
[Feat]:#1883 add tab-index on buttons/checkbox/select
2 parentsc9fab1f +f3d08e9 commit55b6b54

File tree

6 files changed

+45
-9
lines changed

6 files changed

+45
-9
lines changed

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{BoolCodeControl,StringControl}from"comps/controls/codeControl";
1+
import{BoolCodeControl,StringControl,NumberControl}from"comps/controls/codeControl";
22
import{dropdownControl}from"comps/controls/dropdownControl";
33
import{ButtonEventHandlerControl}from"comps/controls/eventHandlerControl";
44
import{IconControl}from"comps/controls/iconControl";
@@ -137,7 +137,8 @@ const childrenMap = {
137137
disabledStyle:DisabledButtonStyleControl,
138138
animationStyle:styleControl(AnimationStyle,'animationStyle'),
139139
viewRef:RefControl<HTMLElement>,
140-
tooltip:StringControl
140+
tooltip:StringControl,
141+
tabIndex:NumberControl
141142
};
142143

143144
typeChildrenType=NewChildren<RecordConstructorToComp<typeofchildrenMap>>;
@@ -162,8 +163,12 @@ const ButtonPropertyView = React.memo((props: {
162163
disabledPropertyView(props.children),
163164
hiddenPropertyView(props.children),
164165
loadingPropertyView(props.children),
166+
props.children.tabIndex.propertyView({label:trans("prop.tabIndex")}),
165167
]
166-
:props.children.form.getPropertyView()}
168+
:[
169+
props.children.form.getPropertyView(),
170+
props.children.tabIndex.propertyView({label:trans("prop.tabIndex")}),
171+
]}
167172
</Section>
168173
</>
169174
)}
@@ -222,6 +227,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
222227
(!isDefault(props.type)&&getForm(editorState,props.form)?.disableSubmit())
223228
}
224229
onClick={handleClick}
230+
tabIndex={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
225231
>
226232
{props.prefixIcon&&<IconWrapper>{props.prefixIcon}</IconWrapper>}
227233
{

‎client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import{defaultasButton}from"antd/es/button";
22
import{ButtonCompWrapper,buttonRefMethods}from"comps/comps/buttonComp/buttonCompConstants";
3-
import{BoolCodeControl,StringControl}from"comps/controls/codeControl";
3+
import{BoolCodeControl,StringControl,NumberControl}from"comps/controls/codeControl";
44
import{ButtonEventHandlerControl}from"comps/controls/eventHandlerControl";
55
import{styleControl}from"comps/controls/styleControl";
66
import{AnimationStyle,AnimationStyleType,LinkStyle,LinkStyleType}from"comps/controls/styleControlConstants";
@@ -91,6 +91,7 @@ const LinkTmpComp = (function () {
9191
prefixIcon:IconControl,
9292
suffixIcon:IconControl,
9393
viewRef:RefControl<HTMLElement>,
94+
tabIndex:NumberControl,
9495
};
9596
returnnewUICompBuilder(childrenMap,(props)=>{
9697
// chrome86 bug: button children should not contain only empty span
@@ -105,6 +106,7 @@ const LinkTmpComp = (function () {
105106
disabled={props.disabled}
106107
onClick={()=>props.onEvent("click")}
107108
type={"link"}
109+
tabIndex={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
108110
>
109111
{hasChildren&&(
110112
<span>
@@ -131,6 +133,7 @@ const LinkTmpComp = (function () {
131133
{hiddenPropertyView(children)}
132134
{loadingPropertyView(children)}
133135
{showDataLoadingIndicatorsPropertyView(children)}
136+
{children.tabIndex.propertyView({label:trans("prop.tabIndex")})}
134137
</Section>
135138
<Sectionname={sectionNames.advanced}>
136139
{children.prefixIcon.propertyView({label:trans("button.prefixIcon")})}

‎client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{BoolCodeControl,StringControl}from"comps/controls/codeControl";
1+
import{BoolCodeControl,StringControl,NumberControl}from"comps/controls/codeControl";
22
import{withDefault}from"comps/generators";
33
import{UICompBuilder}from"comps/generators/uiCompBuilder";
44
import{
@@ -68,6 +68,7 @@ const ToggleTmpComp = (function () {
6868
showBorder:withDefault(BoolControl,true),
6969
viewRef:RefControl<HTMLElement>,
7070
tooltip:StringControl,
71+
tabIndex:NumberControl,
7172
};
7273
returnnewUICompBuilder(childrenMap,(props)=>{
7374
consttext=props.showText
@@ -92,6 +93,7 @@ const ToggleTmpComp = (function () {
9293
props.onEvent("change");
9394
props.value.onChange(!props.value.value);
9495
}}
96+
tabIndex={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
9597
>
9698
{props.iconPosition==="right"&&text}
9799
{<IconWrapper>{props.value.value ?props.trueIcon :props.falseIcon}</IconWrapper>}
@@ -117,6 +119,7 @@ const ToggleTmpComp = (function () {
117119
{hiddenPropertyView(children)}
118120
{loadingPropertyView(children)}
119121
{showDataLoadingIndicatorsPropertyView(children)}
122+
{children.tabIndex.propertyView({label:trans("prop.tabIndex")})}
120123
</Section>
121124
<Sectionname={sectionNames.advanced}>
122125
{children.showText.propertyView({label:trans("toggleButton.showText")})}

‎client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{BoolCodeControl,StringControl}from"comps/controls/codeControl";
1+
import{BoolCodeControl,StringControl,NumberControl}from"comps/controls/codeControl";
22
import{dropdownControl}from"comps/controls/dropdownControl";
33
import{ButtonEventHandlerControl}from"comps/controls/eventHandlerControl";
44
import{IconControl}from"comps/controls/iconControl";
@@ -204,7 +204,8 @@ const childrenMap = {
204204
style:ButtonStyleControl,
205205
viewRef:RefControl<HTMLElement>,
206206
restrictPaddingOnRotation:withDefault(StringControl,'controlButton'),
207-
tooltip:StringControl
207+
tooltip:StringControl,
208+
tabIndex:NumberControl
208209
};
209210

210211
letButtonTmpComp=(function(){
@@ -294,6 +295,7 @@ let ButtonTmpComp = (function () {
294295
?handleClickEvent()
295296
:submitForm(editorState,props.form)
296297
}
298+
tabIndex={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
297299
>
298300
{props.sourceMode==='standard'&&props.prefixIcon&&(
299301
<IconWrapper
@@ -342,6 +344,7 @@ let ButtonTmpComp = (function () {
342344
{disabledPropertyView(children)}
343345
{hiddenPropertyView(children)}
344346
{loadingPropertyView(children)}
347+
{children.tabIndex.propertyView({label:trans("prop.tabIndex")})}
345348
</Section>
346349
)}
347350

‎client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,8 +214,20 @@ let CheckboxBasicComp = (function () {
214214

215215
returnnewUICompBuilder(childrenMap,(props)=>{
216216
constmountedRef=useRef(true);
217+
constcheckboxRef=useRef<HTMLDivElement|null>(null);
217218
const[validateState,handleChange]=useSelectInputValidate(props);
218219

220+
useEffect(()=>{
221+
if(!mountedRef.current)return;
222+
if(checkboxRef.current&&typeofprops.tabIndex==='number'){
223+
constcheckboxInputs=checkboxRef.current.querySelectorAll('input[type="checkbox"]');
224+
checkboxInputs.forEach((input,index)=>{
225+
// Set sequential tabindex for each checkbox
226+
input.setAttribute('tabindex',(props.tabIndex+index).toString());
227+
});
228+
}
229+
},[props.tabIndex,props.options]);
230+
219231
useEffect(()=>{
220232
return()=>{
221233
mountedRef.current=false;
@@ -251,7 +263,13 @@ let CheckboxBasicComp = (function () {
251263
layout={props.layout}
252264
options={filteredOptions()}
253265
onChange={handleValidateChange}
254-
viewRef={props.viewRef}
266+
viewRef={(el)=>{
267+
if(!mountedRef.current)return;
268+
if(el){
269+
props.viewRef(el);
270+
checkboxRef.current=el;
271+
}
272+
}}
255273
tabIndex={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
256274
/>
257275
),

‎client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
}from"lowcoder-core";
77
import{BoolControl}from"../../controls/boolControl";
88
import{LabelControl}from"../../controls/labelControl";
9-
import{BoolCodeControl,StringControl}from"../../controls/codeControl";
9+
import{BoolCodeControl,StringControl,NumberControl}from"../../controls/codeControl";
1010
import{PaddingControl}from"../../controls/paddingControl";
1111
import{MarginControl}from"../../controls/marginControl";
1212
import{
@@ -242,6 +242,7 @@ export const SelectChildrenMap = {
242242
margin:MarginControl,
243243
padding:PaddingControl,
244244
inputFieldStyle:styleControl(SelectStyle),
245+
tabIndex:NumberControl,
245246
...SelectInputValidationChildren,
246247
...formDataChildren,
247248
};
@@ -269,6 +270,7 @@ export const SelectUIView = (
269270
placeholder={props.placeholder}
270271
value={props.value}
271272
showSearch={props.showSearch}
273+
tabIndex={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
272274
filterOption={(input,option)=>{
273275
if(!option)returnfalse;
274276
returnString(option.label??option.value??"").toLowerCase().includes(input.toLowerCase());
@@ -348,6 +350,7 @@ export const SelectPropertyView = (
348350
{disabledPropertyView(children)}
349351
{hiddenPropertyView(children)}
350352
{showDataLoadingIndicatorsPropertyView(childrenasany)}
353+
{children.tabIndex.propertyView({label:trans("prop.tabIndex")})}
351354
</Section>
352355
</>
353356
)}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp