Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Patrik Meijer
react-components
Commits
536ab8a0
Commit
536ab8a0
authored
Nov 09, 2018
by
Tamas Kecskes
Browse files
InfoCard component.
Also added index files where it was missing.
parent
9832a72a
Changes
10
Hide whitespace changes
Inline
Side-by-side
demo/demoApp.jsx
View file @
536ab8a0
...
...
@@ -7,6 +7,7 @@ import Typography from '@material-ui/core/Typography';
import
{
DragDropContext
}
from
'
react-dnd
'
;
import
HTML5Backend
from
'
react-dnd-html5-backend
'
;
import
DemoProjectSeedCards
from
'
../src/components/ProjectSeedCards/demo
'
;
import
DemoAttributeEditor
from
'
../src/components/AttributeEditor/demo
'
;
import
DemoConfirmDialog
from
'
../src/components/ConfirmDialog/demo
'
;
...
...
@@ -14,7 +15,7 @@ import DemoUserProfileNavigator from '../src/components/UserProfileNavigator/dem
import
DemoModalSpinner
from
'
../src/components/ModalSpinner/demo
'
;
import
DemoContainmentCanvas
from
'
../src/components/ContainmentCanvas/demo
'
;
import
DemoSingleConnectedNode
from
'
../src/components/SingleConnectedNode/demo
'
;
import
DemoInfoCard
from
'
../src/components/InfoCard//demo
'
;
class
demoApp
extends
Component
{
...
...
@@ -49,28 +50,34 @@ class demoApp extends Component {
{
component
:
<
DemoContainmentCanvas
/>,
title
:
'
ContainmentCanvas
'
,
height
:
400
},
{
component
:
<
DemoSingleConnectedNode
/>,
title
:
'
SingleConnectedNode
'
,
},
{
component
:
<
DemoInfoCard
/>,
title
:
'
InfoCard
'
,
height
:
200
},
];
return
(
<
div
>
{
DEMOS
.
map
((
info
)
=>
{
return
(
<
ExpansionPanel
defaultExpanded
key
=
{
info
.
title
}
>
<
ExpansionPanelSummary
>
<
Typography
variant
=
"headline"
color
=
"textSecondary"
>
{
info
.
title
}
</
Typography
>
</
ExpansionPanelSummary
>
<
div
style
=
{
{
padding
:
20
}
}
>
{
info
.
component
}
</
div
>
</
ExpansionPanel
>
)
})
}
</
div
>);
<
div
>
{
DEMOS
.
map
((
info
)
=>
{
return
(
<
ExpansionPanel
defaultExpanded
key
=
{
info
.
title
}
>
<
ExpansionPanelSummary
>
<
Typography
variant
=
"headline"
color
=
"textSecondary"
>
{
info
.
title
}
</
Typography
>
</
ExpansionPanelSummary
>
<
div
style
=
{
{
padding
:
20
,
height
:
info
.
height
}
}
>
{
info
.
component
}
</
div
>
</
ExpansionPanel
>
)
})
}
</
div
>);
};
};
...
...
src/components/BasicEventManager/index.jsx
0 → 100644
View file @
536ab8a0
export
{
default
}
from
'
./BasicEventManager
'
;
\ No newline at end of file
src/components/ConnectionManager/index.jsx
0 → 100644
View file @
536ab8a0
import
BasicConnectingComponent
from
'
./BasicConnectingComponent
'
;
import
ConnectionManager
from
'
./ConnectionManager
'
;
export
{
ConnectionManager
,
BasicConnectingComponent
};
\ No newline at end of file
src/components/ContainmentCanvas/demo.jsx
View file @
536ab8a0
import
React
,
{
Component
}
from
'
react
'
;
import
ContainmentCanvas
from
'
./
ContainmentCanvas
'
;
import
ContainmentCanvas
from
'
./
index
'
;
export
default
class
DemoContainmentCanvas
extends
Component
{
constructor
(
props
)
{
...
...
src/components/InfoCard/InfoCard.jsx
0 → 100644
View file @
536ab8a0
import
React
from
'
react
'
;
import
Card
from
'
@material-ui/core/Card
'
;
import
CardActions
from
'
@material-ui/core/CardActions
'
;
import
CardContent
from
'
@material-ui/core/CardContent
'
;
import
Button
from
'
@material-ui/core/Button
'
;
import
Typography
from
'
@material-ui/core/Typography
'
;
const
InfoCard
=
(
title
,
content
,
link
)
=>
{
let
button
=
link
==
null
?
null
:
(
<
a
href
=
{
link
.
target
||
'
https://www.google.com/
'
}
target
=
"_blank"
rel
=
"noopener noreferrer"
key
=
"infoBtn"
style
=
{
{
textDecoration
:
'
none
'
}
}
>
<
Button
size
=
"small"
color
=
"primary"
>
Learn More
</
Button
>
</
a
>
);
return
(
<
Card
style
=
{
{
position
:
'
absolute
'
,
maxWidth
:
600
,
left
:
'
calc(50% - 300px)
'
,
top
:
'
20%
'
,
}
}
>
<
CardContent
>
<
Typography
style
=
{
{
marginBottom
:
20
}
}
variant
=
"headline"
component
=
"h2"
>
{
title
||
'
An information card
'
}
</
Typography
>
<
Typography
component
=
"p"
>
{
content
||
'
You can describe your content and put onto the screen with a useful link.
'
}
</
Typography
>
</
CardContent
>
<
CardActions
>
{
button
}
</
CardActions
>
</
Card
>
);
};
export
default
InfoCard
;
\ No newline at end of file
src/components/InfoCard/demo.jsx
0 → 100644
View file @
536ab8a0
import
React
,
{
Component
}
from
'
react
'
;
import
InfoCard
from
'
./index
'
;
export
default
class
DemoInfoCard
extends
Component
{
render
()
{
const
content
=
(<
span
>
add any thing you desire
<
br
/><
br
/>
and what you want
</
span
>);
let
card
=
InfoCard
(
'
Exmaple Info Card
'
,
content
,
{
target
:
'
https://www.google.com/
'
,
title
:
'
Go search
'
});
return
(
<
div
>
{
card
}
</
div
>
);
}
}
\ No newline at end of file
src/components/InfoCard/index.jsx
0 → 100644
View file @
536ab8a0
export
{
default
}
from
'
./InfoCard
'
;
\ No newline at end of file
src/components/ModalSpinner/demo.jsx
View file @
536ab8a0
import
React
,
{
Component
}
from
'
react
'
;
import
ModalSpinner
from
'
./
ModalSpinner
'
;
import
ModalSpinner
from
'
./
index
'
;
import
Button
from
'
@material-ui/core/Button
'
;
export
default
class
DemoContainmentCanvas
extends
Component
{
...
...
src/components/ModalSpinner/index.jsx
0 → 100644
View file @
536ab8a0
export
{
default
}
from
'
./ModalSpinner
'
;
\ No newline at end of file
src/components/SingleConnectedNode/index.jsx
0 → 100644
View file @
536ab8a0
export
{
default
}
from
'
./SingleConnectedNode
'
;
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment