This commit is contained in:
louiscklaw
2025-05-28 21:06:12 +08:00
parent 4007227418
commit db805f23b6
61 changed files with 1279 additions and 494 deletions

View File

@@ -1,13 +1,10 @@
import { mergeClasses } from 'minimal-shared/utils';
import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';
import { mergeClasses } from 'minimal-shared/utils';
import { DownloadButton, RemoveButton } from './action-buttons';
import { fileThumbnailClasses } from './classes';
import { fileData, fileThumb, fileFormat } from './utils';
import { RemoveButton, DownloadButton } from './action-buttons';
import type { FileThumbnailProps } from './types';
import { fileData, fileFormat, fileThumb } from './utils';
// ----------------------------------------------------------------------
@@ -29,14 +26,26 @@ export function FileThumbnail({
const previewUrl = typeof file === 'string' ? file : URL.createObjectURL(file);
const format = fileFormat(path ?? previewUrl);
const isDataUrl = format.startsWith('data');
const renderItem = () => (
<ItemRoot className={mergeClasses([fileThumbnailClasses.root, className])} sx={sx} {...other}>
{format === 'image' && imageView ? (
const TestImg = () => (
<>
{!isDataUrl && format === 'image' && imageView ? (
<ItemImg src={previewUrl} className={fileThumbnailClasses.img} {...slotProps?.img} />
) : (
<ItemIcon src={fileThumb(format)} className={fileThumbnailClasses.icon} {...icon} />
)}
</>
);
const DataUrlImg = () => (
<ItemImg src={previewUrl} className={fileThumbnailClasses.img} {...slotProps?.img} />
);
const renderItem = () => (
<ItemRoot className={mergeClasses([fileThumbnailClasses.root, className])} sx={sx} {...other}>
{/* */}
{isDataUrl ? <DataUrlImg /> : <TestImg />}
{onRemove && (
<RemoveButton

View File

@@ -1,17 +1,21 @@
// src/components/hook-form/fields.tsx
//
import { RHFCode } from './rhf-code';
import { RHFRating } from './rhf-rating';
import { RHFEditor } from './rhf-editor';
import { RHFSlider } from './rhf-slider';
import { RHFUpload } from './rhf-upload';
import { RHFTextField } from './rhf-text-field';
import { RHFUploadBox } from './rhf-upload-box';
import { RHFRadioGroup } from './rhf-radio-group';
import { RHFPhoneInput } from './rhf-phone-input';
import { RHFNumberInput } from './rhf-number-input';
import { RHFAutocomplete } from './rhf-autocomplete';
import { RHFUploadAvatar } from './rhf-upload-avatar';
import { RHFCountrySelect } from './rhf-country-select';
import { RHFSwitch, RHFMultiSwitch } from './rhf-switch';
import { RHFSelect, RHFMultiSelect } from './rhf-select';
import { RHFCheckbox, RHFMultiCheckbox } from './rhf-checkbox';
import { RHFUpload, RHFUploadBox, RHFUploadAvatar } from './rhf-upload';
import { RHFDatePicker, RHFMobileDateTimePicker } from './rhf-date-picker';
// ----------------------------------------------------------------------

View File

@@ -0,0 +1,45 @@
import type { BoxProps } from '@mui/material/Box';
import { Controller, useFormContext } from 'react-hook-form';
import Box from '@mui/material/Box';
import { HelperText } from './help-text';
import { UploadAvatar } from '../upload';
import type { UploadProps } from '../upload';
// ----------------------------------------------------------------------
export type RHFUploadProps = UploadProps & {
name: string;
slotProps?: {
wrapper?: BoxProps;
};
};
export function RHFUploadAvatar({ name, slotProps, ...other }: RHFUploadProps) {
const { control, setValue } = useFormContext();
return (
<Controller
name={name}
control={control}
render={({ field, fieldState: { error } }) => {
const onDrop = (acceptedFiles: File[]) => {
const value = acceptedFiles[0];
setValue(name, value, { shouldValidate: true });
};
return (
<Box {...slotProps?.wrapper}>
<UploadAvatar value={field.value} error={!!error} onDrop={onDrop} {...other} />
<HelperText errorMessage={error?.message} sx={{ textAlign: 'center' }} />
</Box>
);
}}
/>
);
}

View File

@@ -0,0 +1,30 @@
import type { BoxProps } from '@mui/material/Box';
import { Controller, useFormContext } from 'react-hook-form';
import { UploadBox } from '../upload';
import type { UploadProps } from '../upload';
// ----------------------------------------------------------------------
export type RHFUploadProps = UploadProps & {
name: string;
slotProps?: {
wrapper?: BoxProps;
};
};
export function RHFUploadBox({ name, ...other }: RHFUploadProps) {
const { control } = useFormContext();
return (
<Controller
name={name}
control={control}
render={({ field, fieldState: { error } }) => (
<UploadBox value={field.value} error={!!error} {...other} />
)}
/>
);
}

View File

@@ -1,12 +1,6 @@
import type { BoxProps } from '@mui/material/Box';
import { Controller, useFormContext } from 'react-hook-form';
import Box from '@mui/material/Box';
import { HelperText } from './help-text';
import { Upload, UploadBox, UploadAvatar } from '../upload';
import { Upload } from '../upload';
import type { UploadProps } from '../upload';
// ----------------------------------------------------------------------
@@ -18,48 +12,6 @@ export type RHFUploadProps = UploadProps & {
};
};
export function RHFUploadAvatar({ name, slotProps, ...other }: RHFUploadProps) {
const { control, setValue } = useFormContext();
return (
<Controller
name={name}
control={control}
render={({ field, fieldState: { error } }) => {
const onDrop = (acceptedFiles: File[]) => {
const value = acceptedFiles[0];
setValue(name, value, { shouldValidate: true });
};
return (
<Box {...slotProps?.wrapper}>
<UploadAvatar value={field.value} error={!!error} onDrop={onDrop} {...other} />
<HelperText errorMessage={error?.message} sx={{ textAlign: 'center' }} />
</Box>
);
}}
/>
);
}
// ----------------------------------------------------------------------
export function RHFUploadBox({ name, ...other }: RHFUploadProps) {
const { control } = useFormContext();
return (
<Controller
name={name}
control={control}
render={({ field, fieldState: { error } }) => (
<UploadBox value={field.value} error={!!error} {...other} />
)}
/>
);
}
// ----------------------------------------------------------------------
export function RHFUpload({ name, multiple, helperText, ...other }: RHFUploadProps) {
@@ -83,6 +35,8 @@ export function RHFUpload({ name, multiple, helperText, ...other }: RHFUploadPro
setValue(name, value, { shouldValidate: true });
};
// return <>{JSON.stringify({ t: field.value })}</>;
return <Upload {...uploadProps} value={field.value} onDrop={onDrop} {...other} />;
}}
/>

View File

@@ -1,16 +1,12 @@
import type { CSSObject } from '@mui/material/styles';
import { mergeClasses } from 'minimal-shared/utils';
import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';
import ButtonBase from '@mui/material/ButtonBase';
import type { CSSObject } from '@mui/material/styles';
import { styled } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';
import { mergeClasses } from 'minimal-shared/utils';
import { Iconify } from '../../iconify';
import { createNavItem } from '../utils';
import { navItemStyles, navSectionClasses } from '../styles';
import type { NavItemProps } from '../types';
import { createNavItem } from '../utils';
// ----------------------------------------------------------------------

View File

@@ -1,14 +1,12 @@
import { useBoolean } from 'minimal-shared/hooks';
import { useRef, useEffect, useCallback } from 'react';
import { isActiveLink, isExternalLink } from 'minimal-shared/utils';
import { useCallback, useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { usePathname } from 'src/routes/hooks';
import { NavItem } from './nav-item';
import { NavCollapse, NavLi, NavUl } from '../components';
import { navSectionClasses } from '../styles';
import { NavUl, NavLi, NavCollapse } from '../components';
import type { NavListProps, NavSubListProps } from '../types';
import { NavItem } from './nav-item';
// ----------------------------------------------------------------------
@@ -40,6 +38,7 @@ export function NavList({
}
}, [data.children, onToggle]);
const { t } = useTranslation();
const renderNavItem = () => (
<NavItem
ref={navItemRef}
@@ -47,7 +46,7 @@ export function NavList({
path={data.path}
icon={data.icon}
info={data.info}
title={data.title}
title={t(data.title)}
caption={data.caption}
// state
open={open}

View File

@@ -1,14 +1,11 @@
import { useBoolean } from 'minimal-shared/hooks';
import { mergeClasses } from 'minimal-shared/utils';
import Collapse from '@mui/material/Collapse';
import { useTheme } from '@mui/material/styles';
import { NavList } from './nav-list';
import { Nav, NavUl, NavLi, NavSubheader } from '../components';
import { useBoolean } from 'minimal-shared/hooks';
import { mergeClasses } from 'minimal-shared/utils';
import { Nav, NavLi, NavSubheader, NavUl } from '../components';
import { navSectionClasses, navSectionCssVars } from '../styles';
import type { NavGroupProps, NavSectionProps } from '../types';
import { NavList } from './nav-list';
// ----------------------------------------------------------------------
@@ -90,7 +87,6 @@ function Group({
>
{subheader}
</NavSubheader>
<Collapse in={groupOpen.value}>{renderContent()}</Collapse>
</>
) : (

View File

@@ -59,6 +59,7 @@ export function Upload({
{onUpload && (
<Button
type="button"
size="small"
variant="contained"
onClick={onUpload}