feat(table): table 国际化 (#1458)

* fix(checkbox): fix dev wraning * feat(input, search-bar): delete default placeholder * feat(table): table 过滤器搜索框默认 placeholder 国际化 * refactor(pagination): replace new select component Co-authored-by: maxin <maxin@growingio.com>
growingio · Nov 10, 2021 · 7f96b7a · 7f96b7a · vercel · Nov 10, 2021
1 parent a5f6f0e
commit 7f96b7a
Show file tree

Hide file tree

Showing 15 changed files with 52 additions and 88 deletions.
diff --git a/src/checkbox/Checkbox.tsx b/src/checkbox/Checkbox.tsx
@@ -83,13 +83,12 @@ const Checkbox = WithRef<HTMLInputElement, CheckboxProps>((props, ref) => {
         ref={ref}
         disabled={disabled}
         className={classes}
-        indeterminate={indeterminate}
+        indeterminate={`${indeterminate}`}
         value={value}
         checked={checkedStatus}
         onChange={handleChange}
         style={style}
         color={color}
-        defaultChecked={defaultChecked}
         {...checkboxProps}
       />
       <span>{children}</span>

diff --git a/src/input/Input.tsx b/src/input/Input.tsx
@@ -60,10 +60,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     () => (customizeSuffix ? <div className={suffixCls}>{customizeSuffix}</div> : null),
     [suffixCls, customizeSuffix]
   );
-
-  const input = (
-    <input {...rest} disabled={disabled} className={inputClass} placeholder={placeholder || '请输入...'} ref={ref} />
-  );
+  const input = <input {...rest} disabled={disabled} className={inputClass} placeholder={placeholder} ref={ref} />;
 
   if (!suffix && !prefix) {
     return input;

diff --git a/src/input/InputNumber.tsx b/src/input/InputNumber.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 import Input from './Input';
 import { InputNumberProps } from './interface';
 
-const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
-  const { placeholder = '请输入数字...' } = props;
-  return <Input {...props} type="number" placeholder={placeholder} ref={ref} />;
-});
+const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => (
+  <Input {...props} type="number" ref={ref} />
+));
 
 export default InputNumber;
diff --git a/src/input/Password.tsx b/src/input/Password.tsx
@@ -6,7 +6,7 @@ import Input from './Input';
 import { PasswordProps } from './interface';
 
 const Password = React.forwardRef<HTMLInputElement, PasswordProps>((props, ref) => {
-  const { disabled, prefixCls: customizePrefixCls, placeholder = '请输入密码...' } = props;
+  const { disabled, prefixCls: customizePrefixCls } = props;
   const prefixCls = usePrefixCls('input-new', customizePrefixCls);
   const [visible, setVisible] = React.useState(false);
 
@@ -30,15 +30,7 @@ const Password = React.forwardRef<HTMLInputElement, PasswordProps>((props, ref)
       ),
     [passwordSuffixIconCls, toggleVisible, visible]
   );
-  return (
-    <Input
-      {...props}
-      type={visible ? 'text' : 'password'}
-      placeholder={placeholder}
-      suffix={passwordSuffix}
-      ref={ref}
-    />
-  );
+  return <Input {...props} type={visible ? 'text' : 'password'} suffix={passwordSuffix} ref={ref} />;
 });
 
 export default Password;
diff --git a/src/input/TextArea.tsx b/src/input/TextArea.tsx
@@ -4,7 +4,7 @@ import { TextAreaProps } from './interface';
 import usePrefixCls from '../utils/hooks/use-prefix-cls';
 
 const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
-  const { prefixCls: customizePrefixCls, disabled, placeholder = '请输入...', rows = 2, style, ...rest } = props;
+  const { prefixCls: customizePrefixCls, disabled, rows = 2, style, ...rest } = props;
 
   const inputPrefixCls = usePrefixCls('input-new', customizePrefixCls);
   const prefixCls = usePrefixCls('textarea-new');
@@ -25,17 +25,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
     };
   }, [style, disabled]);
 
-  return (
-    <textarea
-      {...rest}
-      disabled={disabled}
-      className={textAreaClass}
-      placeholder={placeholder}
-      rows={rows}
-      style={styles}
-      ref={ref}
-    />
-  );
+  return <textarea {...rest} disabled={disabled} className={textAreaClass} rows={rows} style={styles} ref={ref} />;
 });
 
 export default TextArea;
diff --git a/src/input/demos/Input.stories.tsx b/src/input/demos/Input.stories.tsx
@@ -51,61 +51,61 @@ const Template: Story<InputProps> = (args) => (
       <tr>
         <td>Text</td>
         <td>
-          <Input {...args} />
+          <Input placeholder="请输入..." {...args} />
         </td>
         <td>
-          <Input {...args} />
+          <Input placeholder="请输入..." {...args} />
         </td>
         <td>
-          <Input {...args} />
+          <Input placeholder="请输入..." {...args} />
         </td>
         <td>
-          <Input {...args} value="数据可视化" disabled />
+          <Input placeholder="请输入..." {...args} value="数据可视化" disabled />
         </td>
       </tr>
       <tr>
         <td>Number</td>
         <td>
-          <InputNumber {...args} defaultValue={12} value={15} />
+          <InputNumber placeholder="请输入数字..." {...args} defaultValue={12} value={15} />
         </td>
         <td>
-          <InputNumber {...args} />
+          <InputNumber placeholder="请输入数字..." {...args} />
         </td>
         <td>
-          <InputNumber {...args} />
+          <InputNumber placeholder="请输入数字..." {...args} />
         </td>
         <td>
-          <InputNumber {...args} value={365} disabled />
+          <InputNumber placeholder="请输入数字..." {...args} value={365} disabled />
         </td>
       </tr>
       <tr>
         <td>Password</td>
         <td>
-          <Password {...args} />
+          <Password placeholder="请输入密码..." {...args} />
         </td>
         <td>
-          <Password {...args} size="small" />
+          <Password placeholder="请输入密码..." {...args} size="small" />
         </td>
         <td>
-          <Password {...args} />
+          <Password placeholder="请输入密码..." {...args} />
         </td>
         <td>
-          <Password {...args} value="密码无法输入" disabled />
+          <Password placeholder="请输入密码..." {...args} value="密码无法输入" disabled />
         </td>
       </tr>
       <tr>
         <td>TextArea</td>
         <td>
-          <TextArea {...(args as any)} />
+          <TextArea placeholder="请输入..." {...(args as any)} />
         </td>
         <td>
-          <TextArea {...(args as any)} />
+          <TextArea placeholder="请输入..." {...(args as any)} />
         </td>
         <td>
-          <TextArea {...(args as any)} />
+          <TextArea placeholder="请输入..." {...(args as any)} />
         </td>
         <td>
-          <TextArea {...(args as any)} disabled />
+          <TextArea placeholder="请输入..." {...(args as any)} disabled />
         </td>
       </tr>
     </table>
@@ -121,20 +121,20 @@ const Template: Story<InputProps> = (args) => (
         <td>Size</td>
         <td>拥有两种尺寸：大号为高度36px，小号为高度30px</td>
         <td>
-          <Input {...args} />
+          <Input placeholder="请输入..." {...args} />
         </td>
         <td>
-          <Input {...args} size="small" />
+          <Input placeholder="请输入..." {...args} size="small" />
         </td>
       </tr>
       <tr>
         <td>Disabled</td>
         <td>disabled状态的样式，可配置是否hover有tooltip</td>
         <td>
-          <Input {...args} value="数据可视化" disabled />
+          <Input placeholder="请输入..." {...args} value="数据可视化" disabled />
         </td>
         <td>
-          <Input {...args} value="数据可视化" disabled size="small" />
+          <Input placeholder="请输入..." {...args} value="数据可视化" disabled size="small" />
         </td>
       </tr>
     </table>

diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
@@ -11,7 +11,7 @@ import timeSelectorLocale from '../time-selector/locales/en-US';
 import searchBarLocale from '../legacy/search-bar/locales/en-US';
 import cascaderLocale from '../legacy/cascader/locales/en-US';
 import paginationLocale from '../pagination/locales/en-US';
-import tableLocale from '../legacy/table/locales/en-US';
+import tableLocale from '../table/locales/en-US';
 import uploadLocale from '../upload/locales/en-US';
 import staticPastTimePickerLocale from '../static-past-time-picker/locales/en-US';
 

diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
@@ -11,7 +11,7 @@ import timeSelectorLocale from '../time-selector/locales/zh-CN';
 import searchBarLocale from '../legacy/search-bar/locales/zh-CN';
 import cascaderLocale from '../legacy/cascader/locales/zh-CN';
 import paginationLocale from '../pagination/locales/zh-CN';
-import tableLocale from '../legacy/table/locales/zh-CN';
+import tableLocale from '../table/locales/zh-CN';
 import uploadLocale from '../upload/locales/zh-CN';
 import staticPastTimePickerLocale from '../static-past-time-picker/locales/zh-CN';
 

diff --git a/src/pagination/RowsSelector.tsx b/src/pagination/RowsSelector.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import Select from '../legacy/select';
+import Select from '../select';
 import { PaginationContext } from './Pagination';
 
 const RowsSelector: React.FC<{
@@ -25,22 +25,28 @@ const RowsSelector: React.FC<{
           defaultValue={defaultPageSize}
           value={pageSize}
           size="small"
-          className={`${prefixCls}__rows__select`}
           getContainer={(node) => node.parentElement || document.body}
-          autoWidth
           options={pageSizeOptions.map((rowSize) => {
             const value = Number.parseInt(`${rowSize}`, 10);
             return {
               label: value,
               value,
             };
           })}
-          onSelect={(value) => {
+          onChange={(value) => {
             const currentPageSize = Number.parseInt(`${value}`, 10);
             onRowsChange?.(currentPageSize);
             onPageSizeChange?.(currentPageSize, previousPageSizeRef.current);
             previousPageSizeRef.current = currentPageSize;
           }}
+          triggerOption={{
+            hidePrefix: true,
+            allowClear: false,
+            style: {
+              width: 85,
+              textAlign: 'left',
+            },
+          }}
         />
       )}
     </div>

diff --git a/src/pagination/style/index.less b/src/pagination/style/index.less
@@ -50,7 +50,6 @@
       margin: 0 0 0 8px;
       line-height: @pagination-height;
     }
-    &__select,
     &__input {
       @width: 85px;
       width: @width;

diff --git a/src/search-bar/SearchBar.tsx b/src/search-bar/SearchBar.tsx
@@ -58,12 +58,11 @@ const SearchBar = React.forwardRef<HTMLInputElement, SearchBarProps>((props, ref
     [onChangeFC, onSearch]
   );
 
-  const resetPlaceholder = useMemo(() => (placeholder || disabled ? '无法搜索' : '搜索'), [placeholder, disabled]);
   return (
     <Input
       {...props}
       type="text"
-      placeholder={resetPlaceholder}
+      placeholder={placeholder}
       value={value}
       onChange={onChange}
       suffix={suffix}

diff --git a/src/table/FilterPopover.tsx b/src/table/FilterPopover.tsx
@@ -6,7 +6,7 @@ import Popover from '../popover';
 import FilterList from './FilterList';
 import SearchBar from '../search-bar';
 import { TableContext } from './Table';
-import { FilterType , Key } from './interface';
+import { FilterType, Key } from './interface';
 import defaultLocale from './locales/zh-CN';
 
 interface FilterPopoverProps {
@@ -22,18 +22,18 @@ interface FilterPopoverProps {
 }
 
 const FilterPopover = (props: FilterPopoverProps): React.ReactElement => {
-  const { children, onClick, filters = [], values, prefixCls, placeholder = '搜索过滤条件' } = props;
-  const [searchValue, setSearchValue] = useState<string>('');
-  const [selectFilterKeys, setSelectFilterKeys] = useState<string[]>(values.map((value) => `${value}`));
-  const [visible, setVisible] = useState<boolean>(false);
-  const { tableRef } = useContext(TableContext);
-
   const locale = useLocale('Table');
-  const { clearText, okText }: { clearText: string; okText: string } = {
+  const { clearText, okText, searchText }: typeof defaultLocale = {
     ...defaultLocale,
     ...locale,
   };
 
+  const { children, onClick, filters = [], values, prefixCls, placeholder = searchText } = props;
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [selectFilterKeys, setSelectFilterKeys] = useState<string[]>(values.map((value) => `${value}`));
+  const [visible, setVisible] = useState<boolean>(false);
+  const { tableRef } = useContext(TableContext);
+
   useEffect(() => {
     if (visible) {
       setSelectFilterKeys(values.map((value) => `${value}`));

diff --git a/src/table/locales/en-US.ts b/src/table/locales/en-US.ts
@@ -1,4 +1,5 @@
 export default {
   clearText: 'Clear',
   okText: 'Confirm',
+  searchText: 'Search filter conditions',
 };
diff --git a/src/table/locales/zh-CN.ts b/src/table/locales/zh-CN.ts
@@ -1,4 +1,5 @@
 export default {
   clearText: '清除',
   okText: '确定',
+  searchText: '搜索过滤条件',
 };
diff --git a/src/table/style/index.less b/src/table/style/index.less
@@ -144,25 +144,6 @@
         pointer-events: none;
       }
     }
-
-    .@{checkbox-prefix-cls} {
-      & + span {
-        display: block;
-        width: 16px;
-        height: 16px;
-        margin: -16px 0 0 0;
-      }
-      &-wrapper {
-        height: 16px;
-        line-height: 0;
-      }
-      &-icon {
-        top: 4px;
-      }
-      &-input {
-        margin: 0;
-      }
-    }
   }
 
   &-ping-left &-cell&-cell-fix-left-last::after {