@zhike/ti-component v2.0.24

ti-component

题库的通用组件，提取为依赖库并统一发布在npm

demo本地运行指南

点击查看在线demo或按照以下方法在本地运行demo

cnpm install 
npm run storybook
open http://localhost:3002/

目前只支持 cnpm启动；部分电脑npm启动还存在问题，目前还未解决；

  如果你本地未安装 cnpm命令；可以使用淘宝镜像进行安装

  npm install -g cnpm --registry=https://registry.npm.taobao.org

直接使用npm包指南

安装

npm install --save @zhike/ti-component

安装项目同级依赖，缺少依赖会触发npm警告，如已安装可跳过

npm install --save react aphrodite axios lodash form-data @zhike/ti-ui

在页面使用需要的组件

import React from 'react'
import { Modal } form '@zhike/ti-component'
import Header from 'xxx'
import AudioPlayer from 'xxx'

class MyComponent extends React.Component {
  componentDidMount() {
    Modal.show('ModalAlert', {
      title: 'Alert',
      buttons: [{ title: 'OK' }],
      width: 400,
      isUnhide: true,
      isReport: false,
      component: (
        <div>Hello World!</div>
      ),
    },
    onShow: () => {
      AudioPlayer.pause();
      Header.pauseTimerForModal();
    },
    onHide: () => {
      Header.startTimerForModal();
      AudioPlayer.resume();
    });
  }
}

export default MyComponent

开发指南

1. 修改package.json文件的版本号
2. 打包到lib文件夹并发布

npm run build
npm publish

API

Audio组件改造：

• 调用该组件需要在props中传入cdnUrl字段，请从common/config引用

Modal组件改造：

• type, option, onShow, onHide
• type为字符串，可选值'ModalAlert'或'ModalCorrect'。根据传入的字符串匹配Modal内的实例对象，以后不需要在组件中引入实例
• 若type为ModalCorrect， 则props需要再传入一个option对象，用于上传纠错信息时添加自定义属性。必传值：

{
  version: '1.0.0', // 请从common/config引用version字段
  source: 'ti-base', // ti-base/ti-toefl/...
  getUploadSignature,
  postCorrection,
}

• 新增加的onShow/onHide是为了降低耦合度，在抽离的组件中减少不合理的引用
• onShow(可选)，在isReport为false的时候执行，一般情况下，传入以下方法：

() => {
  AudioPlayer.pause();
  Header.pauseTimerForModal();
}

• onHide(可选)，在isReport为false，且Modal全部关闭后执行，一般情况下，传入以下方法：

() => {
  Header.startTimerForModal();
  AudioPlayer.resume();
}

Recorder组件改造：

• start方法接收一个对象参数{callback, mode, skip}
• callback方法为启动成功后的回调函数，默认空函数
• mode/skip非必填，会在启动失败时用到，mode为字符串，skip为函数。如果启动失败，判断mode === 'mock'，如果为true，则会在弹窗提示中添加一个“跳过口语”的按钮，点击触发skip方法

Article组件：

富文本渲染组件， 支持athene后台，插入的题库专用的富文本结构，支持的富文本结构如下：

{
    "paragraphs": [
        {
            "id": "b4d07a69-1207-6570-9a62-05d5051484c2",
            "text": "Dreamtime travel agency",
            "type": "Text"
        },
        {
            "id": "cefc2a71-0d89-1411-016b-f08ccd455752",
            "text": "Tour information",
            "type": "Text"
        },
        {
            "id": "69867f02-f19f-4c19-1d69-65a06d5b29d0",
            "text": " Example Answer",
            "type": "Text"
        },
        {
            "id": "2a887672-9f06-749a-5947-e9d539b224a8",
            "text": "Holiday name Whale Watch Experience",
            "type": "Text"
        },
        {
            "id": "b51aaffa-4e0b-fc8f-6f8c-dfb1f40e7862",
            "text": "Holiday length 2 days",
            "type": "Text"
        },
    ],
    "inlineMarkup": [
        {
            "pid": "b51aaffa-4e0b-fc8f-6f8c-dfb1f40e7862",
            "type": "BlankTable",
            "index": 17,
            "length": 4
        },
        {
            "pid": "b4d07a69-1207-6570-9a62-05d5051484c2",
            "type": "FontSize",
            "index": 0,
            "value": "h1",
            "length": 23
        },
        {
            "pid": "cefc2a71-0d89-1411-016b-f08ccd455752",
            "type": "FontSize",
            "index": 0,
            "value": "h2",
            "length": 16
        },
        {
            "pid": "69867f02-f19f-4c19-1d69-65a06d5b29d0",
            "type": "Bold",
            "index": 1,
            "length": 40
        },
    ],
    "articleMarkup": {},
    "paragraphMarkup": [
        {
            "pid": "b4d07a69-1207-6570-9a62-05d5051484c2",
            "type": "Align",
            "value": "center"
        },
        {
            "pid": "cefc2a71-0d89-1411-016b-f08ccd455752",
            "type": "Align",
            "value": "center"
        }
    ]
}

用于富文本的解析及渲染

富文本样式

• 文章样式：

• 段落样式：

• 行内样式：

• Article 首先处理富文本段落，将段落进行分段处理，每段有对应的行内样式(表格题,填空题, 拖拽题),还有对应的段落样式（缩进，加粗，斜体，下划线， 字体大小）,在段落中插入的（图片Image && 音频 Audio资源）
• 内部的Block组件，实现每个段落的样式渲染；
• isTextOnly 是否只有文本，则不具有行内样式和段落样式
• handleAnswer 处理一些题目答案的回调函数
• isReport 是否是报告页，报告页与答题页样式渲染有差异
• location 托福题库中使用，切换页面时，富文本滑动定位到顶部
• question 习题， 雅思在线练习，需要将多个变量进行合并
• answer 数组，填空题，表格题，拖拽题用户的答案，用于报告页的渲染

雅思的富文本 新增添了一些功能

• isIelts 来区分是否是雅思题库
• qNum 雅思填空题 && 拖拽题 用来显示题号
• materialIds雅思填空题 && 拖拽题 与footer组件配合使用，用来定位
• answerRsult 雅思报告页答案集合
• handleQuestionSelect 处理答案选中的回调函数
• paragraphClassName 段落样式，用来从外部设置富文本的段落样式

表格填空题使用到的：

• externalInitAnswer 外部累计InsertBlank数量