bose-comps v1.0.1-alpha.14

bose-comps

OA装修平台自定义组件.

数据结构

// node 节点
{
  // 基本属性
  name: '', // String 标题
  code: '', // String 属性
  t: '', // String 数据结构
  elemType: '', // String 组件
  children: [], // Array 子节点

  // 验证属性
  max: undefined, // Number 最大值
  min: undefined, // Number 最小值
  required: false, // Boolean 是否必填
  disabled: false, // Boolean 是否禁用
  pattern: undefined, // String 验证正则表达式
  patternTips: '', // String 正则验证失败提示

  // 组件属性
  className: undefined, // String 类名
  style: undefined, // Object 样式
  placeholder: undefined, // String 输入提示
  ext: {}, // Object 其他属性
  
  // 变量表达式
  valExpression: undefined, // String js 表达式
  defaultValExpression: undefined, // String js 表达式
  visibleExpression: undefined, // String js 表达式

  // 数据源
  ds: {},
}

// t 
// STRING 字符型
// DOUBLE 浮点型
// DATE ISO日期
// DATETIMEISO 时间日期
// YEAR IOS年
// MONTH ISO月
// TIME ISO时间
// BOOLEAN 布尔值
// COMPLEX 复杂类型
// ARRAY 数组

// max
// 如果数据结构为 'ARRAY', 则比较长度, 其他情况比较大小

// min
// 如果数据结构为 'ARRAY', 则比较长度, 其他情况比较大小

// className
// 暂不支持修改

// style
// 暂不支持修改

// ext 
// 统一储存组件其他的属性

// valExpression
// js表达式，用于读写数据，数组通配符 @
// 示例：'list[@].name'

// defaultValExpression
// js表达式，用于读写数据，数组通配符 @
// 示例：'list[@].name'
// 后端暂不支持

// visibleExpression
// js表达式，用于读写数据，数组通配符 @
// 示例：'list[@].name'

数据源

ds

{
  dsType: '', // String 数据源类型
  idField: '', // String id字段
  nameField: '', // String name字段
  kvs: [], // Array 键值对
  name: '', // String 查询参数name
  id: '', // String 查询参数id
  objectCode: '', // String 请求接口
  serviceVersion: '', // String 请求方式
  global: false, // Boolbean 全局变量
  display: '', // String 展示表达式
  remark: '', // String 说明
  params: {}, // Object 请求参数
}

// dsType
// 除了 'ENUM' 需要手动添加 kvs, 其他皆有后端返回数据，可配合高阶组件 withFetchDsProps 使用
// 'ENUM', 枚举
// 'BACK_ENUM', 后台枚举
// 'GW', 走开放平台
// 'DICT', 字典表
// 'LOCAL', 本地
// 'HTTP', 请求 

// display
// js表达式，用于读写数据，数组通配符 @
// 示例：'list[@].name'

// display
// 对象下属性值全为js表达式，用于读写数据，数组通配符 @
// {
//   name: 'list[@].name'
// }

基本组件

import Book, { Border, Tablet, Shell } from 'bose-comps';

Book // 表单展示组件
Border // 编辑表单组件
Tablet // 编辑组件
Shell // 外壳组件

Book 表单展示组件

// props
{
  data: undefined, // Object 表单数据
  node: {}, // node 节点
  parentNode: null, // node 父节点
  onChangeData: undefined, // Function 填写表单时回调
  refresh: false, // Boolean 是否实时刷新节点
}

// Book 使用示例

import React, { Component, createRef } from 'react'
import Book, { contexts } from 'bose-comps';

const {
  ComponentStore,
  StateStore,
  InterfaceStore,
} = contexts;

class Detail extends Component {
  bookRef: createRef();
  state = {
    data: {},
    node: {},
  }

  // 提交前验证
  onSubmit() {
    const { current } = this.bookRef;

    current.getData()
      .then(console.log)
      .catch((obj = {}) => {
        const { value, node = {} } = obj;
        const { name } = node;

        console.warn(`请正确输入${name}`);
      });
  }

  render() {
    const { data = {}, node = {} } = this.state;

    const onChangeData = data => this.setState({ data });

    return (
      <StateStore>
        <ComponentStore>
          <InterfaceStore>
            <Book
              node={node}
              data={data}
              ref={this.bookRef}
              onChangeData={this.onChangeData}
              />
          </InterfaceStore>
        </ComponentStore>
      </StateStore>
    );
  }
}

Border 编辑表单组件

// props
{
  data: undefined, //Object 表单数据
  node: {}, // node 节点
  parentNode: null,  // node 父级节点
}

Tablet 编辑组件

配合 Border使用，完成节点编辑

// props
{
  node: {}, // node 节点
  frame: true, // Boolean 是否显示外壳（shell 属性）
  width: undefined, // Number  外壳宽度（shell 属性）
  height: undefined, // Number 外壳高度（shell 属性）
}

// Tablet 使用示例
import React, { Component, createRef } from 'react'
import {
  Tablet,
  contexts,
  defaultNodeStructure,
} from 'bose-comps';

const {
  ComponentStore,
  StateStore,
  InterfaceStore,
  OptionStore,
} = contexts;

class Detail extends Component {
  state = {
    node: {},
  }

  render() {
    const { node: stateNode = {} } = this.state;

    const node = Object.assign({}, defaultNodeStructure, stateNode);

    return (
      <StateStore>
        <ComponentStore>
          <InterfaceStore>
            <OptionStore>
              <Tablet
                node={node}
                />
            </OptionStore>
          </InterfaceStore>
        </ComponentStore>
      </StateStore>
    );
  }
}

Shell 外壳组件

外壳样式，单纯展示使用，无复杂逻辑

{
  rotate: false, // Boolean 是否翻转
  frame: false, // Boolean 是否显示外壳
  width: 320, // Number 外壳宽度
  height: 480, // Number 外壳高度
  Container: 'div', // Component 容器
}

配置组件

import { contexts } from 'bose-comps';

const {
  StateStore, // 数据通信
  ComponentStore, // 组件配置
  InterfaceStore, // 接口配置
  OptionStore, // 公用操作
}

StateStore 数据通信

import { contexts } from 'bose-comps';

const { StateStore } = contexts;

// props
{
  baseState: {}, // 基本state, 仅constructor时调用
  onChangeState: undefined, // _setState 回调
}

// 未开放API, 组件内部使用
import { withStore as withStateStore } from 'js/bose/contexts/StateStore';

// context props
{
  _state: {
    global: {}, // Object 全局变量 计算表达式使用
    selectedNode: {}, // node 当前选中节点
    selectedParentNode: null, // node 当前选中节点的父级
    copiedNode: {}, // node 当前复制节点
    copiedParentNode: null, // node 当前复制节点的父级
    dragedNode: {}, // node 当前拖拽节点
    dragedParentNode: null, // node 当前拖拽节点的父级
    visibleDs: false, // Boolbean 是否显示数据源编辑项
  },
  _setState: () => undefined, // Function, 和 setState 用法一致
  _setGlobal: (obj = {}, codes = []) => undefined, // Function 设置全局变量
  _getGlobal: (expression = '', codes = [], otherData = {}) => value, // Function 返回表达式计算结果
}

ComponentStore 组件配置

import { contexts } from 'bose-comps';

const { ComponentStore } = contexts;

// props
{
  moreComponents: undefined, // Object 扩展部分组件 
  allComponents: undefined, // Object 替换全部组件 
}

// 示例 moreComponents or allComponents
// {
//   'Container': 'div',
//   'Input': 'input',
// }

// 未开放API, 组件内部使用
import { withStore as withComponentStore } from 'js/bose/contexts/ComponentStore';

// context props
{
  _getComp: (ComponentName) => Component, // Function
  _getAllComponents: () => {}, // Function
}

// 返回结果示例 _getAllComponents
// {
//   'Container': 'div',
//   'Input': 'input',
// }

InterfaceStore 组件配置

import { contexts } from 'bose-comps';

const { InterfaceStore } = contexts;

// props
{
  onFetch: fetchOpts => Promise, // Function 请求方法 
  onUpload: File => Url, // Function 上传方法 
}

// 未开放API, 组件内部使用
import { withStore as withInterfaceStore } from 'js/bose/contexts/InterfaceStore';

// context props
{
  _fetch: fetchOpts => Promise, // Function 请求方法
  _upload: File => Url, // Function 上传方法 
}

OptionStore 组件配置

import { contexts } from 'bose-comps';

const { OptionStore } = contexts;

// props
{
  baseNodeStructure: defaultNodeStructure, // Object 默认节点数据结构
  node: {}, // node 根结点 
}

// defaultNodeStructure
// {
//   code: '',
//   name: '',
//   t: 'COMPLEX',
//   elemType: 'Container',
// }

// 未开放API, 组件内部使用
import { withStore as withOptionStore } from 'js/bose/contexts/OptionStore';

// context props
{
  _baseNodeStructure: defaultNodeStructure, // Object 默认节点数据结构
  _createNode: (opts = {}) => node, // Function 创建节点
  _deleteNode: (node = {}) => undefined, // Function 删除节点
  _convertDateFromModeToT: mode => t, // Function 时间数据结构转换
  _convertDateFromTToMode: t => mode, // Function 时间数据结构转换
  _draging: () => Boolean, // Function 是否正在拖拽
  _selected: (node = {}) => Boolean, // Function 该节点是否选中
  _draged: (node = {}) => Boolean, // Function 该节点是否被拖拽
  _createDroppedPlaceholderNode: () => DroppedPlaceholderNode, // Function 创建拖拽占位符节点
  _addDroppedPlaceholderNode: (node = {}) => undefined, // Function 插入拖拽占位符到该节点最后一位
  _insertDroppedPlaceholderNode: (node = {}, parentNode = {}, offset = 0) => undefined, // Function 插入拖拽占位符到节点相邻位置
  _removeDroppedPlaceholderNode: () => undefined, // Function 删除拖拽占位符
  _clearDragedNode: () => undefined, // Function 删除拖拽节点
  _setSelectedNode: (node = {}, parentNode = {}) => undefined, // Function 选中节点
  _onMouseMoveDrag: (e, node, parentNode, cb) => undefined,
  _onMouseDownDrag: (e, node, parentNode) => undefined,
  _onMouseUpDrag: (e, node, parentNode) => undefined,
  _getNodeBoseInfo: (node) => boseInfo, // Function 获取组件信息
  _needCode: (node = {}) => Boolean, // Function 当前节点是否需要输入Code
}

// defaultNodeStructure
// {
//   code: '',
//   name: '',
//   t: 'COMPLEX',
//   elemType: 'Container',
// }

组件信息

// boseInfo
{
  name: '', // String 组件名
  title: '', // String 组件展示名
  type: '', // String 组件类型
  hasDs: false, // Boolean 是否使用数据源，与高阶组件 withFetchDsProps 配合使用
  needPlaceholder: false, // Boolean 拖拽组件时，是否需要占位符辅助拖拽
  noChildren: false, // Boolean 组件是否需要children
  dataTypes: ['COMPLEX', 'ARRAY'], // ARRAY 组件适用的数据类型
}

// type
// 'Layout' 布局组件
// 'DataDisplay' 数据展示组件
// 'DataEntry' 数据编辑组件
// 'Navigation' 导航组件
// 'FeedBack' 交互组件
// 'Gesture' 手势组件
// 'Combination' 复合组件

// dataTypes
// STRING 字符型
// DOUBLE 浮点型
// DATE ISO日期
// DATETIMEISO 时间日期
// YEAR IOS年
// MONTH ISO月
// TIME ISO时间
// BOOLEAN 布尔值
// COMPLEX 复杂类型
// ARRAY 数组

// Input boseInfo
// {
//   name: 'Input',
//   title: '输入框',
//   type: 'DataEntry',
//   noChildren: true,
//   dataTypes: [STRING, DOUBLE],
// };

// Container boseInfo
// {
//   name: 'Container',
//   title: '容器',
//   type: 'Layout',
//   needPlaceholder: true,
// }

高阶组件

import { wrappers } from 'bose-comps';

const {
  withBoseContainer: ContainerComp => Comp => Comp, // 装修时使用 包裹当前节点组件
  withChildrenOutside: Comp => Comp, // 装修时使用 noChildren 为true时需要
  withMaskOutside: Comp => Comp, //装修时使用 点击蒙层外置
  withBoseAndChildrenOutside: Comp => Comp, // 合并 withChildrenOutside，withMaskOutside，withBoseContainer
  withBoseAndMaskOutside: Comp => Comp, // 合并 withMaskOutside，withBoseContainer
  withBoseNodeInside: Comp => Comp, // 特殊情况，Grid 栅格组件使用
  withBoseProps: Comp => Comp,
  withBoseFromItemProps: Comp => Comp,
  withFetchDsProps: Comp => Comp, // 获取数据源
};