优化字典 select 和 text

admin-web/src/components/Dictionary/DictionaryContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+// 字典全局的 Context，会提前初始化工作。
+const DictionaryContext = React.createContext({});
+
+export default DictionaryContext;

admin-web/src/components/Dictionary/DictionarySelect.d.ts

@@ -1,13 +1,9 @@
 import * as React from 'react';
 import { Select } from 'antd';
 
-export interface DictionaryObject {
-  text?: string;
-  value?: string | number | boolean;
-}
-
 export interface IDictionarySelectProps extends Select {
-  list?: DictionaryObject[];
+  dicKey?: string;
+  defaultValue?: string | number | boolean;
 }
 
 export default class DictionarySelectD extends React.Component<IDictionarySelectProps, any> {}

admin-web/src/components/Dictionary/DictionarySelect.js

@@ -1,20 +1,32 @@
 import React, { PureComponent } from 'react';
 import { Select } from 'antd';
+import DictionaryContext from './DictionaryContext';
 
 export default class DictionarySelect extends PureComponent {
-  renderOptions() {
-    const { list } = this.props;
-    return list.map(item => {
-      return (
-        <Select.Option key={item.value} value={item.value}>
-          {item.text}
-        </Select.Option>
-      );
-    });
+  renderSelect(children) {
+    return <Select {...this.props}>{children}</Select>;
   }
 
   render() {
-    const options = this.renderOptions();
-    return <Select {...this.props}>{options}</Select>;
+    const { dicKey } = this.props;
+    return (
+      <DictionaryContext.Consumer>
+        {context => {
+          const dicValues = context[dicKey];
+          let nodes = [];
+          if (dicValues) {
+            nodes = Object.keys(dicValues).map(value => {
+              const text = dicValues[value];
+              return (
+                <Select.Option key={value} value={value}>
+                  {text}
+                </Select.Option>
+              );
+            });
+          }
+          return this.renderSelect(nodes);
+        }}
+      </DictionaryContext.Consumer>
+    );
   }
 }

admin-web/src/components/Dictionary/DictionarySelect.md

@@ -7,18 +7,15 @@ subtitle: 描述列表
 
 ## API
 
-### DescriptionList
+### DictionarySelect
 
 | 参数      | 说明                                      | 类型         | 默认值 |
 |----------|------------------------------------------|-------------|-------|
-| list    | 数据列表                                 | DictionObject[]  | [] |
-
-### DictionObject
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| text     | 显示的文字                                 | string  | - |
-| value     | 选择后的值                                 | string number boolean  | - |
-
+| dicKey    | 字典key值                                 | string[]  | [] |
+| defaultValue    | 来自 antd Select组件             | string、number、boolean  | [] |
 
+### Demo
+```jsx harmony
+  <DictionarySelect dicKey="gender" defaultValue="1" />
+```
 

admin-web/src/components/Dictionary/DictionaryText.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Select } from 'antd';
+
+export interface IDictionaryTextProps extends Select {
+  dicKey?: string;
+  dicValue?: string | number | boolean | Array<string | number | boolean>;
+}
+
+export default class DictionaryText extends React.Component<IDictionaryTextProps, any> {}

admin-web/src/components/Dictionary/DictionaryText.js

@@ -0,0 +1,21 @@
+import React, { PureComponent } from 'react';
+import DictionaryContext from './DictionaryContext';
+
+export default class DictionaryText extends PureComponent {
+  componentDidMount() {}
+
+  render() {
+    const { dicKey, dicValue } = this.props;
+    return (
+      <DictionaryContext.Consumer>
+        {context => {
+          const dicValues = context[dicKey];
+          if (dicValues) {
+            return dicValues[dicValue];
+          }
+          return null;
+        }}
+      </DictionaryContext.Consumer>
+    );
+  }
+}

admin-web/src/components/Dictionary/DictionaryText.md

@@ -0,0 +1,19 @@
+---
+title: DictionaryText
+subtitle: 获取字典 value 显示值
+---
+
+## API
+
+### DescriptionList
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| dicKey    | 字典的key                                 | string  | [] |
+| dicValue    | value值                                 | string、number、boolean  | [] |
+
+
+### Demo
+```jsx harmony
+  <DictionaryValueText dicKey="gender" dicValue="2"/>
+```