Skip to content

Commit 9ac3a8a

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

File tree

6 files changed

+53
-13
lines changed

6 files changed

+53
-13
lines changed

‎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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy