i18n improve

mebtte · Jan 17, 2024 · d864b0b · d864b0b
1 parent 22051e1
commit d864b0b
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 19 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -7,6 +7,9 @@ extends:
   - plugin:react/recommended
   - plugin:react-hooks/recommended
   - prettier
+settings:
+  react:
+    version: "detect"
 parserOptions:
   ecmaVersion: latest
   sourceType: module

diff --git a/apps/pwa/src/components/file_select.tsx b/apps/pwa/src/components/file_select.tsx
@@ -34,9 +34,6 @@ const Style = styled.div<{ disabled: boolean }>`
       : 'transparent'};
   `}
 `;
-const Placeholder = styled.div`
-  ${upperCaseFirstLetter}
-`;
 
 function FileSelect({
   placeholder = '选择文件',
@@ -63,7 +60,7 @@ function FileSelect({
 
   return (
     <Style onClick={onSelectFile} disabled={disabled}>
-      {value ? value.name : <Placeholder>{placeholder}</Placeholder>}
+      {value ? value.name : placeholder}
     </Style>
   );
 }

diff --git a/apps/pwa/src/pages/player/pages/music_play_record/toolbar/filter.tsx b/apps/pwa/src/pages/player/pages/music_play_record/toolbar/filter.tsx
@@ -6,7 +6,7 @@ import parseSearch from '@/utils/parse_search';
 import { CSSProperties, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { t } from '@/i18n';
-import upperCaseFirstLetter from '#/utils/upper_case_first_letter';
+import capitalize from '#/utils/capitalize';
 
 const style: CSSProperties = {
   flex: 1,
@@ -40,7 +40,7 @@ function Filter() {
     <Input
       style={style}
       autoFocus={!IS_TOUCHABLE}
-      placeholder={upperCaseFirstLetter(t('search'))}
+      placeholder={capitalize(t('search'))}
       value={keyword}
       onChange={(event) => setKeyword(event.target.value)}
     />

diff --git a/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/index.tsx b/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/index.tsx
@@ -41,6 +41,7 @@ import playerEventemitter, {
   EventType as PlayerEventType,
 } from '../../../eventemitter';
 import { Singer } from './constants';
+import upperCaseFirstLetter from '#/utils/upper_case_first_letter';
 
 const maskProps: { style: CSSProperties } = {
   style: { zIndex: ZIndex.DIALOG },
@@ -218,9 +219,11 @@ function CreateMusicDialog() {
               onChange={onAssetChange}
               disabled={loading}
               acceptTypes={ASSET_TYPE_MAP[AssetType.MUSIC].acceptTypes}
-              placeholder={`${t('empty_file_warning')}, ${t(
-                'supported_formats',
-              )} ${ASSET_TYPE_MAP[AssetType.MUSIC].acceptTypes.join(', ')}`}
+              placeholder={upperCaseFirstLetter(
+                `${t('empty_file_warning')}, ${t(
+                  'supported_formats',
+                )} ${ASSET_TYPE_MAP[AssetType.MUSIC].acceptTypes.join(', ')}`,
+              )}
             />
           </Label>
           <Label

diff --git a/apps/pwa/src/pages/player/pages/my_music/toolbar/filter.tsx b/apps/pwa/src/pages/player/pages/my_music/toolbar/filter.tsx
@@ -6,7 +6,7 @@ import parseSearch from '@/utils/parse_search';
 import { CSSProperties, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { t } from '@/i18n';
-import upperCaseFirstLetter from '#/utils/upper_case_first_letter';
+import capitalize from '#/utils/capitalize';
 
 const style: CSSProperties = {
   flex: 1,
@@ -40,7 +40,7 @@ function Filter() {
     <Input
       style={style}
       autoFocus={!IS_TOUCHABLE}
-      placeholder={upperCaseFirstLetter(t('search'))}
+      placeholder={capitalize(t('search'))}
       value={keyword}
       onChange={(event) => setKeyword(event.target.value)}
     />

diff --git a/apps/pwa/src/pages/player/pages/public_musicbill_collection/toolbar/filter.tsx b/apps/pwa/src/pages/player/pages/public_musicbill_collection/toolbar/filter.tsx
@@ -5,6 +5,7 @@ import parseSearch from '@/utils/parse_search';
 import { CSSProperties, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { t } from '@/i18n';
+import capitalize from '#/utils/capitalize';
 
 const style: CSSProperties = {
   flex: 1,
@@ -37,7 +38,7 @@ function Filter() {
   return (
     <Input
       style={style}
-      placeholder={t('search')}
+      placeholder={capitalize(t('search'))}
       value={keyword}
       onChange={(event) => setKeyword(event.target.value)}
     />

diff --git a/apps/pwa/src/pages/player/pages/search/input.tsx b/apps/pwa/src/pages/player/pages/search/input.tsx
@@ -5,7 +5,7 @@ import parseSearch from '@/utils/parse_search';
 import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { t } from '@/i18n';
-import upperCaseFirstLetter from '#/utils/upper_case_first_letter';
+import capitalize from '#/utils/capitalize';
 
 function Wrapper() {
   const navigate = useNavigate();
@@ -18,7 +18,7 @@ function Wrapper() {
     <Input
       className="input"
       type="search"
-      placeholder={upperCaseFirstLetter(t('search'))}
+      placeholder={capitalize(t('search'))}
       value={keyword}
       autoFocus
       onChange={(e) => setKeyword(e.target.value)}

diff --git a/apps/pwa/src/pages/player/pages/user_manage/toolbar/filter.tsx b/apps/pwa/src/pages/player/pages/user_manage/toolbar/filter.tsx
@@ -3,7 +3,7 @@ import useNavigate from '@/utils/use_navigate';
 import { Query } from '@/constants';
 import { CSSProperties, useEffect, useState } from 'react';
 import { t } from '@/i18n';
-import upperCaseFirstLetter from '#/utils/upper_case_first_letter';
+import capitalize from '#/utils/capitalize';
 
 const style: CSSProperties = {
   flex: 1,
@@ -33,7 +33,7 @@ function Filter() {
       value={keyword}
       onChange={(e) => setKeyword(e.target.value)}
       type="search"
-      placeholder={upperCaseFirstLetter(t('search'))}
+      placeholder={capitalize(t('search'))}
     />
   );
 }

diff --git a/apps/pwa/src/pages/player/playlist_playqueue_drawer/playlist/toolbar.tsx b/apps/pwa/src/pages/player/playlist_playqueue_drawer/playlist/toolbar.tsx
@@ -6,11 +6,11 @@ import IconButton from '@/components/icon_button';
 import { MdDelete } from 'react-icons/md';
 import dialog from '@/utils/dialog';
 import { t } from '@/i18n';
-import upperCaseFirstLetter from '#/utils/upper_case_first_letter';
 import { FILTER_HEIGHT } from './constants';
 import playerEventemitter, {
   EventType as PlayerEventType,
 } from '../../eventemitter';
+import capitalize from '#/utils/capitalize';
 
 const Style = styled.div`
   position: absolute;
@@ -65,7 +65,7 @@ function Toolbar({
         <Input
           value={keyword}
           onChange={(e) => setKeyword(e.target.value)}
-          placeholder={upperCaseFirstLetter(t('search'))}
+          placeholder={capitalize(t('search'))}
         />
       </Label>
     </Style>

diff --git a/apps/pwa/src/utils/dialog/image_cut.tsx b/apps/pwa/src/utils/dialog/image_cut.tsx
@@ -16,6 +16,7 @@ import DialogBase from './dialog_base';
 import { ImageCut as ImageCutShape } from './constants';
 import useEvent from '../use_event';
 import loadImage from '../load_image';
+import upperCaseFirstLetter from '#/utils/upper_case_first_letter';
 
 const ACCEPT_TYPES = ['image/jpeg', 'image/png'];
 const contentStyle: CSSProperties = {
@@ -133,7 +134,7 @@ function ImageCutContent({
           </ImgBox>
         ) : null}
         <FileSelect
-          placeholder={t('image_select_placeholder')}
+          placeholder={upperCaseFirstLetter(t('image_select_placeholder'))}
           value={file}
           onChange={(f) => setFile(f)}
           acceptTypes={ACCEPT_TYPES}