@dloizides/ ui- feedback (英语)
(原始内容存档于2013-10-12). Themable, Brand-anoistic React Introduction (RN-web) 反馈 组件 dloizides.com 投资组合. 组件读取主题颜色并翻译副本 一个小的可注入提供者,所以每个应用程序都提供自己的主题+i18n 软件包取决于任何应用程序的内部.
构成部分
| 构成部分 | 目的 |
|---|---|
ErrorState | 带有可选重试按钮的普通错误消息 . |
EmptyListState | 带有可选导航呼叫到动作的空收集消息 . |
LoadingFallback | 轻量级自旋器 React.lazy 编号 : Suspense 边框. |
PageSkeleton | 用于满页负载的闪光骨架(列表或卡式变体). |
ConfirmDialog | 具有破坏性+加载状态的 Modal 确认/取消对话框 . |
ToastHost | 倾斜相叠; 与 createToastBus()。 。 。 . |
WarmingOverlay | 上面写着"暖起来" 上面写着. |
AppErrorBoundary | 带有主题的顶级错误边界, 已宣布倒计时 . |
帮助者
| 帮助 | 目的 |
|---|---|
createToastBus() | 框架不可知的土司喷出公共汽车 ToastHost subscribe 端口 . |
安装
npm install @dloizides/ui-feedback
同伴依赖性 : react >= 18, (中文(简体) ), react-native >= 0.74 (使用时 react-native-web ) (中文(简体) ).
设置
挂载 FeedbackUiProvider 一次,高 在你的树, 下级 您的应用程序本身的主题
供养. 适应本地 useTheme() + 向提供者翻译助手 :
import { FeedbackUiProvider } from '@dloizides/ui-feedback';
import { useRouter } from 'expo-router';
import { FM } from './localization/helpers';
import { useTheme } from './theme/hooks/useTheme';
const FeedbackUiAdapter = ({ children }: { children: React.ReactNode }) => {
const { theme } = useTheme();
const router = useRouter();
return (
<FeedbackUiProvider theme={theme} t={FM} navigate={(route) => router.push(route)}>
{children}
</FeedbackUiProvider>
);
};
注射时 theme 仅需 colors.{background,surfaceElevated,text,textSecondary,border}, (中文(简体) ),
palette.primary['500'] 财务报告和审定财务报表 semantic.error['500'] - 任何与这些主题有关的已解决的主题
字段在结构上兼容.
使用量
import { ErrorState, ConfirmDialog, LoadingFallback } from '@dloizides/ui-feedback';
<ErrorState message="Could not load data" onRetry={refetch} />
<LoadingFallback fullScreen />
<ConfirmDialog
visible={open}
title="Delete item?"
message="This cannot be undone."
destructive
onConfirm={onDelete}
onCancel={() => setOpen(false)}
/>
敬酒—— createToastBus()
土司管道是两分之一: createToastBus() 发射, (中文(简体) ), <ToastHost> 调制。 。 。 .
公交车 subscribe 实值 主持人的 subscribe 端口 .
公交车是 框架 -- -- 故意不可知 ——没有反应导入,没有钩子,没有提供者——所以
React Query突变回调可以举起道具,在范围中没有组件上下文. 它携带
无样式( n)ToastHost 主题来自提供者的每个祝词),您通过的案文已经
由您本地化; 巴士从未看到翻译密钥 .
// src/lib/toastBus.ts — one module-level instance per app
import { createToastBus } from '@dloizides/ui-feedback';
export const toastBus = createToastBus();
// once, in the shell:
<ToastHost subscribe={toastBus.subscribe} />
// anywhere — no provider needed:
useMutation({ onSuccess: () => toastBus.success(FM('menu.saved')) });
toastBus.error(FM('menu.saveFailed'));
toastBus.warning(FM('menu.needsReview'));
toastBus.emit(FM('menu.queued'), 'info'); // explicit type; defaults to 'info'
与没有宿主搭载的机体共鸣是无声无息的. 每个订阅者都收到每封邮件
subscribe 返回未订阅者.
错误边界 - <AppErrorBoundary>
把你的应用程序包起来一次 倒计时使 ErrorState,所以它的主题 从提供者,
它会宣布自己role="alert" + 键 accessibilityLiveRegion="assertive") (中文(简体) ).
<AppErrorBoundary
labels={{ title: FM('errorBoundary.title'), message: FM('errorBoundary.message') }}
showDetails={__DEV__}
onError={(error, info) => captureException(error, { extra: { componentStack: info.componentStack } })}
recover={(error) => isChunkLoadError(error) && attemptChunkRecovery()}
onReload={reloadPage}
>
<App />
</AppErrorBoundary>
| Prop | 目的 |
|---|---|
onError(error, info) | 报告汇 (哨兵/伐木工)。 请求 每个 错误 : recover。 。 。 . |
recover(error) | 返回时 true 如果被处理(例如,正在重新加载) − 显示 updating 屏幕,而不是错误屏幕. |
showDetails | 在倒计时中渲染错误消息( dev- only) 。 默认 false。 。 。 . |
labels | 部分, 地点化 ErrorBoundaryLabels; 省略的任何东西都使用英语默认值 DEFAULT_ERROR_BOUNDARY_LABELS。 。 。 . |
testIDPrefix | 每个测试ID的前缀 。 默认 error-boundary。 。 。 . |
fallback(state) | 逃出舱门——完全取代了内置后退. 接收 { error, recovering, retry }。 。 。 . |
onReload | 可选中学 重新装入 行动。 工具从不碰 window重装. |
该套件导入了没有i18n的运行时间——在呼叫站点本地化并传递字符串.
i18n 键
部件叫注射器 t(key) 带有这些密钥( 在每个应用程序中提供这些密钥)
语言文件 : common.retry, (中文(简体) ), common.retryHint, (中文(简体) ), common.confirm, (中文(简体) ), common.cancel, (中文(简体) ),
common.confirmHint, (中文(简体) ), common.cancelHint, (中文(简体) ), loadingFallback.label, (中文(简体) ), loadingFallback.hint, (中文(简体) ),
pageSkeleton.loadingLabel, (中文(简体) ), pageSkeleton.loadingHint。 。 。 . EmptyListState 把钥匙当作道具.
测试ID
默认测试ID( E)FEEDBACK_TEST_IDS匹配已经使用的消费应用程序的字符串,
因此,现有的 Playwright 选择器继续工作 : error-state, (中文(简体) ), error-state-retry, (中文(简体) ),
empty-list-cta, (中文(简体) ), loading-fallback, (中文(简体) ), page-skeleton, (中文(简体) ), confirm-dialog, (中文(简体) ), confirm-button, (中文(简体) ),
cancel-confirm-button, (中文(简体) ), notification-toast, (中文(简体) ), warming-overlay, (中文(简体) ), error-boundary。 。 。 .
AppErrorBoundary 其编号来源于 testIDPrefix (默认) error-boundary),保留
选择所用的应用程序本地副本 : error-boundary, (中文(简体) ), error-boundary-message, (中文(简体) ),
error-boundary-details, (中文(简体) ), error-boundary-retry-button, (中文(简体) ), error-boundary-reload-button, (中文(简体) ),
error-boundary-updating。 。 。 .
许可证
麻省理工学院