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 : {
1214 table : string ;
1315 value : string ;
@@ -18,13 +20,27 @@ export const ColumnNameDropdown = (props: {
1820} ) => {
1921 const context = useContext ( QueryContext ) ;
2022 const 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+ 2844 return (
2945 < Dropdown
3046 options = { columns }
@@ -34,6 +50,20 @@ export const ColumnNameDropdown = (props: {
3450 allowClear = { true }
3551 placement = { props . placement }
3652 label = { 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} ;
0 commit comments