From ca83d7645cabeb20148741ab70171f3c95f7f869 Mon Sep 17 00:00:00 2001 From: Sendya <18x@loacg.com> Date: Mon, 8 Jun 2020 22:44:16 +0800 Subject: [PATCH] feat: i18n-render custom close props --- README.md | 2 +- README.zh-CN.md | 2 +- examples/src/layouts/BasicLayout.jsx | 1 + src/BasicLayout.jsx | 6 ++---- src/components/ConfigProvider/index.js | 12 +++++++----- src/components/PageHeaderWrapper/index.jsx | 4 ++-- src/components/RouteMenu/BaseMenu.jsx | 8 +++----- src/components/SettingDrawer/BlockCheckbox.jsx | 5 +++-- src/components/SettingDrawer/LayoutChange.jsx | 7 ++++--- src/components/SettingDrawer/ThemeColor.jsx | 6 +++--- src/components/SettingDrawer/index.jsx | 15 +++++++++------ src/components/SiderMenu/SiderMenu.jsx | 5 +---- 12 files changed, 37 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index c4fa89e7..295a3cec 100644 --- a/README.md +++ b/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 | - | diff --git a/README.zh-CN.md b/README.zh-CN.md index cfc349a9..87c18251 100644 --- a/README.zh-CN.md +++ b/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 | - | diff --git a/examples/src/layouts/BasicLayout.jsx b/examples/src/layouts/BasicLayout.jsx index bf22c654..9fd54844 100644 --- a/examples/src/layouts/BasicLayout.jsx +++ b/examples/src/layouts/BasicLayout.jsx @@ -169,6 +169,7 @@ export default { // custom render rightContentRender, footerRender, + // i18nRender: false, i18nRender, menuHeaderRender, breadcrumbRender, diff --git a/src/BasicLayout.jsx b/src/BasicLayout.jsx index 96475654..8d179f41 100644 --- a/src/BasicLayout.jsx +++ b/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({}), diff --git a/src/components/ConfigProvider/index.js b/src/components/ConfigProvider/index.js index 37498747..d4497594 100644 --- a/src/components/ConfigProvider/index.js +++ b/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 { diff --git a/src/components/PageHeaderWrapper/index.jsx b/src/components/PageHeaderWrapper/index.jsx index e000a8d6..bdbf3d2f 100644 --- a/src/components/PageHeaderWrapper/index.jsx +++ b/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 diff --git a/src/components/RouteMenu/BaseMenu.jsx b/src/components/RouteMenu/BaseMenu.jsx index c550c4db..d607c721 100644 --- a/src/components/RouteMenu/BaseMenu.jsx +++ b/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 { i18nRender(title) } + return { i18nRender && i18nRender(title) || title } } 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') { diff --git a/src/components/SettingDrawer/BlockCheckbox.jsx b/src/components/SettingDrawer/BlockCheckbox.jsx index bf4d9ff3..054e43bd 100644 --- a/src/components/SettingDrawer/BlockCheckbox.jsx +++ b/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 || [ { diff --git a/src/components/SettingDrawer/LayoutChange.jsx b/src/components/SettingDrawer/LayoutChange.jsx index 942ad981..98ce4aa1 100644 --- a/src/components/SettingDrawer/LayoutChange.jsx +++ b/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) => { diff --git a/src/components/SettingDrawer/ThemeColor.jsx b/src/components/SettingDrawer/ThemeColor.jsx index 97d08b1d..01dd5021 100644 --- a/src/components/SettingDrawer/ThemeColor.jsx +++ b/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,7 +28,8 @@ 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 = { @@ -37,7 +37,7 @@ const ThemeColor = { 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) } diff --git a/src/components/SettingDrawer/index.jsx b/src/components/SettingDrawer/index.jsx index 6e63db60..7dc8d98f 100644 --- a/src/components/SettingDrawer/index.jsx +++ b/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 = {
- { + { changeSetting('theme', val) }} /> - { + { changeSetting('layout', value, null) }} /> undefined - }, + i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false), mode: PropTypes.string.def('inline'), theme: PropTypes.string.def('dark'), contentWidth: PropTypes.bool,