feat: add InputNumber Component into schema component (#160)
* feat: add InputNumber Component into schema component * improve code Co-authored-by: chenos <chenlinxh@gmail.com>
This commit is contained in:
parent
206b37edc1
commit
e48e70e82a
@ -8,6 +8,7 @@ export * from './form';
|
|||||||
export * from './form-item';
|
export * from './form-item';
|
||||||
export * from './grid';
|
export * from './grid';
|
||||||
export * from './input';
|
export * from './input';
|
||||||
|
export * from './input-number';
|
||||||
export * from './password';
|
export * from './password';
|
||||||
export * from './radio';
|
export * from './radio';
|
||||||
export * from './menu';
|
export * from './menu';
|
@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect, mapReadPretty } from '@formily/react';
|
||||||
|
import { InputNumber as AntdNumber } from 'antd';
|
||||||
|
import { ReadPretty } from './ReadPretty';
|
||||||
|
|
||||||
|
export const InputNumber = connect(AntdNumber, mapReadPretty(ReadPretty));
|
||||||
|
|
||||||
|
export default InputNumber;
|
@ -0,0 +1,21 @@
|
|||||||
|
import { isValid } from '@formily/shared';
|
||||||
|
import type { InputProps } from 'antd/lib/input';
|
||||||
|
import type { InputNumberProps } from 'antd/lib/input-number';
|
||||||
|
import { toFixed } from 'rc-input-number/lib/utils/MiniDecimal';
|
||||||
|
import { getNumberPrecision } from 'rc-input-number/lib/utils/numberUtil';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export const ReadPretty: React.FC<InputProps & InputNumberProps> = (props: any) => {
|
||||||
|
const { step, value, addonBefore, addonAfter } = props;
|
||||||
|
if (!isValid(props.value)) {
|
||||||
|
return <div></div>;
|
||||||
|
}
|
||||||
|
const precision = Math.max(getNumberPrecision(String(value)), getNumberPrecision(step));
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{addonBefore}
|
||||||
|
{toFixed(String(value), '.', precision)}
|
||||||
|
{addonAfter}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1,41 @@
|
|||||||
|
/**
|
||||||
|
* title: InputNumber
|
||||||
|
*/
|
||||||
|
import { FormItem } from '@formily/antd';
|
||||||
|
import { InputNumber, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const schema = {
|
||||||
|
type: 'object',
|
||||||
|
properties: {
|
||||||
|
input: {
|
||||||
|
type: 'boolean',
|
||||||
|
title: `Editable`,
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'InputNumber',
|
||||||
|
'x-reactions': {
|
||||||
|
target: 'read',
|
||||||
|
fulfill: {
|
||||||
|
state: {
|
||||||
|
value: '{{$self.value}}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
read: {
|
||||||
|
type: 'boolean',
|
||||||
|
title: `Read pretty`,
|
||||||
|
'x-read-pretty': true,
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'InputNumber',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<SchemaComponentProvider components={{ InputNumber, FormItem }}>
|
||||||
|
<SchemaComponent schema={schema} />
|
||||||
|
</SchemaComponentProvider>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1,49 @@
|
|||||||
|
/**
|
||||||
|
* title: addonBefore/addonAfter
|
||||||
|
*/
|
||||||
|
import { FormItem } from '@formily/antd';
|
||||||
|
import { InputNumber, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const schema = {
|
||||||
|
type: 'object',
|
||||||
|
properties: {
|
||||||
|
input: {
|
||||||
|
type: 'boolean',
|
||||||
|
title: `Editable`,
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'InputNumber',
|
||||||
|
'x-component-props': {
|
||||||
|
addonBefore: '¥',
|
||||||
|
addonAfter: '万元',
|
||||||
|
},
|
||||||
|
'x-reactions': {
|
||||||
|
target: 'read',
|
||||||
|
fulfill: {
|
||||||
|
state: {
|
||||||
|
value: '{{$self.value}}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
read: {
|
||||||
|
type: 'boolean',
|
||||||
|
title: `Read pretty`,
|
||||||
|
'x-read-pretty': true,
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'InputNumber',
|
||||||
|
'x-component-props': {
|
||||||
|
addonBefore: '¥',
|
||||||
|
addonAfter: '万元',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<SchemaComponentProvider components={{ InputNumber, FormItem }}>
|
||||||
|
<SchemaComponent schema={schema} />
|
||||||
|
</SchemaComponentProvider>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1,51 @@
|
|||||||
|
/**
|
||||||
|
* title: stringMode
|
||||||
|
*/
|
||||||
|
import { FormItem } from '@formily/antd';
|
||||||
|
import { InputNumber, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const schema = {
|
||||||
|
type: 'object',
|
||||||
|
properties: {
|
||||||
|
input: {
|
||||||
|
type: 'boolean',
|
||||||
|
title: `Editable`,
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'InputNumber',
|
||||||
|
'x-component-props': {
|
||||||
|
stringMode: true,
|
||||||
|
step: '0.01',
|
||||||
|
addonAfter: '%',
|
||||||
|
},
|
||||||
|
'x-reactions': {
|
||||||
|
target: 'read',
|
||||||
|
fulfill: {
|
||||||
|
state: {
|
||||||
|
value: '{{$self.value}}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
read: {
|
||||||
|
type: 'boolean',
|
||||||
|
title: `Read pretty`,
|
||||||
|
'x-read-pretty': true,
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'InputNumber',
|
||||||
|
'x-component-props': {
|
||||||
|
stringMode: true,
|
||||||
|
step: '0.01',
|
||||||
|
addonAfter: '%',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<SchemaComponentProvider components={{ InputNumber, FormItem }}>
|
||||||
|
<SchemaComponent schema={schema} />
|
||||||
|
</SchemaComponentProvider>
|
||||||
|
);
|
||||||
|
};
|
@ -6,3 +6,17 @@ group:
|
|||||||
---
|
---
|
||||||
|
|
||||||
# InputNumber
|
# InputNumber
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### InputNumber
|
||||||
|
|
||||||
|
<code src="./demos/demo1.tsx" />
|
||||||
|
|
||||||
|
### addonBefore/addonAfter
|
||||||
|
|
||||||
|
<code src="./demos/demo2.tsx" />
|
||||||
|
|
||||||
|
### High precision decimals
|
||||||
|
|
||||||
|
<code src="./demos/demo3.tsx" />
|
||||||
|
@ -0,0 +1 @@
|
|||||||
|
export * from './InputNumber';
|
Loading…
Reference in New Issue
Block a user