import React, { HTMLAttributes, useState } from 'react'; import styled from 'styled-components'; import { CSSTransition } from 'react-transition-group'; import classNames from 'classnames'; import Button from '../Button/Button'; import Warning from '../icons/warning.svg'; import './index.scss'; export interface PopConfirmProps extends HTMLAttributes { title?: string; onConfirm?: () => void; onCancel?: () => void; children?: React.ReactNode; okText?: string; cancelText?: string; position?: 'top' | 'bottom' | 'left' | 'right'; } const PopConfirmStyled = styled.div` display: inline-block; position: relative; .text { display: flex; gap: 5px; white-space: nowrap; } .action { align-self: end; display: flex; gap: 10px; } > .pop.bottom { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, calc(100% + 15px)); box-shadow: 0 -2px 10px 2px rgba(0, 0, 0, 0.1); &:after { top: 0; left: 50%; transform: translate(-50%, -50%) rotate(45deg); border-top: 1px solid rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.1); } } > .pop.top { position: absolute; top: 0; left: 50%; transform: translate(-50%, calc(-100% - 15px)); box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1); &:after { bottom: 0; left: 50%; transform: translate(-50%, 50%) rotate(45deg); border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1); } } > .pop.left { position: absolute; top: 50%; left: 0; transform: translate(calc(-100% - 15px), -50%); box-shadow: 2px 0 10px 2px rgba(0, 0, 0, 0.1); &:after { top: 50%; right: 0; transform: translate(50%, -50%) rotate(45deg); border-top: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1); } } > .pop.right { position: absolute; top: 50%; right: 0; transform: translate(calc(100% + 15px), -50%); box-shadow: -2px 0 10px 2px rgba(0, 0, 0, 0.1); &:after { bottom: 50%; left: 0; transform: translate(-50%, 50%) rotate(45deg); border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.1); } } `; const PopWrap = styled.div` padding: 15px; display: flex; flex-direction: column; gap: 10px; z-index: 100; background-color: #ffffff; &:after { content: ''; position: absolute; width: 12px; height: 12px; background-color: #ffffff; } `; const PopConfirm: React.FC = (props) => { const { children, onConfirm, position, title, onCancel, okText, cancelText, ...rest } = props; const [isShow, setShow] = useState(false); return (
setShow(true)} role="presentation" onBlur={() => setShow(false)}> {children}

{title}

); }; PopConfirm.defaultProps = { title: 'title', okText: '确定', cancelText: '取消', onConfirm: () => {}, onCancel: () => {}, children: '', position: 'top' }; export default PopConfirm;