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

Jump to bottom

fix: icon visibility and add up and down icons #15543

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
+55 −39
Open

fix: icon visibility and add up and down icons #15543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4c56467
fixed the icons visibility and added up and down icon
Sahillather002 Jun 23, 2024
8591954
Merge branch 'main' into fix/15542-dropdown-icons
keithwillcode Jun 23, 2024
0540f9f
Merge branch 'main' into fix/15542-dropdown-icons
keithwillcode Jun 24, 2024
fd5c669
wip: TimeUnitAddonSuffix
emrysal Jun 24, 2024
e9cd90a
chore: Quick pass for rerender-optimisation
emrysal Jun 25, 2024
a376a1d
Merge branch 'main' into fix/15542-dropdown-icons
emrysal Jun 25, 2024
37e0c7c
Merge branch 'main' into fix/15542-dropdown-icons
keithwillcode Jun 27, 2024
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
87 changes: 55 additions & 32 deletions packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useState } from "react";
import type { UseFormReturn } from "react-hook-form";

import { useLocale } from "@calcom/lib/hooks/useLocale";
import { TimeUnit } from "@calcom/prisma/enums";
import {
Dropdown,
DropdownItem,
Expand All @@ -12,21 +13,50 @@ import {
TextField,
} from "@calcom/ui";

import { getWorkflowTimeUnitOptions } from "../lib/getOptions";
import type { FormValues } from "../pages/workflow";

const TIME_UNITS = [TimeUnit.DAY, TimeUnit.HOUR, TimeUnit.MINUTE] as const;

type Props = {
form: UseFormReturn<FormValues>;
disabled: boolean;
};

const TimeUnitAddonSuffix = ({
DropdownItems,
timeUnitOptions,
form,
}: {
form: UseFormReturn<FormValues>;
DropdownItems: JSX.Element;
timeUnitOptions: { [x: string]: string };
}) => {
// because isDropdownOpen already triggers a render cycle we can use getValues()
// instead of watch() function
const timeUnit = form.getValues("timeUnit");
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
return (
<Dropdown onOpenChange={setIsDropdownOpen}>
<DropdownMenuTrigger asChild>
<button className="flex items-center">
<div className="mr-1 w-3/5">{timeUnit ? timeUnitOptions[timeUnit] : "undefined"}</div>
<div className="w-1/4 pt-1">
{isDropdownOpen ? <Icon name="chevron-up" /> : <Icon name="chevron-down" />}
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>{DropdownItems}</DropdownMenuContent>
</Dropdown>
);
};

export const TimeTimeUnitInput = (props: Props) => {
const { form } = props;
const { t } = useLocale();
const timeUnitOptions = getWorkflowTimeUnitOptions(t);

const [timeUnit, setTimeUnit] = useState(form.getValues("timeUnit"));

const timeUnitOptions = TIME_UNITS.reduce((acc, option) => {
acc[option] = t(`${option.toLowerCase()}_timeUnit`);
return acc;
}, {} as { [x: string]: string });
return (
<div className="flex">
<div className="grow">
Expand All @@ -39,33 +69,26 @@ export const TimeTimeUnitInput = (props: Props) => {
className="-mt-2 rounded-r-none text-sm focus:ring-0"
{...form.register("time", { valueAsNumber: true })}
addOnSuffix={
<Dropdown>
<DropdownMenuTrigger asChild>
<button className="flex items-center">
<div className="mr-1 w-3/4">
{timeUnit ? t(`${timeUnit.toLowerCase()}_timeUnit`) : "undefined"}{" "}
</div>
<div className="w-1/4 pt-1">
Copy link
Contributor

@Ryukemeister Ryukemeister Jun 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Sahillather002 you can keep the width here as w=1/4, no need to change it to 2/5

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ryukemeister i did it because icon was hiding to that width so gives larger width, or i can reduce the size of icon

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked using w=1/4 and it was looking good for me.

<Icon name="chevron-down" />
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
{timeUnitOptions.map((option, index) => (
<DropdownMenuItem key={index} className="outline-none">
<DropdownItem
key={index}
type="button"
onClick={() => {
setTimeUnit(option.value);
form.setValue("timeUnit", option.value);
}}>
{option.label}
</DropdownItem>
</DropdownMenuItem>
))}
</DropdownMenuContent>
</Dropdown>
<TimeUnitAddonSuffix
form={form}
timeUnitOptions={timeUnitOptions}
DropdownItems={
<>
{TIME_UNITS.map((timeUnit, index) => (
<DropdownMenuItem key={index} className="outline-none">
<DropdownItem
key={index}
type="button"
onClick={() => {
form.setValue("timeUnit", timeUnit);
}}>
{timeUnitOptions[timeUnit]}
</DropdownItem>
</DropdownMenuItem>
))}
</>
}
/>
}
/>
</div>
Expand Down
7 changes: 0 additions & 7 deletions packages/features/ee/workflows/lib/getOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import type { WorkflowActions } from "@calcom/prisma/enums";

import { isSMSOrWhatsappAction, isWhatsappAction, isEmailToAttendeeAction } from "./actionHelperFunctions";
import {
TIME_UNIT,
WHATSAPP_WORKFLOW_TEMPLATES,
WORKFLOW_ACTIONS,
BASIC_WORKFLOW_TEMPLATES,
Expand Down Expand Up @@ -32,12 +31,6 @@ export function getWorkflowTriggerOptions(t: TFunction) {
});
}

export function getWorkflowTimeUnitOptions(t: TFunction) {
return TIME_UNIT.map((timeUnit) => {
return { label: t(`${timeUnit.toLowerCase()}_timeUnit`), value: timeUnit };
});
}

export function getWorkflowTemplateOptions(t: TFunction, action: WorkflowActions | undefined) {
const TEMPLATES =
action && isWhatsappAction(action)
Expand Down
Loading