mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
Merge branch 'feature' into merge
This commit is contained in:
Tom Xu
commit
0676f07266
3
components/calendar/locale/kk_KZ.tsx
Normal file
3
components/calendar/locale/kk_KZ.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
import kkKZ from '../../date-picker/locale/kk_KZ';
|
||||
|
||||
export default kkKZ;
|
||||
27
components/date-picker/locale/kk_KZ.tsx
Normal file
27
components/date-picker/locale/kk_KZ.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import CalendarLocale from 'rc-picker/lib/locale/kk_KZ';
|
||||
import TimePickerLocale from '../../time-picker/locale/kk_KZ';
|
||||
import { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Күнді таңдаңыз',
|
||||
yearPlaceholder: 'Жылды таңдаңыз',
|
||||
quarterPlaceholder: 'Тоқсанды таңдаңыз',
|
||||
monthPlaceholder: 'Айды таңдаңыз',
|
||||
weekPlaceholder: 'Аптаны таңдаңыз',
|
||||
rangePlaceholder: ['Бастау күні', 'Аяқталу күні'],
|
||||
rangeYearPlaceholder: ['Бастау жылы', 'Аяқталу жылы'],
|
||||
rangeMonthPlaceholder: ['Бастау айы', 'Аяқталу айы'],
|
||||
rangeWeekPlaceholder: ['Бастау апта', 'Аяқталу апта'],
|
||||
...CalendarLocale,
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale,
|
||||
},
|
||||
};
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale;
|
||||
@ -11,6 +11,8 @@ export interface CellProps {
|
||||
className?: string;
|
||||
component: string;
|
||||
style?: React.CSSProperties;
|
||||
labelStyle?: React.CSSProperties;
|
||||
contentStyle?: React.CSSProperties;
|
||||
bordered?: boolean;
|
||||
label?: React.ReactNode;
|
||||
content?: React.ReactNode;
|
||||
@ -23,6 +25,8 @@ const Cell: React.FC<CellProps> = ({
|
||||
span,
|
||||
className,
|
||||
style,
|
||||
labelStyle,
|
||||
contentStyle,
|
||||
bordered,
|
||||
label,
|
||||
content,
|
||||
@ -60,11 +64,16 @@ const Cell: React.FC<CellProps> = ({
|
||||
className={classNames(`${itemPrefixCls}-item-label`, {
|
||||
[`${itemPrefixCls}-item-no-colon`]: !colon,
|
||||
})}
|
||||
style={labelStyle}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
{content && <span className={classNames(`${itemPrefixCls}-item-content`)}>{content}</span>}
|
||||
{content && (
|
||||
<span className={classNames(`${itemPrefixCls}-item-content`)} style={contentStyle}>
|
||||
{content}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Component>
|
||||
);
|
||||
|
||||
@ -5,6 +5,8 @@ export interface DescriptionsItemProps {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
label?: React.ReactNode;
|
||||
labelStyle?: React.CSSProperties;
|
||||
contentStyle?: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
span?: number;
|
||||
}
|
||||
|
||||
@ -23,6 +23,8 @@ function renderCells(
|
||||
prefixCls: itemPrefixCls = prefixCls,
|
||||
className,
|
||||
style,
|
||||
labelStyle,
|
||||
contentStyle,
|
||||
span = 1,
|
||||
},
|
||||
key,
|
||||
@ -35,6 +37,8 @@ function renderCells(
|
||||
key={`${type}-${key || index}`}
|
||||
className={className}
|
||||
style={style}
|
||||
labelStyle={labelStyle}
|
||||
contentStyle={contentStyle}
|
||||
span={span}
|
||||
colon={colon}
|
||||
component={component}
|
||||
@ -50,7 +54,7 @@ function renderCells(
|
||||
<Cell
|
||||
key={`label-${key || index}`}
|
||||
className={className}
|
||||
style={style}
|
||||
style={{ ...style, ...labelStyle }}
|
||||
span={1}
|
||||
colon={colon}
|
||||
component={component[0]}
|
||||
@ -61,7 +65,7 @@ function renderCells(
|
||||
<Cell
|
||||
key={`content-${key || index}`}
|
||||
className={className}
|
||||
style={style}
|
||||
style={{ ...style, ...contentStyle }}
|
||||
span={span * 2 - 1}
|
||||
component={component[1]}
|
||||
itemPrefixCls={itemPrefixCls}
|
||||
|
||||
@ -811,6 +811,158 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/descriptions/demo/style.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-descriptions"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-header"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-title"
|
||||
>
|
||||
User Info
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-descriptions-view"
|
||||
>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<td
|
||||
class="ant-descriptions-item"
|
||||
colspan="1"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-item-container"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
style="background:red"
|
||||
>
|
||||
Product
|
||||
</span>
|
||||
<span
|
||||
class="ant-descriptions-item-content"
|
||||
style="background:green"
|
||||
>
|
||||
Cloud Database
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-descriptions-item"
|
||||
colspan="1"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-item-container"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
>
|
||||
Billing Mode
|
||||
</span>
|
||||
<span
|
||||
class="ant-descriptions-item-content"
|
||||
>
|
||||
Prepaid
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-descriptions-item"
|
||||
colspan="1"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-item-container"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
>
|
||||
Automatic Renewal
|
||||
</span>
|
||||
<span
|
||||
class="ant-descriptions-item-content"
|
||||
>
|
||||
YES
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-descriptions ant-descriptions-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-header"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-title"
|
||||
>
|
||||
User Info
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-descriptions-view"
|
||||
>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
colspan="1"
|
||||
style="background:red"
|
||||
>
|
||||
Product
|
||||
</th>
|
||||
<td
|
||||
class="ant-descriptions-item-content"
|
||||
colspan="1"
|
||||
style="background:green"
|
||||
>
|
||||
Cloud Database
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
colspan="1"
|
||||
>
|
||||
Billing Mode
|
||||
</th>
|
||||
<td
|
||||
class="ant-descriptions-item-content"
|
||||
colspan="1"
|
||||
>
|
||||
Prepaid
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
colspan="1"
|
||||
>
|
||||
Automatic Renewal
|
||||
</th>
|
||||
<td
|
||||
class="ant-descriptions-item-content"
|
||||
colspan="1"
|
||||
>
|
||||
YES
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/descriptions/demo/text.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-descriptions"
|
||||
|
||||
43
components/descriptions/demo/style.md
Normal file
43
components/descriptions/demo/style.md
Normal file
@ -0,0 +1,43 @@
|
||||
---
|
||||
order: 999
|
||||
title:
|
||||
zh-CN: 自定义 label & wrapper 样式
|
||||
en-US: Customize label & wrapper style
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
自定义 label & wrapper 样式
|
||||
|
||||
## en-US
|
||||
|
||||
Customize label & wrapper style
|
||||
|
||||
```tsx
|
||||
import { Descriptions } from 'antd';
|
||||
|
||||
const labelStyle: React.CSSProperties = { background: 'red' };
|
||||
const contentStyle: React.CSSProperties = { background: 'green' };
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Descriptions title="User Info">
|
||||
<Descriptions.Item label="Product" labelStyle={labelStyle} contentStyle={contentStyle}>
|
||||
Cloud Database
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
|
||||
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
|
||||
</Descriptions>
|
||||
|
||||
<Descriptions title="User Info" bordered>
|
||||
<Descriptions.Item label="Product" labelStyle={labelStyle} contentStyle={contentStyle}>
|
||||
Cloud Database
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
|
||||
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -30,7 +30,10 @@ Commonly displayed on the details page.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| contentStyle | Customize label style | CSSProperties | - | 4.9.0 |
|
||||
| label | The description of the content | ReactNode | - | |
|
||||
| labelStyle | Customize label style | CSSProperties | - | 4.9.0 |
|
||||
| span | The number of columns included | number | 1 | |
|
||||
|
||||
> The number of span Description.Item. Span={2} takes up the width of two DescriptionItems.
|
||||
> When both `style` and `labelStyle`(or `contentStyle`) configured, both of them will work. And next one will overwrite first when conflict.
|
||||
|
||||
@ -31,7 +31,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| contentStyle | 自定义内容样式 | CSSProperties | - | 4.9.0 |
|
||||
| label | 内容的描述 | ReactNode | - | |
|
||||
| labelStyle | 自定义标签样式 | CSSProperties | - | 4.9.0 |
|
||||
| span | 包含列的数量 | number | 1 | |
|
||||
|
||||
> span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。
|
||||
> 当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
||||
|
||||
@ -169,6 +169,7 @@ Provides array management for fields.
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| children | Render function | (fields: Field\[], operation: { add, remove, move }) => React.ReactNode | - | |
|
||||
| initialValue | Config sub default value. Form `initialValues` get higher priority when conflict | string | - | 4.9.0 |
|
||||
| name | Field name, support array | [NamePath](#NamePath) | - | |
|
||||
| rules | Validate rules, only support customize validator. Should work with [ErrorList](#Form.ErrorList) | { validator, message }\[] | - | 4.7.0 |
|
||||
|
||||
@ -186,6 +187,8 @@ Provides array management for fields.
|
||||
</Form.List>
|
||||
```
|
||||
|
||||
Note: You should not config Form.Item `initialValue` under Form.List. It always should be configured by Form.List `initialValue` or Form `initialValues`.
|
||||
|
||||
## operation
|
||||
|
||||
Some operator functions in render form of Form.List.
|
||||
|
||||
@ -170,6 +170,7 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| children | 渲染函数 | (fields: Field\[], operation: { add, remove, move }) => React.ReactNode | - | |
|
||||
| initialValue | 设置子元素默认值，如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.9.0 |
|
||||
| name | 字段名，支持数组 | [NamePath](#NamePath) | - | |
|
||||
| rules | 校验规则，仅支持自定义规则。需要配合 [ErrorList](#Form.ErrorList) 一同使用。 | { validator, message }\[] | - | 4.7.0 |
|
||||
|
||||
@ -188,6 +189,8 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
|
||||
</Form.List>
|
||||
```
|
||||
|
||||
注意：Form.List 下的字段不应该配置 `initialValue`，你始终应该通过 Form.List 的 `initialValue` 或者 Form 的 `initialValues` 来配置。
|
||||
|
||||
## operation
|
||||
|
||||
Form.List 渲染表单相关操作函数。
|
||||
|
||||
@ -179,6 +179,10 @@ class Input extends React.Component<InputProps, InputState> {
|
||||
this.input.blur();
|
||||
}
|
||||
|
||||
setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none') {
|
||||
this.input.setSelectionRange(start, end, direction);
|
||||
}
|
||||
|
||||
select() {
|
||||
this.input.select();
|
||||
}
|
||||
|
||||
@ -74,6 +74,15 @@ describe('Input', () => {
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it('set mouse cursor position', () => {
|
||||
const defaultValue = '11111';
|
||||
const valLength = defaultValue.length;
|
||||
const wrapper = mount(<Input autoFocus defaultValue={defaultValue} />);
|
||||
wrapper.instance().setSelectionRange(valLength, valLength);
|
||||
expect(wrapper.instance().input.selectionStart).toEqual(5);
|
||||
expect(wrapper.instance().input.selectionEnd).toEqual(5);
|
||||
});
|
||||
});
|
||||
|
||||
describe('prefix and suffix', () => {
|
||||
|
||||
@ -172,6 +172,16 @@ describe('TextArea', () => {
|
||||
expect(wrapper.find('textarea').hasClass('ant-input-lg')).toBe(true);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('set mouse cursor position', () => {
|
||||
const defaultValue = '11111';
|
||||
const valLength = defaultValue.length;
|
||||
const ref = React.createRef();
|
||||
mount(<TextArea autoFocus ref={ref} defaultValue={defaultValue} />);
|
||||
ref.current.resizableTextArea.textArea.setSelectionRange(valLength, valLength);
|
||||
expect(ref.current.resizableTextArea.textArea.selectionStart).toEqual(5);
|
||||
expect(ref.current.resizableTextArea.textArea.selectionEnd).toEqual(5);
|
||||
});
|
||||
});
|
||||
|
||||
describe('TextArea allowClear', () => {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -44,6 +44,7 @@ import idID from '../id_ID';
|
||||
import isIS from '../is_IS';
|
||||
import itIT from '../it_IT';
|
||||
import jaJP from '../ja_JP';
|
||||
import kkKZ from '../kk_KZ';
|
||||
import knIN from '../kn_IN';
|
||||
import koKR from '../ko_KR';
|
||||
import kmrIQ from '../kmr_IQ';
|
||||
@ -103,6 +104,7 @@ const locales = [
|
||||
isIS,
|
||||
itIT,
|
||||
jaJP,
|
||||
kkKZ,
|
||||
knIN,
|
||||
koKR,
|
||||
kmrIQ,
|
||||
|
||||
3
components/locale-provider/kk_KZ.tsx
Normal file
3
components/locale-provider/kk_KZ.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
import locale from '../locale/kk_KZ';
|
||||
|
||||
export default locale;
|
||||
129
components/locale/kk_KZ.tsx
Normal file
129
components/locale/kk_KZ.tsx
Normal file
@ -0,0 +1,129 @@
|
||||
/* eslint-disable no-template-curly-in-string */
|
||||
|
||||
import Pagination from 'rc-pagination/lib/locale/kk_KZ';
|
||||
import DatePicker from '../date-picker/locale/kk_KZ';
|
||||
import TimePicker from '../time-picker/locale/kk_KZ';
|
||||
import Calendar from '../calendar/locale/kk_KZ';
|
||||
import { Locale } from '../locale-provider';
|
||||
|
||||
const typeTemplate: string = '${label} ${type} типі емес';
|
||||
|
||||
const localeValues: Locale = {
|
||||
locale: 'kk',
|
||||
Pagination,
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
global: {
|
||||
placeholder: 'Таңдаңыз',
|
||||
},
|
||||
Table: {
|
||||
filterTitle: 'Фильтр',
|
||||
filterConfirm: 'Ok',
|
||||
filterReset: 'Тазарту',
|
||||
filterEmptyText: 'Фильтр жоқ',
|
||||
emptyText: 'Деректер жоқ',
|
||||
selectAll: 'Барлығын таңдау',
|
||||
selectInvert: 'Таңдауды төңкеру',
|
||||
selectionAll: 'Барлық деректерді таңдаңыз',
|
||||
sortTitle: 'Сұрыптау',
|
||||
expand: 'Жолды жазу',
|
||||
collapse: 'Жолды бүктеу',
|
||||
triggerDesc: 'Төмендеуді сұрыптау үшін басыңыз',
|
||||
triggerAsc: 'Өсу ретімен сұрыптау үшін басыңыз',
|
||||
cancelSort: 'Сұрыптаудан бас тарту үшін басыңыз',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'Жарайды',
|
||||
cancelText: 'Болдырмау',
|
||||
justOkText: 'Жарайды',
|
||||
},
|
||||
Popconfirm: {
|
||||
okText: 'Жарайды',
|
||||
cancelText: 'Болдырмау',
|
||||
},
|
||||
Transfer: {
|
||||
titles: ['', ''],
|
||||
searchPlaceholder: 'Іздеу',
|
||||
itemUnit: 'элемент.',
|
||||
itemsUnit: 'элемент.',
|
||||
remove: 'Жою',
|
||||
selectAll: 'Барлық деректерді таңдау',
|
||||
selectCurrent: 'Ағымдағы бетті таңдау',
|
||||
selectInvert: 'Кері тәртіпте көрсету',
|
||||
removeAll: 'Барлық деректерді жою',
|
||||
removeCurrent: 'Ағымдағы парақты өшіру',
|
||||
},
|
||||
Upload: {
|
||||
uploading: 'Жүктеу...',
|
||||
removeFile: 'Файлды жою',
|
||||
uploadError: 'Жүктеу кезінде қате пайда болды',
|
||||
previewFile: 'Файлды алдын ала қарау',
|
||||
downloadFile: 'Файлды жүктеу',
|
||||
},
|
||||
Empty: {
|
||||
description: 'Деректер жоқ',
|
||||
},
|
||||
Icon: {
|
||||
icon: 'белгішесі',
|
||||
},
|
||||
Text: {
|
||||
edit: 'Өңдеу',
|
||||
copy: 'Көшіру',
|
||||
copied: 'Көшірілді',
|
||||
expand: 'Жазу',
|
||||
},
|
||||
PageHeader: {
|
||||
back: 'Артқа',
|
||||
},
|
||||
Form: {
|
||||
defaultValidateMessages: {
|
||||
default: '${label} өрісін тексеру қателігі',
|
||||
required: '${label} енгізіңіз',
|
||||
enum: '${label} [${enum}] қатарынан болуы керек',
|
||||
whitespace: '${label} бос болмауы керек',
|
||||
date: {
|
||||
format: '${label} жарамды күн форматы емес',
|
||||
parse: '${label} күнге түрлендірілмейді',
|
||||
invalid: '${label} жарамды күн емес',
|
||||
},
|
||||
types: {
|
||||
string: typeTemplate,
|
||||
method: typeTemplate,
|
||||
array: typeTemplate,
|
||||
object: typeTemplate,
|
||||
number: typeTemplate,
|
||||
date: typeTemplate,
|
||||
boolean: typeTemplate,
|
||||
integer: typeTemplate,
|
||||
float: typeTemplate,
|
||||
regexp: typeTemplate,
|
||||
email: typeTemplate,
|
||||
url: typeTemplate,
|
||||
hex: typeTemplate,
|
||||
},
|
||||
string: {
|
||||
len: '${label} ${len} таңбадан тұруы керек',
|
||||
min: '${label} ${min} таңбадан үлкен немесе оған тең болуы керек',
|
||||
max: '${label} ${max} таңбадан кем немесе оған тең болуы керек',
|
||||
range: '${label} ұзындығы ${min}-${max} таңба аралығында болуы керек',
|
||||
},
|
||||
number: {
|
||||
len: '${label} ${len} тең болуы керек',
|
||||
min: '${label} ${min} мәнінен үлкен немесе оған тең болуы керек',
|
||||
max: '${label} ${max} мәнінен аз немесе оған тең болуы керек',
|
||||
},
|
||||
array: {
|
||||
len: '${label} элементтерінің саны ${len} тең болуы керек',
|
||||
min: '${label} элементтерінің саны ${min} көп немесе оған тең болуы керек',
|
||||
max: '${label} элементтерінің саны ${max} аз немесе оған тең болуы керек',
|
||||
range: '${label} элементтерінің саны ${min} - ${max} аралығында болуы керек',
|
||||
},
|
||||
pattern: {
|
||||
mismatch: '${label} ${pattern} мен сәйкес келмейді',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default localeValues;
|
||||
@ -31,6 +31,7 @@ More layouts with navigation: [Layout](/components/layout).
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultOpenKeys | Array with the keys of default opened sub menus | string\[] | - | |
|
||||
| defaultSelectedKeys | Array with the keys of default selected menu items | string\[] | - | |
|
||||
| expandIcon | custom expand icon of submenu | ReactNode \| `(props: SubMenuProps & { isSubMenu: boolean }) => ReactNode` | - | 4.9.0 |
|
||||
| forceSubMenuRender | Render submenu into DOM before it becomes visible | boolean | false | |
|
||||
| inlineCollapsed | Specifies the collapsed status when menu is inline mode | boolean | - | |
|
||||
| inlineIndent | Indent (in pixels) of inline menu items on each level | number | 24 | |
|
||||
|
||||
@ -7,6 +7,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import devWarning from '../_util/devWarning';
|
||||
import { SiderContext, SiderContextProps } from '../layout/Sider';
|
||||
import collapseMotion from '../_util/motion';
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
import MenuContext, { MenuTheme } from './MenuContext';
|
||||
|
||||
export { MenuItemGroupProps } from 'rc-menu';
|
||||
@ -53,7 +54,7 @@ class InternalMenu extends React.Component<InternalMenuProps> {
|
||||
}
|
||||
|
||||
renderMenu = ({ getPopupContainer, getPrefixCls, direction }: ConfigConsumerProps) => {
|
||||
const { prefixCls: customizePrefixCls, className, theme } = this.props;
|
||||
const { prefixCls: customizePrefixCls, className, theme, expandIcon } = this.props;
|
||||
const defaultMotions = {
|
||||
horizontal: { motionName: 'slide-up' },
|
||||
inline: collapseMotion,
|
||||
@ -84,6 +85,9 @@ class InternalMenu extends React.Component<InternalMenuProps> {
|
||||
prefixCls={prefixCls}
|
||||
direction={direction}
|
||||
defaultMotions={defaultMotions}
|
||||
expandIcon={cloneElement(expandIcon, {
|
||||
className: `${prefixCls}-submenu-expand-icon`,
|
||||
})}
|
||||
/>
|
||||
</MenuContext.Provider>
|
||||
);
|
||||
|
||||
@ -32,6 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string\[] | - | |
|
||||
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string\[] | - | |
|
||||
| expandIcon | 自定义展开图标 | ReactNode \| `(props: SubMenuProps & { isSubMenu: boolean }) => ReactNode` | - | 4.9.0 |
|
||||
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | |
|
||||
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | |
|
||||
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | |
|
||||
|
||||
@ -175,6 +175,7 @@
|
||||
transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
|
||||
background 0.3s @ease-in-out;
|
||||
}
|
||||
|
||||
&-item,
|
||||
&-submenu-title {
|
||||
position: relative;
|
||||
@ -189,10 +190,10 @@
|
||||
min-width: 14px;
|
||||
margin-right: @menu-icon-margin-right;
|
||||
font-size: @menu-icon-size;
|
||||
transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
|
||||
transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out, color 0.3s @ease-in-out;
|
||||
+ span {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
|
||||
transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out, color 0.3s @ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@ -254,78 +255,62 @@
|
||||
background-color: @menu-popup-bg;
|
||||
}
|
||||
|
||||
&-vertical,
|
||||
&-vertical-left,
|
||||
&-vertical-right,
|
||||
&-inline {
|
||||
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
&-expand-icon,
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
width: 10px;
|
||||
color: @menu-item-color;
|
||||
transform: translateY(-50%);
|
||||
transition: transform 0.3s @ease-in-out;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
width: 10px;
|
||||
transition: transform 0.3s @ease-in-out;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 1.5px;
|
||||
// background + background-image to makes before & after cross have same color.
|
||||
// ref: https://github.com/ant-design/ant-design/issues/15910
|
||||
background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
|
||||
border-radius: 2px;
|
||||
transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out,
|
||||
top 0.3s @ease-in-out;
|
||||
content: '';
|
||||
}
|
||||
&::before {
|
||||
transform: rotate(45deg) translateY(-2px);
|
||||
}
|
||||
&::after {
|
||||
transform: rotate(-45deg) translateY(2px);
|
||||
}
|
||||
width: 6px;
|
||||
height: 1.5px;
|
||||
background-color: currentColor;
|
||||
border-radius: 2px;
|
||||
transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out, top 0.3s @ease-in-out,
|
||||
color 0.3s @ease-in-out;
|
||||
content: '';
|
||||
}
|
||||
> .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
|
||||
&::after,
|
||||
&::before {
|
||||
background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-vertical,
|
||||
&-vertical-left,
|
||||
&-vertical-right {
|
||||
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
&::before {
|
||||
transform: rotate(45deg) translateY(-2px);
|
||||
}
|
||||
&::after {
|
||||
transform: rotate(-45deg) translateY(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
&::before {
|
||||
transform: rotate(-45deg) translateX(2px);
|
||||
transform: rotate(45deg) translateY(-2.5px);
|
||||
}
|
||||
&::after {
|
||||
transform: rotate(45deg) translateX(-2px);
|
||||
transform: rotate(-45deg) translateY(2.5px);
|
||||
}
|
||||
}
|
||||
|
||||
&-open {
|
||||
&.@{menu-prefix-cls}-submenu-inline
|
||||
> .@{menu-prefix-cls}-submenu-title
|
||||
.@{menu-prefix-cls}-submenu-arrow {
|
||||
transform: translateY(-2px);
|
||||
&::after {
|
||||
transform: rotate(-45deg) translateX(-2px);
|
||||
}
|
||||
&::before {
|
||||
transform: rotate(45deg) translateX(2px);
|
||||
}
|
||||
&:hover > &-title > &-expand-icon,
|
||||
&:hover > &-title > &-arrow {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
|
||||
&-inline &-arrow {
|
||||
&::before {
|
||||
transform: rotate(-45deg) translateX(2.5px);
|
||||
}
|
||||
&::after {
|
||||
transform: rotate(45deg) translateX(-2.5px);
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal &-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-open&-inline > &-title > &-arrow {
|
||||
transform: translateY(-2px);
|
||||
&::after {
|
||||
transform: rotate(-45deg) translateX(-2.5px);
|
||||
}
|
||||
&::before {
|
||||
transform: rotate(45deg) translateX(2.5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1531,6 +1531,65 @@ exports[`renders ./components/select/demo/search-box.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/select/demo/search-sort.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-single ant-select-show-arrow ant-select-show-search"
|
||||
style="width:200px"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
Search to Select
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/select/demo/select-users.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
|
||||
43
components/select/demo/search-sort.md
Normal file
43
components/select/demo/search-sort.md
Normal file
@ -0,0 +1,43 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 带排序的搜索
|
||||
en-US: Search with sort
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
在搜索模式下对过滤结果项进行排序。
|
||||
|
||||
## en-US
|
||||
|
||||
Search the options with sorting.
|
||||
|
||||
```jsx
|
||||
import { Select } from 'antd';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
ReactDOM.render(
|
||||
<Select
|
||||
showSearch
|
||||
style={{ width: 200 }}
|
||||
placeholder="Search to Select"
|
||||
optionFilterProp="children"
|
||||
filterOption={(input, option) =>
|
||||
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
filterSort={(optionA, optionB) =>
|
||||
optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
|
||||
}
|
||||
>
|
||||
<Option value="1">Not Identified</Option>
|
||||
<Option value="2">Closed</Option>
|
||||
<Option value="3">Communicated</Option>
|
||||
<Option value="4">Identified</Option>
|
||||
<Option value="5">Resolved</Option>
|
||||
<Option value="6">Cancelled</Option>
|
||||
</Select>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -38,6 +38,7 @@ Select component to select value from options.
|
||||
| dropdownRender | Customize dropdown content | (originNode: ReactNode) => ReactNode | - | |
|
||||
| dropdownStyle | The style of dropdown menu | CSSProperties | - | |
|
||||
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true | |
|
||||
| filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction | (optionA: Option, optionB: Option) => number | - | 4.9.0 |
|
||||
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
|
||||
| labelInValue | Whether to embed label in value, turn the format of value from `string` to { value: string, label: ReactNode } | boolean | false | |
|
||||
| listHeight | Config popup height | number | 256 | |
|
||||
|
||||
@ -39,6 +39,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
|
||||
| dropdownRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - | |
|
||||
| dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - | |
|
||||
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true | |
|
||||
| filterSort | 搜索时对筛选结果项的排序函数, 类似[Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)里的compareFunction | (optionA: Option, optionB: Option) => number | - | 4.9.0 |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
|
||||
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 { value: string, label: ReactNode } 的格式 | boolean | false | |
|
||||
| listHeight | 设置弹窗滚动高度 | number | 256 | |
|
||||
|
||||
8
components/time-picker/locale/kk_KZ.tsx
Normal file
8
components/time-picker/locale/kk_KZ.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
import { TimePickerLocale } from '../index';
|
||||
|
||||
const locale: TimePickerLocale = {
|
||||
placeholder: 'Уақытты таңдаңыз',
|
||||
rangePlaceholder: ['Бастау уақыты', 'Аяқталу уақыты'],
|
||||
};
|
||||
|
||||
export default locale;
|
||||
@ -60,6 +60,7 @@ The following languages are currently supported:
|
||||
| Japanese | ja_JP |
|
||||
| Kurdish (Kurmanji) | kmr_IQ |
|
||||
| Kannada | kn_IN |
|
||||
| Kazakh | kk_KZ |
|
||||
| Korean | ko_KR |
|
||||
| Lithuanian | lt_LT |
|
||||
| Latvian | lv_LV |
|
||||
|
||||
@ -57,6 +57,7 @@ return (
|
||||
| 日语 | ja_JP |
|
||||
| 北库尔德语 | kmr_IQ |
|
||||
| 卡纳达语 | kn_IN |
|
||||
| 哈萨克语 | kk_KZ |
|
||||
| 韩语/朝鲜语 | ko_KR |
|
||||
| 立陶宛语 | lt_LT |
|
||||
| 拉脱维亚语 | lv_LV |
|
||||
|
||||
@ -125,18 +125,18 @@
|
||||
"rc-drawer": "~4.1.0",
|
||||
"rc-dropdown": "~3.2.0",
|
||||
"rc-field-form": "~1.17.0",
|
||||
"rc-image": "~4.0.0",
|
||||
"rc-image": "~4.1.0",
|
||||
"rc-input-number": "~6.1.0",
|
||||
"rc-mentions": "~1.5.0",
|
||||
"rc-menu": "~8.10.0",
|
||||
"rc-motion": "^2.4.0",
|
||||
"rc-notification": "~4.5.2",
|
||||
"rc-pagination": "~3.1.0",
|
||||
"rc-pagination": "~3.1.2",
|
||||
"rc-picker": "~2.4.1",
|
||||
"rc-progress": "~3.1.0",
|
||||
"rc-rate": "~2.9.0",
|
||||
"rc-resize-observer": "^0.2.3",
|
||||
"rc-select": "~11.4.0",
|
||||
"rc-select": "~11.5.0",
|
||||
"rc-slider": "~9.6.1",
|
||||
"rc-steps": "~4.1.0",
|
||||
"rc-switch": "~3.2.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user