fix: select issue on EditCourseGeneral

This commit is contained in:
swve 2025-07-14 17:07:15 +02:00
parent 634b25be6b
commit aabb4d190c
4 changed files with 227 additions and 69 deletions

View file

@ -0,0 +1,158 @@
import React, { useState, useRef, useEffect } from 'react';
import { ChevronDown } from 'lucide-react';
interface CustomSelectProps {
value: string;
onValueChange: (value: string) => void;
placeholder?: string;
className?: string;
children: React.ReactNode;
}
interface CustomSelectItemProps {
value: string;
children: React.ReactNode;
className?: string;
}
interface CustomSelectTriggerProps {
children: React.ReactNode;
className?: string;
}
interface CustomSelectContentProps {
children: React.ReactNode;
className?: string;
}
const CustomSelectContext = React.createContext<{
isOpen: boolean;
setIsOpen: (open: boolean) => void;
selectedValue: string;
setSelectedValue: (value: string) => void;
onValueChange: (value: string) => void;
} | null>(null);
export const CustomSelect: React.FC<CustomSelectProps> = ({
value,
onValueChange,
placeholder,
className = '',
children
}) => {
const [isOpen, setIsOpen] = useState(false);
const [selectedValue, setSelectedValue] = useState(value);
useEffect(() => {
setSelectedValue(value);
}, [value]);
const handleValueChange = (newValue: string) => {
setSelectedValue(newValue);
onValueChange(newValue);
setIsOpen(false);
};
return (
<CustomSelectContext.Provider
value={{
isOpen,
setIsOpen,
selectedValue,
setSelectedValue,
onValueChange: handleValueChange
}}
>
<div className={`relative ${className}`}>
{children}
</div>
</CustomSelectContext.Provider>
);
};
export const CustomSelectTrigger: React.FC<CustomSelectTriggerProps> = ({
children,
className = ''
}) => {
const context = React.useContext(CustomSelectContext);
if (!context) {
throw new Error('CustomSelectTrigger must be used within CustomSelect');
}
const { isOpen, setIsOpen } = context;
return (
<button
type="button"
className={`flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 ${className}`}
onClick={() => setIsOpen(!isOpen)}
>
{children}
<ChevronDown className={`h-4 w-4 opacity-50 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
</button>
);
};
export const CustomSelectContent: React.FC<CustomSelectContentProps> = ({
children,
className = ''
}) => {
const context = React.useContext(CustomSelectContext);
if (!context) {
throw new Error('CustomSelectContent must be used within CustomSelect');
}
const { isOpen } = context;
if (!isOpen) return null;
return (
<div className={`absolute z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 ${className}`}>
<div className="p-1">
{children}
</div>
</div>
);
};
export const CustomSelectItem: React.FC<CustomSelectItemProps> = ({
value,
children,
className = ''
}) => {
const context = React.useContext(CustomSelectContext);
if (!context) {
throw new Error('CustomSelectItem must be used within CustomSelect');
}
const { selectedValue, onValueChange } = context;
return (
<div
className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground ${className}`}
onClick={() => onValueChange(value)}
>
{children}
{selectedValue === value && (
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
</span>
)}
</div>
);
};
export const CustomSelectValue: React.FC<{ children?: React.ReactNode }> = ({
children
}) => {
const context = React.useContext(CustomSelectContext);
if (!context) {
throw new Error('CustomSelectValue must be used within CustomSelect');
}
const { selectedValue } = context;
return <span>{children || selectedValue}</span>;
};

View file

@ -13,12 +13,12 @@ import { useCourse, useCourseDispatch } from '@components/Contexts/CourseContext
import FormTagInput from '@components/Objects/StyledElements/Form/TagInput';
import LearningItemsList from './LearningItemsList';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@components/ui/select";
CustomSelect,
CustomSelectContent,
CustomSelectItem,
CustomSelectTrigger,
CustomSelectValue,
} from "./CustomSelect";
type EditCourseStructureProps = {
orgslug: string
@ -245,26 +245,26 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
<FormField name="thumbnail_type">
<FormLabelAndMessage label="Thumbnail Type" />
<Form.Control asChild>
<Select
<CustomSelect
value={formik.values.thumbnail_type}
onValueChange={(value) => {
if (!value) return;
formik.setFieldValue('thumbnail_type', value);
}}
>
<SelectTrigger className="w-full bg-white">
<SelectValue>
<CustomSelectTrigger className="w-full bg-white">
<CustomSelectValue>
{formik.values.thumbnail_type === 'image' ? 'Image' :
formik.values.thumbnail_type === 'video' ? 'Video' :
formik.values.thumbnail_type === 'both' ? 'Both' : 'Image'}
</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="image">Image</SelectItem>
<SelectItem value="video">Video</SelectItem>
<SelectItem value="both">Both</SelectItem>
</SelectContent>
</Select>
</CustomSelectValue>
</CustomSelectTrigger>
<CustomSelectContent>
<CustomSelectItem value="image">Image</CustomSelectItem>
<CustomSelectItem value="video">Video</CustomSelectItem>
<CustomSelectItem value="both">Both</CustomSelectItem>
</CustomSelectContent>
</CustomSelect>
</Form.Control>
</FormField>

View file

@ -65,7 +65,7 @@
"katex": "^0.16.21",
"lowlight": "^3.3.0",
"lucide-react": "^0.453.0",
"next": "15.3.3",
"next": "15.3.5",
"next-auth": "^4.24.11",
"nextjs-toploader": "^1.6.12",
"plyr": "^3.7.8",

102
apps/web/pnpm-lock.yaml generated
View file

@ -175,14 +175,14 @@ importers:
specifier: ^0.453.0
version: 0.453.0(react@19.0.0)
next:
specifier: 15.3.3
version: 15.3.3(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
specifier: 15.3.5
version: 15.3.5(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
next-auth:
specifier: ^4.24.11
version: 4.24.11(next@15.3.3(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
version: 4.24.11(next@15.3.5(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
nextjs-toploader:
specifier: ^1.6.12
version: 1.6.12(next@15.3.3(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
version: 1.6.12(next@15.3.5(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
plyr:
specifier: ^3.7.8
version: 3.7.8
@ -636,56 +636,56 @@ packages:
'@napi-rs/wasm-runtime@0.2.8':
resolution: {integrity: sha512-OBlgKdX7gin7OIq4fadsjpg+cp2ZphvAIKucHsNfTdJiqdOmOEwQd/bHi0VwNrcw5xpBJyUw6cK/QilCqy1BSg==}
'@next/env@15.3.3':
resolution: {integrity: sha512-OdiMrzCl2Xi0VTjiQQUK0Xh7bJHnOuET2s+3V+Y40WJBAXrJeGA3f+I8MZJ/YQ3mVGi5XGR1L66oFlgqXhQ4Vw==}
'@next/env@15.3.5':
resolution: {integrity: sha512-7g06v8BUVtN2njAX/r8gheoVffhiKFVt4nx74Tt6G4Hqw9HCLYQVx/GkH2qHvPtAHZaUNZ0VXAa0pQP6v1wk7g==}
'@next/eslint-plugin-next@15.2.1':
resolution: {integrity: sha512-6ppeToFd02z38SllzWxayLxjjNfzvc7Wm07gQOKSLjyASvKcXjNStZrLXMHuaWkhjqxe+cnhb2uzfWXm1VEj/Q==}
'@next/swc-darwin-arm64@15.3.3':
resolution: {integrity: sha512-WRJERLuH+O3oYB4yZNVahSVFmtxRNjNF1I1c34tYMoJb0Pve+7/RaLAJJizyYiFhjYNGHRAE1Ri2Fd23zgDqhg==}
'@next/swc-darwin-arm64@15.3.5':
resolution: {integrity: sha512-lM/8tilIsqBq+2nq9kbTW19vfwFve0NR7MxfkuSUbRSgXlMQoJYg+31+++XwKVSXk4uT23G2eF/7BRIKdn8t8w==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
'@next/swc-darwin-x64@15.3.3':
resolution: {integrity: sha512-XHdzH/yBc55lu78k/XwtuFR/ZXUTcflpRXcsu0nKmF45U96jt1tsOZhVrn5YH+paw66zOANpOnFQ9i6/j+UYvw==}
'@next/swc-darwin-x64@15.3.5':
resolution: {integrity: sha512-WhwegPQJ5IfoUNZUVsI9TRAlKpjGVK0tpJTL6KeiC4cux9774NYE9Wu/iCfIkL/5J8rPAkqZpG7n+EfiAfidXA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
'@next/swc-linux-arm64-gnu@15.3.3':
resolution: {integrity: sha512-VZ3sYL2LXB8znNGcjhocikEkag/8xiLgnvQts41tq6i+wql63SMS1Q6N8RVXHw5pEUjiof+II3HkDd7GFcgkzw==}
'@next/swc-linux-arm64-gnu@15.3.5':
resolution: {integrity: sha512-LVD6uMOZ7XePg3KWYdGuzuvVboxujGjbcuP2jsPAN3MnLdLoZUXKRc6ixxfs03RH7qBdEHCZjyLP/jBdCJVRJQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@next/swc-linux-arm64-musl@15.3.3':
resolution: {integrity: sha512-h6Y1fLU4RWAp1HPNJWDYBQ+e3G7sLckyBXhmH9ajn8l/RSMnhbuPBV/fXmy3muMcVwoJdHL+UtzRzs0nXOf9SA==}
'@next/swc-linux-arm64-musl@15.3.5':
resolution: {integrity: sha512-k8aVScYZ++BnS2P69ClK7v4nOu702jcF9AIHKu6llhHEtBSmM2zkPGl9yoqbSU/657IIIb0QHpdxEr0iW9z53A==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@next/swc-linux-x64-gnu@15.3.3':
resolution: {integrity: sha512-jJ8HRiF3N8Zw6hGlytCj5BiHyG/K+fnTKVDEKvUCyiQ/0r5tgwO7OgaRiOjjRoIx2vwLR+Rz8hQoPrnmFbJdfw==}
'@next/swc-linux-x64-gnu@15.3.5':
resolution: {integrity: sha512-2xYU0DI9DGN/bAHzVwADid22ba5d/xrbrQlr2U+/Q5WkFUzeL0TDR963BdrtLS/4bMmKZGptLeg6282H/S2i8A==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@next/swc-linux-x64-musl@15.3.3':
resolution: {integrity: sha512-HrUcTr4N+RgiiGn3jjeT6Oo208UT/7BuTr7K0mdKRBtTbT4v9zJqCDKO97DUqqoBK1qyzP1RwvrWTvU6EPh/Cw==}
'@next/swc-linux-x64-musl@15.3.5':
resolution: {integrity: sha512-TRYIqAGf1KCbuAB0gjhdn5Ytd8fV+wJSM2Nh2is/xEqR8PZHxfQuaiNhoF50XfY90sNpaRMaGhF6E+qjV1b9Tg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@next/swc-win32-arm64-msvc@15.3.3':
resolution: {integrity: sha512-SxorONgi6K7ZUysMtRF3mIeHC5aA3IQLmKFQzU0OuhuUYwpOBc1ypaLJLP5Bf3M9k53KUUUj4vTPwzGvl/NwlQ==}
'@next/swc-win32-arm64-msvc@15.3.5':
resolution: {integrity: sha512-h04/7iMEUSMY6fDGCvdanKqlO1qYvzNxntZlCzfE8i5P0uqzVQWQquU1TIhlz0VqGQGXLrFDuTJVONpqGqjGKQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
'@next/swc-win32-x64-msvc@15.3.3':
resolution: {integrity: sha512-4QZG6F8enl9/S2+yIiOiju0iCTFd93d8VC1q9LZS4p/Xuk81W2QDjCFeoogmrWWkAD59z8ZxepBQap2dKS5ruw==}
'@next/swc-win32-x64-msvc@15.3.5':
resolution: {integrity: sha512-5fhH6fccXxnX2KhllnGhkYMndhOiLOLEiVGYjP2nizqeGWkN10sA9taATlXwake2E2XMvYZjjz0Uj7T0y+z1yw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
@ -3013,8 +3013,8 @@ packages:
nodemailer:
optional: true
next@15.3.3:
resolution: {integrity: sha512-JqNj29hHNmCLtNvd090SyRbXJiivQ+58XjCcrC50Crb5g5u2zi7Y2YivbsEfzk6AtVI80akdOQbaMZwWB1Hthw==}
next@15.3.5:
resolution: {integrity: sha512-RkazLBMMDJSJ4XZQ81kolSpwiCt907l0xcgcpF4xC2Vml6QVcPNXW0NQRwQ80FFtSn7UM52XN0anaw8TEJXaiw==}
engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
hasBin: true
peerDependencies:
@ -3587,8 +3587,8 @@ packages:
tailwind-merge@2.6.0:
resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
tailwind-merge@3.3.0:
resolution: {integrity: sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==}
tailwind-merge@3.3.1:
resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
tailwindcss-animate@1.0.7:
resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
@ -4075,34 +4075,34 @@ snapshots:
'@tybys/wasm-util': 0.9.0
optional: true
'@next/env@15.3.3': {}
'@next/env@15.3.5': {}
'@next/eslint-plugin-next@15.2.1':
dependencies:
fast-glob: 3.3.1
'@next/swc-darwin-arm64@15.3.3':
'@next/swc-darwin-arm64@15.3.5':
optional: true
'@next/swc-darwin-x64@15.3.3':
'@next/swc-darwin-x64@15.3.5':
optional: true
'@next/swc-linux-arm64-gnu@15.3.3':
'@next/swc-linux-arm64-gnu@15.3.5':
optional: true
'@next/swc-linux-arm64-musl@15.3.3':
'@next/swc-linux-arm64-musl@15.3.5':
optional: true
'@next/swc-linux-x64-gnu@15.3.3':
'@next/swc-linux-x64-gnu@15.3.5':
optional: true
'@next/swc-linux-x64-musl@15.3.3':
'@next/swc-linux-x64-musl@15.3.5':
optional: true
'@next/swc-win32-arm64-msvc@15.3.3':
'@next/swc-win32-arm64-msvc@15.3.5':
optional: true
'@next/swc-win32-x64-msvc@15.3.3':
'@next/swc-win32-x64-msvc@15.3.5':
optional: true
'@nodelib/fs.scandir@2.1.5':
@ -5742,7 +5742,7 @@ snapshots:
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
react-easy-sort: 1.6.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
tailwind-merge: 3.3.0
tailwind-merge: 3.3.1
transitivePeerDependencies:
- '@types/react'
- '@types/react-dom'
@ -6556,13 +6556,13 @@ snapshots:
natural-compare@1.4.0: {}
next-auth@4.24.11(next@15.3.3(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
next-auth@4.24.11(next@15.3.5(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies:
'@babel/runtime': 7.27.0
'@panva/hkdf': 1.2.1
cookie: 0.7.2
jose: 4.15.9
next: 15.3.3(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
next: 15.3.5(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
oauth: 0.9.15
openid-client: 5.7.1
preact: 10.26.5
@ -6571,9 +6571,9 @@ snapshots:
react-dom: 19.0.0(react@19.0.0)
uuid: 8.3.2
next@15.3.3(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
next@15.3.5(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies:
'@next/env': 15.3.3
'@next/env': 15.3.5
'@swc/counter': 0.1.3
'@swc/helpers': 0.5.15
busboy: 1.6.0
@ -6583,23 +6583,23 @@ snapshots:
react-dom: 19.0.0(react@19.0.0)
styled-jsx: 5.1.6(react@19.0.0)
optionalDependencies:
'@next/swc-darwin-arm64': 15.3.3
'@next/swc-darwin-x64': 15.3.3
'@next/swc-linux-arm64-gnu': 15.3.3
'@next/swc-linux-arm64-musl': 15.3.3
'@next/swc-linux-x64-gnu': 15.3.3
'@next/swc-linux-x64-musl': 15.3.3
'@next/swc-win32-arm64-msvc': 15.3.3
'@next/swc-win32-x64-msvc': 15.3.3
'@next/swc-darwin-arm64': 15.3.5
'@next/swc-darwin-x64': 15.3.5
'@next/swc-linux-arm64-gnu': 15.3.5
'@next/swc-linux-arm64-musl': 15.3.5
'@next/swc-linux-x64-gnu': 15.3.5
'@next/swc-linux-x64-musl': 15.3.5
'@next/swc-win32-arm64-msvc': 15.3.5
'@next/swc-win32-x64-msvc': 15.3.5
'@opentelemetry/api': 1.9.0
sharp: 0.34.1
transitivePeerDependencies:
- '@babel/core'
- babel-plugin-macros
nextjs-toploader@1.6.12(next@15.3.3(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
nextjs-toploader@1.6.12(next@15.3.5(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies:
next: 15.3.3(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
next: 15.3.5(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
nprogress: 0.2.0
prop-types: 15.8.1
react: 19.0.0
@ -7282,7 +7282,7 @@ snapshots:
tailwind-merge@2.6.0: {}
tailwind-merge@3.3.0: {}
tailwind-merge@3.3.1: {}
tailwindcss-animate@1.0.7(tailwindcss@4.1.3):
dependencies: