feat: Create app

Author: liiil825

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/Input/input.jsx

@@ -1,42 +1,74 @@
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import _ from 'lodash';
 
 import Icon from '../Icon';
 
 import styles from './index.scss';
 
+@observer
 export default class Input extends React.Component {
   static propTypes = {
     className: PropTypes.string,
     disabled: PropTypes.bool,
     icon: PropTypes.string,
     iconSize: PropTypes.number,
-    iconType: PropTypes.string
+    iconType: PropTypes.string,
+    valueChange: PropTypes.func
   };
 
   static defaultProps = {
     className: '',
     icon: '',
     iconType: 'light',
     iconSize: 16,
+    valueChange: _.noop,
+    onChange: _.noop,
     disabled: false
   };
 
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(event) {
+    const { target } = event;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const name = target.name;
+
+    this.props.valueChange(name, value);
+    this.props.onChange(event);
+  }
+
   render() {
     const {
-      className, icon, iconType, iconSize, ...rest
+      className,
+      icon,
+      iconType,
+      iconSize,
+      onChange,
+      valueChange,
+      ...rest
     } = this.props;
 
     if (icon) {
       return (
         <div className={classnames(styles.inputGroup, className)}>
           <Icon name={icon} type={iconType} size={iconSize} />
-          <input className={styles.input} {...rest} />
+          <input className={styles.input} onChange={this.onChange} {...rest} />
         </div>
       );
     }
 
-    return <input className={classnames(styles.input, className)} {...rest} />;
+    return (
+      <input
+        className={classnames(styles.input, className)}
+        onChange={this.onChange}
+        {...rest}
+      />
+    );
   }
 }

src/components/Base/Link/index.jsx

@@ -0,0 +1,50 @@
+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 Loading extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    to: PropTypes.string,
+    type: PropTypes.string
+  };
+
+  static defaultProps = {
+    children: null,
+    className: '',
+    type: ''
+  };
+
+  render() {
+    const {
+      t, to, type, children, className
+    } = this.props;
+    let text = t(`LINK_${type}`);
+    const linkTo = to || links[type];
+    if (text === `LINK_${type}`) {
+      text = linkTo;
+    }
+    if (children) {
+      text = children;
+    }
+    if (!text) {
+      return null;
+    }
+    if (!linkTo) {
+      console.error(
+        "You should edit a link url in the file of 'config/doc-links'"
+      );
+    }
+
+    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() {

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 Link from './Link';

src/components/Dashboard/Header/index.jsx

@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { translate } from 'react-i18next';
+import { noop } from 'lodash';
+
+import { Link } from 'react-router-dom';
+import { Icon, Button, Input } from 'components/Base';
+
+import styles from './index.scss';
+
+@translate()
+export default class HeaderDashboard extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    isFixed: PropTypes.bool,
+    name: PropTypes.string,
+    noSearchBox: PropTypes.bool,
+    placeholder: PropTypes.string,
+    store: PropTypes.shape({
+      searchWord: PropTypes.string,
+      onClear: PropTypes.func,
+      onSearch: PropTypes.func
+    }),
+    withCreateBtn: PropTypes.shape({
+      linkTo: PropTypes.string,
+      onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+    })
+  };
+
+  static defaultProps = {
+    className: '',
+    name: '',
+    isFixed: false,
+    store: {
+      searchWord: '',
+      onSearch: noop,
+      onClear: noop
+    },
+    placeholder: '',
+    inputMaxLen: 50,
+    withCreateBtn: {
+      linkTo: '',
+      onClick: ''
+    },
+    noSearchBox: false
+  };
+
+  render() {
+    const {
+      className,
+      isFixed,
+      name,
+      store,
+      placeholder,
+      inputMaxLen,
+      withCreateBtn,
+      noSearchBox,
+      t
+    } = this.props;
+    const { onSearch, onClear, searchWord } = store;
+
+    return (
+      <div
+        className={classnames(className, styles.header, {
+          [styles.fixedHeader]: isFixed
+        })}
+      >
+        <div className={styles.name}>{name}</div>
+        {!noSearchBox && (
+          <Input.Search
+            className={styles.search}
+            placeholder={placeholder}
+            value={searchWord}
+            onSearch={onSearch}
+            onClear={onClear}
+            maxLength={inputMaxLen}
+          />
+        )}
+        {withCreateBtn.linkTo && (
+          <Link to={withCreateBtn.linkTo}>
+            <Button className={styles.btnCreate} type="primary">
+              <Icon name="add" size={20} type="white" />
+              <span className={styles.btnText}>
+                {' '}
+                {withCreateBtn.name || t('Create')}{' '}
+              </span>
+            </Button>
+          </Link>
+        )}
+        {withCreateBtn.onClick && (
+          <Button
+            className={styles.btnCreate}
+            type="primary"
+            onClick={withCreateBtn.onClick}
+          >
+            <Icon name="add" size={20} type="white" />
+            <span className={styles.btnText}>
+              {' '}
+              {withCreateBtn.name || t('Create')}{' '}
+            </span>
+          </Button>
+        )}
+      </div>
+    );
+  }
+}

src/components/Dashboard/Header/index.scss

@@ -0,0 +1,38 @@
+@import '~scss/vars';
+
+.header {
+  display: flex;
+  padding: 0 20px;
+  height: 64px;
+  background: $N0;
+  align-items: center;
+
+  .name {
+    flex: 1;
+  }
+
+  .search {
+    width: 232px;
+    margin-right: 12px;
+  }
+
+  .btnCreate {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  :global {
+    .icon {
+      margin-right: 4px;
+    }
+  }
+}
+.header.fixedHeader {
+  position: fixed;
+  top: 0;
+  left: 60px;
+  right: 0;
+
+  z-index: 10;
+}

src/components/Dashboard/index.jsx

@@ -0,0 +1 @@
+export Header from './Header';