@yuntijs/ui
Version:
☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps
78 lines • 2.56 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import { CheckOutlined } from '@ant-design/icons';
import { getCodeLanguageOptions } from '@lexical/code';
import { ActionIcon } from '@lobehub/ui';
import { Dropdown, Space } from 'antd';
import { SquareCode } from 'lucide-react';
import { useCallback, useMemo, useState } from 'react';
import { BLOCK_TYPE, formatCode } from "../utils";
import { useStyles } from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var languageOptions = [].concat(_toConsumableArray(getCodeLanguageOptions()), [['echarts', 'ECharts']]);
export default function DropdownLanguages(_ref) {
var size = _ref.size,
editor = _ref.editor,
blockType = _ref.blockType,
value = _ref.value,
onChange = _ref.onChange;
var _useStyles = useStyles(),
styles = _useStyles.styles;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var handleChange = useCallback(function (v) {
formatCode(editor, blockType);
onChange(v);
}, [blockType, editor, onChange]);
var items = useMemo(function () {
return languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.map(function (_ref2) {
var _ref3 = _slicedToArray(_ref2, 2),
k = _ref3[0],
v = _ref3[1];
return {
key: k,
label: /*#__PURE__*/_jsxs(Space, {
children: [v, value === k ? /*#__PURE__*/_jsx(CheckOutlined, {}) : null]
})
};
});
}, [value]);
var handleOpen = useCallback(function (_open, _info) {
if (blockType !== BLOCK_TYPE.CODE) {
return;
}
if (_info.source === 'menu') {
return;
}
setOpen(_open);
}, [blockType]);
return /*#__PURE__*/_jsx(Dropdown, {
menu: {
items: items,
selectable: true,
multiple: false,
selectedKeys: [value],
activeKey: value,
onSelect: function onSelect(d) {
return handleChange(d.key);
},
className: styles.dropdownLang
},
onOpenChange: handleOpen,
open: open,
placement: "bottom",
trigger: ['hover'],
children: /*#__PURE__*/_jsx(ActionIcon, {
active: blockType === BLOCK_TYPE.CODE,
icon: SquareCode,
onClick: function onClick() {
return formatCode(editor, blockType);
},
size: size,
title: "Code Block"
})
});
}