type ButtonType = 'button' | 'a';
interface ButtonTypeProps extends Record<ButtonType, object> {
button: {};
a: { href: string };
}
type CommonProps = {
children: React.ReactNode;
variant?: 'plain' | 'tonal' | 'filled' | 'outlined';
justify?: 'start' | 'center' | 'end';
};
type Props<T extends ButtonType> = ButtonTypeProps[T] & CommonProps & ComponentPropsWithoutRef<T>;
type ButtonComponent<T extends ButtonType = ButtonType> = UnionToIntersection<
T extends T ? ForwardRefExoticComponent<Props<T> & RefAttributes<ComponentRef<T>>> : never
>;
const isLinkProps = (props: Props<ButtonType>): props is Props<'a'> => 'href' in props;
const Button = forwardRef(
<T extends ButtonType = ButtonType>(props: Props<T>, ref: ForwardedRef<ComponentRef<T>>) => {
if (isLinkProps(props)) {
return (
<a ref={ref as ForwardedRef<ComponentRef<'a'>>} href={props.href} className="button">
{props.children}
</a>
);
}
return (
<button ref={ref as ForwardedRef<ComponentRef<'button'>>} type="button" className="button">
{props.children}
</button>
);
},
) as ButtonComponent;
Button.displayName = 'Button';await waitFor(() => screen.getByText('Projects'), {
timeout: 3000
})type QQQ = {
a?: never;
b: string;
c: string;
};
type WWW = {
a: string;
b: string;
d: string;
};
type ForwardedRefWithOverride<T extends [object, HTMLElement]> = UnionToIntersection<
T extends T ? ForwardRefExoticComponent<PropsWithoutRef<T[0]> & RefAttributes<T[1]>> : never
>;
const forwardRefWithOverrides = <T extends [object, HTMLElement][]>(
render: ForwardRefRenderFunction<T[number][1], T[number][0]>,
) => {
return forwardRef(render) as ForwardedRefWithOverride<T[number]>;
};
export const Ccc = forwardRefWithOverrides<[[QQQ, HTMLButtonElement], [WWW, HTMLLinkElement]]>((props, ref) => {
if (typeof props.a === 'string') {
const { a, b, d } = props;
return (
<>
<link ref={ref as ForwardedRef<HTMLLinkElement>} />
{a}
{b}
{d}
</>
);
}
{
const { a, b, c } = props;
return (
<button ref={ref as ForwardedRef<HTMLButtonElement>} type="button">
{a}
{b}
{c}
</button>
);
}
});
Ccc.displayName = 'Ccc';
export const Vvv = () => {
const ref1 = useRef<HTMLButtonElement>(null);
const ref2 = useRef<HTMLLinkElement>(null);
return (
<>
<Ccc ref={ref1} b="asd" c="asd" />
<Ccc ref={ref2} a="asd" b="asd" d="asd" />
{/* @ts-expect-error - c missed */}
<Ccc b="asd" d="asd" />
{/* @ts-expect-error - d missed, extra c */}
<Ccc a="asd" b="asd" c="asd" />
{/* @ts-expect-error - extra c */}
<Ccc a="asd" b="asd" c="asd" d="asd" />
{/* @ts-expect-error - wrong ref */}
<Ccc ref={ref2} b="asd" c="asd" />
</>
);
};__tests__ на том же уровне, что и тестируемый файл. Локальные моки там же, глобальные для пекеджей согласно документации библиотеки для тестирования, а свои глобальные уже смотреть надо, в фсд можно в шейрд запихнуть.
const renderEmployees = () => {
const alphEmployees = [...employees]
.sort((a, b) => a.firstName > b.firstName ? 1 : -1)
.reduce((acc, emp) => {
const { firstName: [firstLetter] } = emp;
acc[firstLetter] ??= [];
acc[firstLetter].push(emp);
return acc;
}, {});
let arr_EN = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
return (
<div className='empoloyees__alf'>
{arr_EN.map(item => <div className='empoloyees__alf-item'>{item} {helper(alphEmployees[item] ?? [])}</div>)}
</div>
)
}console.log(file);, а console.log(file.fileList[0]);.normalize={(file) => file.fileList[0]} в Форм.Итем.
const { data: { localId, idToken, expiresIn } } = await axios.post(
`https://identitytoolkit.googleapis.com/v1/accounts:${isLogin ? 'signInWithPassword' : 'signUp'}?key=${API_KEY}`,
payload
)const getAverageScores = () => {
const initialValues = {avg: 0, n: 0};
return data.reduce(function (initialValues, data) {
const avg = (data.value + initialValues.n * initialValues.avg) / (initialValues.n + 1)
const n = initialValues.n + 1
return {
avg,
n
}
}, initialValues).avg;
}return data.reduce((acc, { value }) => acc + value, 0) / data.length;const all = [{id:0}, {id:1}, {id:2}];
const local = [{movieId:1}];
const result = all.map((am) => {
const lm = local.find((m) => m.movieId === am.id)
return lm ?? am;
});а можешь, пожалуйста, уточнить насчет возвращаемого значения return lm ?? am;
<div>
<Header/>
{posts.map((post) =>
<Task post={post} key={post.id} />
) }
> <Task/>
</div>