linkmore-design/es/icon-select/index.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _excluded = ["item"];
import cn from 'classnames';
// import { IconFont, Modal, VirtualList } from 'linkmore-design'
import React, { useEffect, useMemo, useState } from 'react';
import IconFont from "../icon-font";
import Modal from "../modal";
import VirtualList from "../virtual-list";
import data from "./data.js";
var IconSelect = function IconSelect(_ref) {
  var visible = _ref.visible,
    onClose = _ref.onClose,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? '' : _ref$value,
    onChange = _ref.onChange;
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    active = _useState2[0],
    setActive = _useState2[1];
  var options = useMemo(function () {
    var result = [];
    var originData = data.glyphs;
    for (var i = 0, len = originData.length; i < len; i += 4) {
      result.push(originData.slice(i, i + 4));
    }
    return result;
  }, []);
  var onSave = function onSave() {
    onChange === null || onChange === void 0 ? void 0 : onChange(active);
    onClose === null || onClose === void 0 ? void 0 : onClose();
  };
  var onDoubleClick = function onDoubleClick(e) {
    e.preventDefault();
    e.stopPropagation();
    onSave();
  };
  useEffect(function () {
    if (visible) {
      setActive(value);
    }
  }, [visible]);
  var config = {
    title: '选择图标',
    visible: visible,
    size: 'small',
    onOk: onSave,
    onCancel: onClose
    // footer: [
    //   <Button key="cancel" onClick={onClose} size="middle">
    //     取消
    //   </Button>,
    //   <Button type="primary" key="back" onClick={onSave} size="middle">
    //     确定
    //   </Button>,
    // ],
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, config, /*#__PURE__*/React.createElement("div", {
    className: "lm-icon_select"
  }, /*#__PURE__*/React.createElement(VirtualList, {
    options: options
  }, function (_ref2) {
    var item = _ref2.item,
      resetProps = _objectWithoutProperties(_ref2, _excluded);
    return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
      className: "lm-icon_row"
    }), item === null || item === void 0 ? void 0 : item.map(function (v) {
      return /*#__PURE__*/React.createElement("div", {
        key: v.font_class,
        className: "lm-icon_col_wrapper"
      }, /*#__PURE__*/React.createElement("div", {
        className: cn('lm-icon_col', "lmweb-".concat(v.font_class) === active && 'lm-icon_active'),
        onClick: function onClick() {
          return setActive("lmweb-".concat(v.font_class));
        },
        onDoubleClick: onDoubleClick
      }, /*#__PURE__*/React.createElement(IconFont, {
        type: "lmweb-".concat(v.font_class)
      })));
    }));
  }))));
};
export default IconSelect;