style: 调整ModalWrapper样式

pull/13/head
moonrailgun 4 years ago
parent 337eb14b54
commit 1493ade811

@ -9,9 +9,10 @@ import { PortalAdd, PortalRemove } from './Portal';
import { Typography } from 'antd'; import { Typography } from 'antd';
import { Icon } from '@iconify/react'; import { Icon } from '@iconify/react';
import { CSSTransition } from 'react-transition-group'; import { CSSTransition } from 'react-transition-group';
import clsx from 'clsx';
import { useIsMobile } from '@/hooks/useIsMobile';
import './Modal.less'; import './Modal.less';
import clsx from 'clsx';
const transitionEndListener = (node: HTMLElement, done: () => void) => const transitionEndListener = (node: HTMLElement, done: () => void) =>
node.addEventListener('transitionend', done, false); node.addEventListener('transitionend', done, false);
@ -170,6 +171,8 @@ export const ModalWrapper: React.FC<{
className?: string; className?: string;
style?: React.CSSProperties; style?: React.CSSProperties;
}> = React.memo((props) => { }> = React.memo((props) => {
const isMobile = useIsMobile();
const title = _isString(props.title) ? ( const title = _isString(props.title) ? (
<Typography.Title level={4} className="text-center mb-4"> <Typography.Title level={4} className="text-center mb-4">
{props.title} {props.title}
@ -179,7 +182,7 @@ export const ModalWrapper: React.FC<{
return ( return (
<div <div
className={clsx('p-4', props.className)} className={clsx('p-4', props.className)}
style={{ minWidth: 300, ...props.style }} style={{ minWidth: isMobile ? 300 : 420, ...props.style }}
> >
{title} {title}
{props.children} {props.children}

@ -39,6 +39,7 @@ export const Slides = React.forwardRef<SlidesRef, CarouselProps>(
ref={carouselRef} ref={carouselRef}
{...props} {...props}
dots={false} dots={false}
swipe={false}
adaptiveHeight={true} adaptiveHeight={true}
infinite={false} infinite={false}
beforeChange={(current, next) => { beforeChange={(current, next) => {

@ -95,7 +95,7 @@ export const ModalCreateGroup: React.FC = React.memo(() => {
}, [name, panels]); }, [name, panels]);
return ( return (
<ModalWrapper style={{ width: 440 }}> <ModalWrapper>
<Slides ref={slidesRef}> <Slides ref={slidesRef}>
<div> <div>
<Typography.Title level={4} className="text-center mb-4"> <Typography.Title level={4} className="text-center mb-4">

@ -36,7 +36,7 @@ export const GroupInvite: React.FC<GroupInviteProps> = React.memo((props) => {
} }
return ( return (
<ModalWrapper style={{ width: '440px' }}> <ModalWrapper>
{/* <div> {groupInfo.name}</div> {/* <div> {groupInfo.name}</div>
<div> <div>

Loading…
Cancel
Save