fix(devui): Fix buggy UI behaviors with redux-devtools-app (#709)

* fix(devui): Always run updateTabs on UNSAFE_componentWillReceiveProps. Otherwise, the changes in property tabs might not be reflected on the UI.

* chore(*): Update devui version. Fix the container growing out of viewport when too many actions.

* fix(devui): Update snapshots

* Update Tabs.tsx

* Update package.json

* Update package.json

Co-authored-by: Nathan Bierema <nbierema@gmail.com>
This commit is contained in:
wang chenyu 2021-06-10 18:19:56 -07:00 committed by GitHub
parent fcd73ab043
commit ed25a72e99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 9 deletions

View File

@ -6,6 +6,8 @@ export const MainContainerWrapper = styled.div`
height: 100%;
width: 100%;
flex-flow: column nowrap;
flex-shrink: 1;
min-height: 0;
background-color: ${(props) => color(props.theme.base00, 'lighten', 0.03)};
color: ${(props) => props.theme.base07};
font-size: 12px;
@ -30,7 +32,8 @@ export const MainContainerWrapper = styled.div`
flex-grow: 1;
display: flex;
flex-flow: column nowrap;
height: 100%;
flex-shrink: 1;
min-height: 0;
> div {
flex-grow: 1;
@ -43,4 +46,6 @@ export const ContainerWrapper = styled.div`
height: 100%;
width: 100%;
flex-flow: column nowrap;
flex-shrink: 1;
min-height: 0;
`;

View File

@ -24,12 +24,6 @@ export default class Tabs<P> extends Component<TabsProps<P>> {
SelectedComponent?: React.ComponentType<P>;
selector?: () => P;
UNSAFE_componentWillReceiveProps(nextProps: TabsProps<P>) {
if (nextProps.selected !== this.props.selected) {
this.updateTabs(nextProps);
}
}
onMouseUp: React.MouseEventHandler<HTMLButtonElement> = (e) => {
e.currentTarget.blur();
};
@ -38,7 +32,7 @@ export default class Tabs<P> extends Component<TabsProps<P>> {
this.props.onClick(e.currentTarget.value);
};
updateTabs(props: TabsProps<P>) {
updateTabs(props: TabsProps<P>): void {
const tabs = props.tabs;
const selected = props.selected;
@ -67,6 +61,8 @@ export default class Tabs<P> extends Component<TabsProps<P>> {
}
render() {
this.updateTabs(nextProps);
const tabsHeader = (
<TabsHeader
tabs={this.tabsHeader!}

View File

@ -2,7 +2,7 @@
exports[`Container renders correctly 1`] = `
<div
class="sc-AxjAm XFnbZ"
class="sc-AxjAm jlQKkV"
>
Text
</div>