mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-08 18:39:20 +08:00
751edfc336
* feat: zeroRuntime * feat: generate full style * feat: add antd.css into global css * chore: revert site change * docs: add docs * chore: update scripts * chore: add test
106 lines
3.5 KiB
TypeScript
106 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { SmileOutlined } from '@ant-design/icons';
|
|
import { TreeSelect } from 'antd';
|
|
import type { TreeSelectProps } from 'antd';
|
|
|
|
import SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';
|
|
import useLocale from '../../../.dumi/hooks/useLocale';
|
|
|
|
const locales = {
|
|
cn: {
|
|
root: '根元素，设置树选择器的基础样式、边框、圆角容器样式',
|
|
prefix: '前缀元素，设置前缀内容的布局和样式',
|
|
input: '输入框元素，设置文本输入、搜索、选择值显示等输入框的核心交互样式',
|
|
suffix: '后缀元素，设置后缀内容、清除按钮、下拉箭头等后缀区域的样式',
|
|
'popup.item': '弹出菜单条目元素，设置树节点选项的样式、悬停态、选中态等交互状态',
|
|
'popup.itemTitle': '弹出菜单标题元素，设置树节点标题文字的显示样式',
|
|
'popup.root': '弹出菜单元素，设置下拉树形选择面板的定位、层级、背景、边框、阴影等弹层样式',
|
|
},
|
|
en: {
|
|
root: 'Root element with tree selector base styles, border, border radius container styles',
|
|
prefix: 'Prefix element with prefix content layout and styles',
|
|
input:
|
|
'Input element with text input, search, selected value display and other input core interaction styles',
|
|
suffix:
|
|
'Suffix element with suffix content, clear button, dropdown arrow and other suffix area styles',
|
|
'popup.item':
|
|
'Popup item element with tree node option styles, hover state, selected state and other interaction states',
|
|
'popup.itemTitle': 'Popup title element with tree node title text display styles',
|
|
'popup.root':
|
|
'Popup element with dropdown tree selection panel positioning, z-index, background, border, shadow and other popup layer styles',
|
|
},
|
|
};
|
|
const icon = <SmileOutlined />;
|
|
const treeData = [
|
|
{
|
|
value: 'contributors',
|
|
title: 'contributors',
|
|
children: [
|
|
{
|
|
value: 'aojunhao123',
|
|
title: 'aojunhao123',
|
|
},
|
|
{
|
|
value: 'thinkasany',
|
|
title: 'thinkasany',
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const Block: React.FC<Readonly<TreeSelectProps>> = (props) => {
|
|
const divRef = React.useRef<HTMLDivElement>(null);
|
|
const [value, setValue] = React.useState<string>();
|
|
return (
|
|
<div ref={divRef}>
|
|
<TreeSelect
|
|
{...props}
|
|
getPopupContainer={() => divRef.current!}
|
|
showSearch
|
|
placement="bottomLeft"
|
|
prefix="Prefix"
|
|
open
|
|
suffixIcon={icon}
|
|
styles={{
|
|
root: { zIndex: 1 },
|
|
popup: {
|
|
root: {
|
|
zIndex: 1,
|
|
maxHeight: 400,
|
|
overflow: 'auto',
|
|
},
|
|
},
|
|
}}
|
|
value={value}
|
|
placeholder="Please select"
|
|
allowClear
|
|
treeDefaultExpandAll
|
|
onChange={setValue}
|
|
treeData={treeData}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const [locale] = useLocale(locales);
|
|
return (
|
|
<SemanticPreview
|
|
componentName="TreeSelect"
|
|
semantics={[
|
|
{ name: 'root', desc: locale.root },
|
|
{ name: 'prefix', desc: locale.prefix },
|
|
{ name: 'input', desc: locale.input },
|
|
{ name: 'suffix', desc: locale.suffix },
|
|
{ name: 'popup.root', desc: locale['popup.root'] },
|
|
{ name: 'popup.item', desc: locale['popup.item'] },
|
|
{ name: 'popup.itemTitle', desc: locale['popup.itemTitle'] },
|
|
]}
|
|
>
|
|
<Block />
|
|
</SemanticPreview>
|
|
);
|
|
};
|
|
|
|
export default App;
|