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
packages/client/src/schema-component/antd
@ -8,6 +8,7 @@ export * from './form';
|
||||
export * from './form-item';
|
||||
export * from './grid';
|
||||
export * from './input';
|
||||
export * from './input-number';
|
||||
export * from './password';
|
||||
export * from './radio';
|
||||
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
|
||||
|
||||
## 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