feat: App mgmt pages (#552)

config/i18n.config.js

@@ -3,7 +3,11 @@ const translations = {
     translation: require('../src/locales/en/translation.json')
   },
   zh: {
-    translation: require('../src/locales/zh/translation.json')
+    translation: Object.assign(
+      {},
+      require('../src/locales/zh/apps.json'),
+      require('../src/locales/zh/translation.json')
+    )
   }
 };
 

src/components/Base/DocLink/index.jsx

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { translate } from 'react-i18next';
+
+import links from 'config/doc-link';
+
+@translate()
+export default class DocLink extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    isExternal: PropTypes.bool,
+    name: PropTypes.string,
+    to: PropTypes.string
+  };
+
+  static defaultProps = {
+    children: null,
+    className: '',
+    isExternal: true,
+    name: ''
+  };
+
+  render() {
+    const {
+      t, to, name, children, className, isExternal
+    } = this.props;
+    let text = t(`LINK_${name}`);
+    const linkTo = to || links[name];
+    if (text === `LINK_${name}`) {
+      text = linkTo;
+    }
+    if (children) {
+      text = children;
+    }
+    if (!text) {
+      return null;
+    }
+    if (isExternal) {
+      if (!linkTo) {
+        throw new Error(
+          `You should edit a link url in the file of 'config/doc-links'. name:${name}`
+        );
+      }
+      return (
+        <a
+          className={className}
+          href={linkTo}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {text}
+        </a>
+      );
+    }
+
+    return (
+      <Link className={className} to={linkTo}>
+        {text}
+      </Link>
+    );
+  }
+}

src/components/Base/Upload/index.jsx

@@ -40,7 +40,7 @@ export default class Upload extends Component {
 
   state = {
     uid: getUid(),
-    isDraging: true
+    isDraging: false
   };
 
   componentDidMount() {
@@ -170,11 +170,14 @@ export default class Upload extends Component {
     return (
       <span
         {...events}
-        className={classNames('upload', {
-          'upload-dragover': this.state.isDraging,
-          'upload-disabled': disabled,
+        className={classNames(
+          'upload',
+          {
+            'upload-dragover': this.state.isDraging,
+            'upload-disabled': disabled
+          },
           className
-        })}
+        )}
         role="button"
         style={style}
       >

src/components/Base/Upload/index.scss

@@ -8,5 +8,9 @@
       cursor: not-allowed;
       pointer-events: none;
     }
+    &.upload-dragover {
+      opacity: 0.3;
+      box-shadow: 0 1px 4px 0 rgba(73, 33, 173, 0.06), 0 4px 8px 0 rgba(35, 35, 36, 0.04);
+    }
   }
 }

src/components/Base/index.js

@@ -16,3 +16,4 @@ export Timeline from './Timeline';
 export Tooltip from './Tooltip';
 export Image from './Image';
 export Upload from './Upload';
+export DocLink from './DocLink';

src/components/Layout/Stepper/index.jsx

@@ -0,0 +1,164 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { withRouter } from 'react-router-dom';
+import { observer } from 'mobx-react';
+import { translate } from 'react-i18next';
+import _ from 'lodash';
+import Loading from 'components/Loading';
+
+import { DocLink, Icon } from 'components/Base';
+
+import styles from './index.scss';
+
+@translate()
+@observer
+class LayoutStepper extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    name: PropTypes.string,
+    stepOption: PropTypes.shape({
+      activeStep: PropTypes.number,
+      steps: PropTypes.number,
+      prevStep: PropTypes.func,
+      disableNextStep: PropTypes.bool,
+      isLoading: PropTypes.bool,
+      nextStep: PropTypes.func
+    })
+  };
+
+  renderTopProgress() {
+    const { stepOption } = this.props;
+    const { steps, activeStep } = stepOption;
+    const width = `${activeStep * 100 / steps}%`;
+    const className = activeStep > steps ? 'headerStepNotFinished' : 'headerStepNotFinished';
+
+    const style = {
+      width
+    };
+
+    return (
+      <div
+        style={style}
+        className={classnames(styles.headerStep, styles[className])}
+      />
+    );
+  }
+
+  renderTopNav() {
+    const {
+      name, stepOption, t, history
+    } = this.props;
+    const {
+      activeStep, steps, prevStep, goBack
+    } = stepOption;
+    const funcBack = _.isFunction(goBack) ? goBack : history.goBack;
+
+    if (activeStep > steps) {
+      return null;
+    }
+
+    let text = '';
+    if (activeStep > 1 && !!name) {
+      text = t(`STEPPER_HEADER_${name.toUpperCase()}_${activeStep}`);
+    }
+
+    return (
+      <div className={styles.operate}>
+        {activeStep > 1 && (
+          <label onClick={prevStep}>
+            ←&nbsp;{t('Back')}&nbsp;
+            <span className={styles.operateText}>{text}</span>
+          </label>
+        )}
+        <label className="pull-right" onClick={funcBack}>
+          {t('Esc')}&nbsp;
+          <Icon name="close" size={20} type="dark" />
+        </label>
+      </div>
+    );
+  }
+
+  renderTitle() {
+    const { name, stepOption, t } = this.props;
+    const { activeStep, steps } = stepOption;
+
+    if (activeStep > steps) {
+      return null;
+    }
+
+    const nameKey = name.toUpperCase();
+    const header = t(`STEPPER_NAME_${nameKey}_HEADER`, {
+      activeStep,
+      steps
+    });
+    const title = t(`STEPPER_TITLE_${nameKey}_${activeStep}`);
+    return (
+      <div className={classnames(styles.stepContent)}>
+        <div className={styles.stepName}>{header}</div>
+        <div className={styles.stepExplain}>{title}</div>
+      </div>
+    );
+  }
+
+  renderFooter() {
+    const {
+      t, stepOption, name, disableNextStep
+    } = this.props;
+    const { activeStep, steps, nextStep } = stepOption;
+
+    if (activeStep > steps) {
+      return null;
+    }
+
+    const keyName = `STEPPER_FOOTER_${name.toLocaleUpperCase()}_${activeStep}`;
+    const tipText = t(keyName);
+    const tipLink = <DocLink name={keyName} />;
+
+    const buttonText = t('Go on');
+
+    return (
+      <div className={styles.footer}>
+        <span className={styles.footerTips}>
+          <span className={styles.footerTipsButton}>{t('Tips')}</span>
+          {tipText}
+          {tipLink}
+        </span>
+        <button
+          className={classnames(styles.button, {
+            [styles.buttonActived]: !disableNextStep
+          })}
+          type="primary"
+          onClick={nextStep}
+        >
+          {/*
+              {activeStep === steps && <Icon className={styles.icon} name="checked-icon" size={20} />}
+            */}
+          <span>{buttonText}</span>
+          <Icon className={styles.icon} name="next-icon" size={20} />
+          {/*
+              {activeStep !== steps && <Icon className={styles.icon} name="next-icon" size={20} />}
+            */}
+        </button>
+      </div>
+    );
+  }
+
+  render() {
+    const { className, children, stepOption } = this.props;
+    return (
+      <div className={classnames(styles.layout)}>
+        {this.renderTopProgress()}
+        {this.renderTopNav()}
+        {this.renderTitle()}
+        <Loading isLoading={stepOption.isLoading}>
+          <div className={className}>{children}</div>
+        </Loading>
+        {this.renderFooter()}
+      </div>
+    );
+  }
+}
+
+export default withRouter(LayoutStepper);