mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-08 18:39:20 +08:00
b9f1d1239c
* 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>
604 lines
17 KiB
Plaintext
604 lines
17 KiB
Plaintext
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
|
|
|
exports[`renders components/mentions/demo/allowClear.tsx extend context correctly 1`] = `
|
|
Array [
|
|
<span
|
|
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"
|
|
rows="1"
|
|
>
|
|
hello world
|
|
</textarea>
|
|
<span
|
|
class="ant-mentions-suffix"
|
|
>
|
|
<button
|
|
class="ant-mentions-clear-icon"
|
|
tabindex="-1"
|
|
type="button"
|
|
>
|
|
<span
|
|
aria-label="close-circle"
|
|
class="anticon anticon-close-circle"
|
|
role="img"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
data-icon="close-circle"
|
|
fill="currentColor"
|
|
fill-rule="evenodd"
|
|
focusable="false"
|
|
height="1em"
|
|
viewBox="64 64 896 896"
|
|
width="1em"
|
|
>
|
|
<path
|
|
d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</span>
|
|
</span>,
|
|
<br />,
|
|
<br />,
|
|
<span
|
|
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"
|
|
rows="1"
|
|
>
|
|
hello world
|
|
</textarea>
|
|
<span
|
|
class="ant-mentions-suffix"
|
|
>
|
|
<button
|
|
class="ant-mentions-clear-icon"
|
|
tabindex="-1"
|
|
type="button"
|
|
>
|
|
<span
|
|
aria-label="close-square"
|
|
class="anticon anticon-close-square"
|
|
role="img"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
data-icon="close-square"
|
|
fill="currentColor"
|
|
fill-rule="evenodd"
|
|
focusable="false"
|
|
height="1em"
|
|
viewBox="64 64 896 896"
|
|
width="1em"
|
|
>
|
|
<path
|
|
d="M880 112c17.7 0 32 14.3 32 32v736c0 17.7-14.3 32-32 32H144c-17.7 0-32-14.3-32-32V144c0-17.7 14.3-32 32-32zM639.98 338.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</span>
|
|
</span>,
|
|
<br />,
|
|
<br />,
|
|
<span
|
|
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"
|
|
rows="3"
|
|
>
|
|
hello world
|
|
</textarea>
|
|
<span
|
|
class="ant-mentions-suffix"
|
|
>
|
|
<button
|
|
class="ant-mentions-clear-icon"
|
|
tabindex="-1"
|
|
type="button"
|
|
>
|
|
<span
|
|
aria-label="close-circle"
|
|
class="anticon anticon-close-circle"
|
|
role="img"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
data-icon="close-circle"
|
|
fill="currentColor"
|
|
fill-rule="evenodd"
|
|
focusable="false"
|
|
height="1em"
|
|
viewBox="64 64 896 896"
|
|
width="1em"
|
|
>
|
|
<path
|
|
d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</span>
|
|
</span>,
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/mentions/demo/allowClear.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/mentions/demo/async.tsx extend context correctly 1`] = `
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
|
style="width: 100%;"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
rows="1"
|
|
/>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders components/mentions/demo/async.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/mentions/demo/autoSize.tsx extend context correctly 1`] = `
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined"
|
|
style="width: 100%;"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
rows="1"
|
|
style="resize: none;"
|
|
/>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders components/mentions/demo/autoSize.tsx extend context correctly 2`] = `
|
|
[
|
|
"Warning: \`NaN\` is an invalid value for the \`%s\` css style property.%s",
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/mentions/demo/autosize-textarea-debug.tsx extend context correctly 1`] = `
|
|
<div
|
|
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-vertical"
|
|
style="gap: 32px;"
|
|
>
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
placeholder="can resize"
|
|
rows="1"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
|
style="resize: none;"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
placeholder="disable resize"
|
|
rows="1"
|
|
style="resize: none;"
|
|
/>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders components/mentions/demo/autosize-textarea-debug.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/mentions/demo/basic.tsx extend context correctly 1`] = `
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
|
style="width: 100%;"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
rows="1"
|
|
>
|
|
@afc163
|
|
</textarea>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders components/mentions/demo/basic.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/mentions/demo/component-token.tsx extend context correctly 1`] = `
|
|
<div
|
|
style="padding-bottom: 0px; position: relative; min-width: 0;"
|
|
>
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
|
style="width: 100%; margin: 0px;"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
open=""
|
|
rows="1"
|
|
>
|
|
@
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders components/mentions/demo/component-token.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/mentions/demo/form.tsx extend context correctly 1`] = `
|
|
<form
|
|
class="ant-form ant-form-horizontal css-var-test-id ant-form-css-var"
|
|
>
|
|
<div
|
|
class="ant-form-item css-var-test-id ant-form-css-var ant-form-item-horizontal"
|
|
>
|
|
<div
|
|
class="ant-row ant-form-item-row css-var-test-id"
|
|
>
|
|
<div
|
|
class="ant-col ant-col-6 ant-form-item-label css-var-test-id"
|
|
>
|
|
<label
|
|
class=""
|
|
for="coders"
|
|
title="Top coders"
|
|
>
|
|
Top coders
|
|
</label>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-16 ant-form-item-control css-var-test-id"
|
|
>
|
|
<div
|
|
class="ant-form-item-control-input"
|
|
>
|
|
<div
|
|
class="ant-form-item-control-input-content"
|
|
>
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
id="coders"
|
|
rows="1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-form-item css-var-test-id ant-form-css-var ant-form-item-horizontal"
|
|
>
|
|
<div
|
|
class="ant-row ant-form-item-row css-var-test-id"
|
|
>
|
|
<div
|
|
class="ant-col ant-col-6 ant-form-item-label css-var-test-id"
|
|
>
|
|
<label
|
|
class="ant-form-item-required"
|
|
for="bio"
|
|
title="Bio"
|
|
>
|
|
Bio
|
|
</label>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-16 ant-form-item-control css-var-test-id"
|
|
>
|
|
<div
|
|
class="ant-form-item-control-input"
|
|
>
|
|
<div
|
|
class="ant-form-item-control-input-content"
|
|
>
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
|
>
|
|
<textarea
|
|
aria-required="true"
|
|
class="rc-textarea"
|
|
id="bio"
|
|
placeholder="You can use @ to ref user here"
|
|
rows="3"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-form-item css-var-test-id ant-form-css-var ant-form-item-horizontal"
|
|
>
|
|
<div
|
|
class="ant-row ant-form-item-row css-var-test-id"
|
|
>
|
|
<div
|
|
class="ant-col ant-col-16 ant-col-offset-6 ant-form-item-control css-var-test-id"
|
|
>
|
|
<div
|
|
class="ant-form-item-control-input"
|
|
>
|
|
<div
|
|
class="ant-form-item-control-input-content"
|
|
>
|
|
<div
|
|
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
|
|
style="flex-wrap: wrap;"
|
|
>
|
|
<div
|
|
class="ant-space-item"
|
|
>
|
|
<button
|
|
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
|
|
type="submit"
|
|
>
|
|
<span>
|
|
Submit
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="ant-space-item"
|
|
>
|
|
<button
|
|
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Reset
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
`;
|
|
|
|
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 ant-mentions css-var-test-id ant-mentions-css-var"
|
|
style="width: 100%;"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
rows="1"
|
|
/>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders components/mentions/demo/placement.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/mentions/demo/prefix.tsx extend context correctly 1`] = `
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
|
style="width: 100%;"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
placeholder="input @ to mention people, # to mention tag"
|
|
rows="1"
|
|
/>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders components/mentions/demo/prefix.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/mentions/demo/readonly.tsx extend context correctly 1`] = `
|
|
Array [
|
|
<div
|
|
style="margin-bottom: 10px;"
|
|
>
|
|
<div
|
|
class="ant-mentions ant-mentions-disabled ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
|
style="width: 100%;"
|
|
>
|
|
<textarea
|
|
class="rc-textarea rc-textarea-disabled"
|
|
disabled=""
|
|
placeholder="this is disabled Mentions"
|
|
rows="1"
|
|
/>
|
|
</div>
|
|
</div>,
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
|
style="width: 100%;"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
placeholder="this is readOnly Mentions"
|
|
readonly=""
|
|
rows="1"
|
|
/>
|
|
</div>,
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/mentions/demo/readonly.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/mentions/demo/render-panel.tsx extend context correctly 1`] = `
|
|
<div
|
|
style="padding-bottom: 0px; position: relative; min-width: 0;"
|
|
>
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
|
style="width: 100%; margin: 0px;"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
open=""
|
|
rows="1"
|
|
>
|
|
@
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
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"
|
|
>
|
|
<div
|
|
class="ant-space-item"
|
|
>
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined ant-mentions-status-error ant-mentions css-var-test-id ant-mentions-css-var"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
rows="1"
|
|
>
|
|
@afc163
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-space-item"
|
|
>
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined ant-mentions-status-warning ant-mentions css-var-test-id ant-mentions-css-var"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
rows="1"
|
|
>
|
|
@afc163
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders components/mentions/demo/status.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/mentions/demo/style-class.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 acss-3jrxlv"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
placeholder="Object"
|
|
rows="2"
|
|
style="resize: vertical; font-size: 14px; font-weight: 200;"
|
|
/>
|
|
</div>
|
|
<div
|
|
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
|
|
class="rc-textarea"
|
|
placeholder="Function"
|
|
rows="1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders components/mentions/demo/style-class.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/mentions/demo/variant.tsx extend context correctly 1`] = `
|
|
<div
|
|
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-vertical"
|
|
style="gap: 12px;"
|
|
>
|
|
<div
|
|
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
placeholder="Outlined"
|
|
rows="1"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="ant-mentions ant-mentions-filled ant-mentions css-var-test-id ant-mentions-css-var"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
placeholder="Filled"
|
|
rows="1"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="ant-mentions ant-mentions-borderless ant-mentions css-var-test-id ant-mentions-css-var"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
placeholder="Borderless"
|
|
rows="1"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="ant-mentions ant-mentions-underlined ant-mentions css-var-test-id ant-mentions-css-var"
|
|
>
|
|
<textarea
|
|
class="rc-textarea"
|
|
placeholder="Underlined"
|
|
rows="1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders components/mentions/demo/variant.tsx extend context correctly 2`] = `[]`;
|