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 dialogAPI
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:
-
bothallows movement horizontally and vertically (default). -
xlimits movement to horizontal axis. -
ylimits 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
xandythat 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 startExample
http://localhost:8007/examples/
Test Case
npm test
npm run chrome-testCoverage
npm run coverageopen coverage/ dir