feat: CheckBox 和 Radio 新增 size 属性

mallex · Dec 5, 2018 · 1e21e53 · 1e21e53
1 parent 6c7cc8a
commit 1e21e53
Show file tree

Hide file tree

Showing 25 changed files with 349 additions and 95 deletions.
diff --git a/README.md b/README.md
@@ -96,8 +96,8 @@ class Page extends React.Component {
 > 2 .按需引入
 
 ```js
-import Button from 'cuke-ui/lib/Button';
-import 'cuke-ui/lib/Button/style.less';
+import Button from 'cuke-ui/lib/button';
+import 'cuke-ui/lib/button/style.less';
 ```
 
 > 3. 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
@@ -189,7 +189,7 @@ module.exports = {
 - [x] [Popover  气泡卡片](https://cuke-ui.github.io/cuke-ui/?selectedKind=%E6%95%B0%E6%8D%AE%E5%B1%95%E7%A4%BA&selectedStory=Popover%20%E6%B0%94%E6%B3%A1%E5%8D%A1%E7%89%87&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
 - [x] [PopConfirm  气泡确认框](https://cuke-ui.github.io/cuke-ui/?selectedKind=%E6%95%B0%E6%8D%AE%E5%B1%95%E7%A4%BA&selectedStory=Popconfirm%20%E6%B0%94%E6%B3%A1%E7%A1%AE%E8%AE%A4%E6%A1%86&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
 - [x] [Card 卡片](https://cuke-ui.github.io/cuke-ui/?selectedKind=%E6%95%B0%E6%8D%AE%E5%B1%95%E7%A4%BA&selectedStory=Card%20%E5%8D%A1%E7%89%87&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
-- [ ] [Form 表单]()
+<!-- - [ ] [Form 表单]() -->
 
 ### 设计规范
 

diff --git a/components/calendar/__tests__/__snapshots__/index.test.js.snap b/components/calendar/__tests__/__snapshots__/index.test.js.snap
@@ -128,15 +128,15 @@ exports[`<Calendar/> should render a <Calendar/> components 1`] = `
         />
       </span>
       <span
-        class="cuke-calendar-item cuke-calendar-current-month cuke-calendar-selected-date"
+        class="cuke-calendar-item cuke-calendar-current-month"
       >
         4
         <div
           class="cuke-calendar-item-content"
         />
       </span>
       <span
-        class="cuke-calendar-item cuke-calendar-current-month"
+        class="cuke-calendar-item cuke-calendar-current-month cuke-calendar-selected-date"
       >
         5
         <div

diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
@@ -9,15 +9,17 @@ export default class Checkbox extends PureComponent {
     indeterminate: false,
     checked: false,
     isButton: false,
-    onChange: () => {}
+    onChange: () => {},
+    size: "default"
   };
   static propTypes = {
     prefixCls: PropTypes.string.isRequired,
     onChange: PropTypes.func,
     disabled: PropTypes.bool,
     checked: PropTypes.bool,
     defaultChecked: PropTypes.bool,
-    indeterminate: PropTypes.bool
+    indeterminate: PropTypes.bool,
+    size: PropTypes.oneOf(["small", "default", "large"])
   };
   state = {
     checked: this.props.checked || this.props.defaultChecked
@@ -39,6 +41,7 @@ export default class Checkbox extends PureComponent {
       children,
       value,
       isButton,
+      size,
       onChange, //eslint-disable-line
       indeterminate,
       ...attr
@@ -50,7 +53,8 @@ export default class Checkbox extends PureComponent {
           [`${prefixCls}-button-wrapper`]: isButton,
           [`${prefixCls}-checked`]: checked,
           [`${prefixCls}-disabled`]: disabled,
-          [`${prefixCls}-indeterminate`]: checked && indeterminate
+          [`${prefixCls}-indeterminate`]: checked && indeterminate,
+          [`${prefixCls}-${size}`]: isButton
         })}
         {...attr}
       >

diff --git a/components/checkbox/CheckboxGroup.js b/components/checkbox/CheckboxGroup.js
@@ -14,13 +14,15 @@ export default class CheckboxGroup extends PureComponent {
   static defaultProps = {
     prefixCls: "cuke-checkbox-group",
     disabled: false,
+    size: "default",
     onChange: () => {}
   };
 
   static propTypes = {
     prefixCls: PropTypes.string.isRequired,
     onChange: PropTypes.func,
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
+    size: PropTypes.oneOf(["small", "default", "large"])
   };
 
   constructor(props) {
@@ -62,6 +64,7 @@ export default class CheckboxGroup extends PureComponent {
       prefixCls,
       disabled,
       className,
+      size,
       onChange, //eslint-disable-line
       value: currentValue,
       ...attr
@@ -74,6 +77,7 @@ export default class CheckboxGroup extends PureComponent {
       return (
         <Checkbox
           key={index}
+          size={size}
           disabled={disabled}
           {...checkbox.props}
           onChange={this.onCheckboxChange}

diff --git a/components/checkbox/__tests__/__snapshots__/index.test.js.snap b/components/checkbox/__tests__/__snapshots__/index.test.js.snap
@@ -64,7 +64,7 @@ exports[`<Checkbox/> should render Checkbox 1`] = `
 exports[`<Checkbox/> should render Checkbox.Button 1`] = `
 <div>
   <label
-    class="cuke-checkbox-wrapper cuke-checkbox-button-wrapper"
+    class="cuke-checkbox-wrapper cuke-checkbox-button-wrapper cuke-checkbox-default"
   >
     <span
       class="cuke-checkbox cuke-checkbox-button"
@@ -82,7 +82,7 @@ exports[`<Checkbox/> should render Checkbox.Button 1`] = `
     </span>
   </label>
   <label
-    class="cuke-checkbox-wrapper cuke-checkbox-button-wrapper cuke-checkbox-disabled"
+    class="cuke-checkbox-wrapper cuke-checkbox-button-wrapper cuke-checkbox-disabled cuke-checkbox-default"
   >
     <span
       class="cuke-checkbox cuke-checkbox-button"
@@ -102,7 +102,7 @@ exports[`<Checkbox/> should render Checkbox.Button 1`] = `
   </label>
   <label
     checked=""
-    class="cuke-checkbox-wrapper cuke-checkbox-button-wrapper cuke-checkbox-checked cuke-checkbox-disabled"
+    class="cuke-checkbox-wrapper cuke-checkbox-button-wrapper cuke-checkbox-checked cuke-checkbox-disabled cuke-checkbox-default"
   >
     <span
       class="cuke-checkbox cuke-checkbox-button"

diff --git a/components/checkbox/styles.less b/components/checkbox/styles.less
@@ -139,6 +139,12 @@
     padding: @cuke-checkbox-button-padding;
     border-radius: @border-radius;
     margin: 0;
+    &.@{prefixCls}-large {
+      padding: @cuke-checkbox-button-padding-large;
+    }
+    &.@{prefixCls}-small {
+      padding: @cuke-checkbox-button-padding-small;
+    }
     .@{prefixCls} {
       display: none;
       & +.@{prefixCls} {
@@ -149,6 +155,7 @@
       background-color: @primary-color;
       border-color: @primary-color;
       color: #fff;
+      text-shadow: @default-text-shadow;
       & +.@{prefixCls}-checked {
         border-left: 1px solid fade(@border-color, 70%);
       }

diff --git a/components/cityPicker/CityPicker.js b/components/cityPicker/CityPicker.js
@@ -54,6 +54,7 @@ export default class CityPicker extends PureComponent {
   };
   onCityChange = selectedCity => {
     this.setState({ visible: false, selectedCityName: selectedCity.name });
+    this.props.onPanelVisibleChange(false);
 
     if (this.props.onCityChange) {
       this.props.onCityChange(selectedCity);

diff --git a/components/cityPicker/__tests__/index.test.js b/components/cityPicker/__tests__/index.test.js
@@ -259,4 +259,17 @@ describe("<CityPicker/>", () => {
     wrapper.find(".cuke-city-picker").simulate("click");
     expect(onPanelVisibleChange).not.toHaveBeenCalled();
   });
+
+  // it("should cannot trigger panel visible change when disabled groups", () => {
+  //   const onPanelVisibleChange = jest.fn();
+  //   const wrapper = mount(
+  //     <CityPicker
+  //       cityList={cityList}
+  //       onPanelVisibleChange={onPanelVisibleChange}
+  //     />
+  //   );
+  //   wrapper.setState({visible: true})
+  //   wrapper.find(".cuke-city-picker-core-item").at(0).simulate("click");
+  //   expect(onPanelVisibleChange).toHaveBeenCalled();
+  // });
 });
diff --git a/components/datePicker/__tests__/__snapshots__/index.test.js.snap b/components/datePicker/__tests__/__snapshots__/index.test.js.snap
@@ -522,12 +522,12 @@ exports[`<DatePicker/> should render a <DatePicker/> components 1`] = `
         3
       </span>
       <span
-        class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
+        class="cuke-date-picker-item cuke-date-picker-current-month"
       >
         4
       </span>
       <span
-        class="cuke-date-picker-item cuke-date-picker-current-month"
+        class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
       >
         5
       </span>

diff --git a/components/form/form.js b/components/form/form.js
@@ -6,51 +6,66 @@ import * as Yup from "yup";
 
 export default class CukeForm extends PureComponent {
   static defaultProps = {
-    prefixCls: "cuke-form",
-    schema: () => ({})
+    prefixCls: "cuke-form"
   };
 
+  constructor(props) {
+    super(props);
+    this.schema = {};
+  }
+
   static propTypes = {
     prefixCls: PropTypes.string.isRequired
   };
 
-  // TODO: 是一次性写所有的 schema 还是 写在每一个 item 里 然后统一收集 ?
-  getSchemaOfForm = () => {
-    return Yup.object().shape(this.props.schema(Yup) || {});
-  };
+  get validationSchema() {
+    console.log(this.schema);
+    return Yup.object().shape(this.schema || {});
+  }
 
   getInitialValuesOfForm = () => {
     // TODO: 收集每一个 item 的初始值 组合起来
     return {};
   };
 
+  getSchemaFromFormItem = name => getSchema => {
+    if (!name || !getSchema) {
+      return;
+    }
+    const newSchema = {
+      ...this.schema,
+      [name]: getSchema(Yup)
+    };
+    this.schema = newSchema;
+  };
+
   render() {
-    const {
-      prefixCls,
-      className,
-      children,
-      onSubmit,
-      schema, // eslint-disable-line
-      ...attr
-    } = this.props;
+    const { prefixCls, className, children, onSubmit, style } = this.props;
+
+    console.log(this.validationSchema);
 
     return (
       <Formik
         initialValues={this.getInitialValuesOfForm}
-        validationSchema={this.getSchemaOfForm}
+        validationSchema={this.validationSchema}
         onSubmit={onSubmit}
       >
         {formProps => (
-          <Form className={cls(prefixCls, className)} {...attr}>
+          <Form className={cls(prefixCls, className)} style={style}>
             {React.Children.map(children, (element, index) => {
               return cloneElement(element, {
                 key: index,
-                formProps
+                formProps,
+                dispatchSchemaOfFormItem: this.getSchemaFromFormItem
               });
             })}
           </Form>
         )}
       </Formik>
     );
   }
+
+  componentWillUnmount() {
+    this.schema = undefined;
+  }
 }
diff --git a/components/form/formItem.js b/components/form/formItem.js
@@ -15,13 +15,18 @@ export default class FormItem extends PureComponent {
     wrapperCol: {
       span: 21,
       offset: 0
-    }
+    },
+    schema: {}
   };
 
   static propTypes = {
     prefixCls: PropTypes.string.isRequired
   };
 
+  dispatchSchemaOfFormItem = name => schema => {
+    this.props.dispatchSchemaOfFormItem(name)(schema);
+  };
+
   render() {
     const {
       prefixCls,
@@ -31,8 +36,8 @@ export default class FormItem extends PureComponent {
       children,
       labelCol,
       wrapperCol,
-      formProps: { errors, touched },
-      ...attr
+      style,
+      formProps: { errors, touched }
     } = this.props;
 
     const hasError = errors[name] && touched[name];
@@ -41,7 +46,7 @@ export default class FormItem extends PureComponent {
         className={cls(prefixCls, className, {
           [`${prefixCls}-has-error`]: hasError
         })}
-        {...attr}
+        style={style}
       >
         <Col {...labelCol} className={`${prefixCls}-label`}>
           {label}
@@ -63,4 +68,8 @@ export default class FormItem extends PureComponent {
       </Row>
     );
   }
+
+  componentDidMount() {
+    this.dispatchSchemaOfFormItem(this.props.name)(this.props.schema);
+  }
 }
diff --git a/components/index.js b/components/index.js
@@ -42,6 +42,6 @@ export { default as Calendar } from "./calendar";
 export { default as Popover } from "./popover";
 export { default as Popconfirm } from "./popconfirm";
 export { default as Card } from "./card";
-export { default as Form } from "./form";
+// export { default as Form } from "./form";
 
 export { default as version } from "./version";
diff --git a/components/radio/Radio.js b/components/radio/Radio.js
@@ -9,15 +9,17 @@ export default class Radio extends PureComponent {
   static defaultProps = {
     prefixCls: "cuke-radio",
     defaultChecked: false,
-    checked: false
+    checked: false,
+    size: "default"
   };
 
   static propTypes = {
     prefixCls: PropTypes.string.isRequired,
     onChange: PropTypes.func,
     disabled: PropTypes.bool,
     checked: PropTypes.bool,
-    defaultChecked: PropTypes.bool
+    defaultChecked: PropTypes.bool,
+    size: PropTypes.oneOf(["small", "default", "large"])
   };
 
   constructor(props) {
@@ -49,6 +51,7 @@ export default class Radio extends PureComponent {
       children,
       disabled,
       isButton,
+      size,
       onChange, //eslint-disable-line
       ...attr
     } = this.props;
@@ -60,7 +63,8 @@ export default class Radio extends PureComponent {
         className={cls(`${prefixCls}-wrapper`, {
           [`${prefixCls}-button-wrapper`]: isButton,
           [`${prefixCls}-checked`]: checked,
-          [`${prefixCls}-disabled`]: disabled
+          [`${prefixCls}-disabled`]: disabled,
+          [`${prefixCls}-${size}`]: isButton
         })}
         {...attr}
       >