Skip to content

Commit

Permalink
ignore type issues in playgrounds
Browse files Browse the repository at this point in the history 
These playgrounds are mainly test playgrounds. Lower priority for now,
we will get back to them.
  • Loading branch information
@RobinMalfait
RobinMalfait committed Dec 20, 2023
1 parent 94149bb commit c216add
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 101 deletions.
117 changes: 60 additions & 57 deletions packages/playground-react/pages/combobox/combobox-virtual-with-empty-states.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,70 +119,73 @@ export default function Home() {
filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto'
)}
>
{({ option }: { option: Option }) => {
if (!option || option.empty) {
{
// @ts-expect-error TODO: Properly handle this
({ option }: { option: Option }) => {
if (!option || option.empty) {
return (
<Combobox.Option
// TODO: `disabled` being required is a bug
disabled
// Note: Do NOT use `null` for the `value`
value={option ?? emptyOption.current}
className="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-none"
>
<div className="relative grid h-full grid-cols-1 grid-rows-1">
<div className="absolute inset-0">
<svg
fill="none"
viewBox="0 0 24 24"
strokeWidth={0.5}
stroke="currentColor"
className="-translate-y-1/4 text-gray-500/5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
/>
</svg>
</div>
<div className="z-20 col-span-full col-start-1 row-span-full row-start-1 flex flex-col items-center justify-center p-8">
<h3 className="mx-2 mb-4 text-xl font-semibold text-gray-400">
No people found
</h3>
<button
id="add_person"
type="button"
className="rounded bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
onClick={() => {
let person = { name: query, disabled: false }
setList((list) => [...list, person])
setSelectedPerson(person)
}}
>
Add "{query}"
</button>
</div>
</div>
</Combobox.Option>
)
}

return (
<Combobox.Option
// TODO: `disabled` being required is a bug
disabled
// Note: Do NOT use `null` for the `value`
value={option ?? emptyOption.current}
className="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-none"
disabled={option.disabled}
value={option}
className={({ active }) => {
return classNames(
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
)
}}
>
<div className="relative grid h-full grid-cols-1 grid-rows-1">
<div className="absolute inset-0">
<svg
fill="none"
viewBox="0 0 24 24"
strokeWidth={0.5}
stroke="currentColor"
className="-translate-y-1/4 text-gray-500/5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
/>
</svg>
</div>
<div className="z-20 col-span-full col-start-1 row-span-full row-start-1 flex flex-col items-center justify-center p-8">
<h3 className="mx-2 mb-4 text-xl font-semibold text-gray-400">
No people found
</h3>
<button
id="add_person"
type="button"
className="rounded bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
onClick={() => {
let person = { name: query, disabled: false }
setList((list) => [...list, person])
setSelectedPerson(person)
}}
>
Add "{query}"
</button>
</div>
</div>
<span className="block truncate">{option.name}</span>
</Combobox.Option>
)
}

return (
<Combobox.Option
// TODO: `disabled` being required is a bug
disabled={option.disabled}
value={option}
className={({ active }) => {
return classNames(
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
)
}}
>
<span className="block truncate">{option.name}</span>
</Combobox.Option>
)
}}
}
</Combobox.Options>
</div>
</div>
Expand Down
81 changes: 37 additions & 44 deletions packages/playground-react/pages/combobox/combobox-virtualized.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,55 +107,48 @@ function Example({ virtual = true, data, initial }: { virtual?: boolean; data; i
<div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
{virtual ? (
<Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
{
// @ts-expect-error TODO
({ option, idx }) => {
return (
<Combobox.Option
value={option}
className={({ active }) => {
return classNames(
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
)
}}
>
{({ active, selected }) => (
<>
{({ option }) => {
return (
<Combobox.Option
value={option}
className={({ active }) => {
return classNames(
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
)
}}
>
{({ active, selected }) => (
<>
<span
className={classNames(
'block truncate',
selected ? 'font-semibold' : 'font-normal'
)}
>
{option as any}
</span>
{selected && (
<span
className={classNames(
'block truncate',
selected ? 'font-semibold' : 'font-normal'
'absolute inset-y-0 right-0 flex items-center pr-4',
active ? 'text-white' : 'text-indigo-600'
)}
>
{option}
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path
fillRule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clipRule="evenodd"
/>
</svg>
</span>
{selected && (
<span
className={classNames(
'absolute inset-y-0 right-0 flex items-center pr-4',
active ? 'text-white' : 'text-indigo-600'
)}
>
<svg
className="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clipRule="evenodd"
/>
</svg>
</span>
)}
</>
)}
</Combobox.Option>
)
}
}
)}
</>
)}
</Combobox.Option>
)
}}
</Combobox.Options>
) : (
<Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
Expand Down
1 change: 1 addition & 0 deletions packages/playground-vue/src/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { createApp } from 'vue'
// @ts-expect-error TODO: Properly handle this
import App from './App.vue'
import router from './router'

Expand Down

0 comments on commit c216add

Please sign in to comment.