Nature's Particle Manager

    This package has been deprecated

    Author message:

    This package moved to [@the-/ui-chat](https://www.npmjs.com/package/@the-/ui-chat)

    the-chat

    2.0.44 • Public • Published

    the-chat

    Build Status npm Version JS Standard

    Chat UI of the-components

    Installation

    $ npm install the-chat --save

    Usage

    'use strict'
     
    import React from 'react'
    import { TheChat, TheChatStyle } from 'the-chat'
    import { TheImageStyle } from 'the-image'
    import { TheInputStyle } from 'the-input'
    import { TheButtonStyle } from 'the-button'
    import { TheVideoStyle } from 'the-video'
    import { TheSpinStyle } from 'the-spin'
    import { TheFormStyle } from 'the-form'
     
    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'
    ]
     
    class ExampleComponent extends React.Component {
      constructor (props) {
        super(props)
        this._timer = null
        this.state = {
          form: {},
          items: [
            {
              at: new Date('2017/10/01 12:34'),
              text: 'This is the first post from John',
              who: {
                name: 'John',
                image: images[0]
              }
            },
            {
              at: new Date('2017/10/02 12:34'),
              text: 'This is the second post from John',
              who: {
                name: 'John',
                image: images[0]
              }
            },
            {
              at: new Date('2017/10/03 12:34'),
              node: <span>This is the third post from John</span>,
              who: {
                name: 'John',
                image: images[0]
              }
            },
            {
              at: new Date('2017/10/08 12:38'),
              video: videos[0],
              who: {
                name: 'John The Video',
                image: images[1],
              }
            },
            {
              at: new Date('2017/10/08 14:38'),
              image: images[2],
              align: 'right',
              text: `This is an text\n hoge fuge fuge`,
              status: 'Read',
              who: {
                name: 'hoge',
              }
            },
            {
              raw: true,
              at: new Date('2017/10/08 14:44'),
              node: <h3>this is some raw data</h3>,
            },
            {
              at: new Date('2017/10/08 14:38'),
              image: images[2],
              align: 'right',
              who: {
                name: 'hoge',
                image: images[0]
              }
            },
          ]
        }
      }
     
      render () {
        const { items } = this.state
        return (
          <div>
            <TheVideoStyle/>
            <TheButtonStyle/>
            <TheInputStyle/>
            <TheImageStyle/>
            <TheSpinStyle/>
            <TheFormStyle/>
            <TheChatStyle/>
            <TheChat>
              <TheChat.TimeLine style={{
                height: '300px',
                border: '4px solid #333'
              }}
                                items={items}
                                onWho={(who) => console.log('who selected', who)}
                                onScrollReachTop={() => console.log('reached to top')}
                                onScrollReachBottom={() => console.log('reached to bottom')}
              />
              <TheChat.Form onUpdate={(form) => this.setState({ form })}
                            values={this.state.form}
                            onSubmit={() => this.setState({
                              form: {},
                              items: [...this.state.items, {
                                at: new Date(),
                                text: this.state.form.text,
                                align: 'right',
                                who: {
                                  name: 'Me',
                                  color: '#33A'
                                }
                              }]
                            })}
              />
            </TheChat>
     
            <hr/>
     
            <TheChat>
              <TheChat.TimeLine alt='Not chat yet'
                                empty={true}
              />
            </TheChat>
          </div>
     
        )
      }
     
      componentDidMount () {
        this._timer = setInterval(() => {
          const { items } = this.state
          if (window.DISABLE_THE_CHAT_PUSH) {
            return
          }
          this.setState({
            items: [...items, {
              at: new Date(),
              text: 'Say hoo!',
              align: this.state.items.length % 2 ? 'left' : 'right',
              who: {
                name: 'hoge',
                initial: 'H'
              }
            }]
          })
          console.log('item added')
        }, 5000)
      }
     
      componentWillUnmount () {
        clearInterval(this._timer)
      }
    }
     
    export default ExampleComponent
     

    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.

    Links

    Install

    npm i the-chat

    DownloadsWeekly Downloads

    74

    Version

    2.0.44

    License

    MIT

    Unpacked Size

    244 kB

    Total Files

    34

    Last publish

    Collaborators

    • fuji_haruka
    • okunishinishi