feat: i18n.t translate all messages by yaml

2021-08-27 23:36:05 +08:00 · 2021-08-27 23:36:05 +08:00 · ac96e1d641
parent 73ce3d224a
commit ac96e1d641
7 changed files with 130 additions and 85 deletions
--- a/components/select/src/index.tsx
+++ b/components/select/src/index.tsx
@ -17,10 +17,10 @@ interface Props {
 }

 const heightMap = {
-  'big': 40,
-  'medium': 36,
-  'small': 32,
-  'mini': 28,
+  big: 40,
+  medium: 36,
+  small: 32,
+  mini: 28
 }

@tag('o-select')
@ -32,7 +32,6 @@ export default class Select extends WeElement<Props> {
    size: 'big',
    multiple: false,
    block: false
-
  }

  static propTypes = {
@ -51,7 +50,6 @@ export default class Select extends WeElement<Props> {
        active: !this.props.active
      })
    }, 10)
-
  }

  onInputBlur = () => {
@ -69,7 +67,6 @@ export default class Select extends WeElement<Props> {
  selectedItems = []

  onItemClick = (item, index, evt) => {
-
    if (this.props.multiple) {
      //不自动关闭
      evt.stopPropagation()
@ -82,18 +79,17 @@ export default class Select extends WeElement<Props> {
      }

      this.fire('item-select', this.selectedItems)
-   
+
      this.update()

      this.resetSize()

      this.popover.updatePosition()
-
    } else {
      this._refInput.focus()

      this.fire('item-select', item)
-   
+
      this.selectedIndex = index
      this.label = item.label
      this.updateProps({
@ -108,7 +104,15 @@ export default class Select extends WeElement<Props> {
  inputHeight

  resetInputHeight() {
-    this.inputHeight = Math.max(heightMap[this.props.size], Number(this.tags ? (this.tags.clientHeight + (this.tags.clientHeight > heightMap[this.props.size] ? 6 : 0)) : 0))
+    this.inputHeight = Math.max(
+      heightMap[this.props.size],
+      Number(
+        this.tags
+          ? this.tags.clientHeight +
+              (this.tags.clientHeight > heightMap[this.props.size] ? 6 : 0)
+          : 0
+      )
+    )
  }

  inputWidth: number = 0
@ -116,7 +120,7 @@ export default class Select extends WeElement<Props> {
  tags

  resetInputWidth() {
-    this.inputWidth = this.getBoundingClientRect().width;
+    this.inputWidth = this.getBoundingClientRect().width
  }

  installed() {
@ -151,26 +155,31 @@ export default class Select extends WeElement<Props> {
        }
      }
    }
-
  }

  uninstall() {
-    removeResizeListener(this._refInput, this.resetSize);
+    removeResizeListener(this._refInput, this.resetSize)
  }

  render(props) {
-
    return (
-      <div {...extractClass({}, 'o-select', {
-        ['o-select--' + props.size]: props.size,
-        'block': props.block
-      })} >
+      <div
+        {...extractClass({}, 'o-select', {
+          ['o-select--' + props.size]: props.size,
+          block: props.block
+        })}
+      >
        <o-popover
          block={props.block}
-          ref={e => this.popover = e}
-          position="bottom">
+          ref={(e) => (this.popover = e)}
+          position="bottom"
+        >
          <div>
-            <div class="o-select__tags" ref={e => this.tags = e} style={{ width: '100%', maxWidth: (this.inputWidth - 32) + 'px' }}>
+            <div
+              class="o-select__tags"
+              ref={(e) => (this.tags = e)}
+              style={{ width: '100%', maxWidth: this.inputWidth - 32 + 'px' }}
+            >
              <span>
                {/* <span class="o-tag o-tag--info o-tag--small o-tag--light">
                  <span class="o-select__tags-text">omi</span><i class="o-tag__close o-icon-close"></i>
@ -179,56 +188,106 @@ export default class Select extends WeElement<Props> {
                  <span class="o-select__tags-text">asfsdfdsafdsafdsfbc</span><i class="o-tag__close o-icon-close"></i>
                </span> */}

-                {this.selectedItems.map(item => {
-                  return <span class="o-tag o-tag--info o-tag--small o-tag--light">
-                    <span class="o-select__tags-text">{item.label}</span><i class="o-tag__close o-icon-close"></i>
-                  </span>
+                {this.selectedItems.map((item) => {
+                  return (
+                    <span class="o-tag o-tag--info o-tag--small o-tag--light">
+                      <span class="o-select__tags-text">{item.label}</span>
+                      <i class="o-tag__close o-icon-close"></i>
+                    </span>
+                  )
                })}
              </span>
-              <input type="text" autocomplete="off" class="o-select__input" style={{ flexGrow: 1, width: '0.0961538%', maxWidth: (this.inputWidth - 32) + 'px' }} />
+              <input
+                type="text"
+                autocomplete="off"
+                class="o-select__input"
+                style={{
+                  flexGrow: 1,
+                  width: '0.0961538%',
+                  maxWidth: this.inputWidth - 32 + 'px'
+                }}
+              />
            </div>

-            <div {...extractClass({}, 'o-input o-input--suffix', {
-              ['o-input--' + props.size]: props.size,
-              'is-focus': props.isFocus
-            })} >
-              <input style={{ height: this.inputHeight + 'px' }} type="text" ref={e => this._refInput = e} onClick={this.onInputClick} onBlur={this.onInputBlur} readonly autocomplete="off" value={props.multiple ? '' : this.label} placeholder={Object.keys(this.selectedIndexMap).length > 0 ? '' : props.placeholder} class="o-input__inner" />
+            <div
+              {...extractClass({}, 'o-input o-input--suffix', {
+                ['o-input--' + props.size]: props.size,
+                'is-focus': props.isFocus
+              })}
+            >
+              <input
+                style={{ height: this.inputHeight + 'px' }}
+                type="text"
+                ref={(e) => (this._refInput = e)}
+                onClick={this.onInputClick}
+                onBlur={this.onInputBlur}
+                readonly
+                autocomplete="off"
+                value={props.multiple ? '' : this.label}
+                placeholder={
+                  Object.keys(this.selectedIndexMap).length > 0
+                    ? ''
+                    : props.placeholder
+                }
+                class="o-input__inner"
+              />
              <span class="o-input__suffix">
                <span class="o-input__suffix-inner">
                  <i class="o-select__caret o-input__icon o-icon-arrow-up is-reverse"></i>
                </span>
              </span>

-              <svg viewBox="0 0 24 24" class="arrow" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
-                <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z">
-                </path>
+              <svg
+                viewBox="0 0 24 24"
+                class="arrow"
+                data-icon="caret-down"
+                width="1em"
+                height="1em"
+                fill="currentColor"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
              </svg>
-
            </div>
          </div>

          <div slot="popover" class="o-select-dropdown__wrap">
            <ul>
              {props.items.map((item, index) => {
-                const selected = props.multiple ? this.selectedIndexMap[index] : (index === this.selectedIndex)
-                return <li {...extractClass({}, 'o-select-dropdown__item', {
-                  selected
-                })} onClick={evt => { this.onItemClick(item, index, evt) }}>
-                  <span>{item.label}</span>
-                  {selected && <svg class="a3 a2" focusable="false" viewBox="0 0 24 24" aria-hidden="true" tabindex="-1" title="Check" curr><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg>}
-                </li>
+                const selected = props.multiple
+                  ? this.selectedIndexMap[index]
+                  : index === this.selectedIndex
+                return (
+                  <li
+                    {...extractClass({}, 'o-select-dropdown__item', {
+                      selected
+                    })}
+                    onClick={(evt) => {
+                      this.onItemClick(item, index, evt)
+                    }}
+                  >
+                    <span>{item.label}</span>
+                    {selected && (
+                      <svg
+                        class="a3 a2"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                        tabindex="-1"
+                        title="Check"
+                        curr
+                      >
+                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
+                      </svg>
+                    )}
+                  </li>
+                )
              })}
            </ul>
          </div>
-
-
-
        </o-popover>
-
      </div>
-
-
-
    )
  }
 }
--- a/packages/admin/src/components/components/docs/en/contribution.md
+++ b/packages/admin/src/components/components/docs/en/contribution.md
@ -114,7 +114,7 @@ add them in /omi/packages/admin/src/nav-tree.ts

 ```js
 {
-    label: localeMap.base.Name,
+    label: i18n.t('Name'),
    id: genId(),
    href: '#/name-component'
 },
--- a/packages/admin/src/components/components/docs/zh/contribution.md
+++ b/packages/admin/src/components/components/docs/zh/contribution.md
@ -114,7 +114,7 @@ components.map((componentName: string) =>

 ```js
 {
-    label: localeMap.base.Name,
+    label: i18n.t('Name'),
    id: genId(),
    href: '#/name-component'
 },
--- a/packages/admin/src/layouts/components/layout-header.tsx
+++ b/packages/admin/src/layouts/components/layout-header.tsx
@ -4,7 +4,8 @@ import { setTheme } from '@omiu/common'
 import logo from '../../assets/logo.svg'
 import '@omiu/avatar'
 import '@omiu/icon/palette'
-import '@omiu/select'
+// import '@omiu/select'
+import '../../../../../components/select/src/index'
 import '@omiu/icon/notifications'
 import '@omiu/icon/settings'
 import '@omiu/icon/git-hub'
@ -57,16 +58,13 @@ export default class extends WeElement<Props> {
  }

  onItemSelect = (evt) => {
-    console.log(evt)
-
    this.store.setLocals(evt.detail.value)
-    console.log('setlocals', evt.detail.value)
  }

  goNotification = () => {
    // header-tabs是否存在‘通知中心’，存在则tab为Object
    const tab = this.store.tabs.find(
-      (tab) => tab.label === this.store.localeMap.base.NotificationList
+      (tab) => tab.label === i18n.t('NotificationList')
    )

    // 如果tab栏无通知中心，则store push
@ -76,12 +74,8 @@ export default class extends WeElement<Props> {
      location.hash = tab.href
    } else {
      const notificationTab = this.store.treeData
-        .find(
-          (item) => item.label === this.store.localeMap.base.ManagerWorkbench
-        )
-        .children.find(
-          (item) => item.label === this.store.localeMap.base.NotificationList
-        )
+        .find((item) => item.label === i18n.t('ManagerWorkbench'))
+        .children.find((item) => item.label === i18n.t('NotificationList'))
      this.store.tabs.push(notificationTab)
      this.store.tabsActiveIndex = this.store.tabs.length - 1
      this.store.selectTreeNodeById(notificationTab.id)
@ -92,7 +86,7 @@ export default class extends WeElement<Props> {
  goPersonalCenter = () => {
    // 待页面搭建完成后开放
    const tab = this.store.tabs.find(
-      (tab) => tab.label === this.store.localeMap.base.PersonalCenter
+      (tab) => tab.label === i18n.t('PersonalCenter')
    )

    if (tab) {
@ -101,12 +95,8 @@ export default class extends WeElement<Props> {
      location.hash = tab.href
    } else {
      const PersonalCenterTab = this.store.treeData
-        .find(
-          (item) => item.label === this.store.localeMap.base.ManagerWorkbench
-        )
-        .children.find(
-          (item) => item.label === this.store.localeMap.base.PersonalCenter
-        )
+        .find((item) => item.label === i18n.t('ManagerWorkbench'))
+        .children.find((item) => item.label === i18n.t('PersonalCenter'))
      this.store.tabs.push(PersonalCenterTab)
      this.store.tabsActiveIndex = this.store.tabs.length - 1
      this.store.selectTreeNodeById(PersonalCenterTab.id)
--- a/packages/admin/src/locales/en.yml
+++ b/packages/admin/src/locales/en.yml
@ -1,3 +1,6 @@
+test:
+  a: "I am A"
+
 ManagerWorkbench: "Manager Workbench"
 Welcome: "Welcome"
 Theme: "Theme"
--- a/packages/admin/src/modules/i18n.ts
+++ b/packages/admin/src/modules/i18n.ts
@ -15,12 +15,16 @@ export const t = (key: string, messages: Object) => {

 export const createI18n = (options: { locale: Language; messages: Object }) => {
  let locale = options.locale || 'zh'
-
-  return {
+  const i18n = {
    locale,
+    setLocale: (locale: Language) => {
+      i18n.locale = locale
+      i18n.t = (key: string) => t(key, messages[locale])
+    },
    t: (key: string) => t(key, messages[locale]),
-    messages: messages[locale]
+    messages
  }
+  return i18n
 }

 // import i18n resources
--- a/packages/admin/src/store.ts
+++ b/packages/admin/src/store.ts
@ -3,7 +3,6 @@ import { genNavTree, NavTree } from './nav-tree'
 import { getNotifications } from './notifications'
 import { resetId } from './util/id'
 import { route } from 'omi-router'
-// import { localeMap } from './modules/i18n'
 import type { Language } from './modules/i18n'
 import { i18n } from './index'

@ -19,11 +18,6 @@ class Store {
  }
  markdown: string
  html: string
-  localeMap: {
-    base?: {
-      Welcome: string
-    }
-  }
  isInstalled: boolean
  tabs: {
    label?: string
@ -56,8 +50,6 @@ class Store {
    this.markdown = ''
    this.html = ''

-    this.localeMap = {}
-
    this.setLocals(this.locale, () => {
      this.tabs = [
        {
@ -84,14 +76,11 @@ class Store {

  setLocals(locale: Language, callback?) {
    resetId()
-    this.locale = locale

-    // this.localeMap = localeMap[locale]
-    i18n.locale = locale
+    i18n.setLocale(locale)

    callback && callback()
    this.treeData = genNavTree()
-    console.log(this.treeData)

    this.tabs.forEach((tab) => {
      tab.label = this.getTabLabelById(tab.id)