@y-fe/nu-dialog-react NPM

nu-dialog-react

NU 「 no-ui 」组件库系统 nu-system，弹窗组件 React 实现。

@y-fe/nu-dialog-react 本身不会输出任何样式，所有样式均来自于 nu-dialog。

怎么用？

$ npm i @y-fe/nu-dialog-react @y-fe/nu-dialog
$ yarn add @y-fe/nu-dialog-react @y-fe/nu-dialog

二次封装

import NuDialog from "@y-fe/nu-dialog-react";
import "@y-fe/nu-dialog";
import "@y-fe/nu-dialog/css/position/middle.css";
// import "@y-fe/nu-dialog/css/position/top.css";
// import "@y-fe/nu-dialog/css/position/right.css";
// import "@y-fe/nu-dialog/css/position/bottom.css";
// import "@y-fe/nu-dialog/css/position/left.css";

export default NuDialog;

使用

import React, { useState } from "react";
import Dialog from "./components/Dialog";

function Demo() {
  const [open, setOpen] = useState(false);
  const [position, setPosition] = useState('middle');
  return (
    <div>
      <select
        onChange={(e) => {
          setPosition(e.target.value);
        }}
      >
        <option value="middle">居中显示</option>
        <option value="top">居上显示</option>
        <option value="left">居左显示</option>
        <option value="right">居右显示</option>
        <option value="bottom">居底显示</option>
      </select>
      <button
        type="button"
        onClick={() => {
          setOpen(true);
        }}
      >
                打开弹窗
      </button>
      <Dialog
        open={open}
        position={position}
        onClickClose={() => {
          setOpen(false);
        }}
        onClickMask={() => {
          setOpen(false);
        }}
      >
        <h3>hello world!</h3>
      </Dialog>
    </div>
  );
}

export default App;

Api

props	类型	默认值	功能
open	boolean	boolean	显示弹窗
position	string	'middle'	弹窗位置
close	bool or node	`<Fragment>×</Fragment>`	关闭按钮显示的图标
stopScroll	boolean	true	是否显示的时候阻止滚动条
onClickMask	function	-	当点击了遮罩
onClickClose	function	-	当点击了关闭按钮

动效

  appear = true,
  unmountOnExit = true,
  timeout = 300,
  classNames = {
    enterActive: '_open',
    enterDone: '_open',
  },

nu-dialog 采用 react-transition-group/css-transition 作为CSS动画解决方案，所有除了以上自定义的 API 之外，还会直接将 css-transition 所有的属性都移接到 nu-dialog 上。因为 css-transition 还是有一定的上手成本，这边为了方便使用直接设定了如上的默认值。在实际开发的时候只需要围绕着 .nu_dialog_wrap._open 这个选择器开发即可。

.nu_dialog_wrap, .nu_dialog {
    transition: 300ms;
}

.nu_dialog_wrap._middle .nu_dialog {
    transform: translate(0, 20px);
}

.nu_dialog_wrap._open._middle .nu_dialog {
    transform: translate(0, 0);
}

Dom结构

<div class="nu_dialog_wrap _[position] _open">
    <label title="mask" className="nu_dialog_mask"/>
    <div class="nu_dialog">
        <label title="close" className="nu_dialog_close" >{close}</label>
        {children}
    </div>
</div>