ETU-LIB

Dependencies

• react
• antd
• styled-components
• react-lazyload
• prop-types
• react-dnd

Include

• dnd (dnd.Sortable, dnd.generateSortable, dnd.sort, dnd.wrap)
• EllipsisText
• FielIcon
• FullScreenModal
• MediaList
• SlideShow
• View

Usage

• View

  Normal

  <View row flex={1} align='center' justify='center'
    width={200} height={100} background='#cccccc'
    radius={5}
    color='#ff0000'
    onClick={console.log}
  >
    hello
  </View>
  

  View.Center

  <View.Center height={100} radius={10} color='#ff00ff'>
    some text
  </View.Center>
  

• FileIcon

    import { FileIcon } from '@etu/lib'
    <FileIcon type={'pdf'} size={64} onClick={console.log} style={{}} />
  

  types

  

• MediaList

  • 普通视图

  

  • 全铺视图

  

  • 带文件名视图

  

  Usage

  import { MediaList, SlideShow } from '@etu/lib'
  import APIS from 'conf/apis'
  
  const getFile = id => APIS.getFile.id(id)
  const getDownload = id => APIS.getDownload.id(id)
  const getThumbnail = (id, width, height) => APIS.SIZE_THUMBNAIL.id(id).width(width).height(height)
  
  // 需重载这几个静态方法
  MediaList.bindGetFileFunctions({ getThumbnail, getFile, getDownload })
  SlideShow.bindGetFileFunctions({ getThumbnail, getFile, getDownload })
  
  const items = [
    {
      "type": "pdf",
      "media_id": "E77SKH7F7HXQ06YNZAF64GFC76Q9SEZA",
      "id": "E77SKH7F7HXQ06YNZAF64GFC76Q9SEZA",
      "name": "LastOfUs2.pdf"
    },
    {
      "data": "YM0JXBCAA84DJ7WEZ20TY5D4HZV3DHW3",
      "id": 381,
      "name": "【中文版】ETU PBL Backwards Design Template.docx",
      "type": "word"
    },
    {
      "media_id": "67BD020K2E6JMGX9R00NZ8DQ8KBSSWPG",
      "type": "picture",
      "name": "1530871462174.jpg",
      "extra": {
        "attrs": {
          "file_name": "1530871462174.jpg"
        }
      }
    }
  ]
  
  const App = connect(state => ({ slideshow: state.slideshow }))(({ slideshow }) => {
    return (
      <View height={400} align={'center'} justify={'center'}>
        <MediaList
          items={items}
          background={'transparent'}
          fixed noName
          onClick={(items, current) => console.log}
          hasDeleteButton={false}
          onDelete={id => console.log(id)}
          width={160}
          height={120}
          onSort={func}
          sortOptions={{
            type: 'SORT_ITEM',
            overStyle: {},
            draggingStyle: {},
            overClassName: '',
            draggingClassName: ''
          }}
        />
        <SlideShow
          canDownload
          sidebar={true}
          onClose={() => dispatch({ type: 'slideshow/HIDE' })}
          visible={slideshow.visible}
          medias={slideshow.items}
          current={slideshow.current}
        />
      </View>
    )
  })
  ReactDom.render(<App />, document.getElementById('root'))
  

• SlideShow

• FullScreenModal 全屏 Modal

• dnd 拖动排序

Usage

import { dnd } from '@etu/lib'

const Sortable = dnd.generateSortable('CARD')
// or const Sortable = dnd.Sortable // default type: 'SORT_ITEM'

@dnd.wrap
class List extends React.Component {
  state = {
    items: [1, 2, 3, 4]
  }

  handleSort = (currentIndex, hoverIndex, dropped, dragged) => {
    this.setState({
      items: dnd.sort(currentIndex, hoverIndex, this.state.items)
    })
  }

  handleDrop = (currentIndex, hoverIndex, dropped, dragged) => {
    // saveToServer(this.stat.items)
  }

  render() {
    return (
      <ul>
        {this.state.items.map((v, index) => (
          <Sortable component={'li'} index={index} onSort={this.handleSort} onDrop={this.handleDrop}>
            {v}
          </Sortable>
        ))}
      </ul>
    )
  }
}

ReactDom.mount(<List />, document.getElementById('root'))

• EllipsisText

  <EllipsisText height={20}>{text}</EllipsisText>