96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
import React, { FocusEvent } from 'react'
|
|
import { Listbox } from '@headlessui/react'
|
|
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid'
|
|
|
|
const sizes = ['1080', '2000', 'Original']
|
|
|
|
type SizeSelectorProps = {
|
|
value: string
|
|
originalWidth: number
|
|
originalHeight: number
|
|
onChange: (value: string) => void
|
|
}
|
|
|
|
export default function SizeSelector(props: SizeSelectorProps) {
|
|
const { value, originalHeight, originalWidth, onChange } = props
|
|
|
|
const getSizeShowName = (size: string) => {
|
|
if (size === 'Original') {
|
|
return `${originalWidth}x${originalHeight}(${size})`
|
|
}
|
|
const length: number = parseInt(size, 10)
|
|
const longSide: number =
|
|
originalWidth > originalHeight ? originalWidth : originalHeight
|
|
const scale = length / longSide
|
|
|
|
if (originalWidth > originalHeight) {
|
|
const newHeight = Math.ceil(scale * originalHeight)
|
|
return `${size}x${newHeight}`
|
|
}
|
|
const newWidth = Math.ceil(scale * originalWidth)
|
|
return `${newWidth}x${size}`
|
|
}
|
|
|
|
const onButtonFocus = (e: FocusEvent<any>) => {
|
|
e.currentTarget.blur()
|
|
}
|
|
|
|
return (
|
|
<div className="w-52">
|
|
<Listbox value={value} onChange={onChange}>
|
|
<div className="relative">
|
|
<Listbox.Options
|
|
style={{ top: '-122px' }}
|
|
className="absolute mb-1 w-full overflow-auto text-base bg-opacity-10 bg-black backdrop-blur rounded-md max-h-60 outline-none sm:text-sm"
|
|
>
|
|
{sizes.map(size => (
|
|
<Listbox.Option
|
|
key={size}
|
|
className={({ active }) =>
|
|
`${active ? 'bg-black bg-opacity-10' : 'text-gray-900'}
|
|
cursor-default select-none relative py-2 pl-4 pr-4`
|
|
}
|
|
value={size}
|
|
>
|
|
{({ selected, active }) => (
|
|
<>
|
|
<span
|
|
className={`${
|
|
selected ? 'font-medium' : 'font-normal'
|
|
} block truncate`}
|
|
>
|
|
{getSizeShowName(size)}
|
|
</span>
|
|
{/* {selected ? (
|
|
<span
|
|
className={`${
|
|
active ? 'text-amber-600' : 'text-amber-600'
|
|
}
|
|
absolute inset-y-0 left-0 flex items-center pl-3`}
|
|
>
|
|
<CheckIcon className="w-5 h-5" aria-hidden="true" />
|
|
</span>
|
|
) : null} */}
|
|
</>
|
|
)}
|
|
</Listbox.Option>
|
|
))}
|
|
</Listbox.Options>
|
|
<Listbox.Button
|
|
onFocus={onButtonFocus}
|
|
className="relative w-full inline-flex w-full px-4 py-2 text-sm font-medium bg-black rounded-md bg-opacity-10 focus:outline-none "
|
|
>
|
|
<span className="block truncate">{getSizeShowName(value)}</span>
|
|
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
|
<SelectorIcon
|
|
className="w-5 h-5 text-gray-400"
|
|
aria-hidden="true"
|
|
/>
|
|
</span>
|
|
</Listbox.Button>
|
|
</div>
|
|
</Listbox>
|
|
</div>
|
|
)
|
|
}
|