Browse Source

sidebar flash fixing

xy 7 năm trước cách đây
mục cha
commit
7c8b06247a
1 tập tin đã thay đổi với 70 bổ sung62 xóa
  1. 70 62
      src/components/app/App.jsx

+ 70 - 62
src/components/app/App.jsx

@@ -133,10 +133,17 @@ class App extends Component {
                         switch (this.state.menuLevel1) {
                             case 'graphql-service':
                                 return (
-                                    <GraphqlSidebar collapsed={this.state.collapsed} onCollapse={this.onCollapse}
-                                                    inlineCollapsed={this.state.inlineCollapsed}
-                                                    sideBar={this.state.sideBar} switchMenu={this.switchMenu}
-                                                    userID={this.state.userID} showModal={this.showModal}/>
+                                    <Sider
+                                        width={200}
+                                        style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
+                                        collapsible
+                                        collapsed={this.state.collapsed}
+                                        onCollapse={this.onCollapse}
+                                    >
+                                        <GraphqlSidebar inlineCollapsed={this.state.inlineCollapsed}
+                                                        sideBar={this.state.sideBar} switchMenu={this.switchMenu}
+                                                        userID={this.state.userID} showModal={this.showModal}/>
+                                    </Sider>
                                 );
                             case 'wechat-service':
                                 return (
@@ -226,10 +233,17 @@ class App extends Component {
                                 );
                             default:
                                 return (
-                                    <GraphqlSidebar collapsed={this.state.collapsed} onCollapse={this.onCollapse}
-                                                    inlineCollapsed={this.state.inlineCollapsed}
-                                                    sideBar={this.state.sideBar} switchMenu={this.switchMenu}
-                                                    userID={this.state.userID} showModal={this.showModal}/>
+                                    <Sider
+                                        width={200}
+                                        style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
+                                        collapsible
+                                        collapsed={this.state.collapsed}
+                                        onCollapse={this.onCollapse}
+                                    >
+                                        <GraphqlSidebar inlineCollapsed={this.state.inlineCollapsed}
+                                                        sideBar={this.state.sideBar} switchMenu={this.switchMenu}
+                                                        userID={this.state.userID} showModal={this.showModal}/>
+                                    </Sider>
                                 );
                         }
                     })()}
@@ -298,63 +312,57 @@ class GraphqlSidebar extends Component {
                             if (loading) return <Spin style={{marginLeft: 3}}/>;
                             if (error) return 'error!';
                             return (
-                                <Sider
-                                    width={200}
-                                    style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
-                                    collapsible
-                                    collapsed={this.props.collapsed}
-                                    onCollapse={this.props.onCollapse}
+                                <Menu
+                                    theme="dark"
+                                    mode="inline"
+                                    inlineCollapsed={this.props.inlineCollapsed}
+                                    defaultSelectedKeys={['e-commerce']}
+                                    defaultOpenKeys={['trial-case', 'my-create']}
+                                    // openKeys={['cloud-function']}
+                                    onClick={(e) => this.props.switchMenu('sideBar', e)}
+                                    selectedKeys={[this.props.sideBar]}
+                                    style={{
+                                        borderRight: 0,
+                                        overflow: 'auto',
+                                        height: '100vh',
+                                        left: '0',
+                                        width: '200px',
+                                        position: 'fixed'
+                                    }}
                                 >
-                                    <Menu
-                                        theme="dark"
-                                        mode="inline"
-                                        inlineCollapsed={this.props.inlineCollapsed}
-                                        defaultSelectedKeys={['e-commerce']}
-                                        defaultOpenKeys={['trial-case', 'my-create']}
-                                        // openKeys={['cloud-function']}
-                                        onClick={(e) => this.props.switchMenu('sideBar', e)}
-                                        selectedKeys={[this.props.sideBar]}
-                                        style={{
-                                            borderRight: 0,
-                                            overflow: 'auto',
-                                            height: '100vh',
-                                            left: '0',
-                                            width: '200px',
-                                            position: 'fixed'
-                                        }}
-                                    >
-                                        <SubMenu key="trial-case"
-                                                 title={<span><Icon type="appstore"
-                                                                    theme="twoTone"/><span>Trial Case</span></span>}>
-                                            <Menu.Item key="e-commerce"><Link
-                                                to="/graphql-service/trial-case/e-commerce">e-commerce</Link></Menu.Item>
-                                            <Menu.Item key="keep accounts"><Link
-                                                to="/graphql-service/trial-case/keep accounts">keep
-                                                accounts</Link></Menu.Item>
-                                            <Menu.Item key="appointment"><Link
-                                                to="/graphql-service/trial-case/appointment">appointment</Link></Menu.Item>
-                                        </SubMenu>
+                                    <SubMenu key="trial-case"
+                                             title={<span><Icon type="appstore"
+                                                                theme="twoTone"/><span>Trial Case</span></span>}>
+                                        <Menu.Item key="e-commerce"><Link
+                                            to="/graphql-service/trial-case/e-commerce">e-commerce</Link></Menu.Item>
+                                        <Menu.Item key="keep accounts"><Link
+                                            to="/graphql-service/trial-case/keep accounts">keep
+                                            accounts</Link></Menu.Item>
+                                        <Menu.Item key="appointment"><Link
+                                            to="/graphql-service/trial-case/appointment">appointment</Link></Menu.Item>
+                                    </SubMenu>
+
+                                    <Menu.Item key="create-graphql" onClick={this.props.showModal}>
+                                        <Icon type="edit" theme="twoTone"/>
+                                        <span>Create</span>
+                                        <Icon type="plus" style={{
+                                            position: 'absolute',
+                                            top: '35%',
+                                            right: '6px',
+                                            color: 'white'
+                                        }}/>
+                                    </Menu.Item>
 
-                                        <Menu.Item key="create-graphql" onClick={this.props.showModal}>
-                                            <Icon type="edit" theme="twoTone" />
-                                            <span>Create</span>
-                                            <Icon type="plus" style={{
-                                                position: 'absolute',
-                                                top: '35%',
-                                                right: '6px',
-                                                color: 'white'}}/>
-                                        </Menu.Item>
+                                    <SubMenu key="my-create" title={<span><Icon type="user"
+                                                                                theme="outlined"/><span>My Create</span></span>}>
+                                        {
+                                            data.schema_by_props.map((schema) => <Menu.Item
+                                                key={schema.schemaName}><Link
+                                                to={`/graphql-service/my-create/${schema.id}`}>{schema.schemaName}</Link></Menu.Item>)
+                                        }
+                                    </SubMenu>
+                                </Menu>
 
-                                        <SubMenu key="my-create" title={<span><Icon type="user"
-                                                                                    theme="outlined"/><span>My Create</span></span>}>
-                                            {
-                                                data.schema_by_props.map((schema) => <Menu.Item
-                                                    key={schema.schemaName}><Link
-                                                    to={`/graphql-service/my-create/${schema.id}`}>{schema.schemaName}</Link></Menu.Item>)
-                                            }
-                                        </SubMenu>
-                                    </Menu>
-                                </Sider>
                             )
                         }
                     }