fb6d07a · bridge · git.iko.soy

src/indigo-react/components/Flex.js+4−9

compare with master

unifiedsplit

@@ -1,10 +1,8 @@

1import React from 'react';

2import cn from 'classnames';

3

4−import getComponent from '../lib/getComponent';

5−

6function Flex({

4function Flex({

7− as = 'div',

5+ as: As = 'div',

8 row = false,

6 row = false,

9 wrap = false,

7 wrap = false,

10 col = false,

8 col = false,

@@ -16,10 +14,8 @@ function Flex({

16 if (row && col) {

14 if (row && col) {

17 throw new Error('Only one of row or col must be true, not both.');

15 throw new Error('Only one of row or col must be true, not both.');

18 }

16 }

19−

20− const Component = getComponent(as);

21 return (

17 return (

22− <Component

18+ <As

23 className={cn(

19 className={cn(

24 'flex',

20 'flex',

25 {

21 {

@@ -39,14 +35,13 @@ function Flex({

39}

35}

40

36

41// flex can be boolean {true} or integer flex

37// flex can be boolean {true} or integer flex

42−Flex.Item = function FlexItem({ as = 'div', flex, className, ...rest }) {

38+Flex.Item = function FlexItem({ as: As = 'div', flex, className, ...rest }) {

43 if (flex === true) {

39 if (flex === true) {

44 flex = 1;

40 flex = 1;

45 }

41 }

46

42

47− const Component = getComponent(as);

48 return (

43 return (

49− <Component

44+ <As

50 className={cn(

45 className={cn(

51 {

46 {

52 [`flex${flex}`]: flex,

47 [`flex${flex}`]: flex,

src/indigo-react/components/Grid.js+4−11

@@ -1,20 +1,14 @@

1import React from 'react';

2import cn from 'classnames';

3

4−import getComponent from '../lib/getComponent';

5−

6−function Grid({ as = 'div', gap = 0, className, ...rest }) {

4+function Grid({ as: As = 'div', gap = 0, className, ...rest }) {

7− const Component = getComponent(as);

8 return (

5 return (

9− <Component

10− className={cn('grid12', gap && `gap${gap}`, className)}

6+ <As className={cn('grid12', gap && `gap${gap}`, className)} {...rest} />

11− {...rest}

12− />

13 );

7 );

14}

8}

15

9

16Grid.Item = function GridItem({

10Grid.Item = function GridItem({

17− as = 'div',

11+ as: As = 'div',

18 full = false,

12 full = false,

19 half = 0,

13 half = 0,

20 third = 0,

14 third = 0,

@@ -26,9 +20,8 @@ Grid.Item = function GridItem({

26 className,

20 className,

27 ...rest

21 ...rest

28}) {

22}) {

29− const Component = getComponent(as);

30 return (

23 return (

31− <Component

24+ <As

32 className={cn(

25 className={cn(

33 {

26 {

34 full,

27 full,

src/indigo-react/components/Typography.js+2−5

@@ -1,12 +1,9 @@

1import React from 'react';

2import cn from 'classnames';

3

4−import getComponent from '../lib/getComponent';

5−

6const typeWith = (DefaultComponent, defaultClassName) =>

4const typeWith = (DefaultComponent, defaultClassName) =>

7− function({ as = DefaultComponent, className, ...rest }) {

5+ function({ as: As = DefaultComponent, className, ...rest }) {

8− const Component = getComponent(as);

9− return <Component className={cn(defaultClassName, className)} {...rest} />;

6+ return <As className={cn(defaultClassName, className)} {...rest} />;

10 };

7 };

11

8

12export const H1 = typeWith('h1');

9export const H1 = typeWith('h1');

src/indigo-react/lib/getComponent.jsdeleted−1

@@ -1 +0,0 @@

1−export default as => as || 'div';

src/indigo-react/lib/useForm.js+1

@@ -75,6 +75,7 @@ export default function useForm(configs = []) {

75 name => e => setValue(name, transform(name, e.target.value)), //

76 [setValue, transform]

77 );

78+

78 // on focus, update focus

79 // on focus, update focus

79 const onFocus = useCallback(

80 const onFocus = useCallback(

80 name => e => setFocused({ [name]: true }), //

81 name => e => setFocused({ [name]: true }), //