npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

reactjs-modal

v4.0.0

Published

This is a react component for modal.

Downloads

326

Readme

reactjs-modal

This is a react component for modal.

Install

npm install reactjs-modal --save

Usage

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class ControllableCustomRadio extends Component {
  static propTypes = {
    defaultValue: PropTypes.string,
    onChange: PropTypes.func,
    value: PropTypes.string,
    name: PropTypes.string,
    children: PropTypes.array
  };
  
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.defaultValue
    };
  }

  handleChange = (event) => {
    if (this.props.onChange) {
      this.props.onChange(event);
    }
    this.setState({
      value: event.target.value
    });
  };

  render() {
    const value = this.props.value || this.state.value;
    const children = React.Children.map(this.props.children, (child, i) => {
      return (
        <label style={{marginRight: '10px'}} key={i}>
          <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value === value}
                 onChange={this.handleChange}/>
          {child.props.children}
        </label>
      );
    });

    return (
      <div>{children}</div>
    );
  }
}

export default ControllableCustomRadio;


import React, {Component} from 'react';
import {render} from 'react-dom';
import Modal from '../src/scripts/index';
import ControllableCustomRadio from './ControllableCustomRadio';
import '../src/sass/modal.scss';
import './sass/example.scss';

class ModalPosition extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      position: 'center'
    };
  }

  onClick = (e) => {
    this.setState({
      visible: true
    });
  };

  onClose = (e) => {
    this.setState({
      visible: false
    });
  };

  handleChange = (event) => {
    this.setState({
      position: event.target.value
    });
  };

  render() {
    let modal;
    const {visible} = this.state;
    let {position} = this.state;
    if (visible) {
      const footer = (
        <div>
          <button className="example-btn example-btn-primary" onClick={this.onClose}>
            确认
          </button>
          <button className="example-btn example-btn-default" onClick={this.onClose}>
            取消
          </button>
        </div>
      );

      if (position === 'xy') {
        position = {right: '10px', top: '20px'};
      }
      modal = (
        <Modal
          visible={visible}
          onClose={this.onClose}
          title={`Modal 窗口位置 ${position ? (typeof position === 'object' ? 'right: \'10px\', top: \'20px\'' : position) : ''}`}
          style={{width: '700px'}}
          footer={footer}
          position={position}
        >
          <p>可以改变 Modal 窗口展示位置</p>
          <p>支持 top bottom left right center left-top left-bottom right-top right-bottom 自定义坐标</p>
          <h3>例子代码</h3>
          <pre>
            {
              ` <Modal
  visible={visible}
  onClose={this.onClose}
  title="Modal窗口位置"
  style={{width: '700px'}}
  footer={footer}
  position={position}
>
  <p>可以改变 Modal 窗口展示位置</p>
  <p>支持 top bottom left right center
  left-top left-bottom right-top right-bottom
  自定义坐标</p>
</Modal>`
            }
          </pre>
        </Modal>
      );
    }
    return (
      <div className="example">
        <p>位置:</p>
        <ControllableCustomRadio name="position" value={this.state.position} onChange={this.handleChange}>
          <option value="left">左</option>
          <option value="right">右</option>
          <option value="top">上</option>
          <option value="bottom">下</option>
          <option value="center">居中</option>
          <option value="left-top">左上</option>
          <option value="left-bottom">左下</option>
          <option value="right-top">右上</option>
          <option value="right-bottom">右下</option>
          <option value="xy">自定义坐标位置</option>
        </ControllableCustomRadio>

        <p>
          <button className="example-btn example-btn-default" onClick={this.onClick}>
            打开 Modal 窗口
          </button>
        </p>
        {modal}
      </div>
    );
  }
}

render(
  <ModalPosition />, document.getElementById('layout')
);

Options

| 选项 | 类型 | 功能 | | -------- | ----- | ---- | | prefixCls | PropTypes.string| Modal 窗口 class,默认为 rc-modal| | className | PropTypes.string|自定义 class 样式 | | style | PropTypes.object| 自定义 style 比如 width 或 height | | bodyStyle | PropTypes.object| 自定义 modal body 的样式,比如 width height 滚动条等 | | footerStyle | PropTypes.object| 自定义 modal footer 的样式,比如 width height 滚动条等 | | zIndex | PropTypes.number| 模态窗口 zIndex | | visible | PropTypes.bool| Modal 窗口是否可见 | | closable | PropTypes.bool| 是否显示关闭按钮 | | onClose | PropTypes.func| 关闭窗口时回调函数 | | keyboard | PropTypes.bool| 按 esc 是否关闭窗口 | | mask | PropTypes.bool| 是否显示遮罩效果 | | maskClosable| PropTypes.bool|设为 true,当点击遮罩时,关闭窗口 | | position| PropTypes.oneOfType([PropTypes.string, PropTypes.object]) | 模态窗口显示位置,当设为字符串时,支持 top left right bottom center left-top left-bottom right-top right-bottom, 设置对象表示其坐标 {x: number,y:number} | | animationPosition| PropTypes.object|基于指定位置渲染动画,格式为: { x: 10, y: 20} | | animation| PropTypes.oneOfType([PropTypes.bool, PropTypes.string]) | 窗体是否有动画效果,如果设为 false,则不启用动画,设为 true,使用默认的动画,字符串表示自定义的动画样式| | maskAnimation| PropTypes.oneOfType([PropTypes.bool, PropTypes.string]) | mask是否有动画效果,如果设为 false,则不启用动画,设为 true,使用默认的动画,字符串表示自定义的动画样式 | | transitionAppearTimeout | PropTypes.number|动画出现持续时间 | | transitionEnterTimeout | PropTypes.number|动画进入持续时间 | | transitionLeaveTimeout | PropTypes.number|动画离开持续时间 | | title | PropTypes.oneOfType([PropTypes.string, PropTypes.element])|模态窗口标题 | | footer | PropTypes.element| 底部按钮设置 | | children | PropTypes.node| 窗体内容 | | container | PropTypes.element | 渲染模态窗口容器,默认为 document.body | | preventTouchmove| PropTypes.bool | 当显示模态窗口时,是否阻止 touchmove 事件 | | hideAllModal| PropTypes.bool | 当打开多个模态窗口时,根据该属性来控制是否关闭所有模态窗口 | | hideHeader| PropTypes.bool | 控制是否显示 header | | headerStyle| PropTypes.bool | 自定义 modal header 的样式 |

Example

npm install
npm start

http://localhost:9090

Online Example

http://reactjs-ui.github.io/reactjs-modal/

Build Example

第一次需要先执行前两步操作,再执行第三步。以后修改例子后,只需要执行第三步即可

  1. 创建 gh-pages 分支,在执行 git subtree add 命令之前,需确保 gh-pages 分支下至少存在一个文件
git checkout -b gh-pages
rm -rf *     //隐藏文件需要单独删除,结合命令 ls -a
vim .gitignore //输入一些内容
git add .
git commit -m "init branch gh-pages"
git push --set-upstream origin gh-pages
git checkout master
  1. 把分支 gh-pages 添加到本地 subtree 中,执行该命令前,请确保 examples-dist 文件夹不存在
git subtree add --prefix=examples-dist origin gh-pages --squash
  1. 生成在线 examples
npm run build:examples
git add examples-dist
git commit -m "Update online examples"
git subtree pull --prefix=examples-dist origin gh-pages
git subtree push --prefix=examples-dist origin gh-pages --squash
git push

4 使用以下命令一键发布在线例子

npm run examples:publish

Build

npm run build

Publish

npm run build:publish

Issue

https://github.com/reactjs-ui/reactjs-modal/issues

Change Log

Please view here