80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import React, {
|
|
createContext, memo, useState,
|
|
} from '../../lib/teact/teact';
|
|
|
|
import useContext from '../../hooks/data/useContext';
|
|
|
|
const TestingContext = createContext('default value');
|
|
|
|
const ContextConsumer = ({ children, debugKey }: { children?: any; debugKey?: string }) => {
|
|
const value = useContext(TestingContext);
|
|
if (debugKey) {
|
|
// eslint-disable-next-line no-console
|
|
console.log(`ContextConsumer ${debugKey}`, value);
|
|
}
|
|
return (
|
|
<div style="color: red">
|
|
{`Current context value: ${value}`}
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const MemoizedWrapper = memo(({ children } : { children: any }) => {
|
|
return <div style="background-color: aquamarine">{children}</div>;
|
|
});
|
|
|
|
const ContextSwapper = ({ value, children } : { value: string; children: any }) => {
|
|
return (
|
|
<div style="border: 1px solid red">
|
|
Swapped {value}
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const TestContext = () => {
|
|
const [value, setValue] = useState(Math.random().toString());
|
|
const [isSwapping, setIsSwapping] = useState(false);
|
|
|
|
const Wrapper = isSwapping ? ContextSwapper : TestingContext.Provider;
|
|
return (
|
|
<div>
|
|
<button onClick={() => setValue(Math.random().toString())}>Change context value</button>
|
|
<button onClick={() => setIsSwapping((prev) => !prev)}>Swap context wrapper</button>
|
|
<ContextConsumer />
|
|
<Wrapper value={value}>
|
|
<div>
|
|
<ContextConsumer debugKey="A">
|
|
<ContextConsumer debugKey="B">
|
|
<ContextConsumer debugKey="C" />
|
|
</ContextConsumer>
|
|
</ContextConsumer>
|
|
</div>
|
|
<TestingContext.Provider value={`sibling ${value}`}>
|
|
<ContextConsumer />
|
|
</TestingContext.Provider>
|
|
<MemoizedWrapper>
|
|
<ContextConsumer />
|
|
</MemoizedWrapper>
|
|
<>
|
|
<ContextConsumer />
|
|
<ContextConsumer />
|
|
</>
|
|
<TestingContext.Provider value={`fastlist ${value}`}>
|
|
<div style="background-color: antiquewhite" teactFastList>
|
|
<ContextConsumer key="first" />
|
|
{!isSwapping && <div key="second">Fast list item</div>}
|
|
<ContextConsumer key="third" />
|
|
</div>
|
|
</TestingContext.Provider>
|
|
<TestingContext.Provider value="overriden value">
|
|
<ContextConsumer />
|
|
</TestingContext.Provider>
|
|
</Wrapper>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TestContext;
|