feat: i18n-render custom close props

README.md

@@ -133,7 +133,7 @@ export default {
 | collapsedButtonRender | custom collapsed button method | (collapsed: boolean) => VNode | - |
 | footerRender | custom footer render method | (props: BasicLayoutProps) => VNode | - |
 | breadcrumbRender | custom breadcrumb render method | ({ route, params, routes, paths, h }) => VNode[] | - |
-| i18nRender | i18n | Function (key: string) => string | - |
+| i18nRender | i18n | Function (key: string) => string \| `false` | `false` |
 | handleMediaQuery | media matchs callback | (querys: []) => void | - |
 | mediaQuery            | media matchs                                                 | Array                              | -                  |
 

README.zh-CN.md

@@ -128,7 +128,7 @@ export default {
 | collapsedButtonRender | 自定义 侧栏收缩按钮 的方法 | (collapsed: boolean) => VNode | - |
 | footerRender | 自定义 底部区域内容 | (props: BasicLayoutProps) => VNode | - |
 | breadcrumbRender | 自定义面包屑渲染方法 | ({ route, params, routes, paths, h }) => VNode[] | - |
-| i18nRender | 本地化渲染函数 (this.$t) | Function (key: string) => string | - |
+| i18nRender | 本地化渲染函数 (this.$t) | Function (key: string) => string  \| `false` | `false` |
 | handleMediaQuery | 媒体查询回调 | (querys: []) => void | - |
 | mediaQuery            | ProLayout 当前的媒体查询                        | Array                              | -                  |
 

examples/src/layouts/BasicLayout.jsx

@@ -169,6 +169,7 @@ export default {
         // custom render
         rightContentRender,
         footerRender,
+        // i18nRender: false,
         i18nRender,
         menuHeaderRender,
         breadcrumbRender,

src/BasicLayout.jsx

@@ -6,17 +6,15 @@ import { Layout } from 'ant-design-vue'
 import { ContainerQuery } from 'vue-container-query'
 import { SiderMenuWrapper, GlobalFooter } from './components'
 import { getComponentFromProp, isFun } from './utils/util'
-import { SiderMenuProps } from './components/SiderMenu/SiderMenu'
+import { SiderMenuProps } from './components/SiderMenu'
 import HeaderView, { HeaderViewProps } from './Header'
 import WrapContent from './WrapContent'
 import ConfigProvider from './components/ConfigProvider'
 
-const noop = () => {}
-
 export const BasicLayoutProps = {
   ...SiderMenuProps,
   ...HeaderViewProps,
-  locale: PropTypes.string.def('en-US'),
+  locale: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('en-US'),
   breadcrumbRender: PropTypes.func,
   disableMobile: PropTypes.bool.def(false),
   mediaQuery: PropTypes.object.def({}),

src/components/ConfigProvider/index.js

@@ -1,12 +1,14 @@
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 
+const ProConfigProviderProps = {
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false),
+  contentWidth: PropTypes.bool,
+  breadcrumbRender: PropTypes.func,
+}
+
 const ConfigProvider = {
   name: 'ProConfigProvider',
-  props: {
-    i18nRender: PropTypes.any,
-    contentWidth: PropTypes.bool,
-    breadcrumbRender: PropTypes.func,
-  },
+  props: ProConfigProviderProps,
   provide () {
     const _self = this
     return {

src/components/PageHeaderWrapper/index.jsx

@@ -26,8 +26,8 @@ const PageHeaderWrapperProps = {
   breadcrumb: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).def(true),
   back: PropTypes.func,
 
-  // 包装 pro-layout 才能使用
-  i18nRender: PropTypes.any,
+  // only use `pro-layout` in children
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false),
 }
 
 const defaultI18nRender = (t) => t

src/components/RouteMenu/BaseMenu.jsx

@@ -11,11 +11,9 @@ export const RouteMenuProps = {
   theme: PropTypes.string.def('dark'),
   mode: PropTypes.string.def('inline'),
   collapsed: PropTypes.bool.def(false),
-  i18nRender: PropTypes.func,
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false),
 }
 
-const defaultI18nRender = (context) => context
-
 const renderMenu = (h, item, i18nRender) => {
   if (item && !item.hidden) {
     const bool = item.children && !item.hideChildrenInMenu
@@ -71,7 +69,7 @@ const renderIcon = (h, icon) => {
 }
 
 const renderTitle = (h, title, i18nRender) => {
-  return <span>{ i18nRender(title) }</span>
+  return <span>{ i18nRender && i18nRender(title) || title }</span>
 }
 
 const RouteMenu = {
@@ -85,7 +83,7 @@ const RouteMenu = {
     }
   },
   render (h) {
-    const { mode, theme, menus, i18nRender = defaultI18nRender } = this
+    const { mode, theme, menus, i18nRender } = this
     const handleOpenChange = (openKeys) => {
       // 在水平模式下时，不再执行后续
       if (mode === 'horizontal') {

src/components/SettingDrawer/BlockCheckbox.jsx

@@ -1,11 +1,12 @@
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import { Tooltip, Icon } from 'ant-design-vue'
-import { defaultI18nRender } from './index'
 
 const BlockCheckboxProps = {
   value: PropTypes.string,
   // Item: { key, url, title }
   list: PropTypes.array,
+
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false),
 }
 
 const baseClassName = 'ant-pro-setting-drawer-block-checbox'
@@ -16,7 +17,7 @@ const BlockCheckbox = {
   inject: ['locale'],
   render (h) {
     const { value, list } = this
-    const i18n = this.$props.i18nRender || this.locale || defaultI18nRender
+    const i18n = this.$props.i18nRender || this.locale
 
     const items = list || [
       {

src/components/SettingDrawer/LayoutChange.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import { List, Tooltip, Select, Switch } from 'ant-design-vue'
-import { defaultI18nRender } from './index'
 
 export const renderLayoutSettingItem = (h, item) => {
   const action = {...item.action}
@@ -17,14 +16,16 @@ export const LayoutSettingProps = {
   contentWidth: PropTypes.bool,
   fixedHeader: PropTypes.bool,
   fixSiderbar: PropTypes.bool,
-  layout: PropTypes.oneOf(['sidemenu', 'topmenu'])
+  layout: PropTypes.oneOf(['sidemenu', 'topmenu']),
+
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false),
 }
 
 export default {
   props: LayoutSettingProps,
   inject: ['locale'],
   render (h) {
-    const i18n = this.$props.i18nRender || this.locale || defaultI18nRender
+    const i18n = this.$props.i18nRender || this.locale
     const { contentWidth, fixedHeader, layout, fixSiderbar } = this
 
     const handleChange = (type, value) => {

src/components/SettingDrawer/ThemeColor.jsx

@@ -2,7 +2,6 @@ import './ThemeColor.less'
 
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import { Tooltip, Icon } from 'ant-design-vue'
-import { defaultI18nRender } from './index'
 import { genThemeToString } from '../../utils/util'
 
 const baseClassName = 'theme-color'
@@ -29,15 +28,16 @@ export const ThemeColorProps = {
   colors: PropTypes.array,
   title: PropTypes.string,
   value: PropTypes.string,
-  i18nRender: PropTypes.func
+
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false),
 }
 
 const ThemeColor = {
   props: ThemeColorProps,
   inject: ['locale'],
   render (h) {
     const { title, value, colors = [] } = this
-    const i18n = this.$props.i18nRender || this.locale || defaultI18nRender
+    const i18n = this.$props.i18nRender || this.locale
     const handleChange = (key) => {
       this.$emit('change', key)
     }

src/components/SettingDrawer/index.jsx

@@ -10,7 +10,6 @@ import { updateTheme, updateColorWeak } from '../../utils/dynamicTheme'
 import { genStringToTheme } from '../../utils/util'
 import CopyToClipboard from 'vue-copy-to-clipboard'
 
-
 const baseClassName = 'ant-pro-setting-drawer'
 
 const BodyProps = {
@@ -31,7 +30,7 @@ const Body = {
   }
 }
 
-export const defaultI18nRender = (t) => t
+const defaultI18nRender = (t) => t
 
 const getThemeList = (i18nRender) => {
 
@@ -138,7 +137,9 @@ export const settings = {
 
 export const SettingDrawerProps = {
   getContainer: PropTypes.func,
-  settings: PropTypes.objectOf(settings)
+  settings: PropTypes.objectOf(settings),
+
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false),
 }
 
 const SettingDrawer = {
@@ -169,7 +170,7 @@ const SettingDrawer = {
       colorWeak
     } = settings
 
-    const i18n = this.$props.i18nRender || this.locale
+    const i18n = this.$props.i18nRender || this.locale || defaultI18nRender
     const themeList = getThemeList(i18n)
     const isTopMenu = layout === 'topmenu'
 
@@ -212,12 +213,13 @@ const SettingDrawer = {
         </template>
         <div class={`${baseClassName}-content`}>
           <Body title={i18n('app.setting.pagestyle')}>
-            <BlockCheckbox list={themeList.themeList} value={theme} onChange={(val) => {
+            <BlockCheckbox i18nRender={i18n} list={themeList.themeList} value={theme} onChange={(val) => {
               changeSetting('theme', val)
             }} />
           </Body>
 
           <ThemeColor
+            i18nRender={i18n}
             title={i18n('app.setting.themecolor')}
             value={primaryColor}
             colors={themeList.colorList[theme === 'realDark' ? 'dark' : 'light']}
@@ -229,12 +231,13 @@ const SettingDrawer = {
           <Divider />
 
           <Body title={i18n('app.setting.navigationmode')}>
-            <BlockCheckbox value={layout} onChange={(value) => {
+            <BlockCheckbox i18nRender={i18n} value={layout} onChange={(value) => {
               changeSetting('layout', value, null)
             }} />
           </Body>
 
           <LayoutSetting
+            i18nRender={i18n}
             contentWidth={contentWidth}
             fixedHeader={fixedHeader}
             fixSiderbar={isTopMenu ? false : fixSiderbar}

src/components/SiderMenu/SiderMenu.jsx

@@ -7,10 +7,7 @@ import BaseMenu from '../RouteMenu'
 const { Sider } = Layout
 
 export const SiderMenuProps = {
-  i18nRender: {
-    type: Function,
-    default: () => undefined
-  },
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false),
   mode: PropTypes.string.def('inline'),
   theme: PropTypes.string.def('dark'),
   contentWidth: PropTypes.bool,