tiptap: replace modal with sidesheet

This commit is contained in:
fantasticit 2022-05-10 12:32:42 +08:00
parent 51fba869e1
commit cf18552962
5 changed files with 31 additions and 31 deletions

View File

@ -5,7 +5,6 @@
.listWrap {
display: flex;
width: 320px;
padding: 0;
margin: 0;
list-style: none;

View File

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Popover, Typography, Modal } from '@douyinfe/semi-ui';
import { Popover, Typography, SideSheet } from '@douyinfe/semi-ui';
import { EXPRESSIONES, GESTURES, SYMBOLS, OBJECTS, ACTIVITIES, SKY_WEATHER } from './constants';
import { createKeysLocalStorageLRUCache } from 'helpers/lru-cache';
import { useToggle } from 'hooks/use-toggle';
@ -61,10 +61,10 @@ export const EmojiPicker: React.FC<IProps> = ({ onSelectEmoji, children }) => {
const content = useMemo(
() => (
<div className={styles.wrap} style={{ paddingBottom: isMobile ? 24 : 0 }}>
<div className={styles.wrap} style={{ padding: isMobile ? '24px 0' : 0 }}>
{renderedList.map((item, index) => {
return (
<div key={item.title} className={styles.sectionWrap}>
<div key={item.title}>
<Title heading={6} style={{ margin: `${index === 0 ? 0 : 16}px 0 6px` }}>
{item.title}
</Title>
@ -93,16 +93,17 @@ export const EmojiPicker: React.FC<IProps> = ({ onSelectEmoji, children }) => {
<span>
{isMobile ? (
<>
<Modal
centered
title="表情"
<SideSheet
headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
placement="bottom"
title={'表情'}
visible={visible}
footer={null}
onCancel={() => toggleVisible(false)}
style={{ maxWidth: '96vw' }}
onCancel={toggleVisible}
height={370}
mask={false}
>
{content}
</Modal>
</SideSheet>
<span onMouseDown={() => toggleVisible(true)}>{children}</span>
</>
) : (
@ -113,7 +114,7 @@ export const EmojiPicker: React.FC<IProps> = ({ onSelectEmoji, children }) => {
position="bottomLeft"
visible={visible}
onVisibleChange={toggleVisible}
content={content}
content={<div style={{ width: 320 }}>{content}</div>}
>
{children}
</Popover>

View File

@ -1,5 +1,5 @@
import React, { useMemo } from 'react';
import { Dropdown, Typography, Modal } from '@douyinfe/semi-ui';
import { Dropdown, Typography, Modal, SideSheet, Row, Col } from '@douyinfe/semi-ui';
import styles from './style.module.scss';
import { useWindowSize } from 'hooks/use-window-size';
import { useToggle } from 'hooks/use-toggle';
@ -89,7 +89,7 @@ export const ColorPicker: React.FC<{
const content = useMemo(
() => (
<div style={{ padding: isMobile ? '0 0 24px' : '12px 16px' }}>
<div style={{ padding: isMobile ? '24px 0 24px' : '12px 16px', width: isMobile ? 'auto' : 272 }}>
<div className={styles.emptyWrap} onClick={() => onSetColor(null)}>
<span></span>
<Text></Text>
@ -115,16 +115,17 @@ export const ColorPicker: React.FC<{
<span>
{isMobile ? (
<>
<Modal
centered
<SideSheet
headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
placement="bottom"
title={title}
visible={visible}
footer={null}
onCancel={() => toggleVisible(false)}
style={{ maxWidth: '96vw', width: 288 }}
onCancel={toggleVisible}
height={284}
mask={false}
>
{content}
</Modal>
</SideSheet>
<span style={{ display: 'inline-block' }} onMouseDown={() => toggleVisible(true)}>
{children}
</span>

View File

@ -1,6 +1,5 @@
.emptyWrap {
display: flex;
width: 240px;
cursor: pointer;
border: 1px solid transparent;
flex-wrap: nowrap;
@ -35,7 +34,6 @@
.colorWrap {
display: flex;
flex-wrap: wrap;
width: 240px;
margin-top: 8px;
.colorItem {

View File

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useState } from 'react';
import { Popover, Button, Typography, Input, Space, Modal } from '@douyinfe/semi-ui';
import { Popover, Button, Typography, Input, Space, SideSheet } from '@douyinfe/semi-ui';
import { Editor } from 'tiptap/editor';
import { useWindowSize } from 'hooks/use-window-size';
import { useToggle } from 'hooks/use-toggle';
@ -64,7 +64,7 @@ export const Search: React.FC<{ editor: Editor }> = ({ editor }) => {
}, [editor]);
const content = (
<div style={{ paddingBottom: isMobile ? 24 : 0 }}>
<div style={{ padding: isMobile ? '24px 0' : 0 }}>
<div style={{ marginBottom: 12 }}>
<Text type="tertiary"></Text>
<Input
@ -110,16 +110,17 @@ export const Search: React.FC<{ editor: Editor }> = ({ editor }) => {
<span>
{isMobile ? (
<>
<Modal
centered
title="查找替换"
<SideSheet
headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
placement="bottom"
title={'查找替换'}
visible={visible}
footer={null}
onCancel={() => toggleVisible(false)}
style={{ maxWidth: '96vw' }}
onCancel={toggleVisible}
height={280}
mask={false}
>
{content}
</Modal>
</SideSheet>
{btn}
</>
) : (