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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _iconFont = _interopRequireDefault(require("../icon-font"));
var _modal = _interopRequireDefault(require("../modal"));
var _virtualList = _interopRequireDefault(require("../virtual-list"));
var _data = _interopRequireDefault(require("./data.js"));
// import { IconFont, Modal, VirtualList } from 'linkmore-design'

const IconSelect = ({
  visible,
  onClose,
  value = '',
  onChange
}) => {
  const [active, setActive] = (0, _react.useState)();
  const options = (0, _react.useMemo)(() => {
    const result = [];
    const originData = _data.default.glyphs;
    for (let i = 0, len = originData.length; i < len; i += 4) {
      result.push(originData.slice(i, i + 4));
    }
    return result;
  }, []);
  const onSave = () => {
    onChange?.(active);
    onClose?.();
  };
  const onDoubleClick = e => {
    e.preventDefault();
    e.stopPropagation();
    onSave();
  };
  (0, _react.useEffect)(() => {
    if (visible) {
      setActive(value);
    }
  }, [visible]);
  const config = {
    title: '选择图标',
    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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_modal.default, config, /*#__PURE__*/_react.default.createElement("div", {
    className: "lm-icon_select"
  }, /*#__PURE__*/_react.default.createElement(_virtualList.default, {
    options: options
  }, ({
    item,
    ...resetProps
  }) => /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
    className: "lm-icon_row"
  }), item?.map(v => /*#__PURE__*/_react.default.createElement("div", {
    key: v.font_class,
    className: "lm-icon_col_wrapper"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('lm-icon_col', `lmweb-${v.font_class}` === active && 'lm-icon_active'),
    onClick: () => setActive(`lmweb-${v.font_class}`),
    onDoubleClick: onDoubleClick
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: `lmweb-${v.font_class}`
  })))))))));
};
var _default = IconSelect;
exports.default = _default;