11import { DispatchType } from "lowcoder-core" ;
22import { ControlPlacement } from "../../controls/controlParams" ;
3- import React , { useContext } from "react" ;
3+ import React , { useContext , useState , useEffect } from "react" ;
44import { Dropdown , OptionsType } from "lowcoder-design" ;
55import { isEmpty , values } from "lodash" ;
66import { useSelector } from "react-redux" ;
77import { getDataSourceStructures } from "../../../redux/selectors/datasourceSelectors" ;
88import { changeValueAction } from "lowcoder-core" ;
99import { QueryContext } from "../../../util/context/QueryContext" ;
1010
11+ const COLUMN_SORT_KEY = "lowcoder_column_sort" ;
12+
1113export const ColumnNameDropdown = ( props :{
1214table :string ;
1315value :string ;
@@ -18,13 +20,27 @@ export const ColumnNameDropdown = (props: {
1820} ) => {
1921const context = useContext ( QueryContext ) ;
2022const datasourceId = context ?. datasourceId ?? "" ;
21- const columns :OptionsType =
22- values ( useSelector ( getDataSourceStructures ) [ datasourceId ] )
23- ?. find ( ( t ) => t . name === props . table )
24- ?. columns . map ( ( column ) => ( {
25- label :column . name ,
26- value :column . name ,
27- } ) ) ?? [ ] ;
23+
24+ // Simple sort preference from localStorage
25+ const [ sortColumns , setSortColumns ] = useState ( ( ) => {
26+ return localStorage . getItem ( COLUMN_SORT_KEY ) === 'true' ;
27+ } ) ;
28+
29+ useEffect ( ( ) => {
30+ localStorage . setItem ( COLUMN_SORT_KEY , sortColumns . toString ( ) ) ;
31+ } , [ sortColumns ] ) ;
32+
33+ const rawColumns = values ( useSelector ( getDataSourceStructures ) [ datasourceId ] )
34+ ?. find ( ( t ) => t . name === props . table )
35+ ?. columns . map ( ( column ) => ( {
36+ label :column . name ,
37+ value :column . name ,
38+ } ) ) ?? [ ] ;
39+
40+ const columns :OptionsType = sortColumns
41+ ?[ ...rawColumns ] . sort ( ( a , b ) => a . label . localeCompare ( b . label ) )
42+ :rawColumns ;
43+
2844return (
2945< Dropdown
3046options = { columns }
@@ -34,6 +50,20 @@ export const ColumnNameDropdown = (props: {
3450allowClear = { true }
3551placement = { props . placement }
3652label = { props . label }
53+ showSearch = { true }
54+ preNode = { ( ) => (
55+ < div style = { { padding :'4px 8px' , borderBottom :'1px solid #f0f0f0' } } >
56+ < label style = { { fontSize :'12px' , cursor :'pointer' , userSelect :'none' } } >
57+ < input
58+ type = "checkbox"
59+ checked = { sortColumns }
60+ onChange = { ( e ) => setSortColumns ( e . target . checked ) }
61+ style = { { marginRight :'6px' } }
62+ />
63+ Sort A-Z
64+ </ label >
65+ </ div >
66+ ) }
3767/>
3868) ;
3969} ;