feat: add InputNumber Component into schema component ()

* feat: add InputNumber Component into schema component

* improve code

Co-authored-by: chenos <chenlinxh@gmail.com>
This commit is contained in:
SemmyWong 2022-01-18 10:08:56 +08:00 committed by GitHub
parent 206b37edc1
commit e48e70e82a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 186 additions and 0 deletions
packages/client/src/schema-component/antd

View File

@ -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';

View File

@ -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;

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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" />

View File

@ -0,0 +1 @@
export * from './InputNumber';