linkmore-design/es/button-tags/ButtonTags.js

🌈 🚀lm组件库。🚀

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import React from 'react';

/*
  options: 展示的标签项
  type: 'radio' / 'checkbox'
  value: 选中的值
  onChang: 选中时触发事件
*/
var ButtonTags = function ButtonTags(props) {
  var value = props.value,
    onChange = props.onChange,
    disabled = props.disabled,
    _props$type = props.type,
    type = _props$type === void 0 ? 'checkbox' : _props$type,
    options = props.options,
    size = props.size;
  var handleClick = function handleClick(item) {
    if (type === 'radio') {
      var nValue = value === item.value ? '' : item.value;
      onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
    } else {
      var oriValue = value || [];
      var has = oriValue === null || oriValue === void 0 ? void 0 : oriValue.includes(item.value);
      var _nValue = has ? oriValue.filter(function (v) {
        return v !== item.value;
      }) : [].concat(_toConsumableArray(oriValue), [item.value]);
      onChange === null || onChange === void 0 ? void 0 : onChange(_nValue);
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "lm_base_button_tag_Group ".concat(size === 'small' ? 'small' : '', "  ").concat(disabled ? 'disabled' : '')
  }, options === null || options === void 0 ? void 0 : options.map(function (item) {
    return /*#__PURE__*/React.createElement("div", {
      key: item.value,
      className: "button_tag_item ".concat((value === null || value === void 0 ? void 0 : value.indexOf(item.value)) > -1 ? 'active' : ''),
      onClick: function onClick() {
        return handleClick(item);
      }
    }, item.label);
  }));
};
export default ButtonTags;