Skip to content

Commit 631ce1e

Browse files
akaiakai
committed
feat: sync 2.4.8
1 parent f87490f commit 631ce1e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+376
-177
lines changed

‎src/components/Avatar/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ export interface AvatarProps {
1212
url?: string;
1313
size?: AvatarSize;
1414
shape?: AvatarShape;
15+
children?: React.ReactNode;
1516
}
1617

17-
export const Avatar: React.FC<AvatarProps> = (props) => {
18+
export const Avatar = (props: AvatarProps) => {
1819
const { className, src, alt, url, size = 'md', shape = 'circle', children } = props;
1920

2021
const Element = url ? 'a' : 'span';

‎src/components/Button/index.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,15 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
1212
icon?: string;
1313
loading?: boolean;
1414
disabled?: boolean;
15+
children?: React.ReactNode;
1516
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
1617
}
1718

1819
function composeClass(type?: string) {
1920
return type && `Btn--${type}`;
2021
}
2122

22-
export const Button = (props: ButtonProps) => {
23+
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
2324
const {
2425
className,
2526
label,
@@ -59,6 +60,7 @@ export const Button = (props: ButtonProps) => {
5960
type="button"
6061
disabled={disabled}
6162
onClick={handleClick}
63+
ref={ref}
6264
{...other}
6365
>
6466
{icon && (
@@ -69,4 +71,4 @@ export const Button = (props: ButtonProps) => {
6971
{label || children}
7072
</button>
7173
);
72-
};
74+
});

‎src/components/Button/style.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,10 @@
7474
}
7575
}
7676

77+
[data-old-ios] .Btn:not(.Btn--block) {
78+
display: inline-block;
79+
}
80+
7781
@media (hover: hover) {
7882
.Btn {
7983
&:hover {

‎src/components/Card/CardActions.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react';
22
import clsx from 'clsx';
33

4-
export type CardActionsProps = {
4+
export interface CardActionsProps {
55
className?: string;
66
direction?: 'column' | 'row';
7-
};
7+
children?: React.ReactNode;
8+
}
89

9-
export const CardActions: React.FC<CardActionsProps> = (props) => {
10+
export const CardActions = (props: CardActionsProps) => {
1011
const { children, className, direction, ...other } = props;
1112
return (
1213
<div

‎src/components/Card/CardContent.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
22
import clsx from 'clsx';
33

4-
export type CardContentProps = {
4+
export interface CardContentProps {
55
className?: string;
6-
};
6+
children?: React.ReactNode;
7+
}
78

8-
export const CardContent: React.FC<CardContentProps> = (props) => {
9+
export const CardContent = (props: CardContentProps) => {
910
const { className, children, ...other } = props;
1011
return (
1112
<div className={clsx('CardContent', className)} {...other}>

‎src/components/Card/CardMedia.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import React from 'react';
22
import clsx from 'clsx';
33
import { Flex } from '../Flex';
44

5-
export type CardMediaProps = {
5+
export interface CardMediaProps {
66
className?: string;
77
aspectRatio?: 'square' | 'wide';
88
color?: string;
99
image?: string;
10-
};
10+
children?: React.ReactNode;
11+
}
1112

12-
export const CardMedia: React.FC<CardMediaProps> = (props) => {
13+
export const CardMedia = (props: CardMediaProps) => {
1314
const { className, aspectRatio = 'square', color, image, children, ...other } = props;
1415

1516
const bgStyle = {

‎src/components/Card/CardText.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
22
import clsx from 'clsx';
33

4-
export type CardTextProps = {
4+
export interface CardTextProps {
55
className?: string;
6-
};
6+
children?: React.ReactNode;
7+
}
78

8-
export const CardText: React.FC<CardTextProps> = (props) => {
9+
export const CardText = (props: CardTextProps) => {
910
const { className, children, ...other } = props;
1011
return (
1112
<div className={clsx('CardText', className)} {...other}>

‎src/components/Card/CardTitle.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react';
22
import clsx from 'clsx';
33

4-
export type CardTitleProps = {
4+
export interface CardTitleProps {
55
className?: string;
66
title?: React.ReactNode;
77
subtitle?: React.ReactNode;
88
center?: boolean;
9-
};
9+
children?: React.ReactNode;
10+
}
1011

11-
export const CardTitle: React.FC<CardTitleProps> = (props) => {
12+
export const CardTitle = (props: CardTitleProps) => {
1213
const { className, title, subtitle, center, children, ...other } = props;
1314
return (
1415
<div className={clsx('CardTitle', { 'CardTitle--center': center }, className)} {...other}>

‎src/components/Carousel/Item.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import React from 'react';
22

33
interface CarouselItemProps {
44
width: string;
5+
children?: React.ReactNode;
56
}
67

7-
export const CarouselItem: React.FC<CarouselItemProps> = (props) => {
8+
export const CarouselItem = (props: CarouselItemProps) => {
89
const { width, children } = props;
910

1011
return (

‎src/components/Chat/index.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from '../MessageContainer';
99
import { QuickReplies, QuickReplyItemProps } from '../QuickReplies';
1010
import { Composer as DComposer, ComposerProps, ComposerHandle } from '../Composer';
11-
import isSafari from '../../utils/isSafari';
11+
import { isSafari, getIOSMajorVersion } from '../../utils/ua';
1212

1313
export type ChatProps = Omit<ComposerProps, 'onFocus' | 'onChange' | 'onBlur'> &
1414
MessageContainerProps & {
@@ -164,6 +164,7 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) =>
164164
onQuickReplyScroll,
165165
renderQuickReplies,
166166
text,
167+
textOnce,
167168
placeholder,
168169
onInputFocus,
169170
onInputChange,
@@ -192,8 +193,15 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) =>
192193
}
193194

194195
useEffect(() => {
196+
const rootEl = document.documentElement;
195197
if (isSafari()) {
196-
document.documentElement.dataset.safari = '';
198+
rootEl.dataset.safari = '';
199+
}
200+
201+
const v = getIOSMajorVersion();
202+
// iOS 9、10 不支持按钮使用 flex
203+
if (v && v < 11) {
204+
rootEl.dataset.oldIos = '';
197205
}
198206
}, []);
199207

@@ -228,6 +236,7 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) =>
228236
ref={composerRef}
229237
inputType={inputType}
230238
text={text}
239+
textOnce={textOnce}
231240
inputOptions={inputOptions}
232241
placeholder={placeholder}
233242
onAccessoryToggle={onAccessoryToggle}

‎src/components/Chat/style.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,14 @@
66
height: calc(100vh - calc(100vh - 100%));
77
}
88
}
9+
910
body,
1011
#root {
1112
height: 100%;
1213
}
14+
1315
body {
16+
overflow: hidden;
1417
margin: 0;
1518
}
1619
}

‎src/components/Checkbox/Checkbox.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
88
label?: CheckboxValue;
99
};
1010

11-
export const Checkbox: React.FC<CheckboxProps> = (props) => {
11+
export const Checkbox = (props: CheckboxProps) => {
1212
const { className, label, checked, disabled, onChange, ...other } = props;
1313
return (
1414
<label

‎src/components/Checkbox/CheckboxGroup.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export type CheckboxGroupProps = {
1212
onChange: (value: CheckboxValue[], event: React.ChangeEvent<HTMLInputElement>) => void;
1313
};
1414

15-
export const CheckboxGroup: React.FC<CheckboxGroupProps> = (props) => {
15+
export const CheckboxGroup = (props: CheckboxGroupProps) => {
1616
const { className, options, value, name, disabled, block, onChange } = props;
1717

1818
function handleChange(val: CheckboxValue, e: React.ChangeEvent<HTMLInputElement>) {

‎src/components/ClickOutside/index.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import React, { useEffect, useRef } from 'react';
33
const doc = document;
44
const html = doc.documentElement;
55

6-
export type ClickOutsideProps = {
6+
export interface ClickOutsideProps {
77
onClick: (event: React.MouseEvent<HTMLElement>) => void;
88
// mouseEvent?: 'click' | 'mousedown' | 'mouseup' | false;
99
mouseEvent?: 'click' | 'mousedown' | 'mouseup';
10-
};
10+
children?: React.ReactNode;
11+
}
1112

12-
export const ClickOutside: React.FC<ClickOutsideProps> = (props) => {
13+
export const ClickOutside = (props: ClickOutsideProps) => {
1314
const { children, onClick, mouseEvent = 'mouseup', ...others } = props;
1415
const wrapper = useRef<HTMLDivElement>(null!);
1516

‎src/components/ComponentsProvider/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
export { useComponents } from './useComponents';
1313
export type { ComponentsProviderProps, ComponentsMap };
1414

15-
export const ComponentsProvider: React.FC<ComponentsProviderProps> = (props) => {
15+
export const ComponentsProvider = (props: ComponentsProviderProps) => {
1616
const { components, children } = props;
1717
const componentsRef = React.useRef<ComponentsMap>({ ...components });
1818

‎src/components/ComponentsProvider/interface.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,5 @@ export interface ComponentsMap {
5151

5252
export interface ComponentsProviderProps {
5353
components: ComponentsMap;
54+
children?: React.ReactNode;
5455
}

‎src/components/Composer/Action.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { IconButton, IconButtonProps } from '../IconButton';
33

4-
export const Action: React.FC<IconButtonProps> = (props) => (
4+
export const Action = (props: IconButtonProps) => (
55
<div className="Composer-actions" data-action-icon={props.icon}>
66
<IconButton size="lg" {...props} />
77
</div>

‎src/components/Composer/ComposerInput.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect, useCallback, useRef } from 'react';
1+
import React, { useState, useEffect, useCallback } from 'react';
22
import clsx from 'clsx';
33
import { Input, InputProps } from '../Input';
44
import { SendConfirm } from '../SendConfirm';
@@ -21,7 +21,6 @@ export const ComposerInput = ({
2121
...rest
2222
}: ComposerInputProps) => {
2323
const [pastedImage, setPastedImage] = useState<File | null>(null);
24-
const wrapRef = useRef<HTMLDivElement>(null);
2524

2625
const handlePaste = useCallback((e: React.ClipboardEvent<any>) => {
2726
parseDataTransfer(e, setPastedImage);
@@ -40,13 +39,14 @@ export const ComposerInput = ({
4039
}, [onImageSend, pastedImage]);
4140

4241
useEffect(() => {
43-
if (canTouch && inputRef.current && wrapRef.current) {
44-
riseInput(inputRef.current, wrapRef.current);
42+
if (canTouch && inputRef.current) {
43+
const $composer = document.querySelector('.Composer');
44+
riseInput(inputRef.current, $composer);
4545
}
4646
}, [inputRef]);
4747

4848
return (
49-
<div className={clsx({ 'S--invisible': invisible })} ref={wrapRef}>
49+
<div className={clsx({ 'S--invisible': invisible })}>
5050
<Input
5151
className="Composer-input"
5252
rows={1}

‎src/components/Composer/ToolbarItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ type IToolbarItem = {
77
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
88
};
99

10-
export const ToolbarItem: React.FC<IToolbarItem> = (props) => {
10+
export const ToolbarItem = (props: IToolbarItem) => {
1111
const { item, onClick } = props;
1212

1313
return (

‎src/components/Composer/index.tsx

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export type InputType = 'voice' | 'text';
1919
export type ComposerProps = {
2020
wideBreakpoint?: string;
2121
text?: string;
22+
textOnce?: string;
2223
inputOptions?: InputProps;
2324
placeholder?: string;
2425
inputType?: InputType;
@@ -42,9 +43,10 @@ export interface ComposerHandle {
4243
export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props, ref) => {
4344
const {
4445
text: initialText = '',
46+
textOnce: oTextOnce,
4547
inputType: initialInputType = 'text',
4648
wideBreakpoint,
47-
placeholder = '请输入...',
49+
placeholder: oPlaceholder = '请输入...',
4850
recorder = {},
4951
onInputTypeChange,
5052
onFocus,
@@ -60,6 +62,8 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
6062
} = props;
6163

6264
const [text, setText] = useState(initialText);
65+
const [textOnce, setTextOnce] = useState('');
66+
const [placeholder, setPlaceholder] = useState(oPlaceholder);
6367
const [inputType, setInputType] = useState(initialInputType || 'text');
6468
const [isAccessoryOpen, setAccessoryOpen] = useState(false);
6569
const [accessoryContent, setAccessoryContent] = useState('');
@@ -105,6 +109,16 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
105109
}
106110
}, [isAccessoryOpen, onAccessoryToggle]);
107111

112+
useEffect(() => {
113+
if (oTextOnce) {
114+
setTextOnce(oTextOnce);
115+
setPlaceholder(oTextOnce);
116+
} else {
117+
setTextOnce('');
118+
setPlaceholder(oPlaceholder);
119+
}
120+
}, [oPlaceholder, oTextOnce]);
121+
108122
useEffect(() => {
109123
isMountRef.current = true;
110124
}, []);
@@ -157,13 +171,20 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
157171
);
158172

159173
const send = useCallback(() => {
160-
onSend('text', text);
161-
setText('');
162-
174+
if (text) {
175+
onSend('text', text);
176+
setText('');
177+
} else if (textOnce) {
178+
onSend('text', textOnce);
179+
}
180+
if (textOnce) {
181+
setTextOnce('');
182+
setPlaceholder(oPlaceholder);
183+
}
163184
if (focused.current) {
164185
inputRef.current.focus();
165186
}
166-
}, [onSend, text]);
187+
}, [oPlaceholder, onSend, text, textOnce]);
167188

168189
const handleInputKeyDown = useCallback(
169190
(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -289,7 +310,7 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
289310
aria-label={isAccessoryOpen ? '关闭工具栏' : '展开工具栏'}
290311
/>
291312
)}
292-
{text && <SendButton onClick={handleSendBtnClick} disabled={false} />}
313+
{(text || textOnce) && <SendButton onClick={handleSendBtnClick} disabled={false} />}
293314
</div>
294315
{isAccessoryOpen && (
295316
<AccessoryWrap onClickOutside={handleAccessoryBlur}>

0 commit comments

Comments
 (0)