Skip to content

Commit

Permalink
fix(ui): use dPrefix instead of d-
Browse files Browse the repository at this point in the history
  • Loading branch information
xiejay97 committed Nov 18, 2021
1 parent e2995f9 commit 76ba32e
Show file tree
Hide file tree
Showing 6 changed files with 38 additions and 23 deletions.
6 changes: 3 additions & 3 deletions packages/ui/src/components/_popup/Popup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,18 +96,18 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
const targetEl = useElement(dTarget);
const handleContainer = useCallback(() => {
if (isUndefined(dContainer)) {
let el = document.getElementById('d-popup-root');
let el = document.getElementById(`${dPrefix}popup-root`);
if (!el) {
el = document.createElement('div');
el.id = 'd-popup-root';
el.id = `${dPrefix}popup-root`;
document.body.appendChild(el);
}
return el;
} else if (dContainer === false) {
return targetEl.current?.parentElement ?? null;
}
return null;
}, [dContainer, targetEl]);
}, [dContainer, dPrefix, targetEl]);
const containerEl = useElement(dContainer, handleContainer);
//#endregion

Expand Down
6 changes: 3 additions & 3 deletions packages/ui/src/components/drawer/Drawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,18 +77,18 @@ export const DDrawer = React.forwardRef<DDrawerRef, DDrawerProps>((props, ref) =
//#region Element
const handleContainer = useCallback(() => {
if (isUndefined(dContainer)) {
let el = document.getElementById('d-drawer-root');
let el = document.getElementById(`${dPrefix}drawer-root`);
if (!el) {
el = document.createElement('div');
el.id = 'd-drawer-root';
el.id = `${dPrefix}drawer-root`;
document.body.appendChild(el);
}
return el;
} else if (dContainer === false) {
return drawerEl?.parentElement ?? null;
}
return null;
}, [dContainer, drawerEl]);
}, [dContainer, dPrefix, drawerEl?.parentElement]);
const containerEl = useElement(dContainer, handleContainer);
//#endregion

Expand Down
8 changes: 4 additions & 4 deletions packages/ui/src/components/tooltip/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ export const DTooltip = React.forwardRef<DPopupRef, DTooltipProps>((props, ref)
const _child = React.Children.only(children) as React.ReactElement;
return React.cloneElement(_child, {
..._child.props,
'aria-describedby': `d-tooltip-${id}`,
'aria-describedby': `${dPrefix}tooltip-${id}`,
});
}, [children, id]);
}, [children, dPrefix, id]);
//#endregion

return (
Expand All @@ -55,10 +55,10 @@ export const DTooltip = React.forwardRef<DPopupRef, DTooltipProps>((props, ref)
<DPopup
{...restProps}
ref={ref}
id={`d-tooltip-${id}`}
id={`${dPrefix}tooltip-${id}`}
className={getClassName(className, `${dPrefix}tooltip`)}
role="tooltip"
dTarget={`[aria-describedby="d-tooltip-${id}"]`}
dTarget={`[aria-describedby="${dPrefix}tooltip-${id}"]`}
>
{dTitle}
</DPopup>
Expand Down
17 changes: 9 additions & 8 deletions packages/ui/src/components/virtual-scroll/VirtualScroll.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { isUndefined } from 'lodash';
import React, { useCallback, useEffect, useMemo } from 'react';
import { useImmer } from 'use-immer';

import { useDComponentConfig, useElement, useId, useThrottle, useAsync } from '../../hooks';
import { useDComponentConfig, useElement, useId, useThrottle, useAsync, useDPrefixConfig } from '../../hooks';

export interface DVirtualScrollProps<T> {
dTag?: string;
Expand Down Expand Up @@ -33,6 +33,7 @@ export function DVirtualScroll<T>(props: DVirtualScrollProps<T>) {
...restProps
} = useDComponentConfig('virtual-scroll', props);

const dPrefix = useDPrefixConfig();
const { throttleByAnimationFrame } = useThrottle();
const asyncCapture = useAsync();

Expand All @@ -55,8 +56,8 @@ export function DVirtualScroll<T>(props: DVirtualScrollProps<T>) {
//#endregion

//#region Element
const el = useElement(`[data-d-virtual-scroll-${id}]`);
const referenceEl = useElement(`[data-d-virtual-scroll-reference-${id}]`);
const el = useElement(`[data-${dPrefix}virtual-scroll-${id}]`);
const referenceEl = useElement(`[data-${dPrefix}virtual-scroll-reference-${id}]`);
//#endregion

//#region Getters.
Expand Down Expand Up @@ -161,10 +162,10 @@ export function DVirtualScroll<T>(props: DVirtualScrollProps<T>) {
}, 20);
return React.cloneElement(_reference, {
..._reference.props,
[`data-d-virtual-scroll-reference-${id}`]: 'true',
[`data-${dPrefix}virtual-scroll-reference-${id}`]: 'true',
});
}
}, [asyncCapture, dCustomSize, dList, dRenderItem, id, referenceEl, throttleByAnimationFrame, updateList]);
}, [asyncCapture, dCustomSize, dList, dPrefix, dRenderItem, id, referenceEl, throttleByAnimationFrame, updateList]);

const handleScroll = useCallback(
(e) => {
Expand Down Expand Up @@ -202,21 +203,21 @@ export function DVirtualScroll<T>(props: DVirtualScrollProps<T>) {
overflowX: isUndefined(dWidth) ? undefined : 'auto',
overflowY: isUndefined(dHeight) ? undefined : 'auto',
},
[`data-d-virtual-scroll-${id}`]: 'true',
[`data-${dPrefix}virtual-scroll-${id}`]: 'true',
onScroll: handleScroll,
},
[
reference,
<div
key={`d-virtual-scroll-pre-fill-${id}`}
key={`${dPrefix}virtual-scroll-pre-fill-${id}`}
style={{
...fillSize[0],
display: isUndefined(dWidth) ? undefined : 'inline-block',
}}
></div>,
...list,
<div
key={`d-virtual-scroll-sub-fill-${id}`}
key={`${dPrefix}virtual-scroll-sub-fill-${id}`}
style={{
...fillSize[1],
display: isUndefined(dWidth) ? undefined : 'inline-block',
Expand Down
3 changes: 3 additions & 0 deletions packages/ui/src/hooks/async.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,9 @@ class AsyncCapture extends BaseAsyncCapture {
for (const cb of this.tids.values()) {
cb();
}
this.onDestroy$.next();
this.onDestroy$.complete();

for (const group of this.groups.values()) {
group.clearAll();
}
Expand Down
21 changes: 16 additions & 5 deletions packages/ui/src/hooks/id.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,28 @@
import { isUndefined } from 'lodash';
import { useEffect } from 'react';
import { useImmer } from 'use-immer';

let id = 0;
export function getID() {
return (id += 1);
}

export function useId() {
export function useId(): number;
export function useId(size: number): number[];
export function useId(size?: number): number[] | number {
const [id, setId] = useImmer(0);
const [ids, setIds] = useImmer(Array(size).fill(0));

useEffect(() => {
setId(getID());
}, [setId]);
if (isUndefined(size)) {
setId(getID());
} else {
const arr: number[] = [];
for (let n = 0; n < size; n++) {
arr.push(getID());
}
setIds(arr);
}
}, [setId, setIds, size]);

return id;
return isUndefined(size) ? id : ids;
}

0 comments on commit 76ba32e

Please sign in to comment.