Merge remote-tracking branch 'baidu/master'

README.md

@@ -6,7 +6,7 @@
 
 ## 入门介绍
 
-请阅读 <https://baidu.github.io/amis/docs/intro>
+请阅读 <https://baidu.github.io/amis/docs/index>
 
 ## 相关工具及平台
 

examples/components/App.tsx

@@ -23,11 +23,13 @@ import classnames from 'classnames';
 import Doc, {docs} from './Doc';
 import Example, {examples} from './Example';
 
-let PathPrefix = '/examples';
+let ExamplePathPrefix = '/examples';
+let DocPathPrefix = '/docs';
 let ContextPath = '';
 
 if (process.env.NODE_ENV === 'production') {
-  PathPrefix = '';
+  ExamplePathPrefix = '';
+  DocPathPrefix = '';
   ContextPath = '/amis';
 }
 
@@ -62,6 +64,14 @@ const locales = [
   }
 ];
 
+function getPath(path) {
+  return path
+    ? path[0] === '/'
+      ? ContextPath + path
+      : `${ContextPath}/${path}`
+    : '';
+}
+
 @withRouter
 export class App extends React.PureComponent {
   state = {
@@ -178,7 +188,9 @@ export class App extends React.PureComponent {
         i.isOpen ??
         (Array.isArray(i.children) &&
           i.children.length &&
-          !!~i.children.findIndex(item => item.path === location.pathname));
+          !!~i.children.findIndex(
+            item => getPath(item.path) === location.pathname
+          ));
       return {
         ...i,
         isOpen: item.label === i.label ? !defaultOpen : defaultOpen
@@ -220,10 +232,10 @@ export class App extends React.PureComponent {
 
         <div className={`${theme.ns}Layout-headerBar`}>
           <ul className={`${theme.ns}Layout-headerBar-links pull-left`}>
-            <Link to="/docs" activeClassName="is-active">
+            <Link to={`${ContextPath}/docs`} activeClassName="is-active">
               文档
             </Link>
-            <Link to="/examples" activeClassName="is-active">
+            <Link to={`${ContextPath}/examples`} activeClassName="is-active">
               示例
             </Link>
           </ul>
@@ -263,6 +275,14 @@ export class App extends React.PureComponent {
         <div className={`${theme.ns}Layout-searchBar`}>
           <DocSearch theme={this.state.theme.value} />
         </div>
+
+        <a
+          className="gh-icon"
+          href="https://github.com/baidu/amis"
+          target="_blank"
+        >
+          <i className="fa fa-github" />
+        </a>
       </>
     );
   }
@@ -270,13 +290,13 @@ export class App extends React.PureComponent {
   renderNavigation(navs, parent?: any) {
     const pathname = location.pathname;
     return navs.map(nav => {
-      const path = nav.path;
+      const path = getPath(nav.path);
       const hasChildren = Array.isArray(nav.children) && nav.children.length;
       const isOpen =
         nav.isOpen ||
         (nav.isOpen !== false &&
           hasChildren &&
-          !!~nav.children.findIndex(item => item.path === pathname));
+          !!~nav.children.findIndex(item => getPath(item.path) === pathname));
 
       return (
         <div
@@ -290,7 +310,7 @@ export class App extends React.PureComponent {
           <Link
             onClick={e => {
               browserHistory.push(
-                `${path || (hasChildren && nav.children[0].path)}`
+                `${path || (hasChildren && getPath(nav.children[0].path))}`
               );
               !isOpen && this.toggleOpen(e, nav);
             }}
@@ -371,7 +391,7 @@ export class App extends React.PureComponent {
   }
 }
 
-function navigations2route(pathPrefix = PathPrefix, navigations) {
+function navigations2route(pathPrefix = DocPathPrefix, navigations) {
   let routes = [];
 
   navigations.forEach(root => {
@@ -384,7 +404,7 @@ function navigations2route(pathPrefix = PathPrefix, navigations) {
               path={
                 item.path[0] === '/'
                   ? ContextPath + item.path
-                  : `${ContextPath}${pathPrefix}/${item.path}`
+                  : `${ContextPath}/${item.path}`
               }
               component={item.component}
             />
@@ -396,7 +416,7 @@ function navigations2route(pathPrefix = PathPrefix, navigations) {
               path={
                 item.path[0] === '/'
                   ? ContextPath + item.path
-                  : `${ContextPath}${pathPrefix}/${item.path}`
+                  : `${ContextPath}/${item.path}`
               }
               getComponent={item.getComponent}
             />
@@ -409,19 +429,25 @@ function navigations2route(pathPrefix = PathPrefix, navigations) {
 }
 
 export default function entry({pathPrefix}) {
-  PathPrefix = pathPrefix || PathPrefix;
+  // PathPrefix = pathPrefix || DocPathPrefix;
   return (
     <Router history={browserHistory}>
       <Route component={App}>
         <Redirect from={`${ContextPath}/`} to={`${ContextPath}/docs/index`} />
-        <Redirect from={`/examples`} to={`/examples/pages/simple`} />
-        <Redirect from={`/docs`} to={`/docs/index`} />
+        <Redirect
+          from={`${ContextPath}/docs`}
+          to={`${ContextPath}/docs/index`}
+        />
+        <Redirect
+          from={`${ContextPath}/examples`}
+          to={`${ContextPath}/examples/pages/simple`}
+        />
 
-        <Route path="/docs" component={Doc}>
-          {navigations2route('/docs', docs)}
+        <Route path={`${ContextPath}/docs`} component={Doc}>
+          {navigations2route(DocPathPrefix, docs)}
         </Route>
-        <Route path="/examples" component={Example}>
-          {navigations2route('/examples', examples)}
+        <Route path={`${ContextPath}/examples`} component={Example}>
+          {navigations2route(ExamplePathPrefix, examples)}
         </Route>
       </Route>
 

examples/components/Doc.tsx

@@ -652,9 +652,9 @@ export const docs = [
       },
       {
         label: 'Cards 卡片组',
-        path: '/docs/components/component',
+        path: '/docs/components/cards',
         getComponent: (location, cb) =>
-          require(['../../docs/components/component.md'], doc => {
+          require(['../../docs/components/cards.md'], doc => {
             cb(null, makeMarkdownRenderer(doc));
           })
       },

examples/components/Example.tsx

@@ -73,20 +73,6 @@ import Tab1Schema from './Tabs/Tab1';
 import Tab2Schema from './Tabs/Tab2';
 import Tab3Schema from './Tabs/Tab3';
 import TestComponent from './Test';
-import Select from '../../src/components/Select';
-import Button from '../../src/components/Button';
-import DocSearch from './DocSearch';
-import {groupBy} from 'lodash';
-import classnames from 'classnames';
-import Doc, {docs} from './Doc';
-
-let PathPrefix = '/examples';
-let ContextPath = '';
-
-if (process.env.NODE_ENV === 'production') {
-  PathPrefix = '';
-  ContextPath = '/amis';
-}
 
 export const examples = [
   {

examples/components/SchemaRender.jsx

@@ -187,6 +187,7 @@ export default function (schema) {
             <div className="schema-wrapper">
               {showCode !== false ? (
                 <DrawerContainer
+                  disabled
                   classPrefix={ns}
                   size="lg"
                   onHide={this.close}

examples/style.scss

@@ -3,9 +3,9 @@
 @import '../scss/variables';
 
 body {
-  background-color: #fff;
+  background-color: #fff !important;
   &.dark {
-    background-color: #333538;
+    background-color: #333538 !important;
   }
 }
 
@@ -116,6 +116,19 @@ body {
         right: 0;
         box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
       }
+
+      .gh-icon {
+        position: fixed;
+        right: 20px;
+        top: 15px;
+        font-size: 22px;
+        padding: 0 10px;
+        color: #333;
+
+        &:hover {
+          color: #333;
+        }
+      }
     }
 
     &-brandBar,
@@ -193,7 +206,7 @@ body {
     }
 
     &-searchBar {
-      width: 220px;
+      width: 120px;
 
       .Doc-search {
         top: 15px;
@@ -282,7 +295,7 @@ body {
 
   &-toc {
     margin: 30px 0;
-    width: 220px;
+    width: 120px;
   }
 
   &-navigation {
@@ -293,7 +306,7 @@ body {
 
       > a {
         // font-size: 16px;
-        // font-weight: 700;
+        font-weight: 700;
         font-size: 14px;
         color: #666;
         padding-left: 0;
@@ -310,7 +323,7 @@ body {
         display: block;
         position: absolute;
         right: 20px;
-        top: 10px;
+        top: 5px;
         // color: #666;
 
         // &:hover {
@@ -497,7 +510,7 @@ body {
     > .a-Page,
     > .cxd-Page,
     > .dark-Page {
-      padding: 0 45px;
+      padding: 0 35px;
     }
   }
 }
@@ -580,6 +593,7 @@ body {
   &.visible {
     opacity: 1;
     z-index: 0;
+    z-index: 1;
   }
 }
 

fis-conf.js

@@ -613,8 +613,8 @@ if (fis.project.currentMedia() === 'publish') {
       }),
       function (ret) {
         const indexHtml = ret.src['/examples/index.html'];
-        const appJs = ret.src['/examples/components/App.jsx'];
-        const DocJs = ret.src['/examples/components/Doc.jsx'];
+        const appJs = ret.src['/examples/components/App.tsx'];
+        const DocJs = ret.src['/examples/components/Doc.tsx'];
 
         const pages = [];
         const source = [appJs.getContent(), DocJs.getContent()].join('\n');

scss/_variables.scss

@@ -1335,6 +1335,7 @@ $Wizard-steps-bg--isComplete: #f1f5f9 !default;
 
 // Page
 $Page-aside-width: px2rem(200px) !default;
+$Page-aside-maxWidth: px2rem(300px) !default;
 $Page-aside-bg: desaturate(darken($light, 3%), 2.5%) !default;
 $Page-content-paddingY: 0 !default;
 $Page-content-paddingX: 0 !default;

scss/components/_page.scss

@@ -81,7 +81,8 @@
       border: inherit;
     }
 
-    width: $Page-aside-width;
+    min-width: $Page-aside-width;
+    max-width: $Page-aside-maxWidth;
     border-right: $borderWidth solid $borderColor;
   }
 

scss/components/form/_group.scss

@@ -91,6 +91,10 @@
     width: 0;
     max-width: 100%;
     margin-bottom: 0;
+
+    .#{$ns}TextControl {
+      min-width: unset;
+    }
   }
 
   @for $i from (1) through $Form--horizontal-columns {