feat: ✨ 新增按钮组件

packages/gbeata/.dumirc.ts

@@ -5,6 +5,11 @@ export default defineConfig({
  themeConfig: {
  name: 'gbeata',
  mfsu: false,
+ footer: false,
+ footerConfig: {
+ copyright: 'Copyright © 2022-present Gbeata',
+ theme: 'dark',
+ },
  // 单语言时配置数组即可
  // features: [{ title: '开箱即用'}, { description: '接入简单，安装即使用，全面融入 Ant Design 5.0 风格。'}]
  // 多语言时配置对象，key 为语言名

packages/gbeata/package.json

@@ -69,6 +69,7 @@
  "pre-commit": "lint-staged"
  },
  "dependencies": {
+ "classnames": "^2.3.2",
  "dumi-theme-antd-style": "^0.29.7"
  }
 }

packages/gbeata/src/GButton/g-button.d.ts

@@ -0,0 +1,23 @@
+import { ButtonProps } from 'antd/lib/button';
+
+// 设置权限列表
+export declare function setPermissionList(list: Array<string>): void;
+
+export interface GButtonProps extends ButtonProps {
+ /** true 会有确认，false: 无确认 */
+ confirm?: boolean;
+ /** 确认事件 */
+ onConfirm?(): void;
+ /** 是否只在表格扩展显示 */
+ tableFooterExtraOnly?: boolean;
+ /** 自定义确认消息 */
+ confirmMsg?: React.ReactNode;
+ /** 权限 */
+ permission?: string;
+ /** 悬浮提示 */
+ tooltip?: React.ReactNode;
+ /** 是否用次级字体 */
+ sub?: boolean;
+ __simple?: boolean;
+ [key: string]: any;
+}

packages/gbeata/src/GButton/index.d.ts

@@ -0,0 +1,7 @@
+import { GButtonProps } from './g-button';
+
+declare const MwButton: React.ForwardRefExoticComponent<
+ GButtonProps & React.RefAttributes<HTMLDivElement>
+>;
+
+export default MwButton;

packages/gbeata/src/GButton/index.less

@@ -0,0 +1,21 @@
+.mw-button {
+ &.simple {
+ width: 100%;
+ }
+
+ &.sub {
+ padding: 0;
+ height: unset;
+ line-height: 1em;
+ border: unset;
+ box-shadow: unset;
+ background-color: unset;
+ color: #00000073;
+
+ &:hover,
+ &:focus {
+ color: #000000d9;
+ background-color: unset;
+ }
+ }
+}

packages/gbeata/src/GButton/index.md

@@ -0,0 +1,101 @@
+---
+nav:
+ path: /components
+title: '按钮'
+group:
+ title: 组件
+ order: 1
+---
+
+# GButton <Badge>0.0.5</Badge>
+
+```tsx
+import React, { useState } from 'react';
+import { GButton } from 'gbeata';
+
+export default function Demo() {
+ return <GButton onClick={() => alert('阿米娅')}>gbeata</GButton>;
+}
+```
+
+# 次级按钮
+
+会去除按钮的颜色、边框、内边距、高度等属性。
+
+```tsx
+import React from 'react';
+import { GButton } from 'gbeata';
+
+export default function Demo() {
+ return (
+ <GButton sub onClick={() => alert('阿米娅')}>
+ gbeata
+ </GButton>
+ );
+}
+```
+
+## confirm
+
+可以在按钮点击时进行确认，同时 onClick 方法要换成 onConfirm 方法。
+
+```tsx
+import React from 'react';
+import { GButton } from 'gbeata';
+
+export default function Demo() {
+ return (
+ <GButton
+ confirm
+ confirmMsg="确定删除吗？"
+ danger
+ onConfirm={() => alert('确定')}
+ >
+ 删除
+ </GButton>
+ );
+}
+```
+
+### tooltip
+
+```tsx
+import React from 'react';
+import { GButton } from 'gbeata';
+
+export default function Demo() {
+ return (
+ <GButton tooltip="你好" onClick={() => alert('阿米娅')}>
+ 悬浮提示
+ </GButton>
+ );
+}
+```
+
+## 权限
+
+```tsx
+import React from 'react';
+import { GButton } from 'gbeata';
+
+// 注释掉此行，将不会展示相关按钮
+// setPermissionList(['delete']);
+
+export default function Demo() {
+ return <GButton permission="delete">删除</GButton>;
+}
+```
+
+权限控制可以看[这里](../global/set-permission-list)
+
+## 参数
+
+| 参数名 | 说明 | 参数类型 | 默认值 |
+| ---------- | ---------------------------------------------- | -------- | ------ |
+| confirm | 是否需要确认 | boolean | false |
+| confirmMsg | 确认框提示文字，需要先设置 confirm 属性为 true | string | - |
+| onConfirm | 确认完成事件，需要先设置 confirm 属性为 true | Function | - |
+| onClick | 点击事件 | Function | - |
+| permission | 权限 | string | - |
+
+其它属性保持跟 antd Button 属性一致。

packages/gbeata/src/GButton/index.tsx

@@ -0,0 +1,153 @@
+import { Button, Modal, Popconfirm, Tooltip } from 'antd';
+import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { omitObj } from '../utils';
+import { GButtonProps } from './g-button';
+
+interface AnyKeyProps {
+ [key: string]: any;
+}
+
+const refreshList: Array<any> = [];
+
+export const addRefresh = (setRefresh: any) => {
+ refreshList.push(setRefresh);
+};
+
+export const removeRefresh = (setRefresh: any) => {
+ let refreshIndex = refreshList.findIndex((item) => item === setRefresh);
+ if (refreshIndex >= 0) {
+ refreshList.splice(refreshIndex, 1);
+ }
+};
+
+// 权限列表
+let permissionList: Array<string> = [];
+
+export const setPermissionList = (list: Array<string>) => {
+ permissionList = list;
+ refreshList.forEach((setRefresh) => {
+ setRefresh(Math.random());
+ });
+};
+
+export const hasPermission = (permission: string) => {
+ if (!permission) {
+ return true;
+ }
+ if (permissionList.includes(permission)) {
+ return true;
+ }
+ return false;
+};
+
+let keys = [
+ 'confirm',
+ 'onConfirm',
+ 'confirmMsg',
+ 'tableFooterExtraOnly',
+ 'action',
+ 'api',
+ 'onFinish',
+ '__simple',
+ 'deleteApi',
+ 'detailApi',
+ 'detailParams',
+ 'detailApiFilter',
+ 'permission',
+ 'extra',
+ 'record',
+ 'confirmVisible',
+ 'sub',
+ 'omitKeys',
+];
+export default function GButton(props: GButtonProps) {
+ const [, setRefresh] = useState<number>(0);
+ let params: AnyKeyProps = {
+ ...props,
+ };
+
+ useEffect(() => {
+ addRefresh(setRefresh);
+ return () => {
+ removeRefresh(setRefresh);
+ };
+ }, []);
+
+ // 权限控制
+ if (params.permission && !permissionList.includes(params.permission)) {
+ return null;
+ }
+
+ // 控制样式
+ let className: string[] | string = [`mw-button`];
+
+ // 是否在折叠按钮里面
+ if (props.__simple) {
+ className.push('simple');
+ }
+
+ // 是否是次级按钮
+ if (props.sub) {
+ className.push('sub');
+ }
+
+ // 是否有自定义样式
+ if (props.className) {
+ className.push(props.className);
+ }
+
+ className = classNames(className);
+
+ // 删除一些没有用到的属性
+ if (props.omitKeys) {
+ params = omitObj(params, props.omitKeys);
+ }
+
+ params = omitObj(params, keys);
+
+ // 基础按钮
+ let btn = (
+ <Button className={className} {...params}>
+ {props.children}
+ </Button>
+ );
+
+ // 带悬浮提示
+ if (props.tooltip) {
+ btn = <Tooltip title={props.tooltip}>{btn}</Tooltip>;
+ }
+
+ // 带确认提示
+ if (props.confirm && !props.disabled) {
+ if (!props.__simple) {
+ return (
+ <Popconfirm
+ title={props.confirmMsg}
+ onConfirm={() => props.onConfirm && props.onConfirm()}
+ >
+ {btn}
+ </Popconfirm>
+ );
+ } else {
+ return (
+ <Button
+ className={className}
+ {...params}
+ onClick={() => {
+ Modal.confirm({
+ content: props.confirmMsg,
+ onOk: () => props.onConfirm && props.onConfirm(),
+ });
+ }}
+ >
+ {props.children}
+ </Button>
+ );
+ }
+ }
+
+ return btn;
+}
+
+GButton.componentName = 'GButton';