Skip to content

Commit

Permalink
feat(field): support new valueType second (ant-design#1177)
Browse files Browse the repository at this point in the history
* feat(field): support new valueType `second`

* fix test
  • Loading branch information
chenshuai2144 committed Dec 2, 2020
1 parent faafadd commit 3c45102
Show file tree
Hide file tree
Showing 7 changed files with 268 additions and 35 deletions.
65 changes: 65 additions & 0 deletions packages/field/src/components/Second/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import React from 'react';
import { InputNumber } from 'antd';
import { ProFieldFC } from '../../index';

export type FieldDigitProps = {
text: number;
};

/**
* 格式化秒
* @param result
* @returns {string}
*/
export function formatSecond(result: number) {
let formatText = '';
const h = Math.floor((result / 3600) % 24);
const m = Math.floor((result / 60) % 60);
const s = Math.floor(result % 60);
formatText = `${s}秒`;
if (m > 0) {
formatText = `${m}分钟${formatText}`;
}
if (h > 0) {
formatText = `${h}小时${formatText}`;
}
return formatText;
}

/**
* 格式化秒
* @param FieldSecond
*/
const Second: ProFieldFC<FieldDigitProps> = (
{ text, mode: type, render, renderFormItem, fieldProps, ...rest },
ref,
) => {
if (type === 'read') {
const secondText = formatSecond(Number(text) as number);
const dom = <span ref={ref}>{secondText}</span>;
if (render) {
return render(text, { mode: type, ...fieldProps }, dom);
}
return dom;
}
if (type === 'edit' || type === 'update') {
const dom = (
<InputNumber
ref={ref}
min={0}
style={{
width: '100%',
}}
{...rest}
{...fieldProps}
/>
);
if (renderFormItem) {
return renderFormItem(text, { mode: type, ...fieldProps }, dom);
}
return dom;
}
return null;
};

export default React.forwardRef(Second);
3 changes: 3 additions & 0 deletions packages/field/src/demos/base.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ export default () => {
<Descriptions.Item label="数字">
<Field text="19897979797979" valueType="digit" mode={state} plain={plain} />
</Descriptions.Item>
<Descriptions.Item label="秒格式化">
<Field text={2000000} valueType="second" mode={state} plain={plain} />
</Descriptions.Item>
<Descriptions.Item label="百分比">
<Field text="100" valueType="percent" mode={state} plain={plain} />
</Descriptions.Item>
Expand Down
7 changes: 7 additions & 0 deletions packages/field/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ import FiledCheckbox from './components/Checkbox';
import FiledRate from './components/Rate';
import FiledSwitch from './components/Switch';
import FieldDigit from './components/Digit';
import FieldSecond from './components/Second';

import FieldRadio from './components/Radio';

export type ProFieldTextType = React.ReactNode | React.ReactNode[] | Moment | Moment[];
Expand Down Expand Up @@ -76,6 +78,7 @@ export type ProFieldValueType =
| 'progress'
| 'percent'
| 'digit'
| 'second'
| 'avatar'
| 'code'
| 'switch'
Expand Down Expand Up @@ -361,6 +364,10 @@ const defaultRenderText = (
return <FieldDigit text={text as number} {...props} />;
}

if (valueType === 'second') {
return <FieldSecond text={text as number} {...props} />;
}

if (valueType === 'select' || (valueType === 'text' && (props.valueEnum || props.request))) {
return <FiledSelect text={text as string} {...props} />;
}
Expand Down
7 changes: 7 additions & 0 deletions packages/table/src/demos/valueTypeNumber.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,13 @@ export default () => (
valueType: 'digit',
width: 150,
},
{
title: '数字',
dataIndex: 'money',
key: 'digit',
valueType: 'second',
width: 150,
},
{
title: '百分比',
key: 'percent',
Expand Down
91 changes: 56 additions & 35 deletions tests/field/__snapshots__/demo.test.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -214,13 +214,13 @@ Array [
<span
class="ant-descriptions-item-label"
>
百分比
秒格式化
</span>
<span
class="ant-descriptions-item-content"
>
<span>
100.00%
3小时33分钟20秒
</span>
</span>
</div>
Expand All @@ -229,6 +229,27 @@ Array [
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
百分比
</span>
<span
class="ant-descriptions-item-content"
>
<span>
100.00%
</span>
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
Expand Down Expand Up @@ -543,6 +564,10 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand Down Expand Up @@ -573,10 +598,6 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand Down Expand Up @@ -640,6 +661,10 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand Down Expand Up @@ -670,10 +695,6 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand Down Expand Up @@ -704,6 +725,10 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand All @@ -723,10 +748,6 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand Down Expand Up @@ -768,6 +789,10 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand Down Expand Up @@ -819,10 +844,6 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand All @@ -844,6 +865,10 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand Down Expand Up @@ -881,10 +906,6 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand All @@ -906,6 +927,10 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand All @@ -932,10 +957,6 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand All @@ -962,6 +983,10 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand All @@ -983,10 +1008,6 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand Down Expand Up @@ -1045,6 +1066,10 @@ Array [
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
Expand Down Expand Up @@ -1074,13 +1099,9 @@ Done in 9.70s.
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="2"
colspan="1"
>
<div
class="ant-descriptions-item-container"
Expand Down
1 change: 1 addition & 0 deletions tests/field/field.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@ describe('Field', () => {
'progress',
'percent',
'digit',
'second',
'code',
'jsonCode',
'rate',
Expand Down
Loading

0 comments on commit 3c45102

Please sign in to comment.