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 // prettier-ignore
function GlobalProviders({ children }: { children: React.ReactNode }) { function GlobalProviders({ children }: React.PropsWithChildren) {
return ( return (
<ErrorBoundary <ErrorBoundary
FallbackComponent={ErrorFallback} FallbackComponent={ErrorFallback}

View File

@ -156,7 +156,6 @@ interface IconSVGProps {
size?: string; size?: string;
className?: string; className?: string;
props?: React.SVGProps<SVGSVGElement>; props?: React.SVGProps<SVGSVGElement>;
children: React.ReactNode;
} }
export interface IconProps { export interface IconProps {
@ -164,7 +163,7 @@ export interface IconProps {
className?: string; 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 ( return (
<svg <svg
width={size} width={size}

View File

@ -14,15 +14,19 @@ interface DropdownProps extends CProps.Styling {
/** Indicates whether the dropdown is open. */ /** Indicates whether the dropdown is open. */
isOpen: boolean; 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. * 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 ( return (
<div className='relative'> <div className='relative'>
<motion.div <motion.div

View File

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

View File

@ -4,12 +4,17 @@ import { CProps } from '../props';
interface OverlayProps extends CProps.Styling { interface OverlayProps extends CProps.Styling {
id?: string; id?: string;
children: React.ReactNode;
position?: string; position?: string;
layer?: 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 ( return (
<div className='relative'> <div className='relative'>
<div className={clsx('absolute', className, position, layer)} {...restProps}> <div className={clsx('absolute', className, position, layer)} {...restProps}>

View File

@ -11,11 +11,17 @@ interface DataLoaderProps extends CProps.AnimatedDiv {
isLoading?: boolean; isLoading?: boolean;
error?: ErrorData; error?: ErrorData;
hasNoData?: boolean; 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 ( return (
<AnimatePresence mode='wait'> <AnimatePresence mode='wait'>
{!isLoading && !error && !hasNoData ? ( {!isLoading && !error && !hasNoData ? (

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -107,10 +107,9 @@ export const useRSForm = () => {
interface RSFormStateProps { interface RSFormStateProps {
itemID: string; itemID: string;
versionID?: 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 library = useLibrary();
const oss = useGlobalOss(); const oss = useGlobalOss();
const { user } = useAuth(); const { user } = useAuth();

View File

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

View File

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

View File

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

View File

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