Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
app/routes/Forms/Dropzone/components/FilesGrid.js Executable file
View File

@@ -0,0 +1,64 @@
import React from 'react';
import _ from 'lodash';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import numeral from 'numeral';
import moment from 'moment';
import {
Col,
Row,
Card,
CardBody,
Button,
UncontrolledTooltip
} from './../../../../components';
import classes from './common.scss';
import {
getFileIcon
} from './../utilities';
export const FilesGrid = ({ files, onFileRemove }) => (
<Row className="mt-4">
{
_.map(files, (file, index) => (
<Col lg={ 4 } md={ 6 } key={index}>
<Card className="mb-3">
<div className={ classNames("card-img-top", classes['ph--large']) }>
<i className={`fa fa-fw fa-3x ${getFileIcon(file)}`} />
</div>
<CardBody className="pt-2">
<div className="d-flex align-items-center mb-0 mt-0">
<h6 className="text-truncate mb-0">
{ file.name }
</h6>
<Button
color="link"
onClick={() => {onFileRemove(file)}}
size="sm"
id={`delete-file-${index}`}
>
<i className="fa fa-times fa-fw text-danger"></i>
</Button>
<UncontrolledTooltip placement="left" target={`delete-file-${index}`}>
Delete File
</UncontrolledTooltip>
</div>
<div className="mb-0">
by You &middot; <span className='text-uppercase'>{`${numeral(file.size).format('0.00a')}B`}</span>
</div>
<div className='mb-0'>
{ moment(file.modifiedDate).format('DD-MMM-YYYY, HH:mm') }
</div>
</CardBody>
</Card>
</Col>
))
}
</Row>
);
FilesGrid.propTypes = {
files: PropTypes.array,
onFileRemove: PropTypes.func
}

73
app/routes/Forms/Dropzone/components/FilesList.js Executable file
View File

@@ -0,0 +1,73 @@
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import numeral from 'numeral';
import moment from 'moment';
import {
Table,
Button,
UncontrolledTooltip
} from './../../../../components';
import classes from './common.scss';
import {
getFileIcon
} from './../utilities';
export const FilesList = ({ files, onFileRemove }) => (
<Table responsive hover className="mt-3">
<thead>
<tr>
<th className="bt-0"></th>
<th className="bt-0">File Name</th>
<th className="bt-0">Size</th>
<th className="bt-0">Owner</th>
<th className="bt-0">Modified Date</th>
<th className="bt-0 text-right">Actions</th>
</tr>
</thead>
<tbody>
{
_.map(files, (file, index) => (
<tr key={ index }>
<td className="align-middle">
<div className={ classes['ph--small'] }>
<i className={`fa fa-fw fa-2x ${getFileIcon(file)}`} />
</div>
</td>
<td className="align-middle">
{ file.name }
</td>
<td className="align-middle text-uppercase">
{ numeral(file.size).format('0.00a') }B
</td>
<td className="align-middle">
You
</td>
<td className="align-middle">
{ moment(file.modifiedDate).format('DD-MMM-YYYY, HH:mm') }
</td>
<td className="text-right align-middle">
<Button
color="link"
onClick={() => {onFileRemove(file)}}
size="sm"
id={`delete-file-${index}`}
>
<i className="fa fa-times fa-fw text-danger"></i>
</Button>
<UncontrolledTooltip placement="left" target={`delete-file-${index}`}>
Delete File
</UncontrolledTooltip>
</td>
</tr>
))
}
</tbody>
</Table>
);
FilesList.propTypes = {
files: PropTypes.array,
onFileRemove: PropTypes.func
}

25
app/routes/Forms/Dropzone/components/common.scss Executable file
View File

@@ -0,0 +1,25 @@
@import "./../../../../styles/variables.scss";
.ph--large {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
background-color: $gray-400;
margin-bottom: 5px;
> i {
color: #fff;
}
}
.ph--small {
display: inline-block;
background-color: $gray-400;
padding: 7px 5px;
border-radius: 7px;
> i {
color: #fff;
}
}

2
app/routes/Forms/Dropzone/components/index.js Executable file
View File

@@ -0,0 +1,2 @@
export * from './FilesGrid';
export * from './FilesList';