amos-dialog

react dialog component

Since v1.0.6 we update react to v16.

The react@15 support last version is v1.0.5.

Install

Usage

var Dialog = require('amos-dialog');

ReactDOM.render(
  <Dialog title={title} onClose={callback1} visible>
      <p>first dialog</p>
  </Dialog>
), document.getElementById('t1'));

// use dialog

API

props

| params | type | default | description | | ------ | ------ | ------- | ------- | | prefixCls | String | amos-dialog | The dialog dom node's prefixCls | | className | String | - | additional className for dialog | | wrapClassName | String | - | additional className for dialog wrap | | style | Object | {} | Root style for dialog element.Such as width, height | | zIndex | Number | - | - | | bodyStyle | Object | {} | body style for dialog body element.Such as height | | visible | Boolean | false | current dialog's visible status | | animation | String | | part of dialog animation css class name | | maskAnimation | String | | part of dialog's mask animation css class name | | transitionName | String | | dialog animation css class name | | maskTransitionName | String | | mask animation css class name | | title | String or React.Element | | Title of the dialog | | footer | React.Element | | footer of the dialog | | closable | Boolean | true | whether show close button and click mask to close | | mask | Boolean | true | whether show mask | | maskClosable | Boolean | true | whether click mask to close, this prop will be ignored if set closable prop to false | | mousePosition | {x:number,y:number} | | set pageX and pageY of current mouse(it will cause transform origin to be set). | | onClose | function | | called when click close button or mask | | dragable | boolean | | called when click close button or mask | | dragableOps | object | | called when click close button or mask | | getContainer | function(): HTMLElement | | to determine where Dialog will be mounted |

dragableOps

• axis:

  • both allows movement horizontally and vertically (default).
  • x limits movement to horizontal axis.
  • y limits movement to vertical axis.
  • 'none' stops all movement.

• bounds:

• {left: number, top: number, right: number, bottom: number} | string,

• defaultPosition:

• {x: number, y: number}

• Specifies the x and y that the dragged item should start at.

• grid:

• [number, number] // Specifies the x and y that dragging should snap to.

• handle: string,

• Specifies a selector to be used as the handle that initiates drag.

• Example: '.handle'

Development

npm install
npm start

Example

http://localhost:8007/examples/

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License