Increase color weakness

src/components/Charts/Bar/index.js

@@ -12,7 +12,7 @@ class Bar extends Component {
   };
 
   componentDidMount() {
-    window.addEventListener('resize', this.resize);
+    window.addEventListener('resize', this.resize, { passive: true });
   }
 
   componentWillUnmount() {

src/components/Charts/Pie/index.js

@@ -19,7 +19,7 @@ export default class Pie extends Component {
   };
 
   componentDidMount() {
-    window.addEventListener('resize', this.resize);
+    window.addEventListener('resize', this.resize, { passive: true });
   }
 
   componentDidUpdate(preProps) {

src/components/Charts/TagCloud/index.js

@@ -23,7 +23,7 @@ class TagCloud extends Component {
       this.initTagCloud();
       this.renderChart();
     });
-    window.addEventListener('resize', this.resize);
+    window.addEventListener('resize', this.resize, { passive: true });
   }
 
   componentDidUpdate(preProps) {

src/components/Charts/WaterWave/index.js

@@ -17,7 +17,7 @@ export default class WaterWave extends PureComponent {
       this.renderChart();
       this.resize();
     });
-    window.addEventListener('resize', this.resize);
+    window.addEventListener('resize', this.resize, { passive: true });
   }
 
   componentWillUnmount() {

src/components/GlobalHeader/RightContent.js

@@ -12,7 +12,7 @@ export default class GlobalHeaderRight extends PureComponent {
     if (notices.length === 0) {
       return {};
     }
-    const newNotices = notices.map((notice) => {
+    const newNotices = notices.map(notice => {
       const newNotice = { ...notice };
       if (newNotice.datetime) {
         newNotice.datetime = moment(notice.datetime).fromNow();
@@ -69,15 +69,15 @@ export default class GlobalHeaderRight extends PureComponent {
       className = `${styles.right}  ${styles.dark}`;
     }
     return (
-      <div className={className} >
+      <div className={className}>
         <HeaderSearch
           className={`${styles.action} ${styles.search}`}
           placeholder="站内搜索"
           dataSource={['搜索提示一', '搜索提示二', '搜索提示三']}
-          onSearch={(value) => {
+          onSearch={value => {
             console.log('input', value); // eslint-disable-line
           }}
-          onPressEnter={(value) => {
+          onPressEnter={value => {
             console.log('enter', value); // eslint-disable-line
           }}
         />
@@ -87,6 +87,7 @@ export default class GlobalHeaderRight extends PureComponent {
             href="http://pro.ant.design/docs/getting-started"
             rel="noopener noreferrer"
             className={styles.action}
+            title="使用文档"
           >
             <Icon type="question-circle-o" />
           </a>
@@ -124,11 +125,7 @@ export default class GlobalHeaderRight extends PureComponent {
         {currentUser.name ? (
           <Dropdown overlay={menu}>
             <span className={`${styles.action} ${styles.account}`}>
-              <Avatar
-                size="small"
-                className={styles.avatar}
-                src={currentUser.avatar}
-              />
+              <Avatar size="small" className={styles.avatar} src={currentUser.avatar} />
               <span className={styles.name}>{currentUser.name}</span>
             </span>
           </Dropdown>

src/components/HeaderSearch/index.js

@@ -75,10 +75,10 @@ export default class HeaderSearch extends PureComponent {
           onChange={this.onChange}
         >
           <Input
-            placeholder={placeholder}
             ref={node => {
               this.input = node;
             }}
+            placeholder={placeholder}
             onKeyDown={this.onKeyDown}
             onBlur={this.leaveSearchMode}
           />

src/components/SettingDarwer/index.js

@@ -21,10 +21,13 @@ const Body = ({ children, title, style }) => (
 @connect(({ setting }) => ({ setting }))
 class SettingDarwer extends PureComponent {
   componentDidMount() {
-    const { themeColor } = this.props.setting;
+    const { themeColor, colorWeak } = this.props.setting;
     if (themeColor !== '#1890FF') {
       this.colorChange(themeColor);
     }
+    if (colorWeak === 'open') {
+      document.body.className = 'colorWeak';
+    }
   }
   getLayOutSetting = () => {
     const { grid, fixedHeader, autoHideHeader, fixSiderbar } = this.props.setting;
@@ -85,6 +88,13 @@ class SettingDarwer extends PureComponent {
         nextState.grid = 'Fluid';
       }
     }
+    if (key === 'colorWeak') {
+      if (value === 'open') {
+        document.body.className = 'colorWeak';
+      } else {
+        document.body.className = '';
+      }
+    }
     this.setState(nextState, () => {
       this.props.dispatch({
         type: 'setting/changeSetting',
@@ -112,7 +122,7 @@ class SettingDarwer extends PureComponent {
     }, 200);
   };
   render() {
-    const { collapse, silderTheme, themeColor, layout } = this.props.setting;
+    const { collapse, silderTheme, themeColor, layout, colorWeak } = this.props.setting;
     return (
       <div className={styles.settingDarwer}>
         <div className={styles.mini_bar} onClick={this.togglerContent}>
@@ -177,6 +187,26 @@ class SettingDarwer extends PureComponent {
               dataSource={this.getLayOutSetting()}
               renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
             />
+
+            <Divider />
+
+            <Body title="导航设置 ">
+              <List.Item
+                actions={[
+                  <Select
+                    value={colorWeak}
+                    size="small"
+                    onSelect={value => this.changeSetting('colorWeak', value)}
+                    style={{ width: 80 }}
+                  >
+                    <Select.Option value="close">close</Select.Option>
+                    <Select.Option value="open">open</Select.Option>
+                  </Select>,
+                ]}
+              >
+                色弱模式
+              </List.Item>
+            </Body>
           </div>
         </DrawerMenu>
       </div>

src/index.less

@@ -5,6 +5,10 @@ body,
   overflow: auto;
 }
 
+:global(.colorWeak) {
+  filter: invert(80%);
+}
+
 :global(.ant-layout) {
   min-height: 100%;
 }

src/routes/Forms/AdvancedForm.js

@@ -62,7 +62,7 @@ class AdvancedForm extends PureComponent {
     width: '100%',
   };
   componentDidMount() {
-    window.addEventListener('resize', this.resizeFooterToolbar);
+    window.addEventListener('resize', this.resizeFooterToolbar, { passive: true });
   }
   componentWillUnmount() {
     window.removeEventListener('resize', this.resizeFooterToolbar);

src/routes/Profile/AdvancedProfile.js

@@ -197,7 +197,7 @@ export default class AdvancedProfile extends Component {
     });
 
     this.setStepDirection();
-    window.addEventListener('resize', this.setStepDirection);
+    window.addEventListener('resize', this.setStepDirection, { passive: true });
   }
 
   componentWillUnmount() {