plane/web/components/web-view/select-estimate.tsx
Dakshesh Jain faa6a2bcbc
feat: select blocker, blocking, and parent (#2121)
* feat: update, delete link

refactor: using old fetch-key

* feat: issue activity with ability to view & add comment

feat: click on view more to view more options in the issue detail

* fix: upload image not working on mobile

* feat: select blocker, blocking, and parent

dev: auth layout for web-view, console.log callback for web-view

* style: made design consistant

* fix: displaying page only on web-view

* style: removed overflow hidden
2023-09-07 18:42:24 +05:30

84 lines
2.1 KiB
TypeScript

// react
import React, { useState } from "react";
// icons
import { ChevronDown, PlayIcon } from "lucide-react";
// hooks
import useEstimateOption from "hooks/use-estimate-option";
// components
import { WebViewModal } from "./web-view-modal";
type Props = {
value: any;
onChange: (value: any) => void;
disabled?: boolean;
};
export const EstimateSelect: React.FC<Props> = (props) => {
const { value, onChange, disabled = false } = props;
const [isOpen, setIsOpen] = useState(false);
const { estimatePoints } = useEstimateOption();
return (
<>
<WebViewModal
isOpen={isOpen}
modalTitle="Select estimate"
onClose={() => {
setIsOpen(false);
}}
>
<WebViewModal.Options
options={[
{
label: "None",
value: null,
checked: value === null,
onClick: () => {
setIsOpen(false);
if (disabled) return;
onChange(null);
},
icon: <PlayIcon className="h-4 w-4 -rotate-90" />,
},
...estimatePoints?.map((point) => ({
label: point.value,
value: point.key,
checked: point.key === value,
icon: <PlayIcon className="h-4 w-4 -rotate-90" />,
onClick: () => {
setIsOpen(false);
if (disabled) return;
onChange(point.key);
},
})),
]}
/>
</WebViewModal>
<button
type="button"
disabled={disabled}
onClick={() => setIsOpen(true)}
className={
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-100"
}
>
{value ? (
<div className="flex items-center gap-x-1.5">
<PlayIcon className="h-4 w-4 -rotate-90" />
<span>{estimatePoints?.find((e) => e.key === value)?.value}</span>
</div>
) : (
"No estimate"
)}
<ChevronDown className="w-5 h-5" />
</button>
</>
);
};