yzsd/lib/tag/demo/checkable.js

a niubi UI component

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _yzsd = require("yzsd");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
 * title: 可选择标签
 * description: 可通过 `CheckableTag` 实现类似 Checkbox 的效果，点击切换选中效果。

   该组件为完全受控组件，不支持非受控用法。
 */

var CheckableTag = _yzsd.Tag.CheckableTag;
var tagsData = ['Movies', 'Books', 'Music', 'Sports'];
var App = function App() {
  var _useState = (0, _react.useState)(['Books']),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    selectedTags = _useState2[0],
    setSelectedTags = _useState2[1];
  var handleChange = function handleChange(tag, checked) {
    var nextSelectedTags = checked ? [].concat((0, _toConsumableArray2["default"])(selectedTags), [tag]) : selectedTags.filter(function (t) {
      return t !== tag;
    });
    console.log('You are interested in: ', nextSelectedTags);
    setSelectedTags(nextSelectedTags);
  };
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      marginRight: 8
    }
  }, "Categories:"), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, tagsData.map(function (tag) {
    return /*#__PURE__*/_react["default"].createElement(CheckableTag, {
      key: tag,
      checked: selectedTags.includes(tag),
      onChange: function onChange(checked) {
        return handleChange(tag, checked);
      }
    }, tag);
  })));
};
var _default = App;
exports["default"] = _default;