优化 radios
This commit is contained in:
parent
dd322cf592
commit
8ed2c7c8d5
|
@ -215,6 +215,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-desc {
|
||||||
|
color: $text--muted-color;
|
||||||
|
margin-left: $Checkbox-gap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$ns}CheckboxControl,
|
.#{$ns}CheckboxControl,
|
||||||
|
|
|
@ -7,6 +7,7 @@ import React from 'react';
|
||||||
import cx from 'classnames';
|
import cx from 'classnames';
|
||||||
import {ClassNamesFn, themeable} from '../theme';
|
import {ClassNamesFn, themeable} from '../theme';
|
||||||
import {autobind} from '../utils/helper';
|
import {autobind} from '../utils/helper';
|
||||||
|
import { filter } from '../utils/tpl';
|
||||||
|
|
||||||
const sizeMap = {
|
const sizeMap = {
|
||||||
sm: 'i-checks-sm',
|
sm: 'i-checks-sm',
|
||||||
|
@ -33,9 +34,11 @@ interface CheckboxProps {
|
||||||
readOnly?: boolean;
|
readOnly?: boolean;
|
||||||
checked?: boolean;
|
checked?: boolean;
|
||||||
name?: string;
|
name?: string;
|
||||||
|
description?: string;
|
||||||
classPrefix: string;
|
classPrefix: string;
|
||||||
classnames: ClassNamesFn;
|
classnames: ClassNamesFn;
|
||||||
partial?: boolean;
|
partial?: boolean;
|
||||||
|
data?: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Checkbox extends React.Component<CheckboxProps, any> {
|
export class Checkbox extends React.Component<CheckboxProps, any> {
|
||||||
|
@ -60,17 +63,19 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
|
||||||
let {
|
let {
|
||||||
size,
|
size,
|
||||||
className,
|
className,
|
||||||
classPrefix: ns,
|
classnames: cx,
|
||||||
value,
|
value,
|
||||||
label,
|
label,
|
||||||
partial,
|
partial,
|
||||||
trueValue,
|
trueValue,
|
||||||
children,
|
children,
|
||||||
disabled,
|
disabled,
|
||||||
|
description,
|
||||||
readOnly,
|
readOnly,
|
||||||
checked,
|
checked,
|
||||||
type,
|
type,
|
||||||
name
|
name,
|
||||||
|
data
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
className = (className ? className : '') + (size && sizeMap[size] ? ` ${sizeMap[size]}` : '');
|
className = (className ? className : '') + (size && sizeMap[size] ? ` ${sizeMap[size]}` : '');
|
||||||
|
@ -78,9 +83,9 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
|
||||||
return (
|
return (
|
||||||
<label
|
<label
|
||||||
className={cx(
|
className={cx(
|
||||||
`${ns}Checkbox ${ns}Checkbox--${type}`,
|
`Checkbox Checkbox--${type}`,
|
||||||
{
|
{
|
||||||
[`${ns}Checkbox--full`]: !partial
|
'Checkbox--full': !partial
|
||||||
},
|
},
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
|
@ -101,6 +106,7 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
|
||||||
/>
|
/>
|
||||||
<i />
|
<i />
|
||||||
<span>{children || label}</span>
|
<span>{children || label}</span>
|
||||||
|
{description ? (<div className={cx("Checkbox-desc")}>{filter(description, data)}</div>) : null}
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@ import uncontrollable = require('uncontrollable');
|
||||||
import Checkbox from './Checkbox';
|
import Checkbox from './Checkbox';
|
||||||
import find = require('lodash/find');
|
import find = require('lodash/find');
|
||||||
import chunk = require('lodash/chunk');
|
import chunk = require('lodash/chunk');
|
||||||
import {flattenTree} from '../utils/helper';
|
import {flattenTree, isObject} from '../utils/helper';
|
||||||
import {Option} from './Checkboxes';
|
import {Option} from './Checkboxes';
|
||||||
import {ClassNamesFn, themeable} from '../theme';
|
import {ClassNamesFn, themeable} from '../theme';
|
||||||
// import isPlainObject = require('lodash/isPlainObject');
|
// import isPlainObject = require('lodash/isPlainObject');
|
||||||
|
@ -19,6 +19,7 @@ export interface Option {
|
||||||
value?: any;
|
value?: any;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
children?: Options;
|
children?: Options;
|
||||||
|
description?: string;
|
||||||
[propName: string]: any;
|
[propName: string]: any;
|
||||||
}
|
}
|
||||||
export interface Options extends Array<Option> {}
|
export interface Options extends Array<Option> {}
|
||||||
|
@ -80,11 +81,11 @@ export function expandValue(value: OptionValue, props: Partial<OptionProps>): Op
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (valueType === 'object') {
|
if (valueType === 'object' && props.joinValues !== false) {
|
||||||
value = (value as Option)[valueField || 'value'] || '';
|
value = (value as Option)[valueField || 'value'] || '';
|
||||||
}
|
}
|
||||||
|
|
||||||
return find(flattenTree(options), item => String(item[valueField || 'value']) === String(value)) as Option;
|
return find(flattenTree(options), item => isObject(value) ? item[valueField || 'value'] === value : String(item[valueField || 'value']) === String(value)) as Option;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -93,6 +93,7 @@ export class Radios extends React.Component<RadioProps, any> {
|
||||||
checked={!!~valueArray.indexOf(option)}
|
checked={!!~valueArray.indexOf(option)}
|
||||||
className={cx(itemClassName, option.className)}
|
className={cx(itemClassName, option.className)}
|
||||||
disabled={disabled || option.disabled}
|
disabled={disabled || option.disabled}
|
||||||
|
description={option.description}
|
||||||
inline={inline}
|
inline={inline}
|
||||||
>
|
>
|
||||||
{option.label}
|
{option.label}
|
||||||
|
@ -108,6 +109,8 @@ export class Radios extends React.Component<RadioProps, any> {
|
||||||
classnames: cx,
|
classnames: cx,
|
||||||
placeholder,
|
placeholder,
|
||||||
columnsCount,
|
columnsCount,
|
||||||
|
joinValues,
|
||||||
|
extractValue,
|
||||||
disabled,
|
disabled,
|
||||||
inline,
|
inline,
|
||||||
delimiter,
|
delimiter,
|
||||||
|
@ -119,7 +122,9 @@ export class Radios extends React.Component<RadioProps, any> {
|
||||||
multiple: false,
|
multiple: false,
|
||||||
delimiter,
|
delimiter,
|
||||||
valueField,
|
valueField,
|
||||||
options
|
options,
|
||||||
|
joinValues,
|
||||||
|
extractValue
|
||||||
});
|
});
|
||||||
let body: Array<React.ReactNode> = [];
|
let body: Array<React.ReactNode> = [];
|
||||||
|
|
||||||
|
|
|
@ -30,6 +30,7 @@ export interface Option {
|
||||||
children?: Options;
|
children?: Options;
|
||||||
visible?: boolean;
|
visible?: boolean;
|
||||||
hidden?: boolean;
|
hidden?: boolean;
|
||||||
|
description?: string;
|
||||||
[propName: string]: any;
|
[propName: string]: any;
|
||||||
}
|
}
|
||||||
export interface Options extends Array<Option> {}
|
export interface Options extends Array<Option> {}
|
||||||
|
|
|
@ -243,7 +243,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
|
||||||
self.updateMessage(json.msg || options.successMessage);
|
self.updateMessage(json.msg || options.successMessage);
|
||||||
|
|
||||||
// 配置了获取成功提示后提示,默认是空不会提示。
|
// 配置了获取成功提示后提示,默认是空不会提示。
|
||||||
self.msg && (getRoot(self) as IRendererStore).notify('success', self.msg);
|
options && options.successMessage && (getRoot(self) as IRendererStore).notify('success', self.msg);
|
||||||
}
|
}
|
||||||
|
|
||||||
self.markFetching(false);
|
self.markFetching(false);
|
||||||
|
|
|
@ -93,7 +93,7 @@ export const ServiceStore = iRendererStore
|
||||||
updateMessage(json.msg || (options && options.successMessage));
|
updateMessage(json.msg || (options && options.successMessage));
|
||||||
|
|
||||||
// 配置了获取成功提示后提示,默认是空不会提示。
|
// 配置了获取成功提示后提示,默认是空不会提示。
|
||||||
self.msg && (getRoot(self) as IRendererStore).notify('success', self.msg);
|
options && options.successMessage && (getRoot(self) as IRendererStore).notify('success', self.msg);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -161,7 +161,7 @@ export const ServiceStore = iRendererStore
|
||||||
updateMessage(json.msg || (options && options.successMessage));
|
updateMessage(json.msg || (options && options.successMessage));
|
||||||
|
|
||||||
// 配置了获取成功提示后提示,默认是空不会提示。
|
// 配置了获取成功提示后提示,默认是空不会提示。
|
||||||
self.msg && (getRoot(self) as IRendererStore).notify('success', self.msg);
|
options && options.successMessage && (getRoot(self) as IRendererStore).notify('success', self.msg);
|
||||||
}
|
}
|
||||||
|
|
||||||
markFetching(false);
|
markFetching(false);
|
||||||
|
@ -280,7 +280,7 @@ export const ServiceStore = iRendererStore
|
||||||
updateMessage(json.msg || (options && options.successMessage));
|
updateMessage(json.msg || (options && options.successMessage));
|
||||||
|
|
||||||
// 配置了获取成功提示后提示,默认是空不会提示。
|
// 配置了获取成功提示后提示,默认是空不会提示。
|
||||||
self.msg && (getRoot(self) as IRendererStore).notify('success', self.msg);
|
options && options.successMessage && (getRoot(self) as IRendererStore).notify('success', self.msg);
|
||||||
}
|
}
|
||||||
|
|
||||||
self.initializing = false;
|
self.initializing = false;
|
||||||
|
|
Loading…
Reference in New Issue