@lyrical/react-directive v0.1.2

@lyrical/react-directive

React 快捷显影指令

Install

npm i @lyrical/react-directive

Usage

全局指令

使用 @lyrical/react-directive 内置指令

标准

import { Modal } from '@lyrical/react';
import { reactDirective, DirectiveProps } from '@lyrical/react-directive';

const modal = (props: DirectiveProps) => {
  return (
    <Modal visible={props.visible} onCancel={props.hidden}>
      这是个弹窗
    </Modal>
  );
};

reactDirective.open(modal, {}, { hiddenTimeout: 3000 });

参数

参数正常定义使用。

import { Modal } from '@lyrical/react';
import { reactDirective, DirectiveProps } from '@lyrical/react-directive';

const modal = (props: DirectiveProps & { text: string }) => {
  return (
    <Modal visible={props.visible} onCancel={props.hidden}>
      这是个弹窗，{props.text}
    </Modal>
  );
};

reactDirective.open(modal, { text: '这是传入文本' }, { hiddenTimeout: 3000 });

返回值

返回值类型从 DirectiveProps<T> 的泛型中传入。

import { Modal } from '@lyrical/react';
import { reactDirective, DirectiveProps } from '@lyrical/react-directive';

const modal = (props: DirectiveProps<boolean> & { text: string }) => {
  return (
    <Modal visible={props.visible} onCancel={() => props.hidden(false)} onOk={() => props.hidden(true)}>
      这是个弹窗，{props.text}
    </Modal>
  );
};

const modalElement = reactDirective.open(modal, { text: '这是传入文本' }, { hiddenTimeout: 3000 });

const result = await modalElement.promise;

手动关闭

主动关闭弹窗。

import { Modal } from '@lyrical/react';
import { reactDirective, DirectiveProps } from '@lyrical/react-directive';

const modal = (props: DirectiveProps<boolean> & { text: string }) => {
  return (
    <Modal visible={props.visible} onCancel={() => props.hidden(false)} onOk={() => props.hidden(true)}>
      这是个弹窗，{props.text}
    </Modal>
  );
};

const modalElement = reactDirective.open(modal, { text: '这是传入文本' }, { hiddenTimeout: 3000 });

modalElement.close(false)

自定义指令

如果您需要针对不同组件内置不同选项，参数及其转换等，具体参考 DirectiveOptions，示例如下：

import { Modal } from '@lyrical/react';
import { DirectiveElement, DirectiveProps } from '@lyrical/react-directive';

const directive = new DirectiveElement({ hiddenTimeout: 3000 });

const modal = (props: DirectiveProps) => {
  return (
    <Modal visible={props.visible} onCancel={props.hidden}>
      这是个弹窗
    </Modal>
  );
};

directive.open(modal, {});

API

/**
 * 指令参数
 */
export interface DirectiveProps<Result = void> {
  /**
   * 是否可见
   */
  visible: boolean;
  /**
   * 隐藏
   */
  hidden: (result?: Result) => void;
}

/**
 * 指令选项
 */
export interface DirectiveOptions<T = Record<string, any>, Result = void> {
  /**
   * 根 DOM
   * @default document.body
   */
  root?: HTMLElement;

  /**
   * 是否存活
   * @default false
   */
  isAlive?: boolean;

  /**
   * 参数
   */
  props?: T;

  /**
   * 转换参数
   */
  transformProps?: (props: T & IProps<Result>) => Partial<T & IProps<Result>>;

  /**
   * 关闭延时 配合动效
   */
  hiddenTimeout?: number;
}