mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-30 06:09:34 +08:00
Merge pull request #22179 from ant-design/master-to-merge-feature
chore: 🔀 merge master into feature
This commit is contained in:
偏右
GitHub
commit
faf3578c54
@ -10,6 +10,7 @@
|
||||
font-size: @breadcrumb-font-size;
|
||||
|
||||
&-rtl {
|
||||
.clearfix;
|
||||
direction: rtl;
|
||||
|
||||
> span {
|
||||
|
||||
@ -14,7 +14,13 @@
|
||||
justify-content: flex-end;
|
||||
padding: @padding-sm 0;
|
||||
|
||||
|
||||
.@{calendar-prefix-cls}-year-select {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-month-select {
|
||||
min-width: 70px;
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
|
||||
|
||||
@ -11716,11 +11716,11 @@ exports[`ConfigProvider components Table configProvider 1`] = `
|
||||
class="config-table-filter-dropdown"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-light ant-dropdown-menu-root ant-dropdown-menu-vertical"
|
||||
class="config-dropdown-menu config-dropdown-menu-light config-dropdown-menu-root config-dropdown-menu-vertical"
|
||||
role="menu"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
class="config-dropdown-menu-item"
|
||||
role="menuitem"
|
||||
>
|
||||
<label
|
||||
@ -11743,19 +11743,19 @@ exports[`ConfigProvider components Table configProvider 1`] = `
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
|
||||
class="config-dropdown-menu-submenu config-dropdown-menu-submenu-vertical"
|
||||
role="menuitem"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-dropdown-menu-submenu-title"
|
||||
class="config-dropdown-menu-submenu-title"
|
||||
role="button"
|
||||
title="Submenu"
|
||||
>
|
||||
Submenu
|
||||
<i
|
||||
class="ant-dropdown-menu-submenu-arrow"
|
||||
class="config-dropdown-menu-submenu-arrow"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -6,7 +6,13 @@ import { PickerLocale } from '../generatePicker';
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Sélectionner une date',
|
||||
yearPlaceholder: 'Sélectionner une année',
|
||||
monthPlaceholder: 'Séléctionner un mois',
|
||||
weekPlaceholder: 'Séléctionne une semaine',
|
||||
rangePlaceholder: ['Date de début', 'Date de fin'],
|
||||
rangeYearPlaceholder: ['Année de début', 'Année de fin'],
|
||||
rangeMonthPlaceholder: ['Mois de début', 'Mois de fin'],
|
||||
rangeWeekPlaceholder: ['Semaine de début', 'Semaine de fin'],
|
||||
...CalendarLocale,
|
||||
},
|
||||
timePickerLocale: {
|
||||
|
||||
@ -25,6 +25,7 @@ When a numeric value needs to be provided.
|
||||
| decimalSeparator | decimal separator | string | |
|
||||
| size | height of input box | `large` \| `middle` \| `small` | |
|
||||
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |
|
||||
| type | HTML inputs can have a type of `number`, and this can be added to aid [mobile] broswer keyboards to show the number keybaord, as well as limit inputs to numbers only [0-9 and e], but will not guaruntee client and server side validation. | string - ie 'number' | |
|
||||
| value | current value | number | |
|
||||
| onChange | The callback triggered when the value is changed. | function(value: number \| string) | |
|
||||
| onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | |
|
||||
@ -35,3 +36,7 @@ When a numeric value needs to be provided.
|
||||
| ------- | ------------ |
|
||||
| blur() | remove focus |
|
||||
| focus() | get focus |
|
||||
|
||||
## Notes
|
||||
|
||||
Per issues [#21158](https://github.com/ant-design/ant-design/issues/21158), [#17344](https://github.com/ant-design/ant-design/issues/17344), [#9421](https://github.com/ant-design/ant-design/issues/9421), and [documentation about inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Using_number_inputs), it appears this community does not support native inclusion of the `type="number"` in the `<Input />` attributes, so please feel free to include it as needed, and be aware that it is heavily suggested that server side validation be utilized, as client side validation can be edited by power users.
|
||||
|
||||
@ -286,7 +286,7 @@
|
||||
height: @pagination-item-size-sm;
|
||||
margin-right: 8px;
|
||||
|
||||
.@{pagination-prefix-cls}-rtl & {
|
||||
.@{pagination-prefix-cls}-rtl& {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
@ -307,7 +307,7 @@
|
||||
border-color: @primary-color;
|
||||
}
|
||||
|
||||
.@{pagination-prefix-cls}-rtl & {
|
||||
.@{pagination-prefix-cls}-rtl& {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
@ -359,6 +359,12 @@
|
||||
|
||||
&.mini &-options {
|
||||
margin-left: 2px;
|
||||
|
||||
.@{pagination-prefix-cls}-rtl& {
|
||||
margin-right: 2px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-quick-jumper {
|
||||
height: @pagination-item-size-sm;
|
||||
line-height: @pagination-item-size-sm;
|
||||
|
||||
@ -38,7 +38,7 @@ export default class Rate extends React.Component<RateProps, any> {
|
||||
this.rcRate = node;
|
||||
};
|
||||
|
||||
characterRender = (node: React.ReactNode, { index }: RateNodeProps) => {
|
||||
characterRender = (node: React.ReactElement, { index }: RateNodeProps) => {
|
||||
const { tooltips } = this.props;
|
||||
if (!tooltips) return node;
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
@import './index';
|
||||
|
||||
@selection-item-padding: ceil(@font-size-base * 1.25);
|
||||
|
||||
.@{select-prefix-cls}-single {
|
||||
// ========================= Selector =========================
|
||||
.@{select-prefix-cls}-selector {
|
||||
@ -62,11 +64,11 @@
|
||||
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
|
||||
padding-right: @font-size-base;
|
||||
padding-right: @selection-item-padding;
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
padding-right: 0;
|
||||
padding-left: @font-size-base;
|
||||
padding-left: @selection-item-padding;
|
||||
}
|
||||
}
|
||||
|
||||
@ -176,6 +178,7 @@
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
padding-right: 0;
|
||||
padding-left: @font-size-base * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,7 +59,9 @@
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: @slider-handle-color-focus;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
|
||||
}
|
||||
|
||||
&.@{ant-prefix}-tooltip-open {
|
||||
|
||||
@ -73,7 +73,7 @@ class App extends React.Component {
|
||||
</Button>
|
||||
)}
|
||||
{current > 0 && (
|
||||
<Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
|
||||
<Button style={{ margin: 8 }} onClick={() => this.prev()}>
|
||||
Previous
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@ -144,11 +144,6 @@
|
||||
color: @text-color-secondary;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
|
||||
.@{steps-prefix-cls}-rtl & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
&-description {
|
||||
color: @text-color-secondary;
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
}
|
||||
&-title {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -31,6 +31,9 @@
|
||||
&::after {
|
||||
top: @steps-small-icon-size / 2;
|
||||
}
|
||||
.@{steps-prefix-cls}-rtl& {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.@{steps-prefix-cls}-item-description {
|
||||
color: @text-color-secondary;
|
||||
|
||||
@ -695,7 +695,7 @@
|
||||
@slider-handle-color: @primary-3;
|
||||
@slider-handle-color-hover: @primary-4;
|
||||
@slider-handle-color-focus: tint(@primary-color, 20%);
|
||||
@slider-handle-color-focus-shadow: fade(@primary-color, 20%);
|
||||
@slider-handle-color-focus-shadow: fade(@primary-color, 12%);
|
||||
@slider-handle-color-tooltip-open: @primary-color;
|
||||
@slider-handle-shadow: 0;
|
||||
@slider-dot-border-color: @border-color-split;
|
||||
|
||||
@ -89,7 +89,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
|
||||
style,
|
||||
size: customizeSize,
|
||||
bordered,
|
||||
dropdownPrefixCls,
|
||||
dropdownPrefixCls: customizeDropdownPrefixCls,
|
||||
dataSource,
|
||||
pagination,
|
||||
rowSelection,
|
||||
@ -124,6 +124,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
|
||||
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('table', customizePrefixCls);
|
||||
const dropdownPrefixCls = getPrefixCls('dropdown', customizeDropdownPrefixCls);
|
||||
|
||||
const mergedExpandable: ExpandableConfig<RecordType> = {
|
||||
expandIconColumnIndex,
|
||||
|
||||
@ -5031,6 +5031,7 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
|
||||
<tr
|
||||
aria-hidden="true"
|
||||
class="ant-table-measure-row"
|
||||
style="height:0"
|
||||
>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
@ -5431,6 +5432,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
|
||||
<tr
|
||||
aria-hidden="true"
|
||||
class="ant-table-measure-row"
|
||||
style="height:0"
|
||||
>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
@ -6360,6 +6362,7 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
|
||||
<tr
|
||||
aria-hidden="true"
|
||||
class="ant-table-measure-row"
|
||||
style="height:0"
|
||||
>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
@ -7715,6 +7718,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
||||
<tr
|
||||
aria-hidden="true"
|
||||
class="ant-table-measure-row"
|
||||
style="height:0"
|
||||
>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
@ -10400,9 +10404,63 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell react-resizable"
|
||||
class="ant-table-cell ant-table-column-has-sorters react-resizable"
|
||||
>
|
||||
Amount
|
||||
<div
|
||||
class="ant-table-column-sorters"
|
||||
>
|
||||
<span>
|
||||
Amount
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter ant-table-column-sorter-full"
|
||||
>
|
||||
<span
|
||||
class="ant-table-column-sorter-inner"
|
||||
>
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="react-resizable-handle react-resizable-handle-se"
|
||||
style="touch-action:none"
|
||||
|
||||
@ -28,6 +28,14 @@ const ResizeableTitle = props => {
|
||||
<Resizable
|
||||
width={width}
|
||||
height={0}
|
||||
handle={resizeHandle => (
|
||||
<span
|
||||
className={`react-resizable-handle react-resizable-handle-${resizeHandle}`}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
onResize={onResize}
|
||||
draggableOpts={{ enableUserSelectHack: false }}
|
||||
>
|
||||
@ -48,6 +56,7 @@ class Demo extends React.Component {
|
||||
title: 'Amount',
|
||||
dataIndex: 'amount',
|
||||
width: 100,
|
||||
sorter: (a, b) => a.amount - b.amount,
|
||||
},
|
||||
{
|
||||
title: 'Type',
|
||||
|
||||
@ -160,7 +160,7 @@ export function getFilterData<RecordType>(
|
||||
|
||||
interface FilterConfig<RecordType> {
|
||||
prefixCls: string;
|
||||
dropdownPrefixCls?: string;
|
||||
dropdownPrefixCls: string;
|
||||
columns: ColumnsType<RecordType>;
|
||||
locale: TableLocale;
|
||||
onFilterChange: (
|
||||
@ -172,7 +172,7 @@ interface FilterConfig<RecordType> {
|
||||
|
||||
function useFilter<RecordType>({
|
||||
prefixCls,
|
||||
dropdownPrefixCls = 'ant-dropdown',
|
||||
dropdownPrefixCls,
|
||||
columns,
|
||||
onFilterChange,
|
||||
getPopupContainer,
|
||||
|
||||
@ -58,10 +58,17 @@
|
||||
// Fixed first or last should special process
|
||||
&.@{table-prefix-cls}-cell-fix-left-last,
|
||||
&.@{table-prefix-cls}-cell-fix-right-first {
|
||||
display: flex;
|
||||
overflow: visible;
|
||||
|
||||
> .@{table-prefix-cls}-row-indent,
|
||||
> .@{table-prefix-cls}-row-expand-icon {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-cell-content {
|
||||
display: block;
|
||||
flex: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
|
||||
| overlayClassName | Class name of the tooltip card | string | - |
|
||||
| overlayStyle | Style of the tooltip card | object | - |
|
||||
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |
|
||||
| trigger | Tooltip trigger mode | `hover` \| `focus` \| `click` \| `contextMenu` | `hover` |
|
||||
| trigger | Tooltip trigger mode. Could be multiple by passing an array | `hover` \| `focus` \| `click` \| `contextMenu` \| `Array<string>` | `hover` |
|
||||
| visible | Whether the floating tooltip card is visible or not | boolean | `false` |
|
||||
| onVisibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - |
|
||||
| align | this value will be merged into placement's config, please refer to the settings [rc-tooltip](https://github.com/react-component/tooltip) | Object | - |
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import RcTooltip from 'rc-tooltip';
|
||||
import { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
|
||||
import classNames from 'classnames';
|
||||
import { AlignType, ActionType, BuildInPlacements } from 'rc-trigger/lib/interface';
|
||||
import { BuildInPlacements } from 'rc-trigger/lib/interface';
|
||||
import getPlacements, { AdjustOverflow, PlacementsConfig } from './placements';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
@ -33,32 +34,15 @@ export interface TooltipAlignConfig {
|
||||
useCssTransform?: boolean;
|
||||
}
|
||||
|
||||
export interface AbstractTooltipProps {
|
||||
prefixCls?: string;
|
||||
overlayClassName?: string;
|
||||
export interface AbstractTooltipProps extends Partial<RcTooltipProps> {
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
overlayStyle?: React.CSSProperties;
|
||||
placement?: TooltipPlacement;
|
||||
builtinPlacements?: BuildInPlacements;
|
||||
defaultVisible?: boolean;
|
||||
visible?: boolean;
|
||||
onVisibleChange?: (visible: boolean) => void;
|
||||
mouseEnterDelay?: number;
|
||||
mouseLeaveDelay?: number;
|
||||
transitionName?: string;
|
||||
trigger?: ActionType;
|
||||
openClassName?: string;
|
||||
arrowPointAtCenter?: boolean;
|
||||
autoAdjustOverflow?: boolean | AdjustOverflow;
|
||||
// getTooltipContainer had been rename to getPopupContainer
|
||||
getTooltipContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
||||
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
||||
children?: React.ReactNode;
|
||||
// align is a more higher api
|
||||
align?: AlignType;
|
||||
/** Internal. Hide tooltip when hidden. This will be renamed in future. */
|
||||
destroyTooltipOnHide?: boolean;
|
||||
}
|
||||
|
||||
export type RenderFunction = () => React.ReactNode;
|
||||
|
||||
@ -34,7 +34,7 @@ title: Tooltip
|
||||
| overlayClassName | 卡片类名 | string | 无 |
|
||||
| overlayStyle | 卡片样式 | object | 无 |
|
||||
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
|
||||
| trigger | 触发行为，可选 `hover/focus/click/contextMenu` | string | hover |
|
||||
| trigger | 触发行为，可选 `hover/focus/click/contextMenu`，可使用数组设置多个触发行为 | string \| string[] | hover |
|
||||
| visible | 用于手动控制浮层显隐 | boolean | false |
|
||||
| onVisibleChange | 显示隐藏的回调 | (visible) => void | 无 |
|
||||
| align | 该值将合并到 placement 的配置中，设置参考 [rc-tooltip](https://github.com/react-component/tooltip) | Object | 无 |
|
||||
|
||||
@ -129,7 +129,7 @@
|
||||
"rc-switch": "~1.9.0",
|
||||
"rc-table": "~7.3.0",
|
||||
"rc-tabs": "~10.0.0",
|
||||
"rc-tooltip": "~4.0.0",
|
||||
"rc-tooltip": "~4.0.2",
|
||||
"rc-tree": "~3.1.0",
|
||||
"rc-tree-select": "~3.1.0",
|
||||
"rc-trigger": "~4.0.0",
|
||||
|
||||
@ -20,7 +20,6 @@ a {
|
||||
position: relative;
|
||||
min-height: 500px;
|
||||
padding: 0 170px 32px 64px;
|
||||
overflow: hidden;
|
||||
background: @component-background;
|
||||
|
||||
.ant-row-rtl & {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user