@gmsoft/ui NPM

GMSOFT-UI 组件库

install

  yarn add @gmsoft/ui

Modal

解决渲染到 top 时，滚动条异常的问题

Props

属性	说明	类型	默认值	版本
getContainer	指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom	HTMLElement \| () => HTMLElement \| Selectors \| false	() => top.document.body	1.0.1
size	宽度方案	'small' \| 'default' \| 'large'	'default'	1.0.0
children	子级节点	React.ReactNode	-	1.0.0
~~destroyOnClose~~	关闭时销毁 Modal 里的子元素	作废	-	1.0.0

Context

children 外用 Antd 的 ConfigProvider 包裹，配置的默认参数有：
- getPopupContainer：triggerNode => triggerNode.parentNode

Drawer

解决渲染到 top 时，滚动条异常的问题

Props

属性	说明	类型	默认值	版本
getContainer	指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom	HTMLElement \| () => HTMLElement \| Selectors \| false	() => top.document.body	1.0.1
size	宽度方案	'small' \| 'default' \| 'large'	'default'	1.0.0
children	子级节点	React.ReactNode	-	1.0.0
~~destroyOnClose~~	关闭时销毁 Modal 里的子元素	作废	-	1.0.0
onClickCapture	点击窗体（整个 Drawer）回调	MouseEvent=>void	-	1.0.0

Context

children 外用 Antd 的 ConfigProvider 包裹，配置的默认参数有：
- getPopupContainer：triggerNode => triggerNode.parentNode

popup function

调用 antd 对应组件的 function

api 和 antd 一致

message.info
message.success
message.error
message.warning
message.loading

Modal.info
Modal.success
Modal.error
Modal.warning
Modal.confirm

notification.info
notification.success
notification.error
notification.warning

TableDescriptions

表格展示详情

Props

属性	说明	类型	默认值	版本
dataSource	数据数组	TDRecod[] \| undefined	1.0.1
size	宽度方案	'default' \| 'middle' \| 'small' \| undefined	'default'	1.0.0
alignConf	文本、内容对齐配置	AlignConf \|undefined	{labelAlign:'right',labelValign:'top',valueAlign:'left',valueValign:'top'}	1.0.0
title	标题	ReactNode \| undefined	undefined	1.0.0
loading	加载中	boolean \| undefined	undefined	1.0.0

interface AlignConf {
  /**
   * label 标签的文本 水平对齐方式
   * @default 'right'
   */
  labelAlign?: Aligin;
  /**
   * label 标签的文本 竖直对齐方式
   * @default 'top'
   */
  labelValign?: Valigin;
  /**
   * value 内容的文本 水平对齐方式
   * @default 'left'
   */
  valueAlign?: Aligin;
  /**
   * value 内容的文本 竖直对齐方式
   * @default 'top'
   */
  valueValign?: Valigin;
}

interface TDRecod {
  /**
   * 标签
   * * 若传入undefined|null 则不显示
   */
  label: ReactNode;
  /**
   * 内容
   * * 若传入undefined|null 则不显示
   */
  value: ReactNode;
  /**
   * 布局
   * @default { label: 3; value: 5 }
   * * 传入 number 时 将 配置为 { label: 3; value: colspan - 3 }，故colspan必须大于 3 小于24
   */
  colspan?: number | { label: number; value: number };
  /**
   * 文本、内容对齐配置
   * * 若不传入则取组件props配置
   * * 若传入则优先取本值
   */
  alignConf?: AlignConf;
}

更新日志

1.8.0
2020-8-3
- 🌟 新增 AreaSelect
1.7.0
2020-7-31
- 🌟 新增 FromToDatePicker
1.6.0
2020-7-27
- 🐞 恢复 top.eventBus 调用
1.5.0
2020-5-13
- 🐞 Modal.method 方法增加返回值
- 🐞 Modal.method 渲染容器设置为 topRoot
- 🌟 导出 Modal, notification, message 的其他方法(destory, config...)
1.4.0
2020-5-11
- 🐞 移除 eventBus
1.3.3
2020-3-16
- 🐞 notification 添加默认配置 style: { wordBreak: 'break-word' }
1.3.0
2020-3-16
- 🌟 新增 Empty, 展示空
- 🌟 新增 TableDescriptions, 表格形式展示详情
1.2.4
2020-3-11
- 🐞 getTopRoot 默认选中元素改为 #mount-root
1.2.1
2020-1-10
- 🌟 新增 popup function, 提示弹层的调用对应用透明
1.1.0
2020-1-7 调试
1.0.1
2020-1-7
- 🌟 Drawer、Modal，新增 getContainer