mirror of https://github.com/fantasticit/think.git
tiptap: replace modal with sidesheet
parent
51fba869e1
commit
cf18552962
|
@ -5,7 +5,6 @@
|
|||
|
||||
.listWrap {
|
||||
display: flex;
|
||||
width: 320px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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}
|
||||
</>
|
||||
) : (
|
||||
|
|
Loading…
Reference in New Issue