on master help sign in
fix: simpler getComponent logic
commitfb6d07a1d3a49012492cdd7280501f88310bb671 authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateThu 27 Jun 2019, 12:00 (7 years ago) parente4c125f
5 files changed+11−26
src/indigo-react/components/Flex.js+4−9 src/indigo-react/components/Grid.js+4−11 src/indigo-react/components/Typography.js+2−5 src/indigo-react/lib/getComponent.js−1 src/indigo-react/lib/useForm.js+1
src/indigo-react/components/Flex.js+4−9
@@ -1,10 +1,8 @@
11import React from 'react';
22import cn from 'classnames';
33
4−import getComponent from '../lib/getComponent';
5−
64function Flex({
7− as = 'div',
5+ as: As = 'div',
86 row = false,
97 wrap = false,
108 col = false,
@@ -16,10 +14,8 @@ function Flex({
1614 if (row && col) {
1715 throw new Error('Only one of row or col must be true, not both.');
1816 }
19−
20− const Component = getComponent(as);
2117 return (
22− <Component
18+ <As
2319 className={cn(
2420 'flex',
2521 {
@@ -39,14 +35,13 @@ function Flex({
3935}
4036
4137// 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 }) {
4339 if (flex === true) {
4440 flex = 1;
4541 }
4642
47− const Component = getComponent(as);
4843 return (
49− <Component
44+ <As
5045 className={cn(
5146 {
5247 [`flex${flex}`]: flex,
src/indigo-react/components/Grid.js+4−11
@@ -1,20 +1,14 @@
11import React from 'react';
22import cn from 'classnames';
33
4−import getComponent from '../lib/getComponent';
5−
6−function Grid({ as = 'div', gap = 0, className, ...rest }) {
7− const Component = getComponent(as);
4+function Grid({ as: As = 'div', gap = 0, className, ...rest }) {
85 return (
9− <Component
10− className={cn('grid12', gap && `gap${gap}`, className)}
11− {...rest}
12− />
6+ <As className={cn('grid12', gap && `gap${gap}`, className)} {...rest} />
137 );
148}
159
1610Grid.Item = function GridItem({
17− as = 'div',
11+ as: As = 'div',
1812 full = false,
1913 half = 0,
2014 third = 0,
@@ -26,9 +20,8 @@ Grid.Item = function GridItem({
2620 className,
2721 ...rest
2822}) {
29− const Component = getComponent(as);
3023 return (
31− <Component
24+ <As
3225 className={cn(
3326 {
3427 full,
src/indigo-react/components/Typography.js+2−5
@@ -1,12 +1,9 @@
11import React from 'react';
22import cn from 'classnames';
33
4−import getComponent from '../lib/getComponent';
5−
64const typeWith = (DefaultComponent, defaultClassName) =>
7− function({ as = DefaultComponent, className, ...rest }) {
8− const Component = getComponent(as);
9− return <Component className={cn(defaultClassName, className)} {...rest} />;
5+ function({ as: As = DefaultComponent, className, ...rest }) {
6+ return <As className={cn(defaultClassName, className)} {...rest} />;
107 };
118
129export 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 = []) {
7575 name => e => setValue(name, transform(name, e.target.value)), //
7676 [setValue, transform]
7777 );
78+
7879 // on focus, update focus
7980 const onFocus = useCallback(
8081 name => e => setFocused({ [name]: true }), //