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';