Merge pull request #48 from RickCole21/master
Number的min和max支持filter、service支持配置messages
This commit is contained in:
liaoxuezhi
GitHub
commit
ca42d937ca
|
|
@ -3,9 +3,10 @@
|
|||
数字输入框。
|
||||
|
||||
- `type` 请设置成 `number`
|
||||
- `min` 最小值
|
||||
- `min` 最小值，支持用`${xxx}`获取变量
|
||||
- `max` 最大值，支持用`${xxx}`获取变量
|
||||
- `step` 步长
|
||||
- `max` 最大值
|
||||
- `precision` 精度
|
||||
- 更多配置请参考 [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
|
|
|
|||
|
|
@ -4,18 +4,21 @@
|
|||
该组件初始化时就会自动拉取一次数据，后续如果需要刷新，请结合 Action 实现，可以把 Action 的 actionType 设置为 reload, target 为该组件的 name 值。
|
||||
同时该组件，还支持 api 数值自动监听，比如 `getData?type=$type` 只要当前环境 type 值发生变化，就会自动重新拉取。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------- | --------------------------------- | ----------- | --------------------------------------------------- |
|
||||
| type | `string` | `"service"` | 指定为 service 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| body | [Container](./Types.md#container) | | 内容容器 |
|
||||
| api | [api](./Types.md#Api) | | 数据源 API 地址 |
|
||||
| initFetch | `boolean` | | 是否默认拉取 |
|
||||
| schemaApi | [api](./Types.md#Api) | | 用来获取远程 Schema 的 api |
|
||||
| initFetchSchema | `boolean` | | 是否默认拉取 Schema |
|
||||
| interval | `number` | `3000` | 刷新时间(最低 3000) |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |
|
||||
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式)来配置停止刷新的条件 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------------- | --------------------------------- | -------------- | ------------------------------------------------------------------- |
|
||||
| type | `string` | `"service"` | 指定为 service 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| body | [Container](./Types.md#container) | | 内容容器 |
|
||||
| api | [api](./Types.md#Api) | | 数据源 API 地址 |
|
||||
| initFetch | `boolean` | | 是否默认拉取 |
|
||||
| schemaApi | [api](./Types.md#Api) | | 用来获取远程 Schema 的 api |
|
||||
| initFetchSchema | `boolean` | | 是否默认拉取 Schema |
|
||||
| messages | `Object` | | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 |
|
||||
| messages.fetchSuccess | `string` | | 获取成功时提示 |
|
||||
| messages.fetchFailed | `string` | `"初始化失败"` | 获取失败时提示 |
|
||||
| interval | `number` | `3000` | 刷新时间(最低 3000) |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |
|
||||
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式)来配置停止刷新的条件 |
|
||||
|
||||
```schema:height="200" scope="body"
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ import {
|
|||
} from './Item';
|
||||
import * as cx from 'classnames';
|
||||
import * as InputNumber from 'rc-input-number';
|
||||
import { Action } from '../../types';
|
||||
import {filter} from '../../utils/tpl';
|
||||
|
||||
export interface NumberProps extends FormControlProps {
|
||||
placeholder?: string;
|
||||
max?: number;
|
||||
min?: number;
|
||||
max?: number | string;
|
||||
min?: number | string;
|
||||
step?: number;
|
||||
precision?: number;
|
||||
};
|
||||
|
|
@ -21,7 +21,7 @@ export default class NumberControl extends React.Component<NumberProps, any> {
|
|||
resetValue: ''
|
||||
};
|
||||
|
||||
constructor(props:NumberProps) {
|
||||
constructor(props: NumberProps) {
|
||||
super(props);
|
||||
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
|
|
@ -37,6 +37,14 @@ export default class NumberControl extends React.Component<NumberProps, any> {
|
|||
onChange(typeof inputValue === 'undefined' ? (resetValue || '') : inputValue);
|
||||
}
|
||||
|
||||
filterNum(value: number | string | undefined) {
|
||||
if (typeof value !== 'number') {
|
||||
value = filter(value, this.props.data);
|
||||
value = /^[-]?\d+/.test(value) ? parseInt(value, 10) : undefined;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
const {
|
||||
className,
|
||||
|
|
@ -47,7 +55,7 @@ export default class NumberControl extends React.Component<NumberProps, any> {
|
|||
max,
|
||||
min,
|
||||
disabled,
|
||||
placeholder,
|
||||
placeholder
|
||||
} = this.props;
|
||||
|
||||
let precisionProps: any = {};
|
||||
|
|
@ -62,8 +70,8 @@ export default class NumberControl extends React.Component<NumberProps, any> {
|
|||
prefixCls={`${ns}Number`}
|
||||
value={value}
|
||||
step={step}
|
||||
max={max}
|
||||
min={min}
|
||||
max={this.filterNum(max)}
|
||||
min={this.filterNum(min)}
|
||||
onChange={this.handleChange}
|
||||
disabled={disabled}
|
||||
placeholder={placeholder}
|
||||
|
|
|
|||
|
|
@ -19,12 +19,20 @@ export interface ServiceProps extends RendererProps {
|
|||
stopAutoRefreshWhen?: string;
|
||||
store: IServiceStore;
|
||||
body?: SchemaNode;
|
||||
messages: {
|
||||
fetchSuccess?: string;
|
||||
fetchFailed?: string;
|
||||
};
|
||||
}
|
||||
export default class Service extends React.Component<ServiceProps> {
|
||||
timer: NodeJS.Timeout;
|
||||
mounted: boolean;
|
||||
|
||||
static defaultProps: Partial<ServiceProps> = {};
|
||||
static defaultProps: Partial<ServiceProps> = {
|
||||
messages: {
|
||||
fetchFailed: '初始化失败'
|
||||
}
|
||||
};
|
||||
|
||||
static propsList: Array<string> = [];
|
||||
|
||||
|
|
@ -38,7 +46,17 @@ export default class Service extends React.Component<ServiceProps> {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
const {schemaApi, initFetchSchema, api, initFetch, store} = this.props;
|
||||
const {
|
||||
schemaApi,
|
||||
initFetchSchema,
|
||||
api,
|
||||
initFetch,
|
||||
store,
|
||||
messages: {
|
||||
fetchSuccess,
|
||||
fetchFailed
|
||||
},
|
||||
} = this.props;
|
||||
|
||||
this.mounted = true;
|
||||
|
||||
|
|
@ -47,7 +65,10 @@ export default class Service extends React.Component<ServiceProps> {
|
|||
initFetchSchema !== false &&
|
||||
(!(schemaApi as ApiObject).sendOn || evalExpression((schemaApi as ApiObject).sendOn as string, store.data))
|
||||
) {
|
||||
store.fetchSchema(schemaApi, store.data).then(this.initInterval);
|
||||
store.fetchSchema(schemaApi, store.data, {
|
||||
successMessage: fetchSuccess,
|
||||
errorMessage: fetchFailed
|
||||
}).then(this.initInterval);
|
||||
}
|
||||
|
||||
if (
|
||||
|
|
@ -55,7 +76,10 @@ export default class Service extends React.Component<ServiceProps> {
|
|||
initFetch !== false &&
|
||||
(!(api as ApiObject).sendOn || evalExpression((api as ApiObject).sendOn as string, store.data))
|
||||
) {
|
||||
store.fetchInitData(api, store.data).then(this.initInterval);
|
||||
store.fetchInitData(api, store.data, {
|
||||
successMessage: fetchSuccess,
|
||||
errorMessage: fetchFailed
|
||||
}).then(this.initInterval);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -63,11 +87,24 @@ export default class Service extends React.Component<ServiceProps> {
|
|||
const props = this.props;
|
||||
const store = props.store;
|
||||
|
||||
const {
|
||||
messages: {
|
||||
fetchSuccess,
|
||||
fetchFailed
|
||||
}
|
||||
} = props;
|
||||
|
||||
isApiOutdated(prevProps.api, props.api, prevProps.data, props.data) &&
|
||||
store.fetchData(props.api as Api, store.data).then(this.initInterval);
|
||||
store.fetchData(props.api as Api, store.data, {
|
||||
successMessage: fetchSuccess,
|
||||
errorMessage: fetchFailed
|
||||
}).then(this.initInterval);
|
||||
|
||||
isApiOutdated(prevProps.schemaApi, props.schemaApi, prevProps.data, props.data) &&
|
||||
store.fetchSchema(props.schemaApi as Api, store.data).then(this.initInterval);
|
||||
store.fetchSchema(props.schemaApi as Api, store.data, {
|
||||
successMessage: fetchSuccess,
|
||||
errorMessage: fetchFailed
|
||||
}).then(this.initInterval);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
|
@ -90,7 +127,10 @@ export default class Service extends React.Component<ServiceProps> {
|
|||
return this.receive(query);
|
||||
}
|
||||
|
||||
const {schemaApi, fetchSchema, api, fetch, store} = this.props;
|
||||
const {schemaApi, fetchSchema, api, fetch, store, messages: {
|
||||
fetchSuccess,
|
||||
fetchFailed
|
||||
}} = this.props;
|
||||
|
||||
clearTimeout(this.timer);
|
||||
|
||||
|
|
@ -99,7 +139,10 @@ export default class Service extends React.Component<ServiceProps> {
|
|||
fetchSchema !== false &&
|
||||
(!(schemaApi as ApiObject).sendOn || evalExpression((schemaApi as ApiObject).sendOn as string, store.data))
|
||||
) {
|
||||
store.fetchSchema(schemaApi, store.data).then(this.initInterval);
|
||||
store.fetchSchema(schemaApi, store.data, {
|
||||
successMessage: fetchSuccess,
|
||||
errorMessage: fetchFailed
|
||||
}).then(this.initInterval);
|
||||
}
|
||||
|
||||
if (
|
||||
|
|
@ -110,6 +153,8 @@ export default class Service extends React.Component<ServiceProps> {
|
|||
store
|
||||
.fetchData(api, store.data, {
|
||||
silent,
|
||||
successMessage: fetchSuccess,
|
||||
errorMessage: fetchFailed
|
||||
})
|
||||
.then(this.initInterval);
|
||||
}
|
||||
|
|
@ -163,16 +208,16 @@ export default class Service extends React.Component<ServiceProps> {
|
|||
|
||||
{store.loading
|
||||
? render(
|
||||
'info',
|
||||
{
|
||||
type: 'spinner',
|
||||
overlay: true,
|
||||
},
|
||||
{
|
||||
key: 'info',
|
||||
size: 'lg',
|
||||
}
|
||||
)
|
||||
'info',
|
||||
{
|
||||
type: 'spinner',
|
||||
overlay: true,
|
||||
},
|
||||
{
|
||||
key: 'info',
|
||||
size: 'lg',
|
||||
}
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue