feat: add tooltip and confirm to the button
This commit is contained in:
		
							parent
							
								
									12ba06f89a
								
							
						
					
					
						commit
						4860cb019f
					
				@ -246,6 +246,7 @@ const schema: ISchema = {
 | 
			
		||||
  name: 'action',
 | 
			
		||||
  'x-component': 'Action',
 | 
			
		||||
  'x-component-props': {
 | 
			
		||||
    tooltip: '权限配置',
 | 
			
		||||
    className: 'nb-database-config',
 | 
			
		||||
    icon: 'LockOutlined',
 | 
			
		||||
    type: 'primary',
 | 
			
		||||
 | 
			
		||||
@ -8,6 +8,7 @@ import {
 | 
			
		||||
  Menu,
 | 
			
		||||
  Collapse,
 | 
			
		||||
  Dropdown,
 | 
			
		||||
  Tooltip,
 | 
			
		||||
} from 'antd';
 | 
			
		||||
import isEmpty from 'lodash/isEmpty';
 | 
			
		||||
import {
 | 
			
		||||
@ -43,6 +44,7 @@ import { AuthProvider } from './Auth';
 | 
			
		||||
function DesignableToggle() {
 | 
			
		||||
  const { designable, setDesignable } = useDesignableSwitchContext();
 | 
			
		||||
  return (
 | 
			
		||||
    <Tooltip title={'界面配置'}>
 | 
			
		||||
      <Button
 | 
			
		||||
        className={cls('nb-designable-toggle', { active: designable })}
 | 
			
		||||
        type={'primary'}
 | 
			
		||||
@ -53,6 +55,7 @@ function DesignableToggle() {
 | 
			
		||||
      >
 | 
			
		||||
        <HighlightOutlined />
 | 
			
		||||
      </Button>
 | 
			
		||||
    </Tooltip>
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -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?',
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -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);
 | 
			
		||||
        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]}>
 | 
			
		||||
 | 
			
		||||
@ -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 }}',
 | 
			
		||||
                //   },
 | 
			
		||||
                // },
 | 
			
		||||
              },
 | 
			
		||||
            },
 | 
			
		||||
          },
 | 
			
		||||
 | 
			
		||||
@ -26,6 +26,7 @@ import {
 | 
			
		||||
  message,
 | 
			
		||||
  Drawer,
 | 
			
		||||
  Space,
 | 
			
		||||
  Tooltip,
 | 
			
		||||
} from 'antd';
 | 
			
		||||
import { options, interfaces, getDefaultFields } from './interfaces';
 | 
			
		||||
import {
 | 
			
		||||
@ -107,6 +108,7 @@ export const DatabaseCollection = observer((props) => {
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <div>
 | 
			
		||||
      <Tooltip title={'数据表配置'}>
 | 
			
		||||
        <Button
 | 
			
		||||
          className={'nb-database-config'}
 | 
			
		||||
          style={{
 | 
			
		||||
@ -128,6 +130,7 @@ export const DatabaseCollection = observer((props) => {
 | 
			
		||||
        >
 | 
			
		||||
          <DatabaseOutlined />
 | 
			
		||||
        </Button>
 | 
			
		||||
      </Tooltip>
 | 
			
		||||
      <Drawer
 | 
			
		||||
        width={'50%'}
 | 
			
		||||
        // bodyStyle={{
 | 
			
		||||
 | 
			
		||||
@ -1,4 +1,4 @@
 | 
			
		||||
@bgcolor: #F18B62;
 | 
			
		||||
@bgcolor: #f18b62;
 | 
			
		||||
 | 
			
		||||
.designable-info {
 | 
			
		||||
  position: absolute;
 | 
			
		||||
@ -38,6 +38,7 @@
 | 
			
		||||
      height: 16px !important;
 | 
			
		||||
      vertical-align: top;
 | 
			
		||||
      line-height: 16px !important;
 | 
			
		||||
      cursor: pointer;
 | 
			
		||||
      //   font-size: 10px;
 | 
			
		||||
      //   display: inline-flex;
 | 
			
		||||
      background-color: @bgcolor !important;
 | 
			
		||||
@ -45,6 +46,9 @@
 | 
			
		||||
      border-bottom-right-radius: 1px;
 | 
			
		||||
      //   margin-left: 0 !important;
 | 
			
		||||
      //   margin-right: 2px !important;
 | 
			
		||||
      &.anticon-drag {
 | 
			
		||||
        cursor: grab;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -6,6 +6,8 @@ import {
 | 
			
		||||
  useSensor,
 | 
			
		||||
  useSensors,
 | 
			
		||||
  rectIntersection,
 | 
			
		||||
  closestCenter,
 | 
			
		||||
  closestCorners,
 | 
			
		||||
} from '@dnd-kit/core';
 | 
			
		||||
import {
 | 
			
		||||
  SortableContext,
 | 
			
		||||
 | 
			
		||||
@ -668,7 +668,7 @@ Menu.DesignableBar = (props) => {
 | 
			
		||||
            overlayStyle={{
 | 
			
		||||
              minWidth: 150,
 | 
			
		||||
            }}
 | 
			
		||||
            trigger={['click']}
 | 
			
		||||
            trigger={['hover']}
 | 
			
		||||
            overlay={
 | 
			
		||||
              <AntdMenu
 | 
			
		||||
                onClick={async (info) => {
 | 
			
		||||
 | 
			
		||||
@ -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>{' '}
 | 
			
		||||
                    内打开
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user