Skip to content

Commit

Permalink
some interface fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Emre Güdür committed Jun 22, 2022
1 parent a40b1e6 commit 4a677e1
Show file tree
Hide file tree
Showing 15 changed files with 501 additions and 657 deletions.
719 changes: 333 additions & 386 deletions example/utils/messageTypes.ts
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
View file
Expand Up @@ -3,9 +3,9 @@
"version": "12.0.0",
"description": "Reactjs chat components",
"author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
"main": "dist/index.js",
"main": "dist/main.js",
"types": "dist/type.d.ts",
"module": "dist/index.es.js",
"module": "dist/main.es.js",
"devDependencies": {
"@babel/core": "^7.18.5",
"@babel/preset-react": "^7.17.12",
Expand Down
6 changes: 4 additions & 2 deletions rollup.config.js
View file
Expand Up @@ -4,17 +4,18 @@ import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import commonjs from '@rollup/plugin-commonjs'
// import path from 'path'

export default [
{
input: './build/index.js',
output: [
{
file: 'dist/index.js',
file: 'dist/main.js',
format: 'cjs',
},
{
file: 'dist/index.es.js',
file: 'dist/main.es.js',
format: 'es',
exports: 'named',
},
Expand All @@ -23,6 +24,7 @@ export default [
postcss({
plugins: [],
minimize: true,
// extract: path.resolve('dist/main.css'),
}),
babel({
exclude: 'node_modules/**',
Expand Down
6 changes: 3 additions & 3 deletions src/AudioMessage/AudioMessage.tsx
View file
Expand Up @@ -3,15 +3,15 @@ import { IAudioMessageProps } from '../type'
import './AudioMessage.css'

const AudioMessage: React.FC<IAudioMessageProps> = props => {
const controlsList = props.message.controlsList
const controlsList = props.controlsList

return (
<div className={'rce-mbox-audio'} style={props.customStyle}>
<audio {...props.audioProps} controls controlsList={controlsList ? controlsList : 'nodownload'}>
<source src={props.message.audioURL} type={props.message.audioType || 'audio/mp3'} />
<source src={props.audioURL} type={props.audioType || 'audio/mp3'} />
Your browser does not support the audio element.
</audio>
{props.message.text && <div className='rce-mbox-text'>{props.message.text}</div>}
{props.text && <div className='rce-mbox-text'>{props.text}</div>}
</div>
)
}
Expand Down
20 changes: 10 additions & 10 deletions src/FileMessage/FileMessage.tsx
View file
Expand Up @@ -27,21 +27,21 @@ const FileMessage: React.FC<IFileMessageProps> = props => {
},
}

const error = props?.message?.status && props.message.status.error === true
const error = props?.data?.status && props?.data?.status.error === true

const onClick = (e: React.MouseEvent) => {
if (!props?.message?.status) return
if (!props?.data?.status) return

if (!props.message.status.download && props.onDownload instanceof Function) props.onDownload(e)
else if (props.message.status.download && props.onOpen instanceof Function) props.onOpen(e)
if (!props?.data?.status.download && props.onDownload instanceof Function) props.onDownload(e)
else if (props?.data?.status.download && props.onOpen instanceof Function) props.onOpen(e)
}

return (
<div className='rce-mbox-file'>
<button onClick={onClick}>
<div className='rce-mbox-file--icon'>
<FaFile color='#aaa' />
<div className='rce-mbox-file--size'>{props?.message?.size}</div>
<div className='rce-mbox-file--size'>{props?.size}</div>
</div>
<div className='rce-mbox-file--text'>{props.text}</div>
<div className='rce-mbox-file--buttons'>
Expand All @@ -50,15 +50,15 @@ const FileMessage: React.FC<IFileMessageProps> = props => {
<FaExclamationTriangle color='#ff3d3d' />
</span>
)}
{!error && props?.message?.status && !props?.message?.status.download && !props.message.status.click && (
{!error && props?.data?.status && !props?.data?.status.download && !props?.data?.status.click && (
<FaCloudDownloadAlt color='#aaa' />
)}
{!error &&
props?.message?.status &&
typeof props.message.status.loading === 'number' &&
props.message.status.loading !== 0 && (
props?.data?.status &&
typeof props?.data?.status.loading === 'number' &&
props?.data?.status.loading !== 0 && (
<ProgressCircle
animate={props.message.status.loading}
animate={props?.data?.status.loading}
className='rce-mbox-file--loading'
progressOptions={progressOptions}
/>
Expand Down
12 changes: 4 additions & 8 deletions src/LocationMessage/LocationMessage.tsx
View file
Expand Up @@ -7,14 +7,10 @@ const STATIC_URL =
const MAP_URL = 'https://www.google.com/maps/search/?api=1&query=LATITUDE,LONGITUDE&zoom=ZOOM'

const LocationMessage: React.FC<ILocationMessageProps> = props => {
const message = props.message

const buildURL = (url: string) => {
var center = props.message

return url
.replace(/LATITUDE/g, center?.latitude)
.replace(/LONGITUDE/g, center?.longitude)
.replace(/LATITUDE/g, props?.latitude)
.replace(/LONGITUDE/g, props?.longitude)
.replace('MARKER_COLOR', props?.markerColor)
.replace('ZOOM', props?.zoom)
.replace('KEY', props?.apiKey)
Expand All @@ -34,13 +30,13 @@ const LocationMessage: React.FC<ILocationMessageProps> = props => {
<a
onClick={props.onOpen}
target={props.target}
href={props.href || props.src || buildURL(message.mapURL || MAP_URL)}
href={props.href || props.src || buildURL(props.mapURL || MAP_URL)}
className={className()}
>
<img
onError={props.onError}
className='rce-mbox-location-img'
src={props.src || buildURL(message.staticURL || STATIC_URL)}
src={props.src || buildURL(props.staticURL || STATIC_URL)}
/>
</a>
{props.text && <div className='rce-mbox-text rce-mbox-location-text'>{props.text}</div>}
Expand Down
10 changes: 5 additions & 5 deletions src/MeetingLink/MeetingLink.tsx
View file
Expand Up @@ -4,18 +4,18 @@ import './MeetingLink.css'
import { MdOutlineVideoCall } from 'react-icons/md'
import { IMeetingLinkMessageProps } from '../type'

const MeetingLink: FC<IMeetingLinkMessageProps> = ({ message, onMeetingMoreSelect }) => {
const MeetingLink: FC<IMeetingLinkMessageProps> = props => {
const onHandleClick = (): void => {
onMeetingMoreSelect?.(message.meetingID || '')
props.onMeetingLinkClick?.(props.meetingID || '')
}

return (
<div className='rce-mtlink'>
<div className='rce-mtlink' onClick={onHandleClick}>
<div className='rce-mtlink-content'>
<div className='rce-mtlink-item'>
<div className='rce-mtlink-title'>{message.title}</div>
<div className='rce-mtlink-title'>{props.text}</div>
</div>
<div className='rce-mtlink-btn' onClick={onHandleClick}>
<div className='rce-mtlink-btn'>
<MdOutlineVideoCall className='rce-mtlink-svg' />
</div>
</div>
Expand Down

0 comments on commit 4a677e1

Please sign in to comment.