@fruits-chain/sop-pro NPM

sop-pro

SOP 业务公共组件, 相比@fruits-chain/sop组件, 内部对 SOP 模板、答案、暂存、等功能进行了封装, 并内置了 loading、error 等状态下的 UI
默认内置了时间水印, 可以通过 watermark 属性传递用户自定义的水印文案

使用

yarn add @fruits-chain/sop-pro @fruits-chain/sop @fruits-chain/upload

请确保项目安装了上述包中peerDependencies列出的所有三方包，并仔细检查版本。

API

Form

SOP 表单组件

使用

import React from 'react'
import { Form, useSopRef } from '@fruits-chain/sop-pro'

const watermark = {
  // 改为true时, 如果获取水印文案失败(包括内部的时间获取), 则不能进行上传
  required: false,
  // 普通文本
  content: () => Promise.resolve(['第一行水印', '第二行水印']),
  // 支持富文本/图片, 详细见@fruits-chain/react-native-upload watermark配置
  richContent: [],
}

const Demo = () => {
  const sopFormRef = useSopRef()
  return (
    <Form
      ref={sopFormRef}
      title={'每个模板的title'} // 可以为render函数
      uuid={'全局唯一id'} // 推荐由路由+业务id+操作类型组成
      businessId={'业务id'}
      watermark={watermark} // 非必传, 默认{ required: false, content: () => Promise.resolve([]) }
      uploadProps={
        {
          // upload props, 此处的watermark会覆盖前面的watermark
        }
      }
      sopIds={'SOP ID组成的数组'}
    />
  )
}

Preview

SOP 预览组件

使用

import React from 'react'
import { Preview } from '@fruits-chain/sop-pro'

const Demo = () => {
  return (
    <Preview
      title={'每个模板的title'}
      businessId={'业务id'}
      sopIds={'SOP ID组成的数组'}
    />
  )
}