Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-05 04:45:47 +01:00
Code Issues Packages Projects Releases Activity

chore(react/ribbon): port order by

Browse Source
This commit is contained in:
Elian Doran
2025-08-24 18:29:47 +03:00
parent 2fd3a875b6
commit 73f20d01e4
3 changed files with 60 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/client/src/widgets/react/FormSelect.tsx
View File

@@ -23,14 +23,15 @@ interface FormSelectProps<T, Q> extends ValueConfig<T, Q> {
name?: string;
onChange: OnChangeListener;
style?: CSSProperties;
className?: string;
}
/**
* Combobox component that takes in any object array as data. Each item of the array is rendered as an item, and the key and values are obtained by looking into the object by a specified key.
*/
export default function FormSelect<T>({ name, id, onChange, style, ...restProps }: FormSelectProps<T, T>) {
export default function FormSelect<T>({ name, id, onChange, style, className, ...restProps }: FormSelectProps<T, T>) {
return (
<FormSelectBody name={name} id={id} onChange={onChange} style={style}>
<FormSelectBody name={name} id={id} onChange={onChange} style={style} className={className}>
<FormSelectGroup {...restProps} />
</FormSelectBody>
);
@@ -39,9 +40,9 @@ export default function FormSelect<T>({ name, id, onChange, style, ...restProps
/**
* Similar to {@link FormSelect}, but the top-level elements are actually groups.
*/
export function FormSelectWithGroups<T>({ name, id, values, keyProperty, titleProperty, currentValue, onChange }: FormSelectProps<T, FormSelectGroup<T> | T>) {
export function FormSelectWithGroups<T>({ name, id, values, keyProperty, titleProperty, currentValue, onChange, ...restProps }: FormSelectProps<T, FormSelectGroup<T> | T>) {
return (
<FormSelectBody name={name} id={id} onChange={onChange}>
<FormSelectBody name={name} id={id} onChange={onChange} {...restProps}>
{values.map((item) => {
if (!item) return <></>;
if (typeof item === "object" && "items" in item) {
@@ -60,13 +61,13 @@ export function FormSelectWithGroups<T>({ name, id, values, keyProperty, titlePr
)
}
function FormSelectBody({ id, name, children, onChange, style }: { id?: string, name?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties }) {
function FormSelectBody({ id, name, children, onChange, style, className }: { id?: string, name?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties, className?: string }) {
return (
<select
id={id}
class="form-select"
onChange={e => onChange((e.target as HTMLInputElement).value)}
style={style}
className={`form-select ${className ?? ""}`}
>
{children}
</select>