优化 radios

This commit is contained in:
liaoxuezhi 2019-09-17 21:53:32 +08:00
parent dd322cf592
commit 8ed2c7c8d5
7 changed files with 30 additions and 12 deletions

View File

@ -215,6 +215,11 @@
} }
} }
} }
&-desc {
color: $text--muted-color;
margin-left: $Checkbox-gap;
}
} }
.#{$ns}CheckboxControl, .#{$ns}CheckboxControl,

View File

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

View File

@ -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;
} }
/** /**

View File

@ -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> = [];

View File

@ -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> {}

View File

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

View File

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