Skip to content

Commit 9ac3a8a

Browse files
iamfaraniamfaran
committed
[Fix]: #1883 add tab-index on more controls
1 parent f4f6941 commit 9ac3a8a

6 files changed

Lines changed: 53 additions & 13 deletions

File tree

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
buttonRefMethods,
77
ButtonStyleControl,
88
} from "comps/comps/buttonComp/buttonCompConstants";
9-
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
9+
import { BoolCodeControl, StringControl, NumberControl } from "comps/controls/codeControl";
1010
import { ScannerEventHandlerControl } from "comps/controls/eventHandlerControl";
1111
import { withDefault } from "comps/generators";
1212
import { UICompBuilder } from "comps/generators/uiCompBuilder";
@@ -128,6 +128,7 @@ const ScannerTmpComp = (function () {
128128
disabled: BoolCodeControl,
129129
style: ButtonStyleControl,
130130
viewRef: RefControl<HTMLElement>,
131+
tabIndex: NumberControl,
131132
};
132133
return new UICompBuilder(childrenMap, (props) => {
133134
const [showModal, setShowModal] = useState(false);
@@ -199,6 +200,7 @@ const ScannerTmpComp = (function () {
199200
ref={props.viewRef}
200201
$buttonStyle={props.style}
201202
disabled={props.disabled}
203+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
202204
onClick={() => {
203205
props.onEvent("click");
204206
setShowModal(true);
@@ -284,6 +286,7 @@ const ScannerTmpComp = (function () {
284286
{disabledPropertyView(children)}
285287
{hiddenPropertyView(children)}
286288
{showDataLoadingIndicatorsPropertyView(children)}
289+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
287290
</Section>
288291
<Section name={sectionNames.advanced}>
289292
{children.continuous.propertyView({

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

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { default as AntdUpload } from "antd/es/upload";
33
import { default as Dropdown } from "antd/es/dropdown";
44
import { UploadFile, UploadProps, UploadChangeParam, UploadFileStatus, RcFile } from "antd/es/upload/interface";
55
import { Buffer } from "buffer";
6+
import { v4 as uuidv4 } from "uuid";
67
import { darkenColor } from "components/colorSelect/colorUtils";
78
import { Section, sectionNames } from "components/Section";
89
import { IconControl } from "comps/controls/iconControl";
@@ -448,6 +449,7 @@ const Upload = (
448449
text: string;
449450
dispatch: (action: CompAction) => void;
450451
forceCapture: boolean;
452+
tabIndex?: number;
451453
},
452454
) => {
453455
const { dispatch, files, style } = props;
@@ -564,13 +566,17 @@ const Upload = (
564566
onChange={handleOnChange}
565567

566568
>
567-
<Button disabled={props.disabled} onClick={(e) => {
568-
if (props.forceCapture && !isMobile) {
569-
e.preventDefault();
570-
e.stopPropagation();
571-
setShowModal(true);
572-
}
573-
}}>
569+
<Button
570+
disabled={props.disabled}
571+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
572+
onClick={(e) => {
573+
if (props.forceCapture && !isMobile) {
574+
e.preventDefault();
575+
e.stopPropagation();
576+
setShowModal(true);
577+
}
578+
}}
579+
>
574580
{hasChildren && (
575581
<span>
576582
{hasIcon(props.prefixIcon) && <IconWrapper>{props.prefixIcon}</IconWrapper>}
@@ -589,7 +595,7 @@ const Upload = (
589595
const res: Response = await fetch(image);
590596
const blob: Blob = await res.blob();
591597
const file = new File([blob], "image.jpg", {type: 'image/jpeg'});
592-
const fileUid = uuid.v4();
598+
const fileUid = uuidv4();
593599
const uploadFile = {
594600
uid: fileUid,
595601
name: file.name,
@@ -616,6 +622,7 @@ const UploadTypeOptions = [
616622
const childrenMap = {
617623
text: withDefault(StringControl, trans("file.upload")),
618624
uploadType: dropdownControl(UploadTypeOptions, "single"),
625+
tabIndex: NumberControl,
619626
...commonChildren,
620627
...formDataChildren,
621628
};
@@ -645,6 +652,7 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => {
645652
{disabledPropertyView(children)}
646653
{hiddenPropertyView(children)}
647654
{showDataLoadingIndicatorsPropertyView(children)}
655+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
648656
</Section>
649657
<Section name={sectionNames.advanced}>
650658
{children.fileType.propertyView({

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

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,31 @@ const RatingBasicComp = (function () {
5252
'labelStyle',
5353
),
5454
inputFieldStyle: migrateOldData(styleControl(RatingStyle, 'inputFieldStyle'), fixOldData),
55+
tabIndex: NumberControl,
5556
...formDataChildren,
5657
};
5758
return new UICompBuilder(childrenMap, (props) => {
5859
const defaultValue = { ...props.defaultValue }.value;
5960
const value = { ...props.value }.value;
6061
const changeRef = useRef(false);
62+
const mountedRef = useRef(true);
63+
const rateRef = useRef<HTMLDivElement | null>(null);
64+
65+
useEffect(() => {
66+
if (!mountedRef.current) return;
67+
if (rateRef.current && typeof props.tabIndex === 'number') {
68+
const stars = rateRef.current.querySelectorAll('li');
69+
stars.forEach((star, index) => {
70+
(star as HTMLElement).setAttribute('tabindex', (props.tabIndex + index).toString());
71+
});
72+
}
73+
}, [props.tabIndex, props.max]);
74+
75+
useEffect(() => {
76+
return () => {
77+
mountedRef.current = false;
78+
};
79+
}, []);
6180

6281
useEffect(() => {
6382
props.value.onChange(defaultValue);
@@ -76,7 +95,8 @@ const RatingBasicComp = (function () {
7695
inputFieldStyle:props.inputFieldStyle,
7796
animationStyle:props.animationStyle,
7897
children: (
79-
<RateStyled
98+
<div ref={rateRef}>
99+
<RateStyled
80100
count={props.max}
81101
value={value}
82102
onChange={(e) => {
@@ -86,7 +106,9 @@ const RatingBasicComp = (function () {
86106
allowHalf={props.allowHalf}
87107
disabled={props.disabled}
88108
$style={props.inputFieldStyle}
109+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
89110
/>
111+
</div>
90112
),
91113
});
92114
})
@@ -108,6 +130,7 @@ const RatingBasicComp = (function () {
108130
{disabledPropertyView(children)}
109131
{hiddenPropertyView(children)}
110132
{showDataLoadingIndicatorsPropertyView(children)}
133+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
111134
</Section>
112135
<Section name={sectionNames.advanced}>
113136
{children.allowHalf.propertyView({

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ let CascaderBasicComp = (function () {
5656
showSearch={props.showSearch}
5757
$style={props.inputFieldStyle}
5858
$childrenInputFieldStyle={props.childrenInputFieldStyle}
59+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
5960
onFocus={() => props.onEvent("focus")}
6061
onBlur={() => props.onEvent("blur")}
6162
popupRender={(menus: React.ReactNode) => (

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
22
import { Section, sectionNames } from "lowcoder-design";
33
import { RecordConstructorToComp } from "lowcoder-core";
4-
import { BoolCodeControl, JSONObjectArrayControl, StringControl } from "comps/controls/codeControl";
4+
import { BoolCodeControl, JSONObjectArrayControl, StringControl, NumberControl } from "comps/controls/codeControl";
55
import { arrayStringExposingStateControl } from "comps/controls/codeStateControl";
66
import { BoolControl } from "comps/controls/boolControl";
77
import { LabelControl } from "comps/controls/labelControl";
@@ -43,7 +43,8 @@ export const CascaderChildren = {
4343
padding: PaddingControl,
4444
inputFieldStyle:styleControl(CascaderStyle , 'inputFieldStyle'),
4545
childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle),
46-
animationStyle:styleControl(AnimationStyle ,'animationStyle')
46+
animationStyle:styleControl(AnimationStyle ,'animationStyle'),
47+
tabIndex: NumberControl
4748
};
4849

4950
export const CascaderPropertyView = (
@@ -62,6 +63,7 @@ export const CascaderPropertyView = (
6263
{disabledPropertyView(children)}
6364
{hiddenPropertyView(children)}
6465
{showDataLoadingIndicatorsPropertyView(children as any)}
66+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
6567
</Section>
6668
)}
6769

‎client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
} from "./treeUtils";
2222
import { baseSelectRefMethods, getStyle } from "../selectInputComp/selectCompConstants";
2323
import { useSelectInputValidate, SelectInputValidationSection } from "../selectInputComp/selectInputConstants";
24-
import { StringControl } from "comps/controls/codeControl";
24+
import { StringControl, NumberControl } from "comps/controls/codeControl";
2525
import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl";
2626
import { selectInputValidate } from "../selectInputComp/selectInputConstants";
2727
import { BoolControl } from "comps/controls/boolControl";
@@ -70,6 +70,7 @@ const childrenMap = {
7070
labelStyle:styleControl(LabelStyle , 'labelStyle'),
7171
inputFieldStyle: styleControl(TreeSelectStyle, 'inputFieldStyle'),
7272
viewRef: RefControl<BaseSelectRef>,
73+
tabIndex: NumberControl,
7374
};
7475

7576
function getCheckedStrategy(v: ValueFromOption<typeof checkedStrategyOptions>) {
@@ -123,6 +124,7 @@ const TreeCompView = (
123124
treeLine={props.showLine ? { showLeafIcon: props.showLeafIcon } : false}
124125
// fix expand issue when searching
125126
treeExpandedKeys={inputValue ? undefined : expanded.value}
127+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
126128
onTreeExpand={(keys) => {
127129
expanded.onChange(keys as (string | number)[]);
128130
}}
@@ -172,6 +174,7 @@ let TreeBasicComp = (function () {
172174
{allowClearPropertyView(children)}
173175
{showSearchPropertyView(children)}
174176
{showDataLoadingIndicatorsPropertyView(children)}
177+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
175178
</Section>
176179
</>
177180
)}

0 commit comments

Comments
 (0)