feat: add tooltip and confirm to the button

2024-11-15 13:46:45 +00:00 · 2021-08-25 12:21:11 +08:00 · 2021-08-25 12:21:11 +08:00 · 4860cb019f
commit 4860cb019f
parent 12ba06f89a
10 changed files with 105 additions and 53 deletions
--- a/packages/client/src/components/admin-layout/Permissions/index.tsx
+++ b/packages/client/src/components/admin-layout/Permissions/index.tsx
@ -246,6 +246,7 @@ const schema: ISchema = {
  name: 'action',
  'x-component': 'Action',
  'x-component-props': {
+    tooltip: '权限配置',
    className: 'nb-database-config',
    icon: 'LockOutlined',
    type: 'primary',
--- a/packages/client/src/components/admin-layout/index.tsx
+++ b/packages/client/src/components/admin-layout/index.tsx
@ -8,6 +8,7 @@ import {
  Menu,
  Collapse,
  Dropdown,
+  Tooltip,
 } from 'antd';
 import isEmpty from 'lodash/isEmpty';
 import {
@ -43,16 +44,18 @@ import { AuthProvider } from './Auth';
 function DesignableToggle() {
  const { designable, setDesignable } = useDesignableSwitchContext();
  return (
-    <Button
-      className={cls('nb-designable-toggle', { active: designable })}
-      type={'primary'}
-      style={{ height: 46, border: 0 }}
-      onClick={() => {
-        setDesignable(!designable);
-      }}
-    >
-      <HighlightOutlined />
-    </Button>
+    <Tooltip title={'界面配置'}>
+      <Button
+        className={cls('nb-designable-toggle', { active: designable })}
+        type={'primary'}
+        style={{ height: 46, border: 0 }}
+        onClick={() => {
+          setDesignable(!designable);
+        }}
+      >
+        <HighlightOutlined />
+      </Button>
+    </Tooltip>
  );
 }

--- a/packages/client/src/schemas/action/index.md
+++ b/packages/client/src/schemas/action/index.md
@ -102,6 +102,10 @@ const schema = {
  'x-designable-bar': 'Action.DesignableBar',
  'x-component-props': {
    useAction: '{{ useAction }}',
+    tooltip: '提示信息',
+    confirm: {
+      title: 'Do you Want to delete these items?',
+    },
  },
 };

--- a/packages/client/src/schemas/action/index.tsx
+++ b/packages/client/src/schemas/action/index.tsx
@ -20,6 +20,7 @@ import {
  Drawer,
  Modal,
  Select,
+  Tooltip,
 } from 'antd';
 import { Link, useHistory, LinkProps, Switch } from 'react-router-dom';
 import {
@ -49,8 +50,21 @@ import { useDisplayedMapContext } from '../../constate';

 export const ButtonComponentContext = createContext(null);

+function getTooltipProps(tooltip) {
+  if (typeof tooltip === 'string') {
+    return { title: tooltip };
+  }
+  return tooltip;
+}
+
 export const Action: any = observer((props: any) => {
-  const { useAction = useDefaultAction, icon, ...others } = props;
+  const {
+    tooltip,
+    confirm,
+    useAction = useDefaultAction,
+    icon,
+    ...others
+  } = props;
  const { run } = useAction();
  const field = useField();
  const { schema, DesignableBar } = useDesignable();
@ -59,19 +73,31 @@ export const Action: any = observer((props: any) => {
  const isDropdownOrPopover =
    child &&
    ['Action.Dropdown', 'Action.Popover'].includes(child['x-component']);
-  const button = (
+  let button = (
    <Button
      {...others}
      icon={<IconPicker type={icon} />}
      onClick={async () => {
        setVisible(true);
-        await run();
+        if (confirm) {
+          Modal.confirm({
+            ...confirm,
+            async onOk() {
+              await run();
+            },
+          });
+        } else {
+          await run();
+        }
      }}
    >
      {schema.title}
      <DesignableBar path={getSchemaPath(schema)} />
    </Button>
  );
+  if (tooltip) {
+    button = <Tooltip {...getTooltipProps(tooltip)}>{button}</Tooltip>;
+  }
  return (
    <ButtonComponentContext.Provider value={button}>
      <VisibleContext.Provider value={[visible, setVisible]}>
--- a/packages/client/src/schemas/add-new/index.tsx
+++ b/packages/client/src/schemas/add-new/index.tsx
@ -175,6 +175,10 @@ function generateCardItemSchema(component) {
              'x-component': 'Action',
              'x-designable-bar': 'Table.Action.DesignableBar',
              'x-component-props': {
+                confirm: {
+                  title: '删除数据',
+                  content: '删除后无法恢复，确定要删除吗？'
+                },
                useAction: '{{ Table.useTableDestroyAction }}',
              },
            },
@ -312,17 +316,17 @@ function generateCardItemSchema(component) {
                    },
                  },
                },
-                [uid()]: {
-                  type: 'void',
-                  title: '删除',
-                  'x-component': 'Action',
-                  'x-designable-bar': 'Table.Action.DesignableBar',
-                  'x-action-type': 'destroy',
-                  'x-component-props': {
-                    type: 'link',
-                    useAction: '{{ Table.useTableDestroyAction }}',
-                  },
-                },
+                // [uid()]: {
+                //   type: 'void',
+                //   title: '删除',
+                //   'x-component': 'Action',
+                //   'x-designable-bar': 'Table.Action.DesignableBar',
+                //   'x-action-type': 'destroy',
+                //   'x-component-props': {
+                //     type: 'link',
+                //     useAction: '{{ Table.useTableDestroyAction }}',
+                //   },
+                // },
              },
            },
          },
--- a/packages/client/src/schemas/database-field/index.tsx
+++ b/packages/client/src/schemas/database-field/index.tsx
@ -26,6 +26,7 @@ import {
  message,
  Drawer,
  Space,
+  Tooltip,
 } from 'antd';
 import { options, interfaces, getDefaultFields } from './interfaces';
 import {
@ -107,27 +108,29 @@ export const DatabaseCollection = observer((props) => {

  return (
    <div>
-      <Button
-        className={'nb-database-config'}
-        style={{
-          height: 46,
-          borderRadius: 0,
-        }}
-        onClick={async () => {
-          setVisible(true);
-          // await run();
-          if (field.value?.length === 0) {
-            field.push({
-              name: `t_${uid()}`,
-              unsaved: true,
-              generalFields: getDefaultFields(),
-            });
-          }
-        }}
-        type={'primary'}
-      >
-        <DatabaseOutlined />
-      </Button>
+      <Tooltip title={'数据表配置'}>
+        <Button
+          className={'nb-database-config'}
+          style={{
+            height: 46,
+            borderRadius: 0,
+          }}
+          onClick={async () => {
+            setVisible(true);
+            // await run();
+            if (field.value?.length === 0) {
+              field.push({
+                name: `t_${uid()}`,
+                unsaved: true,
+                generalFields: getDefaultFields(),
+              });
+            }
+          }}
+          type={'primary'}
+        >
+          <DatabaseOutlined />
+        </Button>
+      </Tooltip>
      <Drawer
        width={'50%'}
        // bodyStyle={{
--- a/packages/client/src/schemas/designable-bar/style.less
+++ b/packages/client/src/schemas/designable-bar/style.less
@ -1,4 +1,4 @@
-@bgcolor: #F18B62;
+@bgcolor: #f18b62;

 .designable-info {
  position: absolute;
@ -38,13 +38,17 @@
      height: 16px !important;
      vertical-align: top;
      line-height: 16px !important;
-    //   font-size: 10px;
-    //   display: inline-flex;
+      cursor: pointer;
+      //   font-size: 10px;
+      //   display: inline-flex;
      background-color: @bgcolor !important;
      border-bottom-left-radius: 1px;
      border-bottom-right-radius: 1px;
-    //   margin-left: 0 !important;
-    //   margin-right: 2px !important;
+      //   margin-left: 0 !important;
+      //   margin-right: 2px !important;
+      &.anticon-drag {
+        cursor: grab;
+      }
    }
  }
 }
--- a/packages/client/src/schemas/kanban/index.tsx
+++ b/packages/client/src/schemas/kanban/index.tsx
@ -6,6 +6,8 @@ import {
  useSensor,
  useSensors,
  rectIntersection,
+  closestCenter,
+  closestCorners,
 } from '@dnd-kit/core';
 import {
  SortableContext,
--- a/packages/client/src/schemas/menu/index.tsx
+++ b/packages/client/src/schemas/menu/index.tsx
@ -668,7 +668,7 @@ Menu.DesignableBar = (props) => {
            overlayStyle={{
              minWidth: 150,
            }}
-            trigger={['click']}
+            trigger={['hover']}
            overlay={
              <AntdMenu
                onClick={async (info) => {
--- a/packages/client/src/schemas/table/index.tsx
+++ b/packages/client/src/schemas/table/index.tsx
@ -942,6 +942,10 @@ function generateActionSchema(type) {
      'x-component': 'Action',
      'x-designable-bar': 'Table.Action.DesignableBar',
      'x-component-props': {
+        confirm: {
+          title: '删除数据',
+          content: '删除后无法恢复，确定要删除吗？'
+        },
        useAction: '{{ Table.useTableDestroyAction }}',
      },
    },
@ -1111,7 +1115,7 @@ function AddActionButton() {
        className={'designable-btn designable-btn-dash'}
        style={{ marginLeft: 8 }}
        type={'dashed'}
-        icon={<PlusOutlined />}
+        icon={<SettingOutlined />}
      >
        配置操作
      </Button>
@ -1779,6 +1783,7 @@ Table.Action.DesignableBar = () => {
                      bordered={false}
                      size={'small'}
                      defaultValue={popupComponent}
+                      style={{ width: 100 }}
                      onChange={(value) => {
                        const s = Object.values(schema.properties).shift();
                        s['x-component'] = value;
@ -1795,7 +1800,7 @@ Table.Action.DesignableBar = () => {
                        抽屉
                      </Select.Option>
                      <Select.Option value={'Action.Window'}>
-                        浏览器窗口
+                        窗口
                      </Select.Option>
                    </Select>{' '}
                    内打开