IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Components: removed reactstrap from module-tile, fixed README.md

Browse Source
This commit is contained in:
Nikita Gopienko 2019-12-03 14:17:31 +03:00
parent c50362c391
commit 8e912bfae3
2 changed files with 110 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/ASC.Web.Components/src/components/module-tile/README.md
View File

@ -23,9 +23,9 @@ import { ModuleTile } from "asc-web-components";
| Props | Type | Required | Values | Default | Description |
| ------------- | :------: | :------: | :----: | :-----: | --------------------------------------- |
| `title` | `string` | - | - | - | Title of tile |
| `imageUrl` | `string` | - | - | - | Image url/path |
| `link` | `string` | - | - | - | Link to return on onClick |
| `title` | `string` | ✅ | - | - | Title of tile |
| `imageUrl` | `string` | ✅ | - | - | Image url/path |
| `link` | `string` | ✅ | - | - | Link to return on onClick |
| `description` | `string` | - | - | - | Description of primary tile |
| `isPrimary` | `bool` | - | - | - | Tells when the tile should be primary |
| `onClick` | `func` | ✅ | - | - | What the tile will trigger when clicked |

184
web/ASC.Web.Components/src/components/module-tile/index.js
View File

@ -1,52 +1,80 @@
import React from "react";
import PropTypes from "prop-types";
import { Card, Row, Col, CardBody, CardImg, CardTitle } from "reactstrap";
import styled from "styled-components";
import { Text } from "../text";
const PrimaryImage = styled(CardImg)`
border: none;
height: 241px;
width: 240px;
cursor: pointer;
`;
const NotPrimaryImage = styled(CardImg)`
border: none;
height: 100px;
width: 100px;
cursor: pointer;
`;
const DescriptionText = styled(CardTitle)`
font-size: 12px;
text-decoration: none;
line-height: 20px;
clear: both;
`;
const PrimaryTitle = styled(CardTitle)`
font-size: 36px;
margin: 46px 0 11px 0;
cursor: pointer;
`;
const NotPrimaryTitle = styled(CardTitle)`
font-size: 18px;
cursor: pointer;
margin: 14px 0 14px 0;
`;
const TileCard = styled(Card)`
font-family: "Open Sans", sans-serif;
color: #333;
border: none;
const TitleContainer = styled.div`
width: auto;
&:hover {
.selectable {
text-decoration: underline;
}
}
.title-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
.title-image-wrapper {
padding: 0 16px;
position: relative;
@media (min-width: 768px) {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.title-image {
border: none;
height: 241px;
width: 240px;
cursor: pointer;
}
}
.title-text-wrapper {
padding: 0 16px;
position: relative;
width: 100%;
@media (min-width: 768px) {
flex: 0 0 auto;
width: auto;
max-width: 50%;
}
}
.title-text {
flex: 1 1 auto;
padding: 1.25rem;
.title-text-header {
margin: 46px 0 11px 0;
cursor: pointer;
}
.title-text-description {
line-height: 20px;
}
}
}
.sub-title-content {
text-align: center;
flex: 1 1 auto;
padding: 1.25rem;
cursor: pointer;
.sub-title-image {
border: none;
height: 100px;
width: 100px;
}
.sub-title-text {
margin: 16px 0 16px 0;
text-align: center;
}
}
`;
const ModuleTile = props => {
@ -56,50 +84,51 @@ const ModuleTile = props => {
const handleClick = (e, link) => onClick && onClick(e, link);
return (
<TileCard>
<TitleContainer>
{isPrimary ? (
<Row className="justify-content-md-center">
<Col md="auto">
<PrimaryImage
className="selectable"
<div className="title-content">
<div className="title-image-wrapper">
<img
className="title-image selectable"
src={imageUrl}
onClick={handleClick.bind(link)}
/>
</Col>
<Col md="6" className="align-middle">
<CardBody>
<PrimaryTitle
className="selectable"
</div>
<div className="title-text-wrapper">
<div onClick={handleClick.bind(link)} className="title-text">
<Text.Body fontSize={36} className="title-text-header selectable">
{title}
</Text.Body>
<Text.Body fontSize={12} className="title-text-description">
{description}
</Text.Body>
</div>
</div>
</div>
) : (
<div className="sub-title-content selectable">
<div>
<img
className="sub-title-image"
src={imageUrl}
onClick={handleClick.bind(link)}
/>
</div>
<div>
<div>
<Text.Body
fontSize={18}
className="sub-title-text"
onClick={handleClick.bind(link)}
>
{title}
</PrimaryTitle>
<DescriptionText className="description">
{description}
</DescriptionText>
</CardBody>
</Col>
</Row>
) : (
<CardBody className="text-center selectable">
<Row>
<Col>
<NotPrimaryImage
src={imageUrl}
onClick={handleClick.bind(link)}
/>
</Col>
</Row>
<Row>
<Col>
<NotPrimaryTitle onClick={handleClick.bind(link)}>
{title}
</NotPrimaryTitle>
</Col>
</Row>
</CardBody>
</Text.Body>
</div>
</div>
</div>
)}
</TileCard>
</TitleContainer>
);
};
@ -108,7 +137,8 @@ ModuleTile.propTypes = {
imageUrl: PropTypes.string.isRequired,
link: PropTypes.string.isRequired,
description: PropTypes.string,
isPrimary: PropTypes.bool
isPrimary: PropTypes.bool,
onClick: PropTypes.func.isRequired
};
ModuleTile.defaultProps = {