未验证 提交 d101950e 编写于 作者: _ __Oasis__ 提交者: GitHub

Merge pull request #746 from irisSong/nutui-react

Nutui react 
import React, { MouseEvent } from 'react' import React, { MouseEvent } from 'react'
import { Cell } from './cell' import { Cell } from './cell'
import { CellGroup } from '../cellgroup/cellgroup' import { CellGroup } from '../cellgroup/cellgroup'
import { Switch } from '../switch/switch'
const CellDemo = () => { const CellDemo = () => {
const testClick = (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => { const testClick = (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
...@@ -29,7 +30,7 @@ const CellDemo = () => { ...@@ -29,7 +30,7 @@ const CellDemo = () => {
</CellGroup> </CellGroup>
<CellGroup title="自定义右侧箭头区域"> <CellGroup title="自定义右侧箭头区域">
<Cell title="Switch" extra={<div>这里是switch组件</div>}></Cell> <Cell title="Switch" extra={<Switch checked={true}></Switch>}></Cell>
</CellGroup> </CellGroup>
<h2>展示图标</h2> <h2>展示图标</h2>
<Cell title="姓名" icon="my" desc="张三" isLink={true}></Cell> <Cell title="姓名" icon="my" desc="张三" isLink={true}></Cell>
......
...@@ -46,7 +46,7 @@ const testClick = (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent ...@@ -46,7 +46,7 @@ const testClick = (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent
```tsx ```tsx
<CellGroup title="自定义右侧箭头区域"> <CellGroup title="自定义右侧箭头区域">
<Cell title="Switch" extra={<div>这里是switch组件</div>}></Cell> <Cell title="Switch" extra={<Switch checked={true}></Switch>}></Cell>
</CellGroup> </CellGroup>
``` ```
......
...@@ -17,19 +17,19 @@ const PriceDemo = () => { ...@@ -17,19 +17,19 @@ const PriceDemo = () => {
<div className="demo"> <div className="demo">
<h2>基本用法</h2> <h2>基本用法</h2>
<Cell> <Cell>
<Price price={0} need-symbol={false} thousands={true} /> <Price price={0} needSymbol={false} thousands={true} />
</Cell> </Cell>
<h2>有人民币符号,无千位分隔</h2> <h2>有人民币符号,无千位分隔</h2>
<Cell> <Cell>
<Price price={10010.01} need-symbol={true} thousands={false} /> <Price price={10010.01} needSymbol={true} thousands={false} />
</Cell> </Cell>
<h2>带人民币符号,有千位分隔,保留小数点后三位</h2> <h2>带人民币符号,有千位分隔,保留小数点后三位</h2>
<Cell> <Cell>
<Price price={15213.1221} decimal-digits={3} need-symbol={true} thousands={true} /> <Price price={15213.1221} decimalDigits={3} needSymbol={true} thousands={true} />
</Cell> </Cell>
<h2>异步随机变更</h2> <h2>异步随机变更</h2>
<Cell> <Cell>
<Price price={price} decimal-digits={3} need-symbol={true} thousands={true} /> <Price price={price} decimalDigits={3} needSymbol={true} thousands={true} />
</Cell> </Cell>
</div> </div>
) )
......
...@@ -11,19 +11,19 @@ ...@@ -11,19 +11,19 @@
### 基本用法 ### 基本用法
```tsx ```tsx
<Price price={0} need-symbol={false} thousands={true} /> <Price price={0} needSymbol={false} thousands={true} />
``` ```
### 有人民币符号,无千位分隔 ### 有人民币符号,无千位分隔
```tsx ```tsx
<Price price={10010.01} need-symbol={true} thousands={false} /> <Price price={10010.01} needSymbol={true} thousands={false} />
``` ```
### 带人民币符号,有千位分隔,保留小数点后三位 ### 带人民币符号,有千位分隔,保留小数点后三位
```tsx ```tsx
<Price price={15213.1221} decimal-digits={3} need-symbol={true} thousands={true} /> <Price price={15213.1221} decimalDigits={3} needSymbol={true} thousands={true} />
``` ```
### 异步随机变更 ### 异步随机变更
......
...@@ -20,7 +20,7 @@ export const Price: FunctionComponent<Partial<PriceProps>> = (props) => { ...@@ -20,7 +20,7 @@ export const Price: FunctionComponent<Partial<PriceProps>> = (props) => {
const { price, needSymbol, symbol, decimalDigits, thousands } = { ...defaultProps, ...props } const { price, needSymbol, symbol, decimalDigits, thousands } = { ...defaultProps, ...props }
const b = bem('price') const b = bem('price')
const showSymbol = () => { const showSymbol = () => {
return { __html: (props.needSymbol ? props.symbol : '') || '' } return { __html: (needSymbol ? symbol : '') || '' }
} }
const checkPoint = (price: string | number) => { const checkPoint = (price: string | number) => {
return String(price).indexOf('.') > 0 return String(price).indexOf('.') > 0
...@@ -35,7 +35,7 @@ export const Price: FunctionComponent<Partial<PriceProps>> = (props) => { ...@@ -35,7 +35,7 @@ export const Price: FunctionComponent<Partial<PriceProps>> = (props) => {
} else { } else {
num = num.toString() num = num.toString()
} }
if (props.thousands) { if (thousands) {
return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
} else { } else {
return num return num
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册