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> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"><span class="loader"></span></div> <div id="root"><span class="loader"></span></div>
<!-- </body>
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>
</html> </html>

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

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

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

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

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

@ -6,6 +6,7 @@ import Help from './Help'
import styles from './Input.module.scss' import styles from './Input.module.scss'
import Label from './Label' import Label from './Label'
import Row from './Row' import Row from './Row'
import InputGroup from './InputGroup'
interface InputProps { interface InputProps {
name: string name: string
@ -16,10 +17,11 @@ interface InputProps {
tag?: string tag?: string
type?: string type?: string
options?: string[] options?: string[]
additionalComponent?: void additionalComponent?: any
value?: string value?: string
onChange?: any onChange?: any
rows?: number rows?: number
group?: any
} }
interface InputState { interface InputState {
@ -105,7 +107,15 @@ export default class Input extends PureComponent<InputProps, InputState> {
return ( return (
<div className={this.inputWrapClasses()}> <div className={this.inputWrapClasses()}>
{props.group ? (
<InputGroup>
<input className={styles.input} {...props} /> <input className={styles.input} {...props} />
{props.group}
</InputGroup>
) : (
<input className={styles.input} {...props} />
)}
{props.type === 'search' && <SearchIcon />} {props.type === 'search' && <SearchIcon />}
</div> </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 ( return (
<Route <Route
title="Commons" 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} className={styles.home}
> >
<Form onSubmit={this.searchAssets}> <Form onSubmit={this.searchAssets}>
@ -28,10 +28,11 @@ class Home extends Component<HomeProps, HomeState> {
type="search" type="search"
name="search" name="search"
label="Search" label="Search"
placeholder=""
value={this.state.search} value={this.state.search}
onChange={this.inputChange} onChange={this.inputChange}
group={<Button>Search</Button>}
/> />
<Button>Search</Button>
</Form> </Form>
</Route> </Route>
) )