Edit location dialog select (#7833)

* Upgrade react-select

* figma 1-1

* Style X

* Fixes timezone select

* Add location select styles

* remove menu is open test
This commit is contained in:
sean-brydon 2023-03-21 02:46:22 +08:00 committed by GitHub
parent 1cd96d4c25
commit 7967a65ade
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 141 deletions

View File

@ -3,8 +3,7 @@ import { components } from "react-select";
import type { EventLocationType } from "@calcom/app-store/locations";
import { classNames } from "@calcom/lib";
import Select from "@components/ui/form/Select";
import { Select } from "@calcom/ui";
export type LocationOption = {
label: string;
@ -17,21 +16,11 @@ export type SingleValueLocationOption = SingleValue<LocationOption>;
export type GroupOptionType = GroupBase<LocationOption>;
const OptionWithIcon = ({
icon,
isSelected,
label,
}: {
icon?: string;
isSelected?: boolean;
label: string;
}) => {
const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
return (
<div className="flex items-center gap-3">
{icon && <img src={icon} alt="cover" className="h-3.5 w-3.5" />}
<span className={classNames("text-sm font-medium", isSelected ? "text-white" : "text-gray-900")}>
{label}
</span>
<span className={classNames("text-sm font-medium")}>{label}</span>
</div>
);
};
@ -44,7 +33,7 @@ export default function LocationSelect(props: Props<LocationOption, false, Group
components={{
Option: (props) => (
<components.Option {...props}>
<OptionWithIcon icon={props.data.icon} label={props.data.label} isSelected={props.isSelected} />
<OptionWithIcon icon={props.data.icon} label={props.data.label} />
</components.Option>
),
SingleValue: (props) => (

View File

@ -84,6 +84,8 @@ export const Select = <
"dark:bg-darkgray-100 rounded-md bg-white text-sm leading-4 dark:text-white mt-1 border border-gray-200 dark:border-darkgray-200 ",
props.classNames?.menu
),
groupHeading: () =>
"leading-none text-xs uppercase text-gray-600 dark:text-darkgray-600 pl-2.5 pt-4 pb-2",
menuList: () => classNames("scroll-bar scrollbar-track-w-20 rounded-md", props.classNames?.menuList),
indicatorsContainer: (state) =>
classNames(

View File

@ -3,42 +3,27 @@
"pipeline": {
"@calcom/prisma#build": {
"cache": false,
"dependsOn": [
"post-install"
]
"dependsOn": ["post-install"]
},
"@calcom/prisma#db-migrate": {
"cache": false,
"dependsOn": [
"@calcom/prisma#db-up"
],
"inputs": [
"./schema.prisma",
"./migrations/**/*.sql"
]
"dependsOn": ["@calcom/prisma#db-up"],
"inputs": ["./schema.prisma", "./migrations/**/*.sql"]
},
"@calcom/prisma#db-seed": {
"cache": false,
"dependsOn": [
"@calcom/prisma#db-migrate"
]
"dependsOn": ["@calcom/prisma#db-migrate"]
},
"@calcom/prisma#db-up": {
"cache": false
},
"@calcom/prisma#dx": {
"cache": false,
"dependsOn": [
"@calcom/prisma#db-migrate"
]
"dependsOn": ["@calcom/prisma#db-migrate"]
},
"@calcom/web#build": {
"dependsOn": [
"^build"
],
"outputs": [
".next/**"
],
"dependsOn": ["^build"],
"outputs": [".next/**"],
"env": [
"NEXT_PUBLIC_IS_E2E",
"NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE_MONTHLY",
@ -53,21 +38,15 @@
},
"@calcom/web#dx": {
"cache": false,
"dependsOn": [
"@calcom/prisma#dx"
]
"dependsOn": ["@calcom/prisma#dx"]
},
"@calcom/web#start": {
"cache": false,
"dependsOn": []
},
"@calcom/website#build": {
"dependsOn": [
"^build"
],
"outputs": [
".next/**"
],
"dependsOn": ["^build"],
"outputs": [".next/**"],
"env": [
"CSP_POLICY",
"DATOCMS_API_TOKEN",
@ -89,40 +68,24 @@
]
},
"build": {
"dependsOn": [
"^build"
],
"outputs": [
"dist/**",
".next/**"
]
"dependsOn": ["^build"],
"outputs": ["dist/**", ".next/**"]
},
"db-deploy": {
"cache": false,
"inputs": [
"./migrations/**/*.sql",
"./prisma/migrations/**/*.sql"
]
"inputs": ["./migrations/**/*.sql", "./prisma/migrations/**/*.sql"]
},
"db-seed": {},
"deploy": {
"cache": false,
"dependsOn": [
"@calcom/web#build"
]
"dependsOn": ["@calcom/web#build"]
},
"clean": {
"cache": false,
"outputs": [
"dist/**",
"build/**"
]
"outputs": ["dist/**", "build/**"]
},
"dev": {
"dependsOn": [
"//#env-check:common",
"//#env-check:app-store"
],
"dependsOn": ["//#env-check:common", "//#env-check:app-store"],
"cache": false
},
"dx": {
@ -136,86 +99,48 @@
},
"lint:report": {
"cache": false,
"outputs": [
"lint-results"
]
"outputs": ["lint-results"]
},
"post-install": {
"dependsOn": [],
"outputs": [
"../../node_modules/@prisma/client/**",
"../../node_modules/@prisma/admin-client/**"
],
"inputs": [
"./schema.prisma",
"./prisma/schema.prisma"
],
"env": [
"PRISMA_GENERATE_DATAPROXY"
]
"outputs": ["../../node_modules/@prisma/client/**", "../../node_modules/@prisma/admin-client/**"],
"inputs": ["./schema.prisma", "./prisma/schema.prisma"],
"env": ["PRISMA_GENERATE_DATAPROXY"]
},
"@calcom/prisma#post-install": {
"cache": false,
"outputs": [
"dist/**",
"build/**"
]
"outputs": ["dist/**", "build/**"]
},
"start": {
"outputs": [
"dist/**",
"build/**"
]
"outputs": ["dist/**", "build/**"]
},
"embed-tests": {
"cache": false,
"outputs": [
"dist/**",
"build/**"
]
"outputs": ["dist/**", "build/**"]
},
"embed-tests-quick": {
"cache": false,
"outputs": [
"dist/**",
"build/**"
]
"outputs": ["dist/**", "build/**"]
},
"type-check": {
"cache": false
},
"@calcom/prisma#db-reset": {
"cache": false,
"outputs": [
"dist/**",
"build/**"
]
"outputs": ["dist/**", "build/**"]
},
"@calcom/app-store-cli#build": {
"cache": false,
"inputs": [
"../../app-store/**/**"
],
"outputs": [
"../../app-store/apps.server.generated.ts",
"../../app-store/apps.browser.generated.tsx"
]
"inputs": ["../../app-store/**/**"],
"outputs": ["../../app-store/apps.server.generated.ts", "../../app-store/apps.browser.generated.tsx"]
},
"@calcom/embed-react#type-check": {
"dependsOn": [
"@calcom/embed-core#build",
"@calcom/embed-snippet#build"
],
"outputs": [
"dist/**",
"build/**"
]
"dependsOn": ["@calcom/embed-core#build", "@calcom/embed-snippet#build"],
"outputs": ["dist/**", "build/**"]
},
"@calcom/embed-core#build": {
"cache": false,
"outputs": [
"../../../apps/web/public/embed/**"
]
"outputs": ["../../../apps/web/public/embed/**"]
},
"embed-tests-update-snapshots:ci": {
"cache": false,
@ -225,38 +150,23 @@
"^build",
"^embed-tests-update-snapshots:ci"
],
"outputs": [
"dist/**",
"build/**"
]
"outputs": ["dist/**", "build/**"]
},
"//#env-check:common": {
"cache": false,
"inputs": [
"./.env.example",
"./.env"
],
"outputs": [
"./.env"
]
"inputs": ["./.env.example", "./.env"],
"outputs": ["./.env"]
},
"//#env-check:app-store": {
"cache": false,
"inputs": [
"./.env.appStore.example",
"./.env.appStore"
],
"outputs": [
"./.env.appStore"
]
"inputs": ["./.env.appStore.example", "./.env.appStore"],
"outputs": ["./.env.appStore"]
},
"//#test": {
"cache": false
}
},
"globalDependencies": [
"yarn.lock"
],
"globalDependencies": ["yarn.lock"],
"globalEnv": [
"ALCHEMY_API_KEY",
"ANALYZE",