taro-material/h5/components/checkbox/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { View, Text } from '@tarojs/components';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import AtComponent from "../../common/component";

export default class AtCheckbox extends AtComponent {
  handleClick(idx) {
    const { selectedList, options } = this.props;
    const option = options[idx];
    const { disabled, value } = option;
    if (disabled) return;

    const selectedSet = new Set(selectedList);
    if (!selectedSet.has(value)) {
      selectedSet.add(value);
    } else {
      selectedSet.delete(value);
    }
    this.props.onChange([...selectedSet]);
  }

  render() {
    const {
      customStyle,
      className,
      options,
      selectedList
    } = this.props;

    const rootCls = classNames('at-checkbox', className);

    return <View className={rootCls} style={customStyle}>
      {options.map((option, idx) => {
        const { value, disabled, label, desc } = option;
        const optionCls = classNames('at-checkbox__option', {
          'at-checkbox__option--disabled': disabled,
          'at-checkbox__option--selected': selectedList.includes(value)
        });

        return <View className={optionCls} key={value} onClick={this.handleClick.bind(this, idx)}>
          <View className="at-checkbox__option-wrap">
            <View className="at-checkbox__option-cnt">
              <View className="at-checkbox__icon-cnt">
                <Text className="at-icon at-icon-check"></Text>
              </View>
              <View className="at-checkbox__title">{label}</View>
            </View>
            {desc && <View className="at-checkbox__desc">{desc}</View>}
          </View>
        </View>;
      })}
    </View>;
  }
}

AtCheckbox.defaultProps = {
  customStyle: '',
  className: '',
  options: [],
  selectedList: [],
  onChange() {}
};

AtCheckbox.propTypes = {
  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
  options: PropTypes.array,
  selectedList: PropTypes.array,
  onChange: PropTypes.func
};