oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

input group component

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-02-08 15:37:22 +01:00
parent f2c49db9a6
commit 77601edced
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 49 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@ -102,14 +102,5 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"><span class="loader"></span></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
--></body>
</body>
</html>

1
src/components/Header.module.scss
View File

@ -92,4 +92,5 @@
.linkActive {
composes: link;
color: $brand-pink;
pointer-events: none;
}

1
src/components/atoms/Form/Input.module.scss
View File

@ -3,7 +3,6 @@
.inputWrap {
background: $brand-gradient;
border-radius: $border-radius;
width: 100%;
padding: 2px;
display: flex;
position: relative;

14
src/components/atoms/Form/Input.tsx
View File

@ -6,6 +6,7 @@ import Help from './Help'
import styles from './Input.module.scss'
import Label from './Label'
import Row from './Row'
import InputGroup from './InputGroup'
interface InputProps {
name: string
@ -16,10 +17,11 @@ interface InputProps {
tag?: string
type?: string
options?: string[]
additionalComponent?: void
additionalComponent?: any
value?: string
onChange?: any
rows?: number
group?: any
}
interface InputState {
@ -105,7 +107,15 @@ export default class Input extends PureComponent<InputProps, InputState> {
return (
<div className={this.inputWrapClasses()}>
<input className={styles.input} {...props} />
{props.group ? (
<InputGroup>
<input className={styles.input} {...props} />
{props.group}
</InputGroup>
) : (
<input className={styles.input} {...props} />
)}
{props.type === 'search' && <SearchIcon />}
</div>
)

24
src/components/atoms/Form/InputGroup.module.scss Normal file
View File

@ -0,0 +1,24 @@
@import '../../../styles/variables';
.inputGroup {
display: flex;
width: 100%;
> input {
width: 75%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
> button {
width: 25%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow: none;
&:hover,
&:focus {
transform: none;
}
}
}

8
src/components/atoms/Form/InputGroup.tsx Normal file
View File

@ -0,0 +1,8 @@
import React from 'react'
import styles from './InputGroup.module.scss'
const InputGroup = ({ children }: { children: any }) => (
<div className={styles.inputGroup}>{children}</div>
)
export default InputGroup

5
src/routes/Home.tsx
View File

@ -20,7 +20,7 @@ class Home extends Component<HomeProps, HomeState> {
return (
<Route
title="Commons"
description="A marketplace to find and publish open data sets."
description="A marketplace to find and publish open data sets in the Ocean Network."
className={styles.home}
>
<Form onSubmit={this.searchAssets}>
@ -28,10 +28,11 @@ class Home extends Component<HomeProps, HomeState> {
type="search"
name="search"
label="Search"
placeholder=""
value={this.state.search}
onChange={this.inputChange}
group={<Button>Search</Button>}
/>
<Button>Search</Button>
</Form>
</Route>
)