Sheet Modal React Component

Examples

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

    this.state = {
      sheetOpened: false,
    };
  }
  render() {
    return (
      <Page onPageBeforeOut={this.onPageBeforeOut.bind(this)} onPageBeforeRemove={this.onPageBeforeRemove.bind(this)}>
        <Navbar title="Sheet Modal"></Navbar>

        <Block>
          <p>
            <Button fill sheetOpen=".demo-sheet">Open Sheet</Button>
          </p>
          <p>
            <Button fill onClick={this.createSheet.bind(this)}>Create Dynamic Sheet</Button>
          </p>
          <p>
            <Button fill onClick={() => {this.setState({sheetOpened: true})}}>Open Via Prop Change</Button>
          </p>
          <p>
            <Button fill sheetOpen=".demo-sheet-swipe-to-close">Swipe To Close</Button>
          </p>
          <p>
            <Button fill sheetOpen=".demo-sheet-swipe-to-step">Swipe To Step</Button>
          </p>
        </Block>

        <Sheet className="demo-sheet" opened={this.state.sheetOpened} onSheetClosed={() => {this.setState({sheetOpened: false})}}>
          <Toolbar>
            <div className="left"></div>
            <div className="right">
              <Link sheetClose>Close</Link>
            </div>
          </Toolbar>
          {/*  Scrollable sheet content */}
          <PageContent>
            <Block>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa aliquid accusamus perferendis laboriosam...</p>
            </Block>
          </PageContent>
        </Sheet>

        {/* Swipe to close demo sheet */}
        <Sheet
          className="demo-sheet-swipe-to-close"
          style={{height: 'auto', '--f7-sheet-bg-color': '#fff'}}
          swipeToClose
          backdrop
        >
          <PageContent>
            <BlockTitle large>Hello!</BlockTitle>
            <Block>
              <p>Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae adipisci vel voluptatum, autem libero minus dignissimos repellat.</p>
              <p>Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?</p>
            </Block>
          </PageContent>
        </Sheet>

        {/* Swipe to step demo sheet */}
        <Sheet
          className="demo-sheet-swipe-to-step"
          style={{height: 'auto', '--f7-sheet-bg-color': '#fff'}}
          swipeToClose
          swipeToStep
          backdrop
        >
          {/* Initial swipe step sheet content */}
          <div className="sheet-modal-swipe-step">
            <div className="display-flex padding justify-content-space-between align-items-center">
              <div style={{fontSize: '18px'}}><b>Total:</b></div>
              <div style={{fontSize: '22px'}}><b>$500</b></div>
            </div>
            <div className="padding-horizontal padding-bottom">
              <Button large fill>Make Payment</Button>
              <div className="margin-top text-align-center">Swipe up for more details</div>
            </div>
          </div>
          {/* Rest of the sheet content that will opened with swipe */}
          <BlockTitle medium className="margin-top">Your order:</BlockTitle>
          <List noHairlines>
            <ListItem title="Item 1">
              <b slot="after" className="text-color-black">$200</b>
            </ListItem>
            <ListItem title="Item 2">
              <b slot="after" className="text-color-black">$180</b>
            </ListItem>
            <ListItem title="Delivery">
              <b slot="after" className="text-color-black">$120</b>
            </ListItem>
          </List>
        </Sheet>
      </Page>
    );
  }
  createSheet() {
    const self = this;
    const $ = self.$$;
    // Create sheet modal
    if (!self.sheet) {
      self.sheet = self.$f7.sheet.create({
        content: `
          <div class="sheet-modal">
            <div class="toolbar">
              <div class="toolbar-inner justify-content-flex-end">
                <a href="#" class="link sheet-close">Close</a>
              </div>
            </div>
            <div class="sheet-modal-inner">
              <div class="page-content">
                <div class="block">
                  <p>This sheet modal was created dynamically</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                </div>
              </div>
            </div>
          </div>
        `.trim(),
      });
    }
    // Close inline sheet
    if ($('.demo-sheet.modal-in').length > 0) self.$f7.sheet.close('.demo-sheet');
    // Open it
    self.sheet.open();
  }
  onPageBeforeOut() {
    const self = this;
    // Close opened sheets on page out
    self.$f7.sheet.close();
  }
  onPageBeforeRemove() {
    const self = this;
    // Destroy sheet modal when page removed
    if (self.sheet) self.sheet.destroy();
  }
};