Merge pull request #16 from yeojz/feature/more-flow

flow additions

src/lib/branch.js

@@ -11,12 +11,12 @@ type Props = {
   onChange: Function
 };
 
-const getTarget = (name: string, value: any) => ({
+const getTarget = (name: string, value: any): Object => ({
   name,
   value
 });
 
-const updateData = (name: string, data: Object, value: any) => (
+const updateData = (name: string, data: Object, value: Object): Object => (
   updateObjectData(
     data,
     {
@@ -25,12 +25,12 @@ const updateData = (name: string, data: Object, value: any) => (
   )
 );
 
-const handleChange = (name: string, props: Props) => (evt: PseudoEvent) => {
-  let event = createSyntheticFormEvent(evt);
+const handleChange = (name: string, props: Props) => (evt: PseudoEvent): void => {
+  let event: SyntheticFormEvent = createSyntheticFormEvent(evt);
   event.formData = updateData(name, props.formData, event.formData);
   event.formMeta = updateData(name, props.formMeta, event.formMeta);
   event.target = getTarget(name, get(event.formData, name));
-  return props.onChange(event);
+  props.onChange(event);
 };
 
 const branch = () => (Component: ReactClass<any>): ReactClass<any> => {
@@ -43,13 +43,13 @@ const branch = () => (Component: ReactClass<any>): ReactClass<any> => {
       formMeta: {}
     };
 
-    getBranchData = (key: string) => (
-      get(this, ['props', key, this.props.name], {})
+    getBranchData = (key: string): Object => (
+      get(this.props, [key, this.props.name], {})
     )
 
     render() {
-      const formData = this.getBranchData('formData');
-      const formMeta = this.getBranchData('formMeta');
+      const formData: Object = this.getBranchData('formData');
+      const formMeta: Object = this.getBranchData('formMeta');
 
       return (
         <Component

src/lib/collection.js

@@ -2,15 +2,16 @@
 import React from 'react';
 import invariant from 'invariant';
 import get from 'lodash/get';
-import isFunction from 'lodash/isFunction';
 
 type Props = {
   className: string,
   formData: Object
 }
 
-const isActive = (rule: any, props: Object): boolean => {
-  if (isFunction(rule)) {
+type Rule = Function | string | Array<string>;
+
+const isActive = (rule: Rule, props: Object): boolean => {
+  if (typeof rule === 'function') {
     return rule(props.formData, props);
   }
   return !!get(props.formData, rule);
@@ -31,7 +32,7 @@ const renderComponents = (components: Array<ReactClass<any> | Array<any>>, props
   })
 );
 
-const collection = (components: Array<ReactClass<any> | Array<any>> = []) => {
+const collection = (components: Array<ReactClass<any> | Array<any>> = []): ReactClass<any> => {
 
   invariant(
     Array.isArray(components),

src/lib/compose.js

@@ -4,7 +4,7 @@ const compose = (...decorators: Array<Function>): Function => {
 
   return (Component: ReactClass<any>): ReactClass<any> => (
     reversed.reduce(
-      (wrapped, fn) => fn(wrapped),
+      (wrapped: ReactClass<any>, fn: Function) => fn(wrapped),
       Component
     )
   );

src/lib/formControl.js

@@ -26,7 +26,7 @@ const propKeys = [
   'value'
 ];
 
-const formControl = (Element: Function | string) => {
+const formControl = (Element: Function | string): ReactClass<any> => {
 
   invariant(
     typeof Element === 'function' || typeof Element === 'string',
@@ -62,7 +62,7 @@ const formControl = (Element: Function | string) => {
       }
     }
 
-    getValue = (): any => {
+    getValue = (): string | boolean | void => {
       if (typeof this.state.value === 'undefined') {
         return this.props.defaultValue;
       }
@@ -78,7 +78,7 @@ const formControl = (Element: Function | string) => {
     }
 
     render() {
-      const props = omit(this.props, propKeys)
+      const props: Object = omit(this.props, propKeys)
 
       return (
         <Element

src/lib/list.js

@@ -12,25 +12,25 @@ type Props = {
   onChange: Function
 }
 
-const handleChange = (name: string, props: Props) => (idx: number) => (evt: PseudoEvent): any => {
+const handleChange = (name: string, props: Props) => (idx: number) => (evt: PseudoEvent): void => {
   let event = createSyntheticFormEvent(evt);
   event = listActions.change(idx, name, props, event);
-  return props.onChange(event);
+  props.onChange(event);
 };
 
-const handleAdd = (name: string, props: Props) => (position: "before" | "after" = 'after') => (): any => {
-  let event = createSyntheticFormEvent();
+const handleAdd = (name: string, props: Props) => (position: "before" | "after" = 'after') => (): void => {
+  let event: SyntheticFormEvent = createSyntheticFormEvent();
   event = listActions.add(position, name, props, event);
-  return props.onChange(event);
+  props.onChange(event);
 }
 
-const handleRemove = (name: string, props: Props) => (idx: number) => (): any => {
-  let event = createSyntheticFormEvent();
+const handleRemove = (name: string, props: Props) => (idx: number) => (): void => {
+  let event: SyntheticFormEvent = createSyntheticFormEvent();
   event = listActions.remove(idx, name, props, event);
-  return props.onChange(event);
+  props.onChange(event);
 }
 
-const list = (Container: ReactClass<any> = FormContainer) => (Component: ReactClass<any>) => {
+const list = (Container: ReactClass<any> = FormContainer) => (Component: ReactClass<any>): ReactClass<any> => {
 
   class ListForm extends React.Component {
     props: Props
@@ -40,13 +40,13 @@ const list = (Container: ReactClass<any> = FormContainer) => (Component: ReactCl
       formMeta: {}
     }
 
-    getListData = (key: string) => (
-      get(this, ['props', key, this.props.name], [])
+    getListData = (key: string): Array<any> => (
+      get(this.props, [key, this.props.name], [])
     )
 
-    renderList = (onAddHandler: Function, onChangeHandler: Function, onRemoveHandler: Function): Array<ReactClass<any>> => {
-      const formData = this.getListData('formData');
-      const formMeta = this.getListData('formMeta');
+    renderList = (onAddHandler: Function, onChangeHandler: Function, onRemoveHandler: Function): Array<React$Element<any>> => {
+      const formData: Array<any> = this.getListData('formData');
+      const formMeta: Array<any> = this.getListData('formMeta');
 
       return formData.map((entry: any, idx: number) => (
         <Component
@@ -61,9 +61,9 @@ const list = (Container: ReactClass<any> = FormContainer) => (Component: ReactCl
     }
 
     render() {
-      const onAddHandler = handleAdd(this.props.name, this.props);
-      const onChangeHandler = handleChange(this.props.name, this.props);
-      const onRemoveHandler = handleRemove(this.props.name, this.props);
+      const onAddHandler: Function = handleAdd(this.props.name, this.props);
+      const onChangeHandler: Function = handleChange(this.props.name, this.props);
+      const onRemoveHandler: Function = handleRemove(this.props.name, this.props);
 
       return (
         <Container

src/lib/withProps.js

@@ -10,16 +10,16 @@ type Props = {
   onChange: Function
 };
 
-const handleToggle = (props: Props) => (evt: PseudoEvent): any => {
-  let event = createSyntheticFormEvent(evt, props.formData, props.formMeta);
+const handleToggle = (props: Props) => (evt: PseudoEvent): void => {
+  let event: SyntheticFormEvent = createSyntheticFormEvent(evt, props.formData, props.formMeta);
   event.formData = updateObjectData(props.formData, evt, true);
-  return props.onChange(event);
+  props.onChange(event);
 };
 
-const handleChange = (props: Props) => (evt: PseudoEvent): any => {
-  let event = createSyntheticFormEvent(evt, props.formData, props.formMeta);
+const handleChange = (props: Props) => (evt: PseudoEvent): void => {
+  let event: SyntheticFormEvent = createSyntheticFormEvent(evt, props.formData, props.formMeta);
   event.formData = updateObjectData(props.formData, evt);
-  return props.onChange(event);
+  props.onChange(event);
 };
 
 const withProps = () => (Component: ReactClass<any>): ReactClass<any> => {

src/lib/withSideEffects.js

@@ -13,7 +13,7 @@ type SideEffects = Array<Function>;
 
 const applySideEffects = (sideEffects: SideEffects, evt: SyntheticFormEvent, props: Props): Promise<any> => (
   sideEffects.reduce(
-    (p, fn) => p.then((event) => fn(event, props)),
+    (p: Promise<any>, fn: Function) => p.then((event: SyntheticFormEvent) => fn(event, props)),
     Promise.resolve(evt)
   )
 );
@@ -22,8 +22,8 @@ const handleChange = (sideEffects: SideEffects) => (props: Props) => (evt: Pseud
   let event = createSyntheticFormEvent(evt);
 
   applySideEffects(sideEffects, event, props)
-    .then((event) => props.onChange(event))
-    .catch((err) => props.onError(err, constants.SIDE_EFFECTS_ERROR));
+    .then((event: SyntheticFormEvent) => props.onChange(event))
+    .catch((err: Error) => props.onError(err, constants.SIDE_EFFECTS_ERROR));
 };
 
 const withSideEffects = (sideEffects: SideEffects = []) => (Component: ReactClass<any>): ReactClass<any> => {

src/lib/withState.js

@@ -28,7 +28,7 @@ const withState = (defaultConfig: Object = {}) => (Component: ReactClass<any>):
   class ComponentWithState extends React.Component {
     props: Props
 
-    static defaultProps = {
+    static defaultProps: Props = {
       formData: {},
       formMeta: {},
       onChange: noop
@@ -70,7 +70,7 @@ const withState = (defaultConfig: Object = {}) => (Component: ReactClass<any>):
 
     refreshData = (key: string, nextProps: Props): Object => (
       update(nextProps[key], {
-        $merge: get(this, ['state', key], {})
+        $merge: get(this.state, [key], {})
       })
     )
 

src/lib/withValidation.js

@@ -16,17 +16,17 @@ type Rules = Array<Function>;
 
 const applyValidations = (rules: Rules, formData: Object): Promise<any> => (
   rules.reduce(
-    (p, fn) => p.then((err) => fn(err, formData)),
+    (p: Promise<any>, fn: Function) => p.then((err: any) => fn(err, formData)),
     Promise.resolve(void 0)
   )
 );
 
 const getValidator = (rules: Rules) => (event: SyntheticFormEvent, props: Props): Promise<any> => {
-  const formData = event.formData;
-  let formMeta = event.formMeta;
+  const formData: Object = event.formData;
+  let formMeta: Object = event.formMeta;
 
   return applyValidations(rules, formData)
-    .then((err) => {
+    .then((err: any) => {
       formMeta.errors = err;
       event.formMeta = formMeta;
       return event;

src/redux/constants.js

@@ -1,4 +1,4 @@
-export default {
+export default  {
   UPDATE: '@@forms/UPDATE',
   RESET: '@@forms/RESET'
 }

src/redux/formReducer.js

@@ -31,7 +31,7 @@ const getDelta = (type: ActionType, name: string, data: Object): Object => ({
 });
 
 const doUpdateAction = (state: ReducerState, action: Object): ReducerState => {
-  const {payload} = action;
+  const payload: Object = action.payload;
 
   const delta = getDelta(constants.UPDATE, payload.name, {
     formData: payload.formData,
@@ -42,7 +42,7 @@ const doUpdateAction = (state: ReducerState, action: Object): ReducerState => {
 }
 
 const doResetAction = (state: ReducerState, action: Object): ReducerState => {
-  const {payload} = action;
+  const payload: Object = action.payload;
   const delta = getDelta(constants.RESET, payload.name, {});
   return update(state, delta);
 }

src/redux/withReduxState.js

@@ -46,7 +46,7 @@ const withReduxState = (reducerKey: string = 'forms') => (Component: ReactClass<
   }
 
   const mapStateToProps = (state: Object): Object => ({
-    getReduxData: (name: string) => ({
+    getReduxData: (name: string): Object => ({
       formData: get(state, [reducerKey, 'data', name, 'formData'], {}),
       formMeta: get(state, [reducerKey, 'data', name, 'formMeta'], {})
     })

src/utils/SyntheticFormEvent.js

@@ -29,15 +29,15 @@ class SyntheticFormEvent {
     this._event.stopPropagation = noop;
   }
 
-  set target(value: any) {
+  set target(value: any): void {
     this._event.target = value;
   }
 
-  set formData(value: Object) {
+  set formData(value: Object): void {
     this._formData = value;
   }
 
-  set formMeta(value: Object) {
+  set formMeta(value: Object): void {
     this._formMeta = value;
   }
 

src/utils/getDataFromKey.js

@@ -1,8 +1,8 @@
 // @flow
 import get from 'lodash/get';
 
-function getDataFromKey(dataset: Object): any {
-  return (key: string, defaultValue: string = '') => (
+function getDataFromKey(dataset: Object): Function {
+  return (key: string, defaultValue: string = ''): any => (
     get(dataset, key, defaultValue)
   );
 }

src/utils/listActions.js

@@ -18,15 +18,15 @@ const getAddAction = (position: "before" | "after"): string => {
 
 const addDelta = (name: string, action: string): Object => ({
   [name]: {
-    $apply: (item) => {
+    $apply: (item: Array<any>): Array<any> => {
       return item ? item : [];
     },
     [action]: [{}]
   }
 });
 
 const add = (position: "before" | "after", name: string, props: Props, event: SyntheticFormEvent): SyntheticFormEvent => {
-  const delta = addDelta(name, getAddAction(position));
+  const delta: Object = addDelta(name, getAddAction(position));
   event.formData = update(props.formData, delta);
   event.formMeta = update(props.formMeta, delta);
   event.target = getTarget(name, event.formData);
@@ -42,7 +42,7 @@ const changeDelta = (name: string, idx: number) => (value: any): Object => ({
 });
 
 const change = (idx: number, name: string, props: Props, event: SyntheticFormEvent): SyntheticFormEvent => {
-  const delta = changeDelta(name, idx);
+  const delta: Function = changeDelta(name, idx);
   event.formData = update(props.formData, delta(event.formData));
   event.formMeta = update(props.formMeta, delta(event.formMeta));
   event.target = getTarget(name, event.formData);
@@ -56,7 +56,7 @@ const removeDelta = (name: string, idx: number): Object => ({
 });
 
 const remove = (idx: number, name: string, props: Props, event: SyntheticFormEvent): SyntheticFormEvent => {
-  const delta = removeDelta(name, idx);
+  const delta: Object = removeDelta(name, idx);
   event.formData = update(props.formData, delta);
   event.formMeta = update(props.formMeta, delta);
   event.target = getTarget(name, event.formData);

src/utils/updateObjectData.js

@@ -11,13 +11,13 @@ function getDelta(name: string, value: any): Object {
 }
 
 function getBooleanDelta(data: Object, name: string) {
-  const current = get(data, name, false);
+  const current: any = get(data, name, false);
   return getDelta(name, !current);
 }
 
-function updateObjectData(data: Object, evt: PseudoEvent | SyntheticFormEvent, bool: boolean = false) {
-  const name = get(evt, 'target.name');
-  const value = get(evt, 'target.value');
+function updateObjectData(data: Object, evt: PseudoEvent | SyntheticFormEvent, bool: boolean = false): Object {
+  const name: string = get(evt, 'target.name');
+  const value: any = get(evt, 'target.value');
 
   const delta = bool
     ? getBooleanDelta(data, name)