the-chat
Chat UI of the-components
Installation
$ npm install the-chat --save
Usage
'use strict' const images = 'https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/01.jpg' 'https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/02.jpg' 'https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/03.jpg' const videos = './mov_bbb.mp4' Component { superprops this_timer = null thisstate = form: {} items: at: '2017/10/01 12:34' text: 'This is the first post from John' who: name: 'John' image: images0 at: '2017/10/02 12:34' text: 'This is the second post from John' who: name: 'John' image: images0 at: '2017/10/03 12:34' node: <span>This is the third post from John</span> who: name: 'John' image: images0 at: '2017/10/08 12:38' video: videos0 who: name: 'John The Video' image: images1 at: '2017/10/08 14:38' image: images2 align: 'right' text: `This is an text\n hoge fuge fuge` status: 'Read' who: name: 'hoge' raw: true at: '2017/10/08 14:44' node: <h3>this is some raw data</h3> at: '2017/10/08 14:38' image: images2 align: 'right' who: name: 'hoge' image: images0 } { const items = thisstate return <div> <TheVideoStyle/> <TheButtonStyle/> <TheInputStyle/> <TheImageStyle/> <TheSpinStyle/> <TheFormStyle/> <TheChatStyle/> <TheChat> <TheChatTimeLine style= height: '300px' border: '4px solid #333' items=items onWho= console onScrollReachTop= console onScrollReachBottom= console /> <TheChatForm onUpdate= this values=thisstateform onSubmit= this /> </TheChat> <hr/> <TheChat> <TheChatTimeLine alt='Not chat yet' empty=true /> </TheChat> </div> } { this_timer = } { }
Components
TheChat
Chat UI of the-components
TheChatForm
Chat UI of the-components
Props
Name | Type | Description | Default |
---|---|---|---|
disabled |
bool | Disabled attribute | false |
maxRows |
number | Max rows | 5 |
minLength |
number | Minimum text length | 1 |
minRows |
number | Min rows | 2 |
onSubmit |
func | Handler for value submit | () => null |
onUpdate |
func | Handler for value update | () => null |
spinning |
bool | false |
|
submitText |
string | Text for submit | 'Send' |
values |
object | Form values | {} |
autoExpand |
true |
TheChatStyle
Style for TheChat
Props
Name | Type | Description | Default |
---|---|---|---|
options |
object | Style options | {} |
TheChatTimeLine
Chat Time line
Props
Name | Type | Description | Default |
---|---|---|---|
alt |
string | Alt text | 'No chat yet' |
items |
arrayOf object | Item data | [] |
lang |
string | Lang | 'en' |
onScrollReachBottom |
func | Handler when scroll reaches bottom | null |
onScrollReachTop |
func | Handler when scroll reaches top | null |
onWho |
func | Handler for who tap | null |
spinning |
bool | Shows spin | false |
whoBaseColor |
string | Base color of who | TheChatTimeLineItem.DEFAULT_WHO_BASE_COLOR |
whoImageSize |
number | Size of who image | TheChatTimeLineItem.DEFAULT_WHO_IMAGE_SIZE |
TheChatTimeLineItem
Chat Time line item
Props
Name | Type | Description | Default |
---|---|---|---|
align |
enum | Content align | 'left' |
at |
instanceOf | null |
|
image |
union | Image Url | null |
onWho |
func | Handler for click who | () => null |
status |
string | Status text | null |
text |
string | Text | null |
video |
union | Video url | null |
who |
object | Who posts | {} |
whoBaseColor |
string | Base color of who | TheChatTimeLineItem.DEFAULT_WHO_BASE_COLOR |
whoImageSize |
number | Image size of who | TheChatTimeLineItem.DEFAULT_WHO_IMAGE_SIZE |
License
This software is released under the MIT License.