fix: npm start warning (#20791)

* 🔧 fix npm start warning close #20700 * 🔧 add some jsx files to gitignore * fix eslint
5 years ago · 36a03a06e2
9 changed files with 76 additions and 59 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -4,9 +4,13 @@ components/**/*.jsx
 !components/*/demo/*
 !.*.js
 # Docs templates
+site/theme/template/Color/ColorPicker.jsx
 site/theme/template/IconDisplay/*.js
 site/theme/template/IconDisplay/*.jsx
+site/theme/template/IconDisplay/fields.js
 site/theme/template/Home/**/*.jsx
+site/theme/template/utils.jsx
+site/theme/template/Layout/Footer.jsx
 typings
 es/**/*
 lib/**/*
--- a/.gitignore
+++ b/.gitignore
@ -41,9 +41,10 @@ components/**/*.jsx
 *.tmp

 # Docs templates
+site/theme/template/Color/ColorPicker.jsx
 site/theme/template/IconDisplay/*.js
 site/theme/template/IconDisplay/*.jsx
 site/theme/template/IconDisplay/fields.js
-
 site/theme/template/Home/**/*.jsx
-
+site/theme/template/utils.jsx
+site/theme/template/Layout/Footer.jsx
--- a/package.json
+++ b/package.json
@ -152,6 +152,7 @@
    "@types/prop-types": "^15.7.1",
    "@types/raf": "^3.4.0",
    "@types/react": "^16.9.0",
+    "@types/react-color": "^3.0.1",
    "@types/react-dom": "^16.8.4",
    "@types/shallowequal": "^1.1.1",
    "@types/warning": "^3.0.0",
@ -191,7 +192,7 @@
    "full-icu": "^1.3.0",
    "glob": "^7.1.4",
    "http-server": "^0.12.0",
-    "husky": "^4.0.1",
+    "husky": "^4.0.3",
    "ignore-emit-webpack-plugin": "^2.0.2",
    "immutability-helper": "^3.0.0",
    "intersection-observer": "^0.7.0",
--- a/scripts/print-changelog.js
+++ b/scripts/print-changelog.js
@ -1,4 +1,5 @@
 /* eslint-disable no-await-in-loop */
+/* eslint-disable no-console */
 const chalk = require('chalk');
 const jsdom = require('jsdom');
 const jQuery = require('jquery');
--- a/site/theme/template/Color/ColorPicker.tsx
+++ b/site/theme/template/Color/ColorPicker.tsx
@ -1,21 +1,25 @@
 import React, { Component } from 'react';
-import { ChromePicker, SketchPicker } from 'react-color';
+import { SketchPicker } from 'react-color';

 const noop = () => {};

-const pickers = {
-  chrome: ChromePicker,
-  sketch: SketchPicker,
-};
+interface ColorPickerProps {
+  color?: string;
+  small: boolean;
+  position: string;
+  presetColors?: string[];
+  onChange: (hex: string, color: { hex: string }) => void;
+  onChangeComplete: (hex: string) => void;
+}

-export default class ColorPicker extends Component {
+export default class ColorPicker extends Component<ColorPickerProps> {
  static defaultProps = {
    onChange: noop,
    onChangeComplete: noop,
    position: 'bottom',
  };

-  static getDerivedStateFromProps(props) {
+  static getDerivedStateFromProps(props: ColorPickerProps) {
    if ('color' in props) {
      return {
        color: props.color,
@ -26,6 +30,7 @@ export default class ColorPicker extends Component {

  state = {
    displayColorPicker: false,
+    color: undefined,
  };

  handleClick = () => {
@ -37,29 +42,28 @@ export default class ColorPicker extends Component {
    this.setState({ displayColorPicker: false });
  };

-  handleChange = color => {
+  handleChange = (color: { hex: string }) => {
    const { onChange } = this.props;
    this.setState({ color: color.hex });
    onChange(color.hex, color);
  };

-  handleChangeComplete = color => {
+  handleChangeComplete = (color: { hex: string }) => {
    const { onChangeComplete } = this.props;
    this.setState({ color: color.hex });
    onChangeComplete(color.hex);
  };

  render() {
-    const { small, type, position } = this.props;
+    const { small, position, presetColors } = this.props;
    const { color, displayColorPicker } = this.state;
-    const Picker = pickers[type];
    const styles = {
      color: {
        width: small ? '80px' : '120px',
        height: small ? '16px' : '24px',
        borderRadius: '2px',
        background: color,
-      },
+      } as React.CSSProperties,
      swatch: {
        padding: '4px',
        background: '#fff',
@ -67,22 +71,22 @@ export default class ColorPicker extends Component {
        boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
        display: 'inline-block',
        cursor: 'pointer',
-      },
+      } as React.CSSProperties,
      popover: {
        position: 'absolute',
-        zIndex: '2',
-      },
+        zIndex: 2,
+      } as React.CSSProperties,
      cover: {
        position: 'fixed',
        top: '0px',
        right: '0px',
        bottom: '0px',
        left: '0px',
-      },
+      } as React.CSSProperties,
      wrapper: {
        position: 'inherit',
-        zIndex: '100',
-      },
+        zIndex: 100,
+      } as React.CSSProperties,
    };

    if (position === 'top') {
@ -99,8 +103,8 @@ export default class ColorPicker extends Component {
      <div style={styles.popover}>
        <div style={styles.cover} onClick={this.handleClose} />
        <div style={styles.wrapper}>
-          <Picker
-            {...this.props}
+          <SketchPicker
+            presetColors={presetColors}
            color={color}
            onChange={this.handleChange}
            onChangeComplete={this.handleChangeComplete}
--- a/site/theme/template/Layout/Footer.d.ts
+++ b/site/theme/template/Layout/Footer.d.ts
@ -1,4 +0,0 @@
-import * as React from 'react';
-
-declare function Footer(): JSX.Element;
-export default Footer;
--- a/site/theme/template/Layout/Footer.tsx
+++ b/site/theme/template/Layout/Footer.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage, injectIntl, WrappedComponentProps } from 'react-intl';
 import { Modal, message } from 'antd';
 import { Link } from 'bisheng/router';
 import RcFooter from 'rc-footer';
@ -22,7 +22,7 @@ import {
 import { isLocalStorageNameSupported, loadScript, getLocalizedPathname } from '../utils';
 import ColorPicker from '../Color/ColorPicker';

-class Footer extends React.Component {
+class Footer extends React.Component<WrappedComponentProps> {
  lessLoaded = false;

  state = {
@ -47,7 +47,7 @@ class Footer extends React.Component {
  }

  getColumns() {
-    const { intl = {} } = this.props;
+    const { intl } = this.props;
    const isZhCN = intl.locale === 'zh-CN';
    return [
      {
@ -330,13 +330,13 @@ class Footer extends React.Component {
    ];
  }

-  handleColorChange = color => {
+  handleColorChange = (color: string) => {
    const changeColor = () => {
      const {
        intl: { messages },
      } = this.props;
      const hide = message.loading(messages['app.footer.primary-color-changing']);
-      window.less
+      (window as any).less
        .modifyVars({
          '@primary-color': color,
        })
@ -352,7 +352,7 @@ class Footer extends React.Component {
    if (this.lessLoaded) {
      changeColor();
    } else {
-      window.less = {
+      (window as any).less = {
        async: true,
        javascriptEnabled: true,
      };
@ -401,7 +401,6 @@ class Footer extends React.Component {
    const colors = Object.keys(presetPalettes).filter(item => item !== 'grey');
    return (
      <ColorPicker
-        type="sketch"
        small
        color={color}
        position="top"
--- a/site/theme/template/utils.d.ts
+++ b/site/theme/template/utils.d.ts
@ -1,12 +0,0 @@
-export = Util;
-export as namespace Util;
-
-declare namespace Util {
-  function getMenuItems(...args: any[]): string;
-  function isZhCN(pathname: string): boolean;
-  function getLocalizedPathname(path: string, isChinese: boolean): string;
-  function ping(callback: Function): string;
-  function isLocalStorageNameSupported(): boolean;
-  function loadScript(src: string): void;
-  function getMetaDescription(jml: any): any;
-}
--- a/site/theme/template/utils.tsx
+++ b/site/theme/template/utils.tsx
@ -1,11 +1,28 @@
 import flattenDeep from 'lodash/flattenDeep';
 import flatten from 'lodash/flatten';

-export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) {
+interface Meta {
+  skip?: boolean;
+  category?: any;
+  type?: any;
+  title?: any;
+  order?: number;
+  children?: Meta[];
+}
+
+interface ModuleDataItem {
+  meta: Meta;
+}
+
+interface Orders {
+  [key: string]: number;
+}
+
+export function getMenuItems(moduleData: ModuleDataItem[], locale: string, categoryOrder: Orders, typeOrder: Orders) {
  const menuMeta = moduleData.map(item => item.meta).filter(meta => !meta.skip);

-  const menuItems = [];
-  const sortFn = (a, b) => (a.order || 0) - (b.order || 0);
+  const menuItems: Meta[] = [];
+  const sortFn = (a: Meta, b: Meta) => (a.order || 0) - (b.order || 0);
  menuMeta.sort(sortFn).forEach(meta => {
    // Format
    if (meta.category) {
@ -35,6 +52,7 @@ export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) {
        };
        menuItems.push(type);
      }
+      type.children = type.children || [];
      type.children.push(meta);
      return;
    }
@ -51,6 +69,8 @@ export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) {
      menuItems.push(group);
    }

+    group.children = group.children || [];
+
    if (meta.type) {
      let type = group.children.filter(i => i.title === meta.type)[0];
      if (!type) {
@ -62,13 +82,14 @@ export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) {
        };
        group.children.push(type);
      }
+      type.children = type.children || [];
      type.children.push(meta);
    } else {
      group.children.push(meta);
    }
  });

-  function nestSort(list) {
+  function nestSort(list: Meta[]): Meta[] {
    return list.sort(sortFn).map(item => {
      if (item.children) {
        return {
@ -84,11 +105,11 @@ export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) {
  return nestSort(menuItems);
 }

-export function isZhCN(pathname) {
+export function isZhCN(pathname: string) {
  return /-cn\/?$/.test(pathname);
 }

-export function getLocalizedPathname(path, zhCN) {
+export function getLocalizedPathname(path: string, zhCN: boolean) {
  const pathname = path.startsWith('/') ? path : `/${path}`;
  if (!zhCN) {
    // to enUS
@ -103,7 +124,7 @@ export function getLocalizedPathname(path, zhCN) {
  return `${pathname}-cn`;
 }

-export function ping(callback) {
+export function ping(callback: (status: string) => void) {
  // eslint-disable-next-line
  const url =
    'https://private-a' +
@ -112,8 +133,8 @@ export function ping(callback) {
    'ay.com/alip' +
    'ay-rmsdeploy-image/rmsportal/RKuAiriJqrUhyqW.png';
  const img = new Image();
-  let done;
-  const finish = status => {
+  let done: boolean;
+  const finish = (status: string) => {
    if (!done) {
      done = true;
      img.src = '';
@ -138,20 +159,22 @@ export function isLocalStorageNameSupported() {
  }
 }

-export function loadScript(src) {
+export function loadScript(src: string) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    script.onload = resolve;
    script.onerror = reject;
-    document.head.appendChild(script);
+    document.head!.appendChild(script);
  });
 }

-export function getMetaDescription(jml) {
+export function getMetaDescription(jml: any[]) {
  const COMMON_TAGS = ['h1', 'h2', 'h3', 'p', 'img', 'a', 'code', 'strong'];
-  if (!Array.isArray(jml)) return '';
+  if (!Array.isArray(jml)) {
+    return '';
+  }
  const paragraph = flattenDeep(
    jml
      .filter(item => {