Skip to content

Commit

Permalink
feat(ui): add back-top component
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiejay97
xiejay97 committed Aug 1, 2022
1 parent 1dbb55b commit 8c71508
Show file tree
Hide file tree
Showing 37 changed files with 572 additions and 236 deletions.
2 changes: 1 addition & 1 deletion packages/site/src/app/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export function App() {
const rootContext = useMemo<DConfigContextData>(
() => ({
i18n: { lang: i18n.language as DLang },
updatePosition: { scroll: ['main.app-main'], resize: ['article.app-route-article'] },
layout: { scrollEl: 'main.app-main', resizeEl: 'article.app-route-article' },
}),
[i18n.language]
);
Expand Down
36 changes: 13 additions & 23 deletions packages/site/src/app/components/layout/sidebar/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,29 +43,19 @@ export function AppSidebar(props: { aMenuOpen: boolean; onMenuOpenChange: (open:
id: group.title,
title: t(`menu-group.${group.title}`),
type: 'group',
children:
group.title === 'Other'
? [
{
id: 'Interface',
title: (
<Link to="/components/Interface">
Interface{i18n.language !== 'en-US' && <span className="app-sidebar__subtitle">{t(`Documentation.Interface`)}</span>}
</Link>
),
type: 'item',
},
]
: group.children.map((child) => ({
id: child.title,
title: (
<Link to={child.to}>
{child.title}
{i18n.language !== 'en-US' && <span className="app-sidebar__subtitle">{t(`menu.${child.title}`)}</span>}
</Link>
),
type: 'item',
})),
children: (group.title === 'Other'
? group.children.concat([{ title: 'Interface', to: '/components/Interface' }])
: group.children
).map((child) => ({
id: child.title,
title: (
<Link to={child.to}>
{child.title}
{i18n.language !== 'en-US' && <span className="app-sidebar__subtitle">{t(`menu.${child.title}`)}</span>}
</Link>
),
type: 'item',
})),
}))}
dActive={activeId}
onActiveChange={(id) => {
Expand Down
46 changes: 34 additions & 12 deletions packages/ui/src/components/_date-input/DateInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,7 @@ import type { DFormControl } from '../form';
import React, { useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
import ReactDOM from 'react-dom';

import {
usePrefixConfig,
useTranslation,
useAsync,
useForkRef,
useEventCallback,
useMaxIndex,
useElement,
useUpdatePosition,
} from '../../hooks';
import { usePrefixConfig, useTranslation, useAsync, useForkRef, useEventCallback, useMaxIndex, useElement, useLayout } from '../../hooks';
import { CloseCircleFilled, SwapRightOutlined } from '../../icons';
import { checkNodeExist, getClassName, getNoTransformSize, getVerticalSidePosition } from '../../utils';
import { TTANSITION_DURING_POPUP } from '../../utils/global';
Expand Down Expand Up @@ -75,6 +66,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef

//#region Context
const dPrefix = usePrefixConfig();
const { dScrollEl, dResizeEl } = useLayout();
//#endregion

//#region Ref
Expand Down Expand Up @@ -115,6 +107,8 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef

const clearable = dClearable && !dVisible && !dDisabled;

const scrollEl = useElement(dScrollEl);
const resizeEl = useElement(dResizeEl);
const containerEl = useElement(() => {
let el = document.getElementById(`${prefix}-root`);
if (!el) {
Expand Down Expand Up @@ -145,8 +139,6 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
}
});

useUpdatePosition(updatePosition, dVisible);

useEffect(() => {
if (dVisible) {
const [asyncGroup, asyncId] = asyncCapture.createGroup();
Expand All @@ -169,6 +161,36 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
}
}, [asyncCapture, dVisible, uniqueId, updatePosition]);

useEffect(() => {
if (dVisible && scrollEl) {
const [asyncGroup, asyncId] = asyncCapture.createGroup();

asyncGroup.fromEvent(scrollEl, 'scroll', { passive: true }).subscribe({
next: () => {
updatePosition();
},
});

return () => {
asyncCapture.deleteGroup(asyncId);
};
}
}, [asyncCapture, dVisible, scrollEl, updatePosition]);

useEffect(() => {
if (dVisible && resizeEl) {
const [asyncGroup, asyncId] = asyncCapture.createGroup();

asyncGroup.onResize(resizeEl, () => {
updatePosition();
});

return () => {
asyncCapture.deleteGroup(asyncId);
};
}
}, [asyncCapture, dVisible, resizeEl, updatePosition]);

const preventBlur: React.MouseEventHandler = (e) => {
if (e.target !== inputRefLeft.current && e.target !== inputRefRight.current && e.button === 0) {
e.preventDefault();
Expand Down
75 changes: 51 additions & 24 deletions packages/ui/src/components/_popup/Popup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useEffect, useId, useRef } from 'react';
import ReactDOM from 'react-dom';
import { filter } from 'rxjs';

import { useAsync, useElement, useEventCallback, usePrefixConfig, useUpdatePosition } from '../../hooks';
import { useAsync, useElement, useEventCallback, useLayout, usePrefixConfig } from '../../hooks';

export interface DPopupPopupRenderProps {
'data-popup-popupid': string;
Expand Down Expand Up @@ -50,6 +50,7 @@ export function DPopup(props: DPopupProps): JSX.Element | null {

//#region Context
const dPrefix = usePrefixConfig();
const { dScrollEl, dResizeEl } = useLayout();
//#endregion

const dataRef = useRef<{
Expand All @@ -60,19 +61,21 @@ export function DPopup(props: DPopupProps): JSX.Element | null {

const uniqueId = useId();

const containerEl = useElement(
isUndefined(dContainer)
? () => {
let el = document.getElementById(`${dPrefix}popup-root`);
if (!el) {
el = document.createElement('div');
el.id = `${dPrefix}popup-root`;
document.body.appendChild(el);
}
return el;
}
: dContainer
);
const scrollEl = useElement(dScrollEl);
const resizeEl = useElement(dResizeEl);
const containerEl = useElement(() => {
if (isUndefined(dContainer)) {
let el = document.getElementById(`${dPrefix}popup-root`);
if (!el) {
el = document.createElement('div');
el.id = `${dPrefix}popup-root`;
document.body.appendChild(el);
}
return el;
}

return dContainer;
});

const changeVisible = (visible?: boolean) => {
if (isUndefined(visible)) {
Expand Down Expand Up @@ -127,7 +130,7 @@ export function DPopup(props: DPopupProps): JSX.Element | null {
asyncCapture.deleteGroup(asyncId);
};
}
}, [asyncCapture, handleTrigger, dTrigger, dVisible, dDisabled]);
}, [asyncCapture, dDisabled, dTrigger, dVisible, handleTrigger]);

useEffect(() => {
if (!dDisabled && dVisible && dEscClosable) {
Expand All @@ -146,11 +149,7 @@ export function DPopup(props: DPopupProps): JSX.Element | null {
asyncCapture.deleteGroup(asyncId);
};
}
}, [asyncCapture, handleTrigger, dEscClosable, dVisible, dDisabled]);

useUpdatePosition(() => {
dUpdatePosition?.();
}, !dDisabled && dVisible);
}, [asyncCapture, dDisabled, dEscClosable, dVisible, handleTrigger]);

useEffect(() => {
if (!dDisabled && dVisible) {
Expand All @@ -174,8 +173,7 @@ export function DPopup(props: DPopupProps): JSX.Element | null {
asyncCapture.deleteGroup(asyncId);
};
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [asyncCapture, dVisible, uniqueId, dDisabled]);
}, [asyncCapture, dDisabled, dUpdatePosition, dVisible, uniqueId]);

useEffect(() => {
if (!dDisabled && dVisible && dContainer) {
Expand All @@ -195,8 +193,37 @@ export function DPopup(props: DPopupProps): JSX.Element | null {
asyncCapture.deleteGroup(asyncId);
};
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [asyncCapture, dContainer, dDisabled, dVisible]);
}, [asyncCapture, dContainer, dDisabled, dUpdatePosition, dVisible]);

useEffect(() => {
if (!dDisabled && dVisible && scrollEl) {
const [asyncGroup, asyncId] = asyncCapture.createGroup();

asyncGroup.fromEvent(scrollEl, 'scroll', { passive: true }).subscribe({
next: () => {
dUpdatePosition?.();
},
});

return () => {
asyncCapture.deleteGroup(asyncId);
};
}
}, [asyncCapture, dDisabled, dUpdatePosition, dVisible, scrollEl]);

useEffect(() => {
if (!dDisabled && dVisible && resizeEl) {
const [asyncGroup, asyncId] = asyncCapture.createGroup();

asyncGroup.onResize(resizeEl, () => {
dUpdatePosition?.();
});

return () => {
asyncCapture.deleteGroup(asyncId);
};
}
}, [asyncCapture, dDisabled, dUpdatePosition, dVisible, resizeEl]);

const childProps: DPopupRenderProps = { 'data-popup-triggerid': uniqueId };
if (!dDisabled) {
Expand Down
46 changes: 34 additions & 12 deletions packages/ui/src/components/_selectbox/Selectbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,7 @@ import React, { useImperativeHandle, useRef, useState } from 'react';
import { useEffect } from 'react';
import ReactDOM from 'react-dom';

import {
useAsync,
usePrefixConfig,
useTranslation,
useEventCallback,
useElement,
useMaxIndex,
useUpdatePosition,
useForkRef,
} from '../../hooks';
import { useAsync, usePrefixConfig, useTranslation, useEventCallback, useElement, useMaxIndex, useForkRef, useLayout } from '../../hooks';
import { CloseCircleFilled, DownOutlined, LoadingOutlined, SearchOutlined } from '../../icons';
import { checkNodeExist, getClassName } from '../../utils';
import { TTANSITION_DURING_POPUP } from '../../utils/global';
Expand Down Expand Up @@ -87,6 +78,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef

//#region Context
const dPrefix = usePrefixConfig();
const { dScrollEl, dResizeEl } = useLayout();
//#endregion

//#region Ref
Expand All @@ -107,6 +99,8 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
const inputable = dSearchable && dVisible;
const clearable = dClearable && !dVisible && !dLoading && !dDisabled && dContent;

const scrollEl = useElement(dScrollEl);
const resizeEl = useElement(dResizeEl);
const containerEl = useElement(() => {
let el = document.getElementById(`${prefix}-root`);
if (!el) {
Expand Down Expand Up @@ -134,8 +128,6 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
}
});

useUpdatePosition(updatePosition, dVisible);

useEffect(() => {
if (dVisible) {
const [asyncGroup, asyncId] = asyncCapture.createGroup();
Expand All @@ -158,6 +150,36 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
}
}, [asyncCapture, dVisible, updatePosition]);

useEffect(() => {
if (dVisible && scrollEl) {
const [asyncGroup, asyncId] = asyncCapture.createGroup();

asyncGroup.fromEvent(scrollEl, 'scroll', { passive: true }).subscribe({
next: () => {
updatePosition();
},
});

return () => {
asyncCapture.deleteGroup(asyncId);
};
}
}, [asyncCapture, dVisible, scrollEl, updatePosition]);

useEffect(() => {
if (dVisible && resizeEl) {
const [asyncGroup, asyncId] = asyncCapture.createGroup();

asyncGroup.onResize(resizeEl, () => {
updatePosition();
});

return () => {
asyncCapture.deleteGroup(asyncId);
};
}
}, [asyncCapture, dVisible, resizeEl, updatePosition]);

const preventBlur: React.MouseEventHandler = (e) => {
if (e.target !== inputRef.current && e.button === 0) {
e.preventDefault();
Expand Down
Loading

0 comments on commit 8c71508

Please sign in to comment.