cf-component-modal

Cloudflare Modal Component

This package has been deprecated. Please find this package under its new name @cloudflare/component-modal.
Last updated 2 years ago by cf-ci-write .
BSD-3-Clause · Original npm · Tarball · package.json
$ cnpm install cf-component-modal 
SYNC missed versions from official npm registry.

cf-component-modal

Cloudflare Modal Component

Installation

Installation with yarn is recommended


$ yarn add cf-component-modal

Usage

import React from 'react';
import {
  Modal,
  ModalHeader,
  ModalTitle,
  ModalClose,
  ModalBody,
  ModalFooter,
  ModalActions,
  ModalInfo
} from 'cf-component-modal';
import { Button } from 'cf-component-button';
import { Box } from 'cf-component-box';

class ModalComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false,
      width: null,
      showInfo: false
    };
    this.handleRequestOpen = this.handleRequestOpen.bind(this);
    this.handleRequestClose = this.handleRequestClose.bind(this);
  }

  handleRequestOpen() {
    this.setState({ isModalOpen: true });
  }

  handleRequestClose() {
    this.setState({ isModalOpen: false });
  }

  handleWidthToggle() {
    this.setState(oldState => ({
      width: oldState.width === 'wide' ? null : 'wide'
    }));
  }

  handleInfoToggle() {
    this.setState(() => ({
      showInfo: !this.state.showInfo
    }));
  }

  render() {
    return (
      <div>
        <Button type="default" onClick={this.handleRequestOpen}>
          Open Modal
        </Button>
        <Modal
          isOpen={this.state.isModalOpen}
          onRequestClose={this.handleRequestClose}
          width={this.state.width}
        >
          <ModalHeader>
            <ModalTitle>Hello from Modal</ModalTitle>
            <ModalClose onClick={this.handleRequestClose} />
          </ModalHeader>
          {this.state.showInfo && (
            <ModalInfo>This is some modal Info</ModalInfo>
          )}
          <ModalBody>
            <p>Look at this awesome modal!</p>
          </ModalBody>
          <ModalFooter>
            <ModalActions>
              <Box marginRight="10px" display="inline-block">
                <Button
                  type="default"
                  onClick={this.handleWidthToggle.bind(this)}
                >
                  Toggle width
                </Button>
              </Box>
              <Box marginRight="10px" display="inline-block">
                <Button
                  type="default"
                  onClick={this.handleInfoToggle.bind(this)}
                >
                  Toggle info
                </Button>
              </Box>
              <Button
                type="default"
                onClick={this.handleRequestClose.bind(this)}
              >
                Close Modal
              </Button>
            </ModalActions>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default ModalComponent;

Current Tags

  • 8.0.0                                ...           latest (2 years ago)
  • 3.0.4                                ...           stable (5 years ago)

102 Versions

  • 8.0.0 [deprecated]           ...           2 years ago
  • 7.1.17 [deprecated]           ...           2 years ago
  • 7.1.16 [deprecated]           ...           2 years ago
  • 7.1.15 [deprecated]           ...           2 years ago
  • 7.1.14 [deprecated]           ...           2 years ago
  • 7.1.13 [deprecated]           ...           3 years ago
  • 7.1.12 [deprecated]           ...           3 years ago
  • 7.1.11 [deprecated]           ...           3 years ago
  • 7.1.10 [deprecated]           ...           3 years ago
  • 7.1.9 [deprecated]           ...           3 years ago
  • 7.1.8 [deprecated]           ...           3 years ago
  • 7.1.7 [deprecated]           ...           3 years ago
  • 7.1.6 [deprecated]           ...           3 years ago
  • 7.1.5 [deprecated]           ...           3 years ago
  • 7.1.4 [deprecated]           ...           3 years ago
  • 7.1.3 [deprecated]           ...           3 years ago
  • 7.1.2 [deprecated]           ...           3 years ago
  • 7.1.1 [deprecated]           ...           3 years ago
  • 7.1.0 [deprecated]           ...           3 years ago
  • 7.0.16 [deprecated]           ...           3 years ago
  • 7.0.15 [deprecated]           ...           3 years ago
  • 7.0.14 [deprecated]           ...           3 years ago
  • 7.0.13 [deprecated]           ...           3 years ago
  • 7.0.12 [deprecated]           ...           3 years ago
  • 7.0.11 [deprecated]           ...           3 years ago
  • 7.0.10 [deprecated]           ...           3 years ago
  • 7.0.9 [deprecated]           ...           3 years ago
  • 7.0.8 [deprecated]           ...           3 years ago
  • 7.0.7 [deprecated]           ...           3 years ago
  • 7.0.6 [deprecated]           ...           3 years ago
  • 7.0.5 [deprecated]           ...           3 years ago
  • 7.0.4 [deprecated]           ...           3 years ago
  • 7.0.3 [deprecated]           ...           3 years ago
  • 7.0.2 [deprecated]           ...           3 years ago
  • 7.0.1 [deprecated]           ...           3 years ago
  • 7.0.0 [deprecated]           ...           3 years ago
  • 6.8.27 [deprecated]           ...           3 years ago
  • 6.8.26 [deprecated]           ...           3 years ago
  • 6.8.25 [deprecated]           ...           3 years ago
  • 6.8.24 [deprecated]           ...           3 years ago
  • 6.8.23 [deprecated]           ...           3 years ago
  • 6.8.22 [deprecated]           ...           3 years ago
  • 6.8.21 [deprecated]           ...           3 years ago
  • 6.8.20 [deprecated]           ...           3 years ago
  • 6.8.19 [deprecated]           ...           3 years ago
  • 6.8.18 [deprecated]           ...           3 years ago
  • 6.8.17 [deprecated]           ...           3 years ago
  • 6.8.16 [deprecated]           ...           3 years ago
  • 6.8.15 [deprecated]           ...           3 years ago
  • 6.8.14 [deprecated]           ...           3 years ago
  • 6.8.13 [deprecated]           ...           3 years ago
  • 6.8.12 [deprecated]           ...           3 years ago
  • 6.8.11 [deprecated]           ...           3 years ago
  • 6.8.10 [deprecated]           ...           3 years ago
  • 6.8.9 [deprecated]           ...           3 years ago
  • 6.8.8 [deprecated]           ...           3 years ago
  • 6.8.7 [deprecated]           ...           3 years ago
  • 6.8.6 [deprecated]           ...           3 years ago
  • 6.8.5 [deprecated]           ...           3 years ago
  • 6.8.4 [deprecated]           ...           3 years ago
  • 6.8.3 [deprecated]           ...           3 years ago
  • 6.8.1 [deprecated]           ...           3 years ago
  • 6.8.0 [deprecated]           ...           3 years ago
  • 6.7.1 [deprecated]           ...           3 years ago
  • 6.7.0 [deprecated]           ...           3 years ago
  • 6.6.2 [deprecated]           ...           3 years ago
  • 6.6.1 [deprecated]           ...           3 years ago
  • 6.6.0 [deprecated]           ...           3 years ago
  • 6.5.1 [deprecated]           ...           3 years ago
  • 6.5.0 [deprecated]           ...           3 years ago
  • 6.4.2 [deprecated]           ...           3 years ago
  • 6.4.1 [deprecated]           ...           4 years ago
  • 6.3.2 [deprecated]           ...           4 years ago
  • 6.3.1 [deprecated]           ...           4 years ago
  • 6.3.0 [deprecated]           ...           4 years ago
  • 6.2.0 [deprecated]           ...           4 years ago
  • 6.1.2 [deprecated]           ...           4 years ago
  • 6.1.1 [deprecated]           ...           4 years ago
  • 6.1.0 [deprecated]           ...           4 years ago
  • 6.0.1 [deprecated]           ...           4 years ago
  • 6.0.0 [deprecated]           ...           4 years ago
  • 5.3.0 [deprecated]           ...           4 years ago
  • 5.2.0 [deprecated]           ...           4 years ago
  • 5.0.1 [deprecated]           ...           4 years ago
  • 5.0.0 [deprecated]           ...           4 years ago
  • 4.2.0 [deprecated]           ...           4 years ago
  • 4.1.0 [deprecated]           ...           4 years ago
  • 4.0.0 [deprecated]           ...           4 years ago
  • 2.2.4 [deprecated]           ...           4 years ago
  • 2.2.3 [deprecated]           ...           4 years ago
  • 2.2.2 [deprecated]           ...           4 years ago
  • 2.2.1 [deprecated]           ...           5 years ago
  • 1.1.0 [deprecated]           ...           5 years ago
  • 3.0.4 [deprecated]           ...           5 years ago
  • 3.0.3 [deprecated]           ...           5 years ago
  • 3.0.2 [deprecated]           ...           5 years ago
  • 3.0.1 [deprecated]           ...           5 years ago
  • 2.1.0 [deprecated]           ...           5 years ago
  • 2.0.0 [deprecated]           ...           5 years ago
  • 1.0.1 [deprecated]           ...           5 years ago
  • 1.0.0 [deprecated]           ...           5 years ago
  • 0.0.0 [deprecated]           ...           5 years ago

Copyright 2014 - 2016 © taobao.org |