adminnistrateur
/
ilink-world
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ilink-world/docs/.docz/dist/screen/drawer-lateral/index.html

3 lines
56 KiB
HTML
Raw Normal View History

Before upgrade to react-native 0.61
2020-03-12 15:14:51 +00:00
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/ilink-world/styles.2543ff947a193d7f33b1.css">@import url(https://fonts.googleapis.com/css?family=Inconsolata&display=swap);@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap);</style><meta name="generator" content="Gatsby 2.19.23"/><title data-rh="true">DrawerLateral | Ilink Documentation</title><meta data-rh="true" name="description" content="iLink Wolrd Documentation"/><meta data-rh="true" property="og:title" content="DrawerLateral"/><meta data-rh="true" property="og:description" content="iLink Wolrd Documentation"/><meta data-rh="true" property="og:type" content="website"/><meta data-rh="true" name="twitter:card" content="summary"/><meta data-rh="true" name="twitter:title" content="DrawerLateral"/><meta data-rh="true" name="twitter:description" content="iLink Wolrd Documentation"/><link as="script" rel="preload" href="/ilink-world/webpack-runtime-9e5853327598d6460c5f.js"/><link as="script" rel="preload" href="/ilink-world/styles-20f0d68269fa3624f1d7.js"/><link as="script" rel="preload" href="/ilink-world/app-20731433c17110cace49.js"/><link as="script" rel="preload" href="/ilink-world/commons-c1f2fd74d1b8d5629a84.js"/><link as="script" rel="preload" href="/ilink-world/component---screen-drawer-drawer-screen-mdx-af1231ad75b5d0b3c47e.js"/><link as="fetch" rel="preload" href="/ilink-world/page-data\screen\drawer-lateral\page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/ilink-world/page-data\app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><style data-emotion-css="1ouyflx">.css-1ouyflx{font-family:'Source Sans Pro',sans-serif;font-size:20px;font-weight:400;line-height:1.5;color:var(--theme-ui-colors-text,#2D3747);background-color:var(--theme-ui-colors-background,#FFFFFF);}</style><div class="css-1ouyflx"><style data-emotion-css="jrjj6h">.css-jrjj6h > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><style data-emotion-css="1ubpee3">.css-1ubpee3{min-height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-1ubpee3 > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><style data-emotion-css="hbri28">.css-hbri28{box-sizing:border-box;min-width:0;min-height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-hbri28 > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><div data-testid="layout" class="css-hbri28"><style data-emotion-css="1xva7m0">body{margin:0;padding:0;}.icon-link{display:none;}.with-overlay{overflow:hidden;}</style><style data-emotion-css="zf0iqh">.css-zf0iqh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><style data-emotion-css="1tjxv7i">.css-1tjxv7i{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><style data-emotion-css="238csb">.css-238csb{box-sizing:border-box;min-width:0;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><main class="css-238csb"><style data-emotion-css="18wmtq">.css-18wmtq{background-color:var(--theme-ui-colors-header-bg,#F5F6F7);position:relative;z-index:1;border-bottom:1px solid var(--theme-ui-colors-border,#CED4DE);}</style><div data-testid="header" class="css-18wmtq
Elle contient l&#x27;ensemble des options de menu disponibles au sein de l&#x27;application iLink World.</p><br/><p class="css-1ftn47p">Elle distingue notamment les types d&#x27;utilisateurs, et affiche un menu en fonciton du type de comtpe de l&#x27;utilisateur connecté.</p><p class="css-1ftn47p">⚠️ Des composants plus récents existent</p><p class="css-1ftn47p">Il des composants plus récents, pour plus d&#x27;ergonomie et de flexibilité notamment <a href="https://reactnavigation.org/docs/drawer-based-navigation/" class="css-1iv9jyz">Drawer-Navigation</a></p><h2 id="initialisation"><style data-emotion-css="1r0pe6c">.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}</style><a href="#initialisation" class="css-1r0pe6c">Initialisation</a></h2><p class="css-1ftn47p">Après l&#x27;étape de connexion de l&#x27;utilisateur, une interface lui ai affiché en fonction du type de son compte.</p><br/><h2 id="menu-utilisateur"><a href="#menu-utilisateur" class="css-1r0pe6c">Menu Utilisateur</a></h2><style data-emotion-css="2abk98">.css-2abk98{padding:0;margin:0;margin-bottom:16px;border:0;border-bottom:1px solid var(--theme-ui-colors-border,#CED4DE);margin-top:-1px;}</style><hr class="css-2abk98"/><p class="css-1ftn47p">Dans le cas d&#x27;un compte de type &#x27;Utilisateur&#x27;, le menu par défaut lui affiché ceci par la fonction suivante:</p><div><style data-emotion-css="1h0sj8d">.css-1h0sj8d{padding:16px;margin:0;margin-bottom:32px;font-size:85%;margin-top:32px;text-align:left;font-family:Inconsolata;border-radius:4px;}.css-1h0sj8d dark{[object Object];}.css-1h0sj8d light{[object Object];}</style><pre class="language-javascript prism-code language-javascript css-1h0sj8d" style="font-family:Inconsolata;color:#393A34;background-color:#f6f8fa;overflow-x:auto" data-testid="code"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><style data-emotion-css="1baulvz">.css-1baulvz{display:inline-block;}</style><span class="token function css-1baulvz" style="color:#d73a49">getUserMenu</span><span class="token punctuation css-1baulvz" style="color:#393A34">(</span><span class="token punctuation css-1baulvz" style="color:#393A34">)</span><span class="token plain css-1baulvz"> </span><span class="token punctuation css-1baulvz" style="color:#393A34">{</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"> </span><span class="token keyword css-1baulvz" style="color:#00009f">return</span><span class="token plain css-1baulvz"> </span><span class="token punctuation css-1baulvz" style="color:#393A34">[</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"> </span><span class="token punctuation css-1baulvz" style="color:#393A34">{</span><span class="token plain css-1baulvz"> title</span><span class="token punctuation css-1baulvz" style="color:#393A34">:</span><span class="token plain css-1baulvz"> </span><span class="token maybe-class-name css-1baulvz">I18n</span><span class="token punctuation css-1baulvz" style="color:#393A34">.</span><span class="token method function property-access css-1baulvz" style="color:#d73a49">t</span><span class="token punctuation css-1baulvz" style="color:#393A34">(</span><span class="token string css-1baulvz" style="color:#e3116c">&#x27;MAP&#x27;</span><span class="token punctuation css-1baulvz" style="color:#393A34">)</span><span class="token punctuation css-1baulvz" style="color:#393A34">,</span><span class="token plain css-1baulvz"> id</span><span class="token punctuation css-1baulvz" style="color:#393A34">:</span><span class="token plain css-1baulvz"> </span><span class="token number css-1baulvz" style="color:#36acaa">0</span><span class="token punctuation css-1baulvz" style="color:#393A34">,</span><span class="token plain css-1baulvz"> key
Ceci se fait premièrement par l&#x27;affichage d&#x27;une boîte de dialogue demandant à l&#x27;utilisateur de confirmer sa déconnexion, une fois que celà est fait un évenement est dispatché au sein de l&#x27;application ce qui permet au fonction qui écoute cette évenement de se déclencher.</p><div><pre class="language-javascript prism-code language-javascript css-1h0sj8d" style="font-family:Inconsolata;color:#393A34;background-color:#f6f8fa;overflow-x:auto" data-testid="code"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token function css-1baulvz" style="color:#d73a49">disconnect</span><span class="token punctuation css-1baulvz" style="color:#393A34">(</span><span class="token punctuation css-1baulvz" style="color:#393A34">)</span><span class="token plain css-1baulvz"> </span><span class="token punctuation css-1baulvz" style="color:#393A34">{</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"> </span><span class="token maybe-class-name css-1baulvz">IlinkEmitter</span><span class="token punctuation css-1baulvz" style="color:#393A34">.</span><span class="token method function property-access css-1baulvz" style="color:#d73a49">emit</span><span class="token punctuation css-1baulvz" style="color:#393A34">(</span><span class="token string css-1baulvz" style="color:#e3116c">&quot;userdisconnect&quot;</span><span class="token punctuation css-1baulvz" style="color:#393A34">)</span><span class="token punctuation css-1baulvz" style="color:#393A34">;</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"> </span><span class="token maybe-class-name css-1baulvz">Navigation</span><span class="token punctuation css-1baulvz" style="color:#393A34">.</span><span class="token method function property-access css-1baulvz" style="color:#d73a49">setStackRoot</span><span class="token punctuation css-1baulvz" style="color:#393A34">(</span><span class="token plain css-1baulvz">route</span><span class="token punctuation css-1baulvz" style="color:#393A34">.</span><span class="token property-access css-1baulvz">stackRoot</span><span class="token punctuation css-1baulvz" style="color:#393A34">,</span><span class="token plain css-1baulvz"> </span><span class="token punctuation css-1baulvz" style="color:#393A34">{</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"> component</span><span class="token punctuation css-1baulvz" style="color:#393A34">:</span><span class="token plain css-1baulvz"> </span><span class="token punctuation css-1baulvz" style="color:#393A34">{</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"> name</span><span class="token punctuation css-1baulvz" style="color:#393A34">:</span><span class="token plain css-1baulvz"> route</span><span class="token punctuation css-1baulvz" style="color:#393A34">.</span><span class="token property-access css-1baulvz">login</span><span class="token punctuation css-1baulvz" style="color:#393A34">,</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"> animated</span><span class="token punctuation css-1baulvz" style="color:#393A34">:</span><span class="token plain css-1baulvz"> </span><span class="token boolean css-1baulvz" style="color:#36acaa">true</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"> </span><span class="token punctuation css-1baulvz" style="color:#393A34">}</span><span class="token plain css-1baulvz"></span></div><div