#22: minor code style and type anotations improvements

This commit is contained in:
SleepWalker 2018-05-05 09:43:43 +03:00
parent bfff6894b5
commit 6f650ba0c5
10 changed files with 315 additions and 71 deletions

265
flow-typed/npm/react-intl_v2.x.x.js vendored Normal file
View File

@ -0,0 +1,265 @@
// flow-typed signature: e68caa23426dedefced5662fb92b4638
// flow-typed version: d13a175635/react-intl_v2.x.x/flow_>=v0.57.x
/**
* Original implementation of this file by @marudor at https://github.com/marudor/flowInterfaces
* Copied here based on intention to merge with flow-typed expressed here:
* https://github.com/marudor/flowInterfaces/issues/6
*/
// Mostly from https://github.com/yahoo/react-intl/wiki/API#react-intl-api
import type { Element, ChildrenArray } from "react";
type $npm$ReactIntl$LocaleData = {
locale: string,
[key: string]: any
};
type $npm$ReactIntl$MessageDescriptor = {
id: string,
description?: string,
defaultMessage?: string
};
type $npm$ReactIntl$IntlConfig = {
locale: string,
formats: Object,
messages: { [id: string]: string },
defaultLocale?: string,
defaultFormats?: Object
};
type $npm$ReactIntl$IntlProviderConfig = {
locale?: string,
formats?: Object,
messages?: { [id: string]: string },
defaultLocale?: string,
defaultFormats?: Object
};
type $npm$ReactIntl$IntlFormat = {
formatDate: (value: any, options?: Object) => string,
formatTime: (value: any, options?: Object) => string,
formatRelative: (value: any, options?: Object) => string,
formatNumber: (value: any, options?: Object) => string,
formatPlural: (value: any, options?: Object) => string,
formatMessage: (
messageDescriptor: $npm$ReactIntl$MessageDescriptor,
values?: Object
) => string,
formatHTMLMessage: (
messageDescriptor: $npm$ReactIntl$MessageDescriptor,
values?: Object
) => string
};
type $npm$ReactIntl$IntlShape = $npm$ReactIntl$IntlConfig &
$npm$ReactIntl$IntlFormat & { now: () => number };
type $npm$ReactIntl$DateTimeFormatOptions = {
localeMatcher?: "best fit" | "lookup",
formatMatcher?: "basic" | "best fit",
timeZone?: string,
hour12?: boolean,
weekday?: "narrow" | "short" | "long",
era?: "narrow" | "short" | "long",
year?: "numeric" | "2-digit",
month?: "numeric" | "2-digit" | "narrow" | "short" | "long",
day?: "numeric" | "2-digit",
hour?: "numeric" | "2-digit",
minute?: "numeric" | "2-digit",
second?: "numeric" | "2-digit",
timeZoneName?: "short" | "long"
};
type $npm$ReactIntl$RelativeFormatOptions = {
style?: "best fit" | "numeric",
units?: "second" | "minute" | "hour" | "day" | "month" | "year"
};
type $npm$ReactIntl$NumberFormatOptions = {
localeMatcher?: "best fit" | "lookup",
style?: "decimal" | "currency" | "percent",
currency?: string,
currencyDisplay?: "symbol" | "code" | "name",
useGrouping?: boolean,
minimumIntegerDigits?: number,
minimumFractionDigits?: number,
maximumFractionDigits?: number,
minimumSignificantDigits?: number,
maximumSignificantDigits?: number
};
type $npm$ReactIntl$PluralFormatOptions = {
style?: "cardinal" | "ordinal"
};
type $npm$ReactIntl$PluralCategoryString =
| "zero"
| "one"
| "two"
| "few"
| "many"
| "other";
type $npm$ReactIntl$DateParseable = number | string | Date;
declare module "react-intl" {
// PropType checker
declare function intlShape(
props: Object,
propName: string,
componentName: string
): void;
declare function addLocaleData(
data: $npm$ReactIntl$LocaleData | Array<$npm$ReactIntl$LocaleData>
): void;
declare function defineMessages<
T: { [key: string]: $npm$ReactIntl$MessageDescriptor }
>(
messageDescriptors: T
): T;
declare type InjectIntlProvidedProps = {
intl: $npm$ReactIntl$IntlShape
}
declare type ComponentWithDefaultProps<DefaultProps: {}, Props: {}> =
| React$ComponentType<Props>
| React$StatelessFunctionalComponent<Props>
| ChildrenArray<void | null | boolean | string | number | Element<any>>;
declare type InjectIntlOptions = {
intlPropName?: string,
withRef?: boolean
}
declare class IntlInjectedComponent<TOwnProps, TDefaultProps> extends React$Component<TOwnProps> {
static WrappedComponent: Class<React$Component<TOwnProps & InjectIntlProvidedProps>>,
static defaultProps: TDefaultProps,
props: TOwnProps
}
declare type IntlInjectedComponentClass<TOwnProps, TDefaultProps: {} = {}> = Class<
IntlInjectedComponent<TOwnProps, TDefaultProps>
>;
declare function injectIntl<OriginalProps: InjectIntlProvidedProps, DefaultProps: {}>
(
component: ComponentWithDefaultProps<DefaultProps, OriginalProps>,
options?: InjectIntlOptions,
):
IntlInjectedComponentClass<$Diff<OriginalProps, InjectIntlProvidedProps>, DefaultProps>
declare function injectIntl<OriginalProps: InjectIntlProvidedProps>
(
component: React$ComponentType<OriginalProps>,
options?: InjectIntlOptions,
):
IntlInjectedComponentClass<$Diff<OriginalProps, InjectIntlProvidedProps>>;
declare function formatMessage(
messageDescriptor: $npm$ReactIntl$MessageDescriptor,
values?: Object
): string;
declare function formatHTMLMessage(
messageDescriptor: $npm$ReactIntl$MessageDescriptor,
values?: Object
): string;
declare function formatDate(
value: any,
options?: $npm$ReactIntl$DateTimeFormatOptions & { format: string }
): string;
declare function formatTime(
value: any,
options?: $npm$ReactIntl$DateTimeFormatOptions & { format: string }
): string;
declare function formatRelative(
value: any,
options?: $npm$ReactIntl$RelativeFormatOptions & {
format: string,
now: any
}
): string;
declare function formatNumber(
value: any,
options?: $npm$ReactIntl$NumberFormatOptions & { format: string }
): string;
declare function formatPlural(
value: any,
options?: $npm$ReactIntl$PluralFormatOptions
): $npm$ReactIntl$PluralCategoryString;
declare class FormattedMessage extends React$Component<
$npm$ReactIntl$MessageDescriptor & {
values?: Object,
tagName?: string,
children?: (...formattedMessage: Array<React$Node>) => React$Node
}
> {}
declare class FormattedHTMLMessage extends React$Component<
$npm$ReactIntl$DateTimeFormatOptions & {
values?: Object,
tagName?: string,
children?: (...formattedMessage: Array<React$Node>) => React$Node
}
> {}
declare class FormattedDate extends React$Component<
$npm$ReactIntl$DateTimeFormatOptions & {
value: $npm$ReactIntl$DateParseable,
format?: string,
children?: (formattedDate: string) => React$Node
}
> {}
declare class FormattedTime extends React$Component<
$npm$ReactIntl$DateTimeFormatOptions & {
value: $npm$ReactIntl$DateParseable,
format?: string,
children?: (formattedDate: string) => React$Node
}
> {}
declare class FormattedRelative extends React$Component<
$npm$ReactIntl$RelativeFormatOptions & {
value: $npm$ReactIntl$DateParseable,
format?: string,
updateInterval?: number,
initialNow?: $npm$ReactIntl$DateParseable,
children?: (formattedDate: string) => React$Node
}
> {}
declare class FormattedNumber extends React$Component<
$npm$ReactIntl$NumberFormatOptions & {
value: number | string,
format?: string,
children?: (formattedNumber: string) => React$Node
}
> {}
declare class FormattedPlural extends React$Component<
$npm$ReactIntl$PluralFormatOptions & {
value: number | string,
other: React$Node,
zero?: React$Node,
one?: React$Node,
two?: React$Node,
few?: React$Node,
many?: React$Node,
children?: (formattedPlural: React$Node) => React$Node
}
> {}
declare class IntlProvider extends React$Component<
$npm$ReactIntl$IntlProviderConfig & {
children?: React$Node,
initialNow?: $npm$ReactIntl$DateParseable
}
> {}
declare type IntlShape = $npm$ReactIntl$IntlShape;
declare type MessageDescriptor = $npm$ReactIntl$MessageDescriptor;
}

View File

@ -1,27 +1,27 @@
// @flow
import type { Node } from 'react';
import type { Location } from 'react-router';
import type { OauthAppResponse } from 'services/api/oauth';
import React, { Component } from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { create as createPopup } from 'components/ui/popup/actions';
import ContactForm from 'components/contact/ContactForm';
import { LinkButton } from 'components/ui/form';
import { COLOR_GREEN, COLOR_BLUE } from 'components/ui';
import { restoreScroll } from 'components/ui/scroll/scroll';
import styles from './applicationsIndex.scss';
import messages from './ApplicationsIndex.intl.json';
import cubeIcon from './icons/cube.svg';
import loadingCubeIcon from './icons/loading-cube.svg';
import toolsIcon from './icons/tools.svg';
import ApplicationItem from './ApplicationItem';
import { LinkButton } from 'components/ui/form';
import { COLOR_GREEN, COLOR_BLUE } from 'components/ui';
import { restoreScroll } from 'components/ui/scroll/scroll';
import type { Node } from 'react';
import type { OauthAppResponse } from 'services/api/oauth';
type Props = {
location: {
hash: string,
},
location: Location,
displayForGuest: bool,
applications: Array<OauthAppResponse>,
isLoading: bool,
@ -39,12 +39,14 @@ class ApplicationsIndex extends Component<Props, State> {
expandedApp: null,
};
appsRefs = {};
appsRefs: {[key: string]: ?HTMLDivElement} = {};
componentDidUpdate(prevProps: Props) {
const { applications, isLoading, location } = this.props;
if (isLoading !== prevProps.isLoading && applications.length) {
const hash = location.hash.substr(1);
if (hash !== '' && applications.some((app) => app.clientId === hash)) {
requestAnimationFrame(() => this.onTileClick(hash));
}
@ -56,6 +58,7 @@ class ApplicationsIndex extends Component<Props, State> {
const { expandedApp } = this.state;
let content: Node;
if (displayForGuest) {
content = (
<div className={styles.emptyState}>
@ -174,6 +177,7 @@ class ApplicationsIndex extends Component<Props, State> {
onTileClick = (clientId: string) => {
const expandedApp = this.state.expandedApp === clientId ? null : clientId;
this.setState({expandedApp}, () => {
if (expandedApp !== null) {
// TODO: @SleepWalker: мб у тебя есть идея, как это сделать более правильно и менее дёргано?
@ -184,15 +188,11 @@ class ApplicationsIndex extends Component<Props, State> {
onContact = (event) => {
event.preventDefault();
this.props.createContactPopup();
};
}
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { create as createPopup } from 'components/ui/popup/actions';
import ContactForm from 'components/contact/ContactForm';
export default withRouter(connect(null, {
createContactPopup: () => createPopup(ContactForm),
})(ApplicationsIndex));

View File

@ -1,24 +1,19 @@
// @flow
import type { Color, Skin } from 'components/ui';
import type { MessageDescriptor } from 'react-intl';
import React from 'react';
import classNames from 'classnames';
import { SKIN_DARK, COLOR_GREEN } from 'components/ui';
import { omit } from 'functions';
import styles from './form.scss';
import FormInputComponent from './FormInputComponent';
import type { Color, Skin } from 'components/ui';
import type { MessageDescriptor } from 'react-intl';
export default class Checkbox extends FormInputComponent<{
color: Color,
skin: Skin,
label: string | MessageDescriptor,
}> {
static displayName = 'Checkbox';
static defaultProps = {
color: COLOR_GREEN,
skin: SKIN_DARK,

View File

@ -1,8 +1,8 @@
// @flow
import type { Skin, Color } from 'components/ui';
import type { MessageDescriptor } from 'react-intl';
import React from 'react';
import classNames from 'classnames';
import { uniqueId, omit } from 'functions';
import copy from 'services/copy';
import icons from 'components/ui/icons.scss';
@ -11,10 +11,7 @@ import { SKIN_DARK, COLOR_GREEN } from 'components/ui';
import styles from './form.scss';
import FormInputComponent from './FormInputComponent';
import type { Skin, Color } from 'components/ui';
import type { MessageDescriptor } from 'react-intl';
let copiedStateTimeout;
let copiedStateTimeout: ?TimeoutID;
export default class Input extends FormInputComponent<{
skin: Skin,
@ -29,8 +26,6 @@ export default class Input extends FormInputComponent<{
}, {
wasCopied: bool,
}> {
static displayName = 'Input';
static defaultProps = {
color: COLOR_GREEN,
skin: SKIN_DARK,
@ -69,6 +64,7 @@ export default class Input extends FormInputComponent<{
props.placeholder = this.formatMessage(props.placeholder);
let baseClass = styles.formRow;
if (icon) {
baseClass = styles.formIconRow;
icon = (

View File

@ -1,11 +1,11 @@
// @flow
import type { ElementProps } from 'react';
import React from 'react';
import type {ElementProps} from 'react';
import { Link } from 'react-router-dom';
import Button from './Button';
export default function LinkButton(props: ElementProps<typeof Button> | ElementProps<typeof Link>) {
export default function LinkButton(props: ElementProps<typeof Button> & ElementProps<typeof Link>) {
const {to, ...restProps} = props;
return (

View File

@ -1,24 +1,19 @@
// @flow
import type { Color, Skin } from 'components/ui';
import type { MessageDescriptor } from 'react-intl';
import React from 'react';
import classNames from 'classnames';
import { SKIN_DARK, COLOR_GREEN } from 'components/ui';
import { omit } from 'functions';
import styles from './form.scss';
import FormInputComponent from './FormInputComponent';
import type { Color, Skin } from 'components/ui';
import type { MessageDescriptor } from 'react-intl';
export default class Radio extends FormInputComponent<{
color: Color,
skin: Skin,
label: string | MessageDescriptor,
}> {
static displayName = 'Radio';
static defaultProps = {
color: COLOR_GREEN,
skin: SKIN_DARK,

View File

@ -1,25 +1,22 @@
// @flow
import type { Skin, Color } from 'components/ui';
import type { MessageDescriptor } from 'react-intl';
import React from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import classNames from 'classnames';
import { uniqueId, omit } from 'functions';
import { SKIN_DARK, COLOR_GREEN } from 'components/ui';
import styles from './form.scss';
import FormInputComponent from './FormInputComponent';
import type { Skin, Color } from 'components/ui';
import type { MessageDescriptor } from 'react-intl';
type TextareaAutosizeProps = {
onHeightChange?: (number, TextareaAutosizeProps) => void,
useCacheForDOMMeasurements?: bool,
minRows?: number,
maxRows?: number,
inputRef?: (HTMLTextAreaElement) => void,
} | HTMLTextAreaElement;
inputRef?: (?HTMLTextAreaElement) => void,
};
export default class TextArea extends FormInputComponent<{
placeholder?: string | MessageDescriptor,
@ -27,9 +24,7 @@ export default class TextArea extends FormInputComponent<{
error?: string,
skin: Skin,
color: Color,
} | TextareaAutosizeProps> {
static displayName = 'TextArea';
} & TextareaAutosizeProps> {
static defaultProps = {
color: COLOR_GREEN,
skin: SKIN_DARK,

View File

@ -25,7 +25,8 @@ b {
font-weight: $font-weight-bold;
}
a, .textLink {
a,
.textLink {
color: #444;
border-bottom: 1px dotted #444;
text-decoration: none;

View File

@ -1,30 +1,26 @@
// @flow
import React, { Component } from 'react';
import React from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import { FooterMenu } from 'components/footerMenu';
import styles from './dev.scss';
import ApplicationsListPage from './ApplicationsListPage';
import CreateNewApplicationPage from './CreateNewApplicationPage';
import UpdateApplicationPage from './UpdateApplicationPage';
import { FooterMenu } from 'components/footerMenu';
export default function DevPage() {
return (
<div className={styles.container}>
<Switch>
<Route path="/dev/applications" exact component={ApplicationsListPage} />
<Route path="/dev/applications/new" exact component={CreateNewApplicationPage} />
<Route path="/dev/applications/:clientId" component={UpdateApplicationPage} />
<Redirect to="/dev/applications" />
</Switch>
export default class DevPage extends Component<{}> {
render() {
return (
<div className={styles.container}>
<Switch>
<Route path="/dev/applications" exact component={ApplicationsListPage} />
<Route path="/dev/applications/new" exact component={CreateNewApplicationPage} />
<Route path="/dev/applications/:clientId" component={UpdateApplicationPage} />
<Redirect to="/dev/applications" />
</Switch>
<div className={styles.footer}>
<FooterMenu />
</div>
<div className={styles.footer}>
<FooterMenu />
</div>
);
}
</div>
);
}

View File

@ -33,6 +33,7 @@ export default function storeFactory() {
const store = createStore(reducers, {}, enhancer);
// Hot reload reducers
// $FlowFixMe
if (module.hot && typeof module.hot.accept === 'function') {
module.hot.accept('reducers', () =>
store.replaceReducer(require('reducers').default)