framework7-cli/create/templates/react/generate-root.js

Framework7 command line utility (CLI)

const indent = require('../../utils/indent');
const templateIf = require('../../utils/template-if');
const appParameters = require('../app-parameters');

module.exports = (options) => {
  const {
    template,
    type,
    theming,
    customBuild,
  } = options;

  // Panels
  const leftPanelPlain = indent(12, `
    {/* Left panel with cover effect*/}
    <Panel left cover themeDark>
      <View>
        <Page>
          <Navbar title="Left Panel"/>
          <Block>Left panel content goes here</Block>
        </Page>
      </View>
    </Panel>
  `);

  const leftPanelWithView = indent(12, `
    {/* Left panel with cover effect when hidden */}
    <Panel left cover themeDark visibleBreakpoint={960}>
      <View>
        <Page>
          <Navbar title="Left Panel"/>
          <BlockTitle>Left View Navigation</BlockTitle>
          <List>
            <ListItem link="/left-page-1/" title="Left Page 1"/>
            <ListItem link="/left-page-2/" title="Left Page 2"/>
          </List>
          <BlockTitle>Control Main View</BlockTitle>
          <List>
            <ListItem link="/about/" view=".view-main" panelClose title="About"/>
            <ListItem link="/form/" view=".view-main" panelClose title="Form"/>
            <ListItem link="#" view=".view-main" back panelClose title="Back in history"/>
          </List>
        </Page>
      </View>
    </Panel>
  `);
  const leftPanel = template === 'split-view' ? leftPanelWithView : leftPanelPlain;
  const rightPanel = indent(12, `
    {/* Right panel with reveal effect*/}
    <Panel right reveal themeDark>
      <View>
        <Page>
          <Navbar title="Right Panel"/>
          <Block>Right panel content goes here</Block>
        </Page>
      </View>
    </Panel>
  `);

  // Views
  let views = '';
  if (template === 'single-view' || template === 'split-view' || template === 'blank') {
    views = indent(12, `
      {/* Your main view, should have "view-main" class */}
      <View main className="safe-areas" url="/" />
    `);
  }
  if (template === 'tabs') {
    views = indent(12, `
      {/* Views/Tabs container */}
      <Views tabs className="safe-areas">
        {/* Tabbar for switching views-tabs */}
        <Toolbar tabbar labels bottom>
          <Link tabLink="#view-home" tabLinkActive iconIos="f7:house_fill" iconAurora="f7:house_fill" iconMd="material:home" text="Home" />
          <Link tabLink="#view-catalog" iconIos="f7:square_list_fill" iconAurora="f7:square_list_fill" iconMd="material:view_list" text="Catalog" />
          <Link tabLink="#view-settings" iconIos="f7:gear" iconAurora="f7:gear" iconMd="material:settings" text="Settings" />
        </Toolbar>

        {/* Your main view/tab, should have "view-main" class. It also has "tabActive" prop */}
        <View id="view-home" main tab tabActive url="/" />

        {/* Catalog View */}
        <View id="view-catalog" name="catalog" tab url="/catalog/" />

        {/* Settings View */}
        <View id="view-settings" name="settings" tab url="/settings/" />

      </Views>
    `);
  }

  return indent(0, `
    import React from 'react';
    ${templateIf(type.indexOf('cordova') >= 0, () => `
    import { Device }  from '${customBuild ? '../js/framework7-custom.js' : 'framework7/framework7-lite.esm.bundle.js'}';
    `)}
    ${template === 'blank' ? `
    import {
      App,
      View,
    } from 'framework7-react';
    `.trim() : `
    import {
      App,
      Panel,
      Views,
      View,
      Popup,
      Page,
      Navbar,
      Toolbar,
      NavRight,
      Link,
      Block,
      BlockTitle,
      LoginScreen,
      LoginScreenTitle,
      List,
      ListItem,
      ListInput,
      ListButton,
      BlockFooter
    } from 'framework7-react';
    `.trim()}
    ${templateIf(type.indexOf('cordova') >= 0, () => `
    import cordovaApp from '../js/cordova-app';
    `)}
    import routes from '../js/routes';

    export default class extends React.Component {
      constructor() {
        super();

        this.state = {
          // Framework7 Parameters
          f7params: {
            ${indent(12, appParameters(options)).trim()}
          },
          ${templateIf(template !== 'blank', () => `
          // Login screen demo data
          username: '',
          password: '',
          `)}
        }
      }
      ${template === 'blank' ? `
      render() {
        return (
          <App params={ this.state.f7params } ${theming.darkTheme ? 'themeDark' : ''}>
            ${views}
          </App>
        );
      }
      `.trim() : `
      render() {
        return (
          <App params={ this.state.f7params } ${theming.darkTheme ? 'themeDark' : ''}>
            ${leftPanel}
            ${rightPanel}
            ${views}
            {/* Popup */}
            <Popup id="my-popup">
              <View>
                <Page>
                  <Navbar title="Popup">
                    <NavRight>
                      <Link popupClose>Close</Link>
                    </NavRight>
                  </Navbar>
                  <Block>
                    <p>Popup content goes here.</p>
                  </Block>
                </Page>
              </View>
            </Popup>

            <LoginScreen id="my-login-screen">
              <View>
                <Page loginScreen>
                  <LoginScreenTitle>Login</LoginScreenTitle>
                  <List form>
                    <ListInput
                      type="text"
                      name="username"
                      placeholder="Your username"
                      value={this.state.username}
                      onInput={(e) => this.setState({username: e.target.value})}
                    ></ListInput>
                    <ListInput
                      type="password"
                      name="password"
                      placeholder="Your password"
                      value={this.state.password}
                      onInput={(e) => this.setState({password: e.target.value})}
                    ></ListInput>
                  </List>
                  <List>
                    <ListButton title="Sign In" onClick={() => this.alertLoginData()} />
                    <BlockFooter>
                      Some text about login information.<br />Click "Sign In" to close Login Screen
                    </BlockFooter>
                  </List>
                </Page>
              </View>
            </LoginScreen>
          </App>
        )
      }
      `.trim()}
      ${templateIf(template !== 'blank', () => `
      alertLoginData() {
        this.$f7.dialog.alert('Username: ' + this.state.username + '<br>Password: ' + this.state.password, () => {
          this.$f7.loginScreen.close();
        });
      }
      `)}
      componentDidMount() {
        this.$f7ready((f7) => {
          ${templateIf(type.indexOf('cordova') >= 0, () => `
          // Init cordova APIs (see cordova-app.js)
          if (Device.cordova) {
            cordovaApp.init(f7);
          }
          `.trim())}
          // Call F7 APIs here
        });
      }
    }
  `).trim();
};