weex-nuke/lib/node_modules/nuke-checkbox/src/view/checkbox-group.jsx

基于 Rax 、Weex 的高性能组件体系 ~~

/** @jsx createElement */

'use strict';

import { createElement, Component, PropTypes } from 'rax';
import Touchable from 'nuke-touchable';
import View from 'nuke-view';
import Text from 'nuke-text';
import { connectStyle } from 'nuke-theme-provider';
import Checkbox from './checkbox';
import stylesProvider from '../styles';

function filterValue(selectedValue, value) {
  return selectedValue.filter(v => v !== value);
}
/**
 * Checkbox.group
 */
class CheckboxGroup extends Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.displayName = 'CheckboxGroup';
  }
  getChildContext() {
    return {
      __group__: true,
      onChange: this.onChange,
      value: this.props.value,
    };
  }
  onChange(value, checked) {
    let selectedValue = this.props.value;
    if (checked) {
      selectedValue = selectedValue.concat(value);
    } else {
      selectedValue = filterValue(selectedValue, value);
    }
    this.props.onChange && this.props.onChange(selectedValue);
  }
  wrapPress(value) {
    const checked = this.props.value.indexOf(value) === -1;
    this.onChange(value, checked);
  }

  render() {
    let { children } = this.props;
    const { dataSource = [], style, size, themeStyle, renderItem, groupItemStyle, reverse, labelStyle } = this.props;
    const groupStyle = Object.assign({}, themeStyle.group, groupItemStyle);

    const textStyle = Object.assign(
      size === 'small' ? themeStyle['group-small-text'] : themeStyle['group-medium-text'],
      labelStyle
    );

    if (!children) {
      children = dataSource.map((item, index) => {
        if (typeof item !== 'object') {
          item = { label: item, value: item, index };
        }
        const { label, value, disabled, ...others } = item;
        if (label && !renderItem) {
          let labelGroup = [
            <Checkbox disabled={disabled} size={size} value={value} onChange={() => this.onChange()} />,
            <Text style={textStyle}>{label}</Text>,
          ];
          if (reverse) {
            labelGroup = labelGroup.reverse();
          }
          return (
            <Touchable style={[groupStyle, style]} onPress={() => this.wrapPress(value)}>
              {labelGroup}
            </Touchable>
          );
        } else if (label && renderItem) {
          return typeof renderItem === 'function' ? renderItem(item, this.onChange) : null;
        }
        return <Checkbox {...others} disabled={disabled} checked={value} />;
      });
    }

    return <View style={style}>{children}</View>;
  }
}
CheckboxGroup.displayName = 'CheckboxGroup';
CheckboxGroup.propTypes = {
  /**
   * 多选类型的数据源
   */
  dataSource: PropTypes.array,
  /**
   * 选择回调
   */
  onChange: PropTypes.func,
  /**
   * 选中value，配合dataSource的value字段使用
   */
  value: PropTypes.array,
  style: PropTypes.object,
  size: PropTypes.string,
  themeStyle: PropTypes.object,
  /**
   * 反转label与checkbox的显示顺序
   */
  reverse: PropTypes.bool,
  children: PropTypes.any,
  renderItem: PropTypes.func,
  /**
   * group子元素的外观样式
   */
  groupItemStyle: PropTypes.object,
  /**
   * group 子元素的label文案样式
   */
  labelStyle: PropTypes.object,
};

CheckboxGroup.defaultProps = {
  dataSource: [],
  onChange: () => {},
  value: [],
  style: {},
  size: 'small',
  themeStyle: {},
  reverse: false,
  groupItemStyle: {},
  labelStyle: {},
};
CheckboxGroup.childContextTypes = {
  onChange: PropTypes.func,
  __group__: PropTypes.bool,
  value: PropTypes.any,
};
export default connectStyle(stylesProvider)(CheckboxGroup);