add actionsText prop to TagSelect, add locales to List page #3367 (#3442)

* add actionsText prop to TagSelect, add locales to List page

* add actionsText prop to TagSelect, add locales to List page

src/components/TagSelect/index.d.ts

@@ -7,6 +7,7 @@ export interface ITagSelectProps {
   value?: string[] | number[];
   style?: React.CSSProperties;
   hideCheckAll?: boolean;
+  actionsText?: { expandText?: string; collapseText?: string; selectAllText?: string };
 }
 
 export default class TagSelect extends React.Component<ITagSelectProps, any> {

src/components/TagSelect/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Tag, Icon } from 'antd';
 
@@ -15,8 +16,18 @@ const TagSelectOption = ({ children, checked, onChange, value }) => (
 TagSelectOption.isTagSelectOption = true;
 
 class TagSelect extends Component {
+  static propTypes = {
+    actionsText: PropTypes.object,
+    hideCheckAll: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  };
+
   static defaultProps = {
     hideCheckAll: false,
+    actionsText: {
+      expandText: 'Expand',
+      collapseText: 'Collapse',
+      selectAllText: 'All',
+    },
   };
 
   constructor(props) {
@@ -88,19 +99,21 @@ class TagSelect extends Component {
 
   render() {
     const { value, expand } = this.state;
-    const { children, hideCheckAll, className, style, expandable } = this.props;
-
+    const { children, hideCheckAll, className, style, expandable, actionsText } = this.props;
     const checkedAll = this.getAllTags().length === value.length;
+    const { expandText = 'Expand', collapseText = 'Collapse', selectAllText = 'All' } =
+      actionsText === null ? {} : actionsText;
 
     const cls = classNames(styles.tagSelect, className, {
       [styles.hasExpandTag]: expandable,
       [styles.expanded]: expand,
     });
+
     return (
       <div className={cls} style={style}>
         {hideCheckAll ? null : (
           <CheckableTag checked={checkedAll} key="tag-select-__all__" onChange={this.onSelectAll}>
-            全部
+            {selectAllText}
           </CheckableTag>
         )}
         {value &&
@@ -117,7 +130,7 @@ class TagSelect extends Component {
           })}
         {expandable && (
           <a className={styles.trigger} onClick={this.handleExpand}>
-            {expand ? '收起' : '展开'} <Icon type={expand ? 'up' : 'down'} />
+            {expand ? collapseText : expandText} <Icon type={expand ? 'up' : 'down'} />
           </a>
         )}
       </div>

src/locales/en-US.js

@@ -9,6 +9,7 @@ import result from './en-US/result';
 import settingDrawer from './en-US/settingDrawer';
 import settings from './en-US/settings';
 import pwa from './en-US/pwa';
+import component from './en-US/component';
 
 export default {
   'navBar.lang': 'Languages',
@@ -30,4 +31,5 @@ export default {
   ...settingDrawer,
   ...settings,
   ...pwa,
+  ...component,
 };

src/locales/en-US/component.js

@@ -0,0 +1,5 @@
+export default {
+  'component.tagSelect.expand': 'Expand',
+  'component.tagSelect.collapse': 'Collapse',
+  'component.tagSelect.all': 'All',
+};

src/locales/pt-BR.js

@@ -9,6 +9,7 @@ import result from './pt-BR/result';
 import settingDrawer from './pt-BR/settingDrawer';
 import settings from './pt-BR/settings';
 import pwa from './pt-BR/pwa';
+import component from './pt-BR/component';
 
 export default {
   'navBar.lang': 'Idiomas',
@@ -30,4 +31,5 @@ export default {
   ...settingDrawer,
   ...settings,
   ...pwa,
+  ...component,
 };

src/locales/pt-BR/component.js

@@ -0,0 +1,5 @@
+export default {
+  'component.tagSelect.expand': 'Expandir',
+  'component.tagSelect.collapse': 'Colapso',
+  'component.tagSelect.all': 'Todas',
+};

src/locales/zh-CN.js

@@ -9,6 +9,7 @@ import result from './zh-CN/result';
 import settingDrawer from './zh-CN/settingDrawer';
 import settings from './zh-CN/settings';
 import pwa from './zh-CN/pwa';
+import component from './zh-CN/component';
 
 export default {
   'navBar.lang': '语言',
@@ -30,4 +31,5 @@ export default {
   ...settingDrawer,
   ...settings,
   ...pwa,
+  ...component,
 };

src/locales/zh-CN/component.js

@@ -0,0 +1,5 @@
+export default {
+  'component.tagSelect.expand': '展开',
+  'component.tagSelect.collapse': '收起',
+  'component.tagSelect.all': '全部',
+};

src/locales/zh-TW.js

@@ -9,6 +9,7 @@ import result from './zh-TW/result';
 import settingDrawer from './zh-TW/settingDrawer';
 import settings from './zh-TW/settings';
 import pwa from './zh-TW/pwa';
+import component from './zh-TW/component';
 
 export default {
   'navBar.lang': '語言',
@@ -30,4 +31,5 @@ export default {
   ...settingDrawer,
   ...settings,
   ...pwa,
+  ...component,
 };

src/locales/zh-TW/component.js

@@ -0,0 +1,5 @@
+export default {
+  'component.tagSelect.expand': '展開',
+  'component.tagSelect.collapse': '收起',
+  'component.tagSelect.all': '全部',
+};

src/pages/List/Applications.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import numeral from 'numeral';
 import { connect } from 'dva';
+import { FormattedMessage } from 'umi/locale';
 import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Dropdown, Menu } from 'antd';
 import TagSelect from '@/components/TagSelect';
 import StandardFormRow from '@/components/StandardFormRow';
@@ -69,6 +70,14 @@ class FilterCardList extends PureComponent {
       },
     };
 
+    const actionsTextMap = {
+      expandText: <FormattedMessage id="component.tagSelect.expand" defaultMessage="Expand" />,
+      collapseText: (
+        <FormattedMessage id="component.tagSelect.collapse" defaultMessage="Collapse" />
+      ),
+      selectAllText: <FormattedMessage id="component.tagSelect.all" defaultMessage="All" />,
+    };
+
     const itemMenu = (
       <Menu>
         <Menu.Item>
@@ -96,7 +105,7 @@ class FilterCardList extends PureComponent {
             <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
               <FormItem>
                 {getFieldDecorator('category')(
-                  <TagSelect expandable>
+                  <TagSelect expandable actionsText={actionsTextMap}>
                     <TagSelect.Option value="cat1">类目一</TagSelect.Option>
                     <TagSelect.Option value="cat2">类目二</TagSelect.Option>
                     <TagSelect.Option value="cat3">类目三</TagSelect.Option>

src/pages/List/Articles.js

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { connect } from 'dva';
 import { Form, Card, Select, List, Tag, Icon, Row, Col, Button } from 'antd';
+import { FormattedMessage } from 'umi/locale';
 
 import TagSelect from '@/components/TagSelect';
 import StandardFormRow from '@/components/StandardFormRow';
@@ -104,6 +105,14 @@ class SearchList extends Component {
       },
     };
 
+    const actionsTextMap = {
+      expandText: <FormattedMessage id="component.tagSelect.expand" defaultMessage="Expand" />,
+      collapseText: (
+        <FormattedMessage id="component.tagSelect.collapse" defaultMessage="Collapse" />
+      ),
+      selectAllText: <FormattedMessage id="component.tagSelect.all" defaultMessage="All" />,
+    };
+
     const loadMore =
       list.length > 0 ? (
         <div style={{ textAlign: 'center', marginTop: 16 }}>
@@ -126,7 +135,7 @@ class SearchList extends Component {
             <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
               <FormItem>
                 {getFieldDecorator('category')(
-                  <TagSelect expandable>
+                  <TagSelect expandable actionsText={actionsTextMap}>
                     <TagSelect.Option value="cat1">类目一</TagSelect.Option>
                     <TagSelect.Option value="cat2">类目二</TagSelect.Option>
                     <TagSelect.Option value="cat3">类目三</TagSelect.Option>

src/pages/List/Projects.js

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import moment from 'moment';
 import { connect } from 'dva';
 import { Row, Col, Form, Card, Select, List } from 'antd';
+import { FormattedMessage } from 'umi/locale';
 
 import TagSelect from '@/components/TagSelect';
 import AvatarList from '@/components/AvatarList';
@@ -96,6 +97,14 @@ class CoverCardList extends PureComponent {
       },
     };
 
+    const actionsTextMap = {
+      expandText: <FormattedMessage id="component.tagSelect.expand" defaultMessage="Expand" />,
+      collapseText: (
+        <FormattedMessage id="component.tagSelect.collapse" defaultMessage="Collapse" />
+      ),
+      selectAllText: <FormattedMessage id="component.tagSelect.all" defaultMessage="All" />,
+    };
+
     return (
       <div className={styles.coverCardList}>
         <Card bordered={false}>
@@ -103,7 +112,7 @@ class CoverCardList extends PureComponent {
             <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
               <FormItem>
                 {getFieldDecorator('category')(
-                  <TagSelect expandable>
+                  <TagSelect expandable actionsText={actionsTextMap}>
                     <TagSelect.Option value="cat1">类目一</TagSelect.Option>
                     <TagSelect.Option value="cat2">类目二</TagSelect.Option>
                     <TagSelect.Option value="cat3">类目三</TagSelect.Option>