@yuntijs/ui
Version:
☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps
77 lines • 2.59 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { $patchStyleText } from '@lexical/selection';
import { Icon } from '@lobehub/ui';
import { Dropdown, Flex, Typography } from 'antd';
import { useTheme } from 'antd-style';
import { $getSelection } from 'lexical';
import { ChevronDown, Type } from 'lucide-react';
import { useCallback, useMemo } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var FONT_FAMILY_OPTIONS = [['Arial', 'Arial'], ['Courier New', 'Courier New'], ['Georgia', 'Georgia'], ['Times New Roman', 'Times New Roman'], ['Trebuchet MS', 'Trebuchet MS'], ['Verdana', 'Verdana']];
export var FontDropDown = function FontDropDown(_ref) {
var _items$find;
var editor = _ref.editor,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
value = _ref.value;
var token = useTheme();
var handleClick = useCallback(function (option) {
editor.update(function () {
var selection = $getSelection();
if (selection !== null) {
$patchStyleText(selection, _defineProperty({}, 'font-family', option));
}
});
}, [editor]);
var items = useMemo(function () {
return FONT_FAMILY_OPTIONS.map(function (_ref2) {
var _ref3 = _slicedToArray(_ref2, 2),
k = _ref3[0],
v = _ref3[1];
return {
key: k,
label: v
};
});
}, []);
var onClick = useCallback(function (_ref4) {
var key = _ref4.key;
handleClick(key);
}, [handleClick]);
return /*#__PURE__*/_jsx(Dropdown, {
disabled: disabled,
menu: {
items: items,
onClick: onClick,
activeKey: value
},
trigger: ['click'],
children: /*#__PURE__*/_jsxs(Flex, {
align: "center",
gap: 0,
children: [/*#__PURE__*/_jsxs(Flex, {
align: "center",
gap: 8,
children: [/*#__PURE__*/_jsx(Icon, {
color: token.colorTextTertiary,
icon: Type,
size: 16
}), /*#__PURE__*/_jsx(Typography.Text, {
ellipsis: true,
style: {
width: 50
},
children: ((_items$find = items.find(function (d) {
return d.key === value;
})) === null || _items$find === void 0 ? void 0 : _items$find.label) || value
})]
}), /*#__PURE__*/_jsx(Icon, {
color: token.colorTextQuaternary,
icon: ChevronDown,
size: 18
})]
})
});
};