A few fixes
This commit is contained in:
		
							parent
							
								
									1284f46aa9
								
							
						
					
					
						commit
						abf9433c10
					
				| @ -50,6 +50,7 @@ export const GridlerDataGrid = () => { | |||||||
|     headerHeight, |     headerHeight, | ||||||
|     heightProp, |     heightProp, | ||||||
|     mounted, |     mounted, | ||||||
|  |     onCellActivated, | ||||||
|     onCellClicked, |     onCellClicked, | ||||||
|     onCellEdited, |     onCellEdited, | ||||||
|     onColumnMoved, |     onColumnMoved, | ||||||
| @ -80,6 +81,7 @@ export const GridlerDataGrid = () => { | |||||||
|     headerHeight: s.headerHeight, |     headerHeight: s.headerHeight, | ||||||
|     heightProp: s.height, |     heightProp: s.height, | ||||||
|     mounted: s.mounted, |     mounted: s.mounted, | ||||||
|  |     onCellActivated: s.onCellActivated, | ||||||
|     onCellClicked: s.onCellClicked, |     onCellClicked: s.onCellClicked, | ||||||
|     onCellEdited: s.onCellEdited, |     onCellEdited: s.onCellEdited, | ||||||
|     onColumnMoved: s.onColumnMoved, |     onColumnMoved: s.onColumnMoved, | ||||||
| @ -178,6 +180,7 @@ export const GridlerDataGrid = () => { | |||||||
|             gridSelection={_gridSelection} |             gridSelection={_gridSelection} | ||||||
|             headerHeight={headerHeight ?? 32} |             headerHeight={headerHeight ?? 32} | ||||||
|             headerIcons={{ sort: SortSprite, sortdown: SortDownSprite, sortup: SortUpSprite }} |             headerIcons={{ sort: SortSprite, sortdown: SortDownSprite, sortup: SortUpSprite }} | ||||||
|  |             onCellActivated={onCellActivated} | ||||||
|             onCellClicked={onCellClicked} |             onCellClicked={onCellClicked} | ||||||
|             onCellContextMenu={(cell, event) => { |             onCellContextMenu={(cell, event) => { | ||||||
|               event.preventDefault(); |               event.preventDefault(); | ||||||
| @ -219,6 +222,15 @@ export const GridlerDataGrid = () => { | |||||||
|                   rows = rows.hasIndex(y) ? rows : rows.add(y); |                   rows = rows.hasIndex(y) ? rows : rows.add(y); | ||||||
|                 } |                 } | ||||||
|               } |               } | ||||||
|  |               if (rows.length === 0) { | ||||||
|  |                 for (const r of currentSelection?.rows ?? []) { | ||||||
|  |                   const validRowID = getRowBuffer ? getRowBuffer(r)?.[keyField] : null; | ||||||
|  |                   if (!validRowID) { | ||||||
|  |                     continue; | ||||||
|  |                   } | ||||||
|  |                   rows = rows.hasIndex(r) ? rows : rows.add(r); | ||||||
|  |                 } | ||||||
|  |               } | ||||||
| 
 | 
 | ||||||
|               if ( |               if ( | ||||||
|                 JSON.stringify(currentSelection?.columns) !== JSON.stringify(selection.columns) || |                 JSON.stringify(currentSelection?.columns) !== JSON.stringify(selection.columns) || | ||||||
|  | |||||||
| @ -160,10 +160,11 @@ export interface GridlerState { | |||||||
|   getState: <K extends keyof GridlerStoreState>(key: K) => GridlerStoreState[K]; |   getState: <K extends keyof GridlerStoreState>(key: K) => GridlerStoreState[K]; | ||||||
|   hasLocalData: boolean; |   hasLocalData: boolean; | ||||||
|   isEmpty: boolean; |   isEmpty: boolean; | ||||||
| 
 |  | ||||||
|   loadingData?: boolean; |   loadingData?: boolean; | ||||||
|  | 
 | ||||||
|   loadPage: (page: number, clearMode?: 'all' | 'page') => Promise<void>; |   loadPage: (page: number, clearMode?: 'all' | 'page') => Promise<void>; | ||||||
|   mounted: boolean; |   mounted: boolean; | ||||||
|  |   onCellActivated: (cell: Item) => void; | ||||||
|   onCellClicked: (cell: Item, event: CellClickedEventArgs) => void; |   onCellClicked: (cell: Item, event: CellClickedEventArgs) => void; | ||||||
|   onCellEdited: (cell: Item, newVal: EditableGridCell) => void; |   onCellEdited: (cell: Item, newVal: EditableGridCell) => void; | ||||||
|   onColumnMoved: (from: number, to: number) => void; |   onColumnMoved: (from: number, to: number) => void; | ||||||
| @ -400,7 +401,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat | |||||||
|             ); |             ); | ||||||
|           }) |           }) | ||||||
|           .catch((e) => { |           .catch((e) => { | ||||||
|             console.warn('loadPage Error: ', page, e); |             console.error('loadPage Error: ', page, e); | ||||||
|             state._events.dispatchEvent( |             state._events.dispatchEvent( | ||||||
|               new CustomEvent('loadPage_error', { |               new CustomEvent('loadPage_error', { | ||||||
|                 detail: { clearMode, error: e, page: pPage, state }, |                 detail: { clearMode, error: e, page: pPage, state }, | ||||||
| @ -411,6 +412,17 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat | |||||||
|     }, |     }, | ||||||
|     maxConcurrency: 1, |     maxConcurrency: 1, | ||||||
|     mounted: false, |     mounted: false, | ||||||
|  |     onCellActivated: (cell: Item): void => { | ||||||
|  |       const state = get(); | ||||||
|  |       const [col, row] = cell; | ||||||
|  | 
 | ||||||
|  |       state._events.dispatchEvent( | ||||||
|  |         new CustomEvent('onCellActivated', { | ||||||
|  |           detail: { cell, col, row, state }, | ||||||
|  |         }) | ||||||
|  |       ); | ||||||
|  |       state.glideProps?.onCellActivated?.(cell); | ||||||
|  |     }, | ||||||
|     onCellClicked: (cell: Item, event: CellClickedEventArgs) => { |     onCellClicked: (cell: Item, event: CellClickedEventArgs) => { | ||||||
|       const state = get(); |       const state = get(); | ||||||
|       const [col, row] = cell; |       const [col, row] = cell; | ||||||
|  | |||||||
| @ -15,14 +15,16 @@ function _GridlerRefHandler(props: PropsWithChildren, ref: Ref<GridlerRef> | und | |||||||
|       refresh: async (parms?: any) => { |       refresh: async (parms?: any) => { | ||||||
|         const refreshCells = getstate('refreshCells'); |         const refreshCells = getstate('refreshCells'); | ||||||
|         const loadPage = getstate('loadPage'); |         const loadPage = getstate('loadPage'); | ||||||
|         loadPage?.(parms?.pageIndex ?? 0, 'all'); |         loadPage?.(parms?.pageIndex ?? 0, 'all').then(() => { | ||||||
|           refreshCells?.(); |           refreshCells?.(); | ||||||
|  |         }); | ||||||
|       }, |       }, | ||||||
|       reload: async (parms?: any) => { |       reload: async (parms?: any) => { | ||||||
|         const refreshCells = getstate('refreshCells'); |         const refreshCells = getstate('refreshCells'); | ||||||
|         const loadPage = getstate('loadPage'); |         const loadPage = getstate('loadPage'); | ||||||
|         loadPage?.(parms?.pageIndex ?? 0, 'all'); |         loadPage?.(parms?.pageIndex ?? 0, 'all').then(() => { | ||||||
|           refreshCells?.(); |           refreshCells?.(); | ||||||
|  |         }); | ||||||
|       }, |       }, | ||||||
|       reloadRow: async (key: number | string) => { |       reloadRow: async (key: number | string) => { | ||||||
|         const refreshCells = getstate('refreshCells'); |         const refreshCells = getstate('refreshCells'); | ||||||
|  | |||||||
| @ -174,9 +174,10 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG | |||||||
|             ...(cv ?? []).filter((f) => f.page !== index), |             ...(cv ?? []).filter((f) => f.page !== index), | ||||||
|           ]); |           ]); | ||||||
|         } |         } | ||||||
|       } catch (e) { |         // eslint-disable-next-line @typescript-eslint/no-unused-vars
 | ||||||
|  |       } catch (_e) { | ||||||
|         //console.log('APIAdaptorGoLangv2 error', e);
 |         //console.log('APIAdaptorGoLangv2 error', e);
 | ||||||
|         addError(`Error: ${e}`, 'api', props.url); |         //addError(`Error: ${e}`, 'api', props.url);
 | ||||||
|       } |       } | ||||||
|       setState('loadingData', false); |       setState('loadingData', false); | ||||||
|       return []; |       return []; | ||||||
|  | |||||||
| @ -14,6 +14,7 @@ import type { GridlerColumn } from '../Column'; | |||||||
| import { type GridlerProps, type GridlerState, useGridlerStore } from '../GridlerStore'; | import { type GridlerProps, type GridlerState, useGridlerStore } from '../GridlerStore'; | ||||||
| 
 | 
 | ||||||
| export function GlidlerFormAdaptor(props: { | export function GlidlerFormAdaptor(props: { | ||||||
|  |   changeOnActiveClick?: boolean; | ||||||
|   descriptionField?: ((data: Record<string, unknown>) => string) | string; |   descriptionField?: ((data: Record<string, unknown>) => string) | string; | ||||||
|   getMenuItems?: GridlerProps['getMenuItems']; |   getMenuItems?: GridlerProps['getMenuItems']; | ||||||
|   onReload?: () => void; |   onReload?: () => void; | ||||||
| @ -23,13 +24,36 @@ export function GlidlerFormAdaptor(props: { | |||||||
|   ) => void; |   ) => void; | ||||||
|   showDescriptionInMenu?: boolean; |   showDescriptionInMenu?: boolean; | ||||||
| }) { | }) { | ||||||
|   const [getState, mounted, setState, reload] = useGridlerStore((s) => [ |   const [getState, mounted, setState, reload, _events] = useGridlerStore((s) => [ | ||||||
|     s.getState, |     s.getState, | ||||||
|     s.mounted, |     s.mounted, | ||||||
|     s.setState, |     s.setState, | ||||||
|     s.reload, |     s.reload, | ||||||
|  |     s._events, | ||||||
|   ]); |   ]); | ||||||
| 
 | 
 | ||||||
|  |   useEffect(() => { | ||||||
|  |     if (mounted && props.changeOnActiveClick) { | ||||||
|  |       const evf = (event: CustomEvent<any>) => { | ||||||
|  |         const { row, state } = event.detail; | ||||||
|  |         const getRowBuffer = state.getRowBuffer as (row: number) => Record<string, unknown>; | ||||||
|  |         if (getRowBuffer) { | ||||||
|  |           const rowData = getRowBuffer(row); | ||||||
|  |           if (!rowData) { | ||||||
|  |             return; | ||||||
|  |           } | ||||||
|  |           props.onRequestForm('change', rowData); | ||||||
|  |         } | ||||||
|  |       }; | ||||||
|  |       _events?.addEventListener('onCellActivated', evf as any); | ||||||
|  |       return () => { | ||||||
|  |         if (evf) { | ||||||
|  |           _events?.removeEventListener('onCellActivated', evf as any); | ||||||
|  |         } | ||||||
|  |       }; | ||||||
|  |     } | ||||||
|  |   }, [props.changeOnActiveClick, mounted, _events]); | ||||||
|  | 
 | ||||||
|   const getMenuItems = useCallback( |   const getMenuItems = useCallback( | ||||||
|     ( |     ( | ||||||
|       id: string, |       id: string, | ||||||
|  | |||||||
| @ -126,6 +126,7 @@ export const GridlerGoAPIExampleEventlog = () => { | |||||||
|           url={`${apiUrl}/public/process`} |           url={`${apiUrl}/public/process`} | ||||||
|         /> |         /> | ||||||
|         <Gridler.FormAdaptor |         <Gridler.FormAdaptor | ||||||
|  |           changeOnActiveClick={true} | ||||||
|           descriptionField={'process'} |           descriptionField={'process'} | ||||||
|           onRequestForm={(request, data) => { |           onRequestForm={(request, data) => { | ||||||
|             console.log('Form requested', request, data); |             console.log('Form requested', request, data); | ||||||
|  | |||||||
| @ -120,7 +120,7 @@ const MenuItemRenderer = ({ children, label, ...props }: MantineBetterMenuInstan | |||||||
|         props.onClick?.(e); |         props.onClick?.(e); | ||||||
|         if (props.onClickAsync) { |         if (props.onClickAsync) { | ||||||
|           setLoading(true); |           setLoading(true); | ||||||
|           props.onClickAsync().finally(() => setLoading(false)); |           props.onClickAsync(e).finally(() => setLoading(false)); | ||||||
|         } |         } | ||||||
|       }} |       }} | ||||||
|       styles={{ |       styles={{ | ||||||
|  | |||||||
| @ -22,7 +22,7 @@ export interface MantineBetterMenuInstanceItem extends Partial<MenuItemProps> { | |||||||
|   items?: Array<MantineBetterMenuInstanceItem>; |   items?: Array<MantineBetterMenuInstanceItem>; | ||||||
|   label?: string; |   label?: string; | ||||||
|   onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; |   onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; | ||||||
|   onClickAsync?: () => Promise<void>; |   onClickAsync?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<void>; | ||||||
|   renderer?: |   renderer?: | ||||||
|     | ((props: MantineBetterMenuInstanceItem & Record<string, unknown>) => ReactNode) |     | ((props: MantineBetterMenuInstanceItem & Record<string, unknown>) => ReactNode) | ||||||
|     | ReactNode; |     | ReactNode; | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user