From 402f3a9afbfae6b21035c38caaa913cc41c677a4 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Wed, 29 Apr 2020 23:18:22 +0800 Subject: [PATCH 01/40] feat: rewrite config with hook and add rtl config (#23759) * feat: rewrite config with hook and add rtl config * fix import * fix lint --- components/config-provider/index.tsx | 47 +++++++++++++++++----------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index b46ab9752f..08fb21e504 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -9,6 +9,8 @@ import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import { ConfigConsumer, ConfigContext, CSPConfig, ConfigConsumerProps } from './context'; import { SizeType, SizeContextProvider } from './SizeContext'; +import message from '../message'; +import notification from '../notification'; export { RenderEmptyHandler, ConfigContext, ConfigConsumer, CSPConfig, ConfigConsumerProps }; @@ -49,10 +51,21 @@ export interface ConfigProviderProps { }; } -class ConfigProvider extends React.Component { - getPrefixClsWrapper = (context: ConfigConsumerProps) => { +const ConfigProvider: React.FC = props => { + React.useEffect(() => { + if (props.direction) { + message.config({ + rtl: props.direction === 'rtl', + }); + notification.config({ + rtl: props.direction === 'rtl', + }); + } + }, [props.direction]); + + const getPrefixClsWrapper = (context: ConfigConsumerProps) => { return (suffixCls: string, customizePrefixCls?: string) => { - const { prefixCls } = this.props; + const { prefixCls } = props; if (customizePrefixCls) return customizePrefixCls; @@ -62,7 +75,7 @@ class ConfigProvider extends React.Component { }; }; - renderProvider = (context: ConfigConsumerProps, legacyLocale: Locale) => { + const renderProvider = (context: ConfigConsumerProps, legacyLocale: Locale) => { const { children, getTargetContainer, @@ -77,11 +90,11 @@ class ConfigProvider extends React.Component { componentSize, direction, space, - } = this.props; + } = props; const config: ConfigConsumerProps = { ...context, - getPrefixCls: this.getPrefixClsWrapper(context), + getPrefixCls: getPrefixClsWrapper(context), csp, autoInsertSpaceInButton, locale: locale || legacyLocale, @@ -136,17 +149,15 @@ class ConfigProvider extends React.Component { ); }; - render() { - return ( - - {(_, __, legacyLocale) => ( - - {context => this.renderProvider(context, legacyLocale as Locale)} - - )} - - ); - } -} + return ( + + {(_, __, legacyLocale) => ( + + {context => renderProvider(context, legacyLocale as Locale)} + + )} + + ); +}; export default ConfigProvider; From e3e183ea3927783892a7525dfad5b23a841ee36d Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Thu, 30 Apr 2020 10:52:44 +0800 Subject: [PATCH 02/40] docs: add rtl message/notification explanation (#23770) * docs: add explanation for message/notification * fix name * fix * add --- components/message/index.en-US.md | 4 ++++ components/message/index.zh-CN.md | 4 ++++ components/notification/index.en-US.md | 4 ++++ components/notification/index.zh-CN.md | 4 ++++ 4 files changed, 16 insertions(+) diff --git a/components/message/index.en-US.md b/components/message/index.en-US.md index d633a5e8ec..c4372ca2c2 100644 --- a/components/message/index.en-US.md +++ b/components/message/index.en-US.md @@ -65,6 +65,10 @@ Methods for global configuration and destruction are also provided: #### message.config +> When you use `ConfigProvider` for global configuration, the system will automatically start RTL mode by default. +> +> When you want to use it alone, you can start the RTL mode through the following settings. + ```js message.config({ top: 100, diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md index 95fc10c63d..70c83d2109 100644 --- a/components/message/index.zh-CN.md +++ b/components/message/index.zh-CN.md @@ -66,6 +66,10 @@ title: Message #### message.config +> 当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。 +> +> 当你想单独使用，可通过如下设置开启 RTL 模式。 + ```js message.config({ top: 100, diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md index 6b03a05bae..f317a1c124 100644 --- a/components/notification/index.en-US.md +++ b/components/notification/index.en-US.md @@ -50,6 +50,10 @@ The properties of config are as follows: - `notification.config(options)` + > When you use `ConfigProvider` for global configuration, the system will automatically start RTL mode by default. + > + > When you want to use it alone, you can start the RTL mode through the following settings. + ```js notification.config({ placement: 'bottomRight', diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index c9f70737cf..7899e2c783 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -51,6 +51,10 @@ config 参数如下： - `notification.config(options)` + > 当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。 + > + > 当你想单独使用，可通过如下设置开启 RTL 模式。 + ```js notification.config({ placement: 'bottomRight', From b66ab374639940fb88f116f1e780d49edaa9c105 Mon Sep 17 00:00:00 2001 From: vldh Date: Thu, 30 Apr 2020 15:37:11 +0800 Subject: [PATCH 03/40] feat: add less variable @input-disabled-color (#23775) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add less variable @input-disabled-color * Update components/style/themes/default.less Co-Authored-By: 偏右 Co-authored-by: lidahao Co-authored-by: Amumu Co-authored-by: 偏右 --- components/input/style/mixin.less | 2 +- components/style/themes/default.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index ac36ca8403..cc745e5f7e 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -34,7 +34,7 @@ } .disabled() { - color: @disabled-color; + color: @input-disabled-color; background-color: @input-disabled-bg; cursor: not-allowed; opacity: 1; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 9f9b0c6533..50a17dcbb3 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -399,6 +399,7 @@ @input-disabled-bg: @disabled-bg; @input-outline-offset: 0 0; @input-icon-hover-color: fade(@black, 85%); +@input-disabled-color: @disabled-color; // Mentions // --- From 98232382f17c7868d49a7bbc5b3c0c33197449f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 30 Apr 2020 21:14:10 +0800 Subject: [PATCH 04/40] feat: MenuItem support `danger` (#23785) * feat: Basic danger color * dark of it * danger dark style * invers of dropdown * update less * update snapshot --- components/dropdown/demo/basic.md | 1 + components/dropdown/style/index.less | 1 + components/dropdown/style/status.less | 12 +++++ components/menu/MenuItem.tsx | 4 +- .../__tests__/__snapshots__/demo.test.js.snap | 2 +- components/menu/demo/theme.md | 4 +- components/menu/index.en-US.md | 1 + components/menu/index.zh-CN.md | 1 + components/menu/style/index.less | 1 + components/menu/style/status.less | 47 +++++++++++++++++++ components/style/themes/default.less | 4 ++ 11 files changed, 75 insertions(+), 3 deletions(-) create mode 100644 components/dropdown/style/status.less create mode 100644 components/menu/style/status.less diff --git a/components/dropdown/demo/basic.md b/components/dropdown/demo/basic.md index 12f3c65d9c..7286e9946e 100644 --- a/components/dropdown/demo/basic.md +++ b/components/dropdown/demo/basic.md @@ -34,6 +34,7 @@ const menu = ( 3rd menu item + a danger item ); diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 182d038ce4..5facb15605 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -1,5 +1,6 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; +@import './status'; @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown'; diff --git a/components/dropdown/style/status.less b/components/dropdown/style/status.less new file mode 100644 index 0000000000..327cf488ab --- /dev/null +++ b/components/dropdown/style/status.less @@ -0,0 +1,12 @@ +@import './index'; + +.@{dropdown-prefix-cls}-menu-item { + &&-danger { + color: @error-color; + + &:hover { + color: @text-color-inverse; + background-color: @error-color; + } + } +} diff --git a/components/menu/MenuItem.tsx b/components/menu/MenuItem.tsx index 89264afaad..89038863ca 100644 --- a/components/menu/MenuItem.tsx +++ b/components/menu/MenuItem.tsx @@ -16,6 +16,7 @@ export interface MenuItemProps disabled?: boolean; level?: number; icon?: React.ReactNode; + danger?: boolean; title?: React.ReactNode; children?: React.ReactNode; className?: string; @@ -50,7 +51,7 @@ export default class MenuItem extends React.Component { renderItem = ({ siderCollapsed }: SiderContextProps) => { const { level, className, children, rootPrefixCls } = this.props; - const { title, icon, ...rest } = this.props; + const { title, icon, danger, ...rest } = this.props; return ( @@ -81,6 +82,7 @@ export default class MenuItem extends React.Component { +
  • + +
    • + + + +`; + exports[`ConfigProvider components Carousel normal 1`] = `
    `; +exports[`ConfigProvider components Cascader configProvider virtual and dropdownMatchSelectWidth 1`] = ` + + + + + + + +`; + exports[`ConfigProvider components Cascader normal 1`] = ` `; +exports[`ConfigProvider components Checkbox configProvider virtual and dropdownMatchSelectWidth 1`] = ` +
    + +
    +`; + exports[`ConfigProvider components Checkbox normal 1`] = `
    `; +exports[`ConfigProvider components Collapse configProvider virtual and dropdownMatchSelectWidth 1`] = ` +
    +
    + +
    +
    +`; + exports[`ConfigProvider components Collapse normal 1`] = `
    `; +exports[`ConfigProvider components Comment configProvider virtual and dropdownMatchSelectWidth 1`] = ` +
    +
    +
    +
    +
    +
    + Bamboo +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Light +
    +
    +
    +
    +
    +
    +`; + exports[`ConfigProvider components Comment normal 1`] = `
    `; +exports[`ConfigProvider components DatePicker DatePicker configProvider virtual and dropdownMatchSelectWidth 1`] = ` +
    +
    +
    + + + + + + +
    +
    +
    +`; + exports[`ConfigProvider components DatePicker DatePicker normal 1`] = `
    `; +exports[`ConfigProvider components DatePicker MonthPicker configProvider virtual and dropdownMatchSelectWidth 1`] = ` +
    +
    +
    + + + + + + +
    +
    +
    +`; + exports[`ConfigProvider components DatePicker MonthPicker normal 1`] = `
    `; +exports[`ConfigProvider components DatePicker RangePicker configProvider virtual and dropdownMatchSelectWidth 1`] = ` +
    +
    +
    + +
    +
    + + + + + +
    +
    + +
    +
    + + + + + +
    +
    +`; + exports[`ConfigProvider components DatePicker RangePicker normal 1`] = `
    `; +exports[`ConfigProvider components DatePicker WeekPicker configProvider virtual and dropdownMatchSelectWidth 1`] = ` +
    +
    +
    + + + + + + +
    +
    +
    +`; + exports[`ConfigProvider components DatePicker WeekPicker normal 1`] = `
    `; +exports[`ConfigProvider components Divider configProvider virtual and dropdownMatchSelectWidth 1`] = ` +