feat: add renderIcon for steps close #136

ant-design · Dec 12, 2018 · 8ae663c · 8ae663c
1 parent 96c5f97
commit 8ae663c
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 68 deletions.
diff --git a/components/steps/StepsItem.tsx b/components/steps/StepsItem.tsx
@@ -3,20 +3,25 @@ import React from 'react';
 import { StyleProp, Text, View, ViewStyle } from 'react-native';
 import Icon from '../icon';
 import { WithTheme } from '../style';
-
+export interface RenderIconParams {
+  starting: boolean;
+  waiting: boolean;
+  error: boolean;
+}
 export interface StepsItemProps {
   width?: number;
   size?: string;
   current?: number;
   index?: number;
   last?: boolean;
   direction?: string;
-  title?: string;
-  description?: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
   status?: string;
-  icon?: string;
+  icon?: React.ReactNode;
   errorTail?: number;
   styles?: any;
+  renderIcon?: (params: RenderIconParams) => React.ReactNode;
 }
 
 export default class StepsItem extends React.Component<StepsItemProps, any> {
@@ -30,11 +35,19 @@ export default class StepsItem extends React.Component<StepsItemProps, any> {
       status,
       icon,
       styles,
+      renderIcon,
     } = this.props;
 
     const index = this.props.index as number;
     const current = this.props.current as number;
     const errorTail = this.props.errorTail as number;
+    const starting =
+      index < current ||
+      status === 'finish' ||
+      index === current ||
+      status === 'process';
+    const waiting = index > current || status === 'wait';
+    const error = status === 'error';
     return (
       <WithTheme>
         {(_, theme) => {
@@ -72,52 +85,18 @@ export default class StepsItem extends React.Component<StepsItemProps, any> {
           }
 
           let iconSource;
-          if (size === 'small') {
-            if (
-              index < current ||
-              status === 'finish' ||
-              index === current ||
-              status === 'process'
-            ) {
-              iconSource = (
-                <Icon
-                  name="check"
-                  color={theme.brand_primary}
-                  style={styles[`icon${sizeCls}`]}
-                />
-              );
-            } else if (index > current || status === 'wait') {
-              iconSource = (
-                <Icon
-                  name="ellipsis"
-                  color={theme.color_icon_base}
-                  style={styles[`icon${sizeCls}`]}
-                />
-              );
-            } else if (status === 'error') {
-              iconSource = (
-                <Icon
-                  name="close"
-                  color={theme.brand_error}
-                  style={styles[`icon${sizeCls}`]}
-                />
-              );
-            }
+          if (renderIcon) {
+            iconSource = renderIcon({ starting, waiting, error });
           } else {
-            if (
-              index < current ||
-              status === 'finish' ||
-              index === current ||
-              status === 'process'
-            ) {
+            if (starting) {
               iconSource = (
                 <Icon
                   name="check"
                   color={theme.color_icon_base}
                   style={styles[`icon${sizeCls}`]}
                 />
               );
-            } else if (index > current || status === 'wait') {
+            } else if (waiting) {
               iconSource = (
                 <Icon
                   name="ellipsis"
@@ -128,7 +107,7 @@ export default class StepsItem extends React.Component<StepsItemProps, any> {
               if (!!icon) {
                 iconSource = icon;
               }
-            } else if (status === 'error') {
+            } else if (error) {
               iconSource = (
                 <Icon
                   name="close"

diff --git a/components/steps/demo/basic.tsx b/components/steps/demo/basic.tsx
@@ -1,4 +1,3 @@
-
 import React from 'react';
 import { ScrollView, Text, View } from 'react-native';
 import { Icon, Steps, WingBlank } from '../../';
@@ -151,6 +150,80 @@ export default class BasicTimelineExample extends React.Component<any, any> {
             </Steps>
           </WingBlank>
         </View>
+        <View>
+          <WingBlank size="lg">
+            <Steps current={1}>
+              <Step
+                key={0}
+                title="Finished"
+                description="This is description"
+                status="finish"
+                renderIcon={({ starting, waiting, error }) => {
+                  let icon;
+                  if (starting) {
+                    icon = <Icon name="home" />;
+                  } else if (waiting) {
+                    icon = <Icon name="user" />;
+                  } else if (error) {
+                    icon = <Icon name="star" />;
+                  }
+                  return icon;
+                }}
+              />
+              <Step
+                key={1}
+                title="Progress"
+                description="This is description"
+                status="progress"
+                renderIcon={({ starting, waiting, error }) => {
+                  let icon;
+                  if (starting) {
+                    icon = <Icon name="home" />;
+                  } else if (waiting) {
+                    icon = <Icon name="user" />;
+                  } else if (error) {
+                    icon = <Icon name="star" />;
+                  }
+                  return icon;
+                }}
+              />
+              <Step
+                key={2}
+                title="Wait"
+                description="This is description"
+                status="wait"
+                renderIcon={({ starting, waiting, error }) => {
+                  let icon;
+                  if (starting) {
+                    icon = <Icon name="home" />;
+                  } else if (waiting) {
+                    icon = <Icon name="user" />;
+                  } else if (error) {
+                    icon = <Icon name="star" />;
+                  }
+                  return icon;
+                }}
+              />
+              <Step
+                key={3}
+                title="Wait"
+                description="This is description"
+                status="error"
+                renderIcon={({ starting, waiting, error }) => {
+                  let icon;
+                  if (starting) {
+                    icon = <Icon name="home" />;
+                  } else if (waiting) {
+                    icon = <Icon name="user" />;
+                  } else if (error) {
+                    icon = <Icon name="star" />;
+                  }
+                  return icon;
+                }}
+              />
+            </Steps>
+          </WingBlank>
+        </View>
       </ScrollView>
     );
   }

diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md
@@ -27,19 +27,20 @@ Steps is typically used for displaying the progress of a task, or guiding users
 
 The Steps container.
 
-Properties | Descrition | Type | Default
------------|------------|------|--------
-| current | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | `0` |
-| size | To specify the size of the step bar, a smaller size can be achieved by setting it to `small` | string | - |
-| direction | To specify the direction of the step bar(now only support `vertical` for react-native)   | Enum { 'vertical', 'horizontal' }  | `vertical`  |
+| Properties | Descrition                                                                                         | Type                              | Default    |
+| ---------- | -------------------------------------------------------------------------------------------------- | --------------------------------- | ---------- |
+| current    | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number                            | `0`        |
+| size       | To specify the size of the step bar, a smaller size can be achieved by setting it to `small`       | string                            | -          |
+| direction  | To specify the direction of the step bar(now only support `vertical` for react-native)             | Enum { 'vertical', 'horizontal' } | `vertical` |
 
 ### Steps.Step
 
 A single step used as child component of the Step.
 
-Properties | Descrition | Type | Default
------------|------------|------|--------
-| status | To specify the status. It will be automatically set by `current` of `Steps` if not configured. | Enum { 'wait', 'process', 'finish', 'error' } | `wait` |
-| title | Title of the step | React.Element | -     |
-| description | Detail of the step(optional property) | React.Element | -  |
-| icon | Icon of the step(optional property) | object/React.Element | - |
+| Properties  | Descrition                                                                                     | Type                                                                                  | Default |
+| ----------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------- |
+| status      | To specify the status. It will be automatically set by `current` of `Steps` if not configured. | Enum { 'wait', 'process', 'finish', 'error' }                                         | `wait`  |
+| title       | Title of the step                                                                              | React.Element                                                                         | -       |
+| description | Detail of the step(optional property)                                                          | React.Element                                                                         | -       |
+| icon        | Icon of the step(optional property)                                                            | object/React.Element                                                                  | -       |
+| renderIcon  | customize step icon(optional)                                                                  | (params: { starting: boolean; waiting: boolean; error: boolean; }) => React.ReactNode | -       |
diff --git a/components/steps/index.tsx b/components/steps/index.tsx
@@ -14,7 +14,7 @@ export interface StepsProps extends WithThemeStyles<StepsStyle> {
 }
 
 export default class Steps extends React.Component<StepsProps, any> {
-  static Step: any;
+  static Step: typeof StepsItem;
 
   static defaultProps = {
     direction: '',

diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md
@@ -27,20 +27,21 @@ subtitle: 步骤条
 
 整体步骤条。
 
-属性 | 说明 | 类型 | 默认值
-----|-----|------|------
-| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |
-| size | 尺寸，支持设置小尺寸`small` | string | - |
-| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` |
-| direction | step 样式( RN 目前只支持 vertical )   |  Enum { 'vertical', 'horizontal' } | `vertical`  |
+| 属性      | 说明                                                                          | 类型                              | 默认值     |
+| --------- | ----------------------------------------------------------------------------- | --------------------------------- | ---------- |
+| current   | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number                            | 0          |
+| size      | 尺寸，支持设置小尺寸`small`                                                   | string                            | -          |
+| status    | 指定当前步骤的状态，可选 `wait` `process` `finish` `error`                    | string                            | `process`  |
+| direction | step 样式( RN 目前只支持 vertical )                                           | Enum { 'vertical', 'horizontal' } | `vertical` |
 
 ### Steps.Step
 
 步骤条内的每一个步骤。
 
-属性 | 说明 | 类型 | 默认值
-----|-----|------|------
-| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。 | Enum { 'wait', 'process', 'finish', 'error' } | `wait` |
-| title | 标题 | React.Element | -     |
-| description | 步骤的详情描述，可选 | React.Element | -  |
-| icon | 步骤图标，可选 | object/React.Element | - |
+| 属性        | 说明                                                                   | 类型                                                                                  | 默认值 |
+| ----------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------ |
+| status      | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。 | Enum { 'wait', 'process', 'finish', 'error' }                                         | `wait` |
+| title       | 标题                                                                   | React.Element                                                                         | -      |
+| description | 步骤的详情描述，可选                                                   | React.Element                                                                         | -      |
+| icon        | 步骤图标，可选                                                         | object/React.Element                                                                  | -      |
+| renderIcon  | 自定义步骤图标，可选                                                   | (params: { starting: boolean; waiting: boolean; error: boolean; }) => React.ReactNode | -      |