Merge pull request #1931 from iamfaran/feat/1883-more-tabindex

[Feat]: #1883 add tab-index on more controls

Author: raheeliftikhar5

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

@@ -6,7 +6,7 @@ import {
   buttonRefMethods,
   ButtonStyleControl,
 } from "comps/comps/buttonComp/buttonCompConstants";
-import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
+import { BoolCodeControl, StringControl, NumberControl } from "comps/controls/codeControl";
 import { ScannerEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { withDefault } from "comps/generators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
@@ -128,6 +128,7 @@ const ScannerTmpComp = (function () {
     disabled: BoolCodeControl,
     style: ButtonStyleControl,
     viewRef: RefControl<HTMLElement>,
+    tabIndex: NumberControl,
   };
   return new UICompBuilder(childrenMap, (props) => {
     const [showModal, setShowModal] = useState(false);
@@ -199,6 +200,7 @@ const ScannerTmpComp = (function () {
           ref={props.viewRef}
           $buttonStyle={props.style}
           disabled={props.disabled}
+          tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
           onClick={() => {
             props.onEvent("click");
             setShowModal(true);
@@ -284,6 +286,7 @@ const ScannerTmpComp = (function () {
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
               {showDataLoadingIndicatorsPropertyView(children)}
+              {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
             </Section>
             <Section name={sectionNames.advanced}>
               {children.continuous.propertyView({

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

@@ -3,6 +3,7 @@ import { default as AntdUpload } from "antd/es/upload";
 import { default as Dropdown } from "antd/es/dropdown";
 import { UploadFile, UploadProps, UploadChangeParam, UploadFileStatus, RcFile } from "antd/es/upload/interface";
 import { Buffer } from "buffer";
+import { v4 as uuidv4 } from "uuid";
 import { darkenColor } from "components/colorSelect/colorUtils";
 import { Section, sectionNames } from "components/Section";
 import { IconControl } from "comps/controls/iconControl";
@@ -448,6 +449,7 @@ const Upload = (
     text: string;
     dispatch: (action: CompAction) => void;
     forceCapture: boolean;
+    tabIndex?: number;
   },
 ) => {
   const { dispatch, files, style } = props;
@@ -564,13 +566,17 @@ const Upload = (
         onChange={handleOnChange}
 
       >
-        <Button disabled={props.disabled} onClick={(e) => {
-          if (props.forceCapture && !isMobile) {
-            e.preventDefault();
-            e.stopPropagation();
-            setShowModal(true);
-          }
-        }}>
+        <Button 
+          disabled={props.disabled} 
+          tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
+          onClick={(e) => {
+            if (props.forceCapture && !isMobile) {
+              e.preventDefault();
+              e.stopPropagation();
+              setShowModal(true);
+            }
+          }}
+        >
           {hasChildren && (
             <span>
               {hasIcon(props.prefixIcon) && <IconWrapper>{props.prefixIcon}</IconWrapper>}
@@ -589,7 +595,7 @@ const Upload = (
           const res: Response = await fetch(image);
           const blob: Blob = await res.blob();
           const file = new File([blob], "image.jpg", {type: 'image/jpeg'});
-          const fileUid = uuid.v4();
+          const fileUid = uuidv4();
           const uploadFile = {
             uid: fileUid,
             name: file.name,
@@ -616,6 +622,7 @@ const UploadTypeOptions = [
 const childrenMap = {
   text: withDefault(StringControl, trans("file.upload")),
   uploadType: dropdownControl(UploadTypeOptions, "single"),
+  tabIndex: NumberControl,
   ...commonChildren,
   ...formDataChildren,
 };
@@ -645,6 +652,7 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => {
             {disabledPropertyView(children)}
             {hiddenPropertyView(children)}
             {showDataLoadingIndicatorsPropertyView(children)}
+            {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
           </Section>
           <Section name={sectionNames.advanced}>
               {children.fileType.propertyView({

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

@@ -52,12 +52,31 @@ const RatingBasicComp = (function () {
       'labelStyle',
     ),
     inputFieldStyle: migrateOldData(styleControl(RatingStyle, 'inputFieldStyle'), fixOldData),
+    tabIndex: NumberControl,
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
     const defaultValue = { ...props.defaultValue }.value;
     const value = { ...props.value }.value;
     const changeRef = useRef(false);
+    const mountedRef = useRef(true);
+    const rateRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+      if (!mountedRef.current) return;
+      if (rateRef.current && typeof props.tabIndex === 'number') {
+        const stars = rateRef.current.querySelectorAll('li');
+        stars.forEach((star, index) => {
+          (star as HTMLElement).setAttribute('tabindex', (props.tabIndex + index).toString());
+        });
+      }
+    }, [props.tabIndex, props.max]);
+
+    useEffect(() => {
+      return () => {
+        mountedRef.current = false;
+      };
+    }, []);
 
     useEffect(() => {
       props.value.onChange(defaultValue);
@@ -76,7 +95,8 @@ const RatingBasicComp = (function () {
       inputFieldStyle:props.inputFieldStyle,
       animationStyle:props.animationStyle,
       children: (
-        <RateStyled
+        <div ref={rateRef}>
+          <RateStyled
           count={props.max}
           value={value}
           onChange={(e) => {
@@ -86,7 +106,9 @@ const RatingBasicComp = (function () {
           allowHalf={props.allowHalf}
           disabled={props.disabled}
           $style={props.inputFieldStyle}
+          tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
         />
+        </div>
       ),
     });
   })
@@ -108,6 +130,7 @@ const RatingBasicComp = (function () {
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
               {showDataLoadingIndicatorsPropertyView(children)}
+              {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
             </Section>
               <Section name={sectionNames.advanced}>
                 {children.allowHalf.propertyView({

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

@@ -56,6 +56,7 @@ let CascaderBasicComp = (function () {
           showSearch={props.showSearch}
           $style={props.inputFieldStyle}
           $childrenInputFieldStyle={props.childrenInputFieldStyle}
+          tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
           onFocus={() => props.onEvent("focus")}
           onBlur={() => props.onEvent("blur")}
           popupRender={(menus: React.ReactNode) => (

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

@@ -1,7 +1,7 @@
 import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
 import { Section, sectionNames } from "lowcoder-design";
 import { RecordConstructorToComp } from "lowcoder-core";
-import { BoolCodeControl, JSONObjectArrayControl, StringControl } from "comps/controls/codeControl";
+import { BoolCodeControl, JSONObjectArrayControl, StringControl, NumberControl } from "comps/controls/codeControl";
 import { arrayStringExposingStateControl } from "comps/controls/codeStateControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { LabelControl } from "comps/controls/labelControl";
@@ -43,7 +43,8 @@ export const CascaderChildren = {
   padding: PaddingControl,
   inputFieldStyle:styleControl(CascaderStyle , 'inputFieldStyle'),
   childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle),
-  animationStyle:styleControl(AnimationStyle ,'animationStyle')
+  animationStyle:styleControl(AnimationStyle ,'animationStyle'),
+  tabIndex: NumberControl
 };
 
 export const CascaderPropertyView = (
@@ -62,6 +63,7 @@ export const CascaderPropertyView = (
         {disabledPropertyView(children)}
         {hiddenPropertyView(children)}
         {showDataLoadingIndicatorsPropertyView(children as any)}
+        {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
       </Section>
     )}
 

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

@@ -21,7 +21,7 @@ import {
 } from "./treeUtils";
 import { baseSelectRefMethods, getStyle } from "../selectInputComp/selectCompConstants";
 import { useSelectInputValidate, SelectInputValidationSection } from "../selectInputComp/selectInputConstants";
-import { StringControl } from "comps/controls/codeControl";
+import { StringControl, NumberControl } from "comps/controls/codeControl";
 import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { selectInputValidate } from "../selectInputComp/selectInputConstants";
 import { BoolControl } from "comps/controls/boolControl";
@@ -70,6 +70,7 @@ const childrenMap = {
   labelStyle:styleControl(LabelStyle  , 'labelStyle'),
   inputFieldStyle: styleControl(TreeSelectStyle, 'inputFieldStyle'),
   viewRef: RefControl<BaseSelectRef>,
+  tabIndex: NumberControl,
 };
 
 function getCheckedStrategy(v: ValueFromOption<typeof checkedStrategyOptions>) {
@@ -123,6 +124,7 @@ const TreeCompView = (
         treeLine={props.showLine ? { showLeafIcon: props.showLeafIcon } : false}
         // fix expand issue when searching
         treeExpandedKeys={inputValue ? undefined : expanded.value}
+        tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
         onTreeExpand={(keys) => {
           expanded.onChange(keys as (string | number)[]);
         }}
@@ -172,6 +174,7 @@ let TreeBasicComp = (function () {
               {allowClearPropertyView(children)}
               {showSearchPropertyView(children)}
               {showDataLoadingIndicatorsPropertyView(children)}
+              {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
             </Section>
           </>
         )}