mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-08 18:39:20 +08:00
feat: Mentions reduce dom strcuture and support size (#55638)
* chore: init mentions * feat: Mentions support size * chore: update demo * chore: adjust style * test: update snapshot --------- Co-authored-by: thinkasany <480968828@qq.com> Co-authored-by: 遇见同学 <1875694521@qq.com>
This commit is contained in:
二货爱吃白萝卜
@@ -2021,10 +2021,7 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx extend context c
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class="ant-mentions-affix-wrapper ant-mentions-affix-wrapper-input-with-clear-btn ant-mentions-outlined ant-mentions-status-success css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions"
|
||||
class="ant-mentions-affix-wrapper ant-mentions-affix-wrapper-input-with-clear-btn ant-mentions-outlined ant-mentions-status-success ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -2033,7 +2030,6 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx extend context c
|
||||
>
|
||||
@mention1
|
||||
</textarea>
|
||||
</div>
|
||||
<span
|
||||
class="ant-mentions-suffix"
|
||||
>
|
||||
@@ -5987,7 +5983,7 @@ Array [
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-disabled ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-disabled ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea rc-textarea-disabled"
|
||||
@@ -32008,16 +32004,12 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions-status-error css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions"
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions-status-error ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
rows="1"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="ant-mentions-suffix"
|
||||
>
|
||||
@@ -32659,7 +32651,7 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-filled css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-filled ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
aria-required="true"
|
||||
|
||||
@@ -1531,10 +1531,7 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx correctly 1`] =
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class="ant-mentions-affix-wrapper ant-mentions-affix-wrapper-input-with-clear-btn ant-mentions-outlined ant-mentions-status-success css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions"
|
||||
class="ant-mentions-affix-wrapper ant-mentions-affix-wrapper-input-with-clear-btn ant-mentions-outlined ant-mentions-status-success ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -1543,7 +1540,6 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx correctly 1`] =
|
||||
>
|
||||
@mention1
|
||||
</textarea>
|
||||
</div>
|
||||
<span
|
||||
class="ant-mentions-suffix"
|
||||
>
|
||||
@@ -3142,7 +3138,7 @@ Array [
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-disabled ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-disabled ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea rc-textarea-disabled"
|
||||
@@ -14270,16 +14266,12 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions-status-error css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions"
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions-status-error ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
rows="1"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="ant-mentions-suffix"
|
||||
>
|
||||
@@ -14903,7 +14895,7 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-filled css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-filled ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
aria-required="true"
|
||||
|
||||
@@ -665,7 +665,7 @@ exports[`renders components/input/demo/advance-count.tsx extend context correctl
|
||||
exports[`renders components/input/demo/align.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<textarea
|
||||
@@ -11791,7 +11791,9 @@ exports[`renders components/input/demo/show-count.tsx extend context correctly 1
|
||||
exports[`renders components/input/demo/show-count.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/input/demo/size.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-outlined css-var-test-id ant-input-css-var"
|
||||
>
|
||||
@@ -11824,9 +11826,7 @@ Array [
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>,
|
||||
<br />,
|
||||
<br />,
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-outlined css-var-test-id ant-input-css-var"
|
||||
>
|
||||
@@ -11859,9 +11859,7 @@ Array [
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>,
|
||||
<br />,
|
||||
<br />,
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-sm ant-input-outlined css-var-test-id ant-input-css-var"
|
||||
>
|
||||
@@ -11894,8 +11892,8 @@ Array [
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/input/demo/size.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
@@ -393,7 +393,7 @@ exports[`renders components/input/demo/advance-count.tsx correctly 1`] = `
|
||||
exports[`renders components/input/demo/align.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width:100px"
|
||||
>
|
||||
<textarea
|
||||
@@ -5104,7 +5104,9 @@ exports[`renders components/input/demo/show-count.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders components/input/demo/size.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-outlined css-var-test-id ant-input-css-var"
|
||||
>
|
||||
@@ -5137,9 +5139,7 @@ Array [
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>,
|
||||
<br />,
|
||||
<br />,
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-outlined css-var-test-id ant-input-css-var"
|
||||
>
|
||||
@@ -5172,9 +5172,7 @@ Array [
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>,
|
||||
<br />,
|
||||
<br />,
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-sm ant-input-outlined css-var-test-id ant-input-css-var"
|
||||
>
|
||||
@@ -5207,8 +5205,8 @@ Array [
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>,
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/input/demo/status.tsx correctly 1`] = `
|
||||
|
||||
@@ -1,17 +1,13 @@
|
||||
import React from 'react';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { Input } from 'antd';
|
||||
import { Flex, Input } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Flex vertical gap="middle">
|
||||
<Input size="large" placeholder="large size" prefix={<UserOutlined />} />
|
||||
<br />
|
||||
<br />
|
||||
<Input placeholder="default size" prefix={<UserOutlined />} />
|
||||
<br />
|
||||
<br />
|
||||
<Input size="small" placeholder="small size" prefix={<UserOutlined />} />
|
||||
</>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -57,7 +57,13 @@ export const genInputSmallStyle = (token: InputToken): CSSObject => ({
|
||||
borderRadius: token.borderRadiusSM,
|
||||
});
|
||||
|
||||
export const genBasicInputStyle = (token: InputToken): CSSObject => ({
|
||||
export const genBasicInputStyle = (
|
||||
token: InputToken,
|
||||
option: {
|
||||
largeStyle?: CSSObject;
|
||||
smallStyle?: CSSObject;
|
||||
} = {},
|
||||
): CSSObject => ({
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
@@ -73,9 +79,11 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
|
||||
// Size
|
||||
'&-lg': {
|
||||
...genInputLargeStyle(token),
|
||||
...option.largeStyle,
|
||||
},
|
||||
'&-sm': {
|
||||
...genInputSmallStyle(token),
|
||||
...option.smallStyle,
|
||||
},
|
||||
|
||||
// RTL
|
||||
|
||||
@@ -3,10 +3,7 @@
|
||||
exports[`renders components/mentions/demo/allowClear.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions"
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -14,7 +11,6 @@ Array [
|
||||
>
|
||||
hello world
|
||||
</textarea>
|
||||
</div>
|
||||
<span
|
||||
class="ant-mentions-suffix"
|
||||
>
|
||||
@@ -49,10 +45,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions"
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -60,7 +53,6 @@ Array [
|
||||
>
|
||||
hello world
|
||||
</textarea>
|
||||
</div>
|
||||
<span
|
||||
class="ant-mentions-suffix"
|
||||
>
|
||||
@@ -95,10 +87,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions"
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -106,7 +95,6 @@ Array [
|
||||
>
|
||||
hello world
|
||||
</textarea>
|
||||
</div>
|
||||
<span
|
||||
class="ant-mentions-suffix"
|
||||
>
|
||||
@@ -145,7 +133,7 @@ exports[`renders components/mentions/demo/allowClear.tsx extend context correctl
|
||||
|
||||
exports[`renders components/mentions/demo/async.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<textarea
|
||||
@@ -182,7 +170,7 @@ exports[`renders components/mentions/demo/autosize-textarea-debug.tsx extend con
|
||||
style="gap: 32px;"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -191,7 +179,7 @@ exports[`renders components/mentions/demo/autosize-textarea-debug.tsx extend con
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="resize: none;"
|
||||
>
|
||||
<textarea
|
||||
@@ -208,7 +196,7 @@ exports[`renders components/mentions/demo/autosize-textarea-debug.tsx extend con
|
||||
|
||||
exports[`renders components/mentions/demo/basic.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<textarea
|
||||
@@ -227,7 +215,7 @@ exports[`renders components/mentions/demo/component-token.tsx extend context cor
|
||||
style="padding-bottom: 0px; position: relative; min-width: 0;"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width: 100%; margin: 0px;"
|
||||
>
|
||||
<textarea
|
||||
@@ -274,7 +262,7 @@ exports[`renders components/mentions/demo/form.tsx extend context correctly 1`]
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -314,7 +302,7 @@ exports[`renders components/mentions/demo/form.tsx extend context correctly 1`]
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
aria-required="true"
|
||||
@@ -385,7 +373,7 @@ exports[`renders components/mentions/demo/form.tsx extend context correctly 2`]
|
||||
|
||||
exports[`renders components/mentions/demo/placement.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<textarea
|
||||
@@ -399,7 +387,7 @@ exports[`renders components/mentions/demo/placement.tsx extend context correctly
|
||||
|
||||
exports[`renders components/mentions/demo/prefix.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<textarea
|
||||
@@ -418,7 +406,7 @@ Array [
|
||||
style="margin-bottom: 10px;"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-disabled ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-disabled ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<textarea
|
||||
@@ -430,7 +418,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<textarea
|
||||
@@ -450,7 +438,7 @@ exports[`renders components/mentions/demo/render-panel.tsx extend context correc
|
||||
style="padding-bottom: 0px; position: relative; min-width: 0;"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width: 100%; margin: 0px;"
|
||||
>
|
||||
<textarea
|
||||
@@ -466,6 +454,42 @@ exports[`renders components/mentions/demo/render-panel.tsx extend context correc
|
||||
|
||||
exports[`renders components/mentions/demo/render-panel.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/mentions/demo/size.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-lg"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
placeholder="large size"
|
||||
rows="1"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
placeholder="default size"
|
||||
rows="1"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-sm"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
placeholder="small size"
|
||||
rows="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/mentions/demo/size.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/mentions/demo/status.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
|
||||
@@ -474,7 +498,7 @@ exports[`renders components/mentions/demo/status.tsx extend context correctly 1`
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions-status-error css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions-status-error ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -488,7 +512,7 @@ exports[`renders components/mentions/demo/status.tsx extend context correctly 1`
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions-status-warning css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions-status-warning ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -508,17 +532,17 @@ exports[`renders components/mentions/demo/style-class.tsx extend context correct
|
||||
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var acss-3jrxlv"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var acss-3jrxlv"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
placeholder="Object"
|
||||
rows="1"
|
||||
style="font-size: 14px;"
|
||||
rows="2"
|
||||
style="resize: vertical; font-size: 14px; font-weight: 200;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-filled css-var-test-id ant-mentions-css-var acss-3jrxlv"
|
||||
class="ant-mentions ant-mentions-filled ant-mentions css-var-test-id ant-mentions-css-var acss-3jrxlv"
|
||||
style="border: 1px solid rgb(114, 46, 209);"
|
||||
>
|
||||
<textarea
|
||||
@@ -538,7 +562,7 @@ exports[`renders components/mentions/demo/variant.tsx extend context correctly 1
|
||||
style="gap: 12px;"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -547,7 +571,7 @@ exports[`renders components/mentions/demo/variant.tsx extend context correctly 1
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-filled css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-filled ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -556,7 +580,7 @@ exports[`renders components/mentions/demo/variant.tsx extend context correctly 1
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-borderless css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-borderless ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -565,7 +589,7 @@ exports[`renders components/mentions/demo/variant.tsx extend context correctly 1
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-underlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-underlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
|
||||
@@ -3,10 +3,7 @@
|
||||
exports[`renders components/mentions/demo/allowClear.tsx correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions"
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -14,7 +11,6 @@ Array [
|
||||
>
|
||||
hello world
|
||||
</textarea>
|
||||
</div>
|
||||
<span
|
||||
class="ant-mentions-suffix"
|
||||
>
|
||||
@@ -49,10 +45,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions"
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -60,7 +53,6 @@ Array [
|
||||
>
|
||||
hello world
|
||||
</textarea>
|
||||
</div>
|
||||
<span
|
||||
class="ant-mentions-suffix"
|
||||
>
|
||||
@@ -95,10 +87,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions"
|
||||
class="ant-mentions-affix-wrapper ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-has-suffix"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -106,7 +95,6 @@ Array [
|
||||
>
|
||||
hello world
|
||||
</textarea>
|
||||
</div>
|
||||
<span
|
||||
class="ant-mentions-suffix"
|
||||
>
|
||||
@@ -143,7 +131,7 @@ Array [
|
||||
|
||||
exports[`renders components/mentions/demo/async.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width:100%"
|
||||
>
|
||||
<textarea
|
||||
@@ -155,7 +143,7 @@ exports[`renders components/mentions/demo/async.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/mentions/demo/autoSize.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width:100%"
|
||||
>
|
||||
<textarea
|
||||
@@ -171,7 +159,7 @@ exports[`renders components/mentions/demo/autosize-textarea-debug.tsx correctly
|
||||
style="gap:32px"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -180,7 +168,7 @@ exports[`renders components/mentions/demo/autosize-textarea-debug.tsx correctly
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="resize:none"
|
||||
>
|
||||
<textarea
|
||||
@@ -195,7 +183,7 @@ exports[`renders components/mentions/demo/autosize-textarea-debug.tsx correctly
|
||||
|
||||
exports[`renders components/mentions/demo/basic.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width:100%"
|
||||
>
|
||||
<textarea
|
||||
@@ -212,7 +200,7 @@ exports[`renders components/mentions/demo/component-token.tsx correctly 1`] = `
|
||||
style="padding-bottom:0;position:relative;min-width:0"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width:100%;margin:0"
|
||||
>
|
||||
<textarea
|
||||
@@ -256,7 +244,7 @@ exports[`renders components/mentions/demo/form.tsx correctly 1`] = `
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -296,7 +284,7 @@ exports[`renders components/mentions/demo/form.tsx correctly 1`] = `
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
aria-required="true"
|
||||
@@ -365,7 +353,7 @@ exports[`renders components/mentions/demo/form.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/mentions/demo/placement.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width:100%"
|
||||
>
|
||||
<textarea
|
||||
@@ -377,7 +365,7 @@ exports[`renders components/mentions/demo/placement.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/mentions/demo/prefix.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width:100%"
|
||||
>
|
||||
<textarea
|
||||
@@ -394,7 +382,7 @@ Array [
|
||||
style="margin-bottom:10px"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-disabled ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-disabled ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width:100%"
|
||||
>
|
||||
<textarea
|
||||
@@ -406,7 +394,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width:100%"
|
||||
>
|
||||
<textarea
|
||||
@@ -424,7 +412,7 @@ exports[`renders components/mentions/demo/render-panel.tsx correctly 1`] = `
|
||||
style="padding-bottom:0;position:relative;min-width:0"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
style="width:100%;margin:0"
|
||||
>
|
||||
<textarea
|
||||
@@ -437,6 +425,40 @@ exports[`renders components/mentions/demo/render-panel.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/mentions/demo/size.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-lg"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
placeholder="large size"
|
||||
rows="1"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
placeholder="default size"
|
||||
rows="1"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-sm"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
placeholder="small size"
|
||||
rows="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/mentions/demo/status.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
|
||||
@@ -445,7 +467,7 @@ exports[`renders components/mentions/demo/status.tsx correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions-status-error css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions-status-error ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -459,7 +481,7 @@ exports[`renders components/mentions/demo/status.tsx correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions-status-warning css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions-status-warning ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -477,17 +499,17 @@ exports[`renders components/mentions/demo/style-class.tsx correctly 1`] = `
|
||||
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var acss-3jrxlv"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var acss-3jrxlv"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
placeholder="Object"
|
||||
rows="1"
|
||||
style="font-size:14px"
|
||||
rows="2"
|
||||
style="resize:vertical;font-size:14px;font-weight:200"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-filled css-var-test-id ant-mentions-css-var acss-3jrxlv"
|
||||
class="ant-mentions ant-mentions-filled ant-mentions css-var-test-id ant-mentions-css-var acss-3jrxlv"
|
||||
style="border:1px solid #722ed1"
|
||||
>
|
||||
<textarea
|
||||
@@ -505,7 +527,7 @@ exports[`renders components/mentions/demo/variant.tsx correctly 1`] = `
|
||||
style="gap:12px"
|
||||
>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-outlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -514,7 +536,7 @@ exports[`renders components/mentions/demo/variant.tsx correctly 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-filled css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-filled ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -523,7 +545,7 @@ exports[`renders components/mentions/demo/variant.tsx correctly 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-borderless css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-borderless ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
@@ -532,7 +554,7 @@ exports[`renders components/mentions/demo/variant.tsx correctly 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mentions ant-mentions-underlined css-var-test-id ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-underlined ant-mentions css-var-test-id ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
exports[`Mentions rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<div
|
||||
class="ant-mentions ant-mentions-rtl ant-mentions-outlined css-var-root ant-mentions-css-var"
|
||||
class="ant-mentions ant-mentions-rtl ant-mentions-outlined ant-mentions css-var-root ant-mentions-css-var"
|
||||
>
|
||||
<textarea
|
||||
class="rc-textarea"
|
||||
|
||||
@@ -12,12 +12,14 @@ const locales = {
|
||||
root: '根元素，设置行内flex布局、相对定位、内边距和边框样式',
|
||||
textarea: '文本域元素，设置字体、行高、文本输入和背景样式',
|
||||
popup: '弹出框元素，设置绝对定位、层级、背景色、圆角、阴影和下拉选项样式',
|
||||
suffix: '后缀元素，包含后缀内容的布局和样式，如清除按钮等',
|
||||
},
|
||||
en: {
|
||||
root: 'Root element, set inline flex layout, relative positioning, padding and border styles',
|
||||
textarea: 'Textarea element, set font, line height, text input and background styles',
|
||||
popup:
|
||||
'Popup element, set absolute positioning, z-index, background color, border radius, shadow and dropdown options styles',
|
||||
suffix: 'Suffix element with layout and styling for suffix content like clear button, etc.',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -25,13 +27,14 @@ const Block: React.FC<MentionProps> = (props) => {
|
||||
const divRef = React.useRef<HTMLDivElement>(null);
|
||||
const memoizedValue = React.useMemo<UnstableContextProps>(() => ({ open: true }), []);
|
||||
return (
|
||||
<div ref={divRef} style={{ position: 'absolute', height: 170, overflow: 'hidden' }}>
|
||||
<div ref={divRef} style={{ position: 'absolute', height: 200, overflow: 'hidden' }}>
|
||||
<UnstableContext.Provider value={memoizedValue}>
|
||||
<Mentions
|
||||
{...props}
|
||||
placement="bottom"
|
||||
style={{ width: '100%' }}
|
||||
value="@"
|
||||
value="Hi, @"
|
||||
allowClear
|
||||
getPopupContainer={() => divRef.current!}
|
||||
styles={{
|
||||
popup: {
|
||||
@@ -70,6 +73,7 @@ const App: React.FC = () => {
|
||||
semantics={[
|
||||
{ name: 'root', desc: locale.root, version: '6.0.0' },
|
||||
{ name: 'textarea', desc: locale.textarea, version: '6.0.0' },
|
||||
{ name: 'suffix', desc: locale.suffix, version: '6.0.0' },
|
||||
{ name: 'popup', desc: locale.popup, version: '6.0.0' },
|
||||
]}
|
||||
>
|
||||
|
||||
7
components/mentions/demo/size.md
Normal file
7
components/mentions/demo/size.md
Normal file
@@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
通过 `size` 属性配置大小。
|
||||
|
||||
## en-US
|
||||
|
||||
Configure size via `size` property.
|
||||
12
components/mentions/demo/size.tsx
Normal file
12
components/mentions/demo/size.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import { Flex, Mentions } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Flex vertical gap="middle">
|
||||
<Mentions size="large" placeholder="large size" />
|
||||
<Mentions placeholder="default size" />
|
||||
<Mentions size="small" placeholder="small size" />
|
||||
</Flex>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@@ -1,7 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
通过 `classNames` 和 `styles` 传入对象/函数可以自定义 Mentions 的[语义化结构](#semantic-dom)样式。
|
||||
通过 `classNames` 和 `styles` 传入对象/函数可以自定义 Mentions 的[语义化结构](#semantic-dom)样式，例如设置文本框可缩放。
|
||||
|
||||
## en-US
|
||||
|
||||
You can customize the [semantic dom](#semantic-dom) style of Mentions by passing objects/functions through `classNames` and `styles`.
|
||||
You can customize the [semantic dom](#semantic-dom) style of Mentions by passing objects/functions through `classNames` and `styles`. For example, set the textarea to be resizable.
|
||||
|
||||
@@ -21,6 +21,8 @@ const options: MentionsProps['options'] = [
|
||||
const stylesObject: MentionsProps['styles'] = {
|
||||
textarea: {
|
||||
fontSize: 14,
|
||||
resize: 'vertical',
|
||||
fontWeight: 200,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -47,7 +49,7 @@ const App: React.FC = () => {
|
||||
|
||||
return (
|
||||
<Flex vertical gap="middle">
|
||||
<Mentions {...sharedProps} styles={stylesObject} placeholder="Object" />
|
||||
<Mentions {...sharedProps} styles={stylesObject} placeholder="Object" rows={2} />
|
||||
<Mentions {...sharedProps} styles={stylesFunction} variant="filled" placeholder="Function" />
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@@ -38,7 +38,8 @@ return (
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<code src="./demo/basic.tsx">Basic</code>
|
||||
<code src="./demo/variant.tsx" version="5.13.0">Variants</code>
|
||||
<code src="./demo/size.tsx" version="6.0.0">Size</code>
|
||||
<code src="./demo/variant.tsx">Variants</code>
|
||||
<code src="./demo/async.tsx">Asynchronous loading</code>
|
||||
<code src="./demo/form.tsx">With Form</code>
|
||||
<code src="./demo/prefix.tsx">Customize Trigger Token</code>
|
||||
|
||||
@@ -22,6 +22,8 @@ import { useComponentConfig } from '../config-provider/context';
|
||||
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
||||
import useSize from '../config-provider/hooks/useSize';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import { FormItemInputContext } from '../form/context';
|
||||
import useVariant from '../form/hooks/useVariants';
|
||||
import Spin from '../spin';
|
||||
@@ -43,7 +45,7 @@ export interface OptionProps {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
type SemanticName = 'root' | 'textarea' | 'popup';
|
||||
type SemanticName = 'root' | 'textarea' | 'popup' | 'suffix';
|
||||
|
||||
export type MentionsClassNamesType = SemanticClassNamesType<MentionProps, SemanticName>;
|
||||
export type MentionsStylesType = SemanticStylesType<MentionProps, SemanticName>;
|
||||
@@ -61,6 +63,7 @@ export interface MentionProps extends Omit<RcMentionsProps, 'suffix' | 'classNam
|
||||
variant?: Variant;
|
||||
classNames?: MentionsClassNamesType;
|
||||
styles?: MentionsStylesType;
|
||||
size?: SizeType;
|
||||
}
|
||||
|
||||
export interface MentionsProps extends MentionProps {}
|
||||
@@ -95,12 +98,16 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
|
||||
variant: customVariant,
|
||||
classNames,
|
||||
styles,
|
||||
size: customSize,
|
||||
...restProps
|
||||
} = props;
|
||||
const [focused, setFocused] = React.useState(false);
|
||||
const innerRef = React.useRef<MentionsRef>(null);
|
||||
const mergedRef = composeRef(ref, innerRef);
|
||||
|
||||
// ===================== Size =====================
|
||||
const mergedSize = useSize((ctx) => customSize ?? ctx);
|
||||
|
||||
// =================== Warning =====================
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = devUseWarning('Mentions');
|
||||
@@ -209,6 +216,10 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
|
||||
cssVarCls,
|
||||
rootCls,
|
||||
mergedClassNames.root,
|
||||
{
|
||||
[`${prefixCls}-sm`]: mergedSize === 'small',
|
||||
[`${prefixCls}-lg`]: mergedSize === 'large',
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -228,7 +239,11 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
|
||||
ref={mergedRef}
|
||||
options={mergedOptions}
|
||||
suffix={suffixNode}
|
||||
styles={{ textarea: mergedStyles.textarea, popup: mergedStyles.popup }}
|
||||
styles={{
|
||||
textarea: mergedStyles.textarea,
|
||||
popup: mergedStyles.popup,
|
||||
suffix: mergedStyles.suffix,
|
||||
}}
|
||||
classNames={{
|
||||
textarea: clsx(mergedClassNames.textarea),
|
||||
popup: clsx(
|
||||
@@ -239,6 +254,7 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
|
||||
cssVarCls,
|
||||
rootCls,
|
||||
),
|
||||
suffix: mergedClassNames.suffix,
|
||||
mentions: clsx(
|
||||
{
|
||||
[`${prefixCls}-disabled`]: mergedDisabled,
|
||||
|
||||
@@ -39,7 +39,8 @@ return (
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<code src="./demo/basic.tsx">基本使用</code>
|
||||
<code src="./demo/variant.tsx" version="5.13.0">形态变体</code>
|
||||
<code src="./demo/size.tsx" version="6.0.0">尺寸</code>
|
||||
<code src="./demo/variant.tsx">形态变体</code>
|
||||
<code src="./demo/async.tsx">异步加载</code>
|
||||
<code src="./demo/form.tsx">配合 Form 使用</code>
|
||||
<code src="./demo/prefix.tsx">自定义触发字符</code>
|
||||
|
||||
@@ -49,180 +49,26 @@ type MentionsToken = FullToken<'Mentions'> &
|
||||
itemPaddingVertical: string | number;
|
||||
};
|
||||
|
||||
const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
|
||||
// ============================= Mentions =============================
|
||||
const genDropdownStyle: GenerateStyle<MentionsToken> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
antCls,
|
||||
colorTextDisabled,
|
||||
controlItemBgHover,
|
||||
controlPaddingHorizontal,
|
||||
colorText,
|
||||
motionDurationSlow,
|
||||
lineHeight,
|
||||
controlHeight,
|
||||
paddingInline,
|
||||
paddingBlock,
|
||||
fontSize,
|
||||
fontSizeIcon,
|
||||
colorIcon,
|
||||
colorTextQuaternary,
|
||||
colorBgElevated,
|
||||
paddingXXS,
|
||||
borderRadius,
|
||||
colorBgElevated,
|
||||
borderRadiusLG,
|
||||
boxShadowSecondary,
|
||||
itemPaddingVertical,
|
||||
calc,
|
||||
controlPaddingHorizontal,
|
||||
colorText,
|
||||
borderRadius,
|
||||
lineHeight,
|
||||
colorTextDisabled,
|
||||
controlItemBgHover,
|
||||
motionDurationSlow,
|
||||
} = token;
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
...genBasicInputStyle(token),
|
||||
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
height: 'auto',
|
||||
padding: `0 ${unit(token.paddingInline)}`,
|
||||
overflow: 'hidden',
|
||||
lineHeight,
|
||||
whiteSpace: 'pre-wrap',
|
||||
verticalAlign: 'bottom',
|
||||
|
||||
// Variants
|
||||
...genOutlinedStyle(token),
|
||||
...genFilledStyle(token),
|
||||
...genBorderlessStyle(token),
|
||||
|
||||
'&-affix-wrapper': {
|
||||
...genBasicInputStyle(token),
|
||||
display: 'inline-flex',
|
||||
paddingBlock: 0,
|
||||
paddingInlineStart: 0,
|
||||
paddingInlineEnd: token.paddingInline,
|
||||
|
||||
'&::before': {
|
||||
display: 'inline-block',
|
||||
width: 0,
|
||||
visibility: 'hidden',
|
||||
content: '"\\a0"',
|
||||
},
|
||||
|
||||
[`${componentCls}-suffix`]: {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
|
||||
// 当页面中存在 feedback-icon 时，给 clear-icon 添加右边距
|
||||
[`&:has(${antCls}-form-item-feedback-icon) ${componentCls}-clear-icon`]: {
|
||||
marginInlineEnd: token.marginXS,
|
||||
},
|
||||
|
||||
[`${antCls}-form-item-feedback-icon`]: {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-clear-icon`]: {
|
||||
insetInlineEnd: 0,
|
||||
insetBlockStart: calc(fontSize).mul(lineHeight).mul(0.5).add(paddingBlock).equal(),
|
||||
padding: 0,
|
||||
lineHeight: 0,
|
||||
color: colorTextQuaternary,
|
||||
fontSize: fontSizeIcon,
|
||||
verticalAlign: -1,
|
||||
// https://github.com/ant-design/ant-design/pull/18151
|
||||
// https://codesandbox.io/s/wizardly-sun-u10br
|
||||
cursor: 'pointer',
|
||||
transition: `color ${motionDurationSlow}`,
|
||||
|
||||
border: 'none',
|
||||
outline: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
|
||||
'&:hover': {
|
||||
color: colorIcon,
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
color: colorText,
|
||||
},
|
||||
|
||||
'&-hidden': {
|
||||
visibility: 'hidden',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// 覆盖 affix-wrapper borderRadius！
|
||||
...genUnderlinedStyle(token),
|
||||
|
||||
'&-disabled': {
|
||||
'> textarea': {
|
||||
...genDisabledStyle(token),
|
||||
},
|
||||
},
|
||||
|
||||
// ================= Input Area =================
|
||||
[`&, &-affix-wrapper > ${componentCls}`]: {
|
||||
[`> textarea, ${componentCls}-measure`]: {
|
||||
color: colorText,
|
||||
boxSizing: 'border-box',
|
||||
minHeight: token.calc(controlHeight).sub(2).equal(),
|
||||
margin: 0,
|
||||
padding: `${unit(paddingBlock)} ${unit(paddingInline)}`,
|
||||
overflow: 'inherit',
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto',
|
||||
fontWeight: 'inherit',
|
||||
fontSize: 'inherit',
|
||||
fontFamily: 'inherit',
|
||||
fontStyle: 'inherit',
|
||||
fontVariant: 'inherit',
|
||||
fontSizeAdjust: 'inherit',
|
||||
fontStretch: 'inherit',
|
||||
lineHeight: 'inherit',
|
||||
direction: 'inherit',
|
||||
letterSpacing: 'inherit',
|
||||
whiteSpace: 'inherit',
|
||||
textAlign: 'inherit',
|
||||
verticalAlign: 'top',
|
||||
wordWrap: 'break-word',
|
||||
wordBreak: 'inherit',
|
||||
tabSize: 'inherit',
|
||||
},
|
||||
|
||||
'> textarea:disabled': {
|
||||
color: colorTextDisabled,
|
||||
},
|
||||
|
||||
'> textarea': {
|
||||
width: '100%',
|
||||
border: 'none',
|
||||
outline: 'none',
|
||||
resize: 'vertical',
|
||||
backgroundColor: 'transparent',
|
||||
...genPlaceholderStyle(token.colorTextPlaceholder),
|
||||
padding: `${unit(token.paddingBlock)} 0`,
|
||||
},
|
||||
|
||||
[`${componentCls}-measure`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineEnd: 0,
|
||||
bottom: 0,
|
||||
insetInlineStart: 0,
|
||||
zIndex: -1,
|
||||
color: 'transparent',
|
||||
pointerEvents: 'none',
|
||||
|
||||
'> span': {
|
||||
display: 'inline-block',
|
||||
minHeight: '1em',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ================== Dropdown ==================
|
||||
'&-dropdown': {
|
||||
// Ref select dropdown style
|
||||
@@ -297,6 +143,183 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
|
||||
};
|
||||
};
|
||||
|
||||
const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
|
||||
const { componentCls, calc, colorText, antCls, colorTextDisabled } = token;
|
||||
|
||||
return {
|
||||
[componentCls]: [
|
||||
// =========================== Common ===========================
|
||||
resetComponent(token),
|
||||
genBasicInputStyle(token, {
|
||||
largeStyle: {
|
||||
padding: undefined,
|
||||
},
|
||||
smallStyle: {
|
||||
padding: undefined,
|
||||
},
|
||||
}),
|
||||
|
||||
// ========================== Variants ==========================
|
||||
genOutlinedStyle(token),
|
||||
genFilledStyle(token),
|
||||
genBorderlessStyle(token),
|
||||
genUnderlinedStyle(token),
|
||||
|
||||
// ========================== Mentions ==========================
|
||||
{
|
||||
'--mentions-padding-inline': token.paddingInline,
|
||||
'--mentions-padding-block': token.paddingBlock,
|
||||
'--mentions-control-height': token.controlHeight,
|
||||
|
||||
display: 'flex',
|
||||
padding: 0,
|
||||
whiteSpace: 'pre-wrap',
|
||||
|
||||
// ========================= Textarea =========================
|
||||
'> textarea': [
|
||||
resetComponent(token),
|
||||
genPlaceholderStyle(token.colorTextPlaceholder),
|
||||
|
||||
{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
borderRadius: 'inherit',
|
||||
outline: 'none',
|
||||
flex: 'auto',
|
||||
minWidth: 0,
|
||||
resize: 'none',
|
||||
|
||||
'&:disabled': {
|
||||
color: colorTextDisabled,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
[`> textarea, ${componentCls}-measure`]: {
|
||||
color: colorText,
|
||||
boxSizing: 'border-box',
|
||||
margin: 0,
|
||||
minHeight: calc('var(--mentions-control-height)')
|
||||
.sub(calc(token.lineWidth).mul(2).equal())
|
||||
.equal(),
|
||||
paddingInline: 'var(--mentions-padding-inline)',
|
||||
paddingBlock: 'var(--mentions-padding-block)',
|
||||
overflow: 'inherit',
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto',
|
||||
fontWeight: 'inherit',
|
||||
fontSize: 'inherit',
|
||||
fontFamily: 'inherit',
|
||||
fontStyle: 'inherit',
|
||||
fontVariant: 'inherit',
|
||||
fontSizeAdjust: 'inherit',
|
||||
fontStretch: 'inherit',
|
||||
lineHeight: 'inherit',
|
||||
direction: 'inherit',
|
||||
letterSpacing: 'inherit',
|
||||
whiteSpace: 'inherit',
|
||||
textAlign: 'inherit',
|
||||
verticalAlign: 'top',
|
||||
wordWrap: 'break-word',
|
||||
wordBreak: 'inherit',
|
||||
tabSize: 'inherit',
|
||||
},
|
||||
|
||||
// ========================= Measure ==========================
|
||||
[`${componentCls}-measure`]: {
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
zIndex: -1,
|
||||
color: 'transparent',
|
||||
pointerEvents: 'none',
|
||||
|
||||
'> span': {
|
||||
display: 'inline-block',
|
||||
minHeight: '1em',
|
||||
},
|
||||
},
|
||||
|
||||
// ========================== Suffix ==========================
|
||||
'&-suffix': {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
flex: 'none',
|
||||
color: token.colorTextQuaternary,
|
||||
fontSize: token.fontSizeIcon,
|
||||
lineHeight: 1,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
insetInlineEnd: 'var(--mentions-padding-inline)',
|
||||
columnGap: token.marginXS,
|
||||
|
||||
[`${componentCls}-clear-icon`]: {
|
||||
// https://github.com/ant-design/ant-design/pull/18151
|
||||
// https://codesandbox.io/s/wizardly-sun-u10br
|
||||
cursor: 'pointer',
|
||||
border: 0,
|
||||
background: 'transparent',
|
||||
|
||||
'&:hover': {
|
||||
color: token.colorIcon,
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
color: token.colorText,
|
||||
},
|
||||
|
||||
'&-hidden': {
|
||||
visibility: 'hidden',
|
||||
},
|
||||
},
|
||||
|
||||
[`${antCls}-form-item-feedback-icon`]: {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ========================= AllowClear =========================
|
||||
{
|
||||
[`&-has-suffix`]: {
|
||||
'> textarea': {
|
||||
paddingInlineEnd: calc(token.paddingXXS)
|
||||
.mul(1.5)
|
||||
.add(token.fontSizeIcon)
|
||||
.add('var(--mentions-padding-inline)')
|
||||
.equal(),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ========================== Disabled ==========================
|
||||
{
|
||||
'&-disabled': {
|
||||
'> textarea': {
|
||||
...genDisabledStyle(token),
|
||||
},
|
||||
},
|
||||
},
|
||||
// ============================ Size ============================
|
||||
{
|
||||
[`&-lg`]: {
|
||||
'--mentions-padding-inline': token.paddingInlineLG,
|
||||
'--mentions-padding-block': token.paddingBlockLG,
|
||||
'--mentions-control-height': token.controlHeightLG,
|
||||
},
|
||||
[`&-sm`]: {
|
||||
'--mentions-padding-inline': token.paddingInlineSM,
|
||||
'--mentions-padding-block': token.paddingBlockSM,
|
||||
'--mentions-control-height': token.controlHeightSM,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Tokens ==============================
|
||||
export const prepareComponentToken: GetDefaultToken<'Mentions'> = (token) => ({
|
||||
...initComponentToken(token),
|
||||
dropdownHeight: 250,
|
||||
@@ -310,7 +333,7 @@ export default genStyleHooks(
|
||||
'Mentions',
|
||||
(token) => {
|
||||
const mentionsToken = mergeToken<MentionsToken>(token, initInputToken(token));
|
||||
return genMentionsStyle(mentionsToken);
|
||||
return [genMentionsStyle(mentionsToken), genDropdownStyle(mentionsToken)];
|
||||
},
|
||||
prepareComponentToken,
|
||||
);
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
"strategy": "auto"
|
||||
},
|
||||
"watch": {
|
||||
"_nodeModulesRegexes": ["rc-.*", ".*cssinjs.*"]
|
||||
"_nodeModulesRegexes": ["rc-.*", ".*cssinjs.*", "@rc-component/.*"]
|
||||
},
|
||||
"devtool": false,
|
||||
"experimental": {
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
"@rc-component/image": "~1.5.1",
|
||||
"@rc-component/input": "~1.1.0",
|
||||
"@rc-component/input-number": "~1.5.0",
|
||||
"@rc-component/mentions": "~1.4.0",
|
||||
"@rc-component/mentions": "~1.5.5",
|
||||
"@rc-component/menu": "~1.1.4",
|
||||
"@rc-component/motion": "~1.1.4",
|
||||
"@rc-component/mutate-observer": "^2.0.0",
|
||||
|
||||
Reference in New Issue
Block a user