R: React.PropsWithChildren

This commit is contained in:
Ivan 2024-09-19 17:48:48 +03:00
parent 08634e396e
commit 02b07d2874
19 changed files with 40 additions and 70 deletions

View File

@ -23,7 +23,7 @@ const logError = (error: Error, info: { componentStack?: string | null | undefin
};
// prettier-ignore
function GlobalProviders({ children }: { children: React.ReactNode }) {
function GlobalProviders({ children }: React.PropsWithChildren) {
return (
<ErrorBoundary
FallbackComponent={ErrorFallback}

View File

@ -156,7 +156,6 @@ interface IconSVGProps {
size?: string;
className?: string;
props?: React.SVGProps<SVGSVGElement>;
children: React.ReactNode;
}
export interface IconProps {
@ -164,7 +163,7 @@ export interface IconProps {
className?: string;
}
function MetaIconSVG({ viewBox, size = '1.5rem', className, props, children }: IconSVGProps) {
function MetaIconSVG({ viewBox, size = '1.5rem', className, props, children }: React.PropsWithChildren<IconSVGProps>) {
return (
<svg
width={size}

View File

@ -14,15 +14,19 @@ interface DropdownProps extends CProps.Styling {
/** Indicates whether the dropdown is open. */
isOpen: boolean;
/** Children to render inside the component. */
children: React.ReactNode;
}
/**
* Dropdown animated component that displays a list of children with optional positioning and visibility control.
*/
function Dropdown({ isOpen, stretchLeft, stretchTop, className, children, ...restProps }: DropdownProps) {
function Dropdown({
isOpen,
stretchLeft,
stretchTop,
className,
children,
...restProps
}: React.PropsWithChildren<DropdownProps>) {
return (
<div className='relative'>
<motion.div

View File

@ -27,8 +27,6 @@ export interface ModalProps extends CProps.Styling {
beforeSubmit?: () => boolean;
onSubmit?: () => void;
onCancel?: () => void;
children: React.ReactNode;
}
function Modal({
@ -45,7 +43,7 @@ function Modal({
overflowVisible,
submitText = 'Продолжить',
...restProps
}: ModalProps) {
}: React.PropsWithChildren<ModalProps>) {
const ref = useRef(null);
useEscapeKey(hideWindow);

View File

@ -4,12 +4,17 @@ import { CProps } from '../props';
interface OverlayProps extends CProps.Styling {
id?: string;
children: React.ReactNode;
position?: string;
layer?: string;
}
function Overlay({ children, className, position = 'top-0 right-0', layer = 'z-pop', ...restProps }: OverlayProps) {
function Overlay({
children,
className,
position = 'top-0 right-0',
layer = 'z-pop',
...restProps
}: React.PropsWithChildren<OverlayProps>) {
return (
<div className='relative'>
<div className={clsx('absolute', className, position, layer)} {...restProps}>

View File

@ -11,11 +11,17 @@ interface DataLoaderProps extends CProps.AnimatedDiv {
isLoading?: boolean;
error?: ErrorData;
hasNoData?: boolean;
children: React.ReactNode;
}
function DataLoader({ id, isLoading, hasNoData, error, className, children, ...restProps }: DataLoaderProps) {
function DataLoader({
id,
isLoading,
hasNoData,
error,
className,
children,
...restProps
}: React.PropsWithChildren<DataLoaderProps>) {
return (
<AnimatePresence mode='wait'>
{!isLoading && !error && !hasNoData ? (

View File

@ -8,11 +8,7 @@ import Loader from '../ui/Loader';
import TextURL from '../ui/TextURL';
import AnimateFade from './AnimateFade';
interface RequireAuthProps {
children: React.ReactNode;
}
function RequireAuth({ children }: RequireAuthProps) {
function RequireAuth({ children }: React.PropsWithChildren) {
const { user, loading } = useAuth();
return (

View File

@ -19,12 +19,7 @@ export const useAccessMode = () => {
return context;
};
interface AccessModeStateProps {
children: React.ReactNode;
}
export const AccessModeState = ({ children }: AccessModeStateProps) => {
export const AccessModeState = ({ children }: React.PropsWithChildren) => {
const [accessLevel, setAccessLevel] = useState<UserLevel>(UserLevel.READER);
return <AccessContext.Provider value={{ accessLevel, setAccessLevel }}>{children}</AccessContext.Provider>;
};

View File

@ -52,11 +52,7 @@ export const useAuth = () => {
return context;
};
interface AuthStateProps {
children: React.ReactNode;
}
export const AuthState = ({ children }: AuthStateProps) => {
export const AuthState = ({ children }: React.PropsWithChildren) => {
const { users } = useUsers();
const [user, setUser] = useState<ICurrentUser | undefined>(undefined);
const [loading, setLoading] = useState(true);

View File

@ -52,11 +52,7 @@ export const useConceptOptions = () => {
return context;
};
interface OptionsStateProps {
children: React.ReactNode;
}
export const OptionsState = ({ children }: OptionsStateProps) => {
export const OptionsState = ({ children }: React.PropsWithChildren) => {
const [darkMode, setDarkMode] = useLocalStorage(storage.themeDark, false);
const [adminMode, setAdminMode] = useLocalStorage(storage.optionsAdmin, false);
const [showHelp, setShowHelp] = useLocalStorage(storage.optionsHelp, true);

View File

@ -32,11 +32,7 @@ export const useGlobalOss = (): IGlobalOssContext => {
return context;
};
interface GlobalOssStateProps {
children: React.ReactNode;
}
export const GlobalOssState = ({ children }: GlobalOssStateProps) => {
export const GlobalOssState = ({ children }: React.PropsWithChildren) => {
const library = useLibrary();
const [isValid, setIsValid] = useState(false);
const [ossID, setIdInternal] = useState<string | undefined>(undefined);

View File

@ -61,11 +61,7 @@ export const useLibrary = (): ILibraryContext => {
return context;
};
interface LibraryStateProps {
children: React.ReactNode;
}
export const LibraryState = ({ children }: LibraryStateProps) => {
export const LibraryState = ({ children }: React.PropsWithChildren) => {
const { user, loading: userLoading } = useAuth();
const { adminMode } = useConceptOptions();

View File

@ -27,11 +27,7 @@ export const useConceptNavigation = () => {
return context;
};
interface NavigationStateProps {
children: React.ReactNode;
}
export const NavigationState = ({ children }: NavigationStateProps) => {
export const NavigationState = ({ children }: React.PropsWithChildren) => {
const router = useNavigate();
const { pathname } = useLocation();

View File

@ -78,10 +78,9 @@ export const useOSS = () => {
interface OssStateProps {
itemID: string;
children: React.ReactNode;
}
export const OssState = ({ itemID, children }: OssStateProps) => {
export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateProps>) => {
const library = useLibrary();
const oss = useGlobalOss();
const model = oss.schema;

View File

@ -107,10 +107,9 @@ export const useRSForm = () => {
interface RSFormStateProps {
itemID: string;
versionID?: string;
children: React.ReactNode;
}
export const RSFormState = ({ itemID, versionID, children }: RSFormStateProps) => {
export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChildren<RSFormStateProps>) => {
const library = useLibrary();
const oss = useGlobalOss();
const { user } = useAuth();

View File

@ -30,11 +30,7 @@ export const useUserProfile = () => {
return context;
};
interface UserProfileStateProps {
children: React.ReactNode;
}
export const UserProfileState = ({ children }: UserProfileStateProps) => {
export const UserProfileState = ({ children }: React.PropsWithChildren) => {
const { users } = useUsers();
const [user, setUser] = useState<IUserProfile | undefined>(undefined);
const [loading, setLoading] = useState(true);

View File

@ -21,11 +21,7 @@ export const useUsers = (): IUsersContext => {
return context;
};
interface UsersStateProps {
children: React.ReactNode;
}
export const UsersState = ({ children }: UsersStateProps) => {
export const UsersState = ({ children }: React.PropsWithChildren) => {
const [users, setUsers] = useState<IUserInfo[]>([]);
function getUserLabel(userID: number | null) {

View File

@ -86,13 +86,11 @@ export const useOssEdit = () => {
};
interface OssEditStateProps {
// isModified: boolean;
selected: OperationID[];
setSelected: React.Dispatch<React.SetStateAction<OperationID[]>>;
children: React.ReactNode;
}
export const OssEditState = ({ selected, setSelected, children }: OssEditStateProps) => {
export const OssEditState = ({ selected, setSelected, children }: React.PropsWithChildren<OssEditStateProps>) => {
const router = useConceptNavigation();
const { user } = useAuth();
const { adminMode } = useConceptOptions();

View File

@ -126,7 +126,6 @@ interface RSEditStateProps {
onCreateCst?: (newCst: IConstituentaMeta) => void;
onDeleteCst?: (newActive?: ConstituentaID) => void;
children: React.ReactNode;
}
export const RSEditState = ({
@ -137,7 +136,7 @@ export const RSEditState = ({
onCreateCst,
onDeleteCst,
children
}: RSEditStateProps) => {
}: React.PropsWithChildren<RSEditStateProps>) => {
const router = useConceptNavigation();
const { user } = useAuth();
const { adminMode } = useConceptOptions();