rongcaptial-ui v1.0.0-alpha.1

Rongcapital UI

                                                    __----~~~~~~~~~~~------___
                                   .  .   ~~//====......          __--~ ~~
                   -.            \_|//     |||\\  ~~~~~~::::... /~
                ___-==_       _-~o~  \/    |||  \\            _/~~-
        __---~~~.==~||\=_    -_--~/_-~|-   |\\   \\        _/~
    _-~~     .=~    |  \\-_    '-~7  /-   /  ||    \      /
  .~       .~       |   \\ -_    /  /-   /   ||      \   /
 /  ____  /         |     \\ ~-_/  /|- _/   .||       \ /
 |~~    ~~|--~~~~--_ \     ~==-/   | \~--===~~        .\
          '         ~-|      /|    |-~\~~       __--~~
                      |-~~-_/ |    |   ~\_   _-~            /\
                           /  \     \__   \/~                \__
                       _--~ _/ | .-~~____--~-/                  ~~==.
                      ((->/~   '.|||' -_|    ~~-/ ,              . _||
                                 -_     ~\      ~~---l__i__i__i--~~_/
                                 _-~-__   ~)  \--______________--~~
                               //.-~~~-~_--~- |-------~~~~~~~~
                                      //.-~~~--\

组件系统按行为分为视觉组件和视图组件. 视觉组件有可见外观, 尺寸, 前景色, 背景色等属性; 视图组件无视觉效果, 仅决定从属组件的布局方式. 采用属性继承的方式, 将数据仅向下传递. 本组件系统与业务无关, 但仅为Cube服务.

构建开发版本

npm run release:dev 生成开发版本

构建生产版本

npm run release 生成生产版本

启动开发服务

npm run dev 开始开发

工具

• Enzyme
• stroybook

其他重要依赖

• react-custom-scrollbars
• core-decorators
• react-dnd

Core components

核心视图组件, 无视觉效果, 但决定从属组件布局. 非常重要, 决定了后续其他 Base Components 的实现. 大约需要 30 人/日.

• View 基础视图组件

  属性名	类型	备注
  height	number	高度
  width	number	宽度
  children	element	从属元素
  inline	boolean	默认false, 使用内联布局

  const component = () => 
      <View />;

  const component = () => 
      <View width={ 100 } height={ 100 } />;

  const component = () => 
      <View width={ 100 } height={ 100 }>
          <div>Hello World</div>
      </View>;

• CollectionView 单纯的无布局的容器组件, ListView, GridView均是具体实现, 继承自View视图组件

  属性名	类型	备注
  itemLayout	func(item, index)	在渲染前可以重新制定子元素渲染方案

  const itemLayout = (item, index) => ( 
      React.cloneElement(item, {
          ...item.props,
          style: {
              position: 'absolute',
              right: 50 * index,
              width: 50,
              height: 50,
          }
      }));
  
  const component = () =>
      <CollectionView width={ 500 } height={ 300 } itemLayout={ itemLayout }>
          <div>Hello</div>
          <div>Hello</div>
          <div>Hello</div>
      </CollectionView>;

• GridView CollectionView的一种具体实现, 网格布局视图组件, 继承自CollectionView视图组件

  属性名	类型	备注
  rows	number	必填, 行数
  columns	number	必填, 列数
  cellLayout	func(config)	设置网格布局, 比如合并单元格

  const cellLayout = () => {
      cells[0].rowspan = 2;
      cells[0].colspan = 2;
      cells[1].isMounted = false; // 单元格已被合并, 所以不再挂载
      cells[3].isMounted = false;
      cells[4].isMounted = false;
  
      return cells;
  };
  
  const component = () =>
      <GridView width={ 300 } height={ 300 } rows={ 4 } columns={ 3 } cellLayout={ cellLayout }>
          <div>item 0</div>
          <div>item 1</div>
          <div>item 2</div>
          <div>item 3</div>
          <div>item 4</div>
          <div>item 5</div>
          <div>item 6</div>
          <div>item 7</div>
          <div>item 8</div>
          <div>item 9</div>
          <div>item 10</div>
          <div>item 11</div>
          <div>item 12</div>
      </GridView>

• ListView CollectionView的一种具体实现, 有水平排列或垂直排列效果的视图组件, 继承自CollectionView视图组件

  属性名	类型	备注
  mode	number	默认垂直排列

  const component = () =>
      <ListView>
          <div>item 0</div>
          <div>item 1</div>
          <div>item 2</div>
          <div>item 3</div>
          <div>item 4</div>
          <div>item 5</div>
      </ListView>

  const MODE = ListView.MODE;
  const component = () =>
      <ListView mode={ MODE.HORIZONTAL } inline>
          <div>item 0</div>
          <div>item 1</div>
          <div>item 2</div>
          <div>item 3</div>
          <div>item 4</div>
          <div>item 5</div>
      </ListView>

• NavigationView 有stack结构的视图组件, 继承自View视图组件

  属性名	类型	备注
  index	number	当前显示从属元素索引, Zero-base
  beforeNext	func	显示下一个元素之前
  afterNext	func	显示下一个元素之后
  beforePrev	func	显示上一个元素之前
  afterPrev	func	显示上一个元素之后

  const ItemView = ({ children, next, prev }) => (
      <div>
          <p>{ children }</p>
          <div>
              <button onClick={ compose(prev, action('prev')) }>Prev</button>
              <button onClick={ compose(next, action('next')) }>Next</button>
          </div>
      </div>
  );
  
  const component = () =>
      <NavigationView width={ 200 } height={ 100 } index={ 2 }>
          <ItemView>item 0</ItemView>
          <ItemView>item 1</ItemView>
          <ItemView>item 2</ItemView>
      </NavigationView>

• ScrollView 有滚动效果的视图组件, 继承自View视图组件

  属性性	类型	备注
  width	number	必选, 宽度
  height	number	必选, 高度

  const component = () =>
      <ScrollView width={ 500 } height={ 300 }>
          <div style={ temp }>items 1</div>
          <div style={ temp }>items 2</div>
          <div style={ temp }>items 3</div>
          <div style={ temp }>items 4</div>
          <div style={ temp }>items 5</div>
      </ScrollView>

Base components

基础视觉组件, 仅有外观, 无关布局的组件. 次等重要, 决定复杂 Business Components 的实现. 大约 60 人/日.

• Breadcrumbs 面包屑视觉组件, 继承自ListView视图组件的高阶组件

• ActionBar 应用标题视觉组件, 继承自ListView视图组件的高阶组件

  • ActionBar.Item ActionBar中的视图组件
  • ActionBar.Separator ActionBar中的分隔符视觉组件

• SnakeBar
  窗口底部显示消息的视觉组件

  • 有 左下角, 底部居中, 右下角 三种定位选择;

• SnakeBarGroup 管理多个SnakeBar的视图组件, 继承自ListView视图组件.

  • 有 左下角, 底部居中, 右下角 三种定位选择;

• Menu 菜单视图组件. 继承自ListView视图组件

  • Menu.Item 菜单项视觉组件, 集成自View视图组件

• Loading 视觉组件, 显示加载中, 继承自View视图组件

• LOGO LOGO视觉组件, 继承自View视图组件

• ICONS 各种ICON视觉组件, 继承自View视图组件. 计划采用阿里的开源矢量图标集

  • 有 正常(默认), 禁用 二种状态;
  • 有 大, 中(默认), 小 三种尺寸;
  • 有 文案前置, 文案后置(默认), 不显示文案 三种选择;

• Image 图片视觉组件, 继承自View视图组件

  • 有 顶部文案, 底部文案(默认), 不显示文案 三种选择;
  • 有 文案居左(默认), 文案居中, 文案居右 三种选择;
  • 有 水平填满, 垂直填满, 全部填满, 原图大小(默认) 四种选择;

• Label 标签视觉组件, 继承自View视图组件

• Text 文案视觉组件, 继承自View视图组件

  • 有 1 - 6 个级别字体大小

• Panel 面板容器视觉组件, 继承自View视图组件

  • Panel.Header
  • Panel.Footer
  • Panel.Body

• Card 卡片容器视觉组件, 继承自Panel视觉组件

• SidePanel 定位在窗体四周的边栏面板视觉组件, 继承自Panel视觉组件

• Button ( Large | Normal | Small | Primary | Second | Default | Disabled ) 按钮视觉组件, 继承自View视图组件
  • 有 正常, 点击, 悬停, 禁用 四种样式;
  • 有 矩形, 圆形 二种样式;

  • 有 主要, 次要, 默认 三种样式;

• ButtonGroup 按钮组视图组件, 用于管理按钮视觉组件. 继承自ListView视图组件.

  • ButtonGroup.Separator 按钮组分隔符视觉组件, 继承自View视图组件.

• Form 表单视图组件, 没有继承自任何组件的高阶组件, 依据表现形式组装从属组件.

  • 有 水平, 垂直, 网格 三种表现形式;

  • 发起从属组件内容验证

• InputText 文本框视觉组件, 继承自View视图组件
  • 被动触发内容验证;

  • 有Placeholder;

• Checkbox 复选框视觉组件

  • 被动触发内容验证;

• CheckboxGroup 管理复选框的复选框组视图组件, 继承自ListView视图组件
  • 有 多选, 单选 二种模式;

  • 被动触发内容验证;

• DropdownList 下拉菜单组件, 继承自ListView视图组件

  • 被动触发内容验证

• Dialog 弹出窗口视觉组件, 继承自Panel视觉组件

  • 有 模态, 非模态 二种模式;
  • Dialog.Header
  • Dialog.Footer
  • Dialog.Body

• CoverLayer 遮罩层视觉组件, 继承自View视图组件

• Chart 图表视觉组件, 继承自View视图组件, 计划继续使用ECharts

• Calendar( Date | Time | DateTime ) 日历视觉组件, 继承自View视图组件

  • 有 日期模式, 时间模式, 完全模式 三种模式;

• Editor 编辑器视觉组件, 继承自View视图组件

• Switch 开关视觉组件, 集成自View视图

  • 仅 开, 关二种样式;

• Slider 滑动型输入器, 视觉组件, 继承自View视图组件

  • 可以设置 步长
  • 可以设置 范围

Business Components

大约 5 人日

• TreeTable 树形表视觉组件

• Drag & Drop 可拖拽视觉组件

Colors Contants