update
This commit is contained in:
@@ -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
|
||||
|
@@ -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';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
@@ -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>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
@@ -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} />
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
@@ -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} />;
|
||||
}}
|
||||
/>
|
||||
|
@@ -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';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
|
@@ -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}
|
||||
|
@@ -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>
|
||||
</>
|
||||
) : (
|
||||
|
@@ -59,6 +59,7 @@ export function Upload({
|
||||
|
||||
{onUpload && (
|
||||
<Button
|
||||
type="button"
|
||||
size="small"
|
||||
variant="contained"
|
||||
onClick={onUpload}
|
||||
|
Reference in New Issue
Block a user