{"_id":"@alicd/crui-inter-dialog","_rev":"24-17ed5afdd40d85607fd723f098a7c5fe","name":"@alicd/crui-inter-dialog","dist-tags":{"latest":"0.0.46"},"versions":{"0.0.46":{"name":"@alicd/crui-inter-dialog","version":"0.0.46","keywords":["walle","component","react"],"author":{"name":"@alicd/walle"},"license":"ISC","_id":"@alicd/crui-inter-dialog@0.0.46","maintainers":[{"name":"later_7","email":"tony7leek@gmail.com"}],"dist":{"shasum":"7b7f2b94f3e4ec7a3d74838b46ac6b4b756eeba8","tarball":"https://registry.npmjs.org/@alicd/crui-inter-dialog/-/crui-inter-dialog-0.0.46.tgz","fileCount":44,"integrity":"sha512-sJcIDLRiVqk4JrZDuhacwkhSt6VV4cDrrYx68TBniCPjtQT9GFg5z8j1a2t31BgpbV3v61kvUgcOpvfClyHV4A==","signatures":[{"sig":"MEUCIQCtCyBkzOlc6dnJG9q4QEdaqjjOkE2KXlrPt12V7YNPBgIgR9VG88rrZ1xPZ192fLribp7TtudgfJ0QpqxlP9y8+ok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5477549,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOXnWCRA9TVsSAnZWagAAz7oP/3D8Z69pBkuiFHP2Qqoj\nWI1tnUE+2ga5e3nSNhrAnVSPB7p0EcAAF8W0UXymaLt5KO7Mq/cj1cUUl1dJ\niJc9/MgLOjgI5x80c2O4wVuXM6sXMDqNZyMuV+vbydX4Q1yG8SDxVGW8JaLH\n/7iQvTBbjNd3/EAnMDkKBkGeSCibEJx6o1PdCVrZJNT04Jk9iW1NmvCdk3bA\ngsoY3CHceS+w2crcMTWQUx5mMKV1fkoiEA7Rr4BmaTA8GYxcli4I9l9+NU6A\n5j/kSRgO7pMEvBWpcDghxbykg09N/rn/aXk7s0f27hKXD1eCIEdRvpmDIVf2\nhnrQHAM8xgg8ib78UCGKoQj6TegoH0gDkSkEzOULSzt0FUMKDYpCdLTmX6Ls\n1HBWYn/HGbvWAYTTTsBhbnz2czs6LM98hiUA17rtJ2EaohzAZl2yAK/79ZUf\n69psbkbOe7OQc/EJR0GKB7/pMZwFqr4UMHdH5dFYOAd1/QQE5KDoU5BK9QRR\nroiz8tdTdIMj5JiKgsSnrMY1hudQ0KTviJgHf4sFvrGV2Z19lsuATnzchAci\nTLstd7dNe82he8QDRuqjsiooNvrzYVZVLxX4krg5WKyevSnk8orZ2hSxjLNb\nepXln4yYOvjJFVe4nzySnMe9uRewOJbvo8gR9xY8VX9u7Ojmx5i6jzc4sMY6\nBX0T\r\n=OKlp\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"scriptPreprocessor":"/node_modules/jest-css-modules"},"main":"./lib/index.js","gitHead":"3340ddd0ef15c7a292c7d6163aae2fd7fde9bd17","scripts":{"dev":"rm -rf ./site && NODE_ENV=development webpack-dev-server --config webpack.config.babel.js --progress","pub":"rm -rf ./lib && rm -rf ./dist && babel src --copy-file --extensions .js,.jsx --out-dir lib && npm run prod","demo":"rm -rf ./site ./_data && NODE_ENV=demo webpack-dev-server --config webpack.config.babel.js --progress","prod":"NODE_ENV=production webpack --config webpack.config.babel.js --progress","test":"jest","build":"webpack --config webpack.config.babel.js --progress","start":"npm run dev"},"_npmUser":{"name":"later_7","email":"tony7leek@gmail.com"},"_npmVersion":"5.6.0","description":"交互3.0弹框组件","directories":{},"_nodeVersion":"9.8.0","dependencies":{"onfire.js":"^1.0.6","classnames":"^2.2.6","@alicd/next-dom":"^0.x","react-addons-transition-group":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^20.0.4","axios":"^0.18.0","react":"^15.6.0","eslint":"^3.19.0","mkdirp":"^0.5.1","webpack":"^2.6.1","babel-cli":"^6.24.1","node-sass":"^4.5.3","react-dom":"^15.6.0","babel-core":"^6.25.0","css-loader":"^0.28.4","prop-types":"^15.5.10","@alicd/next":"^0.19.32","sass-loader":"^6.0.6","babel-eslint":"^7.2.3","babel-loader":"^7.1.1","style-loader":"^0.18.2","babel-runtime":"^6.23.0","webpack-merge":"^4.1.0","md-meta-loader":"^0.0.4","jest-css-modules":"^1.1.0","eslint-config-ais":"0.0.16","babel-preset-react":"^6.24.1","webpack-dev-server":"^2.4.5","babel-plugin-import":"^1.4.0","babel-preset-es2015":"^6.24.1","eslint-plugin-react":"^6.3.0","html-webpack-plugin":"^2.28.0","react-test-renderer":"^15.6.1","@alicd/dpl-rookie1-0":"^2.0.3","babel-preset-stage-0":"^6.24.1","babel-preset-stage-2":"^6.24.1","escape-string-regexp":"^1.0.5","jsonml-to-react-component":"^0.2.6","extract-text-webpack-plugin":"^2.1.2","babel-plugin-transform-runtime":"^6.23.0","babel-plugin-add-module-exports":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/crui-inter-dialog_0.0.46_1564047830037_0.6540225330031662","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-07-25T09:43:49.826Z","modified":"2024-07-15T07:14:08.854Z","0.0.46":"2019-07-25T09:43:50.147Z"},"author":{"name":"@alicd/walle"},"license":"ISC","keywords":["walle","component","react"],"description":"交互3.0弹框组件","maintainers":[{"email":"hahaiwin@163.com","name":"hahaiwin"},{"email":"1149518004@qq.com","name":"snowden_"},{"email":"1312065793@qq.com","name":"vincent.ljq"},{"email":"595620510@qq.com","name":"zhen.hz"},{"email":"251250076@qq.com","name":"cismous"},{"email":"juntao.wjt@alibaba-inc.com","name":"juntao.wjt"},{"email":"xiongqi.me@foxmail.com","name":"xiongqi"},{"email":"guoli.ygl@cainiao.com","name":"mingche_286130"},{"email":"joshuasui@163.com","name":"joshuasui"},{"email":"maopengcheng1994@gmail.com","name":"mmpc"},{"email":"littlehmy@163.com","name":"0little"},{"email":"yf871020@163.com","name":"yf871020"},{"email":"zyy7259@gmail.com","name":"zyy7259"},{"email":"tony7leek@gmail.com","name":"later_7"},{"email":"775710651@qq.com","name":"qijian1990"},{"email":"xiekaif@163.com","name":"gepik"},{"email":"yanzhe.xyz@alibaba-inc.com","name":"jimmyxuster"},{"email":"laijianqing@gmail.com","name":"helloljq"},{"email":"rentj1@163.com","name":"rentj1"},{"email":"zhangqing332@live.com","name":"js8zq332"},{"email":"527710279@qq.com","name":"xiaobc"}],"readme":"---\ncategory: Components\ntype: UI Views\ncomponent: Overlay\nchinese: 交互3.0模态框组件\nenglish: InterDialog\n---\n\n## 交互3.0-弹出框组件\n\n基于交互3.0的模态框组件，符合交互3.0的样式要求和动画要求，支持多级(目前建议最多三级)弹出框切换。\n提供了常用的 alert, confirm, warning 快捷调用，在 walle 中直接通过以下方式调用 \n建议大家从交互2.0 中提供的 [TaskOverlay](/components/@alicd/crui-task-overlay) & [Dialog](/components/dialog) 替换为该组件\n\n``` javascript\nwalle.ui.InterDialog.alert\nwalle.ui.InterDialog.confirm\nwalle.ui.InterDialog.warning\n```\n\n组件支持的多语言包括: 中文(zh-cn)、英语(en-us)、繁体(zh-tw)、西班牙语(es-es)、日语(jp-jp)、韩语(ko-kr)、俄语(ru-ru)\n\n## API\n\n### InterDialog\n\n备注：InterDialog 基于组件 [Overlay](/components/overlay)，下表是新增或者改写的props\n\n| 成员 | 说明 | 类型 | 默认值 |\n|------------|----------------|----------|-------------|\n| animationTime | 动画的运行时间(默认单位:ms) | Number | 400 |\n| cancelText | 取消按钮的文字提示 | String | \"取消\" |\n| deleteText | 删除按钮的文字提示 | String | \"删除\" |\n| okText | 弹出面板确定按钮的文字 | String| \"确定\" |\n| className | 可以被穿透到模态框容器元素的类名 | String | false |\n| footer | 自定义底部,设置为 false 则不展示 | ReactNode/Boolean | null |\n| header | 自定义头部，设置为 false 则不展示 | ReactNode/Boolean | null |\n| height | 弹出面板的高度 | Number | 300 |\n| onRequestClose | 点击关闭按钮时触发的回调 | Function | () => {} |\n| onCancel | 点击取消按钮以后的回调 | Function | () => {} |\n| onDelete | 弹出面板删除按钮被点击的回调 | Function | () => {} |\n| onOk | 弹出面板确定按钮被点击的回调 | Function | () => {} |\n| onClose | 弹出面板关闭**以后**的回调（仅在关闭以后触发，点击关闭按钮的回调请见 `onRequestClose`） | Function | () => {} |\n| root | react顶层容器元素的ID | String | \"root\" |\n| style | 可以被穿透到模态框容器元素的样式 | Object | {} |\n| title | 弹出面板的题目 | String | \"设置\" |\n| visible | 弹出面板是否可见 | Bool | false |\n| width | 控制弹出面板的宽度 | Number | 500 |\n| align | 弹层出现的位置 | String| 'cc cc'|\n| hasClose | 是否含有弹框右上角的删除按钮 | Boolean | true |\n| setting | 设置又上角的操作按钮，设置该值后，关闭按钮会被去掉，如果不需要请设置为 false | ReactNode/Boolean | null |\n| disabledBackgroundBlur | 禁用内容层的模糊动画 | Boolean | false |\n\n同时，原组件的其余props也可以继续使用，包括(以下内容来自fusion文档): \n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | --------- | -------------- | --------- |\n| prefix | 样式类名的品牌前缀 | String | 'next-' |\n| canCloseByEsc | 是否支持esc按键关闭浮层 | Boolean | true |\n| canCloseByOutSideClick | 点击浮层外的区域是否关闭浮层 | Boolean | true |\n| canCloseByMask | 点击遮罩区域是否关闭浮层 | Boolean | true |\n| target | 配置浮层定位的参照元素 | any | Position.VIEWPORT |\n| align | 浮层相对于target的定位, 详见开发指南的[定位部分](#定位) | String/Boolean | 'tl bl' |\n| offset | 浮层相对于target定位的微调 | Array | [0, 0] |\n| beforeClose | 浮层关闭前触发的事件

**签名**:
Function() => void | Function | () => {} |\n| afterClose | 浮层关闭后触发的事件, 如果有动画，则在动画结束后触发

**签名**:
Function() => void | Function | () => {} |\n| beforeOpen | 浮层打开前触发的事件

**签名**:
Function() => void | Function | () => {} |\n| onOpen | 浮层打开后触发的事件

**签名**:
Function() => void | Function | () => {} |\n| afterOpen | 浮层打开后触发的事件, 如果有动画，则在动画结束后触发

**签名**:
Function() => void | Function | () => {} |\n| beforePosition | 浮层定位完成前触发的事件

**签名**:
Function() => void | Function | - |\n| onPosition | 浮层定位完成后触发的事件

**签名**:
Function(config: Object, node: Object) => void
**参数**:
_config_: {Object} 定位的参数
_node_: {Object} 定位的元素 | Function | () => {} |\n| autoFocus | 浮层打开的时候是否让里面的元素自动获取焦点 | Boolean | false |\n| hasMask | 是否显示遮罩 | Boolean | false |\n| cache | 隐藏时是否保留子节点 | Boolean | false |\n| safeNode | 安全节点,当点击document的时候, 如果包含该节点则不会关闭浮层, 如果是函数需要返回ref, 如果是字符串则是该DOM的id, 也可以直接传入DOM节点 | any | - |\n| wrapperClassName | 浮层的根节点的样式类 | String | - |\n| shouldUpdatePosition | 强制更新定位信息 | Boolean | - |\n| needAdjust | 是否自动调整定位的位置 | Boolean | - |\n| disableScroll | 是否禁用页面滚动 | Boolean | false |\n\n### 子组件 InterDialog.Filter\n\n#### 包含主组件 InterDialog API，以下只列出差异\n\n| 成员 | 说明 | 类型 | 默认值 |\n| ----- | ----- | ----- | ----- |\n| field | 过滤器所绑定的 `Field` | `Field` | N/A |\n| selectKey | 当前面板中所选择的搜索条件 | `number|string` | N/A |\n| defaultSelectKey | 默认情况下面板所选择的搜索条件 | `number|string` | N/A |\n| searchPlaceholder | 搜索条件搜索框的提示语 | `string` | `\"过滤搜索条件\"` |\n| searchCondition | 默认情况下搜索条件搜索框中的值 | `number|string` | `\"\"` |\n| onChangeCondition | 切换面板左侧的搜索条件时触发的事件 | `(selectedKey: string) => void` | 默认不执行任何操作 |\n| onSearch | 在搜索条件搜索框中执行搜索操作时触发的事件 | `(searchCondition: string|number) => void` | 默认不执行任何操作 |\n| onReset | 点击重置按钮触发的事件 | `(field: Field) => void` | 默认不执行任何操作 |\n| onClear | 点击清空按钮触发的事件 | `(field: Field) => void` | 默认不执行任何操作 |\n| visible | 是否显示弹层, 如果此属性为 `false`，弹层不会被渲染 | `boolean` | `false` |\n| title | 设定弹层标题 | `string|number` | `\"排序设置\"` |\n| onOk | 点击确定按钮触发的事件 | `(data: object[]) => void` | 默认不执行任何操作 |\n| onCancel | 点击取消按钮触发的事件 | `(e: object[]) => void` | 默认不执行任何操作 |\n| loading | 设置弹层确定按钮载入状态 | `boolean` | `false` |\n| disabledBackgroundBlur | 禁用内容层的模糊动画 | Boolean | false |\n\n\n### 子组件 InterDialog.Filter.Item\n\n| 成员 | 说明 | 类型 | 默认值 |\n| ----- | ----- | ----- | ----- |\n| key | 作为条目的唯一标示，必须保证在同一个 TaskFilter 下唯一 | `string|number` | N/A |\n| title | 单个条目的标题 | `string` | N/A |\n| visible | 该条目是否可见 | `boolean` | N/A |\n| valuePlaceholder | 显示在标题后面的文案，一般展示用户填的值 | `string|number` | N/A |\n\n\n### 子组件 InterDialog.Sorter\n\n#### 包含主组件 InterDialog API ，以下只列出差异\n\n| 成员 | 说明 | 类型 | 默认值 |\n| ----- | ----- | ----- | ----- |\n| dataSource | 列表数据数据源（`value` 属性为唯一标识，不能出现重复） | `[{ text: string, value: any, deleteable:是否可被删除,draggable: 是否可被拖动排序}]`| `[ ]` |\n| deleteable | 是否禁用条目的删除功能 | `boolean` | `false` |\n| draggable | 是否启用条目的拖动重排序功能 | `boolean` | `true` |\n| title | 设定弹层标题 | `string` 或 `number` | `\"排序设置\"` |\n| subTitle | 设置副标题，不设置不展示| `string`| null |\n| onOk | 点击确定按钮触发的事件 | `(data: object[]) => void` | 默认不执行任何操作 |\n| onCancel | 点击取消按钮触发的事件 | `(e: object[]) => void` | 默认不执行任何操作 |\n| loading | 设置弹层载入状态 | `boolean` | `false` |\n| onDragStart | 用户开始进行拖动重排时触发的事件 | `(params: { event: Event, node: OrderNode }) => void` | 默认不执行任何操作 |\n| onDragEnter | 数据条目刚刚拖动到另一条目上时触发的条件 | `(params: { event: Event, node: OrderNode }) => void` | 默认不执行任何操作 |\n| onDragOver | 数据条目拖动过程中，当指针悬浮于另一条目上时，持续触发这一事件 | `(params: { event: Event, node: OrderNode }) => void` | 默认不执行任何操作 |\n| onDragLeave | 数据条目拖动过程中指针离开另一条目时触发的条件 | `(params: { event: Event, node: OrderNode }) => void` | 默认不执行任何操作 |\n| onDrop | 拖动重排结束时触发的事件 | `(params: { event: Event, dragNode: OrderNode, dragNodesKeys: number, node: OrderNode, dropPosition: number, dropToGap: boolean }) => boolean` | 默认不执行任何操作 |\n| canDrop | 某一数据条目是否可被拖动到另一数据条目之上 | `(params: { dragNode: OrderNode, dragNodesKeys: number, node: OrderNode, dropPosition: number, dropToGap: boolean }) => boolean` | 默认始终返回 `true` |\n| onChange | 数据条目被重排或删除后触发的事件 | `(data: object[]) => void` | 默认不执行任何操作 |\n| showDelete | 是否展示条目前面的删除图表， 设置为 false 则无法删除 | `boolean` | `true` |\n| disabledBackgroundBlur | 禁用内容层的模糊动画 | Boolean | false |\n\n### 快捷调用组件\n\n#### InterDialog.alert 提示框\n\n| 成员 | 说明 | 类型 | 默认值 |\n| ----- | ----- | ----- | ----- |\n| title | 传入的标题 | String| null |\n| content | 传入展示的文案 | String/Element| null |\n| canCloseByMask | 是否允许点击遮罩层关闭提示框 | Boolean | false |\n| onOk | 点击确定按钮触发的函数 | Function| null |\n| icon | 展示在内容前面的图标，可以使用 [Icon](/components/icon) 的所有图标和自定义图标 | String| 提醒 icon |\n| disabledBackgroundBlur | 禁用内容层的模糊动画 | Boolean | false |\n\n#### InterDialog.confirm 确认框\n\n| 成员 | 说明 | 类型 | 默认值 |\n| ----- | ----- | ----- | ----- |\n| title | 传入的标题 | String| null |\n| content | 传入展示的文案 | String/Element| null |\n| canCloseByMask | 是否允许点击遮罩层关闭提示框 | Boolean | false |\n| onOk | 点击确定按钮触发的函数 | Function| null |\n| onCancel | 点击取消按钮触发的函数 | Function| null |\n| icon | 展示在内容前面的图标，可以使用 [Icon](/components/icon) 的所有图标和自定义图标 | String| 提问 icon |\n| disabledBackgroundBlur | 禁用内容层的模糊动画 | Boolean | false |\n\n\n#### InterDialog.warning 警告框 \n\n| 成员 | 说明 | 类型 | 默认值 |\n| ----- | ----- | ----- | ----- |\n| title | 传入的标题 | String| null |\n| content | 传入展示的文案 | String/Element| null |\n| canCloseByMask | 是否允许点击遮罩层关闭提示框 | Boolean | false |\n| onOk | 点击确定按钮触发的函数 | Function| null |\n| onCancel | 点击取消按钮触发的函数 | Function| null |\n| icon | 展示在内容前面的图标，可以使用 [Icon](/components/icon) 的所有图标和自定义图标 | String| 警告 icon |\n| disabledBackgroundBlur | 禁用内容层的模糊动画 | Boolean | false |\n\n\n#### 安全节点\n\n弹层同时提供点击文档中的节点隐藏该弹层的功能，但是由于React内部维护了一个事件队列，且并未提供针对document的事件绑定方式，所以在点击任何一个节点\n都会触发document的click，即便手动阻止冒泡也不行， Overlay采用了一个安全节点的设置来避免这个问题.\n\n#### 定位\n\n1. align由空格隔开的字符串表示，例如 `tl bl`. 其中`tl`代表目标元素的左上方，`bl`代表基准元素的左下方，所以`tl bl`的意思是目标元素的左上方对齐基准元素左下方。\n 其中定位的可选值有 `tl`, `tc`, `tr`, `cl`, `cc`, `cr`, `bl`, `bc`, `br`.\n\n2. align支持的Boolean值仅为false，在设置为false的时候，不使用JS定位，这样你可以根据你的需要传入style或者className进行CSS定位。\n\n**说明** `t`为`top`的缩写，`b`为`bottom`的缩写，`c`为`center`的缩写，`l`为`left`的缩写，`r`为`right`的缩写.\n\n更多内容可参考: [overlay](/components/overlay)\n","readmeFilename":"README.md"}