Skip to content

Commit 115a01d

Browse files
treodentreoden
committed
Fix: Fix ui issues
1 parent 84406ae commit 115a01d

33 files changed

Lines changed: 223 additions & 227 deletions

File tree

‎packages/evershop/src/components/admin/FileBrowser.tsx‎

Lines changed: 22 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -234,8 +234,6 @@ const FileBrowser: React.FC<{
234234
};
235235

236236
// Create a function to fetch files and folders to avoid code duplication
237-
const [apiReady, setApiReady] = React.useState(false);
238-
239237
const fetchFilesAndFolders = React.useCallback(() => {
240238
if (!browserApiRef.current) {
241239
return;
@@ -259,20 +257,6 @@ const FileBrowser: React.FC<{
259257
.finally(() => setLoading(false));
260258
}, [currentPath]);
261259

262-
// Track when the browserApiRef becomes available
263-
React.useEffect(() => {
264-
if (browserApiRef.current && browserApiRef.current !== '' && !apiReady) {
265-
setApiReady(true);
266-
}
267-
}, [browserApiRef.current, apiReady]);
268-
269-
// Fetch data when either the path changes or the API becomes ready
270-
React.useEffect(() => {
271-
if (apiReady) {
272-
fetchFilesAndFolders();
273-
}
274-
}, [apiReady, currentPath, fetchFilesAndFolders]);
275-
276260
const [result] = useQuery({
277261
query: GetApisQuery
278262
});
@@ -296,6 +280,12 @@ const FileBrowser: React.FC<{
296280
deleteApiRef.current = data.deleteApi;
297281
uploadApiRef.current = data.uploadApi;
298282
folderCreateApiRef.current = data.folderCreateApi;
283+
284+
// Fetch files and folders when APIs are ready
285+
React.useEffect(() => {
286+
fetchFilesAndFolders();
287+
}, [currentPath, fetchFilesAndFolders]);
288+
299289
return (
300290
<div className="file-browser">
301291
{loading === true && (
@@ -342,20 +332,22 @@ const FileBrowser: React.FC<{
342332
Root
343333
</a>
344334
</div>
345-
{currentPath.map((f, index) => (
346-
<div key={index}>
347-
<span>/</span>
348-
<a
349-
className="text-primary hover:underline"
350-
href="#"
351-
onClick={(e) =>
352-
onSelectFolderFromBreadcrumb(e, f.index)
353-
}
354-
>
355-
{f.name}
356-
</a>
357-
</div>
358-
))}
335+
{currentPath
336+
.filter((f) => f.name !== '')
337+
.map((f, index) => (
338+
<div key={index}>
339+
<span>/</span>
340+
<a
341+
className="text-primary hover:underline"
342+
href="#"
343+
onClick={(e) =>
344+
onSelectFolderFromBreadcrumb(e, f.index)
345+
}
346+
>
347+
{f.name}
348+
</a>
349+
</div>
350+
))}
359351
</div>
360352
</div>
361353
<ul className="mt-4 mb-4">

‎packages/evershop/src/components/admin/ImageUploader.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,11 @@ const Upload: React.FC<{
8585
const id = uniqid();
8686
return (
8787
<div className="uploader grid-item">
88-
<div className="uploader-icon text-primary">
89-
<label htmlFor={id}>
88+
<div className="uploader-icon text-primary w-full h-full">
89+
<label
90+
htmlFor={id}
91+
className="w-full h-full flex items-center justify-center cursor-pointer"
92+
>
9093
{uploading ? (
9194
<Spinner
9295
width={isSingleMode ? 40 : 25}

‎packages/evershop/src/components/admin/NavigationItem.tsx‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,39 @@ export interface NavigationItemProps {
99

1010
export function NavigationItem({ Icon, url, title }: NavigationItemProps) {
1111
const [isActive, setIsActive] = React.useState(false);
12+
1213
React.useEffect(() => {
13-
const currentUrl = window.location.href;
14-
const baseUrl = window.location.origin;
15-
const check = currentUrl.split(baseUrl + url);
16-
if (check.length === 2 && url.indexOf('products/new') === -1) {
17-
// TODO: Fix me
18-
if (url.split('/').length === 2) {
19-
if (check[1] === '' || !/^\/[a-zA-Z1-9]/.test(check[1])) {
14+
const checkActive = () => {
15+
const currentUrl = window.location.href;
16+
const currentUrlObj = new URL(currentUrl);
17+
const menuUrlObj = new URL(url);
18+
19+
const currentPath = currentUrlObj.pathname;
20+
const menuPath = menuUrlObj.pathname;
21+
22+
if (currentPath === menuPath) {
23+
setIsActive(true);
24+
return;
25+
}
26+
27+
const menuSegments = menuPath.split('/').filter(Boolean);
28+
29+
if (menuSegments.length >= 2 && currentPath.startsWith(menuPath + '/')) {
30+
const remainingPath = currentPath.substring(menuPath.length + 1);
31+
const nextSegment = remainingPath.split('/')[0];
32+
33+
const actionWords = ['new', 'create', 'add'];
34+
if (!actionWords.includes(nextSegment.toLowerCase())) {
2035
setIsActive(true);
36+
return;
2137
}
22-
} else {
23-
setIsActive(true);
2438
}
25-
}
26-
}, []);
39+
40+
setIsActive(false);
41+
};
42+
43+
checkActive();
44+
}, [url]);
2745

2846
return (
2947
<li className={isActive ? 'active nav-item' : 'nav-item'}>

‎packages/evershop/src/components/common/ExtendableTable.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ function TableContent<T = any>({
188188
emptyMessage: string;
189189
className: string;
190190
}) {
191-
const { columns, tableData, tableName } = useTableContext<T>();
191+
const { columns, tableData } = useTableContext<T>();
192192

193193
const handleSort = (key: string) => {
194194
if (!onSort) return;
@@ -218,14 +218,12 @@ function TableContent<T = any>({
218218
onClick={() => col.sortable && handleSort(col.key)}
219219
style={{ width: col.width }}
220220
>
221-
<div className="flex items-center space-x-1">
222-
<span>{col.header.label}</span>
223-
{col.sortable && currentSort?.key === col.key && (
224-
<span className="text-blue-500">
225-
{currentSort.direction === 'asc' ? '↑' : '↓'}
226-
</span>
227-
)}
228-
</div>
221+
<span>{col.header.label}</span>
222+
{col.sortable && currentSort?.key === col.key && (
223+
<span className="text-blue-500">
224+
{currentSort.direction === 'asc' ? '↑' : '↓'}
225+
</span>
226+
)}
229227
</TableHead>
230228
))}
231229
</TableRow>

‎packages/evershop/src/components/common/form/DateField.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export function DateField<T extends FieldValues = FieldValues>({
3737
className,
3838
min,
3939
max,
40+
defaultValue,
4041
...props
4142
}: DateFieldProps<T>) {
4243
const {
@@ -90,6 +91,7 @@ export function DateField<T extends FieldValues = FieldValues>({
9091
<Controller
9192
name={name}
9293
control={control}
94+
defaultValue={defaultValue as any}
9395
rules={validationRules}
9496
render={({ field }) => (
9597
<InputGroup>

‎packages/evershop/src/components/common/form/Editor.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,7 @@ const SortableRow: React.FC<{
7474
transform: transform ? `translateY(${transform.y}px)` : undefined,
7575
transition,
7676
opacity: isDragging ? 0.5 : 1,
77-
position: 'relative',
78-
zIndex: isDragging ? 1 : 0
77+
position: 'relative'
7978
} as React.CSSProperties;
8079

8180
return (

‎packages/evershop/src/components/common/form/Form.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export function Form<T extends FieldValues = FieldValues>({
7878

7979
if (result.error) {
8080
if (onError) {
81-
onError(result.error, data);
81+
onError(result.error.message, data);
8282
} else {
8383
toast.error(result.error.message || errorMessage);
8484
}
@@ -104,7 +104,6 @@ export function Form<T extends FieldValues = FieldValues>({
104104
const [canFocus, setCanFocus] = useState(true);
105105

106106
const onValidationError = () => {
107-
console.log('Validation error');
108107
setCanFocus(true);
109108
};
110109

@@ -118,7 +117,7 @@ export function Form<T extends FieldValues = FieldValues>({
118117
);
119118

120119
if (elements.length > 0) {
121-
let errorElement = elements[0];
120+
const errorElement = elements[0];
122121
errorElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
123122
errorElement.focus({ preventScroll: true });
124123
setCanFocus(false);

‎packages/evershop/src/components/common/form/InputField.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export function InputField<T extends FieldValues = FieldValues>({
6464
<Controller
6565
name={name}
6666
control={control}
67-
defaultValue={defaultValue as any}
67+
defaultValue={(defaultValue ?? '') as any}
6868
rules={validationRules}
6969
render={({ field }) => (
7070
<InputGroupInput

‎packages/evershop/src/components/common/form/SelectField.tsx‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,7 @@ interface SelectOption {
2424
disabled?: boolean;
2525
}
2626

27-
interface SelectFieldProps<T extends FieldValues = FieldValues>
28-
extends Omit<
29-
React.SelectHTMLAttributes<HTMLSelectElement>,
30-
'name' | 'size' | 'multiple'
31-
> {
27+
interface SelectFieldProps<T extends FieldValues = FieldValues> {
3228
name: FieldPath<T>;
3329
label?: string;
3430
error?: string;
@@ -38,6 +34,11 @@ interface SelectFieldProps<T extends FieldValues = FieldValues>
3834
options: SelectOption[];
3935
placeholder?: string;
4036
wrapperClassName?: string;
37+
className?: string;
38+
disabled?: boolean;
39+
defaultValue?: string | number;
40+
id?: string;
41+
onChange?: (value: string | number) => void;
4142
}
4243

4344
export function SelectField<T extends FieldValues = FieldValues>({
@@ -52,15 +53,17 @@ export function SelectField<T extends FieldValues = FieldValues>({
5253
wrapperClassName,
5354
className,
5455
defaultValue,
55-
...props
56+
disabled,
57+
id,
58+
onChange: onChangeCallback
5659
}: SelectFieldProps<T>) {
5760
const {
5861
control,
5962
formState: { errors }
6063
} = useFormContext<T>();
6164

6265
const fieldError = getNestedError(name, errors, error);
63-
const fieldId = `field-${name}`;
66+
const fieldId = id || `field-${name}`;
6467

6568
const hasDefaultValue =
6669
defaultValue !== undefined && defaultValue !== null && defaultValue !== '';
@@ -109,10 +112,15 @@ export function SelectField<T extends FieldValues = FieldValues>({
109112
defaultValue={hasDefaultValue ? defaultValue : ('' as any)}
110113
render={({ field }) => (
111114
<Select
112-
value={String(field.value ?? '')}
115+
value={options.find((o) => o.value === field.value)}
113116
onValueChange={(value) => {
114-
field.onChange(value === '' ? '' : value);
117+
const newValue = value?.value === '' ? '' : value?.value;
118+
field.onChange(newValue);
119+
if (onChangeCallback && value !== null) {
120+
onChangeCallback(value.value);
121+
}
115122
}}
123+
disabled={disabled}
116124
>
117125
<SelectTrigger
118126
id={fieldId}
@@ -123,10 +131,8 @@ export function SelectField<T extends FieldValues = FieldValues>({
123131
}
124132
>
125133
<SelectValue>
126-
{field.value
127-
? options.find((o) => String(o.value) === String(field.value))
128-
?.label
129-
: placeholder}
134+
{options.find((o) => String(o.value) === String(field.value))
135+
?.label || placeholder}
130136
</SelectValue>
131137
</SelectTrigger>
132138
<SelectContent>
@@ -138,7 +144,7 @@ export function SelectField<T extends FieldValues = FieldValues>({
138144
{options.map((option) => (
139145
<SelectItem
140146
key={option.value}
141-
value={String(option.value)}
147+
value={option}
142148
disabled={option.disabled}
143149
>
144150
{option.label}

‎packages/evershop/src/components/common/ui/Card.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { cn } from '@evershop/evershop/lib/util/cn';
22
import * as React from 'react';
33

4-
54
function Card({
65
className,
76
size = 'default',
@@ -12,7 +11,7 @@ function Card({
1211
data-slot="card"
1312
data-size={size}
1413
className={cn(
15-
'ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
14+
'ring-foreground/10 bg-card text-card-foreground gap-6 rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
1615
className
1716
)}
1817
{...props}

0 commit comments

Comments
 (0)