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

Commit c690849

Browse files
Merge pull request #1931 from iamfaran/feat/1883-more-tabindex
[Feat]: #1883 add tab-index on more controls
2 parents ec2edd6 + 9ac3a8a commit c690849

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)

AltStyle によって変換されたページ (->オリジナル) /