@gmsoft/ui

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