@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-mentions/src/util.ts

@@ -0,0 +1,124 @@
+import type { MentionsProps } from './Mentions'
+import type { OptionProps } from './Option'
+
+/**
+ * Cut input selection into 2 part and return text before selection start
+ */
+export function getBeforeSelectionText(input: HTMLTextAreaElement) {
+  const { selectionStart } = input
+  return input.value.slice(0, selectionStart)
+}
+
+interface MeasureIndex {
+  location: number
+  prefix: string
+}
+/**
+ * Find the last match prefix index
+ */
+export function getLastMeasureIndex(text: string, prefix: string | string[] = ''): MeasureIndex {
+  const prefixList: string[] = Array.isArray(prefix) ? prefix : [prefix]
+  return prefixList.reduce(
+    (lastMatch: MeasureIndex, prefixStr): MeasureIndex => {
+      const lastIndex = text.lastIndexOf(prefixStr)
+      if (lastIndex > lastMatch.location) {
+        return {
+          location: lastIndex,
+          prefix: prefixStr,
+        }
+      }
+      return lastMatch
+    },
+    { location: -1, prefix: '' },
+  )
+}
+
+interface MeasureConfig {
+  measureLocation: number
+  prefix: string
+  targetText: string
+  selectionStart: number
+  split: string
+}
+
+function lower(char: string | undefined): string {
+  return (char || '').toLowerCase()
+}
+
+function reduceText(text: string, targetText: string, split: string) {
+  const firstChar = text[0]
+  if (!firstChar || firstChar === split) {
+    return text
+  }
+
+  // Reuse rest text as it can
+  let restText = text
+  const targetTextLen = targetText.length
+  for (let i = 0; i < targetTextLen; i += 1) {
+    if (lower(restText[i]) !== lower(targetText[i])) {
+      restText = restText.slice(i)
+      break
+    } else if (i === targetTextLen - 1) {
+      restText = restText.slice(targetTextLen)
+    }
+  }
+
+  return restText
+}
+
+/**
+ * Paint targetText into current text:
+ *  text: little@litest
+ *  targetText: light
+ *  => little @light test
+ */
+export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
+  const { measureLocation, prefix, targetText, selectionStart, split } = measureConfig
+
+  // Before text will append one space if have other text
+  let beforeMeasureText = text.slice(0, measureLocation)
+  if (beforeMeasureText[beforeMeasureText.length - split.length] === split) {
+    beforeMeasureText = beforeMeasureText.slice(0, beforeMeasureText.length - split.length)
+  }
+  if (beforeMeasureText) {
+    beforeMeasureText = `${beforeMeasureText}${split}`
+  }
+
+  // Cut duplicate string with current targetText
+  let restText = reduceText(
+    text.slice(selectionStart),
+    targetText.slice(selectionStart - measureLocation - prefix.length),
+    split,
+  )
+  if (restText.slice(0, split.length) === split) {
+    restText = restText.slice(split.length)
+  }
+
+  const connectedStartText = `${beforeMeasureText}${prefix}${targetText}${split}`
+
+  return {
+    text: `${connectedStartText}${restText}`,
+    selectionLocation: connectedStartText.length,
+  }
+}
+
+export function setInputSelection(input: HTMLTextAreaElement, location: number) {
+  input.setSelectionRange(location, location)
+
+  /**
+   * Reset caret into view.
+   * Since this function always called by user control, it's safe to focus element.
+   */
+  input.blur()
+  input.focus()
+}
+
+export function validateSearch(text: string, props: MentionsProps) {
+  const { split } = props
+  return !split || !text.includes(split)
+}
+
+export function filterOption(input: string, { value = '' }: OptionProps): boolean {
+  const lowerCase = input.toLowerCase()
+  return value.toLowerCase().includes(lowerCase)
+}

package/src/vc-notification/HookNotification.tsx

@@ -0,0 +1,231 @@
+import type { CSSProperties } from 'vue'
+import { TransitionGroup, computed, defineComponent, ref, watch } from 'vue'
+
+import Portal from '../_util/Portal'
+import classNames from '../_util/classNames'
+import type { CSSMotionProps } from '../_util/transition'
+import { getTransitionGroupProps } from '../_util/transition'
+import type { Key, VueNode } from '../_util/type'
+import type { NoticeProps } from './Notice'
+import Notice from './Notice'
+
+let seed = 0
+const now = Date.now()
+
+export function getUuid() {
+  const id = seed
+  seed += 1
+  return `rcNotification_${now}_${id}`
+}
+
+export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight'
+
+export interface OpenConfig extends NoticeProps {
+  key: Key
+  placement?: Placement
+  content?: VueNode
+  duration?: number | null
+}
+
+export type Placements = Partial<Record<Placement, OpenConfig[]>>
+
+export interface NoticeContent extends Omit<NoticeProps, 'prefixCls' | 'noticeKey' | 'onClose'> {
+  prefixCls?: string
+  key?: Key
+  updateMark?: string
+  content?: any
+  onClose?: () => void
+  style?: CSSProperties
+  class?: string
+  placement?: Placement
+}
+
+export type NoticeFunc = (noticeProps: NoticeContent) => void
+export type HolderReadyCallback = (
+  div: HTMLDivElement,
+  noticeProps: NoticeProps & { key: Key },
+) => void
+
+export interface NotificationInstance {
+  notice: NoticeFunc
+  removeNotice: (key: Key) => void
+  destroy: () => void
+  add: (noticeProps: NoticeContent) => void
+  component: Notification
+}
+
+export interface HookNotificationProps {
+  prefixCls?: string
+  transitionName?: string
+  animation?: string | CSSMotionProps | ((placement?: Placement) => CSSMotionProps)
+  maxCount?: number
+  closeIcon?: any
+  hashId?: string
+  // Hook Notification
+  remove: (key: Key) => void
+  notices: NotificationState
+  getStyles?: (placement?: Placement) => CSSProperties
+  getClassName?: (placement?: Placement) => string
+  onAllRemoved?: VoidFunction
+  getContainer?: () => HTMLElement
+}
+
+type NotificationState = {
+  notice: NoticeContent & {
+    userPassKey?: Key
+  }
+  holderCallback?: HolderReadyCallback
+}[]
+
+const Notification = defineComponent<HookNotificationProps>({
+  name: 'HookNotification',
+  inheritAttrs: false,
+  props: [
+    'prefixCls',
+    'transitionName',
+    'animation',
+    'maxCount',
+    'closeIcon',
+    'hashId',
+    'remove',
+    'notices',
+    'getStyles',
+    'getClassName',
+    'onAllRemoved',
+    'getContainer',
+  ] as any,
+  setup(props, { attrs, slots }) {
+    const hookRefs = new Map<Key, HTMLDivElement>()
+    const notices = computed(() => props.notices)
+    const transitionProps = computed(() => {
+      let name = props.transitionName
+      if (!name && props.animation) {
+        switch (typeof props.animation) {
+          case 'string':
+            name = props.animation
+            break
+          case 'function':
+            name = props.animation().name
+            break
+          case 'object':
+            name = props.animation.name
+            break
+          default:
+            name = `${props.prefixCls}-fade`
+            break
+        }
+      }
+      return getTransitionGroupProps(name)
+    })
+
+    const remove = (key: Key) => props.remove(key)
+    const placements = ref({} as Record<Placement, NotificationState>)
+    watch(notices, () => {
+      const nextPlacements = {} as any
+      // init placements with animation
+      Object.keys(placements.value).forEach((placement) => {
+        nextPlacements[placement] = []
+      })
+      props.notices.forEach((config) => {
+        const { placement = 'topRight' } = config.notice
+        if (placement) {
+          nextPlacements[placement] = nextPlacements[placement] || []
+          nextPlacements[placement].push(config)
+        }
+      })
+      placements.value = nextPlacements
+    })
+
+    const placementList = computed(() => Object.keys(placements.value) as Placement[])
+
+    return () => {
+      const { prefixCls, closeIcon = slots.closeIcon?.({ prefixCls }) } = props
+      const noticeNodes = placementList.value.map((placement) => {
+        const noticesForPlacement = placements.value[placement]
+        const classes = props.getClassName?.(placement)
+        const styles = props.getStyles?.(placement)
+        const noticeNodesForPlacement = noticesForPlacement.map(
+          ({ notice, holderCallback }, index) => {
+            const updateMark = index === notices.value.length - 1 ? notice.updateMark : undefined
+            const { key, userPassKey } = notice
+            const { content } = notice
+            const noticeProps = {
+              prefixCls,
+              closeIcon: typeof closeIcon === 'function' ? closeIcon({ prefixCls }) : closeIcon,
+              ...(notice as any),
+              ...notice.props,
+              key,
+              noticeKey: userPassKey || key,
+              updateMark,
+              onClose: (noticeKey: Key) => {
+                remove(noticeKey)
+                notice.onClose?.()
+              },
+              onClick: notice.onClick,
+            }
+
+            if (holderCallback) {
+              return (
+                <div
+                  key={key}
+                  class={`${prefixCls}-hook-holder`}
+                  ref={(div: HTMLDivElement) => {
+                    if (typeof key === 'undefined') {
+                      return
+                    }
+                    if (div) {
+                      hookRefs.set(key, div)
+                      holderCallback(div, noticeProps)
+                    } else {
+                      hookRefs.delete(key)
+                    }
+                  }}
+                />
+              )
+            }
+
+            return (
+              <Notice {...noticeProps} class={classNames(noticeProps.class, props.hashId)}>
+                {typeof content === 'function' ? content({ prefixCls }) : content}
+              </Notice>
+            )
+          },
+        )
+        const className = {
+          [prefixCls]: 1,
+          [`${prefixCls}-${placement}`]: 1,
+          [attrs.class as string]: !!attrs.class,
+          [props.hashId]: true,
+          [classes]: !!classes,
+        }
+        function onAfterLeave() {
+          if (noticesForPlacement.length > 0) {
+            return
+          }
+          Reflect.deleteProperty(placements.value, placement)
+          props.onAllRemoved?.()
+        }
+        return (
+          <div
+            key={placement}
+            class={className}
+            style={
+              (attrs.style as CSSProperties) ||
+              styles || {
+                top: '65px',
+                left: '50%',
+              }
+            }
+          >
+            <TransitionGroup tag="div" {...transitionProps.value} onAfterLeave={onAfterLeave}>
+              {noticeNodesForPlacement}
+            </TransitionGroup>
+          </div>
+        )
+      })
+      return <Portal getContainer={props.getContainer}>{noticeNodes}</Portal>
+    }
+  },
+})
+
+export default Notification

package/src/vc-notification/Notice.tsx

@@ -0,0 +1,139 @@
+import { Teleport, computed, defineComponent, onMounted, onUnmounted, watch } from 'vue'
+import type { CSSProperties, HTMLAttributes } from 'vue'
+
+import type { MouseEventHandler } from '../_util/EventInterface'
+import classNames from '../_util/classNames'
+import type { Key } from '../_util/type'
+
+interface DivProps extends HTMLAttributes {
+  // Ideally we would allow all data-* props but this would depend on https://github.com/microsoft/TypeScript/issues/28960
+  'data-testid'?: string
+}
+
+export interface NoticeProps {
+  prefixCls: string
+  duration?: number | null
+  updateMark?: string
+  /** Mark as final key since set maxCount may keep the key but user pass key is different */
+  noticeKey: Key
+  closeIcon?: any
+  closable?: boolean
+  props?: DivProps
+  onClick?: MouseEventHandler
+  onClose?: (key: Key) => void
+
+  holder?: HTMLDivElement
+
+  visible?: boolean
+}
+
+export default defineComponent<NoticeProps>({
+  name: 'Notice',
+  inheritAttrs: false,
+  props: [
+    'prefixCls',
+    'duration',
+    'updateMark',
+    'noticeKey',
+    'closeIcon',
+    'closable',
+    'props',
+    'onClick',
+    'onClose',
+    'holder',
+    'visible',
+  ] as any,
+  setup(props, { attrs, slots }) {
+    let closeTimer: any
+    let isUnMounted = false
+    const duration = computed(() => (props.duration === undefined ? 4.5 : props.duration))
+    const startCloseTimer = () => {
+      if (duration.value && !isUnMounted) {
+        closeTimer = setTimeout(() => {
+          close()
+        }, duration.value * 1000)
+      }
+    }
+
+    const clearCloseTimer = () => {
+      if (closeTimer) {
+        clearTimeout(closeTimer)
+        closeTimer = null
+      }
+    }
+    const close = (e?: MouseEvent) => {
+      if (e) {
+        e.stopPropagation()
+      }
+      clearCloseTimer()
+      const { onClose, noticeKey } = props
+      if (onClose) {
+        onClose(noticeKey)
+      }
+    }
+    const restartCloseTimer = () => {
+      clearCloseTimer()
+      startCloseTimer()
+    }
+    onMounted(() => {
+      startCloseTimer()
+    })
+    onUnmounted(() => {
+      isUnMounted = true
+      clearCloseTimer()
+    })
+
+    watch(
+      [duration, () => props.updateMark, () => props.visible],
+      ([preDuration, preUpdateMark, preVisible], [newDuration, newUpdateMark, newVisible]) => {
+        if (
+          preDuration !== newDuration ||
+          preUpdateMark !== newUpdateMark ||
+          (preVisible !== newVisible && newVisible)
+        ) {
+          restartCloseTimer()
+        }
+      },
+      { flush: 'post' },
+    )
+    return () => {
+      const { prefixCls, closable, closeIcon = slots.closeIcon?.(), onClick, holder } = props
+      const { class: className, style } = attrs
+      const componentClass = `${prefixCls}-notice`
+      const dataOrAriaAttributeProps = Object.keys(attrs).reduce(
+        (acc: Record<string, string>, key: string) => {
+          if (key.startsWith('data-') || key.startsWith('aria-') || key === 'role') {
+            acc[key] = (attrs as any)[key]
+          }
+          return acc
+        },
+        {},
+      )
+      const node = (
+        <div
+          class={classNames(componentClass, className, {
+            [`${componentClass}-closable`]: closable,
+          })}
+          style={style as CSSProperties}
+          onMouseenter={clearCloseTimer}
+          onMouseleave={startCloseTimer}
+          onClick={onClick}
+          {...dataOrAriaAttributeProps}
+        >
+          <div class={`${componentClass}-content`}>{slots.default?.()}</div>
+          {closable ? (
+            <a tabindex={0} onClick={close} class={`${componentClass}-close`}>
+              {closeIcon || <span class={`${componentClass}-close-x`} />}
+            </a>
+          ) : null}
+        </div>
+      )
+
+      if (holder) {
+        return <Teleport to={holder} v-slots={{ default: () => node }}></Teleport>
+      }
+
+      return node
+    }
+  },
+})