Add an Outgoing Message Status react component
Audric Ackermann
4 years ago
parent
788cb2a5fc
commit
0a6a49eda5
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 784 B |
@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" width="12px" height="12px">
|
||||
<g id="surface1">
|
||||
<path style=" " d="M 6.570313 1 L 6.328125 2.289063 C 5.398438 2.5625 4.570313 3.046875 3.890625 3.695313 L 2.652344 3.261719 L 1.222656 5.738281 L 2.210938 6.585938 C 2.097656 7.042969 2 7.507813 2 8 C 2 8.492188 2.097656 8.957031 2.210938 9.414063 L 1.222656 10.261719 L 2.652344 12.738281 L 3.886719 12.300781 C 4.570313 12.957031 5.398438 13.4375 6.328125 13.714844 L 6.570313 15 L 9.429688 15 L 9.671875 13.714844 C 10.601563 13.4375 11.429688 12.953125 12.109375 12.300781 L 13.34375 12.738281 L 14.777344 10.261719 L 13.785156 9.414063 C 13.898438 8.957031 14 8.492188 14 8 C 14 7.507813 13.902344 7.042969 13.789063 6.585938 L 14.777344 5.738281 L 13.347656 3.261719 L 12.113281 3.695313 C 11.429688 3.042969 10.601563 2.5625 9.671875 2.289063 L 9.429688 1 Z M 7.398438 2 L 8.601563 2 L 8.796875 3.054688 L 9.117188 3.132813 C 10.109375 3.359375 10.984375 3.878906 11.65625 4.597656 L 11.878906 4.835938 L 12.894531 4.480469 L 13.496094 5.519531 L 12.683594 6.21875 L 12.78125 6.53125 C 12.921875 6.992188 13 7.488281 13 8 C 13 8.511719 12.921875 9.003906 12.78125 9.46875 L 12.683594 9.78125 L 13.496094 10.480469 L 12.894531 11.519531 L 11.878906 11.160156 L 11.65625 11.402344 C 10.984375 12.121094 10.109375 12.640625 9.117188 12.871094 L 8.796875 12.941406 L 8.601563 14 L 7.398438 14 L 7.203125 12.941406 L 6.882813 12.871094 C 5.890625 12.640625 5.015625 12.121094 4.34375 11.402344 L 4.117188 11.160156 L 3.101563 11.519531 L 2.503906 10.480469 L 3.316406 9.78125 L 3.21875 9.46875 C 3.078125 9.007813 3 8.511719 3 8 C 3 7.488281 3.078125 6.992188 3.21875 6.53125 L 3.316406 6.21875 L 2.503906 5.519531 L 3.101563 4.480469 L 4.121094 4.835938 L 4.34375 4.597656 C 5.015625 3.878906 5.890625 3.359375 6.882813 3.132813 L 7.203125 3.054688 Z M 8 5 C 6.347656 5 5 6.347656 5 8 C 5 9.652344 6.347656 11 8 11 C 9.652344 11 11 9.652344 11 8 C 11 6.347656 9.652344 5 8 5 Z M 8 6 C 9.109375 6 10 6.890625 10 8 C 10 9.109375 9.109375 10 8 10 C 6.890625 10 6 9.109375 6 8 C 6 6.890625 6.890625 6 8 6 Z "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1015 B |
@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>sending</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="iOS-Light" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="iOS-Light/Message/Status/Sending" transform="translate(-6.000000, 0.000000)" fill="#000000">
|
||||
<path d="M11.5,0 L12.5,0 L12.5,1 L11.5,1 L11.5,0 Z M11.5,11 L12.5,11 L12.5,12 L11.5,12 L11.5,11 Z M6,5.5 L7,5.5 L7,6.5 L6,6.5 L6,5.5 Z M17,5.5 L18,5.5 L18,6.5 L17,6.5 L17,5.5 Z M16.9461524,2.5669873 L17.4461524,3.4330127 L16.580127,3.9330127 L16.080127,3.0669873 L16.9461524,2.5669873 Z M7.41987298,8.0669873 L7.91987298,8.9330127 L7.05384758,9.4330127 L6.55384758,8.5669873 L7.41987298,8.0669873 Z M9.4330127,0.553847577 L9.9330127,1.41987298 L9.0669873,1.91987298 L8.5669873,1.05384758 L9.4330127,0.553847577 Z M14.9330127,10.080127 L15.4330127,10.9461524 L14.5669873,11.4461524 L14.0669873,10.580127 L14.9330127,10.080127 Z M14.5669873,0.553847577 L15.4330127,1.05384758 L14.9330127,1.91987298 L14.0669873,1.41987298 L14.5669873,0.553847577 Z M9.0669873,10.080127 L9.9330127,10.580127 L9.4330127,11.4461524 L8.5669873,10.9461524 L9.0669873,10.080127 Z M7.05384758,2.5669873 L7.91987298,3.0669873 L7.41987298,3.9330127 L6.55384758,3.4330127 L7.05384758,2.5669873 Z M16.580127,8.0669873 L17.4461524,8.5669873 L16.9461524,9.4330127 L16.080127,8.9330127 L16.580127,8.0669873 Z" id="sending"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,126 @@
|
||||
import React from 'react';
|
||||
import styled, { DefaultTheme } from 'styled-components';
|
||||
import {
|
||||
SessionIcon,
|
||||
SessionIconSize,
|
||||
SessionIconType,
|
||||
} from '../../session/icon';
|
||||
|
||||
const MessageStatusSendingContainer = styled.div`
|
||||
min-width: 12px;
|
||||
min-height: 12px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
display: inline-block;
|
||||
margin-bottom: 2px;
|
||||
margin-inline-start: 5px;
|
||||
`;
|
||||
|
||||
const MessageStatusSending = (props: {
|
||||
theme: DefaultTheme;
|
||||
withImageNoCaption: boolean;
|
||||
}) => {
|
||||
const iconColor = props.withImageNoCaption ? 'white' : undefined;
|
||||
return (
|
||||
<MessageStatusSendingContainer>
|
||||
<SessionIcon
|
||||
rotateDuration={2}
|
||||
iconColor={iconColor}
|
||||
theme={props.theme}
|
||||
iconType={SessionIconType.Sending}
|
||||
iconSize={SessionIconSize.Tiny}
|
||||
/>
|
||||
</MessageStatusSendingContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const MessageStatusSent = (props: {
|
||||
theme: DefaultTheme;
|
||||
withImageNoCaption: boolean;
|
||||
}) => {
|
||||
const iconColor = props.withImageNoCaption ? 'white' : undefined;
|
||||
|
||||
return (
|
||||
<MessageStatusSendingContainer>
|
||||
<SessionIcon
|
||||
iconColor={iconColor}
|
||||
theme={props.theme}
|
||||
iconType={SessionIconType.CircleCheck}
|
||||
iconSize={SessionIconSize.Small}
|
||||
/>
|
||||
</MessageStatusSendingContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const MessageStatusDelivered = (props: {
|
||||
theme: DefaultTheme;
|
||||
withImageNoCaption: boolean;
|
||||
}) => {
|
||||
const iconColor = props.withImageNoCaption ? 'white' : undefined;
|
||||
return (
|
||||
<MessageStatusSendingContainer>
|
||||
<SessionIcon
|
||||
iconColor={iconColor}
|
||||
theme={props.theme}
|
||||
iconType={SessionIconType.DoubleCheck}
|
||||
iconSize={SessionIconSize.Small}
|
||||
/>
|
||||
</MessageStatusSendingContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const MessageStatusRead = (props: {
|
||||
theme: DefaultTheme;
|
||||
withImageNoCaption: boolean;
|
||||
}) => {
|
||||
const iconColor = props.withImageNoCaption ? 'white' : undefined;
|
||||
|
||||
return (
|
||||
<MessageStatusSendingContainer>
|
||||
<SessionIcon
|
||||
iconColor={iconColor}
|
||||
theme={props.theme}
|
||||
iconType={SessionIconType.Read}
|
||||
iconSize={SessionIconSize.Small}
|
||||
/>
|
||||
</MessageStatusSendingContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const MessageStatusError = (props: {
|
||||
theme: DefaultTheme;
|
||||
withImageNoCaption: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<MessageStatusSendingContainer>
|
||||
<SessionIcon
|
||||
iconColor={props.theme.colors.destructive}
|
||||
theme={props.theme}
|
||||
iconType={SessionIconType.Error}
|
||||
iconSize={SessionIconSize.Small}
|
||||
/>
|
||||
</MessageStatusSendingContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const OutgoingMessageStatus = (props: {
|
||||
status?: 'sending' | 'sent' | 'delivered' | 'read' | 'error' | 'pow';
|
||||
theme: DefaultTheme;
|
||||
withImageNoCaption: boolean;
|
||||
}) => {
|
||||
switch (props.status) {
|
||||
case 'pow':
|
||||
case 'sending':
|
||||
return <MessageStatusSending {...props} />;
|
||||
case 'sent':
|
||||
return <MessageStatusSent {...props} />;
|
||||
case 'delivered':
|
||||
return <MessageStatusDelivered {...props} />;
|
||||
case 'read':
|
||||
return <MessageStatusRead {...props} />;
|
||||
case 'error':
|
||||
return <MessageStatusError {...props} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue