ant-design-vue/components/float-button/FloatButton.tsx
2023-03-03 16:58:47 +08:00

101 lines
3.0 KiB
Vue

import classNames from '../_util/classNames';
import { defineComponent, computed, ref } from 'vue';
import Tooltip from '../tooltip';
import Content from './FloatButtonContent';
import useConfigInject from '../config-provider/hooks/useConfigInject';
import { useInjectFloatButtonGroupContext } from './context';
import warning from '../_util/warning';
import { initDefaultProps } from '../_util/props-util';
import { floatButtonProps } from './interface';
// import { useCompactItemContext } from '../space/Compact';
// CSSINJS
import useStyle from './style';
export const floatButtonPrefixCls = 'float-btn';
const FloatButton = defineComponent({
compatConfig: { MODE: 3 },
name: 'AFloatButton',
inheritAttrs: false,
props: initDefaultProps(floatButtonProps(), { type: 'default', shape: 'circle' }),
setup(props, { attrs, slots }) {
const { prefixCls, direction } = useConfigInject(floatButtonPrefixCls, props);
const [wrapSSR, hashId] = useStyle(prefixCls);
const { shape: groupShape } = useInjectFloatButtonGroupContext();
const floatButtonRef = ref<HTMLAnchorElement | HTMLButtonElement>(null);
const mergeShape = computed(() => {
return groupShape?.value || props.shape;
});
return () => {
const {
prefixCls: customPrefixCls,
type = 'default',
shape = 'circle',
description = slots.description?.(),
tooltip,
...restProps
} = props;
const classString = classNames(
prefixCls.value,
`${prefixCls.value}-${type}`,
`${prefixCls.value}-${mergeShape.value}`,
{
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
},
attrs.class,
hashId.value,
);
const buttonNode = (
<Tooltip
placement="left"
v-slots={{
title:
slots.tooltip || tooltip
? () => (slots.tooltip && slots.tooltip()) || tooltip
: undefined,
default: () => (
<div class={`${prefixCls.value}-body`}>
<Content
prefixCls={prefixCls.value}
v-slots={{
icon: slots.icon,
description: () => description,
}}
></Content>
</div>
),
}}
></Tooltip>
);
if (process.env.NODE_ENV !== 'production') {
warning(
!(shape === 'circle' && description),
'FloatButton',
'supported only when `shape` is `square`. Due to narrow space for text, short sentence is recommended.',
);
}
return wrapSSR(
props.href ? (
<a ref={floatButtonRef} {...attrs} {...(restProps as any)} class={classString}>
{buttonNode}
</a>
) : (
<button ref={floatButtonRef} {...attrs} {...restProps} class={classString} type="button">
{buttonNode}
</button>
),
);
};
},
});
export default FloatButton;