fix: Deploy app select vxnet (#314)

* Fix Checkbox component no value prop
openpitrix · Aug 29, 2018 · b92504d · b92504d
1 parent bad206c
commit b92504d
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 41 deletions.
diff --git a/src/components/Base/Checkbox/checkbox.jsx b/src/components/Base/Checkbox/checkbox.jsx
@@ -9,6 +9,7 @@ export default class Checkbox extends Component {
   static propTypes = {
     className: PropTypes.string,
     name: PropTypes.string,
+    value: PropTypes.string,
     disabled: PropTypes.bool,
     checked: PropTypes.bool,
     onChange: PropTypes.func
@@ -34,8 +35,6 @@ export default class Checkbox extends Component {
     if (disabled) {
       return;
     }
-    const isChecked = this.state.isChecked;
-    this.setState({ isChecked: !isChecked });
     onChange && onChange(e);
   };
 
@@ -46,12 +45,9 @@ export default class Checkbox extends Component {
   }
 
   render() {
-    const { style, className, disabled, children } = this.props;
+    const { style, className, disabled, children, value } = this.props;
     const isChecked = this.state.isChecked;
-    const color = {
-      primary: '#fff',
-      secondary: '#fff'
-    };
+
     return (
       <label
         className={classNames(styles.checkbox, className, {
@@ -60,8 +56,13 @@ export default class Checkbox extends Component {
         disabled={disabled}
         style={style}
       >
-        {isChecked && <Icon name="check" color={color} />}
-        <input type="checkbox" checked={isChecked} onChange={this.handleToggleCheck} />
+        {isChecked && <Icon name="check" />}
+        <input
+          type="checkbox"
+          value={value}
+          checked={isChecked}
+          onChange={this.handleToggleCheck}
+        />
         {children}
       </label>
     );

diff --git a/src/components/Base/Checkbox/group.jsx b/src/components/Base/Checkbox/group.jsx
@@ -11,50 +11,47 @@ export default class CheckboxGroup extends Component {
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
     values: PropTypes.array,
     name: PropTypes.string,
-    onChange: PropTypes.func,
+    onChange: PropTypes.func
   };
 
   static defaultProps = {
     children: [],
     values: [],
-    name: '',
+    name: ''
   };
 
   constructor(props) {
     super(props);
-
-    this.values = [...props.values];
   }
 
-  handleChange = (e) => {
+  handleChange = e => {
     e.stopPropagation();
 
     const { name, onChange } = this.props;
     const targetValue = e.target.value;
+    let values = this.props.values;
 
     if (e.target.checked) {
-      this.values.push(targetValue);
+      values.push(targetValue);
     } else {
-      remove(this.values, v => v === targetValue);
+      remove(values, v => v === targetValue);
     }
-    onChange && onChange(this.values, name);
-  }
+    onChange && onChange(values, name);
+  };
 
   render() {
-    const { className, name, children } = this.props;
-
-    const childNodes = React.Children.map(children, (child) => React.cloneElement(child, {
-      ...child.props,
-      key: `check-${child.props.value}`,
-      name: child.props.name || name,
-      checked: this.values.indexOf(child.props.value) !== -1,
-      onChange: this.handleChange,
-    }));
-
-    return (
-      <div className={classNames(styles.group, className)}>
-        {childNodes}
-      </div>
+    const { className, name, children, values } = this.props;
+
+    const childNodes = React.Children.map(children, child =>
+      React.cloneElement(child, {
+        ...child.props,
+        key: `check-${child.props.value}`,
+        name: child.props.name || name,
+        checked: values.indexOf(child.props.value) !== -1,
+        onChange: this.handleChange
+      })
     );
+
+    return <div className={classNames(styles.group, className)}>{childNodes}</div>;
   }
 }
diff --git a/src/components/Base/Checkbox/index.scss b/src/components/Base/Checkbox/index.scss
@@ -72,6 +72,10 @@
       .icon {
         display: block;
         z-index: 3;
+        svg {
+          --primary-color: #{$N0};
+          --secondary-color: #{$N0};
+        }
       }
     }
     &:hover{

diff --git a/src/components/Base/Select/select.jsx b/src/components/Base/Select/select.jsx
@@ -48,9 +48,12 @@ export default class Select extends React.Component {
     const { isOpen } = this.state;
     const { disabled } = this.props;
 
+    if (disabled) {
+      return;
+    }
     if (isOpen) {
       document.removeEventListener('click', this.handleOutsideClick.bind(this));
-    } else if (!disabled) {
+    } else {
       document.addEventListener('click', this.handleOutsideClick.bind(this));
     }
 
@@ -82,11 +85,11 @@ export default class Select extends React.Component {
 
   renderControl() {
     const { isOpen } = this.state;
-    const { disabled } = this.props;
+    const { value, disabled } = this.props;
 
     return (
       <div className={styles.control} onClick={this.handleControlClick}>
-        <div className={styles.controlLabel}>{this.currentLabel}</div>
+        <div className={styles.controlLabel}>{value}</div>
         <Icon name={isOpen && !disabled ? 'caret-up' : 'caret-down'} type="dark" />
       </div>
     );

diff --git a/src/pages/Admin/Apps/Deploy/index.jsx b/src/pages/Admin/Apps/Deploy/index.jsx
@@ -133,7 +133,12 @@ export default class AppDeploy extends Component {
         </div>
         <div className={styles.cellModule}>
           <label className={classnames(styles.name, styles.selectName)}>Version</label>
-          <Select className={styles.select} value={versionId} onChange={changeVersion}>
+          <Select
+            className={styles.select}
+            value={versionId}
+            onChange={changeVersion}
+            disabled={versions.length === 0}
+          >
             {versions.map(({ version_id, name }) => (
               <Select.Option key={version_id} value={version_id} title={name}>
                 {name}
@@ -167,7 +172,12 @@ export default class AppDeploy extends Component {
         </div>
         <div className={styles.cellModule}>
           <label className={classnames(styles.name, styles.selectName)}>VxNet to Join</label>
-          <Select className={styles.select} value={subnetId} onChange={changeSubnet}>
+          <Select
+            className={styles.select}
+            value={subnetId}
+            onChange={changeSubnet}
+            disabled={subnets.length === 0}
+          >
             {subnets.map(({ subnet_id, name }) => (
               <Select.Option key={subnet_id} value={subnet_id}>
                 {subnet_id}

diff --git a/src/stores/app/deploy.js b/src/stores/app/deploy.js
@@ -208,6 +208,8 @@ export default class AppDeployStore extends Store {
     let arrSubnets = this.subnets.toJSON();
     if (arrSubnets[0]) {
       this.subnetId = arrSubnets[0].subnet_id;
+    } else {
+      this.subnetId = '';
     }
   }
 

diff --git a/src/stores/repo/create.js b/src/stores/repo/create.js
@@ -143,7 +143,7 @@ export default class RepoCreateStore extends Store {
     const data = getFormData(e.target);
 
     if (_.isEmpty(providers)) {
-      return this.showMsg('please select at least one provider');
+      return this.showMsg('Please select at least one Runtime Provider');
     }
 
     for (let i = 0; i < this.selectors.length; i++) {

diff --git a/test/components/Base/Checkbox.test.js b/test/components/Base/Checkbox.test.js
@@ -33,7 +33,7 @@ describe('Base/Checkbox', () => {
     wrapper.find('input').simulate('change');
 
     const isChecked = wrapper.state().isChecked;
-    expect(isChecked).not.toBeTruthy();
+    expect(isChecked).toBeTruthy();
     expect(mockChange).toHaveBeenCalled();
     expect(mockChange).toHaveBeenCalledTimes(1);
     expect(mockChange.mock.calls[0][0].target.checked).toEqual(isChecked);

diff --git a/test/components/Base/__snapshots__/Checkbox.test.js.snap b/test/components/Base/__snapshots__/Checkbox.test.js.snap
@@ -25,7 +25,6 @@ exports[`Base/Checkbox group render 1`] = `
     >
       <svg
         class="qicon qicon-check qicon-light"
-        style="--primary-color:#fff;--secondary-color:#fff"
       >
         <use
           href="#check"
@@ -35,6 +34,7 @@ exports[`Base/Checkbox group render 1`] = `
     <input
       checked=""
       type="checkbox"
+      value="1"
     />
     option1
   </label>
@@ -43,6 +43,7 @@ exports[`Base/Checkbox group render 1`] = `
   >
     <input
       type="checkbox"
+      value="2"
     />
     option2
   </label>
@@ -55,7 +56,6 @@ exports[`Base/Checkbox group render 1`] = `
     >
       <svg
         class="qicon qicon-check qicon-light"
-        style="--primary-color:#fff;--secondary-color:#fff"
       >
         <use
           href="#check"
@@ -65,6 +65,7 @@ exports[`Base/Checkbox group render 1`] = `
     <input
       checked=""
       type="checkbox"
+      value="3"
     />
     option3
   </label>