Upgrade typescript, finding messaages
Vincent
5 years ago
parent
2c5e2df817
commit
ea4dc05009
@ -1,69 +1,102 @@
|
|||||||
$composition-container-height: 60px;
|
$composition-container-height: 60px;
|
||||||
|
|
||||||
.conversation-item {
|
.conversation-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.session-conversation-wrapper {
|
.session-conversation-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: $session-shade-2;
|
background-color: $session-shade-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messages-container{
|
.messages-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
padding: $session-margin-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.composition-container {
|
.composition-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: $session-shade-4;
|
||||||
|
padding: 0px $session-margin-md;
|
||||||
|
min-height: $composition-container-height;
|
||||||
|
|
||||||
|
& > .session-icon-button {
|
||||||
|
margin-right: $session-margin-sm;
|
||||||
|
}
|
||||||
|
.session-icon-button {
|
||||||
|
opacity: 0.8;
|
||||||
|
|
||||||
|
.send {
|
||||||
|
background-color: $session-shade-14;
|
||||||
|
padding: $session-margin-xs;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-message-input {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
flex-grow: 1;
|
||||||
align-items: center;
|
|
||||||
background-color: $session-shade-4;
|
|
||||||
padding: 0px $session-margin-md;
|
|
||||||
min-height: $composition-container-height;
|
min-height: $composition-container-height;
|
||||||
|
padding: $composition-container-height / 3 0px;
|
||||||
& > .session-icon-button {
|
|
||||||
margin-right: $session-margin-sm;
|
textarea {
|
||||||
}
|
font-family: 'SF Pro Text';
|
||||||
.session-icon-button {
|
min-height: $composition-container-height / 3;
|
||||||
opacity: 0.8;
|
max-height: 2 * $composition-container-height;
|
||||||
|
margin-right: $session-margin-md;
|
||||||
.send {
|
color: $session-color-white;
|
||||||
background-color: $session-shade-14;
|
resize: none;
|
||||||
padding: $session-margin-xs;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 30px;
|
|
||||||
width: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.send-message-input {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
min-height: $composition-container-height
|
background: transparent;
|
||||||
|
outline: none;
|
||||||
textarea {
|
border: none;
|
||||||
min-height: $composition-container-height / 3;
|
font-size: $session-font-md;
|
||||||
max-height: 3 * $composition-container-height;
|
line-height: $session-font-h2;
|
||||||
margin-right: $session-margin-md;
|
letter-spacing: 0.5px;
|
||||||
color: $session-color-white;
|
|
||||||
resize: none;
|
|
||||||
display: flex;
|
|
||||||
flex-grow: 1;
|
|
||||||
background: transparent;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
font-size: $session-font-md;
|
|
||||||
line-height: $session-font-h2;
|
|
||||||
padding: $composition-container-height / 3 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.session-emoji-panel {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 68px;
|
||||||
|
right: 0px;
|
||||||
|
min-height: 400px;
|
||||||
|
min-width: 400px;
|
||||||
|
background-color: $session-shade-4;
|
||||||
|
border: 1px solid $session-shade-6;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
border-top-left-radius: 3px;
|
||||||
|
padding: $session-margin-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.session-progress {
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(30, 30, 30, 0.5);
|
||||||
|
|
||||||
|
&__progress {
|
||||||
|
transition: opacity 0.15s;
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
font-size: 0px;
|
||||||
|
height: 3px;
|
||||||
|
|
||||||
|
background-color: $session-color-green;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,120 +1,218 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import TextareaAutosize from 'react-autosize-textarea';
|
|
||||||
|
|
||||||
import { ConversationHeader } from '../conversation/ConversationHeader';
|
import { ConversationHeader } from '../conversation/ConversationHeader';
|
||||||
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
|
import { SessionCompositionBox } from './SessionCompositionBox';
|
||||||
|
import { SessionProgress } from './SessionProgress'
|
||||||
|
|
||||||
|
import { Message } from '../conversation/Message';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
getHeaderProps: any;
|
||||||
|
conversationKey: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
sendingProgess: number;
|
||||||
|
prevSendingProgess: number;
|
||||||
|
loadingMessages: boolean;
|
||||||
|
messages: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class SessionConversation extends React.Component<Props, State> {
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
sendingProgess: 0,
|
||||||
|
prevSendingProgess: 0,
|
||||||
|
loadingMessages: false,
|
||||||
|
messages: {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
interface Props{
|
async componentWillMount() {
|
||||||
getHeaderProps: any;
|
const { conversationKey } = this.props;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
messages: await window.getMessagesByKey(conversationKey)
|
||||||
|
})
|
||||||
|
|
||||||
};
|
}
|
||||||
|
|
||||||
interface State{};
|
render() {
|
||||||
|
// const headerProps = this.props.getHeaderProps;
|
||||||
|
const { conversationKey } = this.props;
|
||||||
export class SessionConversation extends React.Component<Props, State> {
|
|
||||||
constructor(props: any) {
|
// TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL
|
||||||
super(props);
|
// SessionConversationStack is created
|
||||||
this.state = {};
|
|
||||||
}
|
// Get conversation by Key (NOT cid)
|
||||||
|
const conversation = window.getConversationByKey(conversationKey);
|
||||||
render() {
|
|
||||||
// const headerProps = this.props.getHeaderProps;
|
console.log(`Conversation key: `, conversationKey);
|
||||||
|
|
||||||
// TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL
|
return (
|
||||||
// SessionConversationStack is created
|
<div className={`conversation-item conversation-${conversation.cid}`}>
|
||||||
const conversation = window.getConversations().models[0];
|
<div className="conversation-header">
|
||||||
|
{this.renderHeader(conversation)}
|
||||||
return (
|
</div>
|
||||||
<div className={`conversation-item conversation-${conversation.cid}`}>
|
|
||||||
|
<SessionProgress
|
||||||
<div className="conversation-header">
|
visible={true}
|
||||||
{this.renderHeader(conversation)}
|
value={this.state.sendingProgess}
|
||||||
</div>
|
prevValue={this.state.prevSendingProgess}
|
||||||
|
/>
|
||||||
<div className="messages-container">
|
|
||||||
THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW THIS IS AN INBOX VIEW
|
|
||||||
</div>
|
<div className="messages-container">
|
||||||
|
{this.renderMessages(conversationKey)}
|
||||||
<div className="composition-container">
|
|
||||||
<SessionIconButton
|
</div>
|
||||||
iconType={SessionIconType.CirclePlus}
|
|
||||||
iconSize={SessionIconSize.Large}
|
<SessionCompositionBox
|
||||||
/>
|
onSendMessage={() => null}
|
||||||
<SessionIconButton
|
/>
|
||||||
iconType={SessionIconType.Microphone}
|
</div>
|
||||||
iconSize={SessionIconSize.Large}
|
);
|
||||||
/>
|
}
|
||||||
|
|
||||||
<div className="send-message-input">
|
public renderMessages(conversationKey: string ) {
|
||||||
<TextareaAutosize
|
const { messages } = this.state;
|
||||||
rows={1}
|
|
||||||
maxRows={6}
|
// FIXME PAY ATTENTION; ONLY RENDER MESSAGES THAT ARE VISIBLE
|
||||||
/>
|
const messagesLength = messages.length;
|
||||||
</div>
|
|
||||||
|
console.log(`Messages`, messages);
|
||||||
<SessionIconButton
|
|
||||||
iconType={SessionIconType.Emoji}
|
let messageList = [];
|
||||||
iconSize={SessionIconSize.Large}
|
|
||||||
/>
|
messages?.keys.map(key => {
|
||||||
<div className="send-message-button">
|
const message = messages[key];
|
||||||
<SessionIconButton
|
return (<>THIS IS A MESSAGE</>)
|
||||||
iconType={SessionIconType.Send}
|
});
|
||||||
iconSize={SessionIconSize.Large}
|
console.log(messages);
|
||||||
iconColor={'#FFFFFF'}
|
|
||||||
iconRotation={90}
|
return messages;
|
||||||
/>
|
|
||||||
</div>
|
// for(let i = messagesLength - 1; i > 0; i--){
|
||||||
</div>
|
// messageList.push({
|
||||||
</div>
|
// isDeletable: true,
|
||||||
)
|
// text: 'fdgdfg',
|
||||||
}
|
// direction: 'incoming',
|
||||||
|
// timestamp: '1581565995228',
|
||||||
renderHeader(conversation: any) {
|
// i18n: window.i18n,
|
||||||
return (
|
// authorPhoneNumber: messages[i].source,
|
||||||
<ConversationHeader
|
// conversationType: 'direct',
|
||||||
id={conversation.cid}
|
// previews: [],
|
||||||
phoneNumber={conversation.id}
|
// isExpired: false,
|
||||||
isVerified={true}
|
// convoId: messages[i].conversationId,
|
||||||
isMe={false}
|
// selected: false,
|
||||||
isFriend={true}
|
// multiSelectMode: false,
|
||||||
i18n={window.i18n}
|
// onSelectMessage: () => null,
|
||||||
isGroup={false}
|
// onSelectMessageUnchecked: () => null,
|
||||||
isArchived={false}
|
// onShowDetail : () => null,
|
||||||
isPublic={false}
|
// onShowUserDetails: () => null,
|
||||||
isRss={false}
|
// });
|
||||||
amMod={false}
|
// }
|
||||||
members={[]}
|
|
||||||
showBackButton={false}
|
// console.log(`[vince] MessageList: `, messageList);
|
||||||
timerOptions={[]}
|
|
||||||
isBlocked={false}
|
// return messages && (
|
||||||
hasNickname={false}
|
// <Message
|
||||||
isFriendRequestPending={false}
|
// isDeletable = {false}
|
||||||
isOnline={true}
|
// text = {messages[0].body}
|
||||||
selectedMessages={null}
|
// direction = {'incoming'}
|
||||||
onSetDisappearingMessages={() => null}
|
// timestamp = {1581565995228}
|
||||||
onDeleteMessages={() => null}
|
// i18n = {window.i18n}
|
||||||
onDeleteContact={() => null}
|
// authorPhoneNumber = {messages[0].source}
|
||||||
onResetSession={() => null}
|
// conversationType = {'direct'}
|
||||||
onCloseOverlay={() => null}
|
// previews = {[]}
|
||||||
onDeleteSelectedMessages={() => null}
|
// isExpired = {false}
|
||||||
onArchive={() => null}
|
// convoId = {messages[0].conversationId}
|
||||||
onMoveToInbox={() => null}
|
// selected = {false}
|
||||||
onShowSafetyNumber={() => null}
|
// multiSelectMode = {false}
|
||||||
onShowAllMedia={() => null}
|
// onSelectMessage = {() => null}
|
||||||
onShowGroupMembers={() => null}
|
// onSelectMessageUnchecked = {() => null}
|
||||||
onGoBack={() => null}
|
// onShowDetail = {() => null}
|
||||||
onBlockUser={() => null}
|
// onShowUserDetails = {() => null}
|
||||||
onUnblockUser={() => null}
|
// />
|
||||||
onClearNickname={() => null}
|
// )
|
||||||
onChangeNickname={() => null}
|
|
||||||
onCopyPublicKey={() => null}
|
// return (
|
||||||
onLeaveGroup={() => null}
|
// <>
|
||||||
onAddModerators={() => null}
|
// {
|
||||||
onRemoveModerators={() => null}
|
// messageList.map(message => {
|
||||||
onInviteFriends={() => null}
|
// return (
|
||||||
/>
|
// <Message
|
||||||
);
|
// isDeletable = {message.isDeletable}
|
||||||
}
|
// text = {message.text}
|
||||||
}
|
// direction = {'incoming'}
|
||||||
|
// timestamp = {1581565995228}
|
||||||
|
// i18n = {message.i18n}
|
||||||
|
// authorPhoneNumber = {message.authorPhoneNumber}
|
||||||
|
// conversationType = {'direct'}
|
||||||
|
// previews = {message.previews}
|
||||||
|
// isExpired = {message.isExpired}
|
||||||
|
// convoId = {message.convoId}
|
||||||
|
// selected = {message.selected}
|
||||||
|
// multiSelectMode = {message.multiSelectMode}
|
||||||
|
// onSelectMessage = {message.onSelectMessage}
|
||||||
|
// onSelectMessageUnchecked = {message.onSelectMessageUnchecked}
|
||||||
|
// onShowDetail = {message.onShowDetail}
|
||||||
|
// onShowUserDetails = {message.onShowUserDetails}
|
||||||
|
// />
|
||||||
|
// )}
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// </>
|
||||||
|
// );
|
||||||
|
}
|
||||||
|
|
||||||
|
public renderHeader(conversation: any) {
|
||||||
|
return (
|
||||||
|
<ConversationHeader
|
||||||
|
id={conversation.cid}
|
||||||
|
phoneNumber={conversation.id}
|
||||||
|
isVerified={true}
|
||||||
|
isMe={false}
|
||||||
|
isFriend={true}
|
||||||
|
i18n={window.i18n}
|
||||||
|
isGroup={false}
|
||||||
|
isArchived={false}
|
||||||
|
isPublic={false}
|
||||||
|
isRss={false}
|
||||||
|
amMod={false}
|
||||||
|
members={[]}
|
||||||
|
showBackButton={false}
|
||||||
|
timerOptions={[]}
|
||||||
|
isBlocked={false}
|
||||||
|
hasNickname={false}
|
||||||
|
isFriendRequestPending={false}
|
||||||
|
isOnline={true}
|
||||||
|
selectedMessages={null}
|
||||||
|
onSetDisappearingMessages={() => null}
|
||||||
|
onDeleteMessages={() => null}
|
||||||
|
onDeleteContact={() => null}
|
||||||
|
onResetSession={() => null}
|
||||||
|
onCloseOverlay={() => null}
|
||||||
|
onDeleteSelectedMessages={() => null}
|
||||||
|
onArchive={() => null}
|
||||||
|
onMoveToInbox={() => null}
|
||||||
|
onShowSafetyNumber={() => null}
|
||||||
|
onShowAllMedia={() => null}
|
||||||
|
onShowGroupMembers={() => null}
|
||||||
|
onGoBack={() => null}
|
||||||
|
onBlockUser={() => null}
|
||||||
|
onUnblockUser={() => null}
|
||||||
|
onClearNickname={() => null}
|
||||||
|
onChangeNickname={() => null}
|
||||||
|
onCopyPublicKey={() => null}
|
||||||
|
onLeaveGroup={() => null}
|
||||||
|
onAddModerators={() => null}
|
||||||
|
onRemoveModerators={() => null}
|
||||||
|
onInviteFriends={() => null}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -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