English support #92
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,19 +2,21 @@ import { Slider } from '@mui/material' | |
| import { sliderStyles } from './styles' | ||
| import type { CSSProperties } from 'react' | ||
| import { type SliderProps as MuiSliderProps } from '@mui/material' | ||
| import { useDirection } from '@/hooks/useDirection' | ||
|
|
||
| interface sliderProps extends Omit<MuiSliderProps, 'onChange'> { | ||
| onChange: (value: number) => void | ||
| style?: CSSProperties | ||
|
Comment on lines
7
to
9
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: fd -t f "SGLSlider.tsx" --exec cat -n {} \;Repository: ColmanDevClubORG/Sagol360Management Length of output: 909 🏁 Script executed: # Check MUI Slider props definition to confirm range mode support
rg "SliderProps" --type ts --type tsx -A 5 -B 2 | head -50Repository: ColmanDevClubORG/Sagol360Management Length of output: 107 🏁 Script executed: # Search for usages of SGLSlider to see if range mode is ever attempted
rg "SGLSlider" --type ts --type tsx -A 3 -B 2Repository: ColmanDevClubORG/Sagol360Management Length of output: 107 🌐 Web query:
💡 Result: In the Material UI (MUI) Slider component, the value prop accepts either a number or an array of numbers, depending on whether you are implementing a single-value slider or a range slider [1][2]. Type Definition and Usage: - Single-value mode: The value prop expects a number [1][3]. - Range mode: To enable range selection, provide an array containing exactly two numbers (e.g., [start, end]) to the value prop [1][4][2]. When using the component with TypeScript, the value is typically represented as number or number[] [3][5]. For range sliders, the component manages two thumbs corresponding to the two values in the array [4][6]. Key Implementation Details: - onChange handler: When the slider's value changes, the onChange callback receives the event and the new value. For range sliders, the second argument (the value) will be an array of numbers (e.g., number[] or readonly number[]) [3][2]. - Minimum Distance: When using a range slider, you can manage the spacing between the two thumbs using the disableSwap prop or by handling the activeThumb parameter provided in the onChange callback [4][6]. The Slider component automatically detects that it should operate in range mode when an array is provided to the value or defaultValue prop [4][2]. Citations:
🏁 Script executed: # Search for SGLSlider usages without explicit file type filtering
rg "SGLSlider" -A 3 -B 2Repository: ColmanDevClubORG/Sagol360Management Length of output: 2044 🏁 Script executed: # Check how SliderProps is imported and what it provides
rg "SliderProps as MuiSliderProps" -A 5Repository: ColmanDevClubORG/Sagol360Management Length of output: 550
The interface extends Suggested patch (enforce single-value contract)-interface sliderProps extends Omit<MuiSliderProps, 'onChange'> {
+interface sliderProps extends Omit<MuiSliderProps, 'onChange' | 'value' | 'defaultValue'> {
+ value?: number
+ defaultValue?: number
onChange: (value: number) => void
style?: CSSProperties
}
@@
- onChange={(_, value) => onChange(value as number)}
+ onChange={(_, value) => {
+ if (typeof value === 'number') onChange(value)
+ }}🤖 Prompt for AI Agents |
||
| } | ||
|
|
||
| export const SGLSlider = ({ onChange, style, ...props }: sliderProps) => { | ||
| const isRtl = useDirection() | ||
| return ( | ||
| <Slider | ||
| {...props} | ||
| dir={isRtl ? 'rtl' : 'ltr'} | ||
| sx={(theme) => ({ ...sliderStyles(theme, isRtl), ...style })} | ||
| onChange={(_, value) => onChange(value as number)} | ||
| /> | ||
| ) | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { useTranslation } from 'react-i18next' | ||
| import { RTL_LUNGUAGES } from '../constants' | ||
|
|
||
| export const useDirection = () => { | ||
| const { i18n } = useTranslation() | ||
|
|
||
| const isRtl = RTL_LUNGUAGES.includes(i18n.language) | ||
| return isRtl | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧩 Analysis chain
🏁 Script executed:
Repository: ColmanDevClubORG/Sagol360Management
Length of output: 107
🏁 Script executed:
Repository: ColmanDevClubORG/Sagol360Management
Length of output: 1023
🏁 Script executed:
Repository: ColmanDevClubORG/Sagol360Management
Length of output: 469
🏁 Script executed:
Repository: ColmanDevClubORG/Sagol360Management
Length of output: 564
🏁 Script executed:
Repository: ColmanDevClubORG/Sagol360Management
Length of output: 1317
🏁 Script executed:
Repository: ColmanDevClubORG/Sagol360Management
Length of output: 91
🏁 Script executed:
Repository: ColmanDevClubORG/Sagol360Management
Length of output: 456
🏁 Script executed:
Repository: ColmanDevClubORG/Sagol360Management
Length of output: 745
Update document root
langanddirattributes when language changes.The
changeLanguage()function in App.tsx callsi18n.changeLanguage(lng)but does not updatedocument.documentElement.langanddocument.documentElement.dir. When switching to Hebrew or Arabic, the root element remainslang="en" dir="ltr", breaking RTL layout and accessibility. Add a listener to update these attributes on language changes (e.g.,i18n.on('languageChanged', (lng) => { document.documentElement.lang = lng; document.documentElement.dir = lng === 'ar' || lng === 'he' ? 'rtl' : 'ltr'; })).🤖 Prompt for AI Agents