feat(web): custom tag for ReactiveBase

appbaseio · Jul 24, 2019 · 422d37a · 422d37a
1 parent 452dfac
commit 422d37a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/packages/web/src/components/basic/ReactiveBase.d.ts b/packages/web/src/components/basic/ReactiveBase.d.ts
@@ -6,6 +6,7 @@ export interface ReactiveBaseProps {
 	app: string;
 	children?: types.children;
 	credentials?: string;
+	as?: string;
 	headers?: types.headers;
 	queryParams?: string;
 	theme?: types.style;

diff --git a/packages/web/src/components/basic/ReactiveBase.js b/packages/web/src/components/basic/ReactiveBase.js
@@ -14,7 +14,6 @@ import URLParamsProvider from './URLParamsProvider';
 import getTheme from '../../styles/theme';
 import { composeThemeObject, ReactReduxContext } from '../../utils';
 
-
 class ReactiveBase extends Component {
 	constructor(props) {
 		super(props);
@@ -122,6 +121,7 @@ class ReactiveBase extends Component {
 					<URLParamsProvider
 						headers={this.props.headers}
 						style={this.props.style}
+						as={this.props.as}
 						className={this.props.className}
 						getSearchParams={this.props.getSearchParams}
 						setSearchParams={this.props.setSearchParams}
@@ -141,11 +141,13 @@ ReactiveBase.defaultProps = {
 	analytics: false,
 	searchStateHeader: false,
 	graphQLUrl: '',
+	as: 'div',
 };
 
 ReactiveBase.propTypes = {
 	app: types.stringRequired,
 	searchStateHeader: types.bool,
+	as: types.string,
 	children: types.children,
 	credentials: types.string,
 	headers: types.headers,

diff --git a/packages/web/src/components/basic/URLParamsProvider.js b/packages/web/src/components/basic/URLParamsProvider.js
@@ -194,7 +194,7 @@ class URLParamsProvider extends Component {
 
 	render() {
 		return (
-			<Base style={this.props.style} className={this.props.className}>
+			<Base as={this.props.as} style={this.props.style} className={this.props.className}>
 				{this.props.children}
 			</Base>
 		);
@@ -207,6 +207,7 @@ URLParamsProvider.propTypes = {
 	selectedValues: types.selectedValues,
 	// component props
 	children: types.children,
+	as: types.string,
 	headers: types.headers,
 	style: types.style,
 	className: types.string,
@@ -217,6 +218,7 @@ URLParamsProvider.propTypes = {
 URLParamsProvider.defaultProps = {
 	style: {},
 	className: null,
+	as: 'div',
 };
 
 const mapStateToProps = state => ({

diff --git a/packages/web/src/styles/Base.js b/packages/web/src/styles/Base.js
@@ -1,16 +1,22 @@
+import React from 'react';
 import styled from 'react-emotion';
 
-const Base = styled('div')`
+const Base = styled(({ as: T = 'div', ...props }) => <T {...props} />)`
 	font-family: ${({ theme }) => theme.typography.fontFamily};
 	font-size: ${({ theme }) => theme.typography.fontSize};
 	color: ${({ theme }) => theme.colors.textColor};
 	width: 100%;
 
-	input, button, textarea, select {
+	input,
+	button,
+	textarea,
+	select {
 		font-family: ${({ theme }) => theme.typography.fontFamily};
 	}
 
-	*, *:before, *:after {
+	*,
+	*:before,
+	*:after {
 		box-sizing: border-box;
 	}
 `;