@lemon-fe/components 0.0.0

package/es/Popup/index.js

@@ -0,0 +1,191 @@
+var _excluded = ["value", "onChange", "component", "children", "formatLabel", "disabled", "allowClear", "autoFocus", "showLabel", "beforeOk", "placeholder", "onClick", "disabledTip"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useState, createElement, cloneElement, useRef } from 'react';
+import { Modal, Input, message } from 'antd';
+import { CloseCircleFilled } from '@ant-design/icons';
+import { PREFIX_CLS } from '../constants';
+import SearchIcon from '../Icons/Search';
+
+function Popup(props) {
+  var valueProp = props.value,
+      onChange = props.onChange,
+      component = props.component,
+      children = props.children,
+      formatLabel = props.formatLabel,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$allowClear = props.allowClear,
+      allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
+      autoFocus = props.autoFocus,
+      _props$showLabel = props.showLabel,
+      showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
+      beforeOk = props.beforeOk,
+      placeholder = props.placeholder,
+      onClick = props.onClick,
+      disabledTip = props.disabledTip,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var prefixCls = "".concat(PREFIX_CLS, "-popup");
+
+  var _useState = useState(valueProp),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      visible = _useState4[0],
+      setVisible = _useState4[1];
+
+  var inputRef = useRef(null);
+
+  var handleCancel = function handleCancel() {
+    setVisible(false);
+  };
+
+  var handleOpen = function handleOpen() {
+    if (onClick) {
+      onClick();
+    }
+
+    if (disabled) {
+      if (disabledTip) {
+        message.warning(disabledTip);
+      }
+
+      return;
+    }
+
+    if (valueProp) {
+      setValue(valueProp);
+    }
+
+    setVisible(true);
+  };
+
+  var handleOk = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var res;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setVisible(false);
+
+              if (!onChange) {
+                _context.next = 10;
+                break;
+              }
+
+              if (!(beforeOk && value)) {
+                _context.next = 9;
+                break;
+              }
+
+              _context.next = 5;
+              return beforeOk(value);
+
+            case 5:
+              res = _context.sent;
+              onChange(res);
+              _context.next = 10;
+              break;
+
+            case 9:
+              onChange(value);
+
+            case 10:
+              if (inputRef.current) {
+                inputRef.current.focus();
+              }
+
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleOk() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var handleClear = function handleClear(e) {
+    e.stopPropagation();
+
+    if (onChange) {
+      onChange(undefined);
+    }
+  };
+
+  var label = valueProp ? formatLabel ? formatLabel(valueProp) : valueProp : undefined;
+  var trigger;
+
+  if (children) {
+    trigger = showLabel ? /*#__PURE__*/cloneElement(children, undefined, label) : children;
+  } else {
+    trigger = /*#__PURE__*/React.createElement(Input, {
+      className: "".concat(prefixCls, "-input"),
+      value: label,
+      readOnly: true,
+      ref: inputRef,
+      disabled: disabled,
+      autoFocus: autoFocus,
+      placeholder: placeholder,
+      suffix: /*#__PURE__*/React.createElement(React.Fragment, null, !disabled && allowClear && label && /*#__PURE__*/React.createElement(CloseCircleFilled, {
+        className: "ant-input-clear-icon",
+        onClick: handleClear
+      }), /*#__PURE__*/React.createElement(SearchIcon, null))
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-wrapper"),
+    onClick: handleOpen
+  }, trigger), /*#__PURE__*/React.createElement(Modal, _objectSpread({
+    destroyOnClose: true,
+    visible: visible,
+    width: 896,
+    centered: true,
+    onCancel: handleCancel,
+    onOk: handleOk,
+    bodyStyle: {
+      height: '549px',
+      padding: 0,
+      backgroundColor: '#f9f9f9'
+    }
+  }, restProps), /*#__PURE__*/createElement(component, {
+    value: value,
+    onChange: setValue
+  })));
+}
+
+export default Popup;

package/es/Popup/index.less

@@ -0,0 +1,14 @@
+@import '../theme.less';
+
+.@{prefixCls}-popup {
+  cursor: pointer;
+
+  &-wrapper {
+    width: 100%;
+    height: 100%;
+  }
+
+  &-input input {
+    cursor: pointer;
+  }
+}

package/es/Section/index.d.ts

@@ -0,0 +1,54 @@
+import type { Key } from 'react';
+import type { ReactNode, CSSProperties } from 'react';
+import { TabsProps } from 'antd';
+interface Props extends Pick<TabsProps, 'activeKey' | 'onTabClick'> {
+    /**
+     * @description 标题
+     */
+    title?: string | ReactNode;
+    /**
+     * @description 内容
+     */
+    children?: ReactNode;
+    /**
+     * @description 容器样式
+     */
+    style?: CSSProperties;
+    /**
+     * @description 容器样式
+     */
+    className?: string;
+    /**
+     * @description 暂未实现
+     */
+    footer?: ReactNode;
+    /**
+     * @description 当内部有表头固定的表格时，可以考虑这个
+     */
+    type?: 'table';
+    /**
+     * @description tabs
+     */
+    tabs?: {
+        title?: string;
+        key: string;
+    }[];
+    /**
+     * @description body元素的样式
+     */
+    bodyStyle?: CSSProperties;
+    /**
+     * @description 标签切换事件
+     */
+    onTabChange?: (activeKey: Key, activeIndex: number) => void;
+    /**
+     * @description 操作栏，请与Actions组件结合使用并且带有标题，请不要在Tabs模式时使用
+     */
+    actions?: ReactNode;
+    /**
+     * @description 同 style flex属性， 为true时 flex = 1
+     */
+    flex?: boolean | number;
+}
+export default function Section(props: Props): JSX.Element;
+export {};

package/es/Section/index.js

@@ -0,0 +1,111 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from 'react';
+import classNames from 'classnames';
+import { Tabs } from 'antd';
+import { PREFIX_CLS } from '../constants';
+export default function Section(props) {
+  var _classNames;
+
+  var title = props.title,
+      children = props.children,
+      style = props.style,
+      className = props.className,
+      tabs = props.tabs,
+      type = props.type,
+      bodyStyle = props.bodyStyle,
+      onTabChange = props.onTabChange,
+      actions = props.actions,
+      flex = props.flex,
+      activeKey = props.activeKey,
+      onTabClick = props.onTabClick;
+  var prefixCls = PREFIX_CLS + '-section';
+  var containerStyle = style;
+
+  if (flex) {
+    containerStyle = _objectSpread({
+      flex: typeof flex === 'number' ? flex : 1
+    }, containerStyle);
+  } // 不使用Children.map的原因是由于它会给子节点生成一个key与tabs的activeTabKey无法对应
+
+
+  var mapChildren = function mapChildren(children, cb) {
+    var nodes = [];
+
+    if (Array.isArray(children)) {
+      nodes = children;
+    } else {
+      nodes = [children];
+    }
+
+    return nodes.filter(function (item) {
+      return item !== null;
+    }).map(cb);
+  };
+
+  var hasActions = !!actions;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(type), !!type), _defineProperty(_classNames, "".concat(prefixCls, "-flex"), !!flex), _defineProperty(_classNames, "".concat(prefixCls, "-with-actions"), hasActions), _classNames), className),
+    style: containerStyle
+  }, !!title || hasActions ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-header")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-title")
+  }, title), actions) : null, tabs !== undefined && tabs.length > 0 ? /*#__PURE__*/React.createElement(Tabs, {
+    activeKey: activeKey,
+    onTabClick: onTabClick,
+    renderTabBar: function renderTabBar(tabProps) {
+      var activeKey = tabProps.activeKey,
+          onTabClick = tabProps.onTabClick;
+      var active = tabs.findIndex(function (item) {
+        return item.key === activeKey;
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-tab")
+      }, tabs.map(function (_, index) {
+        var _classNames2;
+
+        var tab = tabs[index];
+        var key = tab.key;
+        return /*#__PURE__*/React.createElement("div", {
+          key: key,
+          className: classNames("".concat(prefixCls, "-tab-item"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-tab-item-active"), active === index), _defineProperty(_classNames2, "".concat(prefixCls, "-tab-item-active-left"), index === active - 1), _defineProperty(_classNames2, "".concat(prefixCls, "-tab-item-active-right"), index === active + 1), _classNames2)),
+          onClick: function onClick(e) {
+            if (key !== null) {
+              onTabClick(key, e);
+            }
+
+            if (key !== activeKey) {
+              if (onTabChange) {
+                onTabChange(tab.key, index);
+              }
+            }
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "".concat(prefixCls, "-tab-item-arc-left")
+        }), /*#__PURE__*/React.createElement("div", {
+          className: "".concat(prefixCls, "-tab-item-content")
+        }, tab.title), /*#__PURE__*/React.createElement("div", {
+          className: "".concat(prefixCls, "-tab-item-arc-right")
+        }));
+      }));
+    }
+  }, mapChildren(children, function (child, index) {
+    var _tabs$index = tabs[index],
+        tab = _tabs$index.title,
+        key = _tabs$index.key;
+    return /*#__PURE__*/React.createElement(Tabs.TabPane, {
+      tab: tab,
+      key: key,
+      className: "".concat(prefixCls, "-body"),
+      style: bodyStyle
+    }, child);
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body"),
+    style: bodyStyle
+  }, children));
+}

package/es/Section/index.less

@@ -0,0 +1,177 @@
+@import '../theme.less';
+
+.@{prefixCls}-section {
+  position: relative;
+  width: 100%;
+  color: #333;
+
+  &-flex {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  &-flex &-body {
+    flex: 1 1 100%;
+    overflow: auto;
+  }
+
+  &-header {
+    display: flex;
+    margin-bottom: 8px;
+  }
+
+  &-title {
+    flex: 1;
+    font-weight: bold;
+    font-size: 14px;
+  }
+
+  &-with-actions &-header {
+    align-items: flex-end;
+  }
+
+  &-body {
+    padding: @space;
+    background-color: #fff;
+    border-radius: 4px;
+
+    & > .@{prefixCls}-actions {
+      padding: 16px;
+    }
+
+    & > .@{prefixCls}-table {
+      overflow: auto;
+      border-radius: 6px 6px 0 0;
+    }
+
+    &.ant-tabs-tabpane {
+      border-top-left-radius: 0;
+    }
+  }
+
+  &-footer {
+    padding: 10px 0;
+    background-color: #fff;
+  }
+
+  & > .ant-tabs {
+    flex: 1;
+
+    & > .ant-tabs-content-holder {
+      flex: 1;
+
+      .ant-tabs-content {
+        height: 100%;
+      }
+    }
+  }
+
+  &-tab {
+    position: relative;
+    left: 4px;
+    display: flex;
+
+    &-item {
+      position: relative;
+      z-index: 1;
+      padding: 0 8px;
+      cursor: pointer;
+
+      &-content {
+        position: relative;
+        z-index: 2;
+        height: 40px;
+        padding: 0 8px;
+        line-height: 40px;
+        background: #ededed;
+      }
+
+      &-arc-left {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 16px;
+        height: 40px;
+        background: #ededed;
+        transform-origin: 50% 50%;
+      }
+
+      &-arc-right {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 1;
+        width: 16px;
+        height: 40px;
+        background: #ededed;
+        transform-origin: 50% 50%;
+      }
+
+      &-active {
+        z-index: 2;
+        color: .primary(1) [];
+      }
+
+      &-active &-content {
+        background: #fff;
+      }
+
+      &-active &-arc-left {
+        background: #fff;
+        border-top-left-radius: 4px;
+        transform: skew(-10deg);
+      }
+
+      &-active &-arc-right {
+        background: #fff;
+        border-top-right-radius: 4px;
+        transform: skew(10deg);
+      }
+
+      &-active-left &-arc-right,
+      &:last-child &-arc-right {
+        border-top-right-radius: 4px;
+        transform: skew(10deg);
+      }
+
+      &-active-right &-arc-left,
+      &:first-child &-arc-left {
+        border-top-left-radius: 4px;
+        transform: skew(-10deg);
+      }
+    }
+
+    &-item + &-item::before {
+      position: absolute;
+      top: 14px;
+      left: 0;
+      z-index: 2;
+      display: block;
+      width: 1px;
+      height: 12px;
+      background: #dbdbdb;
+      content: '';
+    }
+
+    &-item-active::before,
+    &-item-active-right::before {
+      display: none !important;
+    }
+  }
+}
+
+.@{prefixCls}-section-table {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+
+  .@{prefixCls}-section-body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+}

package/es/SiderTree/TreeNodeTitle.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { OperationType, TreeData } from './typings';
+interface Props<T> {
+    node: TreeData<T>;
+    prefixCls: string;
+    operation?: OperationType<T>;
+}
+export default function TreeNodeTitle<T>(props: Props<T>): JSX.Element;
+export {};

package/es/SiderTree/TreeNodeTitle.js

@@ -0,0 +1,124 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { Popover } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+export default function TreeNodeTitle(props) {
+  var _operation$others;
+
+  var item = props.node,
+      operation = props.operation,
+      prefixCls = props.prefixCls;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      show = _useState2[0],
+      setShow = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      visible = _useState4[0],
+      setVisible = _useState4[1];
+
+  var trigger = useRef(null);
+  useEffect(function () {
+    var _trigger$current, _title, _title2;
+
+    var handler = function handler() {
+      setShow(function (prev) {
+        return !prev;
+      });
+    };
+
+    var title = (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.parentNode;
+    (_title = title) === null || _title === void 0 ? void 0 : _title.addEventListener('mouseenter', handler);
+    (_title2 = title) === null || _title2 === void 0 ? void 0 : _title2.addEventListener('mouseleave', handler);
+    return function () {
+      var _title3, _title4;
+
+      (_title3 = title) === null || _title3 === void 0 ? void 0 : _title3.removeEventListener('mouseenter', handler);
+      (_title4 = title) === null || _title4 === void 0 ? void 0 : _title4.removeEventListener('mouseleave', handler);
+      title = null;
+    };
+  }, []);
+
+  if (!operation) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-title-content")
+    }, item.title);
+  }
+
+  var others = (_operation$others = operation.others) === null || _operation$others === void 0 ? void 0 : _operation$others.call(operation, item);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-title-content"),
+    ref: trigger
+  }, item.title), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-title-operators"),
+    style: {
+      display: visible || show ? 'flex' : 'none'
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, others ? /*#__PURE__*/React.createElement(Popover, {
+    overlayClassName: "".concat(prefixCls, "-menu-popover"),
+    placement: "bottomLeft",
+    visible: visible,
+    trigger: "click",
+    content: /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        return setVisible(false);
+      }
+    }, others),
+    onVisibleChange: setVisible
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-title-operators-item"),
+    onClick: function onClick() {
+      return setVisible(true);
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "7",
+    height: "7",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "3.5",
+    cy: "3.5",
+    r: "1"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: ".5",
+    cy: "3.5",
+    r: "1"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "6.5",
+    cy: "3.5",
+    r: "1"
+  }))))) : null, operation.onAdd ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-title-operators-item"),
+    onClick: function onClick() {
+      return operation.onAdd(item);
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "7",
+    height: "7",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 3h7v1H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4 0v7H3V0z"
+  })))) : null));
+}