{"_id":"@alicloud/xconsole-rc-button2","name":"@alicloud/xconsole-rc-button2","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@alicloud/xconsole-rc-button2","version":"1.0.0","description":"Button 强化，有它就够了","sideEffects":false,"license":"MIT","main":"build/cjs/index.js","module":"build/esm/index.js","types":"build/types/index.d.ts","author":{"name":"jianchun.wjc","email":"jianchun.wjc@alibaba-inc.com"},"publishConfig":{"access":"public"},"keywords":[],"devDependencies":{"@alicloud/console-toolkit-cli":"^1.2.30","@alicloud/console-toolkit-preset-component":"^1.2.61","@alicloud/console-base-demo-helper-top-nav":"^1.1.8","@alicloud/console-components":"2.1.0-beta.1","@alicloud/demo-rc-elements":"^1.11.5","@alicloud/ts-config":"^1.1.2","@types/react":"^17.0.48","@types/styled-components":"^5.1.26","moment":"^2.29.4","react":"^17.0.2","styled-components":"^5.3.8","typescript":"^4.9.5"},"peerDependencies":{"@alicloud/console-components":"^2.1.0-alpha.1","react":">=16.8","styled-components":">=5"},"dependencies":{"@alicloud/console-base-intl-factory-basic":"^1.6.8","@alicloud/console-base-rc-dialog":"^1.10.2","@alicloud/console-base-theme":"^1.9.2"},"gitHead":"b5e41ce23c3cdfc3b0cbfeb57fac1e3c736a43bd","scripts":{"start":"breezr start-storybook","test":"breezr test:unit","clean":"rm -rf build","build":"npm run build:esm && npm run build:cjs && npm run build:bundle && npm run build:typings","build:esm":"breezr build --engine babel --es-module","build:cjs":"breezr build --engine babel","build:bundle":"breezr build --engine webpack","build:typings":"tsc --outDir build/types --declaration --emitDeclarationOnly"},"_id":"@alicloud/xconsole-rc-button2@1.0.0","_integrity":"sha512-RxRTxyKbaRQ9G6uTuDQcsKoYT1H8BAIlRr/TaxO2LlL5linzhlK7Bb1QtZeUya097j0VT/YLGhHXvJlZo0Hb3Q==","_resolved":"/private/var/folders/fh/fjnt47r94lz_ctjrvv4cwh3c0000gp/T/6a74a7bf1306aa37654dabe44fee5f45/alicloud-xconsole-rc-button2-1.0.0.tgz","_from":"file:alicloud-xconsole-rc-button2-1.0.0.tgz","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-RxRTxyKbaRQ9G6uTuDQcsKoYT1H8BAIlRr/TaxO2LlL5linzhlK7Bb1QtZeUya097j0VT/YLGhHXvJlZo0Hb3Q==","shasum":"c4af2400b6e44fe97479bc1dc7bb132544762fa2","tarball":"https://registry.npmjs.org/@alicloud/xconsole-rc-button2/-/xconsole-rc-button2-1.0.0.tgz","fileCount":72,"unpackedSize":1509328,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGthg6vk4oySk9Z99ajATBs52TzGbxodhj/XGLMl5MnwAiEAvdEaTz+aZq5zBNCoBUEzcoThMHFUp2hJArKn5tneTaI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBYvpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4BA/9GUOgZeqLYbQ0dAZpuqMNIWXGFbkMoab2bfDKOoaYnUUGStvx\r\n628bZ4lAP/sNb6RWdDTmA5WdhnLcf1K0HHTBc6m9G6ytTACr5WpNwm8cojPP\r\ng4W2octhmF0LyKTz7ZLidv4Ccok0uIa3ZWobGlcKrc9EkAHgGBSggxgV8KRB\r\nYItTOTHd984/u/bn4XYckj+tYqVpUqcrCTiK0w24tKfe0Of2yulCi6E0hjxM\r\ncEyL0FgHPgWGPs2WvXVIXUbqe154rPEPRIrzZGLq5JQ9jNS7aO5dw3qdJHOp\r\nFMJZpdRATXkx+XUWLxpv54Gxl8ILIJ4AmhFJ6eB7p+U9P9DNSTRY/fsDA6qm\r\n3bFy0PBorhiYjtZTw8ktKJFxdfIVzdbTDeotjSiodmqP961kKEp8uT246vVg\r\nV2/vdeo47leWWi0UHXGk6rdft7AlAIqMetvXH5p6I/lEqTkLR+VUwhZ+GLOk\r\nsGhhiHQAcgeCxiN7cpxDz6hr5XdZFsqa8qpIJXvClTou4UJxEgHPLnjumYek\r\nLJKj8P/nnx0LlhvjPKgzajIBaSh7S6aBIn95Dn+JouGC7P1pqWSVwRaYj6J/\r\n7hm1a4xakmwNG70zaaktwFRTqX9IA1A753jCX80wdoRKPMnywav45aYNvxEc\r\npzxmrblwYNY/ztRnNW0GLSokDwPVmPvvuds=\r\n=Ka1J\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"maintainers":[{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"},{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xconsole-rc-button2_1.0.0_1678085097376_0.9590749993168015"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-06T06:44:57.239Z","1.0.0":"2023-03-06T06:44:57.584Z","modified":"2023-03-06T06:44:57.824Z"},"maintainers":[{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"},{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"}],"description":"Button 强化，有它就够了","keywords":[],"author":{"name":"jianchun.wjc","email":"jianchun.wjc@alibaba-inc.com"},"license":"MIT","readme":"# @alicloud/xconsole-rc-button2\n\n> 一个解放你代码的组件，让你写按钮、按钮组的时候不再需要承受 fusion 或 wind 的不作为而产生的头痛。\n\n提示？确认框？上传？练接？埋点？一串按钮？\n\n一切问题，这里都会智能地帮你搞定，你只需要一个配置。\n\n有了它，写按钮的时候，你关心的核心永远是 `Button` 本身。\n\n## Fusion 不肯做的事情 - 我做\n\n* [props 有 href，应自动将 component 设置为 a](http://gitlab.alibaba-inc.com/next/button/issues/35282)\n* [text button 应该默认融入环境样式中去](http://gitlab.alibaba-inc.com/next/button/issues/51143)\n* [split button 不应在箭头上触发 onClick](http://gitlab.alibaba-inc.com/next/split-button/issues/40914) fusion 提供的方案并不好\n\n## 简介\n\n### 引入\n\nXConsole 3 的用户，这样使用：\n\n```typescript\nimport {\n  Dialog2\n} from '@alicloud/xconsole';\n```\n\n非 XConsole 的用户，建议直接使用 [@alicloud/console-base-rc-dialog]。\n\n### Button\n\n强化了的 `Button` 组件，旨在用配置替换繁琐的组件逻辑，以及修复 fusion / wind 不肯修复的问题，用了它，你将会看到原屎的 Button 用法就感觉难过。\n\n除了 Fusion Button 的 props 外，新增以下 props：\n\nprop | 类型 | 默认值 | 说明\n:-- | :-- | :-- | :--\n`spm` | `string` | - | 无痕埋点的 spm D 位编码，有它便会添加无痕埋点，`gostr=/{业务编码};locaid=d{D 位}[;参数串]`\n`spmCode` | `string` | `aliyun` | 无痕埋点的黄金令箭业务编码（不带最前边的「/」）\n`spmParams` | `string` | - | 无痕埋点的额外参数串 `a=x&b=y&c=z..`，需要调用者自行拼装\n`tooltip` | `string | JSX.Element | IButtonTooltip` | - | 确认框，将接管 `onClick`\n`popup` | `string | JSX.Element | IButtonPopup` | Popup 弹出层，比 tooltip 更丰富，可以控制是否展示\n`upload` | `WindPropsUpload` | 上传，将透传给上传组件，注意不要和 `href`、`onClick` 混用\n\n从此，你不再需要：\n\n* 传 `href` 的时候需要传入 `component='a'`，并判断 `target` 是否需要为 `_blank`\n* 非得 `Balloon` 进行包裹来展示一个 `tooltip`，实际上又不是真正意义上的「包裹」，因为它「裹」的是自己的内容，而 `Button` 却成为了它的一个属性，本末倒置\n* 写一堆的确认逻辑\n* 原本要写一堆 JSX 的 `MenuItem`、`SplitItem`、`ButtonGroup` 和 `Button2Ops`，一个配置搞定一切，如果有按钮要被收起来放在「更多」下面，也不必担心万一那个按钮因功能开关被去掉了而产生的界面问题\n\n## 你不再需要以下组件\n\n* [wind-rc-confirm](https://wind.alibaba-inc.com/components/biz/wind-rc-confirm) 它的问题跟 Balloon 一样，你的关注点不能只在 Button 上，且没有 inline 模式\n* [wind-rc-row-operator](https://wind.alibaba-inc.com/components/biz/wind-rc-row-operator) 用 Button2Ops 代替，有更多的配置项，更强大，更方便\n\n## 关于路由\n\nwind 有个 [wind-rc-link](https://wind.alibaba-inc.com/components/biz/wind-rc-link)，但它的问题在于本末倒置，我非常 dis 这种行为。\n\n实际上，我原先写的一版中是带路由功能的，但问题在于，如果一个组件自己带了路由功能，则意味着它将依赖于 `react-router` 和它的 `Provider`，这会导致它在实际使用场景下各种受挫。\n\n所以，这边建议，可以在自己的项目下进行简单的封装——这就是为什么我说最好自己加一个 `rc/button.ts`。\n\nTODO 如何路由，容我后面补充。\n\n## 非实际案例\n\n![Button2Ops 1](https://img.alicdn.com/tfs/TB1sTsizAL0gK0jSZFtXXXQCXXa-588-64.png)\n\n代码：\n\n```typescript jsx\n<Button2Ops {...{\n  text: false,\n  items: [{\n    label: '返回'\n  }, '|', {\n    label: '新建目录',\n    type: 'primary'\n  }, {\n    label: '上传文件',\n    upload: {\n      action: '/upload'\n    }\n  }, {\n    mode: 'group',\n    items: [{\n      label: '导入'\n    }, {\n      label: '导出'\n    }]\n  }, {\n    label: '批量操作',\n    items: [{\n      label: '设置'\n    }, {\n      label: '下载'\n    }, {\n      label: '删除'\n    }]\n  }, {\n    label: '刷新'\n  }]\n}} />\n```\n\n![Button2Ops 2](https://img.alicdn.com/tfs/TB1gUQmzAY2gK0jSZFgXXc5OFXa-220-249.png)\n\n代码：\n\n```typescript jsx\n<Button2Ops {...{\n  maxVisible: 3,\n  items: [{\n    label: '详情'\n  }, {\n    label: '下载'\n  }, {\n    label: '创建副本'\n  }, {\n    label: '创建软链'\n  }, {\n    label: '设置权限'\n  }, {\n    label: '选取内容'\n  }, {\n    label: '修改存储类型'\n  }, {\n    label: '删除',\n    confirm: {\n      title: '删除文件',\n      content: <>\n        <P>真的要删除文件 <code>sexylady.jpg</code>？</P>\n        <P>删除后将无法找回。</P>\n      </>\n    }\n  }]\n}} />\n```\n\n其中，「删除」点击后会先弹窗（因为它被收在「更多」里边了）：\n\n![Button2Ops 3](https://img.alicdn.com/tfs/TB1DREnzET1gK0jSZFhXXaAtVXa-572-207.png)\n\n假设，以上每个功能都是有功能开关的，而最终由于功能开关而最终只剩下「详情」、「下载」和「删除」是可用的，那么，删除的确认框将展示为 inline 模式：\n\n![Button2Ops 4](https://img.alicdn.com/tfs/TB1jb7ozuH2gK0jSZFEXXcqMpXa-355-183.png)\n\n## FAQ\n\n### 国际化\n\n利用 `@alicloud/console-base-intl-basic` 提供了中、英、日、繁三种，主要是用于 `confirm` 的 `OK` 和 `Cancel`。\n","readmeFilename":"README.md"}