Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(playground): add initialSorting to select fields #707

Merged
merged 1 commit into from
May 27, 2024
Merged

feat(playground): add initialSorting to select fields #707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/playground/admin/app/pages/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const hasOne = () => <>
</Slots.Actions>
<EntitySubTree entity={'SelectRoot(unique=unique)'} setOnCreate={'(unique=unique)'}>
<div className={'space-y-4'}>
<SelectField field={'hasOne'} label="Has one value">
<SelectField field={'hasOne'} label="Has one value" initialSorting={{ name: 'asc' }}>
<Field field={'name'} />
</SelectField>
</div>
Expand Down
12 changes: 6 additions & 6 deletions packages/playground/admin/lib/components/form/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ export type SelectFieldProps =
& SelectInputProps
& Omit<FormContainerProps, 'children'>

export const SelectField = Component<SelectFieldProps>(({ field, label, description, children, options, queryField, placeholder, createNewForm, errors }) => {
export const SelectField = Component<SelectFieldProps>(({ field, label, description, children, options, queryField, placeholder, createNewForm, errors, initialSorting }) => {
return (
<FormHasOneRelationScope field={field}>
<FormContainer description={description} label={label} errors={errors}>
<SelectInput field={field} queryField={queryField} options={options} placeholder={placeholder} createNewForm={createNewForm}>
<SelectInput field={field} queryField={queryField} options={options} placeholder={placeholder} createNewForm={createNewForm} initialSorting={initialSorting}>
{children}
</SelectInput>
</FormContainer>
Expand All @@ -40,11 +40,11 @@ export type MultiSelectFieldProps =
& MultiSelectInputProps
& Omit<FormContainerProps, 'children'>

export const MultiSelectField = Component<MultiSelectFieldProps>(({ field, label, description, children, options, queryField, placeholder, createNewForm, errors }) => {
export const MultiSelectField = Component<MultiSelectFieldProps>(({ field, label, description, children, options, queryField, placeholder, createNewForm, errors, initialSorting }) => {
return (
<FormHasManyRelationScope field={field}>
<FormContainer description={description} label={label} errors={errors}>
<MultiSelectInput field={field} queryField={queryField} options={options} placeholder={placeholder} createNewForm={createNewForm}>
<MultiSelectInput field={field} queryField={queryField} options={options} placeholder={placeholder} createNewForm={createNewForm} initialSorting={initialSorting}>
{children}
</MultiSelectInput>
</FormContainer>
Expand All @@ -56,11 +56,11 @@ export type SortableMultiSelectFieldProps =
& SortableMultiSelectInputProps
& Omit<FormContainerProps, 'children'>

export const SortableMultiSelectField = Component<SortableMultiSelectFieldProps>(({ field, label, description, children, options, queryField, placeholder, sortableBy, connectAt, createNewForm, errors }) => {
export const SortableMultiSelectField = Component<SortableMultiSelectFieldProps>(({ field, label, description, children, options, queryField, placeholder, sortableBy, connectAt, createNewForm, errors, initialSorting }) => {
return (
<FormHasManyRelationScope field={field}>
<FormContainer description={description} label={label} errors={errors}>
<SortableMultiSelectInput field={field} queryField={queryField} options={options} placeholder={placeholder} sortableBy={sortableBy} connectAt={connectAt} createNewForm={createNewForm}>
<SortableMultiSelectInput field={field} queryField={queryField} options={options} placeholder={placeholder} sortableBy={sortableBy} connectAt={connectAt} createNewForm={createNewForm} initialSorting={initialSorting}>
{children}
</SortableMultiSelectInput>
</FormContainer>
Expand Down
9 changes: 5 additions & 4 deletions packages/playground/admin/lib/components/select/multi-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { SelectDefaultFilter } from './filter'
import { SelectListInner } from './list'
import { MultiSelect, SelectDataView, SelectEachValue, SelectItemTrigger, SelectOption, SelectPlaceholder } from '@contember/react-select'
import { CreateEntityDialog } from './create-new'
import { DataViewUnionFilterFields } from '@contember/react-dataview'
import { DataViewSortingDirections, DataViewUnionFilterFields } from '@contember/react-dataview'
import { useFormFieldId } from '@contember/react-form'

export type MultiSelectInputProps =
Expand All @@ -30,9 +30,10 @@ export type MultiSelectInputProps =
placeholder?: ReactNode
createNewForm?: ReactNode
queryField?: DataViewUnionFilterFields
}
initialSorting?: DataViewSortingDirections
}

export const MultiSelectInput = Component<MultiSelectInputProps>(({ field, queryField, options, children, placeholder, createNewForm }) => {
export const MultiSelectInput = Component<MultiSelectInputProps>(({ field, queryField, options, children, placeholder, createNewForm, initialSorting }) => {
const id = useFormFieldId()
return (
<MultiSelect field={field} options={options}>
Expand Down Expand Up @@ -64,7 +65,7 @@ export const MultiSelectInput = Component<MultiSelectInputProps>(({ field, query

</SelectInputWrapperUI>
<SelectPopoverContent>
<SelectDataView queryField={queryField}>
<SelectDataView initialSorting={initialSorting} queryField={queryField}>
<SelectListInner filterToolbar={<SelectDefaultFilter />}>
<SelectOption>
<SelectItemTrigger>
Expand Down
7 changes: 4 additions & 3 deletions packages/playground/admin/lib/components/select/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { SelectListInner } from './list'
import { Select, SelectDataView, SelectEachValue, SelectItemTrigger, SelectOption, SelectPlaceholder } from '@contember/react-select'
import { CreateEntityDialog } from './create-new'
import { SelectDefaultFilter } from './filter'
import { DataViewUnionFilterFields } from '@contember/react-dataview'
import { DataViewSortingDirections, DataViewUnionFilterFields } from '@contember/react-dataview'
import { useFormFieldId } from '@contember/react-form'

export type SelectInputProps =
Expand All @@ -21,10 +21,11 @@ export type SelectInputProps =
placeholder?: ReactNode
createNewForm?: ReactNode
queryField?: DataViewUnionFilterFields
initialSorting?: DataViewSortingDirections
}


export const SelectInput = Component<SelectInputProps>(({ field, queryField, options, children, placeholder, createNewForm }) => {
export const SelectInput = Component<SelectInputProps>(({ field, queryField, options, children, placeholder, createNewForm, initialSorting }) => {
const [open, setOpen] = React.useState(false)
const id = useFormFieldId()

Expand Down Expand Up @@ -55,7 +56,7 @@ export const SelectInput = Component<SelectInputProps>(({ field, queryField, opt
</SelectInputActionsUI>
</SelectInputWrapperUI>
<SelectPopoverContent>
<SelectDataView queryField={queryField}>
<SelectDataView initialSorting={initialSorting} queryField={queryField}>
<SelectListInner filterToolbar={<SelectDefaultFilter />}>
<SelectOption>
<SelectItemTrigger>
Expand Down
25 changes: 13 additions & 12 deletions packages/playground/admin/lib/components/select/sortable-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { RepeaterSortable, RepeaterSortableDragOverlay, RepeaterSortableDropIndi
import { Component, HasOne, SugaredQualifiedEntityList, SugaredRelativeEntityList, SugaredRelativeSingleEntity, SugaredRelativeSingleField } from '@contember/interface'
import { SelectDataView, SelectItemTrigger, SelectOption, SelectPlaceholder, SortableMultiSelect } from '@contember/react-select'
import { CreateEntityDialog } from './create-new'
import { DataViewUnionFilterFields } from '@contember/react-dataview'
import { DataViewSortingDirections, DataViewUnionFilterFields } from '@contember/react-dataview'
import { SelectDefaultFilter } from './filter'
import { useFormFieldId } from '@contember/react-form'

Expand All @@ -35,17 +35,18 @@ const MultiSortableSelectDropIndicator = ({ position }: { position: 'before' | '

export type SortableMultiSelectInputProps =
& {
field: SugaredRelativeEntityList['field']
sortableBy: SugaredRelativeSingleField['field']
connectAt: SugaredRelativeSingleEntity['field']
children: ReactNode
options?: SugaredQualifiedEntityList['entities']
placeholder?: ReactNode
createNewForm?: ReactNode
queryField?: DataViewUnionFilterFields
}
field: SugaredRelativeEntityList['field']
sortableBy: SugaredRelativeSingleField['field']
connectAt: SugaredRelativeSingleEntity['field']
children: ReactNode
options?: SugaredQualifiedEntityList['entities']
placeholder?: ReactNode
createNewForm?: ReactNode
queryField?: DataViewUnionFilterFields
initialSorting?: DataViewSortingDirections
}

export const SortableMultiSelectInput = Component<SortableMultiSelectInputProps>(({ field, queryField, options, children, sortableBy, connectAt, placeholder, createNewForm }) => {
export const SortableMultiSelectInput = Component<SortableMultiSelectInputProps>(({ field, queryField, options, children, sortableBy, connectAt, placeholder, createNewForm, initialSorting }) => {
const id = useFormFieldId()
return (
<SortableMultiSelect field={field} sortableBy={sortableBy} connectAt={connectAt} options={options}>
Expand Down Expand Up @@ -98,7 +99,7 @@ export const SortableMultiSelectInput = Component<SortableMultiSelectInputProps>
</SelectInputWrapperUI>

<SelectPopoverContent>
<SelectDataView queryField={queryField}>
<SelectDataView initialSorting={initialSorting} queryField={queryField}>
<SelectListInner filterToolbar={<SelectDefaultFilter />}>
<SelectOption>
<SelectItemTrigger>
Expand Down
Loading