@zhike/ti-component

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"
        }
    ]
}

用于富文本的解析及渲染

富文本样式

• 文章样式：

所在字段	名称	字段	value
articleMarkup	定位段	anchorPid	pid
articleMarkup	起始段	headPid	pid
articleMarkup	结尾段	tailPid	pid

• 段落样式：

所在字段	名称	type	value
paragraphMarkup	左对齐	Align	left
paragraphMarkup	右对齐	Align	right
paragraphMarkup	居中	Align	center
paragraphMarkup	缩进	Indent
paragraphMarkup	添加图片	Image	right
paragraphMarkup	添加音频	Audio	center

• 行内样式：

所在字段	名称	type	value
inlineMarkup	高亮	Highlight
inlineMarkup	加粗	Bold
inlineMarkup	斜体	Italic
inlineMarkup	下划线	Underline
inlineMarkup	填空	InsertBlank
inlineMarkup	表格填空	BlankTable
inlineMarkup	拖拽	DragBlank
inlineMarkup	大标题	FontSize	h1
inlineMarkup	小标题	FontSize	h2
inlineMarkup	普通	FontSize	normal
inlineMarkup	上标	FontSize	sup
inlineMarkup	下标	FontSize	sub
inlineMarkup	插入耳机	Earphone	left right
inlineMarkup	插入黑块️	Insert	left right
inlineMarkup	插入箭头	insertArrow	left right
inlineMarkup	插入短横线	insertLine	left right
inlineMarkup	插入中横线	insertLine	left right
inlineMarkup	插入长横线	insertLine	left right

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

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

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

表格填空题使用到的：

• externalInitAnswer 外部累计InsertBlank数量