thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: kanban card date select dropdown fix

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-08-16 14:11:07 +05:30
parent 550473bb02
commit 1c5d1542e8
4 changed files with 28 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/app/components/core/views/board-view/single-issue.tsx
View File

@ -88,6 +88,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
const [contextMenu, setContextMenu] = useState(false);
const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
const [isMenuActive, setIsMenuActive] = useState(false);
const [isDropdownActive, setIsDropdownActive] = useState(false);
const actionSectionRef = useRef<HTMLDivElement | null>(null);
@ -304,7 +305,11 @@ export const SingleBoardIssue: React.FC<Props> = ({
<h5 className="text-sm break-words line-clamp-2">{issue.name}</h5>
</a>
</Link>
<div className="mt-2.5 flex overflow-x-scroll items-center gap-2 text-xs">
<div
className={`mt-2.5 flex items-center gap-2 text-xs ${
isDropdownActive ? "" : "overflow-x-scroll"
}`}
>
{properties.priority && (
<ViewPrioritySelect
issue={issue}
@ -327,6 +332,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
<ViewStartDateSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
handleOnOpen={() => setIsDropdownActive(true)}
handleOnClose={() => setIsDropdownActive(false)}
user={user}
isNotAllowed={isNotAllowed}
/>
@ -335,6 +342,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
<ViewDueDateSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
handleOnOpen={() => setIsDropdownActive(true)}
handleOnClose={() => setIsDropdownActive(false)}
user={user}
isNotAllowed={isNotAllowed}
/>

6
apps/app/components/issues/view-select/due-date.tsx
View File

@ -13,6 +13,8 @@ import useIssuesView from "hooks/use-issues-view";
type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
handleOnOpen?: () => void;
handleOnClose?: () => void;
tooltipPosition?: "top" | "bottom";
noBorder?: boolean;
user: ICurrentUserResponse | undefined;
@ -22,6 +24,8 @@ type Props = {
export const ViewDueDateSelect: React.FC<Props> = ({
issue,
partialUpdateIssue,
handleOnOpen,
handleOnClose,
tooltipPosition = "top",
noBorder = false,
user,
@ -80,6 +84,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
}`}
minDate={minDate ?? undefined}
noBorder={noBorder}
handleOnOpen={handleOnOpen}
handleOnClose={handleOnClose}
disabled={isNotAllowed}
/>
</div>

6
apps/app/components/issues/view-select/start-date.tsx
View File

@ -13,6 +13,8 @@ import useIssuesView from "hooks/use-issues-view";
type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
handleOnOpen?: () => void;
handleOnClose?: () => void;
tooltipPosition?: "top" | "bottom";
noBorder?: boolean;
user: ICurrentUserResponse | undefined;
@ -22,6 +24,8 @@ type Props = {
export const ViewStartDateSelect: React.FC<Props> = ({
issue,
partialUpdateIssue,
handleOnOpen,
handleOnClose,
tooltipPosition = "top",
noBorder = false,
user,
@ -72,6 +76,8 @@ export const ViewStartDateSelect: React.FC<Props> = ({
}`}
maxDate={maxDate ?? undefined}
noBorder={noBorder}
handleOnOpen={handleOnOpen}
handleOnClose={handleOnClose}
disabled={isNotAllowed}
/>
</div>

6
apps/app/components/ui/datepicker.tsx
View File

@ -8,6 +8,8 @@ type Props = {
renderAs?: "input" | "button";
value: Date | string | null | undefined;
onChange: (val: string | null) => void;
handleOnOpen?: () => void;
handleOnClose?: () => void;
placeholder?: string;
displayShortForm?: boolean;
error?: boolean;
@ -23,6 +25,8 @@ export const CustomDatePicker: React.FC<Props> = ({
renderAs = "button",
value,
onChange,
handleOnOpen,
handleOnClose,
placeholder = "Select date",
displayShortForm = false,
error = false,
@ -40,6 +44,8 @@ export const CustomDatePicker: React.FC<Props> = ({
if (!val) onChange(null);
else onChange(renderDateFormat(val));
}}
onCalendarOpen={handleOnOpen}
onCalendarClose={handleOnClose}
className={`${
renderAs === "input"
? "block px-2 py-2 text-sm focus:outline-none"