p85126437
/
amis
forked from p96170835/amis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Checkboxes Radios 支持group分组

This commit is contained in:
liaoxuezhi 2019-06-17 01:00:21 +08:00
parent 8ec475840d
commit 1180451a23
4 changed files with 117 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
scss/components/form/_checks.scss
View File

@ -219,4 +219,14 @@
display: inline-block;
margin-right: $gap-md;
}
&-group {
padding-left: px2rem(120px);
@include clearfix();
}
&-groupLabel {
float: left;
margin-left: px2rem(-120px);
}
}

65
src/components/Radios.tsx
View File

@ -30,6 +30,7 @@ interface RadioProps extends OptionProps {
disabled?: boolean;
onChange?: Function;
columnsCount: number;
itemClassName?: string;
classPrefix: string;
classnames: ClassNamesFn;
}
@ -71,6 +72,47 @@ export class Radios extends React.Component<RadioProps, any> {
onChange && onChange(newValue);
}
renderGroup(option:Option, index:number, valueArray: Array<Option>) {
const {
classnames: cx
} = this.props;
return (
<div key={index} className={cx("RadiosControl-group")}>
<label className={cx("RadiosControl-groupLabel")}>{option.label}</label>
{
option.children && option.children.length
? option.children.map((option, index) => this.renderItem(option, index, valueArray))
: null
}
</div>
);
}
renderItem(option:Option, index:number, valueArray: Array<Option>) {
const {
disabled,
inline,
itemClassName,
classnames: cx
} = this.props;
return (
<Checkbox
type="radio"
key={index}
onChange={() => this.toggleOption(option)}
checked={!!~valueArray.indexOf(option)}
className={cx(itemClassName, option.className)}
disabled={disabled || option.disabled}
inline={inline}
>
{option.label}
</Checkbox>
);
}
render() {
const {
value,
@ -95,20 +137,9 @@ export class Radios extends React.Component<RadioProps, any> {
let body: Array<React.ReactNode> = [];
if (options) {
body = options.map((option, key) => (
<Checkbox
type="radio"
classPrefix={classPrefix}
key={key}
onChange={() => this.toggleOption(option)}
checked={!!~valueArray.indexOf(option)}
className={option.className}
disabled={disabled || option.disabled}
inline={inline}
>
{option.label}
</Checkbox>
));
body = options.map((option, key) => option.children
? this.renderGroup(option, key, valueArray)
: this.renderItem(option, key, valueArray));
}
if (!inline && columnsCount > 1) {
@ -116,10 +147,8 @@ export class Radios extends React.Component<RadioProps, any> {
let cellClassName = `Grid-col--sm${weight === Math.round(weight) ? weight : ''}`;
body = chunk(body, columnsCount).map((group, groupIndex) => (
<div className={cx('Grid')} key={groupIndex}>
{group.map((item, index) => (
<div key={index} className={cx(cellClassName)}>
{item}
</div>
{Array.from({length: columnsCount as number}).map((_, index) => (
<div key={index} className={cx(cellClassName)}>{group[index]}</div>
))}
</div>
));

78
src/renderers/Form/Checkboxes.tsx
View File

@ -1,15 +1,18 @@
import React from 'react';
import {
OptionsControl,
OptionsControlProps
OptionsControlProps,
Option
} from './Options';
import cx from 'classnames';
import Checkbox from '../../components/Checkbox';
import chunk = require('lodash/chunk');
import { autobind } from '../../utils/helper';
export interface CheckboxesProps extends OptionsControlProps {
placeholder?: any;
disabled?: boolean;
itemClassName?: string;
columnsCount?: number;
};
@ -29,6 +32,47 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
defaultCheckAll && onToggleAll();
}
renderGroup(option:Option, index:number) {
const {
classnames: cx
} = this.props;
return (
<div key={index} className={cx("CheckboxesControl-group")}>
<label className={cx("CheckboxesControl-groupLabel")}>{option.label}</label>
{
option.children && option.children.length
? option.children.map((option, index) => this.renderItem(option, index))
: null
}
</div>
);
}
renderItem(option:Option, index:number) {
const {
itemClassName,
onToggle,
selectedOptions,
disabled,
inline
} = this.props;
return (
<Checkbox
className={itemClassName}
key={index}
onChange={() => onToggle(option)}
checked={!!~selectedOptions.indexOf(option)}
disabled={disabled || option.disabled}
inline={inline}
>
{option.label}
</Checkbox>
);
}
render() {
const {
className,
@ -41,31 +85,23 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
onToggle,
onToggleAll,
checkAll,
classPrefix: ns
classnames: cx,
itemClassName
} = this.props;
let body:Array<React.ReactNode> = [];
if (options) {
body = options.map((option, key) => (
<Checkbox
classPrefix={ns}
key={key}
onChange={() => onToggle(option)}
checked={!!~selectedOptions.indexOf(option)}
disabled={disabled || option.disabled}
inline={inline}
>
{option.label}
</Checkbox>
));
if (options && options.length) {
body = options.map((option, key) => option.children
? this.renderGroup(option, key)
: this.renderItem(option, key));
}
if (checkAll && body.length) {
body.unshift(
<Checkbox
key="checkall"
classPrefix={ns}
className={itemClassName}
onChange={onToggleAll}
checked={!!selectedOptions.length}
partial={!!(selectedOptions.length && selectedOptions.length !== options.length)}
@ -79,20 +115,20 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
if (!inline && (columnsCount as number) > 1) {
let weight = 12/(columnsCount as number);
let cellClassName = `${ns}Grid-col--sm${weight === Math.round(weight) ? weight : ''}`;
let cellClassName = `Grid-col--sm${weight === Math.round(weight) ? weight : ''}`;
body = chunk(body, columnsCount).map((group, groupIndex) => (
<div className={`${ns}Grid`} key={groupIndex}>
<div className={cx('Grid')} key={groupIndex}>
{Array.from({length: columnsCount as number}).map((_, index) => (
<div key={index} className={cellClassName}>{group[index]}</div>
<div key={index} className={cx(cellClassName)}>{group[index]}</div>
))}
</div>
));
}
return (
<div className={cx(`${ns}CheckboxesControl`, className)}>
<div className={cx(`CheckboxesControl`, className)}>
{body && body.length ? body : (
<span className={`${ns}Form-placeholder`}>{placeholder}</span>
<span className={`Form-placeholder`}>{placeholder}</span>
)}
</div>
);

4
src/renderers/Form/Radios.tsx
View File

@ -36,7 +36,8 @@ export default class RadiosControl extends React.Component<RadiosProps, any> {
inline,
formMode,
columnsCount,
classPrefix
classPrefix,
itemClassName
} = this.props;
return (
@ -53,6 +54,7 @@ export default class RadiosControl extends React.Component<RadiosProps, any> {
options={options}
columnsCount={columnsCount}
classPrefix={classPrefix}
itemClassName={itemClassName}
/>
);
}