@ant-design/pro-layout/es/components/SettingDrawer/BlockCheckbox.js

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CheckOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import classNames from 'classnames';
import { useMemo } from 'react';
var BlockCheckbox = function BlockCheckbox(_ref) {
  var value = _ref.value,
    configType = _ref.configType,
    onChange = _ref.onChange,
    list = _ref.list,
    prefixCls = _ref.prefixCls,
    hashId = _ref.hashId;
  var baseClassName = "".concat(prefixCls, "-block-checkbox");
  var dom = useMemo(function () {
    var domList = (list || []).map(function (item) {
      return _jsx(Tooltip, {
        title: item.title,
        children: _jsxs("div", {
          className: classNames(hashId, "".concat(baseClassName, "-item"), "".concat(baseClassName, "-item-").concat(item.key), "".concat(baseClassName, "-").concat(configType, "-item")),
          onClick: function onClick() {
            return onChange(item.key);
          },
          children: [_jsx(CheckOutlined, {
            className: "".concat(baseClassName, "-selectIcon ").concat(hashId),
            style: {
              display: value === item.key ? 'block' : 'none'
            }
          }), (item === null || item === void 0 ? void 0 : item.icon) ? _jsx("div", {
            className: "".concat(baseClassName, "-icon ").concat(hashId),
            children: item.icon
          }) : null]
        })
      }, item.key);
    });
    return domList;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value, list === null || list === void 0 ? void 0 : list.length, onChange]);
  return _jsx("div", {
    className: classNames(baseClassName, hashId),
    children: dom
  });
};
export { BlockCheckbox };