@antsoo-lib/components 0.1.11 → 0.1.12

package/src/message/useMessage.tsx

@@ -1,231 +0,0 @@
-import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'
-
-import { computed, defineComponent, shallowRef } from 'vue'
-import type { VNode } from 'vue'
-
-import classNames from '../_util/classNames'
-import type { Key } from '../_util/type'
-import { wrapPromiseFn } from '../_util/util'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { useNotification as useVcNotification } from '../vc-notification'
-import type { NotificationAPI } from '../vc-notification'
-import { getMotion } from '../vc-trigger/utils/motionUtil'
-import { PureContent } from './PurePanel'
-import type {
-  ArgsProps,
-  ConfigOptions,
-  MessageInstance,
-  MessageType,
-  NoticeType,
-  TypeOpen,
-} from './interface'
-import useStyle from './style'
-
-const DEFAULT_OFFSET = 8
-const DEFAULT_DURATION = 3
-
-// ==============================================================================
-// ==                                  Holder                                  ==
-// ==============================================================================
-type HolderProps = ConfigOptions & {
-  onAllRemoved?: VoidFunction
-}
-
-interface HolderRef extends NotificationAPI {
-  prefixCls: string
-  hashId: string
-}
-
-const Holder = defineComponent({
-  name: 'Holder',
-  inheritAttrs: false,
-  props: [
-    'top',
-    'prefixCls',
-    'getContainer',
-    'maxCount',
-    'duration',
-    'rtl',
-    'transitionName',
-    'onAllRemoved',
-    'animation',
-    'staticGetContainer',
-  ],
-  setup(props, { expose }) {
-    const { getPrefixCls, getPopupContainer } = useConfigInject('message', props)
-
-    const prefixCls = computed(() => getPrefixCls('message', props.prefixCls))
-
-    const [, hashId] = useStyle(prefixCls)
-
-    // =============================== Style ===============================
-    const getStyles = () => {
-      const top = props.top ?? DEFAULT_OFFSET
-      return {
-        left: '50%',
-        transform: 'translateX(-50%)',
-        top: typeof top === 'number' ? `${top}px` : top,
-      }
-    }
-    const getClassName = () => classNames(hashId.value, props.rtl ? `${prefixCls.value}-rtl` : '')
-
-    // ============================== Motion ===============================
-    const getNotificationMotion = () =>
-      getMotion({
-        prefixCls: prefixCls.value,
-        animation: props.animation ?? `move-up`,
-        transitionName: props.transitionName,
-      })
-
-    // ============================ Close Icon =============================
-    const mergedCloseIcon = (
-      <span class={`${prefixCls.value}-close-x`}>
-        <CloseOutlined class={`${prefixCls.value}-close-icon`} />
-      </span>
-    )
-    // ============================== Origin ===============================
-    const [api, holder] = useVcNotification({
-      //@ts-ignore
-      getStyles,
-      prefixCls: prefixCls.value,
-      getClassName,
-      motion: getNotificationMotion,
-      closable: false,
-      closeIcon: mergedCloseIcon,
-      duration: props.duration ?? DEFAULT_DURATION,
-      getContainer: props.staticGetContainer ?? getPopupContainer.value,
-      maxCount: props.maxCount,
-      onAllRemoved: props.onAllRemoved,
-    })
-
-    // ================================ Ref ================================
-    expose({
-      ...api,
-      prefixCls,
-      hashId,
-    })
-    return holder
-  },
-})
-
-// ==============================================================================
-// ==                                   Hook                                   ==
-// ==============================================================================
-let keyIndex = 0
-
-export function useInternalMessage(
-  messageConfig?: HolderProps,
-): readonly [MessageInstance, () => VNode] {
-  const holderRef = shallowRef<HolderRef>(null)
-  const holderKey = Symbol('messageHolderKey')
-  // ================================ API ================================
-
-  // Wrap with notification content
-  // >>> close
-  const close = (key: Key) => {
-    holderRef.value?.close(key)
-  }
-
-  // >>> Open
-  const open = (config: ArgsProps): MessageType => {
-    if (!holderRef.value) {
-      const fakeResult: any = () => {}
-      fakeResult.then = () => {}
-      return fakeResult
-    }
-
-    const { open: originOpen, prefixCls, hashId } = holderRef.value
-    const noticePrefixCls = `${prefixCls}-notice`
-    const { content, icon, type, key, class: className, onClose, ...restConfig } = config
-
-    let mergedKey: Key = key!
-    if (mergedKey === undefined || mergedKey === null) {
-      keyIndex += 1
-      mergedKey = `antd-message-${keyIndex}`
-    }
-
-    return wrapPromiseFn((resolve) => {
-      originOpen({
-        ...restConfig,
-        key: mergedKey,
-        content: () => (
-          <PureContent
-            prefixCls={prefixCls}
-            type={type}
-            icon={typeof icon === 'function' ? icon() : icon}
-          >
-            {typeof content === 'function' ? content() : content}
-          </PureContent>
-        ),
-        placement: 'top',
-        // @ts-ignore
-        class: classNames(type && `${noticePrefixCls}-${type}`, hashId, className),
-        onClose: () => {
-          onClose?.()
-          resolve()
-        },
-      })
-
-      // Return close function
-      return () => {
-        close(mergedKey)
-      }
-    })
-  }
-
-  // >>> destroy
-  const destroy = (key?: Key) => {
-    if (key !== undefined) {
-      close(key)
-    } else {
-      holderRef.value?.destroy()
-    }
-  }
-
-  const wrapAPI = {
-    open,
-    destroy,
-  } as MessageInstance
-
-  const keys: NoticeType[] = ['info', 'success', 'warning', 'error', 'loading']
-  keys.forEach((type) => {
-    const typeOpen: TypeOpen = (jointContent, duration, onClose) => {
-      let config: ArgsProps
-      if (jointContent && typeof jointContent === 'object' && 'content' in jointContent) {
-        config = jointContent
-      } else {
-        config = {
-          content: jointContent as VNode,
-        }
-      }
-
-      // Params
-      let mergedDuration: number | undefined
-      let mergedOnClose: VoidFunction | undefined
-      if (typeof duration === 'function') {
-        mergedOnClose = duration
-      } else {
-        mergedDuration = duration
-        mergedOnClose = onClose
-      }
-
-      const mergedConfig = {
-        onClose: mergedOnClose,
-        duration: mergedDuration,
-        ...config,
-        type,
-      }
-
-      return open(mergedConfig)
-    }
-
-    wrapAPI[type] = typeOpen
-  })
-
-  // ============================== Return ===============================
-  return [wrapAPI, () => <Holder key={holderKey} {...messageConfig} ref={holderRef} />] as const
-}
-
-export default function useMessage(messageConfig?: ConfigOptions) {
-  return useInternalMessage(messageConfig)
-}

package/src/modal/ConfirmDialog.tsx

@@ -1,232 +0,0 @@
-import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled'
-import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'
-import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled'
-import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled'
-
-import { defineComponent } from 'vue'
-
-import ActionButton from '../_util/ActionButton'
-import classNames from '../_util/classNames'
-import { getTransitionName } from '../_util/transition'
-import warning from '../_util/warning'
-import { useLocaleReceiver } from '../locale-provider/LocaleReceiver'
-import type { ModalFuncProps, ModalLocale } from './Modal'
-import Dialog from './Modal'
-
-interface ConfirmDialogProps extends ModalFuncProps {
-  afterClose?: () => void
-  close?: (...args: any[]) => void
-  autoFocusButton?: null | 'ok' | 'cancel'
-  rootPrefixCls: string
-  iconPrefixCls?: string
-
-  locale?: ModalLocale
-}
-
-function renderSomeContent(someContent: any) {
-  if (typeof someContent === 'function') {
-    return someContent()
-  }
-  return someContent
-}
-
-export default defineComponent<ConfirmDialogProps>({
-  name: 'ConfirmDialog',
-  inheritAttrs: false,
-  props: [
-    'icon',
-    'onCancel',
-    'onOk',
-    'close',
-    'closable',
-    'zIndex',
-    'afterClose',
-    'visible',
-    'open',
-    'keyboard',
-    'centered',
-    'getContainer',
-    'maskStyle',
-    'okButtonProps',
-    'cancelButtonProps',
-    'okType',
-    'prefixCls',
-    'okCancel',
-    'width',
-    'mask',
-    'maskClosable',
-    'okText',
-    'cancelText',
-    'autoFocusButton',
-    'transitionName',
-    'maskTransitionName',
-    'type',
-    'title',
-    'content',
-    'direction',
-    'rootPrefixCls',
-    'bodyStyle',
-    'closeIcon',
-    'modalRender',
-    'focusTriggerAfterClose',
-    'wrapClassName',
-    'confirmPrefixCls',
-    'footer',
-  ] as any,
-  setup(props, { attrs }) {
-    const [locale] = useLocaleReceiver('Modal')
-
-    if (process.env.NODE_ENV !== 'production') {
-      warning(
-        props.visible === undefined,
-        'Modal',
-        `\`visible\` is deprecated, please use \`open\` instead.`,
-      )
-    }
-    return () => {
-      const {
-        icon,
-        onCancel,
-        onOk,
-        close,
-        okText,
-        closable = false,
-        zIndex,
-        afterClose,
-        keyboard,
-        centered,
-        getContainer,
-        maskStyle,
-        okButtonProps,
-        cancelButtonProps,
-        okCancel,
-        width = 416,
-        mask = true,
-        maskClosable = false,
-        type,
-        open,
-        title,
-        content,
-        direction,
-        closeIcon,
-        modalRender,
-        focusTriggerAfterClose,
-        rootPrefixCls,
-        bodyStyle,
-        wrapClassName,
-        footer,
-      } = props
-
-      // Icon
-      let mergedIcon = icon
-
-      // 支持传入{ icon: null }来隐藏`Modal.confirm`默认的Icon
-      if (!icon && icon !== null) {
-        switch (type) {
-          case 'info':
-            mergedIcon = <InfoCircleFilled />
-            break
-
-          case 'success':
-            mergedIcon = <CheckCircleFilled />
-            break
-
-          case 'error':
-            mergedIcon = <CloseCircleFilled />
-            break
-
-          default:
-            mergedIcon = <ExclamationCircleFilled />
-        }
-      }
-      const okType = props.okType || 'primary'
-      const prefixCls = props.prefixCls || 'ant-modal'
-      const contentPrefixCls = `${prefixCls}-confirm`
-      const style = attrs.style || {}
-      const mergedOkCancel = okCancel ?? type === 'confirm'
-      const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok'
-
-      const confirmPrefixCls = `${prefixCls}-confirm`
-
-      const classString = classNames(
-        confirmPrefixCls,
-        `${confirmPrefixCls}-${props.type}`,
-        { [`${confirmPrefixCls}-rtl`]: direction === 'rtl' },
-        attrs.class,
-      )
-
-      const mergedLocal = locale.value
-
-      const cancelButton = mergedOkCancel && (
-        <ActionButton
-          actionFn={onCancel}
-          close={close}
-          autofocus={autoFocusButton === 'cancel'}
-          buttonProps={cancelButtonProps}
-          prefixCls={`${rootPrefixCls}-btn`}
-        >
-          {renderSomeContent(props.cancelText) || mergedLocal.cancelText}
-        </ActionButton>
-      )
-      return (
-        <Dialog
-          prefixCls={prefixCls}
-          class={classString}
-          wrapClassName={classNames(
-            { [`${confirmPrefixCls}-centered`]: !!centered },
-            wrapClassName,
-          )}
-          onCancel={(e) => close?.({ triggerCancel: true }, e)}
-          open={open}
-          title=""
-          footer=""
-          transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
-          maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
-          mask={mask}
-          maskClosable={maskClosable}
-          maskStyle={maskStyle}
-          style={style}
-          bodyStyle={bodyStyle}
-          width={width}
-          zIndex={zIndex}
-          afterClose={afterClose}
-          keyboard={keyboard}
-          centered={centered}
-          getContainer={getContainer}
-          closable={closable}
-          closeIcon={closeIcon}
-          modalRender={modalRender}
-          focusTriggerAfterClose={focusTriggerAfterClose}
-        >
-          <div class={`${contentPrefixCls}-body-wrapper`}>
-            <div class={`${contentPrefixCls}-body`}>
-              {renderSomeContent(mergedIcon)}
-              {title === undefined ? null : (
-                <span class={`${contentPrefixCls}-title`}>{renderSomeContent(title)}</span>
-              )}
-              <div class={`${contentPrefixCls}-content`}>{renderSomeContent(content)}</div>
-            </div>
-            {footer !== undefined ? (
-              renderSomeContent(footer)
-            ) : (
-              <div class={`${contentPrefixCls}-btns`}>
-                {cancelButton}
-                <ActionButton
-                  type={okType}
-                  actionFn={onOk}
-                  close={close}
-                  autofocus={autoFocusButton === 'ok'}
-                  buttonProps={okButtonProps}
-                  prefixCls={`${rootPrefixCls}-btn`}
-                >
-                  {renderSomeContent(okText) ||
-                    (mergedOkCancel ? mergedLocal.okText : mergedLocal.justOkText)}
-                </ActionButton>
-              </div>
-            )}
-          </div>
-        </Dialog>
-      )
-    }
-  },
-})