nb-ui-components v1.3.9

ANTD-based UI framework for Nubomed

react && antd

Install

Before install the libarary, you need to : 1. install antd

npm i antd -S

2. install less、less-loader, you can install other versions, but need to configure it correctly

npm i less@4.1.2 less-loader@7.3.0 -D

you can configure the react project as you want. Here are some suggestions provided.

• using npm run eject to produce the config file and add some config for less and less-options
• using some plugins to override configuration sucn as customize-cra、customize-cra-less-loader

after your configuration , checked if everything(like antd and less) work fine. Now, you can start to install the packages

npm i nb-ui-components -S

3. add color config in less modifyvars to override some antd's theme

{
    "@primary-color":"#0066E0",
    "@input-hover-border-color":"#0066E0",
    "@input-placeholder-color":"rgba(24, 29, 65, 0.5)",
    "@input-border-color":"#CAD0E0",
    "@input-color":" #181D41",
    "@border-radius-base":"8px",
    "@picker-date-hover-range-border-color":"#0066E0",
    "@picker-date-hover-range-color":"#0066E0",
    "@picker-basic-cell-hover-color": "#0066E0",
    "@picker-panel-cell-height":"48px",
    "@picker-panel-width":"560px",
    "@picker-text-height":"96px",
    "@tooltip-arrow-color":"rgba(24, 29, 65, 0.5)",
    "@tooltip-arrow-width":"40px"
}

Usage

import components and use it like antd.

以下组件除了列出来的Api，其他可参考antd对应组件的Api

NbTabs

使用方式

<NbTabs
  selectIndex={index}
  onChange={(index) => {
    setIndex(index)
  }}
</NbTabs>

参数Api （非antd)

NbProgress

使用方式

 <NbProgress type="line" percent="50"></NbProgress>

参数Api (antd-progress组件)

strokeWidth、 width 、trailColor 、strokeColor 设置有默认的值，不建议覆盖

NbSelectCom

使用方式 (antd-select组件)

<NbSelectCom
  optionslist={[{ label: 1, value: 1 }]}
  onChange={() => {}}
></NbSelectCom>

参数Api

占用的antd部分字段:

NbSearch

使用方式

<NbSearch onChange={(e)=>{
        setValue(e.target.value)
      }} value={value} onSearch={(val)=>search(val)}></NbSearch>

参数Api (antd-Input.search组件) 无，使用antd的Api

占用的antd部分字段:

NbSelectButton

使用方式

<NbSelectButton
  checked={checked}
  onChange={() => {
    setChecked(!checked)
  }}
>
  插槽内容
</NbSelectButton>
<NbSelectButton
  checked={checked1}
  options={[12, 23, 34]}
  onChange={(data) => {
    setChecked1(data.slice())
  }}
></NbSelectButton>

参数Api (antd-Checkbox组件)

占用的antd部分字段:

NbCascader

使用方式

<NbCascader
  options={options}
  onChange={(value) => {
    console.log(value)
  }}
></NbCascader>

参数Api (antd-Cascader组件) 参照antd组件Api

NbMenu

使用方式

<NbMenu menuList={[1, 2, 3]} content={content}></NbMenu>

参数Api (antd-Menu组件)

其他：参照antd组件Menu的Api

NbDropdown

使用方式

<NbDropdown
  DropdownMenu={
    <NbMenu
      onSelect={(data) => {
        console.log(data)
      }}
      selectable={true}
      menuList={[1, 2, 3, 4, 5, 6]}
    >
      <a>123s</a>
    </NbMenu>
  }
  DropdownTitle={<a>hello</a>}
></NbDropdown>

参数Api (antd-Dropdown组件)

占用的antd部分字段:

其他：参照antd组件Menu的Api

NbSteps

使用方式

<NbSteps current={current} stepOptions={['步骤一', '步骤二', '步骤三']}></NbSteps>

参数Api (非antd)

NbDatePicker && NbRangePicker

使用方式

<NbDatePicker onChange={(date, dateString)=>{
  setDate(date)
}} defaultValue={date}></NbDatePicker> 
<NbRangePicker onChange={(date)=>{
  console.log(date);
}} defaultValue={date1}></NbRangePicker>

中文版本

<NbRangePicker onChange={(date)=>{
  console.log(date);
}} defaultValue={date1}></NbRangePicker>
  <h2>中文日期</h2>
<NbConfigProvider>

NbAccount

使用方式

<NbAccount onChange={(e)=>{
  setAccount(e.target.value)
}} value={acount}></NbAccount>

参数Api (antd-Input组件) 无，使用antd的Api

占用的antd部分字段:

NbBadge

使用方式

<NbBadge count={1000}></NbBadge>

参数Api (antd-Badge组件) 无，使用antd的Api

占用的antd部分字段:

NbPages

使用方式

<NbPages onChange={(page,pageSize)=>{
  console.log(page, pageSize)
}} defaultCurrent={1} total={50} defaultCurrent={1} total={50}></NbPages>

参数Api (antd-Page组件) 无，使用antd的Api

NbButton

使用方式

<NbButton onClick={()=>{
  console.log('点击')
}}>123</NbButton>

参数Api （非antd)

NbInput

使用方式

<NbInput value={input} onChange={(e)=>{
  setInput(e.target.value)
}}></NbInput>

参数Api (antd-Input组件) 无，使用antd的Api

占用的antd部分字段:

NbResult

使用方式

<NbResult visible={visible}>
  文字插槽
</NbResult>

参数Api (antd-Modal组件)

其他，使用antd的Api

方法

NbResult.success({
  content: '123',
})

方法类型：'succes'、'error'、'warn'、'loading' 方法参数：

占用antd字段： footer、className、bodyStyle、width、mask、maskClosable、content、icon

NbMessage

使用方式 (antd-message)

NbMessage.success({
  content: '123',
})

方法类型：'succes'、'error'、'warn' 占用antd字段： className、content、icon

NbConfirm

使用方式

<NbConfirm
  visible={visible1}
  onCancel={() => setVisible1(false)}
></NbConfirm>

参数Api (antd-Modal组件)

其他，使用antd的Api

占用antd字段： className, title

NbDialog

使用方式

 <NbDialog onCancel={() => setVisible2(false)} visible={visible2}></NbDialog>

参数Api (antd-Modal组件) 无，使用antd的Api

NbNumberCounter

使用方式

<NbNumberCounter type="danger" value={value} onChange={(value)=>{
  setValue(value)
}}></NbNumberCounter>

参数Api (非antd)

NbSwitch

使用方式

<NbSwitch></NbSwitch>

参数Api (antd-Switch组件) 无，使用antd的Api

NbArrow

使用方式

<NbArrow open={checked}></NbArrow>

参数Api (非antd)

NbRadio NbRadioGroup

使用方式

<NbRadioGroup defaultValue={1}>
  <NbRadio value={1}></NbRadio>
  <NbRadio value={2}></NbRadio>
  <NbRadio value={3}></NbRadio>
</NbRadioGroup>

参数Api (antd-radio、radio.Group组件) 无，使用antd的Api

NbCheckbox NbCheckboxGroup

使用方式

<NbCheckboxGroup defaultValue={['A']} onChange={(value)=>{
  console.log(value, '---致');
}}>
  <NbCheckbox value={'A'} disabled />
  <NbCheckbox value={'B'} indeterminate={false} />
  <span>hello</span>
</NbCheckboxGroup>

参数Api (antd-checkbox、checkbox.Group组件) 无，使用antd的Api

NbTable 基础表格

使用方式

<NbTable dataSource={dataSource} columns={columns} fold={true} foldRow={(data)=>{
  setDataSource(data);
}}></NbTable>

参数Api (非antd)

注意： 为了实现编辑时组件和值的切换。dataSource表格内容提供了三种情况：

• 内容简单展示值 row'number'
• 内容需要定制 row'number' = ()=>{return dom}
• 内容需要在值与组件之间切换（如数字点击编辑，进入数字器状态），此时columns数组dataIndex为number的对象operate属性需为true, 数据采用 number-opt 来做为编辑时的替换， 其他类似， 均为属性后拼接-opt

示例一：

<NbTable
  dataSource={dataSource}
  columns={columns}
  fold={true}
  foldRow={(data) => {
    setDataSource(data)
  }}
></NbTable>

// 对应的表格列表：
const columns = [
    {
      title: '位置',
      dataIndex: 'pos',
      width: 226,
    },
    {
      title: '品名',
      dataIndex: 'name',
      strong: true,
      width: 404,
    },
    {
      title: '规格',
      dataIndex: 'specification',
      width: 192,
    },
    {
      title: '中文',
      dataIndex: 'zh',
      width: 156,
    },
    {
      title: '英文数字',
      dataIndex: 'num',
      width: 148,
    },
    {
      title: '数量', // 标题
      dataIndex: 'number', // dataSource中对应的key
      width: 186, // 列宽
      strong: true, // 加粗
      align: 'center', // 文本方向
      operate:true // 可动态切换编辑
    },
    {
      title: '单位',
      dataIndex: 'unit',
      width: 168,
      align: 'center',
    },
    {
      title: '',
      dataIndex: 'operator',
      operate:true
    }
  ]
// 初始数据：
// 1. 默认展示数据， 无需做处理
// 2. name属性数据需要展示省略号，但不改变原始值 
const data = [
  {
    key: '1',
    pos: '柜子的名称-0000',
    name: "品名超过十二个的中间省略, 超过用省略号表示",
    specification: '0000…0000',
    zh: '中文内容',
    num: '00000000',
    number: 123,
    unit: '盒',
    children:{
      columns:[],
      dataSource:[]
    }
  }
]
data.forEach(item=>{
  let value = item.name;
  item.name = (opt)=>{
    // opt中可访问 rowIndex colKey属性
    if (value && value.length && value.length > 12) {
    return <div style={{color:'red'}}>{value
      .slice(0, 6)
      .concat('...')
      .concat(value.slice(-6))}</div>
    }
    return value
  }
}
// 3. 父级表格数据点击操作 编辑父级列的数据，同理，子级表格使用相同的处理
item['operator'] = (scopeData) => {
  // scopedDate 返回 {rowIndex: 父级行索引和子级table行索引用-拼接 , editing: 是否编辑状态，用于在不同状态显示不同的按钮 , colKey: 表格列}
  const { rowIndex, editing } = scopeData
  // 行索引 、行子表格索引
  const [fIdx, lIdx] = rowIndex.split('-')
  let newData = data
  let item = newData[fIdx];
  if(lIdx !== undefined){
    // 操作的是children行
    item = item.children.dataSource[lIdx]
  }
  return !editing ?
    <div style={{ display: 'flex' }}>
      <NbButton
        type="text-minor"
        onClick={() => {
          // list 父级中需要变成操作器的属性， 如需要从数字变成数字器
          const list = []
          // list 子级中需要变成操作器的属性， 如需要从数字变成数字器
          const childrenList = ['number', 'expiredDate']
          if(!lIdx){
            // 编辑父行及其子行 如number属性 添加一个changedNumber属性用于保存初始值， 便于后面取消编辑时还原数据
            list.forEach(key=>{
              item[`changed${key.slice(0,1).toUpperCase()+key.slice(1)}`] = item[key]
            })
            // 当前行子表格全部添加对应属性
            item.children.dataSource.forEach(list=>{
              childrenList.forEach(childKey=>{
                list[`changed${childKey.slice(0,1).toUpperCase()+childKey.slice(1)}`] = list[childKey]
              })
            })
          }else{
            childrenList.forEach(key=>{
              item[`changed${key.slice(0,1).toUpperCase()+key.slice(1)}`] = item[key] 
            })
          }
          item.editing = true;
          // data 赋值给newData 
          // data 赋值给dataSource
          // 操作newData 赋值给setDataSource 无法更新
          // 不能用newData无法更新 需要使用newData.slice()
          setDataSource(newData.slice())
        }}
      >
        编辑
      </NbButton>
      <div style={{ opacity: 0, width: '20px' }}></div>
      <NbButton
        type="text-primary"
        onClick={() => {
          newData.splice(rowIndex, 1)
          setDataSource(newData.slice())
        }}
      >
        删除
      </NbButton>
    </div>
  : <div style={{ display: 'flex' }}>
      <NbButton
        type="text-minor"
        onClick={() => {
          const list = []
          const childrenList = ['number', 'expiredDate']
          item['editing'] = false;
          if(!lIdx){
            // 保存时与编辑相反， 将changedNumber属性赋值number属性
            list.forEach(key=>{
              item[key] = item[`changed${key.slice(0,1).toUpperCase()+key.slice(1)}`]
            })
            // 当前行子表格全部添加对应属性
            item.children.dataSource.forEach(list=>{
              childrenList.forEach(childKey=>{
                list[childKey] = list[`changed${childKey.slice(0,1).toUpperCase()+childKey.slice(1)}`]
                console.log(list,`changed${childKey.slice(0,1).toUpperCase()+childKey.slice(1)}`);
              })
            })
          }else{
            childrenList.forEach(key=>{
              item[key]  = item[`changed${key.slice(0,1).toUpperCase()+key.slice(1)}`]
            })
          }
          setDataSource(newData.slice())
        }}
      >保存</NbButton>
      <div style={{ opacity: 0, width: '20px' }}></div>
      <NbButton type="text-primary"
        onClick={() => {
          item['editing'] = false;
          setDataSource(newData.slice())
        }}
      >取消</NbButton>
    </div>
  
}

NbExpireDate 效期组件

使用方式

<NbExpireDate date={dayjs(item.expiredDate)} onChange={(date)=>{
  item.changedExpiredDate = dayjs(date).format('YYYY-MM-DD');
  setDataSource(newData.slice())
}}></NbExpireDate>

参数Api (非antd)