feat(Switch): add color prop for switch, for tinyapp

ant-design · Jul 5, 2017 · 284b825 · 284b825
1 parent 40d1446
commit 284b825
Show file tree

Hide file tree

Showing 11 changed files with 224 additions and 6 deletions.
diff --git a/components/progress/index.web.tsx b/components/progress/index.web.tsx
@@ -35,7 +35,7 @@ export default class Progress extends React.Component<ProgressProps, any> {
       [`${prefixCls}-fixed-outer`]: position === 'fixed',
       [`${prefixCls}-hide-outer`]: unfilled === 'hide',
     });
-    // TODO 2.0 整理 style， api 变更 style, barStyle, remove wrapStyle(不添入文档， for tiny)
+
     return (
       <div
         style={style}

diff --git a/components/switch/PropsType.tsx b/components/switch/PropsType.tsx
@@ -3,6 +3,7 @@ interface SwitchProps {
   checked?: boolean;
   disabled?: boolean;
   onChange?: (checked: boolean) => void;
+  color?: string;
   /* web only */
   prefixCls?: string;
   className?: string;

diff --git a/components/switch/__tests__/__snapshots__/demo.test.js.snap b/components/switch/__tests__/__snapshots__/demo.test.js.snap
@@ -110,6 +110,7 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
             onChange={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            onTintColor="#4dd865"
             onValueChange={[Function]}
             style={
               Array [
@@ -218,6 +219,7 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
             onChange={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            onTintColor="#4dd865"
             onValueChange={[Function]}
             style={
               Array [
@@ -344,6 +346,7 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
             onChange={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            onTintColor="#4dd865"
             onValueChange={[Function]}
             style={
               Array [
@@ -452,6 +455,7 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
             onChange={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            onTintColor="#4dd865"
             onValueChange={[Function]}
             style={
               Array [
@@ -467,6 +471,115 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
         </View>
       </View>
     </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hasTVPreferredFocus={undefined}
+      hitSlop={undefined}
+      isTVSelectable={true}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+      tvParallaxProperties={undefined}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#fff",
+              "flexDirection": "row",
+              "flexGrow": 1,
+              "paddingLeft": 15,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "borderBottomColor": "#ddd",
+                "borderBottomWidth": 0.5,
+                "flex": 1,
+                "flexDirection": "row",
+                "minHeight": 44,
+                "paddingBottom": 6,
+                "paddingRight": 15,
+                "paddingTop": 6,
+              },
+              false,
+              false,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "flexDirection": "column",
+                },
+              ]
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 17,
+                    "lineHeight": 19,
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+            >
+              color
+            </Text>
+          </View>
+          <RCTSwitch
+            disabled={false}
+            onChange={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            onTintColor="red"
+            onValueChange={[Function]}
+            style={
+              Array [
+                Object {
+                  "height": 31,
+                  "width": 51,
+                },
+                undefined,
+              ]
+            }
+            value={true}
+          />
+        </View>
+      </View>
+    </View>
     <View
       style={
         Array [

diff --git a/components/switch/__tests__/__snapshots__/demo.test.web.js.snap b/components/switch/__tests__/__snapshots__/demo.test.web.js.snap
@@ -170,10 +170,11 @@ exports[`renders ./components/switch/demo/basic.md correctly 1`] = `
             class="am-switch am-switch-android"
           >
             <input
+              checked=""
               class="am-switch-checkbox"
               name=""
               type="checkbox"
-              value="off"
+              value="on"
             />
             <div
               class="checkbox"
@@ -186,6 +187,42 @@ exports[`renders ./components/switch/demo/basic.md correctly 1`] = `
         style="display:none;"
       />
     </div>
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          Color for Android
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          <label
+            class="am-switch am-switch-android"
+          >
+            <input
+              checked=""
+              class="am-switch-checkbox"
+              name=""
+              type="checkbox"
+              value="on"
+            />
+            <div
+              class="checkbox"
+              style="background-color:red;"
+            />
+          </label>
+        </div>
+      </div>
+      <div
+        class="am-list-ripple"
+        style="display:none;"
+      />
+    </div>
     <div
       class="am-list-item am-list-item-middle"
     >
@@ -221,6 +258,42 @@ exports[`renders ./components/switch/demo/basic.md correctly 1`] = `
         style="display:none;"
       />
     </div>
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          Color for iOS
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          <label
+            class="am-switch"
+          >
+            <input
+              checked=""
+              class="am-switch-checkbox"
+              name=""
+              type="checkbox"
+              value="on"
+            />
+            <div
+              class="checkbox"
+              style="background-color:red;"
+            />
+          </label>
+        </div>
+      </div>
+      <div
+        class="am-list-ripple"
+        style="display:none;"
+      />
+    </div>
   </div>
 </div>
 `;
diff --git a/components/switch/__tests__/__snapshots__/index.test.js.snap b/components/switch/__tests__/__snapshots__/index.test.js.snap
@@ -6,6 +6,7 @@ exports[`Switch renders correctly 1`] = `
   onChange={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTintColor="#4dd865"
   onValueChange={[Function]}
   style={
     Array [

diff --git a/components/switch/demo/basic.md b/components/switch/demo/basic.md
@@ -58,7 +58,7 @@ let SwitchExample = (props) => {
       <List.Item
         extra={<Switch
           {...getFieldProps('Switch5', {
-            initialValue: false,
+            initialValue: true,
             valuePropName: 'checked',
           })}
           platform="android"
@@ -70,9 +70,29 @@ let SwitchExample = (props) => {
             initialValue: true,
             valuePropName: 'checked',
           })}
+          platform="android"
+          color="red"
+        />}
+      >Color for Android</List.Item>
+      <List.Item
+        extra={<Switch
+          {...getFieldProps('Switch7', {
+            initialValue: true,
+            valuePropName: 'checked',
+          })}
           platform="ios"
         />}
       >Style for iOS</List.Item>
+      <List.Item
+        extra={<Switch
+          {...getFieldProps('Switch8', {
+            initialValue: true,
+            valuePropName: 'checked',
+          })}
+          platform="ios"
+          color="red"
+        />}
+      >Color for iOS</List.Item>
     </List>
   );
 };

diff --git a/components/switch/demo/basic.tsx b/components/switch/demo/basic.tsx
@@ -23,6 +23,7 @@ export default class SwitchExample extends React.Component<any, any> {
           onChange event, switch status: {this.state.checked ? 'open' : 'close'}
         </List.Item>
         <List.Item extra={<Switch disabled />}>disabled</List.Item>
+        <List.Item extra={<Switch color="red" checked />}>color</List.Item>
       </List>
     );
   }

diff --git a/components/switch/index.en-US.md b/components/switch/index.en-US.md
@@ -21,6 +21,7 @@ Properties | Descrition | Type | Default
 -----------|------------|------|--------
 | checked    | Whether is checked by default    | Boolean       |   false  |
 | disabled   | whether is disabled    | Boolean       |   false  |
+| color | Background color when the switch is turned on. | String | #4dd865 |
 | onChange   | The callback function that is triggered when the selected state changes. | (checked: bool): void |  -  |
 | name(`web only`)  | name of `switch`    | String   |      |
 | platform (`web only`) |  set the special style depends on platform, Options  `android`, `ios`， default to be `cross`， which means we will detect UA and change the component style | String | `'cross'`|
diff --git a/components/switch/index.tsx b/components/switch/index.tsx
@@ -8,6 +8,7 @@ export default class AntmSwitch extends React.Component<SwitchProps, any> {
     checked: false,
     disabled: false,
     onChange() {},
+    color: '#4dd865',
   };
 
   onChange(value) {
@@ -17,14 +18,15 @@ export default class AntmSwitch extends React.Component<SwitchProps, any> {
   }
 
   render() {
-    let { style, disabled, checked } = this.props;
+    let { style, disabled, color, checked } = this.props;
 
     return (
       <Switch
         style={style}
         onValueChange={(value) => {this.onChange(value); }}
         value={checked}
         disabled={disabled}
+        onTintColor={color}
       />
     );
   }

diff --git a/components/switch/index.web.tsx b/components/switch/index.web.tsx
@@ -33,7 +33,7 @@ export default class Switch extends React.Component<SwitchProps, any> {
   }
 
   render() {
-    let { prefixCls, style, name, checked, disabled, className, platform, ...restProps } = this.props;
+    let { prefixCls, name, checked, disabled, className, platform, color, ...restProps } = this.props;
     const isAndroid = platform === 'android' ||
       (platform === 'cross' && typeof navigator !== 'undefined' && !!navigator.userAgent.match(/Android/i));
     const wrapCls = classNames({
@@ -54,6 +54,11 @@ export default class Switch extends React.Component<SwitchProps, any> {
       return prev;
     }, {});
 
+    const style: any = this.props.style || {};
+    if (color && checked) {
+      style.backgroundColor = color;
+    }
+
     return (<label className={wrapCls}>
         <input
           type="checkbox"

diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md
@@ -22,6 +22,7 @@ subtitle: 滑动开关
 | checked    | 是否默认选中    | Boolean       |   false  |
 | disabled   | 是否不可修改    | Boolean       |   false  |
 | onChange   | change 事件触发的回调函数 | (checked: bool): void |  无  |
+| color | 开关打开后的颜色 | String | #4dd865 |
 | name(`web only`)  | switch 的 name    | String   |      |
 | platform (`web only`) |  设定组件的平台特有样式, 可选值为 `android`, `ios`， 默认为 `cross`， 即组件会自动检测设备 UA 应用不同平台的样式    | String | `'cross'`|
-| onClick   | click事件触发的回调函数，当switch为disabled时，入参的值始终是默认传入的checked值。 | (checked: bool): void |  无  |
+| onClick   | click事件触发的回调函数，当switch为disabled时，入参的值始终是默认传入的checked值。 | (checked: bool): void |  无  |