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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
/*
  options: 展示的标签项
  type: 'radio' / 'checkbox'
  value: 选中的值
  onChang: 选中时触发事件
*/
const ButtonTags = props => {
  const {
    value,
    onChange,
    disabled,
    type = 'checkbox',
    options,
    size
  } = props;
  const handleClick = item => {
    if (type === 'radio') {
      const nValue = value === item.value ? '' : item.value;
      onChange?.(nValue);
    } else {
      const oriValue = value || [];
      const has = oriValue?.includes(item.value);
      const nValue = has ? oriValue.filter(v => v !== item.value) : [...oriValue, item.value];
      onChange?.(nValue);
    }
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: `lm_base_button_tag_Group ${size === 'small' ? 'small' : ''}  ${disabled ? 'disabled' : ''}`
  }, options?.map(item => /*#__PURE__*/_react.default.createElement("div", {
    key: item.value,
    className: `button_tag_item ${value?.indexOf(item.value) > -1 ? 'active' : ''}`,
    onClick: () => handleClick(item)
  }, item.label)));
};
var _default = ButtonTags;
exports.default = _default;