@antsoo-lib/components 0.1.2 → 0.1.4

package/src/transfer/style/index.tsx

@@ -0,0 +1,376 @@
+import type { CSSObject } from '../../_util/cssinjs'
+import { resetComponent, resetIcon, textEllipsis } from '../../style'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook, mergeToken } from '../../theme/internal'
+
+export interface ComponentToken {
+  listWidth: number
+  listWidthLG: number
+  listHeight: number
+}
+
+interface TransferToken extends FullToken<'Transfer'> {
+  transferItemHeight: number
+  transferHeaderVerticalPadding: number
+  transferItemPaddingVertical: number
+  transferHeaderHeight: number
+}
+
+const genTransferCustomizeStyle: GenerateStyle<TransferToken> = (
+  token: TransferToken,
+): CSSObject => {
+  const { antCls, componentCls, listHeight, controlHeightLG, marginXXS, margin } = token
+
+  const tableCls = `${antCls}-table`
+  const inputCls = `${antCls}-input`
+
+  return {
+    [`${componentCls}-customize-list`]: {
+      [`${componentCls}-list`]: {
+        flex: '1 1 50%',
+        width: 'auto',
+        height: 'auto',
+        minHeight: listHeight,
+      },
+
+      // =================== Hook Components ===================
+      [`${tableCls}-wrapper`]: {
+        [`${tableCls}-small`]: {
+          border: 0,
+          borderRadius: 0,
+
+          [`${tableCls}-selection-column`]: {
+            width: controlHeightLG,
+            minWidth: controlHeightLG,
+          },
+        },
+
+        [`${tableCls}-pagination${tableCls}-pagination`]: {
+          margin: `${margin}px 0 ${marginXXS}px`,
+        },
+      },
+
+      [`${inputCls}[disabled]`]: {
+        backgroundColor: 'transparent',
+      },
+    },
+  }
+}
+
+const genTransferStatusColor = (token: TransferToken, color: string): CSSObject => {
+  const { componentCls, colorBorder } = token
+  return {
+    [`${componentCls}-list`]: {
+      borderColor: color,
+
+      '&-search:not([disabled])': {
+        borderColor: colorBorder,
+      },
+    },
+  }
+}
+
+const genTransferStatusStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
+  const { componentCls } = token
+  return {
+    [`${componentCls}-status-error`]: {
+      ...genTransferStatusColor(token, token.colorError),
+    },
+    [`${componentCls}-status-warning`]: {
+      ...genTransferStatusColor(token, token.colorWarning),
+    },
+  }
+}
+
+const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
+  const {
+    componentCls,
+    colorBorder,
+    colorSplit,
+    lineWidth,
+    transferItemHeight,
+    transferHeaderHeight,
+    transferHeaderVerticalPadding,
+    transferItemPaddingVertical,
+    controlItemBgActive,
+    controlItemBgActiveHover,
+    colorTextDisabled,
+    listHeight,
+    listWidth,
+    listWidthLG,
+    fontSizeIcon,
+    marginXS,
+    paddingSM,
+    lineType,
+    iconCls,
+    motionDurationSlow,
+  } = token
+
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    width: listWidth,
+    height: listHeight,
+    border: `${lineWidth}px ${lineType} ${colorBorder}`,
+    borderRadius: token.borderRadiusLG,
+
+    '&-with-pagination': {
+      width: listWidthLG,
+      height: 'auto',
+    },
+
+    '&-search': {
+      [`${iconCls}-search`]: {
+        color: colorTextDisabled,
+      },
+    },
+
+    '&-header': {
+      display: 'flex',
+      flex: 'none',
+      alignItems: 'center',
+      height: transferHeaderHeight,
+      // border-top is on the transfer dom. We should minus 1px for this
+      padding: `${
+        transferHeaderVerticalPadding - lineWidth
+      }px ${paddingSM}px ${transferHeaderVerticalPadding}px`,
+      color: token.colorText,
+      background: token.colorBgContainer,
+      borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
+      borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
+
+      '> *:not(:last-child)': {
+        marginInlineEnd: 4, // This is magic and fixed number, DO NOT use token since it may change.
+      },
+
+      '> *': {
+        flex: 'none',
+      },
+
+      '&-title': {
+        ...textEllipsis,
+        flex: 'auto',
+        textAlign: 'end',
+      },
+
+      '&-dropdown': {
+        ...resetIcon(),
+
+        fontSize: fontSizeIcon,
+        transform: 'translateY(10%)',
+        cursor: 'pointer',
+
+        '&[disabled]': {
+          cursor: 'not-allowed',
+        },
+      },
+    },
+
+    '&-body': {
+      display: 'flex',
+      flex: 'auto',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      fontSize: token.fontSize,
+
+      '&-search-wrapper': {
+        position: 'relative',
+        flex: 'none',
+        padding: paddingSM,
+      },
+    },
+
+    '&-content': {
+      flex: 'auto',
+      margin: 0,
+      padding: 0,
+      overflow: 'auto',
+      listStyle: 'none',
+
+      '&-item': {
+        display: 'flex',
+        alignItems: 'center',
+        minHeight: transferItemHeight,
+        padding: `${transferItemPaddingVertical}px ${paddingSM}px`,
+        transition: `all ${motionDurationSlow}`,
+
+        '> *:not(:last-child)': {
+          marginInlineEnd: marginXS,
+        },
+
+        '> *': {
+          flex: 'none',
+        },
+
+        '&-text': {
+          ...textEllipsis,
+          flex: 'auto',
+        },
+
+        '&-remove': {
+          position: 'relative',
+          color: colorBorder,
+
+          cursor: 'pointer',
+          transition: `all ${motionDurationSlow}`,
+
+          '&:hover': {
+            color: token.colorLinkHover,
+          },
+
+          '&::after': {
+            position: 'absolute',
+            insert: `-${transferItemPaddingVertical}px -50%`,
+            content: '""',
+          },
+        },
+
+        [`&:not(${componentCls}-list-content-item-disabled)`]: {
+          '&:hover': {
+            backgroundColor: token.controlItemBgHover,
+            cursor: 'pointer',
+          },
+
+          [`&${componentCls}-list-content-item-checked:hover`]: {
+            backgroundColor: controlItemBgActiveHover,
+          },
+        },
+
+        '&-checked': {
+          backgroundColor: controlItemBgActive,
+        },
+
+        '&-disabled': {
+          color: colorTextDisabled,
+          cursor: 'not-allowed',
+        },
+      },
+
+      // Do not change hover style when `oneWay` mode
+      [`&-show-remove ${componentCls}-list-content-item:not(${componentCls}-list-content-item-disabled):hover`]:
+        {
+          background: 'transparent',
+          cursor: 'default',
+        },
+    },
+
+    '&-pagination': {
+      padding: `${token.paddingXS}px 0`,
+      textAlign: 'end',
+      borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
+    },
+
+    '&-body-not-found': {
+      flex: 'none',
+      width: '100%',
+      margin: 'auto 0',
+      color: colorTextDisabled,
+      textAlign: 'center',
+    },
+
+    '&-footer': {
+      borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
+    },
+
+    '&-checkbox': {
+      lineHeight: 1,
+    },
+  }
+}
+
+const genTransferStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
+  const {
+    antCls,
+    iconCls,
+    componentCls,
+    transferHeaderHeight,
+    marginXS,
+    marginXXS,
+    fontSizeIcon,
+    fontSize,
+    lineHeight,
+  } = token
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'stretch',
+
+      [`${componentCls}-disabled`]: {
+        [`${componentCls}-list`]: {
+          background: token.colorBgContainerDisabled,
+        },
+      },
+
+      [`${componentCls}-list`]: genTransferListStyle(token),
+
+      [`${componentCls}-operation`]: {
+        display: 'flex',
+        flex: 'none',
+        flexDirection: 'column',
+        alignSelf: 'center',
+        margin: `0 ${marginXS}px`,
+        verticalAlign: 'middle',
+
+        [`${antCls}-btn`]: {
+          display: 'block',
+
+          '&:first-child': {
+            marginBottom: marginXXS,
+          },
+
+          [iconCls]: {
+            fontSize: fontSizeIcon,
+          },
+        },
+      },
+
+      [`${antCls}-empty-image`]: {
+        maxHeight: transferHeaderHeight / 2 - Math.round(fontSize * lineHeight),
+      },
+    },
+  }
+}
+
+const genTransferRTLStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
+  const { componentCls } = token
+  return {
+    [`${componentCls}-rtl`]: {
+      direction: 'rtl',
+    },
+  }
+}
+
+// ============================== Export ==============================
+export default genComponentStyleHook(
+  'Transfer',
+  (token) => {
+    const { fontSize, lineHeight, lineWidth, controlHeightLG, controlHeight } = token
+
+    const fontHeight = Math.round(fontSize * lineHeight)
+    const transferHeaderHeight = controlHeightLG
+    const transferItemHeight = controlHeight
+
+    const transferToken = mergeToken<TransferToken>(token, {
+      transferItemHeight,
+      transferHeaderHeight,
+      transferHeaderVerticalPadding: Math.ceil((transferHeaderHeight - lineWidth - fontHeight) / 2),
+      transferItemPaddingVertical: (transferItemHeight - fontHeight) / 2,
+    })
+
+    return [
+      genTransferStyle(transferToken),
+      genTransferCustomizeStyle(transferToken),
+      genTransferStatusStyle(transferToken),
+      genTransferRTLStyle(transferToken),
+    ]
+  },
+  {
+    listWidth: 180,
+    listHeight: 200,
+    listWidthLG: 250,
+  },
+)

package/src/tree/DirectoryTree.tsx

@@ -0,0 +1,309 @@
+import FileOutlined from '@ant-design/icons-vue/FileOutlined'
+import FolderOpenOutlined from '@ant-design/icons-vue/FolderOpenOutlined'
+import FolderOutlined from '@ant-design/icons-vue/FolderOutlined'
+import debounce from 'lodash-es/debounce'
+
+import type { ExtractPropTypes } from 'vue'
+import { computed, defineComponent, nextTick, onUpdated, ref, watch } from 'vue'
+
+import classNames from '../_util/classNames'
+import { filterEmpty } from '../_util/props-util'
+import initDefaultProps from '../_util/props-util/initDefaultProps'
+import { someType } from '../_util/type'
+import type { CustomSlotsType } from '../_util/type'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import type { DataNode, EventDataNode, Key, ScrollTo } from '../vc-tree/interface'
+import { conductExpandParent } from '../vc-tree/util'
+import { convertDataToEntities, convertTreeToData, fillFieldNames } from '../vc-tree/utils/treeUtil'
+import type { AntdTreeNodeAttribute, TreeProps } from './Tree'
+import Tree, { treeProps } from './Tree'
+import { calcRangeKeys, convertDirectoryKeysToNodes } from './utils/dictUtil'
+
+export type ExpandAction = false | 'click' | 'doubleclick' | 'dblclick'
+
+export const directoryTreeProps = () => ({
+  ...treeProps(),
+  expandAction: someType<ExpandAction>([Boolean, String]),
+})
+
+export type DirectoryTreeProps = Partial<ExtractPropTypes<ReturnType<typeof directoryTreeProps>>>
+
+function getIcon(props: AntdTreeNodeAttribute) {
+  const { isLeaf, expanded } = props
+  if (isLeaf) {
+    return <FileOutlined />
+  }
+  return expanded ? <FolderOpenOutlined /> : <FolderOutlined />
+}
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ADirectoryTree',
+  inheritAttrs: false,
+  props: initDefaultProps(directoryTreeProps(), {
+    showIcon: true,
+    expandAction: 'click',
+  }),
+  slots: Object as CustomSlotsType<{
+    icon?: any
+    title?: any
+    switcherIcon?: any
+    titleRender?: any
+    default?: any
+  }>,
+
+  // emits: [
+  //   'update:selectedKeys',
+  //   'update:checkedKeys',
+  //   'update:expandedKeys',
+  //   'expand',
+  //   'select',
+  //   'check',
+  //   'doubleclick',
+  //   'dblclick',
+  //   'click',
+  // ],
+  setup(props, { attrs, slots, emit, expose }) {
+    // convertTreeToData 兼容 a-tree-node 历史写法，未来a-tree-node移除后，删除相关代码，不要再render中调用 treeData，否则死循环
+    const treeData = ref<DataNode[]>(
+      props.treeData || convertTreeToData(filterEmpty(slots.default?.())),
+    )
+
+    watch(
+      () => props.treeData,
+      () => {
+        treeData.value = props.treeData
+      },
+    )
+    onUpdated(() => {
+      nextTick(() => {
+        if (props.treeData === undefined && slots.default) {
+          treeData.value = convertTreeToData(filterEmpty(slots.default?.()))
+        }
+      })
+    })
+    // Shift click usage
+    const lastSelectedKey = ref<Key>()
+
+    const cachedSelectedKeys = ref<Key[]>()
+    const fieldNames = computed(() => fillFieldNames(props.fieldNames))
+    const treeRef = ref()
+    const scrollTo: ScrollTo = (scroll) => {
+      treeRef.value?.scrollTo(scroll)
+    }
+    expose({
+      scrollTo,
+      selectedKeys: computed(() => treeRef.value?.selectedKeys),
+      checkedKeys: computed(() => treeRef.value?.checkedKeys),
+      halfCheckedKeys: computed(() => treeRef.value?.halfCheckedKeys),
+      loadedKeys: computed(() => treeRef.value?.loadedKeys),
+      loadingKeys: computed(() => treeRef.value?.loadingKeys),
+      expandedKeys: computed(() => treeRef.value?.expandedKeys),
+    })
+    const getInitExpandedKeys = () => {
+      const { keyEntities } = convertDataToEntities(treeData.value, {
+        fieldNames: fieldNames.value,
+      })
+
+      let initExpandedKeys: any
+
+      // Expanded keys
+      if (props.defaultExpandAll) {
+        initExpandedKeys = Object.keys(keyEntities)
+      } else if (props.defaultExpandParent) {
+        initExpandedKeys = conductExpandParent(
+          props.expandedKeys || props.defaultExpandedKeys || [],
+          keyEntities,
+        )
+      } else {
+        initExpandedKeys = props.expandedKeys || props.defaultExpandedKeys
+      }
+      return initExpandedKeys
+    }
+
+    const selectedKeys = ref(props.selectedKeys || props.defaultSelectedKeys || [])
+
+    const expandedKeys = ref<Key[]>(getInitExpandedKeys())
+
+    watch(
+      () => props.selectedKeys,
+      () => {
+        if (props.selectedKeys !== undefined) {
+          selectedKeys.value = props.selectedKeys
+        }
+      },
+      { immediate: true },
+    )
+
+    watch(
+      () => props.expandedKeys,
+      () => {
+        if (props.expandedKeys !== undefined) {
+          expandedKeys.value = props.expandedKeys
+        }
+      },
+      { immediate: true },
+    )
+
+    const expandFolderNode = (event: MouseEvent, node: any) => {
+      const { isLeaf } = node
+
+      if (isLeaf || event.shiftKey || event.metaKey || event.ctrlKey) {
+        return
+      }
+      // Call internal rc-tree expand function
+      // https://github.com/ant-design/ant-design/issues/12567
+      treeRef.value!.onNodeExpand(event as any, node)
+    }
+    const onDebounceExpand = debounce(expandFolderNode, 200, {
+      leading: true,
+    })
+    const onExpand = (
+      keys: Key[],
+      info: {
+        node: EventDataNode
+        expanded: boolean
+        nativeEvent: MouseEvent
+      },
+    ) => {
+      if (props.expandedKeys === undefined) {
+        expandedKeys.value = keys
+      }
+      // Call origin function
+      emit('update:expandedKeys', keys)
+      emit('expand', keys, info)
+    }
+
+    const onClick = (event: MouseEvent, node: EventDataNode) => {
+      const { expandAction } = props
+
+      // Expand the tree
+      if (expandAction === 'click') {
+        onDebounceExpand(event, node)
+      }
+      emit('click', event, node)
+    }
+
+    const onDoubleClick = (event: MouseEvent, node: EventDataNode) => {
+      const { expandAction } = props
+      // Expand the tree
+      if (expandAction === 'dblclick' || expandAction === 'doubleclick') {
+        onDebounceExpand(event, node)
+      }
+
+      emit('doubleclick', event, node)
+      emit('dblclick', event, node)
+    }
+    const onSelect = (
+      keys: Key[],
+      event: {
+        event: 'select'
+        selected: boolean
+        node: any
+        selectedNodes: DataNode[]
+        nativeEvent: MouseEvent
+      },
+    ) => {
+      const { multiple } = props
+      const { node, nativeEvent } = event
+      const key = node[fieldNames.value.key]
+      // const newState: DirectoryTreeState = {};
+
+      // We need wrap this event since some value is not same
+      const newEvent: any = {
+        ...event,
+        selected: true, // Directory selected always true
+      }
+
+      // Windows / Mac single pick
+      const ctrlPick: boolean = nativeEvent?.ctrlKey || nativeEvent?.metaKey
+      const shiftPick: boolean = nativeEvent?.shiftKey
+
+      // Generate new selected keys
+      let newSelectedKeys: Key[]
+      if (multiple && ctrlPick) {
+        // Control click
+        newSelectedKeys = keys
+        lastSelectedKey.value = key
+        cachedSelectedKeys.value = newSelectedKeys
+        newEvent.selectedNodes = convertDirectoryKeysToNodes(
+          treeData.value,
+          newSelectedKeys,
+          fieldNames.value,
+        )
+      } else if (multiple && shiftPick) {
+        // Shift click
+        newSelectedKeys = Array.from(
+          new Set([
+            ...(cachedSelectedKeys.value || []),
+            ...calcRangeKeys({
+              treeData: treeData.value,
+              expandedKeys: expandedKeys.value,
+              startKey: key,
+              endKey: lastSelectedKey.value,
+              fieldNames: fieldNames.value,
+            }),
+          ]),
+        )
+        newEvent.selectedNodes = convertDirectoryKeysToNodes(
+          treeData.value,
+          newSelectedKeys,
+          fieldNames.value,
+        )
+      } else {
+        // Single click
+        newSelectedKeys = [key]
+        lastSelectedKey.value = key
+        cachedSelectedKeys.value = newSelectedKeys
+        newEvent.selectedNodes = convertDirectoryKeysToNodes(
+          treeData.value,
+          newSelectedKeys,
+          fieldNames.value,
+        )
+      }
+
+      emit('update:selectedKeys', newSelectedKeys)
+      emit('select', newSelectedKeys, newEvent)
+      if (props.selectedKeys === undefined) {
+        selectedKeys.value = newSelectedKeys
+      }
+    }
+
+    const onCheck: TreeProps['onCheck'] = (checkedObjOrKeys, eventObj) => {
+      emit('update:checkedKeys', checkedObjOrKeys)
+      emit('check', checkedObjOrKeys, eventObj)
+    }
+
+    const { prefixCls, direction } = useConfigInject('tree', props)
+
+    return () => {
+      const connectClassName = classNames(
+        `${prefixCls.value}-directory`,
+        {
+          [`${prefixCls.value}-directory-rtl`]: direction.value === 'rtl',
+        },
+        attrs.class,
+      )
+      const { icon = slots.icon, blockNode = true, ...otherProps } = props
+      return (
+        <Tree
+          {...attrs}
+          icon={icon || getIcon}
+          ref={treeRef}
+          blockNode={blockNode}
+          {...otherProps}
+          prefixCls={prefixCls.value}
+          class={connectClassName}
+          expandedKeys={expandedKeys.value}
+          selectedKeys={selectedKeys.value}
+          onSelect={onSelect}
+          onClick={onClick}
+          onDblclick={onDoubleClick}
+          onExpand={onExpand}
+          onCheck={onCheck}
+          v-slots={slots}
+        />
+      )
+    }
+  },
+})