lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Improve collapsible components to match linter

Browse source
This commit is contained in:
Arnaud Vergnet 2020-08-03 17:18:50 +02:00
parent 9d92a88627
commit 34ccf9c4c9
4 changed files with 100 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/Collapsible/CollapsibleComponent.js
View file

@ -1,48 +1,56 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {withCollapsible} from "../../utils/withCollapsible"; import {Collapsible} from 'react-navigation-collapsible';
import {Collapsible} from "react-navigation-collapsible"; import {withCollapsible} from '../../utils/withCollapsible';
import CustomTabBar from "../Tabbar/CustomTabBar"; import CustomTabBar from '../Tabbar/CustomTabBar';
export type CollapsibleComponentProps = { export type CollapsibleComponentPropsType = {
children?: React.Node, children?: React.Node,
hasTab?: boolean, hasTab?: boolean,
onScroll?: (event: SyntheticEvent<EventTarget>) => void, onScroll?: (event: SyntheticEvent<EventTarget>) => void,
}; };
type Props = { type PropsType = {
...CollapsibleComponentProps, ...CollapsibleComponentPropsType,
collapsibleStack: Collapsible, collapsibleStack: Collapsible,
// eslint-disable-next-line flowtype/no-weak-types
component: any, component: any,
} };
class CollapsibleComponent extends React.Component<Props> {
class CollapsibleComponent extends React.Component<PropsType> {
static defaultProps = { static defaultProps = {
children: null,
hasTab: false, hasTab: false,
} onScroll: null,
};
onScroll = (event: SyntheticEvent<EventTarget>) => { onScroll = (event: SyntheticEvent<EventTarget>) => {
if (this.props.onScroll) const {props} = this;
this.props.onScroll(event); if (props.onScroll) props.onScroll(event);
} };
render(): React.Node {
const {props} = this;
const Comp = props.component;
const {
containerPaddingTop,
scrollIndicatorInsetTop,
onScrollWithListener,
} = props.collapsibleStack;
render() {
const Comp = this.props.component;
const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
return ( return (
<Comp <Comp
{...this.props} // eslint-disable-next-line react/jsx-props-no-spreading
{...props}
onScroll={onScrollWithListener(this.onScroll)} onScroll={onScrollWithListener(this.onScroll)}
contentContainerStyle={{ contentContainerStyle={{
paddingTop: containerPaddingTop, paddingTop: containerPaddingTop,
paddingBottom: this.props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0, paddingBottom: props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
minHeight: '100%' minHeight: '100%',
}} }}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}} scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
> {props.children}
{this.props.children}
</Comp> </Comp>
); );
} }

28
src/components/Collapsible/CollapsibleFlatList.js
View file

@ -1,23 +1,23 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated} from "react-native"; import {Animated} from 'react-native';
import type {CollapsibleComponentProps} from "./CollapsibleComponent"; import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
import CollapsibleComponent from "./CollapsibleComponent"; import CollapsibleComponent from './CollapsibleComponent';
type Props = { type PropsType = {
...CollapsibleComponentProps ...CollapsibleComponentPropsType,
} };
class CollapsibleFlatList extends React.Component<Props> { // eslint-disable-next-line react/prefer-stateless-function
class CollapsibleFlatList extends React.Component<PropsType> {
render() { render(): React.Node {
const {props} = this;
return ( return (
<CollapsibleComponent <CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading
{...this.props} {...props}
component={Animated.FlatList} component={Animated.FlatList}>
> {props.children}
{this.props.children}
</CollapsibleComponent> </CollapsibleComponent>
); );
} }

28
src/components/Collapsible/CollapsibleScrollView.js
View file

@ -1,23 +1,23 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated} from "react-native"; import {Animated} from 'react-native';
import type {CollapsibleComponentProps} from "./CollapsibleComponent"; import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
import CollapsibleComponent from "./CollapsibleComponent"; import CollapsibleComponent from './CollapsibleComponent';
type Props = { type PropsType = {
...CollapsibleComponentProps ...CollapsibleComponentPropsType,
} };
class CollapsibleScrollView extends React.Component<Props> { // eslint-disable-next-line react/prefer-stateless-function
class CollapsibleScrollView extends React.Component<PropsType> {
render() { render(): React.Node {
const {props} = this;
return ( return (
<CollapsibleComponent <CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading
{...this.props} {...props}
component={Animated.ScrollView} component={Animated.ScrollView}>
> {props.children}
{this.props.children}
</CollapsibleComponent> </CollapsibleComponent>
); );
} }

28
src/components/Collapsible/CollapsibleSectionList.js
View file

@ -1,23 +1,23 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated} from "react-native"; import {Animated} from 'react-native';
import type {CollapsibleComponentProps} from "./CollapsibleComponent"; import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
import CollapsibleComponent from "./CollapsibleComponent"; import CollapsibleComponent from './CollapsibleComponent';
type Props = { type PropsType = {
...CollapsibleComponentProps ...CollapsibleComponentPropsType,
} };
class CollapsibleSectionList extends React.Component<Props> { // eslint-disable-next-line react/prefer-stateless-function
class CollapsibleSectionList extends React.Component<PropsType> {
render() { render(): React.Node {
const {props} = this;
return ( return (
<CollapsibleComponent <CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading
{...this.props} {...props}
component={Animated.SectionList} component={Animated.SectionList}>
> {props.children}
{this.props.children}
</CollapsibleComponent> </CollapsibleComponent>
); );
} }