Upgrade typescript, finding messaages
Vincent
5 years ago
parent
2c5e2df817
commit
ea4dc05009
@ -0,0 +1,85 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import TextareaAutosize from 'react-autosize-textarea';
|
||||||
|
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
|
||||||
|
import { SessionEmojiPanel } from './SessionEmojiPanel';
|
||||||
|
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
placeholder?: string;
|
||||||
|
onSendMessage: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
message: string;
|
||||||
|
showEmojiPanel: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class SessionCompositionBox extends React.Component<Props, State> {
|
||||||
|
private textarea: React.RefObject<HTMLTextAreaElement>;
|
||||||
|
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
message: '',
|
||||||
|
showEmojiPanel: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.textarea = React.createRef();
|
||||||
|
this.toggleEmojiPanel = this.toggleEmojiPanel.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { placeholder } = this.props;
|
||||||
|
const { showEmojiPanel } = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="composition-container">
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.CirclePlus}
|
||||||
|
iconSize={SessionIconSize.Large}
|
||||||
|
/>
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.Microphone}
|
||||||
|
iconSize={SessionIconSize.Large}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="send-message-input">
|
||||||
|
<TextareaAutosize
|
||||||
|
rows={1}
|
||||||
|
maxRows={6}
|
||||||
|
ref={this.textarea}
|
||||||
|
placeholder={placeholder}
|
||||||
|
maxLength={window.CONSTANTS.MAX_MESSAGE_BODY_LENGTH}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.Emoji}
|
||||||
|
iconSize={SessionIconSize.Large}
|
||||||
|
onClick={this.toggleEmojiPanel}
|
||||||
|
/>
|
||||||
|
<div className="send-message-button">
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.Send}
|
||||||
|
iconSize={SessionIconSize.Large}
|
||||||
|
iconColor={'#FFFFFF'}
|
||||||
|
iconRotation={90}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{ showEmojiPanel &&
|
||||||
|
( <SessionEmojiPanel/> )
|
||||||
|
}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public toggleEmojiPanel() {
|
||||||
|
this.setState({
|
||||||
|
showEmojiPanel: !this.state.showEmojiPanel,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
|
||||||
|
interface Props {}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
// FIXME Use Emoji-Mart categories
|
||||||
|
category: null
|
||||||
|
}
|
||||||
|
|
||||||
|
export class SessionEmojiPanel extends React.Component<Props, State> {
|
||||||
|
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
category: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='session-emoji-panel'>
|
||||||
|
THIS IS EMOJI STUFF
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,106 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
// Value ranges from 0 to 100
|
||||||
|
value: number;
|
||||||
|
// Optional. Load with initial value and have
|
||||||
|
// it shoot to new value immediately
|
||||||
|
prevValue?: number;
|
||||||
|
visible: boolean;
|
||||||
|
fadeOnComplete: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
value: number;
|
||||||
|
visible: boolean;
|
||||||
|
startFade: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class SessionProgress extends React.PureComponent<Props, State> {
|
||||||
|
public static defaultProps = {
|
||||||
|
fadeOnComplete: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
const { visible, value, prevValue } = this.props;
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
visible,
|
||||||
|
startFade: false,
|
||||||
|
value: prevValue || value,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentWillMount() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setState({
|
||||||
|
value: this.props.value,
|
||||||
|
});
|
||||||
|
}, 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const { startFade, value } = this.state;
|
||||||
|
const { prevValue } = this.props;
|
||||||
|
|
||||||
|
// Duration will be the decimal (in seconds) of
|
||||||
|
// the percentage differnce, else 0.25s;
|
||||||
|
// Minimum shift duration of 0.25s;
|
||||||
|
const shiftDuration = this.getShiftDuration(this.props.value, prevValue);
|
||||||
|
|
||||||
|
// 1. Width depends on progress.
|
||||||
|
// 2. Opacity is the inverse of fade.
|
||||||
|
// 3. Transition duration scales with the
|
||||||
|
// distance it needs to travel
|
||||||
|
const style = {
|
||||||
|
width: `${this.state.value}%`,
|
||||||
|
opacity: `${Number(!startFade)}`,
|
||||||
|
transition: `width ${shiftDuration.toFixed(2)}s cubic-bezier(0.25, 0.46, 0.45, 0.94)`,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (value >= 100) {
|
||||||
|
this.onComplete();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="session-progress">
|
||||||
|
<div
|
||||||
|
className="session-progress__progress"
|
||||||
|
style={style}
|
||||||
|
>
|
||||||
|
 
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public onComplete() {
|
||||||
|
const { fadeOnComplete } = this.props;
|
||||||
|
|
||||||
|
// Fade
|
||||||
|
if ( fadeOnComplete ) {
|
||||||
|
this.setState({
|
||||||
|
startFade: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
private getShiftDuration(value: number, prevValue?: number) {
|
||||||
|
// Generates a shift duration which is based upon the distance requred to travel.
|
||||||
|
// Follows the curve of y = (1-c)*sqrt(x) + c
|
||||||
|
// Input values are between 0 and 100.
|
||||||
|
// Max time = 1.0s.
|
||||||
|
|
||||||
|
const minTime = 0.25;
|
||||||
|
if (!prevValue) {
|
||||||
|
return minTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
const distance = Math.abs(value - prevValue) / 100;
|
||||||
|
return (1 - minTime) * Math.sqrt(distance) + minTime;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue