feat: 增加 Radio.Button 组件

mallex · Dec 3, 2018 · 0bc2ce5 · 0bc2ce5
1 parent 253ed68
commit 0bc2ce5
Show file tree

Hide file tree

Showing 12 changed files with 253 additions and 44 deletions.
diff --git a/components/checkbox/CheckboxButton.js b/components/checkbox/CheckboxButton.js
@@ -2,7 +2,10 @@ import React, { PureComponent } from "react";
 import Checkbox from "./Checkbox";
 
 export default class CheckboxButton extends PureComponent {
+  static defaultProps = {
+    isButton: true
+  };
   render() {
-    return <Checkbox {...this.props} isButton />;
+    return <Checkbox {...this.props} />;
   }
 }
diff --git a/components/checkbox/styles.less b/components/checkbox/styles.less
@@ -1,5 +1,4 @@
 @import "../styles/vars.less";
-
 @prefixCls : cuke-checkbox;
 @buttonPrefixCls: cuke-checkbox-button;
 .@{prefixCls} {
@@ -10,14 +9,31 @@
   line-height: 1;
   vertical-align: sub;
   white-space: nowrap;
-
   &-group {
-
     .@{prefixCls}-wrapper {
       margin-right: @cuke-checkbox-group-offset-right;
     }
+    .@{buttonPrefixCls}-wrapper {
+      border: 1px solid @border-color;
+      padding: @cuke-checkbox-button-padding;
+      border-radius: 0 !important;
+      margin: 0;
+      &:first-child {
+        border-top-left-radius: @border-radius !important;
+        border-bottom-left-radius: @border-radius !important;
+      }
+      &:last-child {
+        border-bottom-right-radius: @border-radius !important;
+        border-top-right-radius: @border-radius !important;
+      }
+      & + .@{buttonPrefixCls}-wrapper {
+        border-left: 1px solid transparent;
+      }
+      &.@{prefixCls}-disabled:not(:first-child) {
+        border-left: 1px solid transparent !important;
+      }
+    }
   }
-
   &-input {
     box-sizing: border-box;
     padding: 0;
@@ -29,40 +45,34 @@
     opacity: 0;
     z-index: 1;
   }
-
   &.@{prefixCls}-disabled {
     cursor: not-allowed;
   }
-
   &-disabled {
     .@{prefixCls}-inner {
-      border-color: @border-color !important;
-      background-color: @disabled-color !important;
+      border-color: @border-color  !important;
+      background-color: @disabled-color  !important;
       &::after {
         border-color: @disabled-color;
       }
     }
     .@{prefixCls}-input {
       cursor: not-allowed;
     }
-
-    & + span {
+    & +span {
       cursor: not-allowed;
       color: @disabled-font-color;
     }
   }
-
   &-checked {
     .@{prefixCls}-inner {
       border-color: @primary-color;
       background-color: @primary-color;
       &::after {
-        transform: rotate(45deg) scale(1);
-        //勾√ 晚一点出现
+        transform: rotate(45deg) scale(1); //勾√ 晚一点出现
         transition: all .2s @animate-type .1s;
       }
     }
-
     &.@{prefixCls}-disabled {
       .@{prefixCls}-inner {
         &::after {
@@ -71,7 +81,6 @@
       }
     }
   }
-
   &-inner {
     display: inline-block;
     width: @cuke-checkbox-width;
@@ -83,7 +92,6 @@
     left: 0;
     top: 0;
     border-radius: @border-radius - 2px;
-
     &::after {
       //画一个矩形 旋转45° 形成一个 √
       transform: rotate(45deg) scale(0);
@@ -100,7 +108,6 @@
       transition: all .1s cubic-bezier(.71, -0.46, .88, .6);
     }
   }
-
   &-indeterminate {
     .@{prefixCls}-inner {
       border-color: @primary-color;
@@ -124,27 +131,32 @@
   cursor: pointer;
   user-select: none;
   transition: all @default-transition;
-
   &.@{prefixCls}-disabled {
     cursor: not-allowed;
   }
-
   &.@{buttonPrefixCls}-wrapper {
     border: 1px solid @border-color;
     padding: @cuke-checkbox-button-padding;
     border-radius: @border-radius;
-
+    margin: 0;
     .@{prefixCls} {
       display: none;
+      & +.@{prefixCls} {
+        margin: 0;
+      }
     }
     &.@{prefixCls}-checked {
       background-color: @primary-color;
       border-color: @primary-color;
       color: #fff;
+      & +.@{prefixCls}-checked {
+        border-left: 1px solid fade(@border-color, 70%);
+      }
     }
     &.@{prefixCls}-disabled {
       background-color: @disabled-color;
       color: @disabled-font-color;
+      border-color: @border-color;
     }
   }
 }
diff --git a/components/radio/Radio.js b/components/radio/Radio.js
@@ -48,18 +48,25 @@ export default class Radio extends PureComponent {
       className,
       children,
       disabled,
+      isButton,
       onChange, //eslint-disable-line
       ...attr
     } = this.props;
 
     const { checked } = this.state;
 
     return (
-      <label className={cls(`${prefixCls}-wrapper`)} {...attr}>
+      <label
+        className={cls(`${prefixCls}-wrapper`, {
+          [`${prefixCls}-button-wrapper`]: isButton,
+          [`${prefixCls}-checked`]: checked,
+          [`${prefixCls}-disabled`]: disabled
+        })}
+        {...attr}
+      >
         <span
           className={cls(prefixCls, className, {
-            [`${prefixCls}-checked`]: checked,
-            [`${prefixCls}-disabled`]: disabled
+            [`${prefixCls}-button`]: isButton
           })}
         >
           <input

diff --git a/components/radio/RadioButton.js b/components/radio/RadioButton.js
@@ -0,0 +1,11 @@
+import React, { PureComponent } from "react";
+import Radio from "./Radio";
+
+export default class RadioButton extends PureComponent {
+  static defaultProps = {
+    isButton: true
+  };
+  render() {
+    return <Radio {...this.props} />;
+  }
+}
diff --git a/components/radio/__tests__/__snapshots__/index.test.js.snap b/components/radio/__tests__/__snapshots__/index.test.js.snap
@@ -21,10 +21,10 @@ exports[`<Radio/> should render Radio 1`] = `
     </span>
   </label>
   <label
-    class="cuke-radio-wrapper"
+    class="cuke-radio-wrapper cuke-radio-disabled"
   >
     <span
-      class="cuke-radio cuke-radio-disabled"
+      class="cuke-radio"
     >
       <input
         class="cuke-radio-input"
@@ -41,10 +41,77 @@ exports[`<Radio/> should render Radio 1`] = `
   </label>
   <label
     checked=""
-    class="cuke-radio-wrapper"
+    class="cuke-radio-wrapper cuke-radio-checked cuke-radio-disabled"
   >
     <span
-      class="cuke-radio cuke-radio-checked cuke-radio-disabled"
+      class="cuke-radio"
+    >
+      <input
+        checked=""
+        class="cuke-radio-input"
+        disabled=""
+        type="radio"
+      />
+      <span
+        class="cuke-radio-inner"
+      />
+    </span>
+    <span />
+  </label>
+</div>
+`;
+
+exports[`<Radio/> should render Radio.Button 1`] = `
+<div
+  class="cuke-radio-group"
+>
+  <label
+    checked=""
+    class="cuke-radio-wrapper cuke-radio-button-wrapper cuke-radio-checked"
+  >
+    <span
+      class="cuke-radio cuke-radio-button"
+    >
+      <input
+        checked=""
+        class="cuke-radio-input"
+        type="radio"
+      />
+      <span
+        class="cuke-radio-inner"
+      />
+    </span>
+    <span>
+      黄瓜 ui
+    </span>
+  </label>
+  <label
+    checked=""
+    class="cuke-radio-wrapper cuke-radio-button-wrapper cuke-radio-checked cuke-radio-disabled"
+  >
+    <span
+      class="cuke-radio cuke-radio-button"
+    >
+      <input
+        checked=""
+        class="cuke-radio-input"
+        disabled=""
+        type="radio"
+      />
+      <span
+        class="cuke-radio-inner"
+      />
+    </span>
+    <span>
+      黄瓜 ui
+    </span>
+  </label>
+  <label
+    checked=""
+    class="cuke-radio-wrapper cuke-radio-button-wrapper cuke-radio-checked cuke-radio-disabled"
+  >
+    <span
+      class="cuke-radio cuke-radio-button"
     >
       <input
         checked=""
@@ -69,10 +136,10 @@ exports[`<Radio/> should render RadioGroup 1`] = `
   >
     <label
       checked=""
-      class="cuke-radio-wrapper"
+      class="cuke-radio-wrapper cuke-radio-checked"
     >
       <span
-        class="cuke-radio cuke-radio-checked"
+        class="cuke-radio"
       >
         <input
           checked=""
@@ -146,10 +213,10 @@ exports[`<Radio/> should render RadioGroup 1`] = `
       </span>
     </label>
     <label
-      class="cuke-radio-wrapper"
+      class="cuke-radio-wrapper cuke-radio-disabled"
     >
       <span
-        class="cuke-radio cuke-radio-disabled"
+        class="cuke-radio"
       >
         <input
           class="cuke-radio-input"

diff --git a/components/radio/__tests__/index.test.js b/components/radio/__tests__/index.test.js
@@ -15,7 +15,16 @@ describe("<Radio/>", () => {
     );
     expect(toJson(wrapper)).toMatchSnapshot();
   });
-
+  it("should render Radio.Button", () => {
+    const wrapper = render(
+      <Radio.Group>
+        <Radio.Button>黄瓜 ui</Radio.Button>
+        <Radio.Button disabled>黄瓜 ui</Radio.Button>
+        <Radio.Button checked disabled />
+      </Radio.Group>
+    );
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
   it("should render RadioGroup", () => {
     const wrapper = render(
       <div>

diff --git a/components/radio/index.js b/components/radio/index.js
@@ -1,6 +1,8 @@
 import Radio from "./Radio";
 import RadioGroup from "./RadioGroup";
+import RadioButton from "./RadioButton";
 
 Radio.Group = RadioGroup;
+Radio.Button = RadioButton;
 
 export default Radio;