박선진 / video-emergency-detection

Go to a project
Toggle navigation Toggle navigation pinning
박선진
9a9d081f 1 parent be297ba1

remade from create-react-app for completely deleting unnecessary codes from template code

Inline Side-by-side
Showing 180 changed files with 352 additions and 17552 deletions
This diff could not be displayed because it is too large.
module.exports = {
"presets": [
"react-app"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-optional-chaining"
]
};
\ No newline at end of file
'use strict';
const fs = require('fs');
const path = require('path');
const paths = require('./paths');
// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];
const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
throw new Error(
'The NODE_ENV environment variable is required but was not specified.'
);
}
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
var dotenvFiles = [
`${paths.dotenv}.${NODE_ENV}.local`,
`${paths.dotenv}.${NODE_ENV}`,
// Don't include `.env.local` for `test` environment
// since normally you expect tests to produce the same
// results for everyone
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
paths.dotenv,
].filter(Boolean);
// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set. Variable expansion is supported in .env files.
// https://github.com/motdotla/dotenv
// https://github.com/motdotla/dotenv-expand
dotenvFiles.forEach(dotenvFile => {
if (fs.existsSync(dotenvFile)) {
require('dotenv-expand')(
require('dotenv').config({
path: dotenvFile,
})
);
}
});
// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebook/create-react-app/issues/253.
// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd());
process.env.NODE_PATH = (process.env.NODE_PATH || '')
.split(path.delimiter)
.filter(folder => folder && !path.isAbsolute(folder))
.map(folder => path.resolve(appDirectory, folder))
.join(path.delimiter);
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
const REACT_APP = /^REACT_APP_/i;
function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
}
);
// Stringify all values so we can feed into Webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
return { raw, stringified };
}
module.exports = getClientEnvironment;
'use strict';
// This is a custom Jest transformer turning style imports into empty objects.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process() {
return 'module.exports = {};';
},
getCacheKey() {
// The output is always the same.
return 'cssTransform';
},
};
'use strict';
const path = require('path');
// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process(src, filename) {
const assetFilename = JSON.stringify(path.basename(filename));
if (filename.match(/\.svg$/)) {
return `module.exports = {
__esModule: true,
default: ${assetFilename},
ReactComponent: (props) => ({
$$typeof: Symbol.for('react.element'),
type: 'svg',
ref: null,
key: null,
props: Object.assign({}, props, {
children: ${assetFilename}
})
}),
};`;
}
return `module.exports = ${assetFilename};`;
},
};
'use strict';
const path = require('path');
const fs = require('fs');
const url = require('url');
// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebook/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
const envPublicUrl = process.env.PUBLIC_URL;
function ensureSlash(inputPath, needsSlash) {
const hasSlash = inputPath.endsWith('/');
if (hasSlash && !needsSlash) {
return inputPath.substr(0, inputPath.length - 1);
} else if (!hasSlash && needsSlash) {
return `${inputPath}/`;
} else {
return inputPath;
}
}
const getPublicUrl = appPackageJson =>
envPublicUrl || require(appPackageJson).homepage;
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
// "public path" at which the app is served.
// Webpack needs to know it to put the right <script> hrefs into HTML even in
// single-page apps that may serve index.html for nested URLs like /todos/42.
// We can't use a relative path in HTML because we don't want to load something
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
return ensureSlash(servedUrl, true);
}
// config after eject: we're in ./config/
module.exports = {
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
appBuild: resolveApp('build'),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveApp('src/index.js'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveApp('src/setupTests.js'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
};
'use strict';
const path = require('path');
const webpack = require('webpack');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const ManifestPlugin = require('webpack-manifest-plugin');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const publicPath = '/';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
const publicUrl = '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
},
},
];
if (preProcessor) {
loaders.push(require.resolve(preProcessor));
}
return loaders;
};
// This is the development configuration.
// It is focused on developer experience and fast rebuilds.
// The production configuration is different and lives in a separate file.
module.exports = {
mode: 'development',
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
// See the discussion in https://github.com/facebook/create-react-app/issues/343
devtool: 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
],
output: {
// Add /* filename */ comments to generated require()s in the output.
pathinfo: true,
// This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime.
filename: 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: 'static/js/[name].chunk.js',
// This is the URL that app is served from. We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
optimization: {
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: false,
},
// Keep the runtime chunk seperated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules'].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: ['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|mjs|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, and some ESnext features.
{
test: /\.(js|mjs|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
// Don't waste time on Gzipping the cache
cacheCompression: false,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
// Don't waste time on Gzipping the cache
cacheCompression: false,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
}),
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// Chains the sass-loader with the css-loader and the style-loader
// to immediately apply all styles to the DOM.
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx)$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
}),
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
'use strict';
const path = require('path');
const webpack = require('webpack');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const paths = require('./paths');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
const publicPath = paths.servedPath;
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = publicPath.slice(0, -1);
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// Assert this just to be safe.
// Development builds of React are slow and not intended for production.
if (env.stringified['process.env'].NODE_ENV !== '"production"') {
throw new Error('Production builds must have NODE_ENV=production.');
}
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
{
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
sourceMap: shouldUseSourceMap,
},
},
];
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: shouldUseSourceMap,
},
});
}
return loaders;
};
// This is the production configuration.
// It compiles slowly and is focused on producing a fast and minimal bundle.
// The development configuration is different and lives in a separate file.
module.exports = {
mode: 'production',
// Don't attempt to continue if there are any errors.
bail: true,
// We generate sourcemaps in production. This is slow but gives good results.
// You can exclude the *.map files from the build during deployment.
devtool: false,
// In production, we only want to load the app code.
entry: [paths.appIndexJs],
output: {
// The build folder.
path: paths.appBuild,
// Generated JS file names (with nested folders).
// There will be one main bundle, and one file per asynchronous chunk.
// We don't currently advertise code splitting but Webpack supports it.
filename: 'static/js/[name].[chunkhash:8].js',
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/'),
},
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
parse: {
// we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending futher investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
reserved: ['$super'],
},
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
// Enable file caching
cache: true,
sourceMap: shouldUseSourceMap,
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: false,
},
// Keep the runtime chunk seperated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules'].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: ['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|mjs|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works just like "file" loader but it also embeds
// assets smaller than specified size as data URLs to avoid requests.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, and some ESnext features.
{
test: /\.(js|mjs|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
},
},
},
],
],
cacheDirectory: true,
// Save disk space when time isn't as important
cacheCompression: true,
compact: true,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
// Save disk space when time isn't as important
cacheCompression: true,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// `MiniCSSExtractPlugin` extracts styles into CSS
// files. If you use code splitting, async bundles will have their own separate CSS chunk file.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
loader: getStyleLoaders({
importLoaders: 1,
sourceMap: shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
loader: getStyleLoaders({
importLoaders: 1,
sourceMap: shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS. The logic here is somewhat similar
// as in the CSS routine, except that "sass-loader" runs first
// to compile SASS files into CSS.
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
loader: getStyleLoaders(
{
importLoaders: 2,
sourceMap: shouldUseSourceMap,
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
loader: getStyleLoaders(
{
importLoaders: 2,
sourceMap: shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
// "file" loader makes sure assets end up in the `build` folder.
// When you `import` an asset, you get its filename.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
],
},
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV was set to production here.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: 'cdn',
navigateFallback: publicUrl + '/index.html',
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp('^/_'),
// Exclude URLs containing a dot, as they're likely a resource in
// public/ and not a SPA route
new RegExp('/[^/]+\\.[^/]+$'),
],
}),
].filter(Boolean),
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
'use strict';
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const ignoredFiles = require('react-dev-utils/ignoredFiles');
const config = require('./webpack.config.dev');
const paths = require('./paths');
const fs = require('fs');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const host = process.env.HOST || '0.0.0.0';
module.exports = function(proxy, allowedHost) {
return {
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
// websites from potentially accessing local content through DNS rebinding:
// https://github.com/webpack/webpack-dev-server/issues/887
// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
// However, it made several existing use cases such as development in cloud
// environment or subdomains in development significantly more complicated:
// https://github.com/facebook/create-react-app/issues/2271
// https://github.com/facebook/create-react-app/issues/2233
// While we're investigating better solutions, for now we will take a
// compromise. Since our WDS configuration only serves files in the `public`
// folder we won't consider accessing them a vulnerability. However, if you
// use the `proxy` feature, it gets more dangerous because it can expose
// remote code execution vulnerabilities in backends like Django and Rails.
// So we will disable the host check normally, but enable it if you have
// specified the `proxy` setting. Finally, we let you override it if you
// really know what you're doing with a special environment variable.
disableHostCheck:
!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
// Enable gzip compression of generated files.
compress: true,
// Silence WebpackDevServer's own logs since they're generally not useful.
// It will still show compile warnings and errors with this setting.
clientLogLevel: 'none',
// By default WebpackDevServer serves physical files from current directory
// in addition to all the virtual build products that it serves from memory.
// This is confusing because those files won’t automatically be available in
// production build folder unless we copy them. However, copying the whole
// project directory is dangerous because we may expose sensitive files.
// Instead, we establish a convention that only files in `public` directory
// get served. Our build script will copy `public` into the `build` folder.
// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
// Note that we only recommend to use `public` folder as an escape hatch
// for files like `favicon.ico`, `manifest.json`, and libraries that are
// for some reason broken when imported through Webpack. If you just want to
// use an image, put it in `src` and `import` it from JavaScript instead.
contentBase: paths.appPublic,
// By default files from `contentBase` will not trigger a page reload.
watchContentBase: true,
// Enable hot reloading server. It will provide /sockjs-node/ endpoint
// for the WebpackDevServer client so it can learn when the files were
// updated. The WebpackDevServer client is included as an entry point
// in the Webpack development configuration. Note that only changes
// to CSS are currently hot reloaded. JS changes will refresh the browser.
hot: true,
// It is important to tell WebpackDevServer to use the same "root" path
// as we specified in the config. In development, we always serve from /.
publicPath: config.output.publicPath,
// WebpackDevServer is noisy by default so we emit custom message instead
// by listening to the compiler events with `compiler.hooks[...].tap` calls above.
quiet: true,
// Reportedly, this avoids CPU overload on some systems.
// https://github.com/facebook/create-react-app/issues/293
// src/node_modules is not ignored to support absolute imports
// https://github.com/facebook/create-react-app/issues/1065
watchOptions: {
ignored: ignoredFiles(paths.appSrc),
},
// Enable HTTPS if the HTTPS environment variable is set to 'true'
https: protocol === 'https',
host,
overlay: false,
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebook/create-react-app/issues/387.
disableDotRule: true,
},
public: allowedHost,
proxy,
before(app, server) {
if (fs.existsSync(paths.proxySetup)) {
// This registers user provided middleware for proxy reasons
require(paths.proxySetup)(app);
}
// This lets us fetch source contents from webpack for the error overlay
app.use(evalSourceMapMiddleware(server));
// This lets us open files from the runtime error overlay.
app.use(errorOverlayMiddleware());
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
app.use(noopServiceWorkerMiddleware());
},
};
};
This diff could not be displayed because it is too large.
{
"name": "sing-app-react",
"version": "5.0.0",
"name": "oss-front-end",
"version": "0.1.0",
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"animate.css": "^4.1.0",
"awesome-bootstrap-checkbox": "^1.0.1",
"bootstrap": "^4.5.0",
"classnames": "^2.2.6",
"debug": "^4.1.1",
"font-awesome": "^4.7.0",
"glyphicons-halflings": "^1.9.1",
"jquery": "^3.5.1",
"line-awesome": "^1.3.0",
"mixins": "0.0.1",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"rc-hammerjs": "^0.6.10",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-table": "^7.2.0",
"react-transition-group": "^4.4.1",
"reactstrap": "^8.4.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"scss": "^0.2.4"
},
"scripts": {
"build": "node scripts/build.js",
"start": "node scripts/start.js",
"test": "node scripts/test.js"
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"eslintConfig": {
"extends": "react-app"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"testEnvironment": "jsdom",
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx}"
],
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
"^.+\\.module\\.(css|sass|scss)$"
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"animate.css": "3.7.0",
"awesome-bootstrap-checkbox": "1.0.1",
"axios": "^0.18.0",
"bootstrap": "4.0.0",
"bootstrap-slider": "^10.2.1",
"bootstrap_calendar": "https://github.com/xero/bootstrap_calendar.git#1.0.1",
"classnames": "^2.2.6",
"draft-js": "^0.10.5",
"flot": "^0.8.0-alpha",
"flot.dashes": "https://github.com/cquartier/flot.dashes.git",
"font-awesome": "4.7.0",
"formsy-react": "0.19.5",
"fullcalendar": "^3.9.0",
"glyphicons-halflings": "^1.9.1",
"jasny-bootstrap": "^3.1.3",
"jquery": "^3.3.1",
"jquery-mapael": "^2.2.0",
"jquery-sparkline": "^2.4.0",
"jquery-ui": "1.12.1",
"jquery.animate-number": "0.0.14",
"jquery.flot-orderBars": "https://github.com/emmerich/flot-orderBars.git",
"jquery.flot.animator": "https://github.com/Codicode/flotanimator.git#3c256c0183d713fd3bf41d04417873928eb1a751",
"jsonwebtoken": "^8.5.1",
"jvectormap": "2.0.4",
"line-awesome": "github:icons8/line-awesome",
"messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2",
"metrojs": "0.9.77",
"moment": "^2.22.2",
"moment-timezone": "^0.5.26",
"nvd3": "1.8.6",
"pretty": "^2.0.0",
"prettysize": "^2.0.0",
"rc-color-picker": "^1.2.6",
"rc-hammerjs": "0.6.9",
"react": "^16.5.2",
"react-animated-number": "^0.4.4",
"react-app-polyfill": "^0.1.3",
"react-autosize-textarea": "^5.0.0",
"react-bootstrap-slider": "^2.1.5",
"react-bootstrap-table": "4.1.5",
"react-datetime": "^2.16.1",
"react-dev-utils": "^6.0.5",
"react-dom": "^16.5.2",
"react-draft-wysiwyg": "1.10.12",
"react-dropzone": "^6.2.4",
"react-flot": "^1.3.0",
"react-google-maps": "^9.4.5",
"react-images": "^0.5.19",
"react-maskedinput": "^4.0.1",
"react-mde": "2.3.4",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-hash-link": "^1.2.1",
"react-scrollspy": "^3.3.5",
"react-select": "^3.0.4",
"react-select2-wrapper": "^1.0.4-beta6",
"react-shuffle": "2.1.0",
"react-slick": "^0.23.1",
"react-sortable-hoc": "^0.8.3",
"react-sortable-tree": "^2.2.0",
"react-sparklines": "^1.7.0",
"react-syntax-highlighter": "^10.1.2",
"react-table": "6.7.6",
"react-tagsinput": "^3.19.0",
"react-toastify": "^5.1.1",
"react-transition-group": "^2.5.2",
"reactstrap": "7.1.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"rickshaw": "1.6.6",
"semantic-ui-react": "^0.87.3",
"showdown": "1.8.6",
"skycons": "^1.0.0",
"widgster": "^1.0.0",
"xlsx": "^0.14.4"
},
"devDependencies": {
"@babel/core": "7.4.4",
"@babel/plugin-proposal-class-properties": "7.4.4",
"@babel/plugin-proposal-optional-chaining": "^7.2.0",
"@svgr/webpack": "4.2.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-jest": "24.8.0",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "1.0.0-next.103",
"babel-preset-react-app": "9.0.0",
"bfj": "6.1.1",
"bundle-loader": "0.5.6",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"chalk": "^2.4.2",
"css-loader": "2.1.1",
"dotenv": "^8.2.0",
"dotenv-expand": "^5.1.0",
"eslint": "5.16.0",
"eslint-config-react-app": "4.0.1",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "3.8.1",
"eslint-plugin-import": "2.17.2",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.13.0",
"eslint-plugin-react-hooks": "1.6.0",
"expose-loader": "0.7.5",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
"imports-loader": "0.8.0",
"jest": "24.8.0",
"jest-pnp-resolver": "1.2.1",
"jest-resolve": "24.8.0",
"lodash": "4.17.11",
"mini-css-extract-plugin": "0.6.0",
"node-sass": "4.12.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.4.3",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.6.0",
"postcss-safe-parser": "4.0.1",
"resolve": "1.10.1",
"sass-loader": "7.1.0",
"style-loader": "0.23.0",
"terser-webpack-plugin": "1.2.3",
"url-loader": "1.1.2",
"webpack": "^4.31.0",
"webpack-dev-server": "3.3.1",
"webpack-manifest-plugin": "2.0.4",
"webpack-raphael": "2.1.4",
"workbox-webpack-plugin": "4.3.1"
},
"resolutions": {
"jquery": "3.3.1"
}
}
......

12 KB | W: | H:

37 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
......@@ -19,27 +25,10 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Video Emergency Detection</title>
<meta name="description" content="React Admin Dashboard Template built with Bootstrap, Redux and React Router by Flatlogic. Over 40 unique pages, hundreds of components and theme support.">
<meta name="keywords" content="react admin, react dashboard, react admin template, react theme, react dashboard template, react dashboard template">
<meta name="author" content="Flatlogic LLC.">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-36759672-9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-36759672-9');
</script>
<!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym"); ym(48020168, "init", { id:48020168, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true, ecommerce:"dataLayer" }); </script> <!-- /Yandex.Metrika counter -->
<title>React App</title>
</head>
<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"></div>
<!--
This HTML file is a template.
......
{
"short_name": "Sing App 5.0.0 - Isomorphic React Dashboard",
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "/favicon.png",
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
......
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const path = require('path');
const chalk = require('chalk');
const fs = require('fs-extra');
const webpack = require('webpack');
const bfj = require('bfj');
const config = require('../config/webpack.config.prod');
const paths = require('../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError');
const measureFileSizesBeforeBuild =
FileSizeReporter.measureFileSizesBeforeBuild;
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const useYarn = fs.existsSync(paths.yarnLockFile);
// These sizes are pretty large. We'll warn for bundles exceeding them.
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
const isInteractive = process.stdout.isTTY;
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
// Process CLI arguments
const argv = process.argv.slice(2);
const writeStatsJson = argv.indexOf('--stats') !== -1;
// We require that you explictly set browsers and do not fall back to
// browserslist defaults.
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
checkBrowsers(paths.appPath, isInteractive)
.then(() => {
// First, read the current file sizes in build directory.
// This lets us display how much they changed later.
return measureFileSizesBeforeBuild(paths.appBuild);
})
.then(previousFileSizes => {
// Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash
fs.emptyDirSync(paths.appBuild);
// Merge with the public folder
copyPublicFolder();
// Start the webpack build
return build(previousFileSizes);
})
.then(
({ stats, previousFileSizes, warnings }) => {
if (warnings.length) {
console.log(chalk.yellow('Compiled with warnings.\n'));
console.log(warnings.join('\n\n'));
console.log(
'\nSearch for the ' +
chalk.underline(chalk.yellow('keywords')) +
' to learn more about each warning.'
);
console.log(
'To ignore, add ' +
chalk.cyan('// eslint-disable-next-line') +
' to the line before.\n'
);
} else {
console.log(chalk.green('Compiled successfully.\n'));
}
console.log('File sizes after gzip:\n');
printFileSizesAfterBuild(
stats,
previousFileSizes,
paths.appBuild,
WARN_AFTER_BUNDLE_GZIP_SIZE,
WARN_AFTER_CHUNK_GZIP_SIZE
);
console.log();
const appPackage = require(paths.appPackageJson);
const publicUrl = paths.publicUrl;
const publicPath = config.output.publicPath;
const buildFolder = path.relative(process.cwd(), paths.appBuild);
printHostingInstructions(
appPackage,
publicUrl,
publicPath,
buildFolder,
useYarn
);
},
err => {
console.log(chalk.red('Failed to compile.\n'));
printBuildError(err);
process.exit(1);
}
)
.catch(err => {
if (err && err.message) {
console.log(err.message);
}
process.exit(1);
});
// Create the production build and print the deployment instructions.
function build(previousFileSizes) {
console.log('Creating an optimized production build...');
let compiler = webpack(config);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
let messages;
if (err) {
if (!err.message) {
return reject(err);
}
messages = formatWebpackMessages({
errors: [err.message],
warnings: [],
});
} else {
messages = formatWebpackMessages(
stats.toJson({ all: false, warnings: true, errors: true })
);
}
if (messages.errors.length) {
// Only keep the first error. Others are often indicative
// of the same problem, but confuse the reader with noise.
if (messages.errors.length > 1) {
messages.errors.length = 1;
}
return reject(new Error(messages.errors.join('\n\n')));
}
if (
process.env.CI &&
(typeof process.env.CI !== 'string' ||
process.env.CI.toLowerCase() !== 'false') &&
messages.warnings.length
) {
console.log(
chalk.yellow(
'\nTreating warnings as errors because process.env.CI = true.\n' +
'Most CI servers set it automatically.\n'
)
);
return reject(new Error(messages.warnings.join('\n\n')));
}
const resolveArgs = {
stats,
previousFileSizes,
warnings: messages.warnings,
};
if (writeStatsJson) {
return bfj
.write(paths.appBuild + '/bundle-stats.json', stats.toJson())
.then(() => resolve(resolveArgs))
.catch(error => reject(new Error(error)));
}
return resolve(resolveArgs);
});
});
}
function copyPublicFolder() {
fs.copySync(paths.appPublic, paths.appBuild, {
dereference: true,
filter: file => file !== paths.appHtml,
});
}
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const fs = require('fs');
const chalk = require('chalk');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const clearConsole = require('react-dev-utils/clearConsole');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const {
choosePort,
createCompiler,
prepareProxy,
prepareUrls,
} = require('react-dev-utils/WebpackDevServerUtils');
const openBrowser = require('react-dev-utils/openBrowser');
const paths = require('../config/paths');
const config = require('../config/webpack.config.dev');
const createDevServerConfig = require('../config/webpackDevServer.config');
const useYarn = fs.existsSync(paths.yarnLockFile);
const isInteractive = process.stdout.isTTY;
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';
if (process.env.HOST) {
console.log(
chalk.cyan(
`Attempting to bind to HOST environment variable: ${chalk.yellow(
chalk.bold(process.env.HOST)
)}`
)
);
console.log(
`If this was unintentional, check that you haven't mistakenly set it in your shell.`
);
console.log(
`Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`
);
console.log();
}
// We require that you explictly set browsers and do not fall back to
// browserslist defaults.
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
checkBrowsers(paths.appPath, isInteractive)
.then(() => {
// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `choosePort()` Promise resolves to the next free port.
return choosePort(HOST, DEFAULT_PORT);
})
.then(port => {
if (port == null) {
// We have not found a port.
return;
}
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const appName = require(paths.appPackageJson).name;
const urls = prepareUrls(protocol, HOST, port);
// Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler(webpack, config, appName, urls, useYarn);
// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
// Serve webpack assets generated by the compiler over a web server.
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(port, HOST, err => {
if (err) {
return console.log(err);
}
if (isInteractive) {
clearConsole();
}
console.log(chalk.cyan('Starting the development server...\n'));
openBrowser(urls.localUrlForBrowser);
});
['SIGINT', 'SIGTERM'].forEach(function(sig) {
process.on(sig, function() {
devServer.close();
process.exit();
});
});
})
.catch(err => {
if (err && err.message) {
console.log(err.message);
}
process.exit(1);
});
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const jest = require('jest');
const execSync = require('child_process').execSync;
let argv = process.argv.slice(2);
function isInGitRepository() {
try {
execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
return true;
} catch (e) {
return false;
}
}
function isInMercurialRepository() {
try {
execSync('hg --cwd . root', { stdio: 'ignore' });
return true;
} catch (e) {
return false;
}
}
// Watch unless on CI, in coverage mode, or explicitly running all tests
if (
!process.env.CI &&
argv.indexOf('--coverage') === -1 &&
argv.indexOf('--watchAll') === -1
) {
// https://github.com/facebook/create-react-app/issues/5210
const hasSourceControl = isInGitRepository() || isInMercurialRepository();
argv.push(hasSourceControl ? '--watch' : '--watchAll');
}
jest.run(argv);
import React from 'react';
import { connect } from 'react-redux';
import { Switch, Route, Redirect } from 'react-router';
import { HashRouter } from 'react-router-dom';
import { ToastContainer } from 'react-toastify';
/* eslint-disable */
import ErrorPage from '../pages/error';
/* eslint-enable */
import '../styles/theme.scss';
import LayoutComponent from '../components/Layout';
const CloseButton = ({closeToast}) => <i onClick={closeToast} className="la la-close notifications-close"/>
import LayoutComponent from '../components/Layout/Layout';
class App extends React.PureComponent {
render() {
return (
<div>
<ToastContainer
autoClose={5000}
hideProgressBar
closeButton={<CloseButton/>}
/>
<HashRouter>
<Switch>
<Route path="/" exact render={() => <Redirect to="/app/main"/>}/>
<Route path="/app" exact render={() => <Redirect to="/app/main"/>}/>
<Route path="/app" component={LayoutComponent}/>
<Route path="/error" exact component={ErrorPage}/>
<Redirect from="*" to="/app/main/"/>
</Switch>
</HashRouter>
</div>
);
}
}
const mapStateToProps = state => ({
});
export default connect(mapStateToProps)(App);
export default App;
......
......@@ -13,103 +13,103 @@ import s from './Layout.module.scss';
import { DashboardThemes } from '../../reducers/layout';
class Layout extends React.Component {
static propTypes = {
sidebarStatic: PropTypes.bool,
sidebarOpened: PropTypes.bool,
dashboardTheme: PropTypes.string,
dispatch: PropTypes.func.isRequired,
};
static defaultProps = {
sidebarStatic: false,
sidebarOpened: false,
dashboardTheme: DashboardThemes.DARK
};
constructor(props) {
super(props);
this.handleSwipe = this.handleSwipe.bind(this);
}
async componentDidMount() {
const staticSidebar = JSON.parse(localStorage.getItem('staticSidebar'));
if (staticSidebar && window.innerWidth > 768) {
this.props.dispatch(toggleSidebar());
} else if (this.props.sidebarOpened) {
setTimeout(() => {
this.props.dispatch(closeSidebar());
this.props.dispatch(changeActiveSidebarItem(null));
}, 2500);
}
this.handleResize();
window.addEventListener('resize', this.handleResize.bind(this));
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize.bind(this));
}
handleResize() {
if (window.innerWidth <= 768 && this.props.sidebarStatic) {
this.props.dispatch(toggleSidebar());
static propTypes = {
sidebarStatic: PropTypes.bool,
sidebarOpened: PropTypes.bool,
dashboardTheme: PropTypes.string,
dispatch: PropTypes.func.isRequired,
};
static defaultProps = {
sidebarStatic: false,
sidebarOpened: false,
dashboardTheme: DashboardThemes.DARK
};
constructor(props) {
super(props);
this.handleSwipe = this.handleSwipe.bind(this);
}
}
handleSwipe(e) {
if ('ontouchstart' in window) {
this.props.dispatch(openSidebar());
return;
async componentDidMount() {
const staticSidebar = JSON.parse(localStorage.getItem('staticSidebar'));
if (staticSidebar && window.innerWidth > 768) {
this.props.dispatch(toggleSidebar());
} else if (this.props.sidebarOpened) {
setTimeout(() => {
this.props.dispatch(closeSidebar());
this.props.dispatch(changeActiveSidebarItem(null));
}, 2500);
}
if (e.direction === 2 && this.props.sidebarOpened) {
this.props.dispatch(closeSidebar());
return;
this.handleResize();
window.addEventListener('resize', this.handleResize.bind(this));
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize.bind(this));
}
handleResize() {
if (window.innerWidth <= 768 && this.props.sidebarStatic) {
this.props.dispatch(toggleSidebar());
}
}
render() {
return (
<div
className={[
s.root,
this.props.sidebarStatic ? s.sidebarStatic : '',
!this.props.sidebarOpened ? s.sidebarClose : '',
'sing-dashboard',
'dashboard-' + this.props.dashboardTheme,
].join(' ')}
>
<Sidebar />
<div className={s.wrap}>
<Hammer onSwipe={this.handleSwipe}>
<main className={s.content}>
<TransitionGroup>
<CSSTransition
key={this.props.location.pathname}
classNames="fade"
timeout={200}
>
<Switch>
<Route path="/app/main/" exact component={Main} />
<Route path="/app/subject" exact component={Subject} />
</Switch>
</CSSTransition>
</TransitionGroup>
<footer className={s.contentFooter}>
OSS project
</footer>
</main>
</Hammer>
}
handleSwipe(e) {
if ('ontouchstart' in window) {
this.props.dispatch(openSidebar());
return;
}
if (e.direction === 2 && this.props.sidebarOpened) {
this.props.dispatch(closeSidebar());
return;
}
}
render() {
return (
<div
className={[
s.root,
this.props.sidebarStatic ? s.sidebarStatic : '',
!this.props.sidebarOpened ? s.sidebarClose : '',
'video emergency analysis',
'video emergency-' + this.props.dashboardTheme,
].join(' ')}
>
<Sidebar />
<div className={s.wrap}>
<Hammer onSwipe={this.handleSwipe}>
<main className={s.content}>
<TransitionGroup>
<CSSTransition
key={this.props.location.pathname}
classNames="fade"
timeout={200}
>
<Switch>
<Route path="/app/main/" exact component={Main} />
<Route path="/app/subject" exact component={Subject} />
</Switch>
</CSSTransition>
</TransitionGroup>
<footer className={s.contentFooter}>
OSS project
</footer>
</main>
</Hammer>
</div>
</div>
</div>
);
);
}
}
}
function mapStateToProps(store) {
return {
sidebarOpened: store.navigation.sidebarOpened,
sidebarStatic: store.navigation.sidebarStatic,
dashboardTheme: store.layout.dashboardTheme,
labelDataGroup: store.labelDataGroup,
};
}
export default withRouter(connect(mapStateToProps)(Layout));
function mapStateToProps(store) {
return {
sidebarOpened: store.navigation.sidebarOpened,
sidebarStatic: store.navigation.sidebarStatic,
dashboardTheme: store.layout.dashboardTheme,
labelDataGroup: store.labelDataGroup,
};
}
export default withRouter(connect(mapStateToProps)(Layout));
\ No newline at end of file
......
{
"name": "Layout",
"version": "0.0.0",
"private": true,
"main": "./Layout.js"
}
{
"name": "Loader",
"version": "0.0.0",
"private": true,
"main": "./Loader.js"
}
......@@ -73,7 +73,7 @@ class LinksGroup extends Component {
target={this.props.target}
>
<span className={classnames('icon', s.icon)}>
<i className={`fi ${this.props.iconName}`} />
<i className={this.props.iconName} />
</span>
{this.props.header} {this.props.label && <sup className={`${s.headerLabel} text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
{this.props.badge && <Badge className={s.badge} color="warning" pill>9</Badge>}
......@@ -99,7 +99,7 @@ class LinksGroup extends Component {
</NavLink>
</li>
);
}
}
/* eslint-disable */
return (
<Route
......@@ -114,7 +114,7 @@ class LinksGroup extends Component {
>
{this.props.isHeader ?
<span className={classnames('icon', s.icon)}>
<i className={`fi ${this.props.iconName}`} />
<i className={this.props.iconName} />
</span> : null
}
{this.props.header} {this.props.label && <sup className={`${s.headerLabel} text-${this.props.labelColor || 'warning'} ml-1`}>{this.props.label}</sup>}
......
......@@ -78,14 +78,14 @@
&:hover {
color: $sidebar-item-active-color;
}
.icon {
border-radius: 50%;
background-color: $sidebar-item-active-color;
background-color: #ffc247;
opacity: 1;
i {
color: var(--sidebar-bg-color);
color: #313947;
}
}
}
......@@ -124,6 +124,7 @@
}
}
ul {
background: var(--sidebar-action-bg);
padding: $spacer;
......
......@@ -54,7 +54,7 @@ class Sidebar extends React.Component {
className={[s.root, this.props.sidebarStatic ? s.staticSidebar : '', !this.props.sidebarOpened ? s.sidebarClose : ''].join(' ')}
>
<header className={s.logo}>
<img src="/images/emergency.png" style={{width: '112px', padding: '7px'}} alt="Emergency Inc. logo"/>
<img src="/images/emergency.png" style={{width: '130px', padding: '7px'}} alt="Emergency Inc. logo"/>
</header>
<ul className={s.nav}>
<LinksGroup
......@@ -62,24 +62,24 @@ class Sidebar extends React.Component {
activeItem={this.props.activeItem}
header="영상 분석"
isHeader
iconName="flaticon-record"
iconName="fas fa-camera"
link="/app/main"
index="main"
childrenLinks={[
{
header: 'Phone', link: '/app/file/phone',
},
{
header: 'RaspberryPi', link: '/app/file/raspberrypi',
},
]}
// childrenLinks={[
// {
// header: 'Phone', link: '/app/file/phone',
// },
// {
// header: 'RaspberryPi', link: '/app/file/raspberrypi',
// },
// ]}
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="사진 등록"
isHeader
iconName="flaticon-user"
iconName="fas fa-user"
link="/app/subject"
index="subject"
/>
......
......@@ -7,8 +7,8 @@
top: 0;
bottom: 0;
border-right: $sidebar-border;
background-color: var(--sidebar-bg-color);
color: var(--sidebar-color);
background-color: #313947;
color: #a6b2c1;
overflow-y: auto;
@include scroll-bar($sidebar-scrollbar-bg);
......
import React from 'react';
import PropTypes from 'prop-types';
import jQuery from 'jquery';
import { UncontrolledTooltip } from 'reactstrap';
import 'imports-loader?window.jQuery=jquery,this=>window!widgster'; // eslint-disable-line
import s from './Widget.module.scss';
import Loader from '../Loader'; // eslint-disable-line css-modules/no-unused-class
import Loader from '../Loader/Loader';
class Widget extends React.Component {
static propTypes = {
......@@ -14,17 +11,7 @@ class Widget extends React.Component {
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
close: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
fullscreen: PropTypes.bool,
collapse: PropTypes.bool,
refresh: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
settings: PropTypes.bool,
settingsInverse: PropTypes.bool,
tooltipPlacement: PropTypes.string,
showTooltip: PropTypes.bool,
bodyClass: PropTypes.string,
customControls: PropTypes.node,
options: PropTypes.object, //eslint-disable-line,
fetchingData: PropTypes.bool
};
......@@ -32,17 +19,7 @@ class Widget extends React.Component {
title: null,
className: '',
children: [],
close: false,
fullscreen: false,
collapse: false,
refresh: false,
settings: false,
settingsInverse: false,
tooltipPlacement: 'bottom',
showTooltip: false,
bodyClass: '',
customControls: null,
options: {},
fetchingData: false
};
......@@ -53,33 +30,15 @@ class Widget extends React.Component {
};
}
componentDidMount() {
const options = this.props.options;
options.bodySelector = '.widget-body';
jQuery(this.el).widgster(options);
}
render() {
const {
title,
className,
children,
close,
fullscreen,
collapse,
refresh,
settings,
settingsInverse,
tooltipPlacement,
showTooltip,
bodyClass,
customControls,
fetchingData,
options, //eslint-disable-line
...attributes
} = this.props;
const randomId = this.state.randomId;
const mainControls = !!(close || fullscreen || collapse || refresh || settings || settingsInverse);
return (
<section
className={['widget', s.widget, className].join(' ')}
......@@ -92,101 +51,6 @@ class Widget extends React.Component {
: <header className={s.title}>{title}</header>
)
}
{
!customControls && mainControls && (
<div className={`${s.widgetControls} widget-controls`}>
{settings && (
<button><i className="la la-cog" /></button>
)}
{settingsInverse && (
<button className={`bg-gray-transparent ${s.inverse}`}><i
className="la la-cog text-white"
/></button>
)}
{refresh && (
<button data-widgster="load" id={`reloadId-${randomId}`}>
{typeof refresh === 'string' ?
<strong className="text-gray-light">{refresh}</strong> :
<i className="la la-refresh" />}
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`reloadId-${randomId}`}
>Reload</UncontrolledTooltip>
)}
</button>
)}
{fullscreen && (
<button data-widgster="fullscreen" id={`fullscreenId-${randomId}`}>
<i className="glyphicon glyphicon-resize-full" />
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`fullscreenId-${randomId}`}
>Fullscreen</UncontrolledTooltip>
)}
</button>
)}
{fullscreen && (
<button data-widgster="restore" id={`restoreId-${randomId}`}>
<i className="glyphicon glyphicon-resize-small" />
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`restoreId-${randomId}`}
>Restore</UncontrolledTooltip>
)}
</button>
)}
{collapse && (
<span>
<button data-widgster="collapse" id={`collapseId-${randomId}`}>
<i className="la la-angle-down" />
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`collapseId-${randomId}`}
>Collapse</UncontrolledTooltip>
)}
</button>
</span>
)}
{collapse && (
<span>
<button data-widgster="expand" id={`expandId-${randomId}`}>
<i className="la la-angle-up" />
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`expandId-${randomId}`}
>Expand</UncontrolledTooltip>
)}
</button>
</span>
)}
{close && (
<button data-widgster="close" id={`closeId-${randomId}`}>
{typeof close === 'string' ?
<strong className="text-gray-light">{close}</strong> :
<i className="la la-remove" />}
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`closeId-${randomId}`}
>Close</UncontrolledTooltip>
)}
</button>
)}
</div>
)}
{
customControls && (
<div className={`${s.widgetControls} widget-controls`}>
{customControls}
</div>
)
}
<div className={`${s.widgetBody} widget-body ${bodyClass}`}>
{fetchingData ? <Loader className={s.widgetLoader} size={40}/> : children}
</div>
......@@ -195,4 +59,4 @@ class Widget extends React.Component {
}
}
export default Widget;
export default Widget;
\ No newline at end of file
......
......@@ -7,10 +7,6 @@
@include clearfix();
}
:global .widget.collapsed {
min-height: unset;
}
.widget {
display: block;
position: relative;
......@@ -76,51 +72,6 @@
}
}
.widgetControls + .widgetBody {
margin-top: $widget-padding-vertical;
}
.widgetControls,
:global(.widget-controls) {
position: absolute;
z-index: 1;
top: 0;
right: 0;
padding: 14px;
font-size: $font-size-sm;
button {
padding: 1px 4px;
border-radius: 4px;
color: rgba($black, 0.4);
background: transparent;
border: none;
@include transition(color 0.15s ease-in-out);
&:hover {
color: rgba($black, 0.1);
text-decoration: none;
}
&:active,
&:focus {
outline: none;
}
:global {
.la {
position: relative;
top: 2px;
}
.glyphicon {
font-size: 0.7rem;
}
}
}
}
.inverse {
top: 2px;
position: relative;
......
{
"name": "Widget",
"version": "0.0.0",
"private": true,
"main": "./Widget.js"
}
const hostApi = process.env.NODE_ENV === "development" ? "http://localhost" : "http://localhost";
const portApi = process.env.NODE_ENV === "development" ? 8080 : 4000;
const baseURLApi = `${hostApi}${portApi ? `:${portApi}` : ``}`;
export default {
hostApi,
portApi,
baseURLApi
};
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<g id="Слой_1">
<rect x="0" y="0" width="13.9" height="30"/>
</g>
<g id="Слой_1__x28_копия_x29_">
<rect x="16.1" y="0" width="13.9" height="30"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<g id="Слой_1">
<rect x="0" y="0" width="8.3" height="30"/>
</g>
<g id="Слой_1__x28_копия_x29_">
<rect x="21.7" y="0" width="8.3" height="30"/>
</g>
<g id="Слой_1__x28_копия2_x29_">
<rect x="10.8" y="0" width="8.3" height="30"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<g id="Слой_1">
<rect x="0" y="0" width="6.2" height="30"/>
</g>
<g id="Слой_1__x28_копия_x29_">
<rect x="23.8" y="0" width="6.2" height="30"/>
</g>
<g id="Слой_1__x28_копия2_x29_">
<rect x="15.9" y="0" width="6.2" height="30"/>
</g>
<g id="Слой_1__x28_копия3_x29_">
<rect x="8" y="0" width="6.2" height="30"/>
</g>
</svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 49.94 49.94" style="enable-background:new 0 0 49.94 49.94;" xml:space="preserve" width="512px" height="512px">
<path d="M48.856,22.73c0.983-0.958,1.33-2.364,0.906-3.671c-0.425-1.307-1.532-2.24-2.892-2.438l-12.092-1.757 c-0.515-0.075-0.96-0.398-1.19-0.865L28.182,3.043c-0.607-1.231-1.839-1.996-3.212-1.996c-1.372,0-2.604,0.765-3.211,1.996 L16.352,14c-0.23,0.467-0.676,0.79-1.191,0.865L3.069,16.622c-1.359,0.197-2.467,1.131-2.892,2.438 c-0.424,1.307-0.077,2.713,0.906,3.671l8.749,8.528c0.373,0.364,0.544,0.888,0.456,1.4L8.224,44.701 c-0.183,1.06,0.095,2.091,0.781,2.904c1.066,1.267,2.927,1.653,4.415,0.871l10.814-5.686c0.452-0.237,1.021-0.235,1.472,0 l10.815,5.686c0.526,0.277,1.087,0.417,1.666,0.417c1.057,0,2.059-0.47,2.748-1.288c0.687-0.813,0.964-1.846,0.781-2.904 l-2.065-12.042c-0.088-0.513,0.083-1.036,0.456-1.4L48.856,22.73z" fill="#363f4e"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 49.94 49.94" style="enable-background:new 0 0 49.94 49.94;" xml:space="preserve" width="512px" height="512px">
<path d="M48.856,22.731c0.983-0.958,1.33-2.364,0.906-3.671c-0.425-1.307-1.532-2.24-2.892-2.438l-12.092-1.757 c-0.515-0.075-0.96-0.398-1.19-0.865L28.182,3.043c-0.607-1.231-1.839-1.996-3.212-1.996c-1.372,0-2.604,0.765-3.211,1.996 L16.352,14c-0.23,0.467-0.676,0.79-1.191,0.865L3.069,16.623C1.71,16.82,0.603,17.753,0.178,19.06 c-0.424,1.307-0.077,2.713,0.906,3.671l8.749,8.528c0.373,0.364,0.544,0.888,0.456,1.4L8.224,44.702 c-0.232,1.353,0.313,2.694,1.424,3.502c1.11,0.809,2.555,0.914,3.772,0.273l10.814-5.686c0.461-0.242,1.011-0.242,1.472,0 l10.815,5.686c0.528,0.278,1.1,0.415,1.669,0.415c0.739,0,1.475-0.231,2.103-0.688c1.111-0.808,1.656-2.149,1.424-3.502 L39.651,32.66c-0.088-0.513,0.083-1.036,0.456-1.4L48.856,22.731z M37.681,32.998l2.065,12.042c0.104,0.606-0.131,1.185-0.629,1.547 c-0.499,0.361-1.12,0.405-1.665,0.121l-10.815-5.687c-0.521-0.273-1.095-0.411-1.667-0.411s-1.145,0.138-1.667,0.412l-10.813,5.686 c-0.547,0.284-1.168,0.24-1.666-0.121c-0.498-0.362-0.732-0.94-0.629-1.547l2.065-12.042c0.199-1.162-0.186-2.348-1.03-3.17 L2.48,21.299c-0.441-0.43-0.591-1.036-0.4-1.621c0.19-0.586,0.667-0.988,1.276-1.077l12.091-1.757 c1.167-0.169,2.176-0.901,2.697-1.959l5.407-10.957c0.272-0.552,0.803-0.881,1.418-0.881c0.616,0,1.146,0.329,1.419,0.881 l5.407,10.957c0.521,1.058,1.529,1.79,2.696,1.959l12.092,1.757c0.609,0.089,1.086,0.491,1.276,1.077 c0.19,0.585,0.041,1.191-0.4,1.621l-8.749,8.528C37.866,30.65,37.481,31.835,37.681,32.998z" fill="#363f4e"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
......@@ -3,14 +3,11 @@ import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux'
import ReduxThunk from 'redux-thunk'
import axios from 'axios';
import App from './components/App';
import config from './config';
import reducers from './reducers';
axios.defaults.baseURL = config.baseURLApi;
axios.defaults.headers.common['Content-Type'] = "application/json";
import * as serviceWorker from './serviceWorker';
const store = createStore(
reducers,
......@@ -18,8 +15,13 @@ const store = createStore(
);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
......
import React from 'react';
import {
Container,
Form,
FormGroup,
Input,
Button,
} from 'reactstrap';
import { Link } from 'react-router-dom';
import s from './ErrorPage.module.scss';
class ErrorPage extends React.Component {
render() {
return (
<div className={s.errorPage}>
<Container>
<div className={`${s.errorContainer} mx-auto`}>
<h1 className={s.errorCode}>404</h1>
<p className={s.errorInfo}>
Opps, it seems that this page does not exist.
</p>
<p className={[s.errorHelp, 'mb-3'].join(' ')}>
If you are sure it should, search for it.
</p>
<Form method="get">
<FormGroup>
<Input className="input-no-border" type="text" placeholder="Search Pages" />
</FormGroup>
<Link to="app/extra/search">
<Button className={s.errorBtn} type="submit" color="inverse">
Search <i className="fa fa-search text-warning ml-xs" />
</Button>
</Link>
</Form>
</div>
<footer className={s.pageFooter}>
2019 &copy; Sing App - React Admin Dashboard Template.
</footer>
</Container>
</div>
);
}
}
export default ErrorPage;
@import '../../styles/app';
.errorPage {
padding-top: 5%;
height: 100vh;
}
.errorContainer {
width: 365px;
text-align: center;
}
.errorBtn {
padding-left: 35px;
padding-right: 35px;
}
.errorCode {
margin: 20px;
font-size: 80px;
font-weight: $font-weight-normal;
color: $gray-800;
@include media-breakpoint-up(md) {
font-size: 180px;
}
}
.errorInfo {
font-size: 20px;
color: $gray-800;
}
.errorHelp {
font-size: 14px;
}
.pageFooter {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
width: 100%;
font-size: $font-size-mini;
color: $text-muted;
text-align: center;
}
{
"name": "error",
"version": "0.0.0",
"private": true,
"main": "./ErrorPage.js"
}
import React from 'react';
import $ from 'jquery';
/* eslint-disable */
import 'imports-loader?jQuery=jquery,this=>window!webpack-raphael/raphael';
import 'imports-loader?jQuery=jquery,this=>window!flot';
import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.resize';
import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.time';
import 'imports-loader?jQuery=jquery,this=>window!jquery.flot.animator/jquery.flot.animator';
import 'imports-loader?jQuery=jquery,this=>window!easy-pie-chart/dist/jquery.easypiechart.js';
import 'imports-loader?jQuery=jquery,this=>window!jquery.flot-orderBars/js/jquery.flot.orderBars';
import 'imports-loader?jQuery=jquery,this=>window!jquery-sparkline';
/* eslint-enable */
import d3 from 'd3';
import nv from 'nvd3';
import Rickshaw from 'rickshaw';
import {
Row, Col, Progress,
} from 'reactstrap';
import FlotBars from './flot/charts/BarsChart';
import Widget from '../../../components/Widget';
import s from './Charts.module.scss';
const FlotChartData = [
{
label: 'Traffic',
data: [[1, 23],
[2, 13],
[3, 33],
[4, 16],
[5, 32],
[6, 28],
[7, 31]],
lines: {
fill: 0.3,
lineWidth: 0,
},
color: ['#fff8e3'],
}, {
label: 'Traffic',
data: [[1, 13],
[2, 8],
[3, 17],
[4, 10],
[5, 17],
[6, 15],
[7, 16]],
lines: {
fill: 0.6,
lineWidth: 0,
},
color: ['#ffebb2'],
}, {
label: 'Traffic',
data: [[1, 20],
[2, 20],
[3, 40],
[4, 30],
[5, 40],
[6, 35],
[7, 47]],
animator: { steps: 60, duration: 1000, start: 0 },
lines: { lineWidth: 2 },
shadowSize: 0,
color: '#ffc247',
},
];
const Morris = window.Morris;
class Charts extends React.Component {
constructor(prop) {
super(prop);
this.onResize = this.onResize.bind(this);
this.state = {
graph: null,
};
}
componentDidMount() {
this.initFlotChart();
this.initEasyPie();
this.initSparklineLine();
this.initSparklinePie();
this.initD3Charts();
this.initMorrisLineChart();
this.initMorrisAreaChart();
this.initRickshaw();
this.initEasyPieChart();
this.initInteractiveSparklines();
this.initSparklineAreaChart();
this.initMorrisDonutCharts();
window.addEventListener('resize', this.onResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResize);
}
onResize() {
this.initFlotChart();
this.initSparklineLine();
this.initD3Charts();
this.initMorrisLineChart();
this.initMorrisAreaChart();
this.initEasyPieChart();
this.initInteractiveSparklines();
this.initSparklineAreaChart();
this.initMorrisDonutCharts();
this.onResizeRickshaw();
this.onResizeFlotChat();
}
onResizeFlotChat() {
const option = {
xaxis: {
tickLength: 0,
tickDecimals: 0,
min: 2,
font: {
lineHeight: 13,
weight: 'bold',
color: '#777',
},
},
yaxis: {
tickDecimals: 0,
tickColor: '#f3f3f3',
font: {
lineHeight: 13,
weight: 'bold',
color: '#eee',
},
},
grid: {
backgroundColor: { colors: ['#fff', '#fff'] },
borderWidth: 1,
borderColor: '#f0f0f0',
margin: 0,
minBorderMargin: 0,
labelMargin: 20,
hoverable: true,
clickable: true,
mouseActiveRadius: 6,
},
legend: false,
};
$.plotAnimator($(this.flotChart), FlotChartData, option);
}
onResizeRickshaw() {
this.state.graph.configure({ height: 130 });
this.state.graph.render();
}
initEasyPie() {
this.$easyPieChart.easyPieChart({
barColor: '#8fe5d4',
trackColor: '#f8f9fa',
scaleColor: false,
lineWidth: 10,
size: 120,
});
}
initSparklineAreaChart() { // eslint-disable-line
this.$sparklineAreaChart.sparkline([2, 4, 6, 2, 7, 5, 3, 7, 8, 3, 6], {
width: '100%',
fillColor: '#e2e1ff',
height: '100px',
lineColor: 'transparent',
spotColor: '#b7b3ff',
minSpotColor: null,
maxSpotColor: null,
highlightSpotColor: '#ffebb2',
highlightLineColor: '#ffebb2',
}).sparkline([5, 3, 7, 8, 3, 6, 2, 4, 6, 2, 7], {
composite: true,
lineColor: 'transparent',
spotColor: '#b7b3ff',
fillColor: '#b7b3ff',
minSpotColor: null,
maxSpotColor: null,
highlightSpotColor: '#b7b3ff',
highlightLineColor: '#b7b3ff',
});
}
initSparklineLine() {
this.$sparklineLineChart.sparkline([1, 2, 4, 2, 3, 7], {
width: '100%',
height: '100px',
lineColor: '#ffc247',
fillColor: false,
highlightLineColor: '#8fe5d4',
spotColor: '#8fe5d4',
minSpotColor: '#ffc247',
maxSpotColor: '#ffc247',
spotRadius: 2,
lineWidth: 2,
});
}
initD3Charts() {
const streamLayers = (n, m, o) => {
if (arguments.length < 3) {
o = 0; //eslint-disable-line
}
const bump = (a) => {
const x = 1 / (0.1 + Math.random());
const y = (2 * Math.random()) - 0.5;
const z = 10 / (0.1 + Math.random());
for (let i = 0; i < m; i += 1) {
const w = ((i / m) - y) * z;
a[i] += x * Math.exp(-w * w);
}
};
return d3.range(n).map(() => {
const a = [];
let i;
for (i = 0; i < m; i += 1) {
a[i] = o + (o * Math.random());
}
for (i = 0; i < 5; i += 1) {
bump(a);
}
return a.map((d, iItem) => ({ x: iItem, y: Math.max(0, d) }));
});
};
const testData = (streamNames, pointCount) => {
const now = new Date().getTime();
const day = 1000 * 60 * 60 * 24; // milliseconds
const daysAgoCount = 60;
const daysAgo = daysAgoCount * day;
const daysAgoDate = now - daysAgo;
const pointsCount = pointCount || 45; // less for better performance
const daysPerPoint = daysAgoCount / pointsCount;
return streamLayers(streamNames.length, pointsCount, 0.1).map((data, i) => ({
key: streamNames[i],
values: data.map(d => ({
x: daysAgoDate + (d.x * day * daysPerPoint),
y: Math.floor(d.y * 100), // just a coefficient,
})),
yAxis: i + 1,
type: 'line',
}));
};
nv.addGraph(() => {
const chart = nv.models.lineChart()
.useInteractiveGuideline(true)
.margin({ left: 28, bottom: 30, right: 0 })
.color(['#ffd7de', '#e2e1ff'])
.showLegend(true);
chart.xAxis
.showMaxMin(false)
.tickFormat(d => d3.time.format('%b %d')(new Date(d)));
chart.yAxis
.showMaxMin(false)
.tickFormat(d3.format(',f'));
const chartData = testData(['Search', 'Referral'], 50);
d3.select(this.nvd3ChartLineSvg)
.style('height', '300px')
.datum(chartData.map((el) => {
el.area = true;
return el;
}))
.call(chart);
return chart;
});
nv.addGraph(() => {
const bar = nv.models.multiBarChart()
.margin({ left: 28, bottom: 30, right: 0 })
.color(['#8fe5d4', '#ffd7de']);
bar.xAxis
.showMaxMin(false)
.tickFormat(d => d3.time.format('%b %d')(new Date(d)));
bar.yAxis
.showMaxMin(false)
.tickFormat(d3.format(',f'));
const barData = testData(['Uploads', 'Downloads'], 10).map((el) => {
el.area = true;
return el;
});
d3.select(this.nvd3ChartBarSvg)
.style('height', '300px')
.datum(barData.map((el) => {
el.area = true;
return el;
}))
.call(bar);
return bar;
});
}
initMorrisDonutCharts() {
$(this.morrisDonutChart).html('');
Morris.Donut({
element: this.morrisDonutChart,
colors: ['#ffd7de', '#ffebb2'],
data: [
{ label: 'Download Sales', value: 12 },
{ label: 'In-Store Sales', value: 30 },
],
});
}
initMorrisLineChart() {
$(this.morrisLineChart).html('');
Morris.Line({
element: this.morrisLineChart,
resize: true,
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 },
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
lineColors: ['#8fe5d4', '#ffebb2'],
});
}
initMorrisAreaChart() {
$(this.morrisAreaChart).html('');
Morris.Area({
element: this.morrisAreaChart,
resize: true,
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 },
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
lineColors: ['#f59f9f', '#f55d5d'],
lineWidth: 0,
});
}
initFlotChart() {
const option = {
series: {
lines: {
show: true,
lineWidth: 1,
fill: false,
fillColor: { colors: [{ opacity: 0.001 }, { opacity: 0.5 }] },
},
points: {
show: false,
fill: true,
},
shadowSize: 0,
},
legend: false,
grid: {
show: false,
margin: 0,
labelMargin: 0,
axisMargin: 0,
hoverable: true,
clickable: true,
tickColor: 'rgba(255,255,255,1)',
borderWidth: 0,
},
};
$(this.flotChart).plot(FlotChartData, option);
this.onResizeFlotChat();
}
initFlotBarChart() {
const barCustomised1 = [
[1388534400000, 120],
[1391212800000, 70],
[1393632000000, 100],
[1396310400000, 60],
[1398902400000, 35],
];
const barCustomised2 = [
[1388534400000, 90],
[1391212800000, 60],
[1393632000000, 30],
[1396310400000, 73],
[1398902400000, 30],
];
const barCustomised3 = [
[1388534400000, 80],
[1391212800000, 40],
[1393632000000, 47],
[1396310400000, 22],
[1398902400000, 24],
];
const flotBarsData = [
{
label: 'Apple',
data: barCustomised1,
bars: {
show: true,
barWidth: 12 * 24 * 60 * 60 * 300,
fill: true,
lineWidth: 0,
order: 1,
},
},
{
label: 'Google',
data: barCustomised2,
bars: {
show: true,
barWidth: 12 * 24 * 60 * 60 * 300,
fill: true,
lineWidth: 0,
order: 2,
},
},
{
label: 'Facebook',
data: barCustomised3,
bars: {
show: true,
barWidth: 12 * 24 * 60 * 60 * 300,
fill: true,
lineWidth: 0,
order: 3,
},
},
];
const flotBarsOptions = {
series: {
bars: {
show: true,
barWidth: 12 * 24 * 60 * 60 * 350,
lineWidth: 0,
order: 1,
fillColor: {
colors: [{
opacity: 1,
}, {
opacity: 0.7,
}],
},
},
},
xaxis: {
mode: 'time',
min: 1387497600000,
max: 1400112000000,
tickLength: 0,
tickSize: [1, 'month'],
axisLabel: 'Month',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 13,
axisLabelPadding: 15,
},
yaxis: {
axisLabel: 'Value',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 13,
axisLabelPadding: 5,
},
grid: {
hoverable: true,
borderWidth: 0,
},
legend: {
backgroundColor: 'transparent',
labelBoxBorderColor: 'none',
},
colors: ['#64bd63', '#f0b518', '#F7653F'],
};
$(this.flotBarChart).plot(flotBarsData, flotBarsOptions);
}
initEasyPieChart() {
$(this.easyPieChart).easyPieChart({
barColor: '#5dc4bf',
trackColor: '#ddd',
scaleColor: false,
lineWidth: 10,
size: 120,
});
}
initSparklinePie() {
const data = [2, 4, 6];
const option = {
type: 'pie',
width: '100px',
height: '100px',
sliceColors: ['#b7b3ff', '#ffebb2', '#f8f9fa'],
};
$(this.sparklinePie).sparkline(data, option);
}
initSparklineComposite() {
const data = [
[2, 4, 6, 2, 7, 5, 3, 7, 8, 3, 6],
[5, 3, 7, 8, 3, 6, 2, 4, 6, 2, 7],
];
const option = [{
width: '99%',
fillColor: '#ddd',
height: '100px',
lineColor: 'transparent',
spotColor: '#c0d0f0',
minSpotColor: null,
maxSpotColor: null,
highlightSpotColor: '#ddd',
highlightLineColor: '#ddd',
}, {
lineColor: 'transparent',
spotColor: '#c0d0f0',
fillColor: 'rgba(192, 208, 240, 0.76)',
minSpotColor: null,
maxSpotColor: null,
highlightSpotColor: '#ddd',
highlightLineColor: '#ddd',
}];
$(this.sparklineComposite).sparkline(data[0], option[0]);
$(this.sparklineComposite).sparkline(data[1], $.extend({ composite: true }, option[1]));
}
initInteractiveSparklines() {
const data = [9, 12, 14, 15, 10, 14, 20];
const option = { type: 'bar', barColor: '#FFC247', height: '30px', barWidth: 6, barSpacing: 2 };
const option2 = { type: 'bar', barColor: '#FFF8E3', height: '30px', barWidth: 6, barSpacing: 2 };
$(this.InteractiveSparkline1).sparkline(data, option);
$(this.InteractiveSparkline2).sparkline(data, option2);
}
initRickshaw() {
const seriesData = [[], []];
const random = new Rickshaw.Fixtures.RandomData(30);
for (let i = 0; i < 30; i += 1) {
random.addData(seriesData);
}
// eslint-disable-next-line
this.state.graph = new Rickshaw.Graph({
element: this.rickshawChart,
height: 130,
series: [
{
color: '#ffebb2',
data: seriesData[0],
name: 'Uploads',
}, {
color: '#fff8e3',
data: seriesData[1],
name: 'Downloads',
},
],
});
const hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: this.state.graph,
xFormatter: x => new Date(x * 1000).toString(),
});
hoverDetail.show();
setInterval(() => {
random.removeData(seriesData);
random.addData(seriesData);
this.state.graph.update();
}, 1000);
this.state.graph.render();
}
render() {
return (
<div className={s.root}>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">Charts</li>
</ol>
<h1 className="page-title">Visual - <span className="fw-semi-bold">Charts</span></h1>
<div>
<Row>
<Col lg={6} xl={5} xs={12}>
<Widget
title={<h5>Flot <span className="fw-semi-bold">Charts</span></h5>}
close collapse
>
<div>
<div className="mt mb" id="flotChart" ref={(r) => { this.flotChart = r; }} style={{ width: '100%', height: '260px' }} />
<div className="chart-tooltip" id="flot-main-tooltip" style={{ opacity: 0 }} />
<p className="fs-mini text-muted">
Flot is a <span className="fw-semi-bold">pure</span> JavaScript plotting library for jQuery, with a
focus on simple usage, attractive looks and interactive features.
</p>
<h5 className="mt">Interactive <span className="fw-semi-bold">Sparklines</span></h5>
<Row className="mt">
<Col md={6} xs={12}>
<div className="stats-row">
<div className="stat-item">
<p className="value5 fw-thin">34 567</p>
<h6 className="name text-muted m-0 fs-mini">Overall Values</h6>
</div>
<div className="stat-item stat-item-mini-chart">
<div className="sparkline" ref={(r) => { this.InteractiveSparkline1 = r; }} />
</div>
</div>
</Col>
<Col md={6} xs={12}>
<div className="stats-row">
<div className="stat-item">
<p className="value5 fw-thin">34 567</p>
<h6 className="name text-muted m-0 fs-mini">Overall Values</h6>
</div>
<div className="stat-item stat-item-mini-chart">
<div className="sparkline" ref={(r) => { this.InteractiveSparkline2 = r; }} />
</div>
</div>
</Col>
</Row>
<p className="fs-mini text-muted">
This jQuery plugin generates sparklines (small inline charts) directly in the browser using
data supplied either inline in the HTML, or via javascript.
</p>
</div>
</Widget>
</Col>
<Col lg={6} xl={7} xs={12}>
<Row>
<Col xs={12} lg={7}>
<Widget
title={<h5> Easy <span className="fw-semi-bold">Pie Charts</span></h5>}
collapse close
>
<div>
<div ref={(r) => { this.$easyPieChart = $(r); }} className="mb text-center" data-percent="47" />
<p className="fs-mini text-muted">
Easy pie chart is a jQuery plugin that uses the canvas element to render
simple pie charts for single values. These charts are highly customizable,
very easy to implement, scale to the resolution of the display of the client
to provide sharp charts even on retina displays.
</p>
</div>
</Widget>
</Col>
<Col xs={12} lg={5}>
<Widget
title={<h5> Sparkline <span className="fw-semi-bold">Pie Charts</span></h5>}
collapse close
>
<div>
<p className="fs-mini text-muted">
Each example displayed below takes just 1 line of HTML or javascript to generate.
</p>
<div ref={(r) => { this.sparklinePie = r; }} className="chart-overflow-bottom mb-0 text-center" />
<p className="fs-mini text-muted">
Nevertheless Sparkline charts can be configured quite accurate.
</p>
</div>
</Widget>
</Col>
<Col xs={12}>
<Widget
title={<h5> Sparkline <span className="fw-semi-bold">Line Charts</span></h5>}
collapse close
>
<div>
<div ref={(r) => { this.$sparklineLineChart = $(r); }} className="chart-overflow-bottom mb-0 text-center" />
</div>
</Widget>
</Col>
</Row>
</Col>
<Col xs={12}>
<Widget
title={<h5><span className="fw-semi-bold">D3</span> Charts</h5>}
close
>
<div>
<p className="fs-mini text-muted">
This project is an attempt to build re-usable charts and chart components for <span
className="fw-semi-bold"
>d3.js</span> without
taking away the power that d3.js gives you.
</p>
<div>
<svg ref={(r) => { this.nvd3ChartLineSvg = r; }} />
</div>
</div>
</Widget>
</Col>
<Col lg={7} xs={12}>
<Widget
title={<h5><span className="fw-semi-bold">D3</span> Charts</h5>}
close
>
<div>
<p className="fs-mini text-muted">
This is a very young collection of components, with the goal of keeping these components
very customizeable.
</p>
<div>
<svg ref={(r) => { this.nvd3ChartBarSvg = r; }} />
</div>
</div>
</Widget>
</Col>
<Col lg={5} xs={12}>
<Widget
title={<h5> Realtime <span className="fw-semi-bold">Rickshaw</span></h5>}
collapse close
>
<div>
<p className="fs-mini text-muted mb-lg">
Rickshaw provides the elements you need to create interactive graphs: renderers, legends,
hovers, range selectors, etc. You put the pieces together.
It&apos;s all based on <span className="fw-semi-bold">d3</span> underneath, so graphs are drawn with
standard
SVG and styled with CSS.
Customize all you like with techniques you already know.
</p>
<h5>720 Users</h5>
<Progress value="60" color="gray" size="xs" className="mb-sm progress-xs" />
<p className="fs-mini text-muted mb-lg">
<span className="circle bg-warning-light text-white">
<i className="fa fa-circle" />
</span>
&nbsp;
Target <span className="fw-semi-bold">820</span> users
is <span className="fw-semi-bold">96%</span> reached.
</p>
<div ref={(r) => { this.rickshawChart = r; }} className="chart-overflow-bottom" style={{ height: '130px' }} />
</div>
</Widget>
</Col>
</Row>
<Row>
<Col lg={6} xs={12}>
<Widget
title={<h5> Morris <span className="fw-semi-bold">Area Charts</span></h5>}
close collapse
>
<div>
<p className="fs-mini text-muted">
Good-looking charts shouldn&apos;t be difficult.
The public API is terribly simple. It&apos;s just one function: <code>Morris.Line(options)</code>,
where options is an object containing some of the following configuration options.
</p>
<div className="text-center" ref={(r) => { this.morrisAreaChart = r; }} style={{ height: '343px' }} />
</div>
</Widget>
</Col>
<Col lg={6} xs={12}>
<Widget
title={<h5> Morris <span className="fw-semi-bold">Line Charts</span></h5>}
close collapse
>
<div>
<p className="fs-mini text-muted">
Good-looking charts shouldn&apos;t be difficult.
The public API is terribly simple. It&apos;s just one function: <code>Morris.Line(options)</code>,
where options is an object containing some of the following configuration options.
</p>
<div className="text-center" ref={(r) => { this.morrisLineChart = r; }} style={{ height: '343px' }} />
</div>
</Widget>
</Col>
</Row>
<Row>
<Col xs={12} lg={6} xl={3}>
<Widget
title={<h5>Area <span className="fw-semi-bold">Sparkline</span></h5>}
close collapse
>
<p className="fs-mini text-muted">Each example displayed below takes just 1 line of HTML or javascript to generate.</p>
<div className="stats-row text-muted mt">
<div className="stat-item">
<h6 className="name">Overall Growth</h6>
<p className="value">43.75%</p>
</div>
<div className="stat-item">
<h6 className="name">Montly</h6>
<p className="value">86.34%</p>
</div>
</div>
<p className="text-muted fs-mini">
<span className="fw-semi-bold">17% higher</span> than last month
</p>
<div className="chart-overflow-bottom" ref={(r) => { this.$sparklineAreaChart = $(r); }} />
</Widget>
</Col>
<Col lg={6} xl={6} xs={12}>
<Widget
title={<h5> Flot <span className="fw-semi-bold">Bars</span></h5>}
close collapse
>
<div>
<FlotBars />
<p className="fs-mini text-muted">
Flot is a <span className="fw-semi-bold">pure</span> JavaScript plotting library for jQuery, with a
focus on simple usage, attractive looks and interactive features.
</p>
</div>
</Widget>
</Col>
<Col lg={6} xl={3} xs={12}>
<Widget
title={<h5> Morris <span className="fw-semi-bold">Donut Charts</span></h5>}
close collapse
>
<div>
<div className="text-center" ref={(r) => { this.morrisDonutChart = r; }} style={{ height: '180px' }} />
<p className="fs-mini text-muted">
Donuts a great for representing some parted information like traffice sources,
disk partitions, etc.
This really couldn&apos;t be easier. Create a Donut chart using <code>Morris.Donut(options)</code>,
with only few options.
</p>
</div>
</Widget>
</Col>
</Row>
</div>
</div>
);
}
}
export default Charts;
import React from 'react';
import {
Breadcrumb,
BreadcrumbItem,
Row,
Col,
Table,
Button,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
const tableData = [
{
id: 0,
state: 'Success',
usage: ['text-success', 'btn-success'],
},
{
id: 1,
state: 'Warning',
usage: ['badge-warning', 'bg-warning'],
},
{
id: 2,
state: 'Danger',
usage: ['btn-danger', 'text-danger'],
},
{
id: 3,
state: 'Info',
usage: ['alert-info', 'badge-info'],
},
{
id: 4,
state: 'Primary',
usage: ['bg-primary', 'text-primary'],
},
{
id: 5,
state: 'Secondary',
usage: ['bg-secondary'],
},
];
const Colors = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>Colors</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Colors</h1>
<Row>
<Col>
<Widget
title={<h5>States <span className="fw-semi-bold">Colors</span></h5>}
close collapse
>
<p>Sing comes with a number of state colors that can be applied to
the most of elements and components. It reuses Bootstrap&apos;s original 6 states:</p>
<Table>
<thead>
<tr>
<th>STATE</th>
<th>PREVIEW</th>
<th>CLASS POSTFIX</th>
<th>USAGE EXAMPLE</th>
</tr>
</thead>
<tbody>
{tableData.map(({ state, usage, id }) =>
<tr key={id}>
<th scope="row" className="fw-thin">{state}</th>
<td><span className={`circle bg-${state.toLowerCase()}`}>&nbsp;</span></td>
<td><code>*-{state.toLowerCase()}</code></td>
<td>{usage.map(item => <code key={item} className="mr-xs">{item}</code>)}</td>
</tr>,
)}
</tbody>
</Table>
</Widget>
</Col>
</Row>
<Row>
<Col xs={12} md={6}>
<Widget
title={<h5>Text <span className="fw-semi-bold">Colors</span></h5>}
close collapse
>
<p>Convey meaning through color with a handful of color utility classes.
Includes support for styling links with hover states, too. Use <code>text-*</code> class to fill text.</p>
<div className="widget-padding-md border rounded w-100 h-100 text-left">
<h1 className="text-danger">h1. Heading</h1>
<h2 className="text-warning">h2. Heading</h2>
<h3 className="text-success">h3. Heading</h3>
<h4 className="text-primary">h4. Heading</h4>
<h5 className="text-info">h5. Heading</h5>
<h6 className="text-inverse">h6. Heading</h6>
</div>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Example <span className="fw-semi-bold">Buttons</span></h5>}
close collapse
>
<p>Use any of the available button classes to quickly create a styled button.
Semantically distinguishable beauty.</p>
<Button className="width-100 mb-xs mr-xs" color="default">Default</Button>
<Button className="width-100 mb-xs mr-xs" color="primary">Primary</Button>
<Button className="width-100 mb-xs mr-xs" color="info">Info</Button>
<Button className="width-100 mb-xs mr-xs" color="success">Success</Button>
<Button className="width-100 mb-xs mr-xs" color="warning">Warning</Button>
<Button className="width-100 mb-xs mr-xs" color="danger">Danger</Button>
<Button className="width-100 mb-xs mr-xs" color="gray">Gray</Button>
<Button className="width-100 mb-xs mr-xs" color="inverse">Inverse</Button>
</Widget>
</Col>
</Row>
</div>
);
export default Colors;
{
"name": "Colors",
"version": "0.0.0",
"main": "./Colors.js",
"private": true
}
import React from 'react';
import {
Breadcrumb,
BreadcrumbItem,
Row,
Col,
Table,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
const Typography = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>Grid</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Grid <span className="fw-semi-bold">System</span></h1>
<Row>
<Col xs={12} md={6}>
<Widget
title={<h5><span className="fw-semi-bold">How</span> it works</h5>}
close collapse
>
<p>
Bootstrap’s grid system uses a series of containers, rows, and columns to layout
and align content. It’s built with flexbox and is fully responsive. Below is an
example and an in-depth look at how the grid comes together.
</p>
<div className="bg-light p-3">
<Row className="mb-lg">
<Col xs={4}>
<div className="py-4 bg-primary text-center text-white">
One of three columns
</div>
</Col>
<Col xs={4}>
<div className="py-4 bg-primary text-center text-white">
One of three columns
</div>
</Col>
<Col xs={4}>
<div className="py-4 bg-primary text-center text-white">
One of three columns
</div>
</Col>
</Row>
<pre className="bg-light border-0 w-100 h-100">
<code className="text-danger">{'<Container>\n'}</code>
<code className="text-success">{' <Row>\n'}</code>
<code className="text-info">{' <Col xs={4}>\n'}</code>
<code>{' One of three columns\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-info">{' <Col xs={4}>\n'}</code>
<code>{' One of three columns\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-info">{' <Col xs={4}>\n'}</code>
<code>{' One of three columns\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-success">{' </Row>\n'}</code>
<code className="text-danger">{'</Container>'}</code>
</pre>
</div>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5><span className="fw-semi-bold">Equal</span> width</h5>}
close collapse
>
<p>
For example, here are two grid layouts that apply to every device and viewport,
from xs to xl. Add any number of unit-less classes for each breakpoint you
need and every column will be the same width.
</p>
<div className="bg-light p-3">
<Row className="mb-lg">
<Col>
<div className="py-4 bg-primary text-center text-white">
1 of 2
</div>
</Col>
<Col>
<div className="py-4 bg-primary text-center text-white">
2 of 2
</div>
</Col>
</Row>
<pre className="bg-light border-0 w-100 h-100">
<code className="text-danger">{'<Container>\n'}</code>
<code className="text-success">{' <Row>\n'}</code>
<code className="text-info">{' <Col>\n'}</code>
<code>{' 1 of 2\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-info">{' <Col>\n'}</code>
<code>{' 1 of 2\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-success">{' </Row>\n'}</code>
<code className="text-danger">{'</Container>'}</code>
</pre>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col>
<Widget
title={<h5><span className="fw-semi-bold">Grid</span> options</h5>}
close collapse
>
<p>
While Bootstrap uses <code>em</code>s or <code>rem</code>s for defining
most sizes, <code>px</code>s are used for
grid breakpoints and container widths. This is because the viewport width is in
pixels and does not change with the font size. See how aspects of the Bootstrap grid
system work across multiple devices with a handy table.
</p>
<Table striped responsive>
<thead>
<tr>
<th />
<th className="text-center">
Extra small<br />
<small>&lt;576px</small>
</th>
<th className="text-center">
Small<br />
<small>≥576px</small>
</th>
<th className="text-center">
Medium<br />
<small>≥768px</small>
</th>
<th className="text-center">
Large<br />
<small>≥992px</small>
</th>
<th className="text-center">
Extra large<br />
<small>≥1200px</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<th className="text-nowrap" scope="row">Max container width</th>
<td>None (auto)</td>
<td>540px</td>
<td>720px</td>
<td>960px</td>
<td>1140px</td>
</tr>
<tr>
<th className="text-nowrap" scope="row">Component property</th>
<td><code>{'<Col xs={}>'}</code></td>
<td><code>{'<Col sm={}>'}</code></td>
<td><code>{'<Col md={}>'}</code></td>
<td><code>{'<Col lg={}>'}</code></td>
<td><code>{'<Col xl={}>'}</code></td>
</tr>
<tr>
<th className="text-nowrap" scope="row"># of columns</th>
<td colSpan="5">12</td>
</tr>
<tr>
<th className="text-nowrap" scope="row">Gutter width</th>
<td colSpan="5">30px (15px on each side of a column)</td>
</tr>
<tr>
<th className="text-nowrap" scope="row">Nestable</th>
<td colSpan="5">Yes</td>
</tr>
<tr>
<th className="text-nowrap" scope="row">Column ordering</th>
<td colSpan="5">Yes</td>
</tr>
</tbody>
</Table>
</Widget>
</Col>
</Row>
<Row>
<Col xs={12} md={6}>
<Widget
title={<h5>Vertical <span className="fw-semi-bold">Alignment</span></h5>}
close collapse
>
<p>Use flexbox alignment utilities to vertically and horizontally align columns.</p>
<div className="bg-light p-3">
<Row className="mb-lg" style={{ height: '150px' }}>
<Col className="align-self-start">
<div className="py-4 bg-primary text-center text-white">
Start
</div>
</Col>
<Col className="align-self-center">
<div className="py-4 bg-primary text-center text-white">
Center
</div>
</Col>
<Col className="align-self-end">
<div className="py-4 bg-primary text-center text-white">
End
</div>
</Col>
</Row>
<pre className="bg-light border-0 w-100 h-100">
<code className="text-danger">{'<Container>\n'}</code>
<code className="text-success">{' <Row>\n'}</code>
<code className="text-info">{' <Col className="align-self-start">\n'}</code>
<code>{' Start\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-info">{' <Col className="align-self-center">\n'}</code>
<code>{' Center\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-info">{' <Col className="align-self-end">\n'}</code>
<code>{' End\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-success">{' </Row>\n'}</code>
<code className="text-danger">{'</Container>'}</code>
</pre>
</div>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Vertical <span className="fw-semi-bold">Alignment</span></h5>}
close collapse
>
<p>Use flexbox alignment utilities to vertically and horizontally align columns.</p>
<div className="bg-light p-3">
<Row className="mb-lg justify-content-end">
<Col xs={3}>
<div className="py-4 bg-primary text-center text-white">
1
</div>
</Col>
<Col xs={3}>
<div className="py-4 bg-primary text-center text-white">
2
</div>
</Col>
</Row>
<Row className="mb-lg justify-content-around">
<Col xs={3}>
<div className="py-4 bg-primary text-center text-white">
1
</div>
</Col>
<Col xs={3}>
<div className="py-4 bg-primary text-center text-white">
2
</div>
</Col>
</Row>
<Row className="mb-lg justify-content-between">
<Col xs={3}>
<div className="py-4 bg-primary text-center text-white">
1
</div>
</Col>
<Col xs={3}>
<div className="py-4 bg-primary text-center text-white">
2
</div>
</Col>
<Col xs={3}>
<div className="py-4 bg-primary text-center text-white">
3
</div>
</Col>
</Row>
<pre className="bg-light border-0 w-100 h-100">
<code className="text-danger">{'<Container>\n'}</code>
<code className="text-success">{' <Row className="justify-content-end">\n'}</code>
<code className="text-info">{' <Col>\n'}</code>
<code>{' 1\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-info">{' <Col>\n'}</code>
<code>{' 2\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-success">{' </Row>\n'}</code>
<code className="text-success">{' <Row className="justify-content-around">\n'}</code>
<code className="text-info">{' <Col>\n'}</code>
<code>{' 1\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-info">{' <Col>\n'}</code>
<code>{' 2\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-success">{' </Row>\n'}</code>
<code className="text-success">{' <Row className="justify-content-between">\n'}</code>
<code className="text-info">{' <Col>\n'}</code>
<code>{' 1\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-info">{' <Col>\n'}</code>
<code>{' 2\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-info">{' <Col>\n'}</code>
<code>{' 3\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-success">{' </Row>\n'}</code>
<code className="text-danger">{'</Container>'}</code>
</pre>
</div>
</Widget>
</Col>
</Row>
</div>
);
export default Typography;
{
"name": "Grid",
"version": "0.0.0",
"main": "./Grid.js",
"private": true
}
import React from 'react';
import {
Breadcrumb,
BreadcrumbItem,
Row,
Col,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
const Typography = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>Typography</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Typography - <span className="fw-semi-bold">Texts & Display</span></h1>
<Row>
<Col xs={12} md={6}>
<Widget
title={<h5>Headings <small className="text-muted">Default and customized</small></h5>}
close collapse
>
<h4>Default headings</h4>
<p>Basic headings for everyday use</p>
<div className="widget-padding-md w-100 h-100 text-left border rounded">
<Row>
<Col sm={6}>
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
</Col>
<Col sm={6}>
<h1 className="text-danger">h1. Heading</h1>
<h2 className="text-warning">h2. Heading</h2>
<h3 className="text-success">h3. Heading</h3>
<h4 className="text-primary">h4. Heading</h4>
<h5 className="text-info">h5. Heading</h5>
<h6 className="text-inverse">h6. Heading</h6>
</Col>
</Row>
</div>
<h4 className="mt-5">Customized headings</h4>
<p>Enhanced with additional text</p>
<div className="widget-padding-md w-100 h-100 text-left border rounded">
<h3>
Headings <small>And some clarification text</small>
</h3>
</div>
<h4 className="mt-5">Display</h4>
<p>Headings to stand out</p>
<div className="widget-padding-md w-100 h-100 text-left border rounded">
<h1 className="display-1">Display 1</h1>
<h1 className="display-2">Display 2</h1>
<h1 className="display-3">Display 3</h1>
<h1 className="display-4">Display 4</h1>
</div>
<h4 className="mt-5">Lead</h4>
<p>Make a paragraph stand out by adding <code className="highlighter-rouge">.lead</code>.</p>
<div className="widget-padding-md w-100 h-100 text-left border rounded">
<p className="lead">Sing App is admin dashboard template built with Bootstrap</p>
</div>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Body texts <small className="text-muted">Variations</small></h5>}
close collapse
>
<h4>Basic texts</h4>
<p>Styling for common texts</p>
<div className="widget-padding-md w-100 h-100 text-left border rounded">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><em>This line rendered as italicized text.</em></p>
<p><strong>This line rendered as bold text.</strong></p>
</div>
<h4 className="mt-5">Font weights</h4>
<p>Various font weights supported</p>
<div className="widget-padding-md w-100 h-100 text-left border rounded">
<p>Thin (default) font weight</p>
<p className="fw-normal">Normal font weight</p>
<p className="fw-semi-bold">Semi bold to empasize important thing</p>
<p className="fw-bold">Bold font as a high priority</p>
</div>
<h4 className="mt-5">Colors</h4>
<p>Bootstrap state colors can be applied to texts too</p>
<div className="widget-padding-md w-100 h-100 text-left border rounded">
<p className="text-danger">Some danger text</p>
<p className="text-warning">Some warning text</p>
<p className="text-success">Some succes text</p>
<p className="text-primary">Some primary text</p>
<p className="text-info">Some info text</p>
</div>
<h4 className="mt-5">Blockquotes</h4>
<p>Citing someone is really easy</p>
<div className="widget-padding-md w-100 h-100 text-left border rounded">
<blockquote className="blockquote">
<p>Don&apos;t get set into one form, adapt it and build your own, and let
it grow, be like water. Empty your mind, be formless, shapeless — like water.
Now you put water in a cup, it becomes the cup; You put water into a bottle it
becomes the bottle; You put it in a teapot it becomes the teapot. Now water can
flow or it can crash. Be water, my friend.</p>
<footer className="blockquote-footer">Bruce Lee in <cite title="A Warrior's Journey">A Warrior&apos;s Journey</cite></footer>
</blockquote>
</div>
</Widget>
</Col>
</Row>
</div>
);
export default Typography;
{
"name": "Typography",
"version": "0.0.0",
"main": "./Typography.js",
"private": true
}
import React, { Component } from 'react';
import cx from 'classnames';
import {
Breadcrumb,
BreadcrumbItem,
Alert,
} from 'reactstrap';
import Filters from './components/Filters/Filters';
import MessageTable from './components/MessageTable/MessageTable';
import s from './Email.module.scss';
class Email extends Component {
state = {
isNotificationOpen: true,
filter: null,
openedMessage: null,
compose: false,
composeData: null,
alertAfter: false,
}
componentDidMount() {
setTimeout(() => { this.fixAlert(); }, 0);
}
fixAlert() {
this.setState({ alertAfter: true });
}
filter = (filter) => {
this.setState({ filter, compose: false, composeData: null });
}
closeNotification() {
this.setState({ isNotificationOpen: false });
}
openMessage = (id) => {
this.setState(pvState => ({
openedMessage: id,
compose: id === null ? false : pvState.compose,
composeData: id === null ? null : pvState.composeData,
}));
}
changeCompose = (compose, data) => {
this.setState({ compose });
if (data) {
this.setState({ composeData: data });
}
}
render() {
const {
isNotificationOpen,
filter,
openedMessage,
alertAfter,
compose,
composeData,
} = this.state;
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>Email</BreadcrumbItem>
</Breadcrumb>
<div className="page-top-line">
<h1 className="page-title">Email - <span className="fw-semi-bold">Inbox</span></h1>
<Alert
isOpen={isNotificationOpen}
color="success"
toggle={() => this.closeNotification()}
className={cx(s.alert, { [s.alertAfter]: alertAfter })}
>
Hey! This is a <span className="fw-semi-bold">real app</span> with CRUD and Search functions. Have fun!
</Alert>
</div>
<div className={s.view}>
<Filters
filter={this.filter}
openMessage={this.openMessage}
compose={this.changeCompose}
/>
<MessageTable
filter={filter}
openedMessage={openedMessage}
openMessage={this.openMessage}
compose={compose}
changeCompose={this.changeCompose}
composeData={composeData}
/>
</div>
</div>
);
}
}
export default Email;
.view {
display: flex;
@media screen and (max-width: 1125px) {
flex-direction: column;
}
}
.alert {
transition: 0.6s;
transition-timing-function: ease;
transform: translateX(-130vw);
}
.alertAfter {
transform: translateX(0);
}
import React from 'react';
import PropTypes from 'prop-types';
import { Editor } from 'react-draft-wysiwyg';
import { Input, Button } from 'reactstrap';
import Widget from '../../../../../components/Widget';
import s from './Compose.module.scss';
const Compose = ({ data }) => (
<Widget>
<div className={s.compose}>
<h4>Compose <span className="fw-semi-bold">New</span></h4>
<Input type="text" placeholder="To" defaultValue={data && data.from} />
<Input type="text" placeholder="Subject" defaultValue={data && data.theme} />
<Editor
wrapperClassName={s.wysiwygWrapper}
editorClassName={s.wysiwygEditor}
toolbarClassName={s.wysiwygToolbar}
/>
<div className="text-md-right mt-xs">
<Button color="gray">Discard</Button>
<Button color="gray">Save</Button>
<Button color="danger">Send</Button>
</div>
</div>
</Widget>
);
Compose.propTypes = {
data: PropTypes.shape({
from: PropTypes.string,
to: PropTypes.string,
}),
};
Compose.defaultProps = {
data: {
from: null,
to: null,
},
};
export default Compose;
@import '../../../../../styles/app';
:global {
@import '../../../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg';
}
.compose {
h4 {
margin-bottom: 20px;
}
input {
margin-bottom: 15px;
}
button {
margin-left: 7.5px;
}
}
.wysiwygWrapper {
border: 1px solid #ccc !important;
overflow: visible;
height: 270px;
margin-bottom: 15px;
}
.wysiwygToolbar {
color: $gray-800 !important;
background-color: #ddd !important;
border-color: transparent !important;
:global {
.rdw-option-wrapper {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
height: 30px;
min-width: 30px;
margin: 0;
background: #f8f8f8;
}
.rdw-dropdown-wrapper {
background: #f8f8f8;
}
}
}
.wysiwygEditor {
position: relative !important;
overflow: hidden !important;
height: 150px;
line-height: 0.1;
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { Badge } from 'reactstrap';
import s from './Filters.module.scss';
class Filters extends Component {
state = { activeButtonId: 0 }
handleButtonClick(id, filterCond) {
const { filter, openMessage } = this.props;
this.setState({ activeButtonId: id });
openMessage(null);
filter(filterCond);
}
render() {
const mainButtons = [
{ id: 0, title: 'Inbox', notifications: 2, filter: null },
{ id: 1, title: 'Starred', filter: 'starred' },
{ id: 2, title: 'Sent Mail', filter: 'sent' },
{ id: 3, title: 'Draft', notifications: 3, lable: 'danger', filter: 'draft' },
{ id: 4, title: 'Trash', filter: 'trash' },
];
const quickViewButton = [
{ id: 0, title: 'Work', colour: 'danger' },
{ id: 1, title: 'Private', colour: 'white' },
{ id: 2, title: 'Saved', colour: '' },
];
const { activeButtonId } = this.state;
const { compose } = this.props;
return (
<div className={s.filters}>
<button
className="btn btn-danger btn-block"
onClick={() => compose(true)}
>
Compose
</button>
<div className={s.mainFilterButtons}>
{mainButtons.map(button =>
<button
className={cx('btn', s.button, { [s.buttonActive]: button.id === activeButtonId })}
key={button.id}
onClick={() => this.handleButtonClick(button.id, button.filter)}
>
{button.title}
{button.notifications &&
<Badge color={button.lable || 'default'} pill>{button.notifications}</Badge>}
</button>,
)}
</div>
<div>
<h6>QUICK VIEW</h6>
{quickViewButton.map(button =>
<button className={cx('btn', s.button)} key={button.id}>
{button.title}
<i className={cx('fa fa-circle', { [`text-${button.colour}`]: true })} />
</button>,
)}
</div>
</div>
);
}
}
Filters.propTypes = {
filter: PropTypes.func.isRequired,
openMessage: PropTypes.func.isRequired,
compose: PropTypes.func.isRequired,
};
export default Filters;
@import '../../../../../styles/app';
.filters {
width: 16%;
padding-right: 15px;
@media screen and (max-width: 1125px) {
width: 100%;
padding-right: 0;
}
}
.mainFilterButtons {
margin: 15px 0;
}
.button {
width: 100%;
padding: 10px 14px !important;
display: flex !important;
justify-content: space-between;
align-items: center;
font-weight: $font-weight-normal;
border-radius: 0.2rem;
color: #868e96;
background: transparent;
&:hover {
background-color: #e5e5e5;
color: $gray-700;
}
& :global .badge {
width: 20px;
height: 20px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 10px;
}
}
.buttonActive {
background-color: $white;
color: #555;
font-weight: 600;
}
import React from 'react';
import PropTypes from 'prop-types';
import Widget from '../../../../../components/Widget';
import MessageHeader from '../MessageHeader/MessageHeader';
import MessageAttachments from '../MessageAttachments/MessageAttachments';
const Message = ({ message, compose }) => (
<Widget>
<MessageHeader
title={message.theme}
name={message.from}
email={message.fromEmail}
to={message.to}
date={message.date}
compose={compose}
/>
{/* eslint-disable */}
<div
dangerouslySetInnerHTML={{ __html: message.content }}
/>
{/* eslint-enable */}
{message.attachments && <MessageAttachments attachments={message.attachments} />}
</Widget>
);
Message.propTypes = {
message: PropTypes.shape({
theme: PropTypes.string,
from: PropTypes.string,
fromEmail: PropTypes.string,
to: PropTypes.string,
date: PropTypes.string,
}).isRequired,
compose: PropTypes.func.isRequired,
};
export default Message;
import React from 'react';
import PropTypes from 'prop-types';
import s from './MessageAttachments.module.scss';
const MessageAttachments = ({ attachments }) => (
<div className={s.messageAttachments}>
<hr />
<div className={s.attachmentsInfo}>
<strong>{attachments.length} attachments</strong> -
<button className="btn-link">Download all attachments</button>
<button className="btn-link">View all attachments</button>
</div>
{attachments.map(att =>
<div className={s.attachment} key={att.id}>
<img src={att.photo} alt="attachment" />
<h5>{att.photoName}</h5>
<div className={s.attachmentButtons}>
{att.weight}
<button className="btn-link">View</button>
<button className="btn-link">Download</button>
</div>
</div>,
)}
</div>
);
MessageAttachments.propTypes = {
attachments: PropTypes.arrayOf(PropTypes.shape({
photo: PropTypes.string,
photoName: PropTypes.string,
weight: PropTypes.string,
})).isRequired,
};
export default MessageAttachments;
@import '../../../../../styles/app';
.messageAttachments {
width: 50%;
@media screen and (max-width: 576px) {
width: 100%;
}
}
.attachmentsInfo {
margin: -5px 0 10px;
a {
margin-left: 5px;
}
}
.attachment {
max-width: 100%;
img {
width: 100%;
}
h5 {
font-weight: $font-weight-semi-bold;
}
}
.attachmentButtons {
margin: -5px 0 15px;
a {
margin-left: 10px;
}
}
import React from 'react';
import PropTypes from 'prop-types';
import ReplyDropdown from '../ReplyDropdown/ReplyDropdown';
import userPhoto from '../../../../../images/people/a5.jpg';
import s from './MessageHeader.module.scss';
const MessageHeader = ({ title, name, email, to, date, compose }) => (
<div className={s.messageHeader}>
<h3>{title}</h3>
<div className={s.messageHeaderLine}>
<div className={s.messageFrom}>
<img src={userPhoto} alt="user" className="rounded-circle" />
<div className={s.messageFromInfo}>
<span>
<strong>{name}</strong>
<span className={s.email}>
{`<${email}>`}
</span>
</span>
<span className={s.to}>to {to}</span>
</div>
</div>
<div className={s.messageHeaderDate}>
{date}
<ReplyDropdown compose={() => compose(true, { from: name, theme: title })} />
</div>
</div>
</div>
);
MessageHeader.propTypes = {
title: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
email: PropTypes.string.isRequired,
to: PropTypes.string.isRequired,
date: PropTypes.string.isRequired,
compose: PropTypes.func.isRequired,
};
export default MessageHeader;
@import '../../../../../styles/app';
.messageHeader {
width: 100%;
}
.messageHeaderLine {
display: flex;
justify-content: space-between;
align-items: center;
margin: 15px 0;
flex-wrap: wrap;
}
.messageFrom {
display: flex;
align-items: center;
img {
height: 30px;
width: 30px;
margin-right: 5px;
}
}
.messageFromInfo {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.email {
color: #868e96;
font-size: $font-size-mini;
margin-left: 5px;
}
.to {
color: #868e96;
}
.messageHeaderDate {
padding: 15px 0;
& :global .btn-group {
margin-left: 10px;
button {
font-size: 12px;
i {
margin-right: 3px;
}
}
}
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { Table, Input, FormGroup, Label } from 'reactstrap';
import Widget from '../../../../../components/Widget';
import MessageTableHeader from '../MessageTableHeader/MessageTableHeader';
import Pagination from '../Pagination/Pagination';
import Compose from '../Compose/Compose';
import Message from '../Message/Message';
import mock from '../../mock';
import s from './MessageTable.module.scss';
class MessageTable extends Component {
state = {
messages: mock,
checkedIds: [],
searchString: '',
}
componentWillReceiveProps(nextProps) {
const { filter } = this.props;
if (filter !== nextProps.filter) {
this.chooseNone();
this.setState({ openedMessage: null });
}
}
chooseAll = () => {
const { messages } = this.state;
const { filter } = this.props;
const newCheckedIds = [];
if (filter) {
messages
.filter(message => message[filter])
.forEach(message => newCheckedIds.push(message.id));
} else {
messages.forEach(message => newCheckedIds.push(message.id));
}
this.setState({ checkedIds: newCheckedIds });
}
chooseNone = () => {
this.setState({ checkedIds: [] });
}
chooseRead = () => {
const { messages } = this.state;
const newCheckedIds = [];
messages.forEach((message) => {
if (!message.unreaded) {
newCheckedIds.push(message.id);
}
});
this.setState({
checkedIds: newCheckedIds,
});
}
chooseUnread = () => {
const { messages } = this.state;
const newCheckedIds = [];
messages.forEach((message) => {
if (message.unreaded) {
newCheckedIds.push(message.id);
}
});
this.setState({
checkedIds: newCheckedIds,
});
}
choose(id) {
const { checkedIds } = this.state;
const indexOfId = checkedIds.indexOf(id);
if (indexOfId === -1) {
this.setState({ checkedIds: [...checkedIds, id] });
} else {
const newCheckedIds = [...checkedIds];
newCheckedIds.splice(indexOfId, 1);
this.setState({ checkedIds: newCheckedIds });
}
}
markUnread = () => {
const { messages, checkedIds } = this.state;
const newMessages = [...messages];
newMessages.map((message) => {
if (checkedIds.indexOf(message.id) !== -1) {
message.unreaded = true;
}
return message;
});
this.setState({ messages: newMessages });
}
markRead = () => {
const { messages, checkedIds } = this.state;
const newMessages = [...messages];
newMessages.map((message) => {
if (checkedIds.indexOf(message.id) !== -1) {
message.unreaded = false;
}
return message;
});
this.setState({ messages: newMessages });
}
delete = () => {
const { messages, checkedIds } = this.state;
const newMessages = [...messages];
newMessages.map((message) => {
if (checkedIds.indexOf(message.id) !== -1) {
message.deleted = true;
}
return message;
});
this.setState({
messages: newMessages.filter(message => !message.deleted),
checkedIds: [],
});
}
starItem(id) {
const { messages } = this.state;
const isAlreadyStarred = messages.find(m => m.id === id).starred;
const newMessages = [...messages];
newMessages.map((message) => {
if (message.id === id) {
message.starred = !isAlreadyStarred;
}
return message;
});
this.setState({ messages: newMessages });
}
handleOpenMessage(id) {
const newMessages = [...this.state.messages];
newMessages.map((message) => {
if (message.id === id) {
message.unreaded = false;
}
return message;
});
this.setState({ messages: newMessages });
this.props.openMessage(id);
}
search = (value) => {
this.setState({ searchString: value.toLowerCase() });
}
_searchable(m) {
const { searchString } = this.state;
if (searchString) {
return (m.content.toLowerCase().indexOf(searchString) !== -1 ||
m.from.toLowerCase().indexOf(searchString) !== -1 ||
m.theme.toLowerCase().indexOf(searchString) !== -1);
}
return true;
}
render() {
const { messages, checkedIds } = this.state;
const { filter, openedMessage, openMessage, compose, composeData, changeCompose } = this.props;
const filteredMessages = messages.filter(message => message[filter]);
const dataToDisplay = filter ? filteredMessages : messages;
return (
<div className={s.messages}>
{openedMessage === null && !compose
? <Pagination />
: <button className={cx('btn btn-default', s.backButton)} onClick={() => openMessage(null)}>
<i className="fa fa-angle-left fa-lg" />
</button>
}
{/* eslint-disable */}
{openedMessage === null && !compose
? <Widget>
<MessageTableHeader
all={this.chooseAll}
none={this.chooseNone}
read={this.chooseRead}
unread={this.chooseUnread}
markRead={this.markRead}
markUnread={this.markUnread}
deleteItems={this.delete}
search={this.search}
/>
<Table striped hover>
<thead>
<tr>
<th>
<FormGroup className="checkbox abc-checkbox" check>
<Input
id="checkbox-main"
type="checkbox"
onChange={dataToDisplay.length !== checkedIds.length ? this.chooseAll : this.chooseNone}
checked={dataToDisplay.length !== 0 && checkedIds.length === dataToDisplay.length}
/>{' '}
<Label for="checkbox-main" check />
</FormGroup>
</th>
</tr>
</thead>
<tbody>
{dataToDisplay
.filter((m) => this._searchable(m))
.map(message =>
(<tr
key={message.id}
className={cx({ [s.unreadedMessage]: message.unreaded })}
>
<td className={s.messageCheckbox} >
<FormGroup className="checkbox abc-checkbox" check>
<Input
id={`checkbox${message.id}`}
type="checkbox"
checked={checkedIds.indexOf(message.id) !== -1}
onChange={() => this.choose(message.id)}
/>{' '}
<Label for={`checkbox${message.id}`} check />
</FormGroup>
</td>
<td
className={s.messageStar}
onClick={() => this.starItem(message.id)}>{message.starred
? <span className={s.messageStarred}><i className="fa fa-star" /></span>
: <span><i className="fa fa-star-o" /></span>}
</td>
<td
className={s.messageFrom}
onClick={() => this.handleOpenMessage(message.id)}
>{message.from}</td>
<td onClick={() => this.handleOpenMessage(message.id)}>{message.theme}</td>
<td className={s.messageClip}>{message.attachments && <i className="fa fa-paperclip" />}</td>
<td className={s.messageDate}>{message.date}</td>
</tr>),
)}
</tbody>
</Table>
</Widget>
: compose
? <Compose data={composeData} />
: <Message message={messages[openedMessage]} compose={changeCompose} />
}
{/* eslint-enable */}
</div>
);
}
}
MessageTable.propTypes = {
filter: PropTypes.string,
openedMessage: PropTypes.number,
openMessage: PropTypes.func.isRequired,
compose: PropTypes.bool.isRequired,
composeData: PropTypes.shape({
from: PropTypes.string,
theme: PropTypes.string,
}),
changeCompose: PropTypes.func.isRequired,
};
MessageTable.defaultProps = {
filter: null,
openedMessage: null,
composeData: null,
};
export default MessageTable;
@import '../../../../../styles/app';
.messages {
width: 84%;
border-radius: 0.2rem;
@media screen and (max-width: 1125px) {
width: 100%;
}
& :global .form-check-input {
margin: 0;
position: relative;
}
& :global .table {
margin-bottom: 0;
}
}
.unreadedMessage {
td {
font-weight: $font-weight-semi-bold;
}
}
.messageCheckbox {
width: 50px;
padding-right: 0;
:global .form-check {
margin-bottom: 0;
}
}
.messageStar {
left: 25px;
margin-left: -10px;
}
.messageStarred {
color: theme-color('warning');
}
.messageFrom,
.messageClip {
@media screen and (max-width: 768px) {
display: none;
}
}
.messageDate {
display: flex;
justify-content: flex-end;
@media screen and (max-width: 768px) {
width: 65px;
}
}
.backButton {
margin-bottom: 15px;
}
import React from 'react';
import PropTypes from 'prop-types';
import {
UncontrolledButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
Input,
} from 'reactstrap';
import s from './MessageTableHeader.module.scss';
const MessageTableHeader = (props) => {
const { all, none, read, unread, markRead, markUnread, deleteItems, search } = props;
const select = [
{ id: 0, title: 'All', onClick: all },
{ id: 1, title: 'None', onClick: none },
{ id: 2 },
{ id: 3, title: 'Read', onClick: read },
{ id: 4, title: 'Unread', onClick: unread },
];
const action = [
{ id: 1, title: 'Reply' },
{ id: 2, title: 'Forward' },
{ id: 3, title: 'Archive' },
{ id: 4 },
{ id: 5, title: 'Mark As Read', onClick: markRead },
{ id: 6, title: 'Mark As Unread', onClick: markUnread },
{ id: 7 },
{ id: 8, title: 'Delete', onClick: deleteItems },
];
return (
<div className={s.messageTableHeader}>
<div>
<UncontrolledButtonDropdown size="sm">
<DropdownToggle
caret color="default"
className="dropdown-toggle-split mr-xs"
>
Select
</DropdownToggle>
<DropdownMenu>
{select.map(item =>
(Object.keys(item).length > 1
? <DropdownItem key={item.id} onClick={item.onClick}>{item.title}</DropdownItem>
: <DropdownItem key={item.id} divider />),
)}
</DropdownMenu>
</UncontrolledButtonDropdown >
<UncontrolledButtonDropdown size="sm">
<DropdownToggle
caret color="default"
className="dropdown-toggle-split mr-xs"
>
Actions
</DropdownToggle>
<DropdownMenu>
{action.map(item =>
(Object.keys(item).length > 1
? <DropdownItem key={item.id} onClick={item.onClick}>{item.title}</DropdownItem>
: <DropdownItem key={item.id} divider />),
)}
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<Input placeholder="Search Messages" size="sm" onChange={e => search(e.target.value)} />
</div>
);
};
MessageTableHeader.propTypes = {
all: PropTypes.func.isRequired,
none: PropTypes.func.isRequired,
read: PropTypes.func.isRequired,
unread: PropTypes.func.isRequired,
markRead: PropTypes.func.isRequired,
markUnread: PropTypes.func.isRequired,
deleteItems: PropTypes.func.isRequired,
search: PropTypes.func.isRequired,
};
export default MessageTableHeader;
.messageTableHeader {
display: flex;
justify-content: space-between;
align-items: center;
& :global .form-control {
width: auto;
}
}
import React from 'react';
import cx from 'classnames';
import s from './Pagination.module.scss';
const Pagination = () => (
<div className={s.pagination}>
<span className={s.paginationText}>Showing 1 - 10 of 96 messages</span>
<div className={s.paginationPages}>
<button className={cx(s.button, s.buttonDisabled)}><i className="fa fa-chevron-left" /></button>
<button className={cx(s.button, s.buttonActive)}>1</button>
<button className={s.button}>2</button>
<button className={s.button}><i className="fa fa-chevron-right" /></button>
</div>
</div>
);
export default Pagination;
@import '../../../../../styles/app';
.pagination {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 15px;
}
.paginationText {
color: #868e96;
font-size: $font-size-mini;
}
.paginationPages {
border-left: 1px solid #868e96;
padding-left: 11px;
margin-left: 10px;
display: flex;
button {
margin-left: 4px;
}
}
.button {
transition: 0.3s;
padding: 0.45rem 0.75rem;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: $font-weight-normal;
border-radius: 0.2rem;
color: #888;
background: #fff;
border: none;
&:hover {
background-color: transparent;
}
}
.buttonActive {
background: $gray-300;
}
.buttonDisabled {
&:hover {
background-color: #fff;
}
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
ButtonDropdown,
Button,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from 'reactstrap';
class ReplyDropdown extends Component {
state = { open: false };
toggle() {
this.setState(pvState => ({ open: !pvState.open }));
}
render() {
const { open } = this.state;
const { compose } = this.props;
return (
<ButtonDropdown isOpen={open} toggle={() => this.toggle()}>
<Button size="sm" id="dropdownFour" color="default" onClick={() => compose()}>
<i className="fa fa-reply" /> Reply
</Button>
<DropdownToggle size="sm" color="default" className="dropdown-toggle-split">
<i className="fa fa-angle-down" />
</DropdownToggle>
<DropdownMenu>
<DropdownItem><i className="fa fa-reply" /> Reply</DropdownItem>
<DropdownItem><i className="fa fa-arrow-right" /> Forward</DropdownItem>
<DropdownItem><i className="fa fa-print" /> Print</DropdownItem>
<DropdownItem divider />
<DropdownItem><i className="fa fa-ban" /> Spam</DropdownItem>
<DropdownItem><i className="fa fa-trash" /> Delete</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
);
}
}
ReplyDropdown.propTypes = {
compose: PropTypes.func.isRequired,
};
export default ReplyDropdown;
import photo1 from '../../../images/tables/1.png';
import photo2 from '../../../images/tables/2.png';
import photo3 from '../../../images/tables/3.png';
export default [
{
id: 0,
starred: true,
from: 'Philip Horbachuski',
fromEmail: 'philip.horbachuski@example.com',
to: 'Wrapbootstrap',
theme: 'Hi, Welcom to Google Mail',
date: '18:31',
unreaded: true,
content: `<p>Projecting surrounded literature yet delightful alteration but bed men. Open are from long why cold.
If must snug by upon sang loud left. As me do preference entreaties compliment motionless ye literature.
Day behaviour explained law remainder.</p>
<p><strong>On then sake home</strong> is am leaf. Of suspicion do departure at extremely he believing.
Do know said mind do rent they oh hope of. General enquire picture letters
garrets on offices of no on.</p>
<p>All the best,</p>
<p>Vitaut the Great, CEO, <br />
Fooby Inc. </p>`,
attachments: [
{
photo: photo1,
photoName: 'some-cool-photo1.jpg',
weight: '568K',
id: 0,
},
{
photo: photo2,
photoName: 'some-cool-photo2.jpg',
weight: '568K',
id: 1,
},
],
},
{
id: 1,
starred: true,
from: 'StackExchange',
theme: 'New Python questions for this week',
fromEmail: 'stackexchange@example.com',
to: 'Wrapbootstrap',
date: 'Aug 14',
unreaded: false,
draft: true,
content: '<h1>THIS IS HTML!!!!</h1>',
attachments: [
{
photo: photo3,
photoName: 'some-cool-photo1.jpg',
weight: '568K',
id: 0,
},
],
},
{
id: 2,
starred: false,
from: 'Facebook',
theme: 'Someone just commented on your photo!',
fromEmail: 'notification@facebook.com',
to: 'Wrapbootstrap',
date: 'Aug 7',
unreaded: true,
sent: true,
content: 'Someone just commented on your photo!',
},
{
id: 3,
starred: false,
from: 'Twitter',
theme: '@hackernews is now following you on Twitter',
fromEmail: 'notification@twitter.com',
to: 'Wrapbootstrap',
date: 'Jul 31',
unreaded: false,
sent: true,
content: '@hackernews is now following you on Twitter',
},
];
{
"name": "email",
"version": "0.0.0",
"private": true,
"main": "./Email.js"
}
\ No newline at end of file
import React from 'react';
import {
Row,
Col,
ButtonGroup,
Button,
} from 'reactstrap';
import 'fullcalendar/dist/fullcalendar';
import 'jquery-ui/ui/widgets/draggable';
import moment from 'moment/moment';
import $ from 'jquery';
import s from './Calendar.module.scss';
import Widget from '../../../../components/Widget';
class Calendar extends React.Component {
constructor(props) {
super(props);
this.state = {
calendarView: 'month',
currentMonth: moment().format('MMM YYYY'),
currentDay: moment().format('dddd'),
};
const date = new Date();
const d = date.getDate();
const m = date.getMonth();
const y = date.getFullYear();
this.calendarOptions = {
header: {
left: '',
center: '',
right: '',
},
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1),
backgroundColor: '#79A5F0',
textColor: '#fff',
description: 'Will be busy throughout the whole day',
},
{
title: 'Long Event',
start: new Date(y, m, d + 5),
end: new Date(y, m, d + 7),
description: 'This conference should be worse visiting',
},
{
id: 999,
title: 'Blah Blah Car',
start: new Date(y, m, d - 3, 16, 0),
allDay: false,
description: 'Agree with this guy on arrival time',
},
{
id: 1000,
title: 'Buy this template',
start: new Date(y, m, d + 3, 12, 0),
allDay: false,
backgroundColor: '#555',
textColor: '#fff',
description: 'Make sure everything is consistent first',
},
{
title: 'Got to school',
start: new Date(y, m, d + 16, 12, 0),
end: new Date(y, m, d + 16, 13, 0),
backgroundColor: '#64bd63',
textColor: '#fff',
description: 'Time to go back',
},
{
title: 'Study some Node',
start: new Date(y, m, d + 18, 12, 0),
end: new Date(y, m, d + 18, 13, 0),
backgroundColor: '#79A5F0',
textColor: '#fff',
description: 'Node.js is a platform built ' +
'on Chrome\'s JavaScript runtime for easily' +
' building fast, scalable network applications.' +
' Node.js uses an event-driven, non-blocking' +
' I/O model that makes it lightweight and' +
' efficient, perfect for data-intensive real-time' +
' applications that run across distributed devices.',
},
{
title: 'Click for Flatlogic',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://flatlogic.com/',
backgroundColor: '#e5603b',
textColor: '#fff',
description: 'Creative solutions',
},
],
selectable: true,
selectHelper: true,
select: (start, end, allDay) => {
this.createEvent = () => {
const title = this.event.title;
if (title) {
this.$calendar.fullCalendar('renderEvent',
{
title,
start,
end,
allDay,
backgroundColor: '#64bd63',
textColor: '#fff',
},
true, // make the event "stick"
);
}
this.$calendar.fullCalendar('unselect');
$('#create-event-modal').modal('hide');
};
$('#create-event-modal').modal('show');
},
eventClick: (event) => {
this.event = event;
$('#show-event-modal').modal('show');
},
editable: true,
droppable: true,
drop: (dateItem, event) => { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
const originalEventObject = {
// use the element's text as the event title
title: $.trim($(event.target).text()),
};
// we need to copy it, so that multiple events don't have a reference to the same object
const copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = dateItem;
copiedEventObject.allDay = !dateItem.hasTime();
const $categoryClass = $(event.target).data('event-class');
if ($categoryClass) {
copiedEventObject.className = [$categoryClass];
}
// render the event on the calendar
// the last `true` argument determines if
// the event 'sticks'
// http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
this.$calendar.fullCalendar('renderEvent', copiedEventObject, true);
$(event.target).remove();
},
};
this.dragOptions = { zIndex: 999, revert: true, revertDuration: 0 };
this.prev = this.prev.bind(this);
this.next = this.next.bind(this);
this.today = this.today.bind(this);
this.changeView = this.changeView.bind(this);
this.getCurrentMonth = this.getCurrentMonth.bind(this);
this.getCurrentDay = this.getCurrentDay.bind(this);
}
componentDidMount() {
this.$calendar = $('#calendar');
this.$calendar.fullCalendar(this.calendarOptions);
$('.draggable').draggable(this.dragOptions);
}
getCurrentMonth() {
return moment(this.$calendar.fullCalendar('getDate')).format('MMM YYYY');
}
getCurrentDay() {
return moment(this.$calendar.fullCalendar('getDate')).format('dddd');
}
prev() {
this.$calendar.fullCalendar('prev');
}
next() {
this.$calendar.fullCalendar('next');
}
today() {
this.$calendar.fullCalendar('today');
}
changeView(view) {
this.$calendar.fullCalendar('changeView', view);
this.setState({ calendarView: view });
}
render() {
return (
<div className={s.root}>
<Row>
<Col lg={4} xs={12} md={6}>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">Calendar</li>
</ol>
<h1 className="page-title">
{this.state.currentMonth} - <span className="fw-semi-bold">{this.state.currentDay}</span>
</h1>
<h3>Draggable <span className="fw-semi-bold">Events</span></h3>
<p>Just drap and drop events from there directly into the calendar.</p>
<div className="calendar-external-events mb-lg">
<div className="external-event draggable" data-event-class="bg-success text-white">
<i className="fa fa-circle fa-fw text-success ml-xs mr-xs" />
Make a tea
</div>
<div className="external-event draggable" data-event-class="bg-warning text-white">
<i className="fa fa-circle fa-fw text-warning ml-xs mr-xs" />
Open windows
</div>
<div className="external-event draggable" data-event-class="bg-gray text-white">
<i className="fa fa-circle-o fa-fw text-gray-light ml-xs mr-xs" />
Some stuff
</div>
<div className="external-event draggable" data-event-class="bg-danger text-white">
<i className="fa fa-square fa-fw text-danger ml-xs mr-xs" />
Study UX engineering
</div>
<div className="external-event draggable" data-event-class="bg-gray text-white">
<i className="fa fa-circle-o fa-fw text-gray-light ml-xs mr-xs" />
Another stuff
</div>
</div>
</Col>
<Col md={6} lg={8} xs={12}>
<Widget>
<Row className="calendar-controls">
<Col md={3}>
<ButtonGroup className="mr-sm">
<Button color="default" onClick={this.prev}>
<i className="fa fa-angle-left" />
</Button>
<Button color="default" onClick={this.next}>
<i className="fa fa-angle-right" />
</Button>
</ButtonGroup>
</Col>
<Col md={9} className="calendar-controls text-right">
<ButtonGroup>
<Button
color="default" onClick={() => this.changeView('month')}
active={this.state.calendarView === 'month'}
>Month</Button>
<Button
color="default" onClick={() => this.changeView('agendaWeek')}
active={this.state.calendarView === 'agendaWeek'}
>Week</Button>
<Button
color="default" onClick={() => this.changeView('agendaDay')}
active={this.state.calendarView === 'agendaDay'}
>Day</Button>
</ButtonGroup>
</Col>
</Row>
<div id="calendar" className="calendar" />
</Widget>
</Col>
</Row>
</div>
);
}
}
export default Calendar;
@import '../../../../styles/app';
:global {
@import '../../../../../node_modules/fullcalendar/dist/fullcalendar';
}
.root {
h4 {
font-size: 14px;
}
:global {
.fc-grid th {
text-transform: uppercase;
}
.fc-day-grid-event {
margin: 0;
padding: 0;
}
.fc-event {
border: none;
font-weight: $font-weight-normal;
background-color: $gray-200;
color: $text-color;
}
.fc-today {
background-color: #fff1b8;
}
a.fc-event {
height: auto;
line-height: $line-height-base;
width: 100%;
}
/* **** Full Calendar Custom **** */
.full-calendar {
margin-top: 10px;
}
.calendar-controls {
.btn {
font-size: $font-size-mini;
}
}
.calendar-external-events {
margin-top: 20px;
.external-event {
margin: 10px 0;
padding: 6px;
font-size: $font-size-mini;
cursor: pointer;
border-radius: $border-radius;
background-color: $white;
border: 1px solid #ccc;
box-shadow: var(--widget-shadow);
}
}
.widget-calendar {
@include media-breakpoint-up(xl) {
margin-top: -100px;
}
}
}
}
{
"name": "calendar",
"version": "0.0.0",
"private": true,
"main": "./Calendar.js"
}
import React from 'react';
import {
Button,
ButtonGroup,
Breadcrumb,
BreadcrumbItem,
} from 'reactstrap';
import Lightbox from 'react-images';
import s from './Gallery.module.scss';
import pic1 from '../../../../images/pictures/1.jpg';
import pic2 from '../../../../images/pictures/2.jpg';
import pic3 from '../../../../images/pictures/3.jpg';
import pic4 from '../../../../images/pictures/4.jpg';
import pic5 from '../../../../images/pictures/5.jpg';
import pic6 from '../../../../images/pictures/6.jpg';
import pic8 from '../../../../images/pictures/8.jpg';
import pic9 from '../../../../images/pictures/9.jpg';
import pic10 from '../../../../images/pictures/10.jpg';
import pic11 from '../../../../images/pictures/11.jpg';
import pic13 from '../../../../images/pictures/13.jpg';
import pic14 from '../../../../images/pictures/14.jpg';
const items = [
{
name: 'Mountains',
groups: [
'nature',
],
src: pic1,
date: '10 mins',
},
{
name: 'Empire State Pigeon',
groups: [
'people',
],
src: pic2,
date: '1 hour',
like: true,
},
{
name: 'Big Lake',
groups: [
'nature',
],
src: pic3,
date: '2 mins',
like: true,
},
{
name: 'Forest',
groups: [
'nature',
],
src: pic4,
date: '2 mins',
like: true,
},
{
name: 'Smile',
groups: [
'people',
],
src: pic5,
date: '2 mins',
},
{
name: 'Smile',
groups: [
'people',
],
src: pic6,
date: '1 hour',
like: true,
},
{
name: 'Fog',
groups: [
'nature',
],
src: pic8,
date: '2 mins',
like: true,
},
{
name: 'Beach',
groups: [
'people',
],
src: pic9,
date: '2 mins',
},
{
name: 'Pause',
groups: [
'people',
],
src: pic10,
date: '3 hour',
like: true,
},
{
name: 'Space',
groups: [
'space',
],
src: pic11,
date: '3 hour',
like: true,
},
{
name: 'Shuttle',
groups: [
'space',
],
src: pic13,
date: '35 mins',
like: true,
},
{
name: 'Sky',
groups: [
'space',
],
src: pic14,
date: '2 mins',
},
];
class Gallery extends React.Component {
constructor() {
super();
this.state = {
currentImage: 0,
lightboxIsOpen: false,
children: items,
activeGroup: 'all',
order: 'asc',
theme: {
arrow: {
':focus': {
outline: 0,
},
},
close: {
':focus': {
outline: 0,
},
},
},
};
this.closeLightbox = this.closeLightbox.bind(this);
this.gotoNext = this.gotoNext.bind(this);
this.gotoPrevious = this.gotoPrevious.bind(this);
this.gotoImage = this.gotoImage.bind(this);
this.handleClickImage = this.handleClickImage.bind(this);
this.openLightbox = this.openLightbox.bind(this);
}
openLightbox(index, event) {
event.preventDefault();
this.setState({
currentImage: index,
lightboxIsOpen: true,
});
}
gotoPrevious() {
this.setState({
currentImage: this.state.currentImage - 1,
});
}
gotoImage(index) {
this.setState({
currentImage: index,
});
}
gotoNext() {
this.setState({
currentImage: this.state.currentImage + 1,
});
}
closeLightbox() {
this.setState({
currentImage: 0,
lightboxIsOpen: false,
});
}
handleClickImage() {
if (this.state.currentImage === this.state.children.length - 1) return;
this.gotoNext();
}
filterChildren(type) {
this.setState({
children: type === 'all' ? items : items.filter((child) => {
const group = child.groups.find(item => item === type);
return !!group;
}),
activeGroup: type,
});
}
orderChildren(order) {
const children = this.state.children.sort((a, b) => {
const nameA = a.name.toLowerCase();
const nameB = b.name.toLowerCase();
if (nameA < nameB) {
return order === 'asc' ? -1 : 1;
}
if (nameA > nameB) {
return order === 'asc' ? 1 : -1;
}
return 0;
});
this.setState({ children, order });
}
render() {
return (
<div className={s.root}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>Gallery</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Media - <span className="fw-semi-bold">Images</span>
</h1>
<div className={s.galleryControls}>
<ButtonGroup id="shuffle-buttons">
<Button color="default" onClick={() => this.filterChildren('all')} active={this.state.activeGroup === 'all'}>All</Button>
<Button color="default" onClick={() => this.filterChildren('nature')} active={this.state.activeGroup === 'nature'}>Nature</Button>
<Button color="default" onClick={() => this.filterChildren('people')} active={this.state.activeGroup === 'people'}>People</Button>
<Button color="default" onClick={() => this.filterChildren('space')} active={this.state.activeGroup === 'space'}>Space</Button>
</ButtonGroup>
<ButtonGroup id="order-buttons">
<Button color="default" onClick={() => this.orderChildren('asc')} active={this.state.order === 'asc'}><i className="fa fa-sort-numeric-asc" /></Button>
<Button color="default" onClick={() => this.orderChildren('desc')} active={this.state.order === 'desc'}><i className="fa fa-sort-numeric-desc" /></Button>
</ButtonGroup>
</div>
<div className={s.gallery}>
{this.state.children.map((item, index) => {
const key = item.name + index;
return (
<div key={key} className={`${s.picture} card`}>
<a href={item.src} onClick={e => this.openLightbox(index, e)}><img className="figure-img" src={item.src} alt="..." /></a>
<div className={s.description}>
<h6 className="mt-0 mb-xs">{item.name}</h6>
<ul className="post-links">
<li><button className="btn-link">{item.date}</button></li>
<li><button className="btn-link"><span className="text-danger"><i className={`fa ${item.like ? 'fa-heart' : 'fa-heart-o'}`} /> Like</span></button></li>
<li><button className="btn-link">Details</button></li>
</ul>
</div>
</div>
);
})}
</div>
<Lightbox
currentImage={this.state.currentImage}
images={this.state.children}
isOpen={this.state.lightboxIsOpen}
onClickPrev={this.gotoPrevious}
onClickNext={this.gotoNext}
onClose={this.closeLightbox}
onClickImage={this.handleClickImage}
onClickThumbnail={this.gotoImage}
backdropClosesModal
enableKeyboardInput
theme={this.state.theme}
/>
</div>);
}
}
export default Gallery;
@import '../../../../styles/app';
.root {
:global .tile {
display: inline-block;
}
}
.galleryControls {
display: flex;
justify-content: space-between;
margin-bottom: $spacer;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 15px;
}
.picture {
padding: 3px;
border-radius: $border-radius;
background-color: $white;
> a {
overflow: hidden;
}
:global .figure-img {
width: 100%;
transition: $transition-base;
}
&:hover {
:global .figure-img {
transform: scale(1.1, 1.1);
}
}
}
.description {
padding: ($spacer * 0.85) ($spacer * 0.5);
}
{
"name": "invoice",
"version": "0.0.0",
"private": true,
"main": "./Gallery.js"
}
/* eslint class-methods-use-this: ["error", { "exceptMethods": ["printInvoice"] }] */
import React from 'react';
import {
Row,
Col,
Table,
ButtonToolbar,
Button,
} from 'reactstrap';
import s from './Invoice.module.scss';
import Widget from '../../../../components/Widget';
import iLogo from '../../../../images/invoice-logo.png';
class Stats extends React.Component {
printInvoice() {
window.print();
}
render() {
return (
<Row>
<Col lg={11}>
<Row className={s.root}>
<Col xs={12}>
<Widget>
<div className="widget">
<header>
<Row>
<Col md="6" xs="12" className="col-print-6">
<img src={iLogo} alt="Logo" className={s.invoiceLogo} />
</Col>
<Col md="6" xs="12" className="col-print-6">
<h4 className="text-right">
#<span className="fw-semi-bold">9.45613</span> /
<small>17 May 2014</small>
</h4>
<div className="text-muted fs-larger text-right">
Some Invoice number description or whatever
</div>
</Col>
</Row>
</header>
<section className={s.invoiceBody}>
<Row className="mb-lg">
<Col sm={6} className="col-print-6">
<h5 className="text-muted no-margin">Company Information</h5>
<h3 className="company-name m-t-1">
Wrapbootstrap LLC
</h3>
<address>
<strong>2 Infinite Loop</strong><br />
Minsk, Belarus 220004<br />
088.253.5345<br />
<abbr title="Work email">e-mail:</abbr> <a href="mailto:#">email@example.com</a><br />
<abbr title="Work Phone">phone:</abbr> (012) 345-678-901<br />
<abbr title="Work Fax">fax:</abbr> (012) 678-132-901
</address>
</Col>
<Col sm={6} className="col-print-6 text-right">
<h5 className="text-muted no-margin">Client Information</h5>
<h3 className="client-name m-t-1">
Veronica Niasvizhskaja
</h3>
<address>
<strong>Consultant</strong> at
{/* eslint-disable */}
<a href="#">Allspana</a><br />
{/* eslint-enable */}
<abbr title="Work email">e-mail:</abbr> <a href="mailto:#">maryna@allspana.by</a><br />
<abbr title="Work Phone">phone:</abbr> (012) 345-678-901<br />
<abbr title="Work Fax">fax:</abbr> (012) 678-132-901
<p className="no-margin"><strong>Note:</strong></p>
<p className="text-muted">Some nights I stay up cashing in my bad luck.
Some nights I call it a draw</p>
</address>
</Col>
</Row>
<Table className="table-striped">
<thead>
<tr>
<th>#</th>
<th>Item</th>
<th className="hidden-sm-down d-print-none">Description</th>
<th>Quantity</th>
<th className="hidden-sm-down d-print-none">Price per Unit</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Brand-new 27 monitor</td>
<td className="hidden-sm-down d-print-none">2,560x1,440-pixel (WQHD) resolution supported!</td>
<td>2</td>
<td className="hidden-sm-down d-print-none">700</td>
<td>1,400.00</td>
</tr>
<tr>
<td>2</td>
<td>Domain: okendoken.com</td>
<td className="hidden-sm-down d-print-none">6-month registration</td>
<td>1</td>
<td className="hidden-sm-down d-print-none">10.99</td>
<td>21.88</td>
</tr>
<tr>
<td>3</td>
<td>Atlas Shrugged</td>
<td className="hidden-sm-down d-print-none">Novel by Ayn Rand, first published in 1957 in the
United
States
</td>
<td>5</td>
<td className="hidden-sm-down d-print-none">35</td>
<td>175.00</td>
</tr>
<tr>
<td>4</td>
<td>New Song by Dr. Pre</td>
<td className="hidden-sm-down d-print-none">Lyrics: praesent blandit augue non sapien ornare
imperdiet
</td>
<td>1</td>
<td className="hidden-sm-down d-print-none">2</td>
<td>2.00</td>
</tr>
</tbody>
</Table>
<Row>
<Col xs={12} md={8} className="col-print-6">
<p>
<strong>Note:</strong>
Thank you for your business. Keep in mind, sometimes bad things happen. But it&#39;s just
sometimes.
</p>
</Col>
<Col md={4} xs={12} className="col-print-6">
<Row className="text-right justify-content-end">
<Col xs={6} />
<Col sm={3}>
<p>Subtotal</p>
<p>Tax(10%)</p>
<p className="no-margin"><strong>Total</strong></p>
</Col>
<Col sm={3}>
<p>1,598.88</p>
<p>159.89</p>
<p className="no-margin"><strong>1,758.77</strong></p>
</Col>
</Row>
</Col>
</Row>
<p className="text-right mt-lg mb-xs">
Marketing Consultant
</p>
<p className="text-right">
<span className="fw-semi-bold">Bob Smith</span>
</p>
<ButtonToolbar className="mt-lg justify-content-end d-print-none">
<Button onClick={this.printInvoice} color="inverse" className="mr-2">
<i className="fa fa-print" />
&nbsp;&nbsp;
Print
</Button>
<Button color="danger">
Proceed with Payment
&nbsp;
<span className="circle bg-white">
<i className="fa fa-arrow-right text-danger" />
</span>
</Button>
</ButtonToolbar>
</section>
</div>
</Widget>
</Col>
</Row>
</Col>
</Row>);
}
}
export default Stats;
@import '../../../../styles/app';
.root {
.invoiceLogo {
max-height: 50px;
}
.invoiceBody {
margin-top: 70px;
}
:global {
.widget {
padding: 10px 20px;
}
}
}
{
"name": "invoice",
"version": "0.0.0",
"private": true,
"main": "./Invoice.js"
}
/* eslint-disable jsx-a11y/href-no-hash */
import React from 'react';
import {
Row,
Col,
ButtonGroup,
Button,
Nav,
NavItem,
NavLink,
Pagination,
PaginationLink,
PaginationItem,
Badge,
UncontrolledButtonDropdown,
DropdownMenu,
DropdownToggle,
DropdownItem,
} from 'reactstrap';
import s from './Search.module.scss';
import i1 from '../../../../images/search/1.jpg';
import i2 from '../../../../images/search/5.jpg';
import i3 from '../../../../images/search/3.jpg';
import i4 from '../../../../images/search/13.jpg';
class Search extends React.Component {
render() {
return (
<div className={s.root}>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">Search Results</li>
</ol>
<h1 className="page-title">Matching - <span className="fw-semi-bold">Results</span></h1>
<div className="btn-toolbar justify-content-between">
<div className="d-inline-flex">
<UncontrolledButtonDropdown>
<DropdownToggle color="default" caret>
Popular
</DropdownToggle>
<DropdownMenu>
<DropdownItem>All</DropdownItem>
<DropdownItem>Popular</DropdownItem>
<DropdownItem>Interesting</DropdownItem>
<DropdownItem>Latest</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown>
<DropdownToggle color="default" caret>
All Time
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Last 24h</DropdownItem>
<DropdownItem>Last Month</DropdownItem>
<DropdownItem>Last Year</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<ButtonGroup>
<Button color="gray" className="active"><i className="fa fa-th-list" /></Button>
<Button color="gray"><i className="fa fa-th-large" /></Button>
</ButtonGroup>
</div>
<Row className="mt-3 d-block">
<Col xl={3} sm={12} className="float-xl-right">
<h5>Results <span className="fw-semi-bold">Filtering</span></h5>
<p className="text-muted fs-mini">Listed content is categorized by the following groups:</p>
<Nav className={`nav-pills flex-column nav-stacked ${s.searchResultCategories} mt`}>
<NavItem>
<NavLink href="#">
Hot Ideas
<Badge color="default" pill className="float-right">34</Badge>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">
Latest Pictures
<Badge color="default" pill className="float-right">9</Badge>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Labels of Day</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Recent Movies</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">
Globals
<Badge color="default" pill className="float-right">18</Badge>
</NavLink>
</NavItem>
</Nav>
</Col>
<Col xl={9} sm={12}>
<p className={s.searchResultsCount}>About 94 700 000 (0.39 sec.) results</p>
<section className={`${s.searchResultItem}`}>
<button className={`btn-link ${s.imageLink}`}>
<img className={s.image} src={i1} alt="" />
</button>
<div className={s.searchResultItemBody}>
<Row>
<Col md={9}>
<h4 className={s.searchResultItemHeading}>
<button className="btn-link">Next generation admin template</button>
</h4>
<p className={s.info}>
New York, NY 20188
</p>
<p className={s.description}>
Not just usual Metro. But something bigger. Not just usual widgets, but real
widgets. Not just yet another admin template,
but next generation admin template.
</p>
</Col>
<Col md={3} xs={12} className="text-center">
<p className="value3 mt-sm">
$9, 700
</p>
<p className="fs-mini text-muted">
PER WEEK
</p>
<Button color="info" size="sm">Learn More</Button>
</Col>
</Row>
</div>
</section>
<section className={s.searchResultItem}>
<button className={`btn-link ${s.imageLink}`}>
<img className={s.image} src={i2} alt="" />
</button>
<div className={s.searchResultItemBody}>
<Row>
<Col md={9}>
<h4 className={s.searchResultItemHeading}>
<button className="btn-link">Try. Posted by Okendoken</button>
<small>
<span className="badge badge-pill badge-danger float-right">
<span className="fw-normal"> Best Deal!</span>
</span>
</small>
</h4>
<p className={s.info}>
Los Angeles, NY 20188
</p>
<p className={s.description}>
You will never know exactly how something will go until you try it. You can
think three hundred times and still have no precise result.
</p>
</Col>
<Col md={3} xs={12} className="text-center">
<p className="value3 mt-sm">
$10, 300
</p>
<p className="fs-mini text-muted">
PER WEEK
</p>
<Button color="info" size="sm">Learn More</Button>
</Col>
</Row>
</div>
</section>
<section className={s.searchResultItem}>
<button className={`btn-link ${s.imageLink}`}>
<img className={s.image} src={i3} alt="" />
</button>
<div className={s.searchResultItemBody}>
<Row>
<Col md={9}>
<h4 className={s.searchResultItemHeading}>
<button className="btn-link">Vitaut the Great</button>
</h4>
<p className={s.info}>
New York, NY 20188
</p>
<p className={s.description}>
The Great Prince of the Grand Duchy of Lithuania he had stopped the invasion
to Europe of Timur (Tamerlan) from Asia heading a big Army
of Belarusians, Lithuanians.
</p>
</Col>
<Col md={3} xs={12} className="text-center">
<p className="value3 mt-sm">
$3, 200
</p>
<p className="fs-mini text-muted">
PER WEEK
</p>
<Button color="info" size="sm">Learn More</Button>
</Col>
</Row>
</div>
</section>
<section className={s.searchResultItem}>
<button className={`btn-link ${s.imageLink}`}>
<img className={s.image} src={i4} alt="" />
</button>
<div className={s.searchResultItemBody}>
<Row>
<Col md={9}>
<h4 className={s.searchResultItemHeading}>
<button className="btn-link">Can I use CSS3 Radial-Gradient?</button>
</h4>
<p className={s.info}>
Minsk, NY 20188
</p>
<p className={s.description}>
Yes you can! Further more, you should!
It let&#39;s you create really beautiful images
either for elements or for the entire background.
</p>
</Col>
<Col md={3} xs={12} className="text-center">
<p className="value3 mt-sm">
$2, 400
</p>
<p className="fs-mini text-muted">
PER MONTH
</p>
<Button color="info" size="sm">Learn More</Button>
</Col>
</Row>
</div>
</section>
<div className="d-flex justify-content-center mt-3">
<Pagination>
<PaginationItem disabled>
<PaginationLink previous href="#">Prev</PaginationLink>
</PaginationItem>
<PaginationItem active>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">4</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">5</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next href="#">Next</PaginationLink>
</PaginationItem>
</Pagination>
</div>
</Col>
</Row>
</div>);
}
}
export default Search;
@import '../../../../styles/app';
.root {
.searchResultCategories {
> li > a {
color: $gray-600;
font-weight: $font-weight-normal;
&:hover {
color: $gray-700;
background-color: $gray-400;
}
}
}
.searchResultsCount {
margin-top: 10px;
}
.searchResultItem {
padding: 20px;
background-color: $white;
border-radius: $border-radius;
box-shadow: var(--widget-shadow);
&:first-of-type {
overflow: hidden;
}
@include clearfix();
.imageLink {
display: block;
overflow: hidden;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
@include media-breakpoint-up(md) {
display: inline-block;
margin: -20px 0 -20px -20px;
float: left;
width: 200px;
}
@include media-breakpoint-down(sm) {
max-height: 200px;
}
}
.image {
max-width: 100%;
}
.info {
margin-top: 2px;
font-size: $font-size-sm;
color: $text-muted;
}
.description {
font-size: $font-size-mini;
margin-bottom: -5px;
}
+ .searchResultItem {
margin-top: 20px;
}
.searchResultItemBody {
height: auto;
@include media-breakpoint-down(sm) {
margin-top: 10px;
}
@include media-breakpoint-up(md) {
margin-left: 200px;
}
}
.searchResultItemHeading {
font-weight: $font-weight-normal;
> a {
color: $text-color;
}
@include media-breakpoint-up(md) {
margin: 0;
}
}
}
}
{
"name": "search",
"version": "0.0.0",
"private": true,
"main": "./Search.js"
}
import React from 'react';
import {
Input,
} from 'reactstrap';
import {
withGoogleMap,
withScriptjs,
GoogleMap,
Marker,
} from 'react-google-maps';
import s from './Timeline.module.scss'; // eslint-disable-line css-modules/no-unused-class
import a1 from '../../../../images/people/a1.jpg';
import a2 from '../../../../images/people/a2.jpg';
import a3 from '../../../../images/people/a3.jpg';
import a4 from '../../../../images/people/a4.jpg';
import a5 from '../../../../images/people/a5.jpg';
import a6 from '../../../../images/people/a6.jpg';
import avatar from '../../../../images/avatar.png';
import img8 from '../../../../images/search/8.jpg';
const BasicMap = withScriptjs(withGoogleMap(() =>
<GoogleMap
defaultZoom={8}
defaultCenter={{ lat: 51, lng: 7 }}
defaultOptions={{ mapTypeControl: false, fullscreenControl: false, gestureHandling: 'greedy' }}
>
<Marker position={{ lat: 51, lng: 7 }} draggable />
</GoogleMap>,
));
class Timeline extends React.Component {
render() {
return (
<div>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">Time Line</li>
</ol>
<h1 className="page-title">Events - <span className="fw-semi-bold">Feed</span></h1>
<ul className={s.timeline}>
<li className={s.onLeft}>
<time className={s.eventTime} dateTime="2014-05-19 03:04">
<span className={s.date}>yesterday</span>
<span className={s.time}>8:03 <span className="fw-semi-bold">pm</span></span>
</time>
<span className={`${s.eventIcon} ${s.eventIconSuccess}`}>
<i className="glyphicon glyphicon-map-marker" />
</span>
<section className={s.event}>
<span className={`thumb-sm ${s.avatar} pull-left mr-sm`}>
<img className="rounded-circle" src={a2} alt="..." />
</span>
<h4 className={s.eventHeading}><button className="btn-link">Jessica Nilson</button>
<small> @jess</small>
</h4>
<p className="fs-sm text-muted">10:12 am - Publicly near Minsk</p>
<div className={s.eventMap}>
<BasicMap
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyB7OXmzfQYua_1LEhRdqsoYzyJOPh9hGLg"
loadingElement={<div style={{ height: '200px', width: '100%' }} />}
containerElement={<div style={{ height: '200px' }} />}
mapElement={<div style={{ height: '200px' }} />}
/>
</div>
<footer>
<ul className={s.postLinks}>
<li><button className="btn-link">1 hour</button>
</li>
<li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart" /> Like</span></button></li>
<li><button className="btn-link">Comment</button></li>
</ul>
<ul className={s.postComments}>
<li>
<span className={`thumb-xs ${s.avatar} pull-left mr-sm`}>
<img className="rounded-circle" src={a2} alt="..." />
</span>
<div className={s.commentBody}>
<h6 className={`${s.author} fs-sm fw-semi-bold`}>Radrigo Gonzales
<small>7 mins ago</small>
</h6>
<p>{`Someone said they were the best people out there just few years ago. Don't know
better options.`}</p>
</div>
</li>
<li>
<span className={`thumb-xs ${s.avatar} pull-left mr-sm`}>
<img className="rounded-circle" src={a4} alt="..." />
</span>
<div className={s.commentBody}>
<h6 className={`${s.author} fs-sm fw-semi-bold`}>Ignacio Abad
<small>6 mins ago</small>
</h6>
<p>True. Heard absolutely the same.</p>
</div>
</li>
<li>
<span className={`thumb-xs ${s.avatar} pull-left mr-sm`}>
<img className="rounded-circle" src={avatar} alt="..." />
</span>
<div className={s.commentBody}>
<Input size="sm" placeholder="Write your comment..." />
</div>
</li>
</ul>
</footer>
</section>
</li>
<li>
<time className={s.eventTime} dateTime="2014-05-19 03:04">
<span className={s.date}>today</span>
<span className={s.time}>9:41 <span className="fw-semi-bold">am</span></span>
</time>
<span className={`${s.eventIcon} ${s.eventIconPrimary}`}>
<i className="glyphicon glyphicon-comments" />
</span>
<section className={s.event}>
<span className={`thumb-xs ${s.avatar} pull-left mr-sm`}>
<img className="rounded-circle" src={a5} alt="..." />
</span>
<h5 className={s.eventHeading}><button className="btn-link">Bob Nilson</button>
<small><button className="btn-link"> @nils</button></small>
</h5>
<p className="fs-sm text-muted">February 22, 2014 at 01:59 PM</p>
<p className="fs-mini">
There is no such thing as maturity. There is instead an ever-evolving process of maturing.
Because when there is a maturity, there is ...
</p>
<footer>
<ul className={s.postLinks}>
<li><button className="btn-link">1 hour</button></li>
<li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart" /> Like</span></button></li>
<li><button className="btn-link">Comment</button></li>
</ul>
</footer>
</section>
</li>
<li className={s.onLeft}>
<time className={s.eventTime} dateTime="2014-05-19 03:04">
<span className={s.date}>yesterday</span>
<span className={s.time}>9:03 <span className="fw-semi-bold">am</span></span>
</time>
<span className={`${s.eventIcon} ${s.eventIconDanger}`}>
<i className="glyphicon glyphicon-cutlery" />
</span>
<section className={s.event}>
<h5 className={s.eventHeading}><button className="btn-link">Jessica Smith</button>
<small> @jess</small>
</h5>
<p className="fs-sm text-muted">February 22, 2014 at 01:59 PM</p>
<p className="fs-mini">
Check out this awesome photo I made in Italy last summer. Seems it was lost somewhere deep inside
my brand new HDD 40TB. Thanks god I found it!
</p>
<div className={s.eventImage}>
<a href={img8} data-ui-jq="magnificPopup" data-ui-options="{type: 'image'}">
<img src={img8} alt="..." />
</a>
</div>
<footer>
<div className="clearfix">
<ul className={`${s.postLinks} mt-sm pull-left`}>
<li><button className="btn-link">1 hour</button></li>
<li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart-o" /> Like</span></button></li>
<li><button className="btn-link">Comment</button></li>
</ul>
<span className="thumb thumb-sm pull-right">
<button className="btn-link">
<img className="rounded-circle" src={a1} alt="..." />
</button>
</span>
<span className="thumb thumb-sm pull-right">
<button className="btn-link"><img className="rounded-circle" src={a5} alt="..." /></button>
</span>
<span className="thumb thumb-sm pull-right">
<button className="btn-link"><img className="rounded-circle" src={a3} alt="..." /></button>
</span>
</div>
<ul className={`${s.postComments} mt-sm`}>
<li>
<span className="thumb-xs avatar pull-left mr-sm">
<img className="rounded-circle" src={a1} alt="..." />
</span>
<div className={s.commentBody}>
<h6 className={`${s.author} fs-sm fw-semi-bold`}>Ignacio Abad
<small>6 mins ago</small>
</h6>
<p>Hey, have you heard anything about that?</p>
</div>
</li>
<li>
<span className="thumb-xs avatar pull-left mr-sm">
<img className="rounded-circle" src={avatar} alt="..." />
</span>
<div className={s.commentBody}>
<Input size="sm" placeholder="Write your comment..." />
</div>
</li>
</ul>
</footer>
</section>
</li>
<li>
<time className={s.eventTime} dateTime="2014-05-19 03:04">
<span className={s.date}>yesterday</span>
<span className={s.time}>9:03 <span className="fw-semi-bold">am</span></span>
</time>
<span className={s.eventIcon}>
<img className="rounded-circle" src={avatar} alt="..." />
</span>
<section className={s.event}>
<span className={`thumb-xs ${s.avatar} pull-left mr-sm`}>
<img className="rounded-circle" src={a6} alt="..." />
</span>
<h5 className={s.eventHeading}><button className="btn-link">Jessica Smith</button>
<small> @jess</small>
</h5>
<p className="fs-sm text-muted">9:03 am - Publicly near Minsk</p>
<h5>New <span className="fw-semi-bold">Project</span> Launch</h5>
<p className="fs-mini">
{`Let's try something different this time. Hey, do you wanna join us tonight?
We're planning to a launch a new project soon. Want to discuss with all of you...`}
</p>
<button className="btn-link mt-n-xs fs-mini text-muted">Read more...</button>
<footer>
<ul className={s.postLinks}>
<li><button className="btn-link">1 hour</button></li>
<li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart-o" /> Like</span></button></li>
<li><button className="btn-link">Comment</button></li>
</ul>
</footer>
</section>
</li>
</ul>
</div>
);
}
}
export default Timeline;
@import '../../../../styles/app';
/* Post Comments */
.postComments {
font-size: $font-size-sm;
padding-left: 0;
@include clearfix();
.postLinks + & {
margin-top: $spacer / 2;
}
> li {
padding: 10px;
border-top: 1px solid #e7e7e7;
list-style: none;
@include clearfix();
&:last-child {
padding-bottom: 0;
}
}
p:last-child {
margin-bottom: 0;
}
.avatar {
margin-top: 1px;
}
.author {
margin-top: 0;
margin-bottom: 2px;
color: #7ca9dd;
}
.commentBody {
overflow: auto;
}
h6.author > small {
font-size: 11px;
}
:global {
.widget > footer & {
margin-left: -$widget-padding-horizontal;
margin-right: -$widget-padding-horizontal;
}
}
}
/* Post Links */
.postLinks {
margin-bottom: 0;
font-size: $font-size-sm;
padding-left: 0;
@include clearfix();
> li {
float: left;
list-style: none;
+ li {
&::before {
color: #999;
content: '\25cf';
padding: 0 8px;
}
}
> a {
text-decoration: none;
color: $text-muted;
:hover {
color: $text-muted;
}
}
}
:global {
.no-separator > li + li {
margin-left: 12px;
&::before {
content: normal;
}
}
}
}
/* Time Line */
.timeline {
position: relative;
min-height: 100%;
list-style: none;
padding-left: 0;
margin-bottom: -40px; /* content padding bottom */
padding-bottom: 80px;
> li {
@include clearfix();
+ li {
margin-top: 30px;
}
}
/* the time line :) */
&::before {
position: absolute;
top: 0;
bottom: 0;
left: 24%;
width: 8px;
content: ' ';
margin-left: -4px;
background-color: $white;
@include media-breakpoint-up(lg) {
left: 50%;
margin-left: -4px;
}
}
}
.event {
background: $white;
border-radius: $border-radius;
padding: 20px 20px 0;
position: relative;
box-shadow: var(--widget-shadow);
.timeline & {
float: right;
width: 68%;
&::before {
right: 100%;
content: ' ';
height: 0;
width: 0;
position: absolute;
border: 10px solid rgba(0, 0, 0, 0);
border-right-color: $white;
top: 15px;
}
}
.postComments {
margin-left: -20px;
margin-right: -20px;
}
> footer {
margin: 20px -20px 0;
padding: 10px 20px;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
background-color: #fafafa;
@include clearfix();
:global {
.thumb {
margin-left: 10px;
}
}
}
@include media-breakpoint-up(lg) {
.timeline & {
width: 45%;
}
.timeline > li.onLeft & {
float: left;
&::before {
right: auto;
left: 100%;
border-right-color: rgba(0, 0, 0, 0);
border-left-color: $white;
}
}
}
}
.eventTime {
.timeline & {
float: left;
width: 18%;
margin-top: 5px;
text-align: right;
> .date {
display: block;
font-size: $font-size-larger;
}
> .time {
display: block;
font-size: $font-size-lg;
font-weight: $font-weight-normal;
}
}
@include media-breakpoint-up(lg) {
.timeline & {
width: 46%;
}
.timeline > li.onLeft & {
float: right;
text-align: left;
}
}
}
.eventIcon {
:global {
.glyphicon {
top: -2px;
}
}
.timeline & {
position: absolute;
left: 24%;
width: 50px;
height: 50px;
line-height: 37px;
margin-left: -25px;
background-color: $white;
border: 7px solid $white;
border-radius: 50%;
text-align: center;
box-shadow: var(--widget-shadow);
&.eventIconDanger {
background-color: theme-color('danger');
border-color: lighten(theme-color('danger'), 7%);
}
&.eventIconWarning {
background-color: theme-color('warning');
border-color: lighten(theme-color('warning'), 7%);
}
&.eventIconSuccess {
background-color: theme-color('success');
border-color: lighten(theme-color('success'), 7%);
}
&.eventIconInfo {
background-color: theme-color('info');
border-color: lighten(theme-color('info'), 7%);
}
&.eventIconPrimary {
background-color: theme-color('primary');
border-color: lighten(theme-color('primary'), 7%);
}
&.eventIconDanger,
&.eventIconWarning,
&.eventIconSuccess,
&.eventIconInfo,
&.eventIconPrimary {
color: $white;
}
@include media-breakpoint-up(lg) {
left: 50%;
}
> img {
width: 36px;
height: 36px;
margin-top: -4px;
}
}
}
.eventHeading {
margin: 0 0 2px;
font-weight: $font-weight-semi-bold;
> a {
text-decoration: none;
color: #7ca9dd;
}
> small {
font-weight: $font-weight-semi-bold;
> a {
text-decoration: none;
color: $text-muted;
}
}
}
.eventMap {
display: block;
height: 200px;
margin: 0 -20px -20px;
overflow: visible !important;
}
.eventImage {
margin: 0 -20px -20px;
max-height: 260px;
overflow: hidden;
> img {
max-width: 100%;
}
}
{
"name": "timeline",
"version": "0.0.0",
"main": "./Timeline.js",
"private": true
}
import React from 'react';
import {
Row,
Col,
Button,
Form,
FormGroup,
Label,
Input,
UncontrolledTooltip,
UncontrolledButtonDropdown,
InputGroup,
InputGroupAddon,
ButtonGroup,
DropdownMenu,
DropdownItem,
DropdownToggle,
} from 'reactstrap';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState } from 'draft-js';
import Select2 from 'react-select2-wrapper';
import Datetime from 'react-datetime';
import ColorPicker from 'rc-color-picker';
import MaskedInput from 'react-maskedinput';
import ReactBootstrapSlider from 'react-bootstrap-slider';
import Dropzone from 'react-dropzone';
import TextareaAutosize from 'react-autosize-textarea';
import ReactMde, { ReactMdeCommands } from 'react-mde';
import Widget from '../../../../components/Widget';
import s from './Elements.module.scss';
class Elements extends React.Component {
constructor(props) {
super(props);
this.changeValueDropdown = this.changeValueDropdown.bind(this);
this.onEditorStateChange = this.onEditorStateChange.bind(this);
this.defaultSelectChange = this.defaultSelectChange.bind(this);
this.changeSelectDropdownSimple = this.changeSelectDropdownSimple.bind(this);
this.changeSelectDropdownGreen = this.changeSelectDropdownGreen.bind(this);
this.changeSelectDropdownOrange = this.changeSelectDropdownOrange.bind(this);
this.changeSelectDropdownRed = this.changeSelectDropdownRed.bind(this);
this.changeSelectDropdownBig = this.changeSelectDropdownBig.bind(this);
this.changeColorValue = this.changeColorValue.bind(this);
this.changeColorInput = this.changeColorInput.bind(this);
this.onChangeInputFiles = this.onChangeInputFiles.bind(this);
this.removeInputFiles = this.removeInputFiles.bind(this);
this.onChangeInputImage = this.onChangeInputImage.bind(this);
this.onDrop = this.onDrop.bind(this);
this.state = {
dropDownValue: 'Another type',
simpleSelectDropdownValue: 'Option one',
greenSelectDropdownValue: 'Hichi',
orangeSelectDropdownValue: 'Shi',
redSelectDropdownValue: 'Ichi',
bigSelectDropdownValue: 'Fourth Item',
editorState: EditorState.createEmpty(),
selectGroupData: [{
id: '1',
text: 'NFC EAST',
children: [{
id: '11', text: 'Dallas Cowboys',
}, {
id: '12', text: 'New York Giants',
}, {
id: '13', text: 'Philadelphia Eagles',
}, {
id: '14', text: 'Washington Redskins',
}],
}, {
id: '2',
text: 'NFC NORTH',
children: [{
id: '21', text: 'Chicago Bears',
}, {
id: '22', text: 'Detroit Lions',
}, {
id: '23', text: 'Green Bay Packers',
}, {
id: '24', text: 'Minnesota Vikings',
}],
}, {
id: '3',
text: 'NFC SOUTH',
children: [{
id: '31', text: 'Atlanta Falcons',
}, {
id: '32', text: 'Carolina Panthers',
}, {
id: '33', text: 'New Orleans Saints',
}, {
id: '34', text: 'Tampa Bay Buccaneers',
}],
}],
selectDefaultData: [{
id: 'Magellanic', text: 'Large Magellanic Cloud',
}, {
id: 'Andromeda', text: 'Andromeda Galaxy',
}, {
id: 'Sextans', text: 'Sextans A',
}],
defaultSelectVal: 'Andromeda',
groupSelectVal: '',
colorpickerValue: '#ff0000',
colorpickerInputValue: '#ff0000',
isDatePickerOpen: false,
isTimePickerOpen: false,
dropFiles: [],
inputFiles: [],
imageFiles: [],
reactMdeValue: {
text: '',
selection: null },
};
}
onEditorStateChange(editorState) {
this.setState({
editorState,
});
}
onDrop(files) {
this.setState({
dropFiles: files,
});
}
onChangeInputFiles(e) {
const files = [];
let i = 0;
for (i; i < e.target.files.length; i += 1) {
files.push(e.target.files[i]);
}
this.setState({
inputFiles: files,
});
}
onChangeInputImage(e) {
const files = [];
const reader = new FileReader();
files.push(e.target.files[0]);
reader.onloadend = () => {
files[0].preview = reader.result;
files[0].toUpload = true;
this.setState({
imageFiles: files,
});
};
reader.readAsDataURL(e.target.files[0]);
}
handleValueChange = (value) => {
this.setState({ reactMdeValue: value });
}
changeValueDropdown(e) {
this.setState({ dropDownValue: e.currentTarget.textContent });
}
changeSelectDropdownGreen(e) {
this.setState({ greenSelectDropdownValue: e.currentTarget.textContent });
}
changeSelectDropdownOrange(e) {
this.setState({ orangeSelectDropdownValue: e.currentTarget.textContent });
}
changeSelectDropdownRed(e) {
this.setState({ redSelectDropdownValue: e.currentTarget.textContent });
}
changeSelectDropdownBig(e) {
this.setState({ bigSelectDropdownValue: e.currentTarget.textContent });
}
changeSelectDropdownSimple(e) {
this.setState({ simpleSelectDropdownValue: e.currentTarget.textContent });
}
defaultSelectChange(e) {
this.setState({
defaultSelectVal: e,
});
}
changeColorValue(colors) {
this.setState({
colorpickerValue: colors.color,
colorpickerInputValue: colors.color,
});
}
changeColorInput(e) {
if (e.target.value.length > 3 && e.target.value.length < 8) {
this.setState({
colorpickerInputValue: e.target.value,
colorpickerValue: e.target.value,
});
}
if (e.target.value.length <= 3) {
this.setState({
colorpickerInputValue: e.target.value,
});
}
}
removeInputFiles() {
this.setState({
inputFiles: [],
});
}
render() {
return (
<div className={s.root}>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="active breadcrumb-item">Form Elements</li>
</ol>
<h1 className="page-title">Form - <span className="fw-semi-bold">Inputs & Controls</span>
</h1>
<Row>
{/* Horizontal form */}
<Col lg={6} md={12}>
<Widget title={<h6> Inputs </h6>} settings refresh close>
<FormGroup>
<Form>
<legend><strong>Horizontal</strong> form</legend>
<FormGroup row>
<Label for="normal-field" md={4} className="text-md-right">
Normal field
</Label>
<Col md={7}>
<Input type="text" id="normal-field" placeholder="May have placeholder" />
</Col>
</FormGroup>
<FormGroup row>
<Label for="hint-field" md={4} className="text-md-right">
Label hint
<span className="help-block">Some help text</span>
</Label>
<Col md={7}>
<Input type="text" name="password" id="hint-field" />
</Col>
</FormGroup>
<FormGroup row>
<Label md={4} for="tooltip-enabled" className="text-md-right">Tooltip
enabled</Label>
<Col md={7}>
<Input
type="text" id="tooltip-enabled"
placeholder="Hover over me.."
/>
<UncontrolledTooltip placement="top" target="tooltip-enabled">
Some explanation text here
</UncontrolledTooltip>
</Col>
</FormGroup>
<FormGroup row>
<Label md={4} className="text-md-right" for="disabled-input">Disabled
input</Label>
<Col md={7}>
<Input
type="text" id="disabled-input"
disabled="disabled" value="Default value"
/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={4} className="text-md-right" for="max-length">
Max length</Label>
<Col md={7}>
<Input
type="text" id="max-length" maxLength="3"
placeholder="Max length 3 characters"
/>
<UncontrolledTooltip placement="top" target="max-length">
You cannot write more than 3
</UncontrolledTooltip>
</Col>
</FormGroup>
<FormGroup row>
<Label md={4} className="text-md-right" for="prepended-input">
Prepended input</Label>
<Col md={7}>
<InputGroup>
<InputGroupAddon addonType="prepend"><span className="input-group-text"><i className="fa fa-user" /></span></InputGroupAddon>
<Input id="prepended-input" type="test" bsSize="16" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Label md={4} className="text-md-right" for="password-field">
Password
</Label>
<Col md={7}>
<InputGroup>
<InputGroupAddon addonType="prepend"><span className="input-group-text"><i className="fa fa-lock" /></span></InputGroupAddon>
<Input
id="password-field" type="password"
placeholder="Password"
/>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Label md={4} className="text-md-right" for="appended-input">
Appended input
</Label>
<Col md={7}>
<InputGroup>
<Input id="appended-input" bsSize="16" type="text" />
<InputGroupAddon addonType="append">.00</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Label md={4} className="text-md-right" for="combined-input">
Combined
</Label>
<Col md={7}>
<InputGroup>
<InputGroupAddon addonType="prepend">$</InputGroupAddon>
<Input id="combined-input" bsSize="16" type="text" />
<InputGroupAddon addonType="append">.00</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Label md={4} className="text-md-right" for="transparent-input">
Append Transparent
</Label>
<Col md={7}>
<InputGroup className="input-group-transparent">
<Input id="transparent-input" type="text" />
<InputGroupAddon addonType="append"><span className="input-group-text"><i className="fa fa-camera" /></span></InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row className="form-action">
<Label md={4} />
<Col md={7}>
<Button color="primary" type="submit" className="mr-xs">Save Changes</Button>
<Button color="inverse">Cancel</Button>
</Col>
</FormGroup>
</Form>
</FormGroup>
</Widget>
</Col>
{/* Default form */}
<Col lg={6} md={12}>
<Widget title={<h6> Prepended and appended inputs </h6>} settings refresh close>
<FormGroup>
<Form>
<legend><strong>Default</strong> Form</legend>
<Row>
<Col md={8}>
<FormGroup>
<Label for="search-input1">
Search type input
</Label>
<InputGroup>
<Input type="text" id="search-input1" />
<InputGroupAddon addonType="append">
<Button color="default">Search</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<Label for="bar">
Whole bar appended
</Label>
<InputGroup>
<Input type="text" id="bar" />
<InputGroupAddon addonType="append">
<ButtonGroup>
<Button color="danger"><i className="fa fa-pencil" /></Button>
<Button color="warning"><i className="fa fa-plus" /></Button>
<Button color="success"><i className="fa fa-refresh" /></Button>
</ButtonGroup>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<Label for="dropdown-appended">
Actions dropdown
</Label>
<InputGroup>
<Input type="text" id="dropdown-appended" />
<InputGroupAddon addonType="append">
<UncontrolledButtonDropdown>
<DropdownToggle caret color="success">
Action
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<Label for="segmented-dropdown">
Segmented dropdown
</Label>
<InputGroup>
<Input type="text" id="segmented-dropdown" />
<InputGroupAddon addonType="append">
<UncontrolledButtonDropdown>
<Button color="warning">Action</Button>
<DropdownToggle
caret color="warning"
className="dropdown-toggle-split"
/>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</InputGroupAddon>
</InputGroup>
<span className="help-block">Anything can be appended to the right</span>
</FormGroup>
<FormGroup>
<Label for="type-dropdown-appended">
Types dropdown
</Label>
<InputGroup>
<Input type="text" id="type-dropdown-appended" />
<InputGroupAddon addonType="append">
<UncontrolledButtonDropdown>
<DropdownToggle
caret color="primary"
className="dropdown-toggle-split"
>
{this.state.dropDownValue}
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.changeValueDropdown}>
Another type
</DropdownItem>
<DropdownItem onClick={this.changeValueDropdown}>
Type one
</DropdownItem>
<DropdownItem onClick={this.changeValueDropdown}>
Next type
</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</InputGroupAddon>
</InputGroup>
<p className="help-block">
You can select some type of a field just right in the place.
</p>
</FormGroup>
<FormGroup>
<Label for="no-borders-input">
Transparent input
</Label>
<Input
type="text" placeholder="Search Dashboard" id="no-borders-input"
className="input-no-border bg-gray-lighter"
/>
<p className="help-block">
With <code>.bg-gray-lighter</code>. White by default.
</p>
</FormGroup>
</Col>
</Row>
<FormGroup className="form-action">
<Button color="inverse" type="submit" className="mr-xs">
Save Changes
</Button>
<Button color="default">Cancel</Button>
</FormGroup>
</Form>
</FormGroup>
</Widget>
</Col>
</Row>
<Row>
<Col lg={8} md={12}>
<Widget
title={<h6> Form <span className="fw-semi-bold">Options</span></h6>}
settingsInverse refresh close
>
<Form>
<legend>Control sizing</legend>
<p>
Set input heights using parameters like <code>size=&apos;lg&apos;</code> and
<code>size=&apos;sm&apos;</code>.
Also works with <code>type=&apos;search&apos;</code> inputs, input groups and
selects.
</p>
<br />
<FormGroup>
<Input type="text" placeholder='bsSize="lg"' bsSize="lg" />
</FormGroup>
<FormGroup>
<Input type="text" placeholder="default input" />
</FormGroup>
<FormGroup>
<Input type="text" placeholder='bsSize="sm"' bsSize="sm" />
</FormGroup>
</Form>
</Widget>
</Col>
<Col lg={4} md={12}>
<Widget
title={<h6> Form <span className="fw-semi-bold">Options</span></h6>}
settingsInverse refresh close
>
<Form>
<legend> Input Groups</legend>
<p>
Different colors & sizes for any elements including input groups. Elements may be
easily styled with classes like <code>.bg-primary</code> or
<code>.bg-transparent</code>
</p>
<br />
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend" className="bg-transparent">
<span className="input-group-text"><i className="fa fa-github-alt" /></span>
</InputGroupAddon>
<Input type="text" placeholder="First Name" bsSize="16" />
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup size="lg">
<InputGroupAddon addonType="prepend">
<span className="input-group-text"><i className="fa fa-bars" /></span>
</InputGroupAddon>
<Input type="text" placeholder="Username" bsSize="16" />
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup size="sm">
<Input type="text" placeholder="City" bsSize="16" />
<InputGroupAddon addonType="prepend">
<span className="bg-danger text-white input-group-text"><i className="fa fa-code-fork" /></span>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Form>
</Widget>
</Col>
</Row>
<Row>
<Col lg="6" md={12}>
<Widget title={<h6><i className="fa fa-font" />Textareas</h6>} settings refresh close>
<Form>
<legend>Small form</legend>
<FormGroup row>
<Label md={3} className="text-md-right" for="default-textarea">Default
textarea</Label>
<Col md={9}>
<Input rows="4" type="textarea" name="text" id="default-textarea" />
</Col>
</FormGroup>
<FormGroup row>
<Label md={3} className="text-md-right" for="elastic-textarea">Auto-growing
textarea</Label>
<Col md={9}>
<TextareaAutosize
rows={3} id="elastic-textarea"
placeholder="Try to add few new lines.."
className={`form-control ${s.autogrow} transition-height`}
/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={3} className="text-md-right">
Wysiwyg
<span className="help-block">
With bottom toolbar appended
</span>
</Label>
<Col md={9}>
<Editor
wrapperClassName={s.wysiwygWrapper}
editorClassName={s.wysiwygEditor}
toolbarClassName={s.wysiwygToolbar}
/>
<div className="text-md-right mt-xs">
<Button color="danger" className="mr-xs">Save</Button>
<Button color="default">Clear</Button>
</div>
</Col>
</FormGroup>
<FormGroup row>
<Label md={3} className="text-md-right" for="markdown-editor">
Markdown Editor
</Label>
<Col md={9}>
<ReactMde
textAreaProps={{
id: 'ta1',
name: 'ta1',
}}
value={this.state.reactMdeValue}
onChange={this.handleValueChange}
commands={ReactMdeCommands.getDefaultCommands()}
/>
</Col>
</FormGroup>
</Form>
</Widget>
</Col>
<Col lg="6" md={12}>
<Widget
title={<h6><i className="fa fa-list-alt" /> Selects </h6>} refresh close
settings
>
<Form className="form-label-left">
<legend>Default form with labels on left</legend>
<FormGroup row>
<Label md="4" for="default-select">Default select</Label>
<Col md="6" className={s.select2}>
<Select2
value={this.state.defaultSelectVal}
data={this.state.selectDefaultData}
/>
</Col>
</FormGroup>
<FormGroup row>
<Label md="4" for="grouped-select">Select with search & groups</Label>
<Col md="6" className={s.select2}>
<Select2
data={this.state.selectGroupData}
/>
</Col>
</FormGroup>
</Form>
<Form>
<legend>Dropdown based colored selects</legend>
<FormGroup row>
<Label md="4" for="simple-select">Simple select</Label>
<Col md="8">
<UncontrolledButtonDropdown>
<DropdownToggle
caret color="default"
className="dropdown-toggle-split mr-xs"
>
{this.state.simpleSelectDropdownValue}
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.changeSelectDropdownSimple}>
Option One
</DropdownItem>
<DropdownItem onClick={this.changeSelectDropdownSimple}>
Option Two
</DropdownItem>
<DropdownItem onClick={this.changeSelectDropdownSimple}>
Option Three
</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<span className="help-block">Auto size</span>
</Col>
</FormGroup>
<FormGroup row>
<Label md="4" for="simple-red-select">
Colored ones
<span className="help-block">A bit of Japanese</span>
</Label>
<Col md="8">
<UncontrolledButtonDropdown>
<DropdownToggle
caret color="danger"
className="dropdown-toggle-split mr-xs"
>
{this.state.redSelectDropdownValue}
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.changeSelectDropdownRed}>
Ichi
</DropdownItem>
<DropdownItem onClick={this.changeSelectDropdownRed}>
Ni
</DropdownItem>
<DropdownItem onClick={this.changeSelectDropdownRed}>
San
</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown>
<DropdownToggle
caret color="warning"
className="dropdown-toggle-split mr-xs"
>
{this.state.orangeSelectDropdownValue}
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.changeSelectDropdownOrange}>
Shi
</DropdownItem>
<DropdownItem onClick={this.changeSelectDropdownOrange}>
Go
</DropdownItem>
<DropdownItem onClick={this.changeSelectDropdownOrange}>
Roku
</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown>
<DropdownToggle
caret color="success"
className="dropdown-toggle-split"
>
{this.state.greenSelectDropdownValue}
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.changeSelectDropdownGreen}>
Hichi
</DropdownItem>
<DropdownItem onClick={this.changeSelectDropdownGreen}>
Hachi
</DropdownItem>
<DropdownItem onClick={this.changeSelectDropdownGreen}>
Ku
</DropdownItem>
<DropdownItem onClick={this.changeSelectDropdownGreen}>
Ju
</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</Col>
</FormGroup>
<FormGroup row>
<Label md="4" for="simple-big-select">
Big One
<span className="help-block">
Size can be controlled with <code>size=&apos;lg&apos;</code> & <code>size=&apos;
sm&apos;</code>
</span>
</Label>
<Col md="8">
<UncontrolledButtonDropdown id="simple-big-select">
<DropdownToggle
caret color="default" size="lg"
className="dropdown-toggle-split"
>
<span className="mr-5"> {this.state.bigSelectDropdownValue}</span>
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.changeSelectDropdownBig}>
Fourth Item
</DropdownItem>
<DropdownItem onClick={this.changeSelectDropdownBig}>
Fifth Item
</DropdownItem>
<DropdownItem onClick={this.changeSelectDropdownBig}>
Sixth Item
</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</Col>
</FormGroup>
</Form>
</Widget>
</Col>
</Row>
<Row>
<Col md="12">
<Widget
title={<h6> Checkbox <strong>Controls</strong></h6>} settingsInverse refresh
close
>
<Row>
<Col lg="4">
<Form>
<legend>Basic</legend>
<p>
Supports bootstrap brand colors: <code>.abc-checkbox-primary</code>,
<code>.abc-checkbox-info</code>
etc.
Pure <abbr title="Cascading Style Sheet">css</abbr> solution with no
javascript.
Let your checkboxes shine!
</p>
<FormGroup className="checkbox abc-checkbox" check>
<Input id="checkbox1" type="checkbox" />{' '}
<Label for="checkbox1" check>
Default
</Label>
</FormGroup>
<FormGroup className="checkbox abc-checkbox abc-checkbox-primary" check>
<Input id="checkbox2" type="checkbox" defaultChecked />{' '}
<Label for="checkbox2" check>
Primary
</Label>
</FormGroup>
<FormGroup className="checkbox abc-checkbox abc-checkbox-success" check>
<Input id="checkbox3" type="checkbox" />{' '}
<Label for="checkbox3" check>
Success
</Label>
</FormGroup>
<FormGroup className="checkbox abc-checkbox abc-checkbox-info" check>
<Input id="checkbox4" type="checkbox" defaultChecked />{' '}
<Label for="checkbox4" check>
Info
</Label>
</FormGroup>
<FormGroup className="checkbox abc-checkbox abc-checkbox-warning" check>
<Input id="checkbox5" type="checkbox" defaultChecked />{' '}
<Label for="checkbox5" check>
Warning
</Label>
</FormGroup>
<FormGroup className="checkbox abc-checkbox abc-checkbox-danger" check>
<Input id="checkbox6" type="checkbox" defaultChecked />{' '}
<Label for="checkbox6" check>
Check me out
</Label>
</FormGroup>
</Form>
</Col>
<Col lg="4">
<Form>
<legend>Circled</legend>
<p>
<code>.abc-checkbox-circle</code> for roundness. No more sad controls
controls.
Check out this brand-new rounded checkboxes!
</p>
<FormGroup className="checkbox abc-checkbox abc-checkbox-circle" check>
<Input id="checkbox7" type="checkbox" />{' '}
<Label for="checkbox7" check>
Simple Rounded
</Label>
</FormGroup>
<FormGroup
className="checkbox abc-checkbox abc-checkbox-info abc-checkbox-circle" check
>
<Input id="checkbox8" type="checkbox" defaultChecked />{' '}
<Label for="checkbox8" check>
Me too
</Label>
</FormGroup>
</Form>
</Col>
<Col lg="4">
<Form>
<legend>Disabled</legend>
<p>
Disabled state also supported. Full stack checkbox functionality.
</p>
<FormGroup className="checkbox abc-checkbox" check>
<Input id="checkbox9" type="checkbox" disabled />{' '}
<Label for="checkbox9" check>
Can&apos;t check this
</Label>
</FormGroup>
<FormGroup className="checkbox abc-checkbox abc-checkbox-success" check>
<Input id="checkbox10" type="checkbox" disabled defaultChecked />{' '}
<Label for="checkbox10" check>
This too
</Label>
</FormGroup>
<FormGroup
className="checkbox abc-checkbox abc-checkbox-warning abc-checkbox-circle"
check
>
<Input id="checkbox11" type="checkbox" disabled defaultChecked />{' '}
<Label for="checkbox11" check>
And this
</Label>
</FormGroup>
</Form>
</Col>
</Row>
<p className="fs-mini">Built with <a
href="https://github.com/flatlogic/awesome-bootstrap-checkbox"
rel="noopener noreferrer" target="_blank"
>awesome-bootstrap-checkbox</a>.
</p>
</Widget>
</Col>
</Row>
<Row>
<Col md="12">
<Widget title={<h6> Radio <strong>Controls</strong></h6>} close refresh settingsInverse>
<Form>
<Row>
<Col lg="4">
<legend>Basic</legend>
<p>
Supports bootstrap brand colors: <code>.abc-radio-primary</code>, <code>.abc-radio-danger</code>
etc.
Pure css solution with no javascript. Let your radios shine!
</p>
<Row>
<Col md="6">
<FormGroup className="radio abc-radio">
<Input
type="radio" name="radio1" id="radio1" value="option1"
defaultChecked
/>
<Label for="radio1">Small</Label>
</FormGroup>
<FormGroup className="radio abc-radio">
<Input type="radio" id="radio2" name="radio1" value="option2" />
<Label for="radio2">Big</Label>
</FormGroup>
</Col>
<Col md="6">
<FormGroup className="radio abc-radio abc-radio-danger">
<Input type="radio" id="radio3" value="option1" name="radio2" />
<Label for="radio3">Next</Label>
</FormGroup>
<FormGroup className="radio abc-radio abc-radio-danger">
<Input
type="radio" id="radio4" value="option2" name="radio2"
defaultChecked
/>
<Label for="radio4">One</Label>
</FormGroup>
</Col>
</Row>
</Col>
<Col lg="4">
<legend>
Disabled
</legend>
<p>
Disabled state also supported. Full stack radios functionality.
</p>
<FormGroup className="radio abc-radio">
<Input type="radio" name="radio3" id="radio5" value="option1" disabled />
<Label for="radio5">Next</Label>
</FormGroup>
<FormGroup className="radio abc-radio abc-radio-warning">
<Input
type="radio" name="radio3" id="radio6" value="option2" disabled
defaultChecked
/>
<Label for="radio6">One</Label>
</FormGroup>
</Col>
<Col lg="4">
<legend>
Cool iOS-like switches
</legend>
<p>
Simple component that helps you turn your default HTML checkbox inputs into
beautiful iOS 7 style switches in just few simple steps.
</p>
<FormGroup className="display-inline-block checkbox-ios">
<Label for="checkbox-ios1" className="switch">
<Input
type="checkbox" className="ios" defaultChecked
id="checkbox-ios1"
/><i />
</Label>
</FormGroup>
<FormGroup className="display-inline-block checkbox-ios ml">
<Label for="checkbox-ios2" className="switch">
<Input type="checkbox" className="ios" id="checkbox-ios2" /><i />
</Label>
</FormGroup>
</Col>
</Row>
</Form>
</Widget>
</Col>
</Row>
<Row>
<Col lg="6" md="12">
<Widget title={<h6>Pickers</h6>} close refresh settingsInverse>
<Form>
<legend>Date & Time</legend>
<FormGroup>
<Label for="datetimepicker">Time-enabled</Label>
<Row>
<Col xs="6">
<div className="datepicker" style={{display: 'flex'}}>
<Datetime
id="datepicker"
open={this.state.isDatePickerOpen}
viewMode="days" timeFormat={false}
inputProps={{ ref: (input) => { this.refDatePicker = input; } }}
/>
<InputGroupAddon addonType="append" onClick={() => { this.refDatePicker.focus(); }}>
<span className="input-group-text"><i className="glyphicon glyphicon-th" /></span>
</InputGroupAddon>
</div>
</Col>
<Col xs="6">
<div className="datepicker" style={{display: 'flex'}}>
<Datetime
open={this.state.isTimePickerOpen} id="timepicker"
inputProps={{ ref: (input) => { this.refTimePicker = input; } }}
viewMode="time" dateFormat={false}
/>
<InputGroupAddon addonType="append" onClick={() => { this.refTimePicker.focus(); }}>
<span className="input-group-text"><i className="glyphicon glyphicon-time" /></span>
</InputGroupAddon>
</div>
</Col>
</Row>
</FormGroup>
</Form>
<Form>
<legend>Colors</legend>
<FormGroup>
<Label for="colorpickeri">
Simple select
<span className="help-block">
Colorpicker plugin for Twitter Bootstrap, originally written by Stefan Petre
</span>
<InputGroup id="colorpicker">
<Input
type="text" onChange={this.changeColorInput} id="colorpickeri"
value={this.state.colorpickerInputValue}
/>
<InputGroupAddon addonType="append">
<span className="input-group-text"><ColorPicker
animation="slide-up"
color={this.state.colorpickerValue}
onChange={this.changeColorValue}
/></span>
</InputGroupAddon>
</InputGroup>
</Label>
</FormGroup>
</Form>
</Widget>
</Col>
<Col lg="6" md="12">
<Widget title={<h6> Input <strong>Masks</strong></h6>} close settingsInverse refresh>
<Form className="form-label-left">
<legend>Masked inputs</legend>
<FormGroup row>
<Label md="4" xs="12" for="mask-phone">
Phone
<span className="help-block">(123) 456-7890</span>
</Label>
<Col md="6" xs="12">
<MaskedInput
className="form-control" id="mask-phone" mask="(111) 111-1111"
size="10"
/>
</Col>
</FormGroup>
<FormGroup row>
<Label md="4" xs="12" for="mask-int-phone">
International Phone
<span className="help-block">+375 123 456 789</span>
</Label>
<Col md="6" xs="12">
<MaskedInput
className="form-control" id="mask-int-phone"
mask="+111 111 111 111"
/>
</Col>
</FormGroup>
<FormGroup row>
<Label md="4" xs="12" for="mask-date">
Date Format
<span className="help-block">07-03-2013</span>
</Label>
<Col md="6" xs="12">
<MaskedInput className="form-control" id="mask-date" mask="11-11-1111" />
</Col>
</FormGroup>
<FormGroup row>
<Label md="4" xs="12" for="mask-time">
Time
<span className="help-block">13:43</span>
</Label>
<Col md="6" xs="12">
<MaskedInput className="form-control" id="mask-date1" mask="11:11" />
</Col>
</FormGroup>
</Form>
</Widget>
</Col>
</Row>
<Row>
<Col xs="12">
<Widget title={<h6>Sliders</h6>} settingsInverse close refresh>
<Row>
<Col lg="4">
<h4>Color Options</h4>
<p>Sing extends Bootstrap Slider and provides different color options:</p>
<Form>
<div className="mb-sm">
<ReactBootstrapSlider
value={14}
step={1}
min={0}
max={20}
/>
</div>
<div className="slider-danger mb-sm">
<ReactBootstrapSlider
value={18}
step={1}
min={0}
max={20}
/>
</div>
<div className="slider-warning mb-sm">
<ReactBootstrapSlider
value={7}
step={1}
min={0}
max={20}
/>
</div>
<div className="slider-success mb-sm">
<ReactBootstrapSlider
value={11}
step={1}
min={0}
max={20}
/>
</div>
<div className="slider-inverse mb-sm">
<ReactBootstrapSlider
value={4}
step={1}
min={0}
max={20}
/>
</div>
</Form>
</Col>
<Col lg="4">
<h4>Slider Orientation</h4>
<p>
Vertical orientation is also possible. Simply changing <strong>
data-slider-orientation </strong>
attribute does the thing.
</p>
<Row>
<Col md="8">
<span className="">
<ReactBootstrapSlider
value={14}
step={1}
min={0}
max={20}
orientation="vertical"
/>
</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span className="slider-inverse">
<ReactBootstrapSlider
value={18}
step={1}
min={0}
max={20}
orientation="vertical"
/>
</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span className="">
<ReactBootstrapSlider
value={7}
step={1}
min={0}
max={20}
orientation="vertical"
/>
</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span className="slider-inverse">
<ReactBootstrapSlider
value={11}
step={1}
min={0}
max={20}
orientation="vertical"
/>
</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span className="">
<ReactBootstrapSlider
value={4}
step={1}
min={0}
max={20}
orientation="vertical"
/>
</span>
</Col>
</Row>
</Col>
<Col lg="4">
<h4>Range Selector</h4>
<p>Range selector, options specified via <strong>data-slider-value</strong>
attribute as
an array. Price range selector:</p>
<span className="slider-warning">
<ReactBootstrapSlider
step={1}
min={0}
max={2000}
value={[200, 1547]} range
/>
&nbsp;
</span>
</Col>
</Row>
</Widget>
</Col>
</Row>
<Row>
<Col lg="6" md={12}>
<Widget
title={<h6>Simple <strong>file uploads</strong></h6>} settingsInverse close
refresh
>
<Form>
<blockquote className="blockquote blockquote-reverse">
<p>The man who is really serious, with the urge to find out what truth is, has no
style at all. He lives only in what is.</p>
<footer>Bruce Lee</footer>
</blockquote>
<FormGroup row>
<Label md="4" className="text-md-right">
File input widget
</Label>
<Col md="8">
<InputGroup className="fileinput fileinput-new">
<input
onChange={this.onChangeInputFiles}
id="fileupload1"
type="file" name="file" className="display-none"
/>
<Label for="fileupload1" className="form-control">
{this.state.inputFiles.length > 0 ? <div>
{this.state.inputFiles.map((file, idx) => (
<span key={`select-id-${idx.toString()}`} >{file.name}</span>
))}
</div> : <span />}
</Label>
{this.state.inputFiles.length === 0 ? <InputGroupAddon addonType="append">
<Button type="button" color="default" className="btn-file">
<Label for="fileupload1">Select file</Label>
</Button>
</InputGroupAddon> : <InputGroupAddon addonType="append">
<Button type="button" color="default">
<Label for="fileupload1">Change file</Label>
</Button>
<Button
type="reset" color="default"
onClick={this.removeInputFiles}
>
<Label>Remove file</Label>
</Button>
</InputGroupAddon>}
</InputGroup>
<span className="help-block">Awesome file input plugin allows you to create a visually appealing
file or image inputs.</span>
</Col>
</FormGroup>
<FormGroup row>
<Label md="4" className="text-md-right">
Image upload widget
</Label>
<Col md="8">
<input
accept="image/*" onChange={this.onChangeInputImage}
id="fileupload2"
type="file" name="file" className="display-none"
/>
<div className="fileinput fileinput-new fileinput-fix">
<div className="fileinput-new thumbnail">
{this.state.imageFiles.length > 0 ? <div>
{this.state.imageFiles.map((file, idx) => (
<img alt="..." src={file.preview} key={`img-id-${idx.toString()}`} />))}
</div> : <img
alt="..."
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTEiIGhlaWdodD0iMTQxIj48cmVjdCB3aWR0aD0iMTkxIiBoZWlnaHQ9IjE0MSIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijk1LjUiIHk9IjcwLjUiIHN0eWxlPSJmaWxsOiNhYWE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LXNpemU6MTJweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xOTF4MTQxPC90ZXh0Pjwvc3ZnPg=="
/>}
</div>
</div>
<div>
<Button type="button" color="default"><Label for="fileupload2">Select
image</Label></Button>
</div>
<span className="help-block">Showing a thumbnail instead of the filename when uploading an image.</span>
</Col>
</FormGroup>
</Form>
</Widget>
</Col>
<Col lg="6" md={12}>
<Widget title={<h6><strong>Drop</strong> Zone</h6>} settingsInverse refresh close>
<div>
<Dropzone
onDrop={this.onDrop} accept="image/*"
className={`${s.dropzone} dropzone`}
>
{this.state.dropFiles.length > 0 ? <div>
{this.state.dropFiles.map((file, idx) => (
<div className="display-inline-block mr-xs mb-xs" key={`drop-id-${idx.toString()}`}>
<img alt="..." src={file.preview} width={100} />
<div>{file.name}</div>
</div>
))}
</div> : <p>This dropzone accepts only images.
Try dropping some here, or click to select files to upload.</p>}
</Dropzone>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default Elements;
@import '../../../../styles/app';
:global {
@import '../../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg';
@import '../../../../../node_modules/react-select2-wrapper/css/select2';
@import '../../../../../node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox';
@import '../../../../../node_modules/react-datetime/css/react-datetime';
@import '../../../../../node_modules/rc-color-picker/dist/rc-color-picker';
@import '../../../../../node_modules/bootstrap-slider/dist/css/bootstrap-slider';
@import '../../../../../node_modules/jasny-bootstrap/dist/css/jasny-bootstrap';
@import '../../../../../node_modules/react-mde/lib/styles/scss/react-mde-all';
}
.autogrow {
overflow: hidden;
resize: none;
}
.wysiwygWrapper {
border: 1px solid #ccc !important;
overflow: visible;
height: 270px;
}
.wysiwygToolbar {
color: $gray-800 !important;
background-color: #ddd !important;
border-color: transparent !important;
:global {
.rdw-option-wrapper {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
height: 30px;
min-width: 30px;
margin: 0;
background: #f8f8f8;
}
.rdw-dropdown-wrapper {
background: #f8f8f8;
}
}
}
.wysiwygEditor {
position: relative !important;
overflow: hidden !important;
height: 150px;
line-height: 0.1;
}
.select2 {
:global {
.select2-container {
width: 100% !important;
}
.select2-selection--single {
border-color: $input-border-color;
&,
& :global .select2-selection__arrow {
height: $input-height;
}
& :global .select2-selection__rendered {
line-height: $input-height;
}
}
}
}
.root {
:global {
/*
* Switchery.
*/
.abc-checkbox,
.abc-radio {
.form-check-input {
position: relative;
margin: 0;
}
}
.display-inline-block {
display: inline-block;
}
.display-none {
display: none;
}
.switch {
box-sizing: content-box;
}
.switch input {
display: none;
}
.switch i {
display: inline-block;
cursor: pointer;
padding-right: 20px;
transition: all ease 0.2s;
-webkit-transition: all ease 0.2s;
border-radius: 20px;
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
}
.switch i::before {
display: block;
content: '';
width: 30px;
height: 30px;
padding: 1px;
border-radius: 20px;
background: white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.switch :checked + i {
padding-right: 0;
padding-left: 20px;
background: rgb(100, 189, 99);
}
/* Datepicker */
.datepicker {
.input-group-addon {
display: inline-block;
position: relative;
top: -2px;
left: -2px;
}
i.glyphicon {
vertical-align: top;
}
.rdt {
display: inline-block;
}
}
/* slider */
$slider-line-height: 8px;
$slider-handle-size: 26px;
.slider {
display: inline-block;
vertical-align: middle;
position: relative;
.slider-handle {
position: absolute;
width: $slider-handle-size;
height: $slider-handle-size;
background: $white;
border: 0 solid transparent;
@include box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 5));
&:focus {
outline: 0;
}
&.round {
border-radius: 50%;
}
&.triangle {
background: transparent none;
}
}
&.slider-horizontal {
width: 210px;
height: $slider-line-height;
.slider-track {
height: $slider-line-height/2;
width: 100%;
margin-top: -$slider-line-height/4;
top: 50%;
left: 0;
}
.slider-selection {
height: 100%;
top: 0;
bottom: 0;
}
.slider-handle {
margin-left: -$slider-handle-size/2;
margin-top: -$slider-handle-size*3/8;
&.triangle {
border-width: 0 $slider-line-height/2 $slider-line-height/2 $slider-line-height/2;
width: 0;
height: 0;
border-bottom-color: #0480be;
margin-top: 0;
}
}
}
&.slider-vertical {
height: 210px;
width: $slider-line-height;
.slider-track {
width: $slider-line-height/2;
height: 100%;
margin-left: -$slider-line-height/4;
left: 50%;
top: 0;
}
.slider-selection {
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.slider-handle {
margin-left: -$slider-handle-size*3/8;
margin-top: -$slider-handle-size/2;
&.triangle {
border-width: $slider-line-height/2 0 $slider-line-height/2 $slider-line-height/2;
width: 1px;
height: 1px;
border-left-color: #0480be;
margin-left: 0;
}
}
}
&.slider-disabled {
.slider-handle {
// @include gradient-y(#dfdfdf, #bebebe);
}
.slider-track {
@include gradient-y(#e5e5e5, #e9e9e9);
cursor: not-allowed;
}
}
input {
display: none;
}
.tooltip-inner {
white-space: nowrap;
}
}
.slider-selection {
position: absolute;
background: theme-color('primary');
@include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, 0.15));
box-sizing: border-box;
border-radius: $border-radius;
}
.slider-danger .slider .slider-selection {
background: theme-color('danger'); // $brand-danger;
}
.slider-success .slider .slider-selection {
background: theme-color('success'); // $brand-success;
}
.slider-warning .slider .slider-selection {
background: theme-color('warning'); // $brand-warning;
}
.slider-info .slider .slider-selection {
background: theme-color('info'); // $brand-info;
}
.slider-inverse .slider .slider-selection {
background: $gray-700; // $gray;
}
.slider-track {
position: absolute;
cursor: pointer;
border-radius: $border-radius;
@include gradient-y(#eee, #f8f8f8);
@include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1));
}
/* file input */
.fileinput.fileinput-new {
.thumbnail {
padding: $thumbnail-padding;
line-height: $line-height-base;
background-color: $thumbnail-bg;
border: $thumbnail-border-width solid $thumbnail-border-color;
border-radius: $thumbnail-border-radius;
transition: all 0.2s ease-in-out;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.075));
}
&.fileinput-fix {
width: 200px;
height: 150px;
}
}
.btn {
label {
margin-bottom: 0;
}
}
.fileinput-preview.fileinput-exists {
border: 1px solid $input-border-color;
border-radius: $border-radius;
padding: 5px;
}
.fileinput.input-group {
display: flex;
}
.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
border-radius: 0 $border-radius $border-radius 0;
&.btn-xs,
&.btn-sm {
border-radius: 0 $border-radius-sm $border-radius-sm 0;
}
&.btn-lg {
border-radius: 0 $border-radius-lg $border-radius-lg 0;
}
}
.form-group.has-warning .fileinput {
.fileinput-preview {
color: #fff;
}
.thumbnail {
border-color: theme-color('warning');
}
}
.form-group.has-error .fileinput {
.fileinput-preview {
color: #fff;
}
.thumbnail {
border-color: theme-color('danger');
}
}
.form-group.has-success .fileinput {
.fileinput-preview {
color: #fff;
}
.thumbnail {
border-color: theme-color('success');
}
}
.btn-label {
background: transparent;
left: 2px;
padding: 1px 6px;
}
// Opposite alignment of blockquote
.blockquote {
padding: ($spacer / 2) $spacer;
margin-bottom: $spacer;
font-size: $blockquote-font-size;
border-left: 0.25rem solid $gray-300;
}
.blockquote footer {
display: block;
font-size: 80%; // back to default font-size
color: $blockquote-small-color;
&::before {
content: '\2014 \00A0'; // em dash, nbsp
}
}
.blockquote-reverse {
padding-right: $spacer;
padding-left: 0;
text-align: right;
border-right: 0.25rem solid $gray-300;
border-left: 0;
}
.blockquote-reverse footer {
&::before {
content: '';
}
&::after {
content: '\00A0 \2014'; // nbsp, em dash
}
}
}
}
.dropzone {
width: 100%;
text-align: center;
padding: 40px 10px;
height: 200px;
border: 2px dashed #ccc;
@include border-radius($border-radius);
img {
max-height: 100px;
max-width: 150px;
border-radius: 5px;
}
}
{
"name": "FormsElements",
"version": "0.0.0",
"private": true,
"main": "./Elements.js"
}
import React from 'react';
import {
Row,
Col,
Button,
FormGroup,
Label,
} from 'reactstrap';
import Formsy from 'formsy-react';
import InputValidation from '../../../../components/InputValidation';
import Widget from '../../../../components/Widget';
class Validation extends React.Component {
render() {
return (
<div>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">Form Validation</li>
</ol>
<h1 className="page-title">Form - <span className="fw-semi-bold">Validation</span>
</h1>
<Row>
<Col xs={0} lg={1} />
<Col lg={8} xs={12}>
<Widget
title={<h5> Dead simple validation
<small> No JS needed to tune-up</small>
</h5>} close collapse
>
<Formsy.Form>
<fieldset>
<legend>
By default validation is started only after at least 3 characters have been input.
</legend>
<FormGroup row>
<Label md={3} xs={12} for="basic">Simple required</Label>
<Col md={9} xs={12}>
<InputValidation
type="text"
id="basic"
name="basic"
required
/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={3} xs={12} for="basic-change">Min-length On Change
<span className="help-block"> At least 10 </span>
</Label>
<Col md={9} xs={12}>
<InputValidation
type="text" id="basic-change"
name="basic-change"
trigger="change"
validations={{ minLength: 10 }}
validationError={{
minLength: 'This value is too short. It should have 10 characters or more.',
}}
required
/>
</Col>
</FormGroup>
</fieldset>
<fieldset>
<legend>
<span className="badge badge-warning text-gray-dark mr-xs">
HTML5 </span> input types supported
</legend>
<FormGroup row>
<Label md={3} xs={12} for="email">E-mail</Label>
<Col md={9} xs={12}>
<InputValidation
type="text"
id="email"
name="email"
trigger="change"
required
validations={{ isEmail: true }}
validationError={{ isEmail: 'This value should be a valid email.' }}
/>
<span className="help-block">
This one is triggered even when 1 character has been input
</span>
{/* todo: change triggered */}
</Col>
</FormGroup>
<FormGroup row>
<Label md={3} xs={12} for="number">Number</Label>
<Col md={9} xs={12}>
<InputValidation
type="text"
id="number"
name="number"
required
validations="isNumeric"
validationError={{ isNumeric: 'This value should be a valid number.' }}
/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={3} xs={12} for="range">Range</Label>
<Col md={9} xs={12}>
<InputValidation
type="text"
id="range"
name="range"
trigger="change"
required
validations="isRange:[10,100]"
validationError={{ isRange: 'This value should be between 10 and 100.' }}
/>
</Col>
</FormGroup>
</fieldset>
<fieldset>
<legend>
More validation
</legend>
<FormGroup row>
<Label md={3} xs={12} for="password"> Password helpers</Label>
<Col md={9} xs={12}>
<InputValidation
type="password"
id="password"
name="password"
trigger="change"
className="mb-xs"
validations={{ minLength: 6 }}
validationError={{
minLength: 'This value is too short. It should have 6 characters or more.',
}}
required
/>
<InputValidation
type="password"
id="password-r"
name="password-r"
trigger="change"
className="mb-sm"
validations={{ equalsField: 'password', minLength: 6 }}
validationError={{
equalsField: 'This value should be the same.',
minLength: 'This value is too short. It should have 6 characters or more.',
}}
required
/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={3} xs={12} for="website">Website</Label>
<Col md={9} xs={12}>
<InputValidation
type="text"
id="website"
name="website"
trigger="change"
validations="isUrl"
validationError={{
isUrl: 'This value should be a valid url.',
}}
required
/>
</Col>
</FormGroup>
</fieldset>
<div className="form-action">
<Button type="submit" color="danger" className="btn-rounded float-right">Validate & Submit</Button>
<Button type="button" color="default" className="btn-rounded">Cancel</Button>
</div>
</Formsy.Form>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default Validation;
{
"name": "FormValidation",
"version": "0.0.0",
"private": true,
"main": "./Validation.js"
}
import React from 'react';
import {
Row,
Col,
Button,
FormGroup,
Label,
Nav,
NavLink,
NavItem,
Progress,
} from 'reactstrap';
import Formsy from 'formsy-react';
import Select2 from 'react-select2-wrapper';
import MaskedInput from 'react-maskedinput';
import Datetime from 'react-datetime';
import { select2CountriesData, select2ShipmentData, cardTypesData } from './data';
import InputValidation from '../../../../components/InputValidation/InputValidation';
import Widget from '../../../../components/Widget';
import s from './Wizard.module.scss';
const count = 4;
const StepsComponents = {
Step1: function Step1() {
return (<fieldset>
<FormGroup>
<Label for="username">Username</Label>
<InputValidation
type="text"
id="username"
name="username"
validations={{ isAlphanumeric: true }}
trigger="change"
required
validationError={{ isAlphanumeric: 'Username can contain any letters or numbers, without spaces' }}
/>
<p className="help-block">Username can contain any letters or numbers, without spaces</p>
</FormGroup>
<FormGroup>
<Label for="email">Email</Label>
<InputValidation
type="text"
id="email"
name="email"
validations={{ isEmail: true }}
required
validationError={{ isEmail: 'Please provide your E-mail' }}
/>
<p className="help-block">Please provide your E-mail</p>
</FormGroup>
<FormGroup>
<Label for="address">Address</Label>
<InputValidation
type="text"
id="address"
name="address"
validations={{ isAlpha: true }}
required
validationError={{ isAlpha: 'Please provide your address' }}
/>
<p className="help-block">Please provide your address</p>
</FormGroup>
</fieldset>);
},
Step2: function Step2() {
return (
<fieldset>
<FormGroup>
<Label for="country-select">Destination Country</Label>
<Select2
style={{ width: '100%' }}
id="country-selec"
data={select2CountriesData}
/>
<p className="help-block">Please choose your country destination</p>
</FormGroup>
<FormGroup>
<Label for="courier">Choose shipping option</Label>
<Select2
style={{ width: '100%' }}
id="courier"
data={select2ShipmentData}
/>
<p className="help-block">Please choose your shipping option</p>
</FormGroup>
<FormGroup>
<Label for="destination">Destination Zip Code</Label>
<MaskedInput
className="form-control" id="destination" mask="111111"
size="6"
/>
<p className="help-block">Please provide your Destination Zip Code</p>
</FormGroup>
<FormGroup>
<Label for="dest-address">Destination Address</Label>
<InputValidation type="text" id="dest-address" name="dest-address" />
<p className="help-block">Please provide the destination address</p>
</FormGroup>
</fieldset>
);
},
Step3: function Step3(props) {
return (
<fieldset>
<FormGroup>
<Label for="name">Name on the Card</Label>
<InputValidation type="text" id="name" name="name" />
</FormGroup>
<FormGroup>
<Label for="credit-card-type">Choose shipping option</Label>
<Select2
style={{ width: '100%' }}
id="credit-card-type"
data={cardTypesData}
/>
</FormGroup>
<FormGroup>
<Label for="credit">Credit Card Number</Label>
<InputValidation type="text" id="credit" name="credit" />
</FormGroup>
<FormGroup>
<Label for="expiration-data">Expiration Date</Label>
<div className="datepicker">
<Datetime
id="datepicker"
open={props.isDatePickerOpen} //eslint-disable-line
viewMode="days"
/>
</div>
</FormGroup>
</fieldset>
);
},
Step4: function Step4() {
return (
<fieldset>
<h2>Thank you!</h2>
<p>Your submission has been received.</p>
</fieldset>
);
},
};
class Wizard extends React.Component {
constructor(prop) {
super(prop);
this.state = {
currentStep: 1,
progress: 25,
isDatePickerOpen: false,
};
this.nextStep = this.nextStep.bind(this);
this.previousStep = this.previousStep.bind(this);
}
nextStep() {
let currentStep = this.state.currentStep;
if (currentStep >= count) {
currentStep = count;
} else {
currentStep += 1;
}
this.setState({
currentStep,
progress: (100 / count) * currentStep,
});
}
previousStep() {
let currentStep = this.state.currentStep;
if (currentStep <= 1) {
currentStep = 1;
} else {
currentStep -= 1;
}
this.setState({
currentStep,
progress: (100 / count) * currentStep,
});
}
render() {
const currentStep = this.state.currentStep;
return (
<div className={s.root}>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">Form Wizard</li>
</ol>
<h1 className="page-title">Form - <span className="fw-semi-bold">Wizard</span>
</h1>
<Row>
<Col xl={8} lg={12}>
<Widget
close collapse
className={s.formWizard}
title={<div>
<h4>
Wizard&nbsp;
<small>Tunable widget</small>
</h4>
<p className="text-muted">An example of complete wizard form in widget.</p></div>}
>
<Nav pills justified className={s.wizardNavigation}>
<NavItem>
<NavLink active={currentStep === 1}>
<small>1.</small>
&nbsp;
Your Details
</NavLink>
</NavItem>
<NavItem>
<NavLink active={currentStep === 2}>
<small>2.</small>
&nbsp;
Shipping
</NavLink>
</NavItem>
<NavItem>
<NavLink active={currentStep === 3}>
<small>3.</small>
&nbsp;
Pay
</NavLink>
</NavItem>
<NavItem>
<NavLink active={currentStep === 4}>
<small>4.</small>
&nbsp;
Thank you!
</NavLink>
</NavItem>
</Nav>
<Progress value={this.state.progress} color="gray-light" className="progress-xs" />
<div className="tab-content">
<div className={s.stepBody}>
<Formsy.Form>
{currentStep === 1 && <StepsComponents.Step1 />}
{currentStep === 2 && <StepsComponents.Step2 />}
{currentStep === 3 && <StepsComponents.Step3 />}
{currentStep === 4 &&
<StepsComponents.Step4 isDatePickerOpen={this.state.isDatePickerOpen} />}
</Formsy.Form>
</div>
<div className="description">
<ul className="pager wizard">
<li className="previous">
<Button disabled={currentStep === 1} color="primary" onClick={this.previousStep}><i
className="fa fa-caret-left"
/>
&nbsp;Previous</Button>
</li>
{currentStep < count &&
<li className="next">
<Button color="primary" onClick={this.nextStep}>Next <i className="fa fa-caret-right" /></Button>
</li>
}
{currentStep === count &&
<li className="finish">
<Button color="success">Finish <i className="fa fa-check" /></Button>
</li>
}
</ul>
</div>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default Wizard;
@import '../../../../styles/app';
:global {
@import '../../../../../node_modules/react-select2-wrapper/css/select2';
@import '../../../../../node_modules/react-datetime/css/react-datetime';
}
.root {
:global {
.tab-content {
overflow: visible;
}
}
.formWizard {
:global {
.progress {
margin-top: 6px;
margin-bottom: 10px;
}
.form-group:last-child {
margin-bottom: 0;
}
.pager {
display: flex;
margin: 18px 0;
flex-direction: row;
justify-content: space-between;
.disabled button {
cursor: not-allowed;
opacity: 0.65;
}
}
#datepicker .input-group {
width: 100%;
display: flex !important;
.form-control {
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.input-group-addon {
display: none;
}
}
}
}
.wizardNavigation {
margin: 0 (-0.5 * $spacer) 5px;
:global {
.active {
background: theme-color('primary');
&:hover {
color: $white;
}
}
}
li {
padding: 0 (0.5 * $spacer);
}
a {
padding: $spacer;
color: $text-color;
background: $gray-300;
strong {
font-weight: $font-weight-semi-bold;
}
small {
font-weight: $font-weight-thin;
}
}
}
.stepBody {
padding: $spacer;
background: $gray-300;
border-radius: $border-radius;
}
}
export const select2CountriesData = [
{ text: 'Afghanistan', id: 'AF' },
{ text: 'land Islands', id: 'AX' },
{ text: 'Albania', id: 'AL' },
{ text: 'Algeria', id: 'DZ' },
{ text: 'American Samoa', id: 'AS' },
{ text: 'AndorrA', id: 'AD' },
{ text: 'Angola', id: 'AO' },
{ text: 'Anguilla', id: 'AI' },
{ text: 'Antarctica', id: 'AQ' },
{ text: 'Antigua and Barbuda', id: 'AG' },
{ text: 'Argentina', id: 'AR' },
{ text: 'Armenia', id: 'AM' },
{ text: 'Aruba', id: 'AW' },
{ text: 'Australia', id: 'AU' },
{ text: 'Austria', id: 'AT' },
{ text: 'Azerbaijan', id: 'AZ' },
{ text: 'Bahamas', id: 'BS' },
{ text: 'Bahrain', id: 'BH' },
{ text: 'Bangladesh', id: 'BD' },
{ text: 'Barbados', id: 'BB' },
{ text: 'Belarus', id: 'BY' },
{ text: 'Belgium', id: 'BE' },
{ text: 'Belize', id: 'BZ' },
{ text: 'Benin', id: 'BJ' },
{ text: 'Bermuda', id: 'BM' },
{ text: 'Bhutan', id: 'BT' },
{ text: 'Bolivia', id: 'BO' },
{ text: 'Bosnia and Herzegovina', id: 'BA' },
{ text: 'Botswana', id: 'BW' },
{ text: 'Bouvet Island', id: 'BV' },
{ text: 'Brazil', id: 'BR' },
{ text: 'British Indian Ocean Territory', id: 'IO' },
{ text: 'Brunei Darussalam', id: 'BN' },
{ text: 'Bulgaria', id: 'BG' },
{ text: 'Burkina Faso', id: 'BF' },
{ text: 'Burundi', id: 'BI' },
{ text: 'Cambodia', id: 'KH' },
{ text: 'Cameroon', id: 'CM' },
{ text: 'Canada', id: 'CA' },
{ text: 'Cape Verde', id: 'CV' },
{ text: 'Cayman Islands', id: 'KY' },
{ text: 'Central African Republic', id: 'CF' },
{ text: 'Chad', id: 'TD' },
{ text: 'Chile', id: 'CL' },
{ text: 'China', id: 'CN' },
{ text: 'Christmas Island', id: 'CX' },
{ text: 'Cocos (Keeling) Islands', id: 'CC' },
{ text: 'Colombia', id: 'CO' },
{ text: 'Comoros', id: 'KM' },
{ text: 'Congo', id: 'CG' },
{ text: 'Congo, The Democratic Republic of the', id: 'CD' },
{ text: 'Cook Islands', id: 'CK' },
{ text: 'Costa Rica', id: 'CR' },
{ text: "Cote D'Ivoire", id: 'CI' },
{ text: 'Croatia', id: 'HR' },
{ text: 'Cuba', id: 'CU' },
{ text: 'Cyprus', id: 'CY' },
{ text: 'Czech Republic', id: 'CZ' },
{ text: 'Denmark', id: 'DK' },
{ text: 'Djibouti', id: 'DJ' },
{ text: 'Dominica', id: 'DM' },
{ text: 'Dominican Republic', id: 'DO' },
{ text: 'Ecuador', id: 'EC' },
{ text: 'Egypt', id: 'EG' },
{ text: 'El Salvador', id: 'SV' },
{ text: 'Equatorial Guinea', id: 'GQ' },
{ text: 'Eritrea', id: 'ER' },
{ text: 'Estonia', id: 'EE' },
{ text: 'Ethiopia', id: 'ET' },
{ text: 'Falkland Islands (Malvinas)', id: 'FK' },
{ text: 'Faroe Islands', id: 'FO' },
{ text: 'Fiji', id: 'FJ' },
{ text: 'Finland', id: 'FI' },
{ text: 'France', id: 'FR' },
{ text: 'French Guiana', id: 'GF' },
{ text: 'French Polynesia', id: 'PF' },
{ text: 'French Southern Territories', id: 'TF' },
{ text: 'Gabon', id: 'GA' },
{ text: 'Gambia', id: 'GM' },
{ text: 'Georgia', id: 'GE' },
{ text: 'Germany', id: 'DE' },
{ text: 'Ghana', id: 'GH' },
{ text: 'Gibraltar', id: 'GI' },
{ text: 'Greece', id: 'GR' },
{ text: 'Greenland', id: 'GL' },
{ text: 'Grenada', id: 'GD' },
{ text: 'Guadeloupe', id: 'GP' },
{ text: 'Guam', id: 'GU' },
{ text: 'Guatemala', id: 'GT' },
{ text: 'Guernsey', id: 'GG' },
{ text: 'Guinea', id: 'GN' },
{ text: 'Guinea-Bissau', id: 'GW' },
{ text: 'Guyana', id: 'GY' },
{ text: 'Haiti', id: 'HT' },
{ text: 'Heard Island and Mcdonald Islands', id: 'HM' },
{ text: 'Holy See (Vatican City State)', id: 'VA' },
{ text: 'Honduras', id: 'HN' },
{ text: 'Hong Kong', id: 'HK' },
{ text: 'Hungary', id: 'HU' },
{ text: 'Iceland', id: 'IS' },
{ text: 'India', id: 'IN' },
{ text: 'Indonesia', id: 'ID' },
{ text: 'Iran, Islamic Republic Of', id: 'IR' },
{ text: 'Iraq', id: 'IQ' },
{ text: 'Ireland', id: 'IE' },
{ text: 'Isle of Man', id: 'IM' },
{ text: 'Israel', id: 'IL' },
{ text: 'Italy', id: 'IT' },
{ text: 'Jamaica', id: 'JM' },
{ text: 'Japan', id: 'JP' },
{ text: 'Jersey', id: 'JE' },
{ text: 'Jordan', id: 'JO' },
{ text: 'Kazakhstan', id: 'KZ' },
{ text: 'Kenya', id: 'KE' },
{ text: 'Kiribati', id: 'KI' },
{ text: 'Korea, Democratic Republic', id: 'KP' },
{ text: 'Korea, Republic of', id: 'KR' },
{ text: 'Kuwait', id: 'KW' },
{ text: 'Kyrgyzstan', id: 'KG' },
{ text: 'Lao Democratic Republic', id: 'LA' },
{ text: 'Latvia', id: 'LV' },
{ text: 'Lebanon', id: 'LB' },
{ text: 'Lesotho', id: 'LS' },
{ text: 'Liberia', id: 'LR' },
{ text: 'Libyan Arab Jamahiriya', id: 'LY' },
{ text: 'Liechtenstein', id: 'LI' },
{ text: 'Lithuania', id: 'LT' },
{ text: 'Luxembourg', id: 'LU' },
{ text: 'Macao', id: 'MO' },
{ text: 'Macedonia, The Former Yugoslav Republic of', id: 'MK' },
{ text: 'Madagascar', id: 'MG' },
{ text: 'Malawi', id: 'MW' },
{ text: 'Malaysia', id: 'MY' },
{ text: 'Maldives', id: 'MV' },
{ text: 'Mali', id: 'ML' },
{ text: 'Malta', id: 'MT' },
{ text: 'Marshall Islands', id: 'MH' },
{ text: 'Martinique', id: 'MQ' },
{ text: 'Mauritania', id: 'MR' },
{ text: 'Mauritius', id: 'MU' },
{ text: 'Mayotte', id: 'YT' },
{ text: 'Mexico', id: 'MX' },
{ text: 'Micronesia, Federated States of', id: 'FM' },
{ text: 'Moldova, Republic of', id: 'MD' },
{ text: 'Monaco', id: 'MC' },
{ text: 'Mongolia', id: 'MN' },
{ text: 'Montenegro', id: 'ME' },
{ text: 'Montserrat', id: 'MS' },
{ text: 'Morocco', id: 'MA' },
{ text: 'Mozambique', id: 'MZ' },
{ text: 'Myanmar', id: 'MM' },
{ text: 'Namibia', id: 'NA' },
{ text: 'Nauru', id: 'NR' },
{ text: 'Nepal', id: 'NP' },
{ text: 'Netherlands', id: 'NL' },
{ text: 'Netherlands Antilles', id: 'AN' },
{ text: 'New Caledonia', id: 'NC' },
{ text: 'New Zealand', id: 'NZ' },
{ text: 'Nicaragua', id: 'NI' },
{ text: 'Niger', id: 'NE' },
{ text: 'Nigeria', id: 'NG' },
{ text: 'Niue', id: 'NU' },
{ text: 'Norfolk Island', id: 'NF' },
{ text: 'Northern Mariana Islands', id: 'MP' },
{ text: 'Norway', id: 'NO' },
{ text: 'Oman', id: 'OM' },
{ text: 'Pakistan', id: 'PK' },
{ text: 'Palau', id: 'PW' },
{ text: 'Palestinian Territory, Occupied', id: 'PS' },
{ text: 'Panama', id: 'PA' },
{ text: 'Papua New Guinea', id: 'PG' },
{ text: 'Paraguay', id: 'PY' },
{ text: 'Peru', id: 'PE' },
{ text: 'Philippines', id: 'PH' },
{ text: 'Pitcairn', id: 'PN' },
{ text: 'Poland', id: 'PL' },
{ text: 'Portugal', id: 'PT' },
{ text: 'Puerto Rico', id: 'PR' },
{ text: 'Qatar', id: 'QA' },
{ text: 'Reunion', id: 'RE' },
{ text: 'Romania', id: 'RO' },
{ text: 'Russian Federation', id: 'RU' },
{ text: 'RWANDA', id: 'RW' },
{ text: 'Saint Helena', id: 'SH' },
{ text: 'Saint Kitts and Nevis', id: 'KN' },
{ text: 'Saint Lucia', id: 'LC' },
{ text: 'Saint Pierre and Miquelon', id: 'PM' },
{ text: 'Saint Vincent and the Grenadines', id: 'VC' },
{ text: 'Samoa', id: 'WS' },
{ text: 'San Marino', id: 'SM' },
{ text: 'Sao Tome and Principe', id: 'ST' },
{ text: 'Saudi Arabia', id: 'SA' },
{ text: 'Senegal', id: 'SN' },
{ text: 'Serbia', id: 'RS' },
{ text: 'Seychelles', id: 'SC' },
{ text: 'Sierra Leone', id: 'SL' },
{ text: 'Singapore', id: 'SG' },
{ text: 'Slovakia', id: 'SK' },
{ text: 'Slovenia', id: 'SI' },
{ text: 'Solomon Islands', id: 'SB' },
{ text: 'Somalia', id: 'SO' },
{ text: 'South Africa', id: 'ZA' },
{ text: 'South Georgia and the South Sandwich Islands', id: 'GS' },
{ text: 'Spain', id: 'ES' },
{ text: 'Sri Lanka', id: 'LK' },
{ text: 'Sudan', id: 'SD' },
{ text: 'Suriname', id: 'SR' },
{ text: 'Svalbard and Jan Mayen', id: 'SJ' },
{ text: 'Swaziland', id: 'SZ' },
{ text: 'Sweden', id: 'SE' },
{ text: 'Switzerland', id: 'CH' },
{ text: 'Syrian Arab Republic', id: 'SY' },
{ text: 'Taiwan, Province of China', id: 'TW' },
{ text: 'Tajikistan', id: 'TJ' },
{ text: 'Tanzania, United Republic of', id: 'TZ' },
{ text: 'Thailand', id: 'TH' },
{ text: 'Timor-Leste', id: 'TL' },
{ text: 'Togo', id: 'TG' },
{ text: 'Tokelau', id: 'TK' },
{ text: 'Tonga', id: 'TO' },
{ text: 'Trinidad and Tobago', id: 'TT' },
{ text: 'Tunisia', id: 'TN' },
{ text: 'Turkey', id: 'TR' },
{ text: 'Turkmenistan', id: 'TM' },
{ text: 'Turks and Caicos Islands', id: 'TC' },
{ text: 'Tuvalu', id: 'TV' },
{ text: 'Uganda', id: 'UG' },
{ text: 'Ukraine', id: 'UA' },
{ text: 'United Arab Emirates', id: 'AE' },
{ text: 'United Kingdom', id: 'GB' },
{ text: 'United States', id: 'US' },
{ text: 'United States Minor Outlying Islands', id: 'UM' },
{ text: 'Uruguay', id: 'UY' },
{ text: 'Uzbekistan', id: 'UZ' },
{ text: 'Vanuatu', id: 'VU' },
{ text: 'Venezuela', id: 'VE' },
{ text: 'Viet Nam', id: 'VN' },
{ text: 'Virgin Islands, British', id: 'VG' },
{ text: 'Virgin Islands, U.S.', id: 'VI' },
{ text: 'Wallis and Futuna', id: 'WF' },
{ text: 'Western Sahara', id: 'EH' },
{ text: 'Yemen', id: 'YE' },
{ text: 'Zambia', id: 'ZM' },
{ text: 'Zimbabwe', id: 'ZW' },
];
export const select2ShipmentData = [
{ id: 'Australia Post', text: 'Australia Post' },
{ id: 'DHL US', text: 'DHL US' },
{ id: 'Other', text: 'Other' },
];
export const cardTypesData = [
{ id: 'Visa', text: 'Visa' },
{ id: 'Mastercard', text: 'Mastercard' },
{ id: 'Other', text: 'Other' },
];
{
"name": "FormWizard",
"version": "0.0.0",
"private": true,
"main": "./Wizard.js"
}
import React from 'react';
import {
Row,
Col,
Label,
Input,
Form,
FormGroup,
DropdownToggle,
DropdownMenu,
DropdownItem,
UncontrolledDropdown,
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter,
} from 'reactstrap';
import $ from 'jquery';
import 'imports-loader?window.jQuery=jquery,this=>window!jquery-ui/ui/widgets/sortable'; //eslint-disable-line
import Widget from '../../../components/Widget';
import './Grid.scss';
import peopleA1 from '../../../images/people/a1.jpg';
import peopleA2 from '../../../images/people/a2.jpg';
import peopleA3 from '../../../images/people/a3.jpg';
import peopleA4 from '../../../images/people/a4.jpg';
const sortOptions = {
connectWith: '.widget-container',
handle: 'header, .handle',
cursor: 'move',
iframeFix: false,
items: '.widget:not(.locked)',
opacity: 0.8,
helper: 'original',
revert: true,
forceHelperSize: true,
placeholder: 'widget widget-placeholder',
forcePlaceholderSize: true,
tolerance: 'pointer',
};
const tooltipPlacement = 'bottom';
class Grid extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false,
modal: false,
};
this.toggleModal = this.toggleModal.bind(this);
this.closePrompt = this.closePrompt.bind(this);
}
componentDidMount() {
$('.widget-container').sortable(sortOptions);
this.initSharesWidget();
this.initNewsWidget();
}
initSharesWidget() {
$(this.sharesWidget).widgster({
loaderTemplate: `<div class="loader animated fadeIn">
<span class="spinner"><i class="fa fa-spinner fa-spin"></i></span>
</div>`,
});
}
initNewsWidget() {
/**
* Make refresh button spin when loading
*/
$('#news-widget').bind('load.widgster', () => {
$(this).find('[data-widgster="load"] > i').addClass('fa-spin');
}).bind('loaded.widgster', () => {
$(this).find('[data-widgster="load"] > i').removeClass('fa-spin');
});
}
closePrompt(callback) {
this.setState({ modal: true });
$('#news-widget-remove').bind('click', () => {
this.setState({ modal: false });
callback();
});
}
toggleModal() {
this.setState({ modal: !this.state.modal });
}
render() {
return (
<div>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">Grid</li>
</ol>
<h1 className="page-title">Grid - <span className="fw-semi-bold">Options</span></h1>
<Row>
<Col xl={7}>
<Widget
title={<h5>Draggable Grid &nbsp;<span className="badge badge-danger fw-normal">since 2.1</span></h5>}
>
<div>
<p>
<strong>Widgster</strong> is a plugin that allows to easily implement basic widget functions that
lots of our customers have requested. For now it has the following essential
widget features:
</p>
<ul className="text-list">
<li><strong>Collapse/Expand</strong> - all widgets can be collapsed to fill only header&apos;s
vertical
space;
</li>
<li><strong>Close</strong> - closable. Any widget may be removed by clicking the close btn;</li>
<li><strong>Full Screen</strong> - an option to make widget fill the whole window (just like OS);</li>
<li><strong>Ajax Load</strong> - the hottest option allowing to load/reload widget content
asynchronously. You just
need to provide an url to fetch the data from. With loader delivered.
</li>
</ul>
<p>It&apos;s available under MIT license, check out
<a href="https://github.com/flatlogic/widgster" target="_blank" rel="noopener noreferrer"> github </a>
to find it.</p>
<p>
Test it out!
</p>
</div>
</Widget>
</Col>
</Row>
<Row className="grid-demo">
<Col className="widget-container" xl={6} xs={12}>
<Widget
title={<h6>Default <span className="fw-semi-bold">Widget</span></h6>}
refresh collapse fullscreen close
showTooltip tooltipPlacement={tooltipPlacement}
>
<div>
<p>A timestamp this widget was created: Apr 24, 19:07:07</p>
<p>A timestamp this widget was updated: Apr 24, 19:07:07</p>
</div>
</Widget>
<Widget
className="shares-widget"
ref={(r) => {
this.sharesWidget = r;
}}
data-post-processing
showTooltip tooltipPlacement={tooltipPlacement}
title={<h6>
<span className="badge badge-primary"><i className="fa fa-facebook" /></span> &nbsp;
Latest <span className="fw-semi-bold">Shares</span>
</h6>}
close="Close" refresh="Reload"
bodyClass={'p-0'}
>
<div className="list-group list-group-lg">
<button className="list-group-item text-left">
<span className="thumb-sm mr">
<img className="rounded-circle" src={peopleA1} alt="..." />
</span>
<div>
<h6 className="m-0">Maikel Basso</h6>
<small className="text-muted">about 2 mins ago</small>
</div>
<i className="fa fa-circle ml-auto text-danger" />
</button>
<button className="list-group-item text-left">
<span className="thumb-sm mr">
<img className="rounded-circle" src={peopleA2} alt="..." />
</span>
<div>
<h6 className="m-0">Ianus Arendse</h6>
<small className="text-muted">about 42 mins ago</small>
</div>
<i className="fa fa-circle ml-auto text-info" />
</button>
<button className="list-group-item text-left">
<span className="thumb-sm mr">
<img className="rounded-circle" src={peopleA3} alt="..." />
</span>
<div>
<h6 className="m-0">Valdemar Landau</h6>
<small className="text-muted">one hour ago</small>
</div>
<i className="fa fa-circle ml-auto text-success" />
</button>
<button className="list-group-item text-left mb-n-md">
<span className="thumb-sm mr">
<img className="rounded-circle" src={peopleA4} alt="..." />
</span>
<div>
<h6 className="m-0">Rick Teagan</h6>
<small className="text-muted">3 hours ago</small>
</div>
<i className="fa fa-circle ml-auto text-warning" />
</button>
</div>
</Widget>
<Widget
id="autoload-widget"
data-post-processing="true"
data-widgster-autoload="true"
data-widgster-show-loader="false"
title={<h6>Autoload <span className="fw-semi-bold">Widget</span></h6>}
customControls={
<UncontrolledDropdown>
<DropdownToggle
tag="span"
data-toggle="dropdown"
>
<i className="glyphicon glyphicon-cog" />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem data-widgster="load" title="Reload">
Reload &nbsp;&nbsp;
<span className="badge badge-pill badge-success animated bounceIn">
<strong>9</strong>
</span>
</DropdownItem>
<DropdownItem data-widgster="fullscreen" title="Full Screen">Fullscreen</DropdownItem>
<DropdownItem data-widgster="restore" title="Restore">Restore</DropdownItem>
<DropdownItem divider />
<DropdownItem data-widgster="close" title="Close">Close</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
}
>
<div>
<h3 className="text-center m-0">Sign up, it&apos;s <strong>free</strong></h3>
<p className="lead text-muted text-center">
Faith makes it possible to achieve that which man&apos;s mind can conceive and believe.
</p>
<Form>
<FormGroup>
<Label for="exampleInputEmail1"><i className="fa fa-circle text-warning" /> &nbsp; Email
address</Label>
<Input
type="email" id="exampleInputEmail1"
placeholder="Enter email"
/>
</FormGroup>
<FormGroup>
<Label for="pswd"><i className="fa fa-circle text-danger" /> &nbsp; Password</Label>
<Input id="pswd" type="text" placeholder="Min 8 characters" />
</FormGroup>
<p>
To make a widget automatically load it&apos;s content you just need to set
<strong>data-widgster-autoload</strong> attribute and provide an url.
</p>
<pre><code>data-widgster-load=&quot;server/ajax_widget.html&quot;
data-widgster-autoload=&quot;true&quot;</code></pre>
<p>
<strong>data-widgster-autoload</strong> may be set to an integer value. If set, for example, to
2000 will refresh widget every 2 seconds.
</p>
<div className="clearfix">
<div className="btn-toolbar float-right">
<button type="button" className="btn btn-transparent">Cancel</button>
<button type="button" className="btn btn-success">&nbsp;Submit&nbsp;</button>
</div>
</div>
</Form>
</div>
</Widget>
<Widget>
<header>
<h6>Custom <span className="fw-semi-bold">Loader</span></h6>
</header>
<div className="widget-body" style={{ minHeight: '140px' }}>
<div className="loader animated fadeIn handle">
<span className="spinner">
<i className="fa fa-spinner fa-spin" />
</span>
</div>
</div>
</Widget>
</Col>
<Col xl={6} className="widget-container">
<Widget
id="news-widget"
data-post-processing="true"
title={<div><h6> News <span className="badge badge-pill badge-success">17</span></h6>
<span className="text-muted">spinning refresh button & close prompt</span>
</div>}
customControls={
<div>
<button data-widgster="expand" title="Expand"><i className="glyphicon glyphicon-chevron-up" /></button>
<button data-widgster="collapse" title="Collapse"><i
className="glyphicon glyphicon-chevron-down"
/></button>
<button data-widgster="load" title="I am spinning!"><i className="fa fa-refresh" /></button>
<button data-widgster="close" title="Close"><i className="glyphicon glyphicon-remove" /></button>
</div>
}
bodyClass={'p-0'}
options={{
showLoader: false,
closePrompt: this.closePrompt,
}}
>
<ul className={'news-list stretchable'}>
<li>
<span className="icon bg-danger text-white">
<i className="fa fa-star" />
</span>
<div className="news-item-info">
<h5 className="name m-0 mb-xs"><button className="btn-link">First Human Colony on Mars</button></h5>
<p className="fs-mini">
First 700 people will take part in building first human settlement outside of Earth.
That&apos;s awesome, right?
</p>
<time className="help-block">Mar 20, 18:46</time>
</div>
</li>
<li>
<span className="icon bg-info text-white">
<i className="fa fa-microphone" />
</span>
<div className="news-item-info">
<h5 className="name m-0 mb-xs"><button className="btn-link">Light Blue reached $300</button></h5>
<p className="fs-mini">
Light Blue Inc. shares just hit $300 price. &quot;This was inevitable. It should
have happen sooner or later&quot; - says NYSE expert.
</p>
<time className="help-block">Sep 25, 11:59</time>
</div>
</li>
<li>
<span className="icon bg-success text-white">
<i className="fa fa-eye" />
</span>
<div className="news-item-info">
<h5 className="name m-0 mb-xs"><button className="btn-link">No more spying</button></h5>
<p className="fs-mini">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<time className="help-block">Mar 20, 18:46</time>
</div>
</li>
</ul>
<Modal isOpen={this.state.modal} toggle={this.toggleModal} id="news-close-modal">
<ModalHeader toggle={this.toggleModal} id="news-close-modal-label">Sure?</ModalHeader>
<ModalBody className="bg-white">
Do you really want to unrevertably remove this super news widget?
</ModalBody>
<ModalFooter>
<Button color="default" onClick={this.toggleModal} data-dismiss="modal">No</Button>{' '}
<Button color="danger" data-widgster="close" id="news-widget-remove">Yes,
remove widget</Button>
</ModalFooter>
</Modal>
</Widget>
<Widget
className="locked" data-widgster-collapsed="true"
title={<h6>Collapsed by default & locked</h6>}
collapse close
>
<div className="widget-body">
<blockquote>
There are no limits. There are plateaus, but you must not stay there, you must go beyond
them. If it kills you, it kills you. A man must constantly exceed his level.
<footer>
Bruce Lee
</footer>
</blockquote>
<p>To make a widget initially collapsed just add
<code>data-widgster-collapsed=&quot;true&quot;</code> attribute
to <code>.widget</code>.</p>
<p>To make it locked (prevent dragging) add <code>.locked</code> class.</p>
</div>
</Widget>
<Widget
className="bg-gray"
bodyClass={'p-0'}
>
<div className="jumbotron handle bg-gray text-white mb-0">
<div className="container">
<h1>Draggable story!</h1>
<p className="lead">
<em>Build</em> your own
interfaces! Sit back and relax.
</p>
<p className="text-center">
<button className="btn btn-danger btn-lg" data-widgster="fullscreen">
Fullscreen me! &nbsp;
<i className="fa fa-check" />
</button>
</p>
<button className="btn btn-danger btn-lg" data-widgster="restore">
Want to go back?
</button>
</div>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default Grid;
@import '../../../styles/app';
/* NEWS LIST */
:global {
.news-list {
margin-bottom: 0;
padding-left: 0;
li {
list-style: none;
box-sizing: content-box;
border-top: 1px solid $gray-200;
padding: 12px;
cursor: pointer;
@include transition(background-color 0.2s ease-out);
&:hover {
background: $body-bg-light;
}
&:last-child {
margin-bottom: -10px;
}
}
img,
.icon {
float: left;
height: 50px;
width: 50px;
}
.icon {
line-height: 50px;
border-radius: 50%;
text-align: center;
font-size: 28px;
.fa {
vertical-align: baseline;
}
}
.news-item-info {
margin-left: 62px; /* 50 + 12px padding */
}
.name {
text-transform: uppercase;
a {
text-decoration: none;
&:hover {
color: $link-color;
}
}
}
}
}
/* SHARES LIST */
:global {
.shares-widget {
:global {
.list-group {
.list-group-item {
display: flex;
align-items: center;
}
}
}
}
}
{
"name": "grid",
"version": "0.0.0",
"main": "./Grid.js",
"private": true
}
import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';
import {
BootstrapTable,
TableHeaderColumn,
} from 'react-bootstrap-table';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { Popover, PopoverBody, PopoverHeader, Breadcrumb, BreadcrumbItem, Alert } from 'reactstrap';
import {
Button,
ButtonToolbar,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownToggle
} from "reactstrap";
import Widget from '../../../components/Widget';
import s from './Management.module.scss';
import { getProductsRequest, deleteProductRequest } from '../../../actions/products'
import Loader from '../../../components/Loader';
import cx from 'classnames';
class Management extends React.Component {
static propTypes = {
products: PropTypes.array,
dispatch: PropTypes.func.isRequired,
};
static defaultProps = {
products: []
};
state = {
popovers: {},
promoAlert: false,
};
constructor() {
super();
this.apiFormatter = this.apiFormatter.bind(this);
}
componentDidMount() {
this.props.dispatch(getProductsRequest());
setTimeout(() => {
this.showPromoAlert();
}, 100);
}
showPromoAlert() {
this.setState({promoAlert: true});
}
imageFormatter(cell) {
return (
<img src={cell} alt="..." className={s.image} title="image"/>
)
}
titleFormatter(cell, row) {
return cell ? (
<Link to={'/app/ecommerce/product/' + row.id}>
{cell[0].toUpperCase() + cell.slice(1)}
</Link>
) : ""
}
deleteProduct(id) {
this.props.dispatch(deleteProductRequest({
id,
history: this.props.history
}))
}
togglePopover(id) {
let newState = {...this.state};
if (!this.state.popovers[id]) {
newState.popovers[id] = true;
} else {
newState.popovers[id] = !newState.popovers[id];
}
this.setState(newState);
}
apiFormatter(cell, row) {
return (
<ButtonToolbar>
<Button color="info" size="xs" onClick={()=> this.props.history.push('/app/ecommerce/management/' + row.id)}>
<span className="d-none d-md-inline-block">Edit</span>
<span className="d-md-none"><i className='la la-edit'/></span>
</Button>
<Button id={'popoverDelete_' + row.id} color="danger" size="xs">
{this.props.isDeleting && this.props.idToDelete === row.id ? <Loader size={14}/> :
<span>
<span className="d-none d-md-inline-block">Delete</span>
<span className="d-md-none"><i className='la la-remove'/></span>
</span>
}
</Button>
<Popover className="popover-danger" target={'popoverDelete_' + row.id} placement="top" isOpen={this.state.popovers[row.id]}
toggle={()=>{this.togglePopover(row.id)}}
>
<PopoverHeader className="px-5">Are you sure?</PopoverHeader>
<PopoverBody className="px-5 d-flex justify-content-center">
<ButtonToolbar>
<Button color="success" size="xs" onClick={() => {this.deleteProduct(row.id)}}>
Yes
</Button>
<Button color="danger" size="xs" onClick={() => {this.togglePopover(row.id)}}>
No
</Button>
</ButtonToolbar>
</PopoverBody>
</Popover>
</ButtonToolbar>
)
}
renderSizePerPageDropDown = (props) => {
const limits = [];
props.sizePerPageList.forEach((limit) => {
limits.push(<DropdownItem key={limit}
onClick={() => props.changeSizePerPage(limit)}>{limit}</DropdownItem>);
});
return (
<Dropdown isOpen={props.open} toggle={props.toggleDropDown}>
<DropdownToggle color="default" caret>
{props.currSizePerPage}
</DropdownToggle>
<DropdownMenu>
{limits}
</DropdownMenu>
</Dropdown>
);
};
createNewProduct() {
this.props.history.push('/app/ecommerce/management/create');
}
render() {
const options = {
sizePerPage: 10,
paginationSize: 3,
sizePerPageDropDown: this.renderSizePerPageDropDown,
};
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>E-commerce</BreadcrumbItem>
</Breadcrumb>
<div className="page-top-line">
<h2 className="page-title">Product - <span className="fw-semi-bold">Management</span></h2>
<Alert
color="success"
className={cx(s.promoAlert, {[s.showAlert]: this.state.promoAlert})}
>
This page is only available in <a className="text-white font-weight-bold" rel="noreferrer noopener" href="https://flatlogic.com/admin-dashboards/sing-app-react-node-js" target="_blank">Sing App React with Node.js</a> integration!
</Alert>
</div>
<Widget title="List of Products" collapse close
fetchingData={this.props.isReceiving}
>
<Button color="success" onClick={() => this.createNewProduct()}>Create Product</Button>
<BootstrapTable data={this.props.products} version="4" pagination options={options} search
tableContainerClass={`table-striped ${s.bootstrapTable}`}>
<TableHeaderColumn dataField="id" isKey={true} className="width-50"
columnClassName="width-50">
<span className="fs-sm">ID</span>
</TableHeaderColumn>
<TableHeaderColumn dataField="img" dataFormat={this.imageFormatter}>
<span className="fs-sm">Image</span>
</TableHeaderColumn>
<TableHeaderColumn dataField="title" dataFormat={this.titleFormatter}>
<span className="fs-sm">Title</span>
</TableHeaderColumn>
{window.innerWidth >= 768 && (
<TableHeaderColumn dataField="subtitle">
<span className="fs-sm">Subtitle</span>
</TableHeaderColumn>
)}
{window.innerWidth >= 768 && (
<TableHeaderColumn dataField="price">
<span className="fs-sm">Price($)</span>
</TableHeaderColumn>
)}
<TableHeaderColumn dataFormat={this.apiFormatter}>
<span className="fs-sm">Api</span>
</TableHeaderColumn>
</BootstrapTable>
</Widget>
</div>
);
}
}
function mapStateToProps(state) {
return {
products: state.products.data,
isReceiving: state.products.isReceiving,
isDeleting: state.products.isDeleting,
idToDelete: state.products.idToDelete,
};
}
export default withRouter(connect(mapStateToProps)(Management));
.bootstrapTable {
border: none;
:global .table {
thead,
tbody {
th,
td {
border-right: none;
border-left: none;
}
}
thead th {
background: transparent;
}
tbody td {
vertical-align: middle;
}
}
}
.image {
width: 100px;
}
.promoAlert {
transition: 0.6s;
transition-timing-function: ease;
transform: translateX(-130vw);
}
.showAlert {
transform: translateX(0);
}
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import TagsInput from 'react-tagsinput'
import { withRouter } from 'react-router';
import {
Input,
Label,
Form,
FormGroup,
Col,
Button,
ButtonToolbar,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Popover,
PopoverHeader,
PopoverBody
} from "reactstrap";
import {
loadProductRequest,
receiveProduct,
updateProduct,
updateProductRequest,
createProductRequest,
deleteProductRequest,
getProductsImagesRequest
} from '../../../../../actions/products';
import Widget from '../../../../../components/Widget';
import Loader from '../../../../../components/Loader';
import s from './ProductEdit.module.scss';
class ProductEdit extends React.Component {
static propTypes = {
products: PropTypes.array,
images: PropTypes.array,
dispatch: PropTypes.func.isRequired,
};
static defaultProps = {
products: [],
images: []
};
constructor(props) {
super(props);
this.updateProductRequest = this.updateProductRequest.bind(this);
this.createProductRequest = this.createProductRequest.bind(this);
this.deleteProductRequest = this.deleteProductRequest.bind(this);
this.toggleDropdown = this.toggleDropdown.bind(this);
this.state = {
dropdownOpen: false,
popover: false
};
this.description_1 = React.createRef();
this.description_2 = React.createRef();
let newProduct = {
id: -1,
price: 0.01,
rating: 5,
technology: []
};
let product = this.findProduct(this.getId());
if (this.getId() > -1) {
if (!product) {
this.props.dispatch(loadProductRequest(this.getId()));
}
} else {
if (!product) {
this.props.dispatch(receiveProduct(newProduct));
}
}
this.props.dispatch(getProductsImagesRequest(newProduct));
}
findProduct(id) {
const {products} = this.props;
return products.find(p => p.id === id);
}
getId() {
const {match} = this.props;
return parseInt(match.params.id) || -1;
}
updateProductRequest() {
this.props.dispatch(updateProductRequest(this.findProduct(this.getId())));
}
createProductRequest() {
this.props.dispatch(createProductRequest({
product: this.findProduct(this.getId()),
history: this.props.history
}));
}
deleteProductRequest() {
debugger;
this.props.dispatch(deleteProductRequest({
id: this.getId(),
history: this.props.history
}));
}
getImage() {
let product = this.findProduct(this.getId());
return product ? product.img : null;
}
updateProduct(value, key) {
let product = this.findProduct(this.getId());
product[key] = value;
this.props.dispatch(updateProduct(product));
}
goBack() {
this.props.history.push('/app/ecommerce/management');
}
toggleDropdown() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
})
}
togglePopover() {
this.setState({
popover: !this.state.popover
});
}
componentDidUpdate() {
let product = this.findProduct(this.getId()) || {
technology: []
};
if (this.description_1.current) {
this.description_1.current.value = product.description_1 || "";
}
if (this.description_2.current) {
this.description_2.current.value = product.description_2 || "";
}
}
render() {
const isNew = this.getId() === -1;
let image = this.getImage();
let product = this.findProduct(this.getId()) || {
technology: []
};
return (
<div>
<h2 className="page-title">Product - <span className="fw-semi-bold">Detail</span></h2>
<Widget title={(isNew ? "New" : "Edit") + " product"} collapse close>
{!isNew && this.props.isReceiving ? <Loader size={40}/> :
<Form>
<FormGroup row>
<Label md={2} for="productImage">Image</Label>
<Col md={5}>
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown}
id="productImage">
<DropdownToggle caret color="info">
{image && <img className={s.productImage} alt="img" src={image}/>}
</DropdownToggle>
<DropdownMenu>
{this.props.images.map(img => (
<DropdownItem key={img} onClick={() => this.updateProduct(img, 'img')}>
<img className={s.productImage} alt={img} src={img}/>
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
</Col>
</FormGroup>
<FormGroup row>
<Label md={2} for="productTitle">Title</Label>
<Col md={5}>
<Input id="productTitle" type="text" defaultValue={product.title}
onChange={(event) => this.updateProduct(event.target.value, 'title')}/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={2} for="productSubtitle">Subtitle</Label>
<Col md={5}>
<Input id="productSubtitle" type="text" defaultValue={product.subtitle}
onChange={(event) => this.updateProduct(event.target.value, 'subtitle')}/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={2} for="productPrice">Price</Label>
<Col md={2}>
<Input id="productPrice" type="number" step={0.01} min={0.01}
defaultValue={product.price}
onChange={(event) => this.updateProduct(event.target.value, 'price')}/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={2} for="productDiscount">Discount</Label>
<Col md={2}>
<Input id="productDiscount" type="number" step={1} min={0} max={100}
defaultValue={product.discount || 0}
onChange={(event) => this.updateProduct(event.target.value, 'discount')}/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={2} for="productDescription_1">Description 1</Label>
<Col md={5}>
<textarea rows={3} className="form-control" id="productDescription_1"
ref={this.description_1}
onChange={(event) => this.updateProduct(event.target.value, 'description_1')}/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={2} for="productDescription_2">Description 2</Label>
<Col md={5}>
<textarea rows={3} className="form-control" id="productDescription_2"
ref={this.description_2}
onChange={(event) => this.updateProduct(event.target.value, 'description_2')}/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={2} for="productCode">Code</Label>
<Col md={2}>
<Input id="productCode" type="text"
defaultValue={product.code}
onChange={(event) => this.updateProduct(event.target.value, 'code')}/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={2} for="productHashtag">Hashtag</Label>
<Col md={5}>
<Input id="productHashtag" type="text"
defaultValue={product.hashtag}
onChange={(event) => this.updateProduct(event.target.value, 'hashtag')}/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={2} for="productTechnology">Technology</Label>
<Col md={5}>
<TagsInput className="react-tagsinput form-control" id="productTechnology"
value={product.technology}
onChange={(tags) => this.updateProduct(tags, 'technology')}/>
</Col>
</FormGroup>
<FormGroup row>
<Label md={2} for="productRating">Rating</Label>
<Col md={2}>
<Input id="productRating" step={0.1} min={0} max={5} type="number"
defaultValue={product.rating}
onChange={(event) => this.updateProduct(event.target.value, 'rating')}/>
</Col>
</FormGroup>
<ButtonToolbar>
<Button color="success"
onClick={!isNew ? this.updateProductRequest : this.createProductRequest}>
{this.props.isUpdating ? <Loader/> : 'Save'}
</Button>
<Button color="default" onClick={() => {
this.goBack()
}}>Back</Button>
{!isNew && (
<span>
<Button id="deleteProductPopover" color="danger">
{this.props.isDeleting ? <Loader/> : 'Delete'}
</Button>
<Popover className="popover-danger" target="deleteProductPopover"
placement="top"
isOpen={this.state.popover}
toggle={() => {
this.togglePopover()
}}
>
<PopoverHeader className="px-5">Are you sure?</PopoverHeader>
<PopoverBody className="px-5 d-flex justify-content-center">
<ButtonToolbar>
<Button color="success" size="xs" onClick={this.deleteProductRequest}>
Yes
</Button>
<Button color="danger" size="xs" onClick={() => {
this.togglePopover()
}}>
No
</Button>
</ButtonToolbar>
</PopoverBody>
</Popover>
</span>
)}
</ButtonToolbar>
</Form>
}
</Widget>
</div>
);
}
}
function mapStateToProps(state) {
return {
products: state.products.data,
images: state.products.images,
isReceiving: state.products.isReceiving,
isUpdating: state.products.isUpdating,
isDeleting: state.products.isDeleting,
};
}
export default withRouter(connect(mapStateToProps)(ProductEdit));
{
"name": "ProductEdit",
"version": "0.0.0",
"private": true,
"main": "./ProductEdit.js"
}
\ No newline at end of file
{
"name": "Management",
"version": "0.0.0",
"private": true,
"main": "./Management.js"
}
\ No newline at end of file
import React from 'react';
import {
withGoogleMap,
withScriptjs,
GoogleMap,
Marker,
} from 'react-google-maps';
import s from './Google.module.scss';
const BasicMap = withScriptjs(withGoogleMap(() =>
<GoogleMap
defaultZoom={12}
defaultCenter={{ lat: parseFloat(-37.813179), lng: parseFloat(144.950259) }}
>
<Marker position={{ lat: -37.813179, lng: 144.950259 }} />
</GoogleMap>,
));
class Maps extends React.Component {
render() {
return (
<div>
<h1 className={`${s.MapTitle} page-title`}>
Google <span className="fw-semi-bold">Maps</span>
</h1>
<div className={s.MapContainer}>
<BasicMap
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyB7OXmzfQYua_1LEhRdqsoYzyJOPh9hGLg"
loadingElement={<div style={{ height: 'inherit', width: 'inherit' }} />}
containerElement={<div style={{ height: 'inherit' }} />}
mapElement={<div style={{ height: 'inherit' }} />}
/>
</div>
</div>);
}
}
export default Maps;
@import '../../../../styles/app';
.MapContainer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
}
.MapTitle {
position: relative;
z-index: 2;
}
{
"name": "GoogleMap",
"version": "0.0.0",
"private": true,
"main": "./Google.js"
}
import React from 'react';
import $ from 'jquery';
/* eslint-disable */
import 'imports-loader?jQuery=jquery,this=>window!jvectormap/jquery-jvectormap.min.js';
import 'imports-loader?jQuery=jquery,this=>window!./jvector-world.js';
/* eslint-enable */
import s from './Vector.module.scss';
const mapData = {
map: 'world_mill_en',
scaleColors: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
focusOn: {
x: 0.5359,
y: 0.4,
scale: 2.5,
},
zoomMin: 0.85,
hoverColor: false,
regionStyle: {
initial: {
fill: '#bdbdbd',
'fill-opacity': 1,
stroke: '#bdbdbd',
'stroke-width': 0,
'stroke-opacity': 0,
},
hover: {
'fill-opacity': 0.8,
},
},
markerStyle: {
initial: {
fill: '#dd5826',
stroke: '#c54e22',
'fill-opacity': 1,
'stroke-width': 4,
'stroke-opacity': 0.2,
r: 5,
},
hover: {
stroke: 'black',
'stroke-width': 5,
},
},
backgroundColor: '#eee',
markers: [
{ latLng: [41.90, 12.45], name: 'Vatican City' },
{ latLng: [43.73, 7.41], name: 'Monaco' },
{ latLng: [-0.52, 166.93], name: 'Nauru' },
{ latLng: [-8.51, 179.21], name: 'Tuvalu' },
{ latLng: [43.93, 12.46], name: 'San Marino' },
{ latLng: [47.14, 9.52], name: 'Liechtenstein' },
{ latLng: [7.11, 171.06], name: 'Marshall Islands' },
{ latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis' },
{ latLng: [3.2, 73.22], name: 'Maldives' },
{ latLng: [35.88, 14.5], name: 'Malta' },
{ latLng: [12.05, -61.75], name: 'Grenada' },
{ latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines' },
{ latLng: [13.16, -59.55], name: 'Barbados' },
{ latLng: [17.11, -61.85], name: 'Antigua and Barbuda' },
{ latLng: [-4.61, 55.45], name: 'Seychelles' },
{ latLng: [7.35, 134.46], name: 'Palau' },
{ latLng: [42.5, 1.51], name: 'Andorra' },
{ latLng: [14.01, -60.98], name: 'Saint Lucia' },
{ latLng: [6.91, 158.18], name: 'Federated States of Micronesia' },
{ latLng: [1.3, 103.8], name: 'Singapore' },
{ latLng: [1.46, 173.03], name: 'Kiribati' },
{ latLng: [-21.13, -175.2], name: 'Tonga' },
{ latLng: [15.3, -61.38], name: 'Dominica' },
{ latLng: [-20.2, 57.5], name: 'Mauritius' },
{ latLng: [26.02, 50.55], name: 'Bahrain' },
{ latLng: [0.33, 6.73], name: 'S?o Tom? and Pr?ncipe' },
],
};
class VectorMap extends React.Component {
componentDidMount() {
$(this.vectorMap).vectorMap(mapData);
}
render() {
return (
<div>
<div
className={`${s.contentMap} vector-map`} ref={(r) => {
this.vectorMap = r;
}}
/>
<header className="page-title">
<h1 className="m-0 mb-sm">Vector <span className="fw-semi-bold">Maps</span></h1>
<p className="page-title fs-sm m-0">
<span className="fw-semi-bold">1 656 843</span>
<span className="ml-xs circle bg-gray"><i className="text-gray-lighter fa fa-circle" /></span>
</p>
</header>
</div>);
}
}
export default VectorMap;
@import '../../../../styles/app';
.contentMap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
+ :global(.page-title) {
position: relative;
z-index: 2;
}
}
This diff could not be displayed because it is too large.
{
"name": "Vector",
"version": "0.0.0",
"main": "./Vector.js",
"private": true
}
import React from 'react';
import cx from 'classnames';
import {
Breadcrumb,
BreadcrumbItem,
Row,
Col,
Input,
Label,
Form,
FormGroup,
} from 'reactstrap';
import Widget from '../../../components/Widget';
import p19 from '../../../images/pictures/19.jpg';
import a5 from '../../../images/people/a5.jpg';
import a1 from '../../../images/people/a1.jpg';
import a3 from '../../../images/people/a3.jpg';
import avatar from '../../../images/avatar.png';
import s from './Profile.module.scss';
const Profile = () => (
<div className={s.root}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>Profile</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">User - <span className="fw-semi-bold">Profile</span>
</h1>
<Row>
<Col lg={6} xs={12}>
<Widget>
<div className="widget-top-overflow text-white">
<div className="height-250 overflow-hidden">
<img className="img-fluid" src={p19} alt="..." />
</div>
<button className="btn btn-outline btn-sm mb-2">
<i className="fa fa-twitter mr-2" />
Follow
</button>
</div>
<Row>
<Col md={5} xs={12} className="text-center">
<div className={s.profileContactContainer}>
<span className="thumb-xl mb-3">
<img className={[s.profileAvatar, 'rounded-circle'].join(' ')} src={a5} alt="..." />
</span>
<h5 className="fw-normal">Adam <span className="fw-semi-bold">Johns</span></h5>
<p>UI/UX designer</p>
<button className="btn btn-danger btn-sm mb-3">
&nbsp;Send
<i className="fa fa-envelope ml-2" />&nbsp;
</button>
<div>
<ul className={cx(s.profileContacts, 'mt-sm')}>
<li><i className="fa fa-lg fa-phone fa-fw mr-2" /><button className="btn-link"> +375 29 555-55-55</button></li>
<li><i className="fa fa-lg fa-envelope fa-fw mr-2" /><button className="btn-link"> psmith@example.com</button></li>
<li><i className="fa fa-lg fa-map-marker fa-fw mr-2" /><button className="btn-link"> Minsk, Belarus</button></li>
</ul>
</div>
</div>
</Col>
<Col md={7} xs={12}>
<div className="stats-row mt-3">
<div className={[s.profileStat, 'stat-item'].join(' ')}>
<p className={[s.profileStatValue, 'value text-right'].join(' ')}>251</p>
<h6 className="name">Posts</h6>
</div>
<div className={[s.profileStat, 'stat-item'].join(' ')}>
<p className={[s.profileStatValue, 'value text-right'].join(' ')}>9.38%</p>
<h6 className="name">Conversion</h6>
</div>
<div className={[s.profileStat, 'stat-item'].join(' ')}>
<p className={[s.profileStatValue, 'value text-right'].join(' ')}>842</p>
<h6 className="name">Followers</h6>
</div>
</div>
<p>
<span className="badge badge-warning rounded-0"> UI/UX </span>
<span className="badge badge-danger rounded-0 ml-2"> Web Design </span>
<span className="badge badge-default rounded-0 ml-2"> Mobile Apps </span>
</p>
<p className="lead mt-xlg">
My name is Adam Johns and here is my new Sing user profile page.
</p>
<p className="text-muted">
I love reading people&apos;s summaries page especially those who are in the same industry as me.
Sometimes it&apos;s much easier to find your concentration during the night.
</p>
</Col>
</Row>
</Widget>
</Col>
<Col lg={6} xs={12}>
<section className="activities">
<h2 className="ml-3">Activities</h2>
<section className={s.event}>
<header>
<span className={s.eventAvatar}>
<img className="rounded-circle" src={a5} alt="..." />
</span>
<h5 className={s.eventTitle}><button className="btn-link">Bob Nilson</button> <small><button className="btn-link">@nils</button></small></h5>
<p className={s.eventTimestamp}>February 22, 2014 at 01:59 PM</p>
</header>
<div className={s.eventBody}>
There is no such thing as maturity. There is instead an ever-evolving process of maturing.
Because when there is a maturity, there is ...
</div>
<footer className={s.eventFooter}>
<ul className="post-links">
<li><button className="btn-link">1 hour</button></li>
<li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart" /> Like</span></button></li>
<li><button className="btn-link">Comment</button></li>
</ul>
</footer>
</section>
<section className={s.event}>
<header>
<h5 className={s.eventTitle}><button className="btn-link">Jessica Smith</button> <small>@jess</small></h5>
<p className={s.eventTimestamp}>February 22, 2014 at 01:59 PM</p>
</header>
<div className={s.eventBody}>
Check out this awesome photo I made in Italy last summer. Seems it was lost somewhere deep inside
my brand new HDD 40TB. Thanks god I found it!
</div>
<footer className={s.eventFooter}>
<div className="clearfix">
<ul className="post-links mt-sm pull-left">
<li><button className="btn-link">1 hour</button></li>
<li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart-o" /> Like</span></button></li>
<li><button className="btn-link">Comment</button></li>
</ul>
<span className="thumb thumb-sm pull-right">
<button className="btn-link">
<img className="rounded-circle" alt="..." src={a1} />
</button>
</span>
<span className="thumb thumb-sm pull-right">
<button className="btn-link"><img className="rounded-circle" alt="..." src={a5} /></button>
</span>
<span className="thumb thumb-sm pull-right">
<button className="btn-link"><img className="rounded-circle" alt="..." src={a3} /></button>
</span>
</div>
<ul className="post-comments mt-sm">
<li>
<span className="thumb-xs avatar pull-left mr-sm">
<img className="rounded-circle" src={a1} alt="..." />
</span>
<div className="comment-body">
<h6 className="author fs-sm fw-semi-bold">Ignacio Abad <small>6 mins ago</small></h6>
<p>Hey, have you heard anything about that?</p>
</div>
</li>
<li>
<span className="thumb-xs avatar pull-left mr-sm">
<img className="rounded-circle" src={avatar} alt="..." />
</span>
<div className="comment-body">
<input className="form-control form-control-sm" type="text" placeholder="Write your comment..." />
</div>
</li>
</ul>
</footer>
</section>
<Form className="mt" action="#">
<FormGroup className="mb-2">
<Label className="sr-only" for="new-event">New event</Label>
<Input type="textarea" id="new-event" placeholder="Post something..." rows="3" />
</FormGroup>
<div className="btn-toolbar">
<div className="btn-group">
<button className="btn btn-sm btn-default">
<i className="fa fa-camera fa-lg" />
</button>
<button className="btn btn-sm btn-default">
<i className="fa fa-map-marker fa-lg" />
</button>
</div>
<button type="submit" className="btn btn-danger btn-sm ml-auto">Post</button>
</div>
</Form>
</section>
</Col>
</Row>
</div>
);
export default Profile;
@import '../../../styles/app';
.root {
// some styles
}
.profileContactContainer {
margin-top: -75px;
}
.profileContacts {
@include list-unstyled();
display: inline-block;
text-align: left;
> li {
margin-bottom: $spacer / 2;
}
> li > a {
color: lighten($text-color, 30%);
text-decoration: none;
@include hover-focus {
color: $text-color;
}
}
}
.profileAvatar {
border: 3px solid $white;
}
.profileStat {
border-left: none !important;
padding-right: 0 !important;
}
.profileStatValue {
font-size: 28px;
font-weight: $font-weight-base !important;
margin-bottom: 0;
}
.event {
background: $white;
border-radius: $border-radius;
padding: 20px 20px 0;
position: relative;
margin-bottom: $spacer;
box-shadow: var(--widget-shadow);
}
.eventTitle {
margin-bottom: 2px;
font-weight: $font-weight-semi-bold;
a {
text-decoration: none;
color: #7ca9dd;
}
small > a {
color: $text-muted;
}
}
.eventAvatar {
float: left;
margin-right: $spacer;
}
.eventAvatar > img {
width: 34px;
}
.eventBody {
font-size: 0.9rem;
margin-bottom: $spacer;
}
.eventFooter {
background-color: $gray-100;
margin: 20px -20px 0;
padding: 10px 20px;
}
.eventTimestamp {
color: $text-muted;
}
{
"name": "profile",
"version": "0.0.0",
"private": true,
"main": "./Profile.js"
}
import React from 'react';
import {
Breadcrumb,
BreadcrumbItem,
Progress,
Dropdown,
DropdownMenu,
DropdownToggle,
DropdownItem,
} from 'reactstrap';
import {
BootstrapTable,
TableHeaderColumn,
} from 'react-bootstrap-table';
import ReactTable from 'react-table';
import { reactTableData, reactBootstrapTableData } from './data';
import Widget from '../../../../components/Widget';
import s from './Dynamic.modules.scss';
class Dynamic extends React.Component {
constructor(props) {
super(props);
this.state = {
reactTable: reactTableData(),
reactBootstrapTable: reactBootstrapTableData(),
};
}
renderSizePerPageDropDown = (props) => {
const limits = [];
props.sizePerPageList.forEach((limit) => {
limits.push(<DropdownItem key={limit} onClick={() => props.changeSizePerPage(limit)}>{ limit }</DropdownItem>);
});
return (
<Dropdown isOpen={props.open} toggle={props.toggleDropDown}>
<DropdownToggle color="default" caret>
{ props.currSizePerPage }
</DropdownToggle>
<DropdownMenu>
{ limits }
</DropdownMenu>
</Dropdown>
);
};
render() {
const options = {
sizePerPage: 10,
paginationSize: 3,
sizePerPageDropDown: this.renderSizePerPageDropDown,
};
function infoFormatter(cell) {
return (
<div>
<small>
Type:&nbsp;<span className="fw-semi-bold">{cell.type}</span>
</small>
<br />
<small>
Dimensions:&nbsp;<span className="fw-semi-bold">{cell.dimensions}</span>
</small>
</div>
);
}
function descriptionFormatter(cell) {
return (
<button className="btn-link">
{cell}
</button>
);
}
function progressFormatter(cell) {
return (
<Progress style={{ height: '15px' }} color={cell.type} value={cell.progress} />
);
}
function progressSortFunc(a, b, order) {
if (order === 'asc') {
return a.status.progress - b.status.progress;
}
return b.status.progress - a.status.progress;
}
function dateSortFunc(a, b, order) {
if (order === 'asc') {
return new Date(a.date).getTime() - new Date(b.date).getTime();
}
return new Date(b.date).getTime() - new Date(a.date).getTime();
}
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>Tables Dynamic</BreadcrumbItem>
</Breadcrumb>
<h2 className="page-title">Tables - <span className="fw-semi-bold">Dynamic</span></h2>
<Widget title={<h4>The <span className="fw-semi-bold">React</span> Way</h4>} collapse close>
<p>
Fully customizable Table. Built with <a href="https://allenfang.github.io/react-bootstrap-table/" target="_blank" rel="noopener noreferrer">react-bootstrap-table</a>
</p>
<BootstrapTable data={this.state.reactBootstrapTable} version="4" pagination options={options} search tableContainerClass={`table-striped table-hover ${s.bootstrapTable}`}>
<TableHeaderColumn className="width-50" columnClassName="width-50" dataField="id" isKey>
<span className="fs-sm">ID</span>
</TableHeaderColumn>
<TableHeaderColumn dataField="name" dataSort>
<span className="fs-sm">Name</span>
</TableHeaderColumn>
<TableHeaderColumn className="d-none d-md-table-cell" columnClassName="d-none d-md-table-cell" dataField="info" dataFormat={infoFormatter}>
<span className="fs-sm">Info</span>
</TableHeaderColumn>
<TableHeaderColumn className="d-none d-md-table-cell" columnClassName="d-none d-md-table-cell" dataField="description" dataFormat={descriptionFormatter}>
<span className="fs-sm">Description</span>
</TableHeaderColumn>
<TableHeaderColumn className="d-none d-md-table-cell" columnClassName="d-none d-md-table-cell" dataField="date" dataSort sortFunc={dateSortFunc}>
<span className="fs-sm">Date</span>
</TableHeaderColumn>
<TableHeaderColumn className="width-150" columnClassName="width-150" dataField="status" dataSort dataFormat={progressFormatter} sortFunc={progressSortFunc}>
<span className="fs-sm">Status</span>
</TableHeaderColumn>
</BootstrapTable>
</Widget>
<Widget title={<h4>React <span className="fw-semi-bold">Table</span></h4>} collapse close>
<p>
Simple table extension with sorting, filtering and pagination for React apps. Built with <a href="https://react-table.js.org/" target="_blank" rel="noopener noreferrer">react-table</a>
</p>
<ReactTable
data={this.state.reactTable}
filterable
columns={[
{
Header: 'NAME',
accessor: 'name',
},
{
Header: 'POSITION',
accessor: 'position',
},
{
Header: 'OFFICE',
accessor: 'office',
},
{
Header: 'EXT',
accessor: 'ext',
},
{
Header: 'START DATE',
accessor: 'startDate',
},
{
Header: 'SALARY',
accessor: 'salary',
},
]}
defaultPageSize={10}
className="-striped -highlight"
/>
</Widget>
</div>
);
}
}
export default Dynamic;
@import '../../../../styles/app';
.bootstrapTable {
border: none;
:global .table {
thead,
tbody {
th,
td {
border-right: none;
border-left: none;
}
}
thead th {
background: transparent;
}
}
}
export function reactTableData() {
return [
{
name: 'Victoria Cantrell',
position: 'Integer Corporation',
office: 'Croatia',
ext: '0839',
startDate: '2015/08/19',
salary: 208.178,
}, {
name: 'Pearl Crosby',
position: 'In PC',
office: 'Cambodia',
ext: '8262',
startDate: '2014/10/08',
salary: 114.367,
}, {
name: 'Colette Foley',
position: 'Lorem Inc.',
office: 'Korea, North',
ext: '8968',
startDate: '2015/07/19',
salary: 721.473,
}, {
name: 'Anastasia Shaffer',
position: 'Dolor Nulla Semper LLC',
office: 'Suriname',
ext: '7980',
startDate: '2015/04/20',
salary: 264.620,
}, {
name: 'Gabriel Castro',
position: 'Sed Limited',
office: 'Bahrain',
ext: '0757',
startDate: '2015/03/04',
salary: 651.350,
}, {
name: 'Cherokee Ware',
position: 'Tincidunt LLC',
office: 'United Kingdom (Great Britain)',
ext: '3995',
startDate: '2015/06/17',
salary: 666.259,
}, {
name: 'Barry Moss',
position: 'Sociis Industries',
office: 'Western Sahara',
ext: '6697',
startDate: '2015/08/13',
salary: 541.631,
}, {
name: 'Maryam Tucker',
position: 'Elit Pede Malesuada Inc.',
office: 'Brazil',
ext: '5203',
startDate: '2014/10/02',
salary: 182.294,
}, {
name: 'Constance Clayton',
position: 'Auctor Velit Aliquam LLP',
office: 'United Arab Emirates',
ext: '4204',
startDate: '2015/08/01',
salary: 218.597,
}, {
name: 'Rogan Tucker',
position: 'Arcu Vestibulum Ante Associates',
office: 'Jersey',
ext: '0885',
startDate: '2015/01/04',
salary: 861.632,
}, {
name: 'Emery Mcdowell',
position: 'Gravida Company',
office: 'New Zealand',
ext: '3951',
startDate: '2015/06/02',
salary: 413.568,
}, {
name: 'Yael Greer',
position: 'Orci Limited',
office: 'Madagascar',
ext: '1416',
startDate: '2014/12/04',
salary: 121.831,
}, {
name: 'Jared Burgess',
position: 'Auctor Incorporated',
office: 'Burundi',
ext: '4673',
startDate: '2015/01/12',
salary: 62.243,
}, {
name: 'Sharon Campbell',
position: 'Elit Curabitur Sed Consulting',
office: 'Comoros',
ext: '6274',
startDate: '2014/09/14',
salary: 200.854,
}, {
name: 'Yeo Church',
position: 'Donec Vitae Erat PC',
office: 'Saudi Arabia',
ext: '0269',
startDate: '2015/06/07',
salary: 581.193,
}, {
name: 'Kylie Barlow',
position: 'Fermentum Risus Corporation',
office: 'Papua New Guinea',
ext: '2010',
startDate: '2014/12/03',
salary: 418.115,
}, {
name: 'Nell Leonard',
position: 'Vestibulum Consulting',
office: 'Saudi Arabia',
ext: '4839',
startDate: '2015/05/29',
salary: 466.201,
}, {
name: 'Brandon Fleming',
position: 'Donec Egestas Associates',
office: 'Poland',
ext: '0622',
startDate: '2015/01/22',
salary: 800.011,
}, {
name: 'Inga Pena',
position: 'Et Magnis Dis Limited',
office: 'Belgium',
ext: '8140',
startDate: '2015/05/18',
salary: 564.245,
}, {
name: 'Arden Russo',
position: 'Est Tempor Bibendum Corp.',
office: 'Dominican Republic',
ext: '6774',
startDate: '2015/07/23',
salary: 357.222,
}, {
name: 'Liberty Gallegos',
position: 'Nec Diam LLC',
office: 'Ghana',
ext: '9266',
startDate: '2015/06/18',
salary: 554.375,
}, {
name: 'Dennis York',
position: 'Nullam Suscipit Foundation',
office: 'Namibia',
ext: '3133',
startDate: '2015/03/20',
salary: 90.417,
}, {
name: 'Petra Chandler',
position: 'Pede Nonummy Inc.',
office: 'Namibia',
ext: '3367',
startDate: '2015/03/26',
salary: 598.915,
}, {
name: 'Aurelia Marshall',
position: 'Donec Consulting',
office: 'Nicaragua',
ext: '2690',
startDate: '2015/08/18',
salary: 201.680,
}, {
name: 'Rose Carter',
position: 'Enim Consequat Purus Industries',
office: 'Morocco',
ext: '0619',
startDate: '2015/03/06',
salary: 220.187,
}, {
name: 'Denton Atkins',
position: 'Non Vestibulum PC',
office: 'Mali',
ext: '5806',
startDate: '2015/04/19',
salary: 324.588,
}, {
name: 'Germaine Osborn',
position: 'Tristique Aliquet PC',
office: 'Lesotho',
ext: '4469',
startDate: '2015/01/19',
salary: 351.108,
}, {
name: 'Nell Butler',
position: 'Sit Amet Dapibus Industries',
office: 'Cuba',
ext: '7860',
startDate: '2015/01/06',
salary: 230.072,
}, {
name: 'Brent Stein',
position: 'Eu Augue Porttitor LLP',
office: 'Cyprus',
ext: '4697',
startDate: '2014/11/02',
salary: 853.413,
}, {
name: 'Alexandra Shaw',
position: 'Aenean Gravida Limited',
office: 'Uruguay',
ext: '1140',
startDate: '2015/05/16',
salary: 401.970,
}, {
name: 'Veronica Allison',
position: 'Aliquet Diam Sed Institute',
office: 'Samoa',
ext: '9966',
startDate: '2015/05/17',
salary: 79.193,
}, {
name: 'Katelyn Gamble',
position: 'Sed Associates',
office: 'Mauritius',
ext: '4767',
startDate: '2015/03/20',
salary: 484.299,
}, {
name: 'James Greer',
position: 'A Dui Incorporated',
office: 'Norway',
ext: '5517',
startDate: '2015/02/21',
salary: 333.518,
}, {
name: 'Cain Vasquez',
position: 'Nulla Facilisis Suspendisse Institute',
office: 'China',
ext: '3179',
startDate: '2015/05/27',
salary: 651.761,
}, {
name: 'Shaeleigh Barr',
position: 'Eleifend Cras Institute',
office: 'Ghana',
ext: '5904',
startDate: '2015/04/01',
salary: 627.095,
}, {
name: 'Baker Mckay',
position: 'Ut Sagittis Associates',
office: 'Isle of Man',
ext: '9840',
startDate: '2015/01/12',
salary: 742.247,
}, {
name: 'Jayme Pace',
position: 'Cras Eu Tellus Associates',
office: 'Bouvet Island',
ext: '4580',
startDate: '2015/08/12',
salary: 591.588,
}, {
name: 'Reuben Albert',
position: 'Lobortis Institute',
office: 'Zambia',
ext: '8725',
startDate: '2015/04/04',
salary: 791.408,
}, {
name: 'Idola Burns',
position: 'Non Industries',
office: 'Myanmar',
ext: '3201',
startDate: '2015/06/24',
salary: 142.906,
}, {
name: 'Laura Macias',
position: 'Phasellus Inc.',
office: 'Mauritania',
ext: '2033',
startDate: '2014/11/21',
salary: 226.591,
}, {
name: 'Nichole Salas',
position: 'Duis PC',
office: 'Madagascar',
ext: '4397',
startDate: '2015/01/18',
salary: 234.196,
}, {
name: 'Hunter Walter',
position: 'Ullamcorper Duis Cursus Foundation',
office: 'Brazil',
ext: '2227',
startDate: '2015/02/28',
salary: 655.052,
}, {
name: 'Asher Rich',
position: 'Mauris Ipsum LLP',
office: 'Paraguay',
ext: '7288',
startDate: '2015/08/08',
salary: 222.946,
}, {
name: 'Angela Carlson',
position: 'Donec Tempor Institute',
office: 'Papua New Guinea',
ext: '5416',
startDate: '2015/02/12',
salary: 562.194,
}, {
name: 'James Dorsey',
position: 'Ipsum Leo Associates',
office: 'Congo (Brazzaville)',
ext: '6019',
startDate: '2015/01/10',
salary: 629.925,
}, {
name: 'Wesley Cobb',
position: 'Nunc Est Incorporated',
office: 'Australia',
ext: '6466',
startDate: '2015/01/30',
salary: 343.476,
}, {
name: 'Meghan Stephens',
position: 'Interdum PC',
office: 'Turkey',
ext: '8001',
startDate: '2014/10/11',
salary: 469.305,
}, {
name: 'Bertha Herrera',
position: 'Amet Limited',
office: 'Kenya',
ext: '4799',
startDate: '2014/11/22',
salary: 56.606,
}, {
name: 'Karina Key',
position: 'Quisque Varius Nam Company',
office: 'France',
ext: '3907',
startDate: '2015/03/26',
salary: 314.260,
}, {
name: 'Uriel Carson',
position: 'Penatibus PC',
office: 'Venezuela',
ext: '5902',
startDate: '2015/01/07',
salary: 106.335,
}, {
name: 'Mira Baird',
position: 'Felis Orci PC',
office: 'Niue',
ext: '4189',
startDate: '2015/08/25',
salary: 515.671,
}, {
name: 'Ursula Parrish',
position: 'Ac Corporation',
office: 'Macao',
ext: '4771',
startDate: '2015/06/30',
salary: 72.295,
}, {
name: 'Josephine Sykes',
position: 'Blandit Congue Limited',
office: 'Holy See (Vatican City State)',
ext: '4684',
startDate: '2014/12/22',
salary: 694.656,
}, {
name: 'Maggie Sims',
position: 'Vulputate Posuere Industries',
office: 'Sudan',
ext: '6482',
startDate: '2014/11/22',
salary: 363.743,
}, {
name: 'Rogan Fuentes',
position: 'Vestibulum Accumsan Neque Company',
office: 'Jersey',
ext: '4837',
startDate: '2015/07/29',
salary: 606.004,
}, {
name: 'Maya Haney',
position: 'Ac Foundation',
office: 'Falkland Islands',
ext: '5752',
startDate: '2015/09/03',
salary: 745.500,
}, {
name: 'Aquila Battle',
position: 'Sociis Natoque Penatibus Foundation',
office: 'Azerbaijan',
ext: '8470',
startDate: '2015/03/06',
salary: 582.265,
}, {
name: 'Connor Coleman',
position: 'Orci Lacus Vestibulum Foundation',
office: 'Croatia',
ext: '6217',
startDate: '2014/10/21',
salary: 416.958,
}, {
name: 'Charity Thomas',
position: 'Convallis Ligula Donec Inc.',
office: 'Benin',
ext: '6240',
startDate: '2015/07/12',
salary: 540.999,
}, {
name: 'Blythe Powers',
position: 'Amet Orci Limited',
office: 'Falkland Islands',
ext: '5608',
startDate: '2015/01/23',
salary: 480.067,
}, {
name: 'Adria Battle',
position: 'Ornare Lectus Incorporated',
office: 'British Indian Ocean Territory',
ext: '7419',
startDate: '2015/05/28',
salary: 257.937,
}, {
name: 'Melanie Mcintyre',
position: 'Nunc Corp.',
office: 'Mongolia',
ext: '4326',
startDate: '2015/01/06',
salary: 359.737,
}, {
name: 'Keely Bauer',
position: 'Nec Tempus Institute',
office: 'Somalia',
ext: '8372',
startDate: '2015/03/09',
salary: 99.718,
}, {
name: 'Noelani Strong',
position: 'Nec LLP',
office: 'Iran',
ext: '0049',
startDate: '2015/08/24',
salary: 480.718,
}, {
name: 'Jeanette Henderson',
position: 'Eu Elit Nulla Corporation',
office: 'Italy',
ext: '7586',
startDate: '2015/06/19',
salary: 253.772,
}, {
name: 'Candace Huber',
position: 'Sed Institute',
office: 'Uganda',
ext: '7183',
startDate: '2015/06/16',
salary: 388.879,
}, {
name: 'Bethany Potter',
position: 'Vivamus Nibh Dolor Incorporated',
office: 'Puerto Rico',
ext: '3354',
startDate: '2014/11/12',
salary: 747.310,
}, {
name: 'Whoopi Burks',
position: 'Justo Inc.',
office: 'Fiji',
ext: '2185',
startDate: '2014/09/24',
salary: 803.037,
}, {
name: 'Sheila Long',
position: 'Diam Associates',
office: 'Sao Tome and Principe',
ext: '7760',
startDate: '2014/12/21',
salary: 674.379,
}, {
name: 'Sonya Church',
position: 'Laoreet Institute',
office: 'Grenada',
ext: '8920',
startDate: '2015/06/03',
salary: 625.147,
}, {
name: 'Shaine Forbes',
position: 'Eu Arcu LLP',
office: 'Cyprus',
ext: '2369',
startDate: '2015/01/18',
salary: 208.100,
}, {
name: 'Alexandra Patrick',
position: 'Ligula Donec Inc.',
office: 'Viet Nam',
ext: '8531',
startDate: '2015/04/09',
salary: 104.063,
}, {
name: 'Patience Vincent',
position: 'Sem Molestie Associates',
office: 'Philippines',
ext: '8888',
startDate: '2015/07/04',
salary: 673.556,
}, {
name: 'Evelyn Smith',
position: 'Fusce Industries',
office: 'Togo',
ext: '5051',
startDate: '2015/08/15',
salary: 737.284,
}, {
name: 'Kieran Gonzalez',
position: 'Non Corp.',
office: 'Equatorial Guinea',
ext: '4834',
startDate: '2015/08/24',
salary: 90.195,
}, {
name: 'Molly Oneil',
position: 'Non Dui Consulting',
office: 'Belize',
ext: '7501',
startDate: '2014/10/28',
salary: 140.767,
}, {
name: 'Nigel Davenport',
position: 'Ullamcorper Velit In Industries',
office: 'Vanuatu',
ext: '0976',
startDate: '2015/03/16',
salary: 70.536,
}, {
name: 'Thor Young',
position: 'Malesuada Consulting',
office: 'French Southern Territories',
ext: '0211',
startDate: '2015/01/28',
salary: 75.501,
}, {
name: 'Finn Delacruz',
position: 'Lorem Industries',
office: 'Cocos (Keeling) Islands',
ext: '2980',
startDate: '2014/12/11',
salary: 754.967,
}, {
name: 'Lane Henderson',
position: 'Pede Foundation',
office: 'Kazakhstan',
ext: '1446',
startDate: '2015/07/02',
salary: 842.050,
}, {
name: 'Shea Potter',
position: 'Curabitur Limited',
office: 'Timor-Leste',
ext: '4654',
startDate: '2015/05/07',
salary: 263.629,
}, {
name: 'Brynn Yang',
position: 'Ut Limited',
office: 'Mayotte',
ext: '4668',
startDate: '2015/01/17',
salary: 74.292,
}, {
name: 'Kylan Fuentes',
position: 'Sapien Aenean Associates',
office: 'Brazil',
ext: '6623',
startDate: '2014/12/28',
salary: 108.632,
}, {
name: 'Lionel Mcbride',
position: 'Ipsum PC',
office: 'Portugal',
ext: '3978',
startDate: '2015/07/11',
salary: 34.244,
}, {
name: 'Paul Lucas',
position: 'Eget LLP',
office: 'Nicaragua',
ext: '8890',
startDate: '2014/09/30',
salary: 690.834,
}, {
name: 'Lareina Williamson',
position: 'Imperdiet Ullamcorper Ltd',
office: 'Cocos (Keeling) Islands',
ext: '9489',
startDate: '2014/12/01',
salary: 603.498,
}, {
name: 'Amy Acevedo',
position: 'Id Institute',
office: 'Cook Islands',
ext: '5592',
startDate: '2015/02/04',
salary: 125.165,
}, {
name: 'Nomlanga Silva',
position: 'Eget LLC',
office: 'Belize',
ext: '3110',
startDate: '2015/01/31',
salary: 268.509,
}, {
name: 'Amena Stone',
position: 'Enim Incorporated',
office: 'Guinea',
ext: '1211',
startDate: '2014/09/23',
salary: 214.381,
}, {
name: 'Danielle Coffey',
position: 'Feugiat Placerat Corp.',
office: 'Sao Tome and Principe',
ext: '8176',
startDate: '2015/06/17',
salary: 137.423,
}, {
name: 'Buffy Russell',
position: 'Lacus Quisque Ltd',
office: 'Ecuador',
ext: '6741',
startDate: '2014/10/17',
salary: 612.184,
}, {
name: 'Kaitlin Lamb',
position: 'Malesuada Fringilla Est Associates',
office: 'Algeria',
ext: '5054',
startDate: '2014/10/18',
salary: 327.367,
}, {
name: 'Leilani Yates',
position: 'Mus Proin LLC',
office: 'South Sudan',
ext: '1550',
startDate: '2015/05/27',
salary: 743.493,
}, {
name: 'Jemima Moon',
position: 'Phasellus Corp.',
office: 'South Georgia and The South Sandwich Islands',
ext: '7582',
startDate: '2015/05/21',
salary: 496.067,
}, {
name: 'Hiroko Schwartz',
position: 'Neque Institute',
office: 'Saint Vincent and The Grenadines',
ext: '9368',
startDate: '2015/03/13',
salary: 178.782,
}, {
name: 'Nathaniel Jensen',
position: 'Mi Tempor Limited',
office: 'Dominica',
ext: '8331',
startDate: '2014/12/05',
salary: 37.441,
}, {
name: 'Silas Sweeney',
position: 'Ultrices Institute',
office: 'Turkmenistan',
ext: '0746',
startDate: '2014/11/13',
salary: 152.980,
}, {
name: 'Jermaine Barry',
position: 'Dapibus Corporation',
office: 'Uzbekistan',
ext: '1545',
startDate: '2015/03/06',
salary: 409.463,
}, {
name: 'Tatiana Nichols',
position: 'Nec Diam Industries',
office: 'Cook Islands',
ext: '4395',
startDate: '2015/05/22',
salary: 51.155,
}, {
name: 'Rama Waller',
position: 'Sem Pellentesque LLC',
office: 'Andorra',
ext: '2973',
startDate: '2014/12/01',
salary: 223.227,
},
];
}
export function reactBootstrapTableData() {
return [
{
id: '1',
name: 'Algerd',
info: {
type: 'JPEG',
dimensions: '200x150',
},
description: 'Palo Alto',
date: 'June 27, 2013',
status: {
progress: '29',
type: 'success',
},
},
{
id: '2',
name: 'Vitaut',
info: {
type: 'PNG',
dimensions: '6433x4522',
},
description: 'Vilnia',
date: 'January 1, 1442',
status: {
progress: '19',
type: 'danger',
},
},
{
id: '3',
name: 'Honar',
info: {
type: 'AVI',
dimensions: '1440x980',
},
description: 'Berlin',
date: 'August 6, 2013',
status: {
progress: '49',
type: 'bar-gray-light',
},
},
{
id: '4',
name: 'Jack',
info: {
type: 'PNG',
dimensions: '12x43',
},
description: 'San Francisco',
date: 'August 19, 2013',
status: {
progress: '69',
},
},
{
id: '5',
name: 'Leon',
info: {
type: 'MP4',
dimensions: '800x480',
},
description: 'Brasilia',
date: 'October 1, 2013',
status: {
progress: '9',
type: 'bar-gray-light',
},
},
{
id: '6',
name: 'Max',
info: {
type: 'TXT',
dimensions: '-',
},
description: 'Helsinki',
date: 'October 29, 2013',
status: {
progress: '38',
type: 'warning',
},
},
{
id: '7',
name: 'Pol',
info: {
type: 'MOV',
dimensions: '640x480',
},
description: 'Radashkovichi',
date: 'November 11, 2013',
status: {
progress: '83',
type: 'danger',
},
},
{
id: '8',
name: 'Chrishna',
info: {
type: 'DOC',
dimensions: '-',
},
description: 'Mumbai',
date: 'December 2, 2013',
status: {
progress: '40',
type: 'info',
},
},
{
id: '9',
name: 'Leslie',
info: {
type: 'AVI',
dimensions: '4820x2140',
},
description: 'Singapore',
date: 'December 6, 2013',
status: {
progress: '18',
type: 'warning',
},
},
{
id: '10',
name: 'David',
info: {
type: 'XML',
dimensions: '-',
},
description: 'Portland',
date: 'December 13, 2013',
status: {
progress: '54',
type: 'bar-gray-light',
},
},
{
id: '11',
name: 'Andrej',
info: {
type: 'VOB',
dimensions: '6433x4522',
},
description: 'Minsk',
date: 'December 14, 2013',
status: {
progress: '25',
},
},
{
id: '12',
name: 'Julia',
info: {
type: 'JPEG',
dimensions: '40x40',
},
description: 'Hrodna',
date: 'July 9, 2012',
status: {
progress: '50',
type: 'warning',
},
},
{
id: '13',
name: 'Ihnat',
info: {
type: 'JAVA',
dimensions: '-',
},
description: 'Los Angeles',
date: 'August 2, 2012',
status: {
progress: '8',
type: 'success',
},
},
{
id: '14',
name: 'Abraham',
info: {
type: 'DOCX',
dimensions: '-',
},
description: 'Panama',
date: 'September 3, 2012',
status: {
progress: '80',
type: 'bar-gray-light',
},
},
{
id: '15',
name: 'Tomas',
info: {
type: 'JPEG',
dimensions: '1800x1420',
},
description: 'Amsterdam',
date: 'November 13, 2012',
status: {
progress: '10',
type: 'bar-gray-light',
},
},
{
id: '16',
name: 'Scott',
info: {
type: 'PNG',
dimensions: '240x460',
},
description: 'Sluck',
date: 'December 5, 2012',
status: {
progress: '93',
},
},
{
id: '17',
name: 'Pham',
info: {
type: 'MAIL',
dimensions: '-',
},
description: 'Tokyo',
date: 'December 8, 2012',
status: {
progress: '44',
type: 'danger',
},
},
{
id: '18',
name: 'Peter',
info: {
type: 'PNG',
dimensions: '8320x6400',
},
description: 'Cape Town',
date: 'December 29, 2012',
status: {
progress: '5',
type: 'bar-gray-light',
},
},
{
id: '19',
name: 'Uladz',
info: {
type: 'JPEG',
dimensions: '2200x1600',
},
description: 'Mahileu',
date: 'December 7, 2013',
status: {
progress: '0',
type: 'gray-light',
},
},
];
}
{
"name": "dynamic",
"version": "0.0.0",
"private": true,
"main": "./Dynamic.js"
}
import React from 'react';
import {
Row,
Col,
Table,
Progress,
Button,
UncontrolledButtonDropdown,
DropdownMenu,
DropdownToggle,
DropdownItem,
Input,
Label,
Badge,
} from 'reactstrap';
import { Sparklines, SparklinesBars } from 'react-sparklines';
import Widget from '../../../../components/Widget';
import s from './Static.modules.scss';
class Static extends React.Component {
constructor(props) {
super(props);
this.state = {
tableStyles: [
{
id: 1,
picture: require('../../../../images/tables/1.png'), // eslint-disable-line global-require
description: 'Palo Alto',
info: {
type: 'JPEG',
dimensions: '200x150',
},
date: new Date('September 14, 2012'),
size: '45.6 KB',
progress: {
percent: 29,
colorClass: 'success',
},
},
{
id: 2,
picture: require('../../../../images/tables/2.png'), // eslint-disable-line global-require
description: 'The Sky',
info: {
type: 'PSD',
dimensions: '2400x1455',
},
date: new Date('November 14, 2012'),
size: '15.3 MB',
progress: {
percent: 33,
colorClass: 'warning',
},
},
{
id: 3,
picture: require('../../../../images/tables/3.png'), // eslint-disable-line global-require
description: 'Down the road',
label: {
colorClass: 'danger',
text: 'INFO!',
},
info: {
type: 'JPEG',
dimensions: '200x150',
},
date: new Date('September 14, 2012'),
size: '49.0 KB',
progress: {
percent: 38,
colorClass: 'inverse',
},
},
{
id: 4,
picture: require('../../../../images/tables/4.png'), // eslint-disable-line global-require
description: 'The Edge',
info: {
type: 'PNG',
dimensions: '210x160',
},
date: new Date('September 15, 2012'),
size: '69.1 KB',
progress: {
percent: 17,
colorClass: 'danger',
},
},
{
id: 5,
picture: require('../../../../images/tables/5.png'), // eslint-disable-line global-require
description: 'Fortress',
info: {
type: 'JPEG',
dimensions: '1452x1320',
},
date: new Date('October 1, 2012'),
size: '2.3 MB',
progress: {
percent: 41,
colorClass: 'primary',
},
},
],
checkboxes1: [false, true, false, false],
checkboxes2: [false, false, false, false, false, false],
checkboxes3: [false, false, false, false, false, false],
};
this.checkAll = this.checkAll.bind(this);
}
parseDate(date) {
this.dateSet = date.toDateString().split(' ');
return `${date.toLocaleString('en-us', { month: 'long' })} ${this.dateSet[2]}, ${this.dateSet[3]}`;
}
checkAll(ev, checkbox) {
const checkboxArr = (new Array(this.state[checkbox].length)).fill(ev.target.checked);
this.setState({
[checkbox]: checkboxArr,
});
}
changeCheck(ev, checkbox, id) {
//eslint-disable-next-line
this.state[checkbox][id] = ev.target.checked;
if (!ev.target.checked) {
//eslint-disable-next-line
this.state[checkbox][0] = false;
}
this.setState({
[checkbox]: this.state[checkbox],
});
}
render() {
return (
<div className={s.root}>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">Tables Basic</li>
</ol>
<h2 className="page-title">Tables - <span className="fw-semi-bold">Static</span></h2>
<Row>
<Col>
<Widget
title={<h5>
Table <span className="fw-semi-bold">Styles</span>
</h5>} settings close
>
<Table>
<thead>
<tr className="fs-sm">
<th className="hidden-sm-down">#</th>
<th>Picture</th>
<th>Description</th>
<th className="hidden-sm-down">Info</th>
<th className="hidden-sm-down">Date</th>
<th className="hidden-sm-down">Size</th>
<th className="hidden-sm-down">Status</th>
<th />
</tr>
</thead>
<tbody>
{
this.state.tableStyles.map(row =>
<tr key={row.id}>
<td>{row.id}</td>
<td>
<img className="img-rounded" src={row.picture} alt="" height="50" />
</td>
<td>
{row.description}
{row.label &&
<div>
<Badge color={row.label.colorClass}>{row.label.text}</Badge>
</div>
}
</td>
<td>
<p className="mb-0">
<small>
Type:
<span className="text-muted fw-semi-bold">&nbsp; {row.info.type}</span>
</small>
</p>
<p>
<small>
Dimensions:
<span className="text-muted fw-semi-bold">&nbsp; {row.info.dimensions}</span>
</small>
</p>
</td>
<td className="text-semi-muted">
{this.parseDate(row.date)}
</td>
<td className="text-semi-muted">
{row.size}
</td>
<td className="width-150">
<Progress
color={row.progress.colorClass} value={row.progress.percent}
className="progress-sm mb-xs"
/>
</td>
</tr>,
)
}
</tbody>
</Table>
<div className="clearfix">
<div className="float-right">
<Button color="default" className="mr-xs" size="sm">Send to...</Button>
<UncontrolledButtonDropdown>
<DropdownToggle color="inverse" className="mr-xs" size="sm" caret>Clear</DropdownToggle>
<DropdownMenu>
<DropdownItem>Clear</DropdownItem>
<DropdownItem>Move ...</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<p>Basic table with styled content</p>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col lg={6}>
<Widget
title={<h5>Table <span className="fw-semi-bold">Styles</span></h5>} settings close
>
<h3>Stripped <span className="fw-semi-bold">Table</span></h3>
<p>Each row is highlighted. You will never lost there. Just <code>.table-striped</code> it.</p>
<Table className="table-striped">
<thead>
<tr>
<th>
<div className="abc-checkbox">
<Input
id="checkbox1" type="checkbox" checked={this.state.checkboxes1[0]}
onChange={event => this.checkAll(event, 'checkboxes1')}
/>
<Label for="checkbox1" />
</div>
</th>
<th>First Name</th>
<th>Last Name</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox2" type="checkbox" checked={this.state.checkboxes1[1]}
onChange={event => this.changeCheck(event, 'checkboxes1', 1)}
/>
<Label for="checkbox2" />
</div>
</td>
<td>Mark</td>
<td>Otto</td>
<td><Badge color="danger">Online</Badge></td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox3" type="checkbox" checked={this.state.checkboxes1[2]}
onChange={event => this.changeCheck(event, 'checkboxes1', 2)}
/>
<Label for="checkbox3" />
</div>
</td>
<td>Jacob <Badge color="warning" className="text-gray-dark">ALERT!</Badge></td>
<td>Thornton</td>
<td><span className="badge bg-gray">Away</span></td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox4" type="checkbox" checked={this.state.checkboxes1[3]}
onChange={event => this.changeCheck(event, 'checkboxes1', 3)}
/>
<Label for="checkbox4" />
</div>
</td>
<td>Larry</td>
<td>the Bird</td>
<td><Badge color="danger">Construct</Badge></td>
</tr>
</tbody>
</Table>
<br /><br />
<h3>Hover <span className="fw-semi-bold">Table</span></h3>
<p>{'Trace only what\'s really important. '}<code>.table-hover</code> is made for it.</p>
<div className="table-responsive">
<Table className="table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Status</th>
</tr>
</thead>
{/* eslint-disable */}
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td><a href="#">ottoto@example.com</a></td>
<td><Badge color="gray" className="text-gray" pill>Pending</Badge></td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td><a href="#">fat.thor@example.com</a></td>
<td><Badge color="gray" className="text-gray-light" pill>Unconfirmed</Badge></td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td><a href="#">larry@example.com</a></td>
<td><Badge color="gray" className="text-gray" pill>New</Badge></td>
</tr>
<tr>
<td>4</td>
<td>Peter</td>
<td>Horadnia</td>
<td><a href="#">peter@example.com</a></td>
<td><Badge color="gray" className="text-gray-light" pill>Active</Badge></td>
</tr>
</tbody>
{/* eslint-enable */}
</Table>
</div>
</Widget>
</Col>
<Col lg={6}>
<Widget
title={<h5>Table <span className="fw-semi-bold">Styles</span></h5>} settings close
>
<h3>Bordered <span className="fw-semi-bold">Table</span></h3>
<p>Each row is highlighted. You will never lost there. That&apos;s how
all of us learned in school the table should look like. Just add
<code>.table-bordered</code> to it.</p>
<Table className="table-bordered table-lg mt-lg mb-0">
<thead className="text-uppercase">
<tr>
<th>
<div className="abc-checkbox">
<Input
id="checkbox10" type="checkbox" checked={this.state.checkboxes2[0]}
onChange={event => this.checkAll(event, 'checkboxes2')}
/>
<Label for="checkbox10" />
</div>
</th>
<th>Product</th>
<th className="text-right">Price</th>
<th className="text-center">Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox11" type="checkbox" checked={this.state.checkboxes2[1]}
onChange={event => this.changeCheck(event, 'checkboxes2', 1)}
/>
<Label for="checkbox11" />
</div>
</td>
<td>On the Road</td>
<td className="text-right">$25 224.2</td>
<td className="text-center">
<Sparklines data={[13, 14, 16, 15, 4, 14, 20]} style={{ width: '35px', height: '20px' }}>
<SparklinesBars style={{ stroke: 'white', fill: '#618fb0' }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox12" type="checkbox" checked={this.state.checkboxes2[2]}
onChange={event => this.changeCheck(event, 'checkboxes2', 2)}
/>
<Label for="checkbox12" />
</div>
</td>
<td>HP Core i7</td>
<td className="text-right">$87 346.1</td>
<td className="text-center">
<Sparklines data={[14, 12, 16, 11, 17, 19, 16]} style={{ width: '35px', height: '20px' }}>
<SparklinesBars style={{ stroke: 'white', fill: '#999' }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox13" type="checkbox" checked={this.state.checkboxes2[3]}
onChange={event => this.changeCheck(event, 'checkboxes2', 3)}
/>
<Label for="checkbox13" />
</div>
</td>
<td>Let&apos;s Dance</td>
<td className="text-right">$57 944.6</td>
<td className="text-center">
<Sparklines data={[11, 17, 19, 16, 14, 12, 16]} style={{ width: '35px', height: '20px' }}>
<SparklinesBars style={{ stroke: 'white', fill: '#f0b518' }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox14" type="checkbox" checked={this.state.checkboxes2[4]}
onChange={event => this.changeCheck(event, 'checkboxes2', 4)}
/>
<Label for="checkbox14" />
</div>
</td>
<td>Air Pro</td>
<td className="text-right">$118 533.1</td>
<td className="text-center">
<Sparklines data={[13, 14, 20, 16, 15, 4, 14]} style={{ width: '35px', height: '20px' }}>
<SparklinesBars style={{ stroke: 'white', fill: '#e5603b' }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox15" type="checkbox" checked={this.state.checkboxes2[5]}
onChange={event => this.changeCheck(event, 'checkboxes2', 5)}
/>
<Label for="checkbox15" />
</div>
</td>
<td>Version Control</td>
<td className="text-right">$72 854.5</td>
<td className="text-center">
<Sparklines data={[16, 15, 4, 14, 13, 14, 20]} style={{ width: '35px', height: '20px' }}>
<SparklinesBars style={{ stroke: 'white', fill: '#618fb0' }} />
</Sparklines>
</td>
</tr>
</tbody>
</Table>
</Widget>
<Widget
title={<h5>Table <span className="fw-semi-bold">Styles</span></h5>} settings close
>
<h3>Overflow <span className="fw-semi-bold">Table</span></h3>
<p>
Add any non-bordered .table within a widget for a seamless design.
Awesome look for no cost.
Just wrap the table with simple css class <code>.widget-table-overflow</code> inside
of widget
</p>
<div className="widget-table-overflow">
<Table className="table-striped table-lg mt-lg mb-0">
<thead>
<tr>
<th>
<div className="abc-checkbox">
<Input
id="checkbox20" type="checkbox" checked={this.state.checkboxes3[0]}
onChange={event => this.checkAll(event, 'checkboxes3')}
/>
<Label for="checkbox20" />
</div>
</th>
<th>Product</th>
<th className="text-right">Price</th>
<th className="text-center">Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox21" type="checkbox" checked={this.state.checkboxes3[1]}
onChange={event => this.changeCheck(event, 'checkboxes3', 1)}
/>
<Label for="checkbox21" />
</div>
</td>
<td>On the Road</td>
<td className="text-right">$25 224.2</td>
<td className="text-center">
<Sparklines data={[13, 14, 16, 15, 4, 14, 20]} style={{ width: '35px', height: '20px' }}>
<SparklinesBars style={{ stroke: 'white', fill: '#618fb0' }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox22" type="checkbox" checked={this.state.checkboxes3[2]}
onChange={event => this.changeCheck(event, 'checkboxes3', 2)}
/>
<Label for="checkbox22" />
</div>
</td>
<td>HP Core i7</td>
<td className="text-right">$87 346.1</td>
<td className="text-center">
<Sparklines data={[14, 12, 16, 11, 17, 19, 16]} style={{ width: '35px', height: '20px' }}>
<SparklinesBars style={{ stroke: 'white', fill: '#999' }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox23" type="checkbox" checked={this.state.checkboxes3[3]}
onChange={event => this.changeCheck(event, 'checkboxes3', 3)}
/>
<Label for="checkbox23" />
</div>
</td>
<td>Let&apos;s Dance</td>
<td className="text-right">$57 944.6</td>
<td className="text-center">
<Sparklines data={[11, 17, 19, 16, 14, 12, 16]} style={{ width: '35px', height: '20px' }}>
<SparklinesBars style={{ stroke: 'white', fill: '#f0b518' }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox24" type="checkbox" checked={this.state.checkboxes3[4]}
onChange={event => this.changeCheck(event, 'checkboxes3', 4)}
/>
<Label for="checkbox24" />
</div>
</td>
<td>Air Pro</td>
<td className="text-right">$118 533.1</td>
<td className="text-center">
<Sparklines data={[13, 14, 20, 16, 15, 4, 14]} style={{ width: '35px', height: '20px' }}>
<SparklinesBars style={{ stroke: 'white', fill: '#e5603b' }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox25" type="checkbox" checked={this.state.checkboxes3[5]}
onChange={event => this.changeCheck(event, 'checkboxes3', 5)}
/>
<Label for="checkbox25" />
</div>
</td>
<td>Version Control</td>
<td className="text-right">$72 854.5</td>
<td className="text-center">
<Sparklines data={[16, 15, 4, 14, 13, 14, 20]} style={{ width: '35px', height: '20px' }}>
<SparklinesBars style={{ stroke: 'white', fill: '#618fb0' }} />
</Sparklines>
</td>
</tr>
</tbody>
</Table>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default Static;
@import '../../../../styles/app';
.root {
// some styles
}
{
"name": "static",
"version": "0.0.0",
"private": true,
"main": "./Static.js"
}
import React, { Component } from 'react';
import cx from 'classnames';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Alert,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
class Alerts extends Component {
state = {
alerts: [{
id: 'al-1',
type: 'success',
msg: '<span class="fw-semi-bold">Success:</span> You successfully read this important alert message.',
visible: [true, true, true],
}, {
id: 'al-2',
type: 'info',
msg: '<span class="fw-semi-bold">Info:</span> This alert needs your attention, but it\'s not super important.',
visible: [true, true, true],
}, {
id: 'al-3',
type: 'warning',
msg: '<span class="fw-semi-bold"><strong>Warning:</strong></span> Best check yo self, you\'re not looking too good.',
visible: [true, true, true],
}, {
id: 'al-4',
type: 'danger',
msg: '<span class="fw-semi-bold">Danger:</span> Change this and that and try again. <a class="btn btn-default btn-xs float-right mr" href="#">Ignore</a> <a class="btn btn-danger btn-xs float-right mr-xs" href="#">Take this action</a>',
visible: [true, true, true],
}],
}
closeAlert(index, alertGroup) {
const newAlerts = [...this.state.alerts];
newAlerts[index].visible[alertGroup] = false;
this.setState({ alerts: newAlerts });
}
render() {
const { alerts } = this.state;
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Alerts</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Alerts</h1>
<Row>
<Col xs={12} md={8}>
<Widget
title={<h5>Alert <span className="fw-semi-bold">Messages</span></h5>}
close collapse
>
<p>Alerts are available for any length of text, as well as an optional dismiss button.</p>
{alerts.map((alert, index) => <Alert
key={alert.id} isOpen={alert.visible[0]} toggle={() => this.closeAlert(index, 0)}
color={alert.type}
>
<span dangerouslySetInnerHTML={{ __html: alert.msg }} />
</Alert>)}
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Transparent <span className="fw-semi-bold">Alerts</span></h5>}
close collapse
>
<p>Transparent alerts are available by adding <code>.alert-transparent</code> class.</p>
{alerts.map((alert, index) => <Alert
className="alert-transparent"
key={alert.id} isOpen={alert.visible[1]} toggle={() => this.closeAlert(index, 1)}
color={alert.type}
>
<span dangerouslySetInnerHTML={{ __html: alert.msg }} />
</Alert>)}
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Rounded <span className="fw-semi-bold">Alerts</span></h5>}
close collapse
>
<p>Rounded alerts are available by adding <code>.alert-rounded</code> class.</p>
{alerts.map((alert, index) => <Alert
className={cx('alert-rounded', { 'alert-transparent': index % 2 !== 1 })}
key={alert.id} isOpen={alert.visible[2]} toggle={() => this.closeAlert(index, 2)}
color={alert.type}
>
<span dangerouslySetInnerHTML={{ __html: alert.msg }} />
</Alert>)}
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Additional <span className="fw-semi-bold">Content</span></h5>}
close collapse
>
<p>Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</p>
<Alert color="success">
<h4 className="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message. This example text is going
to run a bit longer so that you can see how spacing within an alert works with this kind
of content.
</p>
<hr />
<p className="mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</Alert>
<Alert color="danger">
<h4 className="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message. This example text is going
to run a bit longer so that you can see how spacing within an alert works with this kind
of content.
</p>
</Alert>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default Alerts;
{
"name": "Alerts",
"version": "0.0.0",
"private": true,
"main": "./Alerts.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Badge,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
const Badges = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Badge</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Badge</h1>
<Row>
<Col xs={12} md={8}>
<Widget
title={<h5>Badge <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>
Badges scale to match the size of the immediate parent element by
using relative font sizing and em units.
</p>
<h1>Example heading <Badge color="primary">Primary</Badge></h1>
<h2>Example heading <Badge color="info">Info</Badge></h2>
<h3>Example heading <Badge color="warning">Warning</Badge></h3>
<h4>Example heading <Badge color="success">Success</Badge></h4>
<h5>Example heading <Badge color="danger">Danger</Badge></h5>
<h6>Example heading <Badge color="secondary">Secondary</Badge></h6>
<p>Badges can be used as part of links or buttons to provide a counter.</p>
<Button color="primary">Notifications <Badge color="danger">4</Badge></Button>
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Pill <span className="fw-semi-bold">Badges</span></h5>}
close collapse
>
<p>
Use the <code>pill</code> property to make badges more rounded
(with a larger border-radius and additional horizontal padding).
</p>
<Badge className="mr-xs" color="primary" pill>Primary</Badge>
<Badge className="mr-xs" color="info" pill>Info</Badge>
<Badge className="mr-xs" color="warning" pill>Warning</Badge>
<Badge className="mr-xs" color="success" pill>Success</Badge>
<Badge className="mr-xs" color="danger" pill>Danger</Badge>
<Badge className="mr-xs" color="secondary" pill>Secondary</Badge>
<Badge className="mr-xs" color="light" pill>Light</Badge>
<Badge className="mr-xs" color="dark" pill>Dark</Badge>
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Pill <span className="fw-semi-bold">Badges</span></h5>}
close collapse
>
<p>
Using the contextual <code>href=&quot;&#35;&quot;</code> classes on
an <code>&lt;Badge&gt;</code> element quickly provide actionable badges with hover and focus states.
</p>
<Badge className="mr-xs" href="#" color="primary">Primary</Badge>
<Badge className="mr-xs" href="#" color="info">Info</Badge>
<Badge className="mr-xs" href="#" color="warning">Warning</Badge>
<Badge className="mr-xs" href="#" color="success">Success</Badge>
<Badge className="mr-xs" href="#" color="danger">Danger</Badge>
<Badge className="mr-xs" href="#" color="secondary">Secondary</Badge>
<Badge className="mr-xs" href="#" color="light">Light</Badge>
<Badge className="mr-xs" href="#" color="dark">Dark</Badge>
</Widget>
</Col>
</Row>
</div>
);
export default Badges;
{
"name": "Badge",
"version": "0.0.0",
"private": true,
"main": "./Badge.js"
}
import React from 'react';
import {
Row,
Col,
Button,
ButtonGroup,
ButtonToolbar,
ButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
class Buttons extends React.Component {
constructor(props) {
super(props);
this.toggleOne = this.toggleOne.bind(this);
this.toggleTwo = this.toggleTwo.bind(this);
this.toggleThree = this.toggleThree.bind(this);
this.toggleFour = this.toggleFour.bind(this);
this.onRadioBtnClickOne = this.onRadioBtnClickOne.bind(this);
this.onRadioBtnClickTwo = this.onRadioBtnClickTwo.bind(this);
this.onCheckboxBtnClickOne = this.onCheckboxBtnClickOne.bind(this);
this.onCheckboxBtnClickTwo = this.onCheckboxBtnClickTwo.bind(this);
this.state = {
dropdownOpenOne: false,
dropdownOpenTwo: false,
dropdownOpenThree: false,
dropdownOpenFour: false,
cSelectedOne: [2],
cSelectedTwo: [1, 3],
rSelectedTwo: 2,
rSelectedOne: null,
};
}
onRadioBtnClickOne(rSelectedOne) {
this.setState({ rSelectedOne });
}
onRadioBtnClickTwo(rSelectedTwo) {
this.setState({ rSelectedTwo });
}
onCheckboxBtnClickOne(selected) {
const index = this.state.cSelectedOne.indexOf(selected);
if (index < 0) {
this.state.cSelectedOne.push(selected);
} else {
this.state.cSelectedOne.splice(index, 1);
}
this.setState({ cSelectedOne: [...this.state.cSelectedOne] });
}
onCheckboxBtnClickTwo(selected) {
const index = this.state.cSelectedTwo.indexOf(selected);
if (index < 0) {
this.state.cSelectedTwo.push(selected);
} else {
this.state.cSelectedTwo.splice(index, 1);
}
this.setState({ cSelectedTwo: [...this.state.cSelectedTwo] });
}
toggleOne() {
this.setState({
dropdownOpenOne: !this.state.dropdownOpenOne,
});
}
toggleTwo() {
this.setState({
dropdownOpenTwo: !this.state.dropdownOpenTwo,
});
}
toggleThree() {
this.setState({
dropdownOpenThree: !this.state.dropdownOpenThree,
});
}
toggleFour() {
this.setState({
dropdownOpenFour: !this.state.dropdownOpenFour,
});
}
render() {
return (
<div>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="active breadcrumb-item">UI Buttons</li>
</ol>
<h1 className="page-title">Buttons - <span className="fw-semi-bold">Styles </span></h1>
<Row>
{/* Color options */}
<Col md={6} sm={12} xs={12}>
<Widget
title={<h5> Color <span className="fw-semi-bold">Options</span>
</h5>} close collapse
>
<div>
<p className="fs-mini text-muted">
Use any of the available button classes to quickly create a styled button.
Semantically distinguishable beauty.
</p>
<p className="text-left">
<Button color="default" className="width-100 mb-xs mr-xs">Default</Button>
<Button color="primary" className="width-100 mb-xs mr-xs">Primary</Button>
<Button color="info" className="width-100 mb-xs mr-xs">Info</Button>
<Button color="success" className="width-100 mb-xs mr-xs">Success</Button>
<Button color="warning" className="width-100 mb-xs mr-xs">Warning</Button>
<Button color="danger" className="width-100 mb-xs mr-xs">Danger</Button>
<Button color="gray" className="width-100 mb-xs mr-xs">Gray</Button>
<Button color="inverse" className="width-100 mb-xs mr-xs">Inverse</Button>
</p>
</div>
</Widget>
</Col>
{/* Size variants */}
<Col md={6} sm={12} xs={12}>
<Widget
title={<h5> Size <span className="fw-semi-bold">Variants</span>
</h5>} close collapse
>
<div>
<p className="fs-mini text-muted">
Fancy larger or smaller buttons?
Four separate sizes available for all use cases:
from tiny 10px button to large one.
</p>
<p>
<Button color="default" size="lg" className="mb-xs mr-xs">Large button</Button>
<Button color="primary" className="mb-xs mr-xs">Default button</Button>
<Button color="info" size="sm" className="mb-xs mr-xs">Small button</Button>
<Button color="success" size="xs" className="mb-xs mr-xs">Tiny button</Button>
</p>
</div>
</Widget>
</Col>
<Col md={6} sm={12} xs={12}>
<Widget
title={<h5>Outline <span className="fw-semi-bold">Buttons</span>
</h5>} close collapse
>
<div>
<p className="fs-mini">
In need of a button, but not the hefty background colors they bring?
Use <code>outline</code> property to remove all
background images and colors on any button.
</p>
<p>
<Button outline color="default" className="width-100 mb-xs mr-xs">Default</Button>
<Button outline color="primary" className="width-100 mb-xs mr-xs">Primary</Button>
<Button outline color="info" className="width-100 mb-xs mr-xs">Info</Button>
<Button outline color="success" className="width-100 mb-xs mr-xs">Success</Button>
<Button outline color="warning" className="width-100 mb-xs mr-xs">Warning</Button>
<Button outline color="danger" className="width-100 mb-xs mr-xs">Danger</Button>
<Button outline color="gray" className="width-100 mb-xs mr-xs">Gray</Button>
<Button outline color="inverse" className="width-100 mb-xs mr-xs">Inverse</Button>
</p>
</div>
</Widget>
</Col>
<Col md={6} sm={12} xs={12}>
<Widget
title={<h5>Rounded <span className="fw-semi-bold">Buttons</span>
</h5>} close collapse
>
<div>
<p className="fs-mini">
Use any of the available button properties to quickly create a styled button.
Semantically distinguishable beauty. Use <code>.btn-rounded</code> or <code>.btn-rounded-f</code>.
</p>
<p>
<Button color="default" className="btn-rounded-f width-100 mb-xs mr-xs">Default</Button>
<Button color="primary" className="btn-rounded-f width-100 mb-xs mr-xs">Primary</Button>
<Button color="info" className="btn-rounded-f width-100 mb-xs mr-xs">Info</Button>
<Button color="success" className="btn-rounded-f width-100 mb-xs mr-xs">Success</Button>
<Button outline color="warning" className="btn-rounded width-100 mb-xs mr-xs">Warning</Button>
<Button outline color="danger" className="btn-rounded width-100 mb-xs mr-xs">Danger</Button>
<Button outline color="gray" className="btn-rounded width-100 mb-xs mr-xs">Gray</Button>
<Button outline color="inverse" className="btn-rounded width-100 mb-xs mr-xs">Inverse</Button>
</p>
</div>
</Widget>
</Col>
{/* Block Buttons */}
<Col md={6} sm={12} xs={12}>
<Widget
title={<h5> Block <span className="fw-semi-bold">Buttons</span>
</h5>} close collapse
>
<div>
<p className="fs-mini text-muted">
Create block level buttons - those that span the full width
of a parent— by adding <code>block</code>
to <code>&lt;Button&gt;</code> component.
Great for menu & social buttons.
</p>
<Button color="info" block>Block Button</Button>
<Button color="default" block>Show Menu &nbsp;&nbsp;&nbsp;<i
className="fa fa-bars"
/></Button>
<Button color="primary" block><i className="fa fa-facebook" />&nbsp;&nbsp;Login mit
Facebook</Button>
<Button color="warning" block>Are you sure?</Button>
</div>
</Widget>
</Col>
{/* Disabled Buttons */}
<Col md={6} sm={12} xs={12}>
<Widget
title={<h5> Disabled <span className="fw-semi-bold">Buttons</span>
</h5>} close collapse
>
<div>
<p className="fs-mini text-muted">
Make buttons look unclickable by fading them back 50%.
Add the <code>disabled</code> to <code>&lt;Button&gt;</code> component.
</p>
<p>
<Button color="primary" disabled className="mr-xs">Primary button</Button>
<Button color="default" disabled className="mr-xs">Button</Button>
</p>
<p>
<Button color="success" size="sm" disabled className="mr-xs">Primary Link</Button>
<Button color="default" size="sm" disabled className="mr-xs">Link</Button>
</p>
</div>
</Widget>
</Col>
{/* Buttons Groups */}
<Col md={6} sm={12} xs={12}>
<Widget
title={<h5> Button <span className="fw-semi-bold">Groups</span>
</h5>} close collapse
>
<div>
<p className="fs-mini text-muted">
Group a series of buttons together on a single
line with the button group.
Add on optional JavaScript radio and checkbox
style behavior with Bootstrap buttons plugin.
</p>
<ButtonGroup className="mb-xs">
<Button color="default">Left</Button>
<Button color="default">Middle</Button>
<Button color="default">Right</Button>
</ButtonGroup>
<ButtonToolbar className="mb-xs">
<ButtonGroup className="mr-2">
<Button color="default">1</Button>
<Button color="default">2</Button>
<Button color="default">3</Button>
<Button color="default">4</Button>
</ButtonGroup>
<ButtonGroup className="mr-2">
<Button color="default">5</Button>
<Button color="default">6</Button>
<Button color="default">7</Button>
</ButtonGroup>
<ButtonGroup className="mr-2">
<Button color="default">8</Button>
</ButtonGroup>
</ButtonToolbar>
</div>
</Widget>
</Col>
{/* Button Dropdowns */}
{/* todo: check after reactstrap update */}
<Col md={6} sm={12} xs={12}>
<Widget
title={<h5> Button <span className="fw-semi-bold">Dropdowns</span>
</h5>} close collapse
>
<div>
<p className="fs-mini text-muted">
Add dropdown menus to nearly anything with
this simple plugin, including the buttons,
navbar, tabs, and pills.
Both solid & segmented dropdown options available.
</p>
<div className="mb-xs">
<ButtonDropdown
isOpen={this.state.dropdownOpenOne} toggle={this.toggleOne}
className="mr-xs"
>
<DropdownToggle caret color="danger">
&nbsp; One &nbsp;
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown isOpen={this.state.dropdownOpenTwo} toggle={this.toggleTwo}>
<DropdownToggle size="sm" caret color="gray">
&nbsp; One &nbsp;
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
<div className="mb-xs">
<ButtonDropdown
isOpen={this.state.dropdownOpenThree} toggle={this.toggleThree}
className="mr-xs"
>
<Button id="dropdownThree" color="primary">Primary</Button>
<DropdownToggle color="primary" caret className="dropdown-toggle-split" />
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown isOpen={this.state.dropdownOpenFour} toggle={this.toggleFour}>
<Button size="sm" id="dropdownFour" color="gray">Gray</Button>
<DropdownToggle size="sm" caret color="gray" className="dropdown-toggle-split" />
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col md={12} sm={12} xs={12}>
<Widget
title={<h6> Button <span className="fw-semi-bold">Options</span>
</h6>} close collapse
>
<Row>
{/* Checkboxes */}
<Col md={4} sm={6} xs={12}>
<h4> Button <span className="fw-semi-bold">Checkboxes</span></h4>
<p className="fs-mini text-muted">
Do more with buttons. Control button states
or create groups of buttons for more components like
toolbars.
Use <code>ButtonGroup</code> to a group
of checkboxes for checkbox style toggling on
btn-group.
</p>
<div className="mb-xs">
<ButtonGroup>
<Button
color="default" onClick={() => this.onCheckboxBtnClickOne(1)}
active={this.state.cSelectedOne.includes(1)}
>Left way</Button>
<Button
color="default" onClick={() => this.onCheckboxBtnClickOne(2)}
active={this.state.cSelectedOne.includes(2)}
>Middle way</Button>
<Button
color="default" onClick={() => this.onCheckboxBtnClickOne(3)}
active={this.state.cSelectedOne.includes(3)}
>Right way</Button>
</ButtonGroup>
</div>
<div className="mb-xs">
<ButtonGroup>
<Button
size="sm" color="default" onClick={() => this.onCheckboxBtnClickTwo(1)}
active={this.state.cSelectedTwo.includes(1)}
>Left way</Button>
<Button
size="sm" color="default" onClick={() => this.onCheckboxBtnClickTwo(2)}
active={this.state.cSelectedTwo.includes(2)}
>Middle way</Button>
<Button
size="sm" color="default" onClick={() => this.onCheckboxBtnClickTwo(3)}
active={this.state.cSelectedTwo.includes(3)}
>Right way</Button>
</ButtonGroup>
</div>
</Col>
{/* Radios */}
<Col md={4} sm={12} xs={12}>
<h4> Button <span className="fw-semi-bold">Radios</span></h4>
<p className="fs-mini text-muted">
Do more with buttons. Control button states
or create groups of buttons for more components like toolbars.
Use <code>ButtonGroup</code> to a group of radio
inputs for radio style toggling on btn-group.
</p>
<div className="mb-xs">
<ButtonGroup>
<Button
color="default" onClick={() => this.onRadioBtnClickOne(1)}
active={this.state.rSelectedOne === 1}
>Left way</Button>
<Button
color="default" onClick={() => this.onRadioBtnClickOne(2)}
active={this.state.rSelectedOne === 2}
>Middle way</Button>
<Button
color="default" onClick={() => this.onRadioBtnClickOne(3)}
active={this.state.rSelectedOne === 3}
>Right way</Button>
</ButtonGroup>
</div>
<div className="mb-xs">
<ButtonGroup>
<Button
size="sm" color="default" onClick={() => this.onRadioBtnClickTwo(1)}
active={this.state.rSelectedTwo === 1}
>Left way</Button>
<Button
size="sm" color="default" onClick={() => this.onRadioBtnClickTwo(2)}
active={this.state.rSelectedTwo === 2}
>Middle way</Button>
<Button
size="sm" color="default" onClick={() => this.onRadioBtnClickTwo(3)}
active={this.state.rSelectedTwo === 3}
>Right way</Button>
</ButtonGroup>
</div>
</Col>
{/* Buttons with Icons */}
<Col md={4} sm={12} xs={12}>
<h4> Use with <span className="fw-semi-bold">Icons</span></h4>
<p className="fs-mini text-muted">
Fontawesome and Glyph- icons may be used in buttons,
button groups for a toolbar, navigation, or prepended form inputs.
Let your buttons shine!
</p>
<div className="text-center mb-sm">
<Button color="default" className="width-100 mr-xs">
<i className="glyphicon glyphicon-tree-conifer text-success mr-xs mb-xs" />
Forest
</Button>
<Button color="default" className="width-100 mr-xs">
<i className="fa fa-check text-danger mr-xs mb-xs" />
Submit
</Button>
<Button color="default" className="width-100 mr-xs">
<i className="fa fa-facebook text-primary mr-xs mb-xs" />
Login
</Button>
</div>
<div className="text-center">
<Button color="inverse" className="width-100 mr-xs">
<i className="fa fa-exclamation text-warning mr-xs mb-xs" />
Error
</Button>
<Button color="inverse" className="width-100 mr-xs">
<i className="glyphicon glyphicon-globe text-info mr-xs mb-xs" />
<span className="text-info">Globe</span>
</Button>
<Button color="inverse" className="width-100 mr-xs">
<span className="circle bg-white mr-xs">
<i className="fa fa-map-marker text-gray" />
</span>
Map
</Button>
</div>
</Col>
</Row>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default Buttons;
{
"name": "UIButtons",
"version": "0.0.0",
"private": true,
"main": "./Buttons.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Badge,
Card,
CardBody,
CardTitle,
CardText,
CardImg,
} from 'reactstrap';
import lifestyleImg from '../../../../images/cards/lifestyle.jpg';
import isometricImg from '../../../../images/cards/isometric.jpg';
import mountainsImg from '../../../../images/cards/mountains.jpeg';
import reactnativeImg from '../../../../images/cards/rns.png';
const Cards = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Card</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Cards - <span className="fw-semi-bold">Examples</span></h1>
<p>
A card is a flexible and extensible content container. It includes options for headers and footers,
a wide variety of content, contextual background colors, and powerful display options. If you’re
familiar with Bootstrap 3, cards replace its old panels, wells, and thumbnails. Similar functionality
to those components is available as modifier classes for cards.
</p>
<Row>
<Col>
<Card
className="background-cover border-0 mb-xlg"
style={{ backgroundImage: `url(${lifestyleImg})` }}
>
<CardBody className="text-white">
<span>13 Mar</span>
<h3 className="mt-lg">Lifestyle brand</h3>
<p className="w-75">A lifestyle brand is a company that markets its products or services to embody the
interests, attitudes, and opinions of a group or a culture. Lifestyle brands
seek to inspire, guide, and motivate people, with the goal of their products
contributing to the definition of the consumer&apos;s way of life.</p>
<Button className="btn-rounded-f mt-lg" color="danger">Full Article</Button>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={12} sm={6} md={4}>
<Card className="border-0 mb-xlg">
<CardImg top width="100%" src={isometricImg} alt="Card image cap" />
<CardBody>
<CardTitle>Isometric design</CardTitle>
<CardText>
Isometric projection is a method for visually representing three-dimensional in two
dimensions in technical and engineering drawings.
</CardText>
<div className="w-100 text-center">
<Button className="btn-rounded-f" color="primary">Full Article</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xs={12} sm={6} md={4}>
<Card className="mb-xlg border-0">
<CardBody>
<button className="btn-link fw-semi-bold text-success">Avg Rating</button>
<button className="btn-link fw-semi-bold text-muted ml-sm">All Time</button>
<hr />
<div className="d-flex justify-content-between mb-lg">
<div className="text-warning">
<i className="fa fa-star mr-xs" />
<i className="fa fa-star mr-xs" />
<i className="fa fa-star mr-xs" />
<i className="fa fa-star mr-xs" />
<i className="fa fa-star" />
</div>
<span className="text-muted"><small>342 REVIEWS</small></span>
</div>
<div className="mb-lg">
<h3 className="text-success mb-0">69%</h3>
of customers recomend this product
</div>
<Button className="btn-rounded-f" color="success">Write a Review</Button>
</CardBody>
</Card>
<Card className="mb-xlg border-0" style={{ position: 'relative' }}>
<CardImg top width="100%" src={mountainsImg} alt="Card image cap" />
<Badge className="mt-lg fw-thin rounded-0" color="success" style={{ position: 'absolute' }}>New</Badge>
<CardBody>
<CardTitle>Weekly Inspiration</CardTitle>
<hr />
<CardText>
There are at least 109 mountains on Earts with elevations greeter than 7,200 meters
</CardText>
<Button className="border-0" color="default">Read More</Button>
</CardBody>
</Card>
</Col>
<Col xs={12} sm={6} md={4}>
<Card className="border-0">
<CardImg top width="100%" src={reactnativeImg} alt="Card image cap" />
<CardBody>
<small>Technology</small><br />
<CardTitle className="mb mt-xs">
React Native Starter
</CardTitle>
<hr />
<div className="w-100 d-flex justify-content-between align-items-center">
<span className="text-muted fw-semi-bold">from $49.95</span>
<Button color="info">Read more</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
export default Cards;
{
"name": "Card",
"version": "0.0.0",
"private": true,
"main": "./Card.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
UncontrolledCarousel,
} from 'reactstrap';
import firstSlide from '../../../../images/slides/1.jpg';
import secondSlide from '../../../../images/slides/2.jpg';
import thirdSlide from '../../../../images/slides/3.jpg';
const carouselItems = [
{ src: firstSlide, caption: '' },
{ src: secondSlide, caption: '' },
{ src: thirdSlide, caption: '' },
];
const Carousel = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Carousel</BreadcrumbItem>
</Breadcrumb>
<p>
The carousel is a slideshow for cycling through a series of content, built with
CSS 3D transforms and a bit of JavaScript. It works with a series of images, text,
or custom markup. It also includes support for previous/next controls and indicators.
</p>
<Row>
<Col>
<UncontrolledCarousel captionTex={null} items={carouselItems} />
</Col>
</Row>
</div>
);
export default Carousel;
{
"name": "Carousel",
"version": "0.0.0",
"private": true,
"main": "./Carousel.js"
}
This diff could not be displayed because it is too large.
@import '../../../../styles/app';
.root {
:global {
.icon-list {
margin-top: $spacer;
}
.icon-list-item {
height: 32px;
font-size: 14px;
line-height: 32px;
> a {
color: $text-color;
text-decoration: none;
}
.glyphicon,
.fa,
.fi {
width: 32px;
margin-right: 10px;
}
&:hover {
.glyphicon,
.fa,
.fi {
font-size: 28px;
top: 2px;
}
.fa,
.fi {
vertical-align: -5px;
}
.glyphicon {
vertical-align: -6px;
}
}
}
}
}
{
"name": "UIIcons",
"version": "0.0.0",
"private": true,
"main": "./Icons.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Jumbotron,
Container,
} from 'reactstrap';
const Jumb = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Jumbotron</BreadcrumbItem>
</Breadcrumb>
<Jumbotron fluid>
<Container fluid>
<h1 className="display-3">Fluid jumbotron</h1>
<p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</Container>
</Jumbotron>
<Row>
<Col xs={12} md={8}>
<Jumbotron>
<h1 className="display-3">Hello, world!</h1>
<p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.</p>
<hr className="my-2" />
<p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
<p className="lead">
<Button color="primary">Learn More</Button>
</p>
</Jumbotron>
</Col>
</Row>
</div>
);
export default Jumb;
{
"name": "Jumbotron",
"version": "0.0.0",
"private": true,
"main": "./Jumbotron.js"
}
import React from 'react';
import {
Row, Col,
} from 'reactstrap';
import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
import SortableTree from 'react-sortable-tree';
import Widget from '../../../../components/Widget';
import './ListGroups.scss';
const SortableItem = SortableElement(({ value }) => <li className="list-group-item">
<i className="fa fa-sort" />
<button className="close flex-last ml-auto" data-dismiss="alert">&times;</button>
&nbsp;&nbsp;&nbsp; {value.id} &nbsp;&nbsp;&nbsp;
{value.text}
</li>);
const SortableList = SortableContainer(({ items }) => (
<ul className="list-group list-group-sortable mt-xs">
{items.map((value, index) => (
<SortableItem key={`item-${index.toString()}`} index={index} value={value} />
))}
</ul>
));
const NestableItem = SortableElement(({ value }) => {
if (value.children) {
return (
<li className="dd-item">
<div className="dd-handle" data-id={value.id}> {value.text} </div>
<ol className="dd-list">
{value.children.map((child, index) => (
<NestableItem key={`nest-${index.toString()}`} index={index} value={child} />
))}
</ol>
</li>);
}
return (
<li className="dd-item">
<div className="dd-handle" data-id={value.id}> {value.text} </div>
</li>
);
});
class ListGroups extends React.Component {
constructor() {
super();
this.state = {
nestableFirstItems: [{ id: 1, title: 'Item 1' }, {
id: 2,
expanded: true,
title: 'Item 2',
children: [{ id: 3, title: 'Item 3' }, { id: 4, title: 'Item 4' }, {
id: 5,
title: 'Item 5',
expanded: true,
children: [{ id: 6, title: 'Item 6' }, {
id: 7, title: 'Item 7',
}, {
id: 8, title: 'Item 8',
}],
}, { id: 9, title: 'Item 9' }],
}],
nestableSecondItems: [{ id: 13, title: 'Item 13' }, { id: 14, title: 'Item 14' }, {
id: 15,
expanded: true,
title: 'Item 15',
children: [{ id: 16, title: 'Item 16' }, { id: 17, title: 'Item 17' }, {
id: 18, title: 'Item 18',
}],
}],
sortableList: [{
id: '03', text: ' Barnard\'s Star',
}, {
id: '01', text: 'The Sun',
}, {
id: '04', text: 'Wolf 359',
}, {
id: '02', text: 'Proxima Centauri',
}, {
id: '05', text: 'Lalande 21185',
}],
};
}
onSortEnd = ({ oldIndex, newIndex }) => {
this.setState({
sortableList: arrayMove(this.state.sortableList, oldIndex, newIndex),
});
};
render() {
return (
<div>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">UI List Groups</li>
</ol>
<h1 className="page-title">Lists - <span className="fw-semi-bold">Sortable Groups</span>
</h1>
<Widget
title={<h4> Grouped <span className="fw-semi-bold">Lists</span></h4>}
close refresh settings
>
<h3>Closest <span className="fw-semi-bold">Stars</span></h3>
<p>
Try to play around with this list. Are you ready to pass an exam on astronomy?
</p>
<SortableList items={this.state.sortableList} onSortEnd={this.onSortEnd} />
</Widget>
<Widget
title={<h3>Nestable <span className="fw-semi-bold">List</span></h3>}
close refresh settings
>
<p className="fs-mini">
There is a scientific theory that you can arrange this list in such way that there will
be no more saddness
in the whole world. Can you? Touch devices supported
</p>
<Row className="nestable">
<Col md="6" xs="12" className="mb-xs">
<SortableTree
treeData={this.state.nestableFirstItems}
onChange={nestableFirstItems => this.setState({ nestableFirstItems })}
/>
</Col>
<Col md="6">
<SortableTree
treeData={this.state.nestableSecondItems}
onChange={nestableSecondItems => this.setState({ nestableSecondItems })}
/>
</Col>
</Row>
</Widget>
</div>
);
}
}
export default ListGroups;
@import '../../../../styles/app';
.list-group-sortable {
> .list-group-item {
margin-bottom: 0;
border-radius: $border-radius;
+ .list-group-item {
margin-top: $spacer;
}
}
> .list-group-item-placeholder {
border: 1px dashed $gray-300;
background-color: $gray-600;
}
&:last-of-type > .list-group-item:last-child {
border-bottom: 1px solid $list-group-border-color;
}
}
.nestable {
min-height: 600px;
}
{
"name": "UIListGroups",
"version": "0.0.0",
"private": true,
"main": "./ListGroups.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter,
Container,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
class ModalExample extends React.Component {
state = {
demo: false,
verticallyCentered: false,
large: false,
small: false,
launch: false,
}
toggle(id) {
this.setState(prevState => ({
[id]: !prevState[id],
}));
}
render() {
const { demo, scrollingLong, large, small, launch } = this.state;
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Modal</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Modal - <span className="fw-semi-bold">Examples</span></h1>
<Row>
<Col xs={12} md={6}>
<Widget
className="mb-xlg"
title={<h5>Live <span className="fw-semi-bold">Demo</span>
</h5>} close collapse
>
<p>
Toggle a working modal demo by clicking the button below. It
will slide down and fade in from the top of the page.
</p>
<Button className="mr-sm" color="primary" onClick={() => this.toggle('demo')}>Demo</Button>
<Button color="primary" onClick={() => this.toggle('scrollingLong')}>Scrolling long content</Button>
</Widget>
<Widget
title={<h5>Optional <span className="fw-semi-bold">Sizes</span></h5>}
close collapse
>
<p>
Modals have two optional sizes, available via modifier .modal-sm and .modal-lg
classes to be placed on a .modal-dialog. These sizes kick in at certain
breakpoints to avoid horizontal scrollbars on narrower viewports.
</p>
<Button className="mr-sm" color="primary" onClick={() => this.toggle('large')}>Large modal</Button>
<Button color="primary" onClick={() => this.toggle('small')}>Small modal</Button>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
className="mb-xlg"
title={<h5>Using <span className="fw-semi-bold">Grid</span> </h5>}
close collapse
>
<p>
Utilize the Bootstrap grid system within a modal by nesting <code>&lt;Container fluid&gt;</code> within
the <code>&lt;ModalBody&gt;</code>. Then, use the normal grid system classes as you would anywhere else.
</p>
<div className="bg-light p-3">
<Button color="primary" onClick={() => this.toggle('launch')}>Launch</Button>
<pre className="bg-light border-0 w-100 h-100">
<code className="text-danger">{'<Container fluid>\n'}</code>
<code className="text-success">{' <Row>\n'}</code>
<code className="text-info">{' <Col md={4}>\n'}</code>
<code>{' .col-md-4\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-info">{' <Col md={4} className="ml-auto">\n'}</code>
<code>{' .col-md-4 .ml-auto\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-success">{' </Row>\n'}</code>
<code className="text-success">{' <Row>\n'}</code>
<code className="text-info">{' <Col md={3} className="ml-auto">\n'}</code>
<code>{' .col-md-3 .ml-auto\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-info">{' <Col md={4} className="ml-auto">\n'}</code>
<code>{' .col-md-4 .ml-auto\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-success">{' </Row>\n'}</code>
<code className="text-success">{' <Row>\n'}</code>
<code className="text-info">{' <Col md={6} className="ml-auto">\n'}</code>
<code>{' .col-md-6 .ml-auto\n'}</code>
<code className="text-info">{' </Col>\n'}</code>
<code className="text-success">{' </Row>\n'}</code>
<code className="text-danger">{'</Container>'}</code>
</pre>
</div>
</Widget>
</Col>
</Row>
{/* Modals */}
<Modal isOpen={demo} toggle={() => this.toggle('demo')}>
<ModalHeader toggle={() => this.toggle('demo')}>Modal title</ModalHeader>
<ModalBody className="bg-white">
...
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={() => this.toggle('demo')}>Close</Button>
<Button color="primary">Save changes</Button>
</ModalFooter>
</Modal>
<Modal isOpen={scrollingLong} toggle={() => this.toggle('scrollingLong')}>
<ModalHeader toggle={() => this.toggle('scrollingLong')}>Long content</ModalHeader>
<ModalBody className="bg-white">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={() => this.toggle('scrollingLong')}>Close</Button>
<Button color="primary">Save changes</Button>
</ModalFooter>
</Modal>
<Modal size="lg" isOpen={large} toggle={() => this.toggle('large')}>
<ModalHeader toggle={() => this.toggle('large')}>Large modal</ModalHeader>
<ModalBody className="bg-white">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In, illum harum?
Quidem, quisquam, natus repellat debitis veniam quia facilis magni tempora
cupiditate odio vitae? Eligendi nisi consequuntur vero tenetur nemo!
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={() => this.toggle('large')}>Close</Button>
<Button color="primary">Save changes</Button>
</ModalFooter>
</Modal>
<Modal size="sm" isOpen={small} toggle={() => this.toggle('small')}>
<ModalHeader toggle={() => this.toggle('small')}>Small modal</ModalHeader>
<ModalBody className="bg-white">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In, illum harum?
Quidem, quisquam, natus repellat debitis veniam quia facilis magni tempora
cupiditate odio vitae? Eligendi nisi consequuntur vero tenetur nemo!
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={() => this.toggle('small')}>Close</Button>
<Button color="primary">Save changes</Button>
</ModalFooter>
</Modal>
<Modal isOpen={launch} toggle={() => this.toggle('launch')}>
<ModalHeader toggle={() => this.toggle('launch')}>Small modal</ModalHeader>
<ModalBody className="bg-white text-white">
<Container fluid>
<Row>
<Col md={4}><div className="h-100 w-100 bg-primary p-2">.col-md-4</div></Col>
<Col md={4} className="ml-auto"><div className="h-100 w-100 bg-primary p-2">.col-md-4 .ml-auto</div></Col>
</Row>
<Row className="mt-sm">
<Col md={3} className="ml-auto"><div className="h-100 w-100 bg-primary p-2">.col-md-3 .ml-auto</div></Col>
<Col md={4} className="ml-auto"><div className="h-100 w-100 bg-primary p-2">.col-md-4 .ml-auto</div></Col>
</Row>
<Row className="mt-sm">
<Col md={6} className="ml-auto"><div className="h-100 w-100 bg-primary p-2">.col-md-6 .ml-auto</div></Col>
</Row>
</Container>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={() => this.toggle('launch')}>Close</Button>
<Button color="primary">Save changes</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default ModalExample;
{
"name": "Modal",
"version": "0.0.0",
"private": true,
"main": "./Modal.js"
}
import React, { Component } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Nav,
NavItem,
NavLink,
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
class NavExamples extends Component {
state = {
isDropdownOpened: false,
};
toggleDropdown = () => {
this.setState(prevState => ({
isDropdownOpened: !prevState.isDropdownOpened,
}));
}
render() {
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Nav</BreadcrumbItem>
</Breadcrumb>
<Row>
<Col xs={12} md={6}>
<Widget
title={<h5>Base <span className="fw-semi-bold">Nav</span></h5>}
close collapse
>
<p>
Navigation available in Bootstrap share general markup and styles,
from the base .nav class to the active and disabled states. Swap
modifier classes to switch between each style.
</p>
<div className="bg-light p-3">
<Nav>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
<pre className="bg-light border-0 w-100 h-100">
<code className="text-danger">{'<Nav>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Another Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink disabled href="#">\n'}</code>
<code>{' Disabled Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-danger">{'</Nav>'}</code>
</pre>
</div>
<h5 className="mt">With dropdown</h5>
<Nav className="bg-light p-2">
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<Dropdown isOpen={this.state.isDropdownOpened} toggle={this.toggleDropdown}>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Tabs & Pills</h5>}
close collapse
>
<p>
Takes the basic <code>&lt;Nav&gt;</code> from above and adds the <code>tabs</code> property to generate a
tabbed interface. Use them to create tabbable regions with our tab
JavaScript plugin.
</p>
<div className="bg-light p-3">
<Nav tabs>
<NavItem>
<NavLink href="#" active>Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
<pre className="bg-light border-0 w-100 h-100">
<code className="text-danger">{'<Nav tabs>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Another Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink disabled href="#">\n'}</code>
<code>{' Disabled Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-danger">{'</Nav>'}</code>
</pre>
</div>
<p className="mt">Do the same thing with the <code>pills</code> property.</p>
<div className="bg-light p-3">
<Nav pills>
<NavItem>
<NavLink href="#" active>Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default NavExamples;
{
"name": "Nav",
"version": "0.0.0",
"private": true,
"main": "./Nav.js"
}
import React, { Component } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Navbar,
NavbarBrand,
NavbarToggler,
Collapse,
Nav,
NavItem,
NavLink,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
class NavbarExamples extends Component {
state = {
navs: [false, false, false, false],
}
toggle(id) {
const newState = Array(4).fill(false);
if (!this.state.navs[id]) {
newState[id] = true;
}
this.setState({ navs: newState });
}
render() {
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Navbar</BreadcrumbItem>
</Breadcrumb>
<Row>
<Col xs={12} md={9}>
<Widget
title={<h5>Navbar <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>Here’s what you need to know before getting started with the navbar:</p>
<ui>
<li>Navbars require a wrapping <code>&lt;Navbar&gt;</code> with <code>expand=&quot;*&quot;</code> for
responsive collapsing and color scheme classes.</li>
<li>Navbars and their contents are fluid by default. Use optional containers
to limit their horizontal width.</li>
<li>Use our spacing and flex utility classes for controlling spacing and alignment within navbars.</li>
<li>Navbars are responsive by default, but you can easily modify them to change that. Responsive
behavior depends on our Collapse JavaScript plugin.</li>
<li>Navbars are hidden by default when printing. Force them to be printed by adding <code>.d-print</code>
to the <code>.navbar</code>. See the display utility class.</li>
</ui>
<Navbar className="px-2 mt-lg" color="light" light expand="md">
<NavbarBrand href="/">Navbar</NavbarBrand>
<NavbarToggler className="ml-auto" onClick={() => this.toggle(0)} />
<Collapse isOpen={this.state.navs[0]} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink>Home</NavLink>
</NavItem>
<NavItem>
<NavLink>Features</NavLink>
</NavItem>
<NavItem>
<NavLink>Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</Widget>
</Col>
<Col xs={12} md={9}>
<Widget
title={<h5>Navbar <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>Theming the navbar has never been easier thanks to the combination of
theming classes and background-color utilities. Choose from <code>color=&quot;light&quot;</code>
for use with light background colors, or <code>color=&quot;dark&quot;</code> for dark background
colors. Then, customize with <code>.bg-*</code> utilities.</p>
<Navbar className="px-2 mt-lg" color="dark" dark expand="md">
<NavbarBrand href="/">Navbar</NavbarBrand>
<NavbarToggler className="ml-auto" onClick={() => this.toggle(1)} />
<Collapse isOpen={this.state.navs[1]} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink>Home</NavLink>
</NavItem>
<NavItem>
<NavLink>Features</NavLink>
</NavItem>
<NavItem>
<NavLink>Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
<Navbar className="px-2 mt-lg" color="primary" dark expand="md">
<NavbarBrand href="/">Navbar</NavbarBrand>
<NavbarToggler className="ml-auto" onClick={() => this.toggle(2)} />
<Collapse isOpen={this.state.navs[2]} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink>Home</NavLink>
</NavItem>
<NavItem>
<NavLink>Features</NavLink>
</NavItem>
<NavItem>
<NavLink>Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
<Navbar className="px-2 mt-lg" color="light" light expand="md">
<NavbarBrand href="/">Navbar</NavbarBrand>
<NavbarToggler className="ml-auto" onClick={() => this.toggle(3)} />
<Collapse isOpen={this.state.navs[3]} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink>Home</NavLink>
</NavItem>
<NavItem>
<NavLink>Features</NavLink>
</NavItem>
<NavItem>
<NavLink>Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default NavbarExamples;
{
"name": "Navbar",
"version": "0.0.0",
"private": true,
"main": "./Navbar.js"
}
import React from 'react';
import {
Row, Col, Button,
} from 'reactstrap';
/* eslint-disable */
import 'imports-loader?$=jquery,this=>window!messenger/build/js/messenger';
/* eslint-enable */
import Widget from '../../../../components/Widget';
import s from './Notifications.module.scss';
// todo @franckeeva what about server side rendering? this will fail unless launched as lazy route
const Messenger = window.Messenger;
/* eslint-disable */
function initializationMessengerCode() {
(function () {
let $,
FlatMessage,
spinner_template,
__hasProp = {}.hasOwnProperty,
__extends = function (child, parent) {
for (const key in parent) {
if (__hasProp.call(parent, key)) child[key] = parent[key];
}
function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;
return child;
};
$ = jQuery;
spinner_template = '<div class="messenger-spinner">\n <span class="messenger-spinner-side messenger-spinner-side-left">\n <span class="messenger-spinner-fill"></span>\n </span>\n <span class="messenger-spinner-side messenger-spinner-side-right">\n <span class="messenger-spinner-fill"></span>\n </span>\n</div>';
FlatMessage = (function (_super) {
__extends(FlatMessage, _super);
function FlatMessage() {
return FlatMessage.__super__.constructor.apply(this, arguments);
}
FlatMessage.prototype.template = function (opts) {
let $message;
$message = FlatMessage.__super__.template.apply(this, arguments);
$message.append($(spinner_template));
return $message;
};
return FlatMessage;
}(Messenger.Message));
Messenger.themes.air = {
Message: FlatMessage,
};
}).call(window);
}
/* eslint-enable */
class Notifications extends React.Component {
constructor() {
super();
this.addSuccessNotification = this.addSuccessNotification.bind(this);
this.addInfoNotification = this.addInfoNotification.bind(this);
this.addErrorNotification = this.addErrorNotification.bind(this);
this.toggleLocation = this.toggleLocation.bind(this);
this.state = {
locationClasses: 'messenger-fixed messenger-on-bottom messenger-on-right',
};
}
componentDidMount() {
initializationMessengerCode();
Messenger.options = {
extraClasses: this.state.locationClasses,
theme: 'air',
};
Messenger().post('Thanks for checking out Messenger!');
}
addSuccessNotification() {
Messenger().post({
extraClasses: this.state.locationClasses,
message: 'Showing success message was successful!',
type: 'success',
showCloseButton: true,
});
return false;
}
addInfoNotification() {
const msg = Messenger().post({
extraClasses: this.state.locationClasses,
message: 'Launching thermonuclear war...',
actions: {
cancel: {
label: 'cancel launch',
action: () => msg.update({
message: 'Thermonuclear war averted', type: 'success', actions: false,
}),
},
},
});
return false;
}
addErrorNotification() {
let i = 0;
Messenger().run({
errorMessage: 'Error destroying alien planet',
successMessage: 'Alien planet destroyed!',
extraClasses: this.state.locationClasses,
action(opts) {
/* eslint-disable */
if (++i < 3) {
return opts.error({
status: 500,
readyState: 0,
responseText: 0,
});
}
/* eslint-enable */
return opts.success();
},
});
}
toggleLocation(vertical = 'top', horizontal = '') {
let className = `messenger-fixed messenger-on-${vertical}`;
className += (horizontal === '') ? '' : ` messenger-on-${horizontal}`;
this.setState({
locationClasses: className,
});
Messenger.options = {
extraClasses: className,
theme: 'air',
};
Messenger();
}
render() {
return (
<div className={s.root}>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">UI Notifications</li>
</ol>
<h1 className="page-title">Messages - <span className="fw-semi-bold">Notifications</span>
</h1>
<Widget title={<h6> Messenger </h6>} close collapse settings>
<Row>
<Col lg="4" xs="12">
<h5 className="m-t-1">Layout options</h5>
<p>There are few position options available for notifications. You can click any of
them
to change notifications position:</p>
<div className="location-selector">
{ /* eslint-disable */}
<div
className="bit top left" onClick={() => {
this.toggleLocation('top', 'left');
}}
/>
<div
className="bit top right" onClick={() => {
this.toggleLocation('top', 'right');
}}
/>
<div
className="bit top" onClick={() => {
this.toggleLocation('top', '');
}}
/>
<div
className="bit bottom left" onClick={() => {
this.toggleLocation('bottom', 'left');
}}
/>
<div
className="bit bottom right" onClick={() => {
this.toggleLocation('bottom', 'right');
}}
/>
<div
className="bit bottom" onClick={() => {
this.toggleLocation('bottom', '');
}}
/>
{ /* eslint-enable */}
</div>
</Col>
<Col lg="4" xs="12">
<h5 className="m-t-1">Notification Types</h5>
<p>Different types of notifications for lost of use cases. Custom classes are also
supported.</p>
<p><Button color="info" id="show-info-message" onClick={this.addInfoNotification}>Info
Message</Button></p>
<p><Button color="danger" id="show-error-message" onClick={this.addErrorNotification}>Error
+ Retry Message</Button></p>
<p><Button
color="success" id="show-success-message" onClick={this.addSuccessNotification}
>Success
Message</Button></p>
</Col>
<Col lg="4" xs="12">
<h5 className="m-t-1">Dead Simple Usage</h5>
<p>Just few lines of code to instantiate a notifications object. Does not require
passing any options:</p>
<pre><code>{'Messenger().post("Thanks for checking out Messenger!");'}</code></pre>
<p>More complex example:</p>
<pre>
<code>{'\nMessenger().post({\n message: \'There was an explosion while processing your request.\',\n type: \'error\',\n showCloseButton: true\n});\n\n'}
</code>
</pre>
</Col>
</Row>
</Widget>
</div>
);
}
}
export default Notifications;
@import '../../../../styles/app';
.root {
:global {
.location-selector {
width: 100%;
height: 220px;
border: 1px dashed #bbb;
background-color: $white;
position: relative;
}
.location-selector .bit {
@include transition(background-color 0.15s ease-in-out);
background-color: $gray-300;
cursor: pointer;
position: absolute;
}
.location-selector .bit:hover {
background-color: $gray-400;
}
.location-selector .bit.top,
.location-selector .bit.bottom {
height: 25%;
width: 40%;
margin: 0 30%;
}
.location-selector .bit.top {
top: 0;
}
.location-selector .bit.bottom {
bottom: 0;
}
.location-selector .bit.right,
.location-selector .bit.left {
height: 20%;
width: 20%;
margin-left: 0;
margin-right: 0;
}
.location-selector .bit.right {
right: 0;
}
.location-selector .bit.left {
left: 0;
}
}
}
{
"name": "UINotifications",
"version": "0.0.0",
"private": true,
"main": "./Notifications.js"
}
import React, { Component } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Popover,
PopoverHeader,
PopoverBody,
Tooltip,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
class PopoverExamples extends Component {
state = {
tooltips: [false, false, false, false, false, false],
popovers: [false, false, false, false, false, false],
tooltipOpen: false,
}
toggle(id, field) {
const newState = [...this.state[field]];
newState.fill(false);
if (!this.state[field][id]) {
newState[id] = true;
}
this.setState({
[field]: newState,
});
}
render() {
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Badge</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Badge</h1>
<Row>
<Col xs={12} md={6}>
<Widget
className="mb-xlg"
title={<h5>Popover <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<Button
id="p-1" className="mr-xs" size="lg" color="danger"
onClick={() => this.toggle(0, 'popovers')}
>Click to toggle popover</Button>
<Button
id="p-2" color="danger" disabled
onClick={() => this.toggle(1, 'popovers')}
>Disabled button</Button>
</Widget>
<Widget
title={<h5>Popover <span className="fw-semi-bold">Directions</span></h5>}
close collapse
>
<Button
id="p-3" className="mr-xs mb-xs" color="info"
onClick={() => this.toggle(2, 'popovers')}
>Popover on top</Button>
<Button
id="p-4" className="mr-xs mb-xs" color="warning"
onClick={() => this.toggle(3, 'popovers')}
>Popover on right</Button>
<Button
id="p-5" className="mr-xs mb-xs" color="inverse"
onClick={() => this.toggle(4, 'popovers')}
>Popover on bottom</Button>
<Button
id="p-6" className="mr-xs mb-xs" color="default"
onClick={() => this.toggle(5, 'popovers')}
>Popover on left</Button>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
className="mb-xlg"
title={<h5>Tooltip <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<Button id="t-1" className="mr-sm" size="lg" color="success">Tooltip</Button>
<Button id="t-2" color="success" disabled>Disabled button</Button>
</Widget>
<Widget
title={<h5>Tooltip <span className="fw-semi-bold">Directions</span></h5>}
close collapse
>
<Button id="t-3" className="mr-xs mb-xs" color="info">Tooltip on top</Button>
<Button id="t-4" className="mr-xs mb-xs" color="warning">Tooltip on right</Button>
<Button id="t-5" className="mr-xs mb-xs" color="inverse">Tooltip on bottom</Button>
<Button id="t-6" className="mr-xs mb-xs" color="default">Tooltip on left</Button>
</Widget>
</Col>
</Row>
{/* Popovers & Tooltips */}
<Popover placement="top" isOpen={this.state.popovers[0]} target="p-1" toggle={() => this.toggle(0, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="top" isOpen={this.state.popovers[1]} target="p-2" toggle={() => this.toggle(1, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="top" isOpen={this.state.popovers[2]} target="p-3" toggle={() => this.toggle(2, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="right" isOpen={this.state.popovers[3]} target="p-4" toggle={() => this.toggle(3, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="bottom" isOpen={this.state.popovers[4]} target="p-5" toggle={() => this.toggle(4, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="left" isOpen={this.state.popovers[5]} target="p-6" toggle={() => this.toggle(5, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Tooltip placement="top" isOpen={this.state.tooltips[0]} toggle={() => this.toggle(0, 'tooltips')} target="t-1">
Hello world!
</Tooltip>
<Tooltip placement="top" isOpen={this.state.tooltips[1]} toggle={() => this.toggle(1, 'tooltips')} target="t-2">
Hello world!
</Tooltip>
<Tooltip placement="top" isOpen={this.state.tooltips[2]} toggle={() => this.toggle(2, 'tooltips')} target="t-3">
Top
</Tooltip>
<Tooltip placement="right" isOpen={this.state.tooltips[3]} toggle={() => this.toggle(3, 'tooltips')} target="t-4">
Right
</Tooltip>
<Tooltip placement="bottom" isOpen={this.state.tooltips[4]} toggle={() => this.toggle(4, 'tooltips')} target="t-5">
Bottom
</Tooltip>
<Tooltip placement="left" isOpen={this.state.tooltips[5]} toggle={() => this.toggle(5, 'tooltips')} target="t-6">
Left
</Tooltip>
</div>
);
}
}
export default PopoverExamples;
{
"name": "Popovers",
"version": "0.0.0",
"private": true,
"main": "./Popovers.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Progress,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
const ProgressExamples = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Progress</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Progress</h1>
<Row>
<Col xs={12} md={6}>
<Widget
title={<h5>Progress <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>
Badges scale to match the size of the immediate parent element by
using relative font sizing and em units.
</p>
<Progress className="mb-sm" value="25" />
<Progress className="mb-sm" value="50" />
<Progress className="mb-sm" value="75" />
<Progress value="100" />
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Backgrounds</h5>}
close collaple
>
<p>
Use background utility classes to change the appearance of
individual progress bars.
</p>
<Progress className="mb-sm" value="25" color="info" />
<Progress className="mb-sm" value="50" color="warning" />
<Progress className="mb-sm" value="75" color="danger" />
<Progress value="100" color="success" />
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Labels</h5>}
close collapse
>
<p>
Add labels to your progress bars by placing text within the <code>&lt;Progress&gt;</code>
</p>
<Progress className="mb-sm" value="25">25%</Progress>
<Progress className="mb-sm" value="100" color="danger">Something was wrong!</Progress>
<Progress value="100" color="success">Completed!</Progress>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Size</h5>}
close collapse
>
<p>
We only set a height value on the <code>&lt;Progress&gt;</code>, so if you change that value the inner
bar will automatically resize accordingly. Also <code>.progress-sm</code> is available.
</p>
<Progress className="progress-sm mb-sm" value="25" color="dark">25%</Progress>
<Progress className="mb-sm" value="50" color="gray">50%</Progress>
<Progress value="75" color="secondary" style={{ height: '30px' }}>75%</Progress>
</Widget>
</Col>
<Col xs={12}>
<Widget
title={<h5><span className="fw-semi-bold">Striped</span> Progress</h5>}
close collapse
>
<Row>
<Col xs={12} md={6}>
<p>
Add <code>striped</code> property to any <code>&lt;Progress&gt;</code> to
apply a stripe via CSS gradient over the progress bar’s background color.
</p>
<Progress striped className="mb-sm" value="10" />
<Progress striped className="mb-sm" value="25" color="success" />
<Progress striped className="mb-sm" value="50" color="info" />
<Progress striped className="mb-sm" value="75" color="warning" />
<Progress striped value="100" color="danger" />
</Col>
<Col xs={12} md={6}>
<p>
The striped gradient can also be animated. Add <code>animated</code> property
to <code>&lt;Progress&gt;</code> to animate the stripes right to left via CSS3 animations.
</p>
<Progress animated striped className="mb-sm" value="10" color="danger" />
<Progress animated striped className="mb-sm" value="25" color="warning" />
<Progress animated striped className="mb-sm" value="50" color="info" />
<Progress animated striped className="mb-sm" value="75" color="success" />
<Progress animated striped value="100" />
</Col>
</Row>
</Widget>
</Col>
</Row>
</div>
);
export default ProgressExamples;
{
"name": "Progress",
"version": "0.0.0",
"private": true,
"main": "./Progress.js"
}
/* eslint-disable */
import React from 'react';
import {
Row,
Col,
Button,
DropdownMenu,
TabContent,
TabPane,
Nav,
NavItem,
NavLink,
Collapse,
DropdownItem,
DropdownToggle,
UncontrolledDropdown
} from 'reactstrap';
import classnames from 'classnames';
class TabsAccordion extends React.Component {
constructor(props) {
super(props);
this.toggleFirstTabs = this.toggleFirstTabs.bind(this);
this.toggleSecondTabs = this.toggleSecondTabs.bind(this);
this.toggleThirdTabs = this.toggleThirdTabs.bind(this);
this.toggleAccordionFirst = this.toggleAccordionFirst.bind(this);
this.state = {
activeFirstTab: 'tab11',
activeSecondTab: 'tab22',
activeThirdTab: 'tab31',
dropdownOpen: false,
accordionFirst: [false, false, false],
accordionSecond: [false, true, false],
accordionSecondContent: [{
title: 'Collapsible Group Item', body: ` Get base styles and flexible support for collapsible components like accordions and navigation.
Using the collapse plugin, we built a simple accordion by extending the panel component.`,
}, {
title: 'Normal Text Insertion', body: `
Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very
controversial point. I think the opposite actually. Everyone knows what is lore ipsum
- it is easy to understand if text is lore ipsum. You'll automatically skip -
because you know - it's just non-informative stub. But what if there some text like
this one? You start to read it! But the goal of this text is different. The goal is
the example. So a bit of Lore Ipsum is always very good practice. Keep it in mind!`,
}, {
title: 'Check It',
body: ' Why don\'t use Lore Ipsum? I think if some one says don\'t use lore ipsum it\'s very controversial point. I think the opposite actually.',
}],
accordionFirstContent: [{
title: 'Collapsible Group Item', body: ` Get base styles and flexible support for collapsible components like accordions and navigation.
Using the collapse plugin, we built a simple accordion by extending the panel component.`,
}, {
title: 'Random from the Web', body: `
<p><span class="fw-semi-bold">Light Blue</span> - is a next generation admin template based
on the latest Metro design. There are few reasons we want to tell you, why we have created it:
We didn't like the darkness of most of admin templates, so we created this light one.
We didn't like the high contrast of most of admin templates, so we created this unobtrusive one.
We searched for a solution of how to make widgets look like real widgets, so we decided that
deep background - is what makes widgets look real.
</p>
<p class="no-margin text-muted"><em>- Some One</em></p>
`,
}, {
title: 'Check It',
body: ' Why don\'t use Lore Ipsum? I think if some one says don\'t use lore ipsum it\'s very controversial point. I think the opposite actually.',
}],
};
}
toggleFirstTabs(tab) {
if (this.state.activeFirstTab !== tab) {
this.setState({
activeFirstTab: tab,
});
}
}
toggleSecondTabs(tab) {
if (this.state.activeSecondTab !== tab) {
this.setState({
activeSecondTab: tab,
});
}
}
toggleThirdTabs(tab) {
if (this.state.activeThirdTab !== tab) {
this.setState({
activeThirdTab: tab,
});
}
}
toggleAccordionFirst(id) {
const arr = [];
arr.length = this.state.accordionFirst.length;
arr.fill(false);
arr[id] = !this.state.accordionFirst[id];
this.setState({
accordionFirst: arr,
});
}
toggleAccordionSecond(id) {
const arr = [];
arr.length = this.state.accordionSecond.length;
arr.fill(false);
arr[id] = !this.state.accordionSecond[id];
this.setState({
accordionSecond: arr,
});
}
render() {
return (
<div>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">UI Tabs & Accordion</li>
</ol>
<h1 className="page-title">Tabs & Accordion - <span
className="fw-semi-bold"
>Components</span></h1>
{/* Tabs */}
<Row>
<Col md="6" xs="12">
<div className="clearfix">
<Nav tabs className="float-left bg-light">
<NavItem>
<NavLink
className={classnames({ active: this.state.activeFirstTab === 'tab11' })}
onClick={() => { this.toggleFirstTabs('tab11'); }}
>
<span>Basic</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeFirstTab === 'tab12' })}
onClick={() => { this.toggleFirstTabs('tab12'); }}
>
<span>Assumtion</span>
</NavLink>
</NavItem>
<UncontrolledDropdown nav>
<DropdownToggle nav caret
className={classnames({
active: this.state.activeFirstTab === 'tab13' ||
this.state.activeFirstTab === 'tab14'
})}>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={() => {
this.toggleFirstTabs('tab13');
}}>@fat
</DropdownItem>
<DropdownItem onClick={() => {
this.toggleFirstTabs('tab14');
}}>@mdo
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</div>
{/* tab content */}
<TabContent className='mb-lg' activeTab={this.state.activeFirstTab}>
<TabPane tabId="tab11">
<h3>Tabs-enabled widget</h3>
<p>You will never know exactly how something will go until you try it.</p>
<p>{`You can think three hundred times and still have no precise result. If you see
attractive girl all you need to do is to go and ask her to give you her phone.
You don’t
need to think about HOW it can turn out. All you have to do is to GO and DO IT.
It
should be super-fast and easy. No hesitation. You ask me: “What to do with these
fearful thoughts preventing me from doing that?” The answer is to ignore them,
because
they can’t disappear immediately.`}</p>
<p>The same thing is for startups and ideas. If you have an idea right away after
it appears in your mind you should go and make a first step to implement
it. </p>
<div className="float-right">
<Button color="inverse" className="mr-xs">Cancel</Button>
<Button color="primary">Some button</Button>
</div>
<div className="clearfix"/>
</TabPane>
<TabPane tabId="tab12">
<p>{`Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's
very controversial
point. I think the opposite actually. Everyone knows what is lore ipsum - it is
easy to understand if text is lore ipsum.`}</p>
<div className="clearfix">
<div className="btn-toolbar">
<a className="btn btn-default">&nbsp;&nbsp;Check&nbsp;&nbsp;</a>
<a className="btn btn-primary">&nbsp;&nbsp;Dance?&nbsp;&nbsp;</a>
</div>
</div>
</TabPane>
<TabPane tabId="tab13">
<p> If you will think too much it will sink in the swamp of never implemented
plans and
ideas or will just go away or will be implemented by someone else.</p>
<p><strong>5 months of doing everything to achieve nothing.</strong></p>
<p>{`You'll automatically skip - because you know - it's just non-informative stub.
But what if there some text like this one?`}</p>
</TabPane>
<TabPane tabId="tab14">
<blockquote className="blockquote-sm blockquote mb-xs">
Plan it? Make it!
</blockquote>
<p>The same thing is for startups and ideas. If you have an idea right away after
it appears
in your mind you should go and make a first step to implement it.</p>
</TabPane>
</TabContent>
</Col>
<Col md="6" xs="12">
<Row>
<Col xs="12" className="mb-5">
<Nav className="bg-light" tabs>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeSecondTab === 'tab21' })}
onClick={() => { this.toggleSecondTabs('tab21'); }}
>
<span>Basic</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeSecondTab === 'tab22' })}
onClick={() => { this.toggleSecondTabs('tab22'); }}
>
<span>Assumtion</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeSecondTab === 'tab23' })}
onClick={() => { this.toggleSecondTabs('tab23'); }}
>
<span>Works</span>
</NavLink>
</NavItem>
</Nav>
<TabContent className='mb-lg' activeTab={this.state.activeSecondTab}>
<TabPane tabId="tab21">
<p>
I had an idea named Great Work. It was a service aimed to help people find
their
passion.
Yes I know it sound crazy and super naïve but I worked on that. I started to
work
on
planning, graphics, presentations, pictures, descriptions, articles,
investments
and so on.
I worked on everything but not the project itself.
</p>
</TabPane>
<TabPane tabId="tab22">
<p>{`Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's
very
controversial
point. I think the opposite actually. Everyone knows what is lore ipsum - it
is
easy to understand if text is lore ipsum.`}</p>
<div className="clearfix">
<div className="btn-toolbar">
<Button color="danger">&nbsp;&nbsp;Check&nbsp;&nbsp;</Button>
<Button color="default">&nbsp;&nbsp;Dance?&nbsp;&nbsp;</Button>
</div>
</div>
</TabPane>
<TabPane tabId="tab23">
<p> If you will think too much it will sink in the swamp of never implemented
plans
and
ideas or will just go away or will be implemented by someone else.</p>
<p><strong>5 months of doing everything to achieve nothing.</strong></p>
<p>{`You'll automatically skip - because you know - it's just non-informative
stub.
But what if there some text like this one?`}</p>
</TabPane>
</TabContent>
</Col>
</Row>
<Row>
<Col xs="12">
<Nav className="bg-light" tabs>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeThirdTab === 'tab31' })}
onClick={() => { this.toggleThirdTabs('tab31'); }}
>
<span>Basic</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeThirdTab === 'tab32' })}
onClick={() => { this.toggleThirdTabs('tab32'); }}
>
<span>Assumtion</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeThirdTab === 'tab33' })}
onClick={() => { this.toggleThirdTabs('tab33'); }}
>
<span>Works</span>
</NavLink>
</NavItem>
</Nav>
<TabContent className='mb-lg' activeTab={this.state.activeThirdTab}>
<TabPane tabId="tab31">
<p>
I had an idea named Great Work. It was a service aimed to help people find
their
passion.
Yes I know it sound crazy and super naïve but I worked on that. I started to
work
on
planning, graphics, presentations, pictures, descriptions, articles,
investments
and so on.
I worked on everything but not the project itself.
</p>
</TabPane>
<TabPane tabId="tab32">
<p>{`Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's
very
controversial
point. I think the opposite actually. Everyone knows what is lore ipsum - it
is
easy to understand if text is lore ipsum.`}</p>
<div className="clearfix">
<div className="btn-toolbar">
<Button color="danger">&nbsp;&nbsp;Check&nbsp;&nbsp;</Button>
<Button color="default">&nbsp;&nbsp;Dance?&nbsp;&nbsp;</Button>
</div>
</div>
</TabPane>
<TabPane tabId="tab33">
<p> If you will think too much it will sink in the swamp of never implemented
plans
and
ideas or will just go away or will be implemented by someone else.</p>
<p><strong>5 months of doing everything to achieve nothing.</strong></p>
<p>{`You'll automatically skip - because you know - it's just non-informative
stub.
But what if there some text like this one?`}</p>
</TabPane>
</TabContent>
</Col>
</Row>
</Col>
</Row>
{/* Accordion */}
<Row className="mt-xs">
<Col md="6" xs="12" className='mb-lg'>
{this.state.accordionFirstContent.map((element, index) => (
<div className="card panel mb-xs" key={`accord-one-${index.toString()}`}>
{ /* eslint-disable */ }
<div
className="card-header panel-header bg-light" role="button"
onClick={() => { this.toggleAccordionFirst(index); }}
>
{ /* eslint-enable */ }
<div className="mb-0">
{/* eslint-disable-next-line */}
<a className="accordion-toggle" role="button">
{element.title}
<i className={`fa fa-angle-down ${this.state.accordionFirst[index] ? 'expanded' : ''}`} />
</a>
</div>
</div>
<Collapse className="panel-body" isOpen={this.state.accordionFirst[index]}>
<div className="card-body" dangerouslySetInnerHTML={{ __html: element.body }} />
</Collapse>
</div>))}
</Col>
<Col md="6" xs="12" className='mb-lg'>
{this.state.accordionSecondContent.map((element, index) => (<div className="card panel mb-xs" key={`accord-one-${index.toString()}`}>
{ /* eslint-disable */ }
<div
className="card-header panel-header bg-light" role="button"
onClick={() => { this.toggleAccordionSecond(index); }}
>
{ /* eslint-enable */ }
<div className="mb-0">
{/* eslint-disable-next-line */}
<a className="accordion-toggle" role="button">
{element.title}
<i className="fa fa-angle-down float-right" />
</a>
</div>
</div>
<Collapse className="panel-body" isOpen={this.state.accordionSecond[index]}>
<div className="card-body" dangerouslySetInnerHTML={{ __html: element.body }} />
</Collapse>
</div>))}
</Col>
</Row>
</div>);
}
}
export default TabsAccordion;
{
"name": "UITabsAccordion",
"version": "0.0.0",
"private": true,
"main": "./TabsAccordion.js"
}
import React from 'react';
import {
Row,
Col,
Progress,
} from 'reactstrap';
import Widget from '../../../components/Widget';
import LiveTile from './components/live-tile/LiveTile';
import ChangesChart from './components/changes-chart/ChangesChart';
import RealtimeTraffic from './components/realtime-traffic/RealtimeTraffic';
import YearsMap from './components/years-map/YearsMap';
import FlotCharts from './components/flot-charts/FlotCharts';
import NasdaqSparkline from './components/nasdaq-sparkline-widget/nasdaqSparkline';
import Skycon from '../../../components/Skycon/Skycon';
import { Input, InputGroup, InputGroupAddon, Button } from 'reactstrap';
import './Widgets.scss';
import peopleA1 from '../../../images/people/a1.jpg';
import peopleA2 from '../../../images/people/a2.jpg';
import peopleA4 from '../../../images/people/a4.jpg';
import peopleA6 from '../../../images/people/a6.jpg';
import peopleA3 from '../../../images/people/a3.jpg';
import avatar from '../../../images/avatar.png';
import img18 from '../../../images/pictures/18.jpg';
import img17 from '../../../images/pictures/17.jpg';
class Widgets extends React.Component {
componentDidMount() {
}
render() {
return (
<div className="root">
<Row>
<Col lg={3} md={6} xs={12}>
<Widget className="">
<div className="clearfix">
<Row className="flex-nowrap">
<Col xs={3}>
<span className="widget-icon">
<i className="fi flaticon-like text-primary" />
</span>
</Col>
<Col xs="9">
<h6 className="m-0">USERS GROWTH</h6>
<p className="h2 m-0 fw-normal">4,332</p>
</Col>
</Row>
<Row className="flex-nowrap">
<Col xs={6}>
<h6 className="m-0 text-muted">Registrations</h6>
<p className="value5">+830</p>
</Col>
<Col xs="6">
<h6 className="m-0 text-muted">Bounce Rate</h6>
<p className="value5">4.5%</p>
</Col>
</Row>
</div>
</Widget>
</Col>
<Col lg={3} md={6} xs={12}>
<Widget className="">
<div className="clearfix">
<Row className="flex-nowrap">
<Col xs="3">
<span className="widget-icon">
<i className="fi flaticon-magic-wand text-info" />
</span>
</Col>
<Col xs="9">
<LiveTile
data-mode="carousel" data-speed="750" data-delay="3000"
data-height="57"
>
<div>
<h6 className="m-0">VISITS TODAY</h6>
<p className="h2 m-0 fw-normal">12,324</p>
</div>
<div>
<h6 className="m-0">VISITS YESTERDAY</h6>
<p className="h2 m-0 fw-normal">11,885</p>
</div>
</LiveTile>
</Col>
</Row>
<Row className="flex-nowrap">
<Col xs="6">
<h6 className="m-0 text-muted">New Visitors</h6>
<LiveTile
data-mode="carousel" data-speed="750" data-delay="3000"
data-height="25"
>
<div>
<p className="value5">1,332</p>
</div>
<div>
<p className="value5">20.1%</p>
</div>
</LiveTile>
</Col>
<Col xs="6">
<h6 className="m-0 text-muted">Bounce Rate</h6>
<LiveTile
data-mode="carousel" data-speed="750" data-delay="3000"
data-height="26"
>
<div>
<p className="value5">217</p>
</div>
<div>
<p className="value5">2.3%</p>
</div>
</LiveTile>
</Col>
</Row>
</div>
</Widget>
</Col>
<Col lg={3} md={6} xs={12}>
<Widget className="">
<div className="clearfix">
<LiveTile
data-mode="fade" data-speed="750" data-delay="4000"
data-height="104"
>
<div className="bg-white text-gray">
<Row className="flex-nowrap">
<Col xs={3}>
<span className="widget-icon">
<i className="fi flaticon-notebook-4" />
</span>
</Col>
<Col xs="9">
<h6 className="m-0">ORDERS</h6>
<p className="h2 m-0 fw-normal">82,765</p>
</Col>
</Row>
<Row className="flex-nowrap">
<Col xs={6}>
<h6 className="m-0">Avg. Time</h6>
<p className="value5">2:56</p>
</Col>
<Col xs={6}>
<h6 className="m-0">Last Week</h6>
<p className="value5">374</p>
</Col>
</Row>
</div>
<div className="text-gray">
<Row className="flex-nowrap">
<Col xs={3}>
<span className="widget-icon">
<i className="fi flaticon-shuffle" />
</span>
</Col>
<Col xs={9}>
<h6 className="m-0">PICKED ORDERS</h6>
<p className="h2 m-0 fw-normal">13.8%</p>
</Col>
</Row>
<Row className="flex-nowrap">
<Col xs={6}>
<h6 className="m-0 text-muted">Basic</h6>
<p className="value5">3,692</p>
</Col>
<Col xs="6">
<h6 className="m-0 text-muted">Advanced</h6>
<p className="value5">1,441</p>
</Col>
</Row>
</div>
</LiveTile>
</div>
</Widget>
</Col>
<Col lg={3} md={6} xs={12}>
<Widget className="">
<div className="clearfix">
<Row className="flex-nowrap">
<Col xs={3}>
<span className="widget-icon">
<i className="fi flaticon-diamond text-success" />
</span>
</Col>
<Col xs={9}>
<h6 className="m-0">TOTAL PROFIT</h6>
<p className="h2 m-0 fw-normal">$7,448</p>
</Col>
</Row>
<Row className="flex-nowrap">
<Col xs="6">
<h6 className="m-0 text-muted">Last Month</h6>
<p className="value5">$83,541</p>
</Col>
<Col xs={6}>
<h6 className="m-0 text-muted">Last Week</h6>
<p className="value5">$17,926</p>
</Col>
</Row>
</div>
</Widget>
</Col>
</Row>
<FlotCharts />
<Row>
<Col lg={4} xs={12}>
<Widget refresh close bodyClass="mt-0">
<div className="widget-top-overflow widget-padding-md clearfix bg-warning text-white">
<h3 className="mt-lg mb-lg">Sing - <span className="fw-semi-bold">Next Generation</span> Admin
Dashboard
Template</h3>
<ul className="tags text-white pull-right">
{/* eslint-disable-next-line */}
<li><a href="#">features</a></li>
</ul>
</div>
<div className="post-user mt-negative-lg">
<span className="thumb-lg pull-left mr mt-n-sm">
<img className="rounded-circle" src={peopleA4} alt="..." />
</span>
<h6 className="m-b-1 fw-normal text-white">Jeremy &nbsp;
<small className="text-white text-light">@sing</small>
</h6>
<p className="fs-mini text-muted">
<time>25 mins</time>
&nbsp; <i className="fa fa-map-marker" /> &nbsp; near Amsterdam
</p>
</div>
<p className="text-light fs-mini mt-lg">Lots of cool stuff is happening around you. Just calm down for a
sec
and listen. Colors, sounds,
thoughts, ideas.
</p>
<footer className="bg-body-light">
<ul className="post-links">
<li><button className="btn-link">1 hour</button></li>
<li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart" /> Like</span></button></li>
<li><button className="btn-link">Comment</button></li>
</ul>
<ul className="post-comments mb-0 mt-2">
<li>
<span className="thumb-xs avatar pull-left mr-sm">
<img className="rounded-circle" src={peopleA1} alt="..." />
</span>
<div className="comment-body">
<h6 className="author fs-sm fw-semi-bold">Ignacio Abad&nbsp;
<small>6 mins ago</small>
</h6>
<p className="fs-mini">Hey, have you heard anything about that?</p>
</div>
</li>
<li>
<span className="thumb-xs avatar pull-left mr-sm">
<img className="rounded-circle" src={avatar} alt="..." />
</span>
<div className="comment-body">
<input
className="form-control form-control-sm" type="text"
placeholder="Write your comment..."
/>
</div>
</li>
</ul>
</footer>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget refresh close bodyClass="mt-0">
<div>
<div className="widget-top-overflow text-white">
<img src={img17} alt="..." />
<ul className="tags text-white pull-right">
{/* eslint-disable-next-line */}
<li><a href="#">design</a></li>
{/* eslint-disable-next-line */}
<li><a href="#">white</a></li>
</ul>
</div>
<div className="post-user mt-sm">
<span className="thumb pull-left mr mt-n-sm">
<img className="rounded-circle" src={peopleA6} alt="..." />
</span>
<h6 className="mb-xs mt"><span className="fw-semi-bold">Maryna</span> Nilson</h6>
<p className="fs-mini text-muted">
<time>25 mins</time>
&nbsp; <i className="fa fa-map-marker" /> &nbsp; near Amsterdam
</p>
</div>
<p className="text-light fs-mini m">Lots of cool stuff is happening around you. Just calm down for a
sec
and listen. Colors, sounds,
thoughts, ideas. </p>
</div>
<footer className="bg-body-light">
<ul className="post-links no-separator">
<li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart" /> 427</span></button></li>
<li><button className="btn-link"><i className="glyphicon glyphicon-comment" /> 98</button></li>
</ul>
</footer>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget refresh close>
<div>
<div className="post-user mt-n-xs">
<span className="thumb pull-left mr mt-n-sm">
<img className="rounded-circle" src={peopleA2} alt="..." />
</span>
<h6 className="mb-xs mt-xs">Jess <span className="fw-semi-bold">@jessica</span></h6>
<p className="fs-mini text-muted">
<time>25 mins</time>
&nbsp; <i className="fa fa-map-marker" /> &nbsp; near Amsterdam
</p>
</div>
<div className="widget-middle-overflow widget-padding-md clearfix bg-danger text-white">
<h3 className="mt-lg mb-lg">Sing - <span className="fw-semi-bold">Next Generation</span> Admin
Dashboard
Template</h3>
<ul className="tags text-white pull-right">
{/* eslint-disable-next-line */}
<li><a href="#">design</a></li>
</ul>
</div>
<p className="text-light fs-mini mt-sm">Lots of cool stuff is happening around you. Just calm down for
a
sec and listen. Colors, sounds,
thoughts, ideas. </p>
</div>
<footer className="bg-body-light">
<ul className="post-links">
<li><button className="btn-link">1 hour</button></li>
<li><button className="btn-link"><span className="text-danger"><i className="fa fa-heart" /> Like</span></button></li>
<li><button className="btn-link">Comment</button></li>
</ul>
</footer>
</Widget>
</Col>
</Row>
<Row>
<Col lg={6} xs={12}>
<Widget bodyClass="mt-0">
<div className="widget-image text-white">
<img src={img18} alt="..." />
<h4 className="title">
<span className="fw-normal">Sunnyvale</span>, CA
</h4>
<div className="info text-right">
<i className="fa fa-map-marker h1 m-0 mr-xs" />
<h6 className="m-0 mt-xs">FLORIDA, USA</h6>
<p className="fs-sm">9:41 am</p>
</div>
<div className="forecast">
<div className="row">
<div className="col-6 col-md-4">
<div className="row mt-xs">
<div className="col-6 p-0">
<Skycon icon="CLEAR_DAY" color="white" width="40" height="40" />
<p className="m-0 fw-normal mt-n-xs">sunny</p>
</div>
<div className="col-6 p-0">
<h6 className="fw-semi-bold m-0">SUNDAY</h6>
<p className="value1 ">29&deg;</p>
</div>
</div>
</div>
<div className="col-3 col-md-2 p-0">
<h6 className="m-0">TOMMOROW</h6>
<Skycon className="mt-1" icon="PARTLY_CLOUDY_DAY" color="white" width="28" height="28" />
<p className="m-0 fw-semi-bold">32&deg;</p>
</div>
<div className="col-3 col-md-2 p-0">
<h6 className="m-0">TUE</h6>
<Skycon className="mt-1" icon="RAIN" color="white" width="28" height="28" />
<p className="m-0 fw-semi-bold">25&deg;</p>
</div>
<div className="col-3 col-md-2 p-0">
<h6 className="m-0">WED</h6>
<Skycon className="mt-1" icon="CLEAR_DAY" color="#f0b518" width="28" height="28" />
<p className="m-0 fw-semi-bold">28&deg;</p>
</div>
<div className="col-3 col-md-2 p-0">
<h6 className="m-0">THU</h6>
<Skycon className="mt-1" icon="PARTLY_CLOUDY_DAY" color="white" width="28" height="28" />
<p className="m-0 fw-semi-bold">17&deg;</p>
</div>
</div>
</div>
</div>
</Widget>
<Row>
<Col md={6} xs={12}>
<Widget className="p-0 text-center">
<Row className="m-0">
<div className="col-5 bg-danger btlr bblr">
<Skycon className="mt-3" icon="CLEAR_DAY" color="white" width="62" height="62" />
<h6 className="text-white fw-normal m-t-1">FRIDAY</h6>
</div>
<div className="col-7">
<p className="value0 text-danger mt-n-xs mr-n-xs">
33&deg;
</p>
<p className="mt-n-sm m-b-0 fw-normal fs-sm text-muted">WINDY</p>
<div className="row mt-n-xs mb-xs">
<div className="col-6 p-0">
<Skycon icon="WIND" color="#999" width="20" height="20" />
<div className="d-inline-block ml-1">
<p className="value6">4</p>
<p className="fs-sm m-0 mt-n-xs text-muted fw-normal">MPS</p>
</div>
</div>
<div className="col-6 p-0">
<Skycon icon="RAIN" color="#999" width="20" height="20" />
<div className="d-inline-block ml-1">
<p className="value6">52</p>
<p className="fs-sm m-0 mt-n-xs text-muted fw-normal">MM</p>
</div>
</div>
</div>
</div>
</Row>
</Widget>
</Col>
<Col md={6} xs={12}>
<Widget className="p-0 text-center">
<div className="row m-0">
<div className="col-7 bg-success btlr bblr">
<p className="value0 text-white mt-sm mr-n-xs">
20&deg;
</p>
<p className="text-white fw-normal d-inline-block mb">SUNDAY</p>
</div>
<div className="col-5">
<Skycon className="mt-3" icon="PARTLY_CLOUDY_DAY" color="#64bd63" width="60" height="60" />
<p className="fw-normal fs-sm text-muted">WINDY</p>
</div>
</div>
</Widget>
</Col>
</Row>
</Col>
<Col lg={6} xs={12}>
<Row>
<Col md={6} xs={12}>
<Widget className="widget-sm">
<h6 className="mt-3 fw-normal">
Nasdaq
</h6>
<h3>
355 <span className="fw-semi-bold">USD</span>
</h3>
<p>Last Sale 354.94 USD</p>
<NasdaqSparkline />
</Widget>
</Col>
<Col md={6} xs={12}>
<Widget className="widget-sm bg-success text-white">
<p className="mb-xs"><i className="fa fa-comments fa-2x" /></p>
<h5>
Lots of <span className="fw-semi-bold">possibilities</span> to customize your
new <span className="fw-semi-bold">admin template</span>
</h5>
<p className="fs-mini mt-sm">
<span className="fw-semi-bold">83</span> likes
&nbsp;
<span className="fw-semi-bold">96</span> comments
&nbsp;
<span className="fw-semi-bold">7</span> shares
</p>
<p className="fs-sm mt-lg text-light">
<time>10 June</time>
</p>
</Widget>
</Col>
</Row>
<Row>
<Col md={6} xs={12}>
<Widget className="widget-sm bg-primary text-white">
<p className="mb-xs"><i className="fa fa-arrow-circle-up fa-3x opacity-50" /></p>
<p className="mb text-light">
<time>10 June</time>
</p>
<h3>
Lots of <span className="fw-semi-bold">new</span> amazing possibilities
</h3>
<p className="fs-mini mt">
<span className="fw-semi-bold">214</span> likes
&nbsp;
<span className="fw-semi-bold">96</span> comments
</p>
</Widget>
</Col>
<Col md={6} xs={12}>
<Widget
className="widget-sm"
title={<h6>Server <span className="fw-semi-bold">Overview</span></h6>}
>
<div className="clearfix fs-mini">
<span className="pull-right m-0 fw-semi-bold">CPU</span>
<span className="fs-mini">60% / 37°C / 3.3 Ghz</span>
</div>
<Progress color="bg-gray-lighter" className="progress-xs" value={60} />
<div className="clearfix fs-mini mt">
<span className="pull-right m-0 fw-semi-bold">Mem</span>
<span className="fs-mini">29% / 4GB (16 GB)</span>
</div>
<Progress color="warning" className="bg-gray-lighter progress-xs" value={29} />
<div className="clearfix fs-mini mt">
<span className="pull-right m-0 fw-semi-bold">LAN</span>
<span className="fs-mini">6 Mb/s <i className="fa fa-caret-down" /> &nbsp; 3 Mb/s <i
className="fa fa-caret-up"
/></span>
</div>
<Progress color="danger" className="bg-gray-lighter progress-xs" value={48} />
<div className="clearfix fs-mini mt">
<span className="pull-right m-0 fw-semi-bold">Access</span>
<span className="fs-mini">17 Mb/s <i className="fa fa-caret-up" /> &nbsp; (+18%)</span>
</div>
<Progress color="success" className="bg-gray-lighter progress-xs" value={64} />
</Widget>
</Col>
</Row>
</Col>
</Row>
<Row>
<Col lg={4} xs={12}>
<Widget>
<YearsMap />
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget
title={
<header className="bb">
<h6>Recent <span className="fw-semi-bold">Chats</span></h6>
</header>
}
>
<div className="widget-body">
<div className="widget-middle-overflow">
{/* todo: slimscroll ??? */}
<ul
className="list-group widget-chat-list-group" data-ui-jq="slimscroll"
data-ui-options="{ height: '287px', size: '4px', borderRadius: '1px', opacity: .3 }"
>
<li className="list-group-item">
<span className="thumb">
<img className="rounded-circle" src={peopleA6} alt="..." />
</span>
<div className="message">
<h6 className="sender">Chris Gray</h6>
<p className="body">Hey! What&apos;s up? So much time since we saw each other there</p>
<time className="time">10 sec ago</time>
</div>
</li>
<li className="list-group-item on-right">
<span className="thumb">
<img className="rounded-circle" src={avatar} alt="..." />
</span>
<div>
<h6 className="sender">John Doe</h6>
<p className="body">True! Totally makes sense. But how do we find that?</p>
<time className="time">10 sec ago</time>
</div>
</li>
<li className="list-group-item">
<span className="thumb">
<img className="rounded-circle" src={peopleA6} alt="..." />
</span>
<div>
<h6 className="sender">Chris Gray</h6>
<p className="body">OK, but so now what? What should we do now? Not sure actually.</p>
<time className="time">10 sec ago</time>
</div>
</li>
<li className="list-group-item on-right">
<span className="thumb">
<img className="rounded-circle" src={avatar} alt="..." />
</span>
<div>
<h6 className="sender">John Doe</h6>
<p className="body">Hey guys, didn&apos;t you notice this conversation is sort of jubberish?</p>
<time className="time">10 sec ago</time>
</div>
</li>
</ul>
</div>
</div>
<footer className="bg-body-light bt">
<InputGroup size="sm">
<Input placeholder="Your message" />
<InputGroupAddon addonType="append"><Button color="default">Send</Button></InputGroupAddon>
</InputGroup>
</footer>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget className="bg-gray-dark text-white">
<RealtimeTraffic />
</Widget>
</Col>
</Row>
<Row>
<Col lg={3} xs={12}>
<Widget className="widget-padding-lg">
<div className="clearfix">
<LiveTile
data-mode="carousel" data-speed="750" data-delay="3000"
data-height="313"
>
<div>
<h3>Basic & <span className="fw-semi-bold">Advanced</span> Features</h3>
<p className="value4 mt-lg">All you need in one app</p>
<div className="h5 mt-lg mb-lg">
<i className="fa fa-quote-left opacity-50" />
&nbsp;That&apos;s awesome! &nbsp;
<i className="fa fa-quote-right opacity-50" />
</div>
<div className="widget-footer-bottom">
<p>Attention to what&apos;s really important</p>
<button className="btn btn-info btn-block mt">Order Now!</button>
</div>
</div>
<div>
<h3>Beautiful <span className="fw-semi-bold">Thing</span></h3>
<p className="value4 mt-lg">Life-time package support</p>
<div className="h5 mt-lg mb-lg">
<i className="fa fa-quote-left opacity-50" />
&nbsp;That&apos;s awesome! &nbsp;
<i className="fa fa-quote-right opacity-50" />
</div>
<div className="widget-footer-bottom">
<p>Attention to what&apos;s really important</p>
<button className="btn btn-inverse btn-block mt"><span
className="fw-semi-bold text-warning"
>Ready?</span>
</button>
</div>
</div>
</LiveTile>
</div>
</Widget>
</Col>
<Col lg={3} xs={12}>
<Widget className="widget-chart-changes" close refresh bodyClass="mt-0">
<ChangesChart />
</Widget>
</Col>
<Col lg={3} xs={12}>
<Widget className="widget-padding-lg bg-primary text-white">
<div className="clearfix">
<LiveTile data-mode="carousel" data-speed="300" data-delay="3000" data-height="313">
<div>
<p className="h4 mt-xs">
<i className="fa fa-quote-left opacity-50" />
&nbsp;Thanks for the awesome support. That&apos;s awesome!&nbsp;
<i className="fa fa-quote-right opacity-50" />
</p>
<div className="widget-footer-bottom">
<span className="thumb pull-left mr">
<img className="rounded-circle" src={peopleA4} alt="..." />
</span>
<h4 className="m-0 mb-xs"><span className="fw-semi-bold">Miha</span> Koshir</h4>
<p className="text-light">@miha</p>
</div>
</div>
<div>
<div className="clearfix mt-xs">
<span className="thumb pull-left mr">
<img className="rounded-circle" src={peopleA3} alt="..." />
</span>
<h4 className="m-0 mb-xs"><span className="fw-semi-bold">Maryna</span> Ess</h4>
<p className="text-light">@ess</p>
</div>
<div className="widget-footer-bottom">
<p className="h4">
<i className="fa fa-quote-left opacity-50" />
&nbsp;Could have never imagined it would be so great!&nbsp;
<i className="fa fa-quote-right opacity-50" />
</p>
</div>
</div>
</LiveTile>
</div>
</Widget>
</Col>
<Col lg={3} xs={12} className="col-lg-3 col-12">
<LiveTile
data-mode="flip" data-direction="horizontal"
data-speed="600" data-delay="3000" data-height="373" data-play-onhover="true"
>
<div>
<Widget
className="widget-padding-lg widget-md bg-gray-dark text-white"
bodyClass="widget-body-container"
>
<div className="text-center">
<i className="fa fa-child text-warning fa-5x" />
</div>
<h3 className="fw-normal">Sing Web App</h3>
<div className="widget-footer-bottom">
<div className="mb-sm">Cutting-edge tech and design delivered</div>
<p>
<button className="btn btn-default btn-block">Hover over me!</button>
</p>
</div>
</Widget>
</div>
<div>
<Widget className="widget-padding-lg widget-md" bodyClass="widget-body-container">
<div className="text-center">
<i className="fa fa-globe text-primary fa-5x" />
</div>
<h3 className="fw-normal">Join The Web Now!</h3>
<div className="widget-footer-bottom">
<div className="mb-sm">Cutting-edge tech and design delivered</div>
<p>
<button className="btn btn-gray btn-block">Join now!</button>
</p>
</div>
</Widget>
</div>
</LiveTile>
</Col>
</Row>
</div>
);
}
}
export default Widgets;
@import '../../../styles/app';
/* Post User */
.post-user {
position: relative;
@include clearfix();
img {
border: 3px solid white;
}
}
/* Tags */
.tags {
padding-left: 0;
list-style: none;
@include clearfix();
> li {
float: left;
> a {
padding: 2px 8px;
font-size: $font-size-mini;
border-radius: 6px;
border: 1px solid white;
color: inherit;
text-decoration: none;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.fa {
font-size: 8px;
margin-right: 3px;
opacity: 0.8;
}
}
}
> li + li > a {
margin-left: 6px;
}
}
.widget-top-overflow > img + .tags {
position: absolute;
bottom: 0;
right: 0;
margin: 20px;
}
/* Weather */
.widget-image .forecast {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
/* Chat List Group */
.widget-chat-list-group {
padding-top: $spacer/2;
.list-group-item {
margin-left: $widget-padding-horizontal;
margin-right: $widget-padding-horizontal;
padding: 0;
border: 0;
display: flex;
div {
width: 100%;
}
&:nth-child(even) {
margin-left: 75px;
}
&:hover {
background: none;
}
& + .list-group-item {
margin-top: 20px;
}
.thumb,
.thumb-sm {
float: left;
margin-right: 15px;
}
.time {
font-size: $font-size-sm;
color: $text-muted;
}
.sender {
margin-top: 5px;
margin-bottom: 5px;
font-size: $font-size-mini;
font-weight: $font-weight-normal;
color: theme-color('primary');
}
.body {
font-size: $font-size-mini;
margin-bottom: 0;
}
&.on-right {
div {
padding-right: 1rem;
}
.thumb,
.thumb-sm {
order: 1;
margin-left: auto;
margin-right: 0;
}
.time {
float: left;
}
.sender {
text-align: right;
}
}
}
}
import React from 'react';
import Rickshaw from 'rickshaw';
import $ from 'jquery';
import {
Row, Col,
} from 'reactstrap';
import Sparklines from '../../../../../components/Sparklines';
import s from './ChangesChart.module.scss';
class ChangesChart extends React.Component {
constructor(prop) {
super(prop);
this.state = {
rickshawGraph: null,
sparklineData: [],
sparklineOptions: {},
};
this.onResizeRickshaw = this.onResizeRickshaw.bind(this);
this.initRickshaw = this.initRickshaw.bind(this);
this.initSparkline();
}
componentDidMount() {
this.initRickshaw();
window.addEventListener('resize', this.onResizeRickshaw);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResizeRickshaw);
}
onResizeRickshaw() {
this.state.graph.configure({ height: 100 });
this.state.graph.render();
}
initRickshaw() {
const seriesData = [[], []];
const random = new Rickshaw.Fixtures.RandomData(32);
for (let i = 0; i < 32; i += 1) {
random.addData(seriesData);
}
// eslint-disable-next-line
this.state.graph = new Rickshaw.Graph({
element: this.rickshawChart,
height: '100',
renderer: 'multi',
series: [{
name: 'pop',
data: seriesData.shift().map(d => ({ x: d.x, y: d.y })),
color: '#7bd47a', // (#64bd63, 0.9)
renderer: 'bar',
gapSize: 2,
min: 'auto',
strokeWidth: 3,
}, {
name: 'humidity',
data: seriesData.shift()
.map(d => ({ x: d.x, y: ((d.y * (Math.random() * 0.5)) + 30.1) })),
renderer: 'line',
color: '#fff',
gapSize: 2,
min: 'auto',
strokeWidth: 3,
}],
});
const hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: this.state.graph,
xFormatter: x => new Date(x * 1000).toString(),
});
hoverDetail.show();
this.state.graph.render();
}
initSparkline() {
const data = [3, 6, 2, 4, 5, 8, 6, 8];
const dataMax = Math.max.apply(null, data);
const backgroundData = data.map(() => dataMax);
// eslint-disable-next-line
this.state.sparklineData = [backgroundData, data];
// eslint-disable-next-line
this.state.sparklineOptions = [
{
type: 'bar',
height: 26,
barColor: '#eee',
barWidth: 7,
barSpacing: 5,
chartRangeMin: Math.min.apply(null, data),
tooltipFormat: new $.SPFormatClass(''),
},
{
composite: true,
type: 'bar',
barColor: '#64bd63',
barWidth: 7,
barSpacing: 5,
},
];
}
render() {
return (
<div className={s.changesChart}>
<div className={`${s.chart} bg-success btlr btrr`}>
<p className={s.chartValue}><i className="fa fa-caret-up" /> 352.79</p>
<p className={s.chartValueChange}>+2.04 (1.69%)</p>
<div
style={{ overflow: 'hidden' }}
ref={(r) => {
this.rickshawChart = r;
}}
/>
{/* <div rickshaw-chart [series]="series" [height]="100" [renderer]="'multi'"
[configureProps]="{gapSize: 0.5, min: 'auto', strokeWidth: 3}"></div> */}
</div>
<h4 className={s.chartTitle}><span className="fw-normal">Salt Lake City</span>, Utah</h4>
<p className="deemphasize">Today 13:34</p>
<div className="mt">
<Row>
<Col xs={6}>
<p className="h4 m-0">18.7M</p>
<p className="deemphasize">Shares Traded</p>
</Col>
<Col xs={6} className="text-right">
<p className="h4 m-0">19.9B</p>
<p className="deemphasize">Market Cap</p>
</Col>
</Row>
</div>
<div className="mt">
<Row>
<Col xs={6}>
<p className="h3 m-0 text-success fw-semi-bold">+120.93</p>
<p className="deemphasize">Yearly Change</p>
</Col>
<Col xs={6} className="text-right">
<div
className="sparkline" ref={(r) => {
this.sparklineRef = r;
}}
/>
<Sparklines data={this.state.sparklineData} options={this.state.sparklineOptions} />
<p className="deemphasize">GOOG</p>
</Col>
</Row>
</div>
</div>
);
}
}
export default ChangesChart;
@import '../../../../../styles/app';
.changesChart {
.chart {
margin: -$widget-padding-vertical (-$widget-padding-horizontal) 0;
padding: $widget-padding-vertical 0 0;
}
.chartTitle {
margin: 20px 0 0;
}
.chartValue,
.chartValueChange {
padding: 0 $widget-padding-horizontal;
}
.chartValue {
margin-bottom: 0;
font-weight: $font-weight-bold;
font-size: 21px;
line-height: 1;
color: $white;
}
.chartValueChange {
color: rgba($white, 0.7);
font-size: $small-font-size;
margin-bottom: $spacer;
}
}
import React from 'react';
import {
Row,
Col,
Button,
Badge,
} from 'reactstrap';
import ReactFlot from 'react-flot';
import Widget from '../../../../../components/Widget';
import s from './FlotCharts.module.scss';
class FlotCharts extends React.Component {
static generateRandomData(labels) {
function random() {
return (Math.floor(Math.random() * 30)) + 10;
}
const data = [];
let maxValueIndex = 5;
for (let i = 0; i < labels.length; i += 1) {
const randomSeries = [];
for (let j = 0; j < 25; j += 1) {
randomSeries.push([j, Math.floor(maxValueIndex * j) + random()]);
}
maxValueIndex -= 1;
data.push({
data: randomSeries,
showLabels: true,
label: labels[i].label,
labelPlacement: 'below',
canvasRender: true,
cColor: 'red',
color: labels[i].color,
});
}
return data;
}
render() {
const flotOptions = {
series: {
lines: {
show: true,
lineWidth: 1,
fill: false,
fillColor: { colors: [{ opacity: 0.001 }, { opacity: 0.5 }] },
},
points: {
show: false,
fill: true,
},
shadowSize: 0,
},
legend: false,
grid: {
show: false,
margin: 0,
labelMargin: 0,
axisMargin: 0,
hoverable: true,
clickable: true,
tickColor: 'rgba(255,255,255,1)',
borderWidth: 0,
},
};
const generateData = this.constructor.generateRandomData;
return (<Row>
<Col lg={6} xs={12}>
<Widget
title={<Row>
<Col xs={4}>
<h6>
Total Sales
</h6>
<p className="value5">
January, 2018
</p>
</Col>
<Col xs={4}>
<h5>
<small>Best</small>
</h5>
<p className="value6 fs-sm">
March, 2018 + 1
</p>
</Col>
</Row>}
settings close
>
<div className="chart-stats">
<p className="text-muted fs-mini mt-xs">
<i className="fi flaticon-placeholder fa-5x pull-left mr-3" />
<span className="fw-semi-bold text-gray-dark">Jess:</span> Seems like statically it&apos;s getting impossible
to achieve any sort of
results in nearest future. The only thing we can hope for is pressing one of these two buttons:
</p>
<div className="btn-toolbar">
<Button color="success" size="xs">Accept</Button>
<Button color="default" size="xs">Reject</Button>
</div>
</div>
<div className={`${s.chart} bg-body-light`}>
<ReactFlot
id="product-chart-1"
data={
generateData([{
label: 'Visitors', color: '#777',
}, {
label: 'Charts', color: '#dd5826',
}])}
options={flotOptions}
height={'100%'}
/>
</div>
</Widget>
</Col>
<Col lg={6} xs={12}>
<Widget
className=" widget-chart-stats-simple" title={<Row>
<Col xs={12}>
<h6 className="mb-0">
<span className="fw-semi-bold">Budget</span>&nbsp;<Badge pill color="danger">2019</Badge>
</h6>
<span className="text-muted fs-mini">monthly report will be available in <button className="btn-link">6 hours</button></span>
</Col>
</Row>}
settings close
>
<div className="chart-stats">
<div className="row">
<div className="col-md-5">
<div className="clearfix m-t-1">
<h6 className="pull-left text-muted mb-xs">
Income
</h6>
<p className="pull-right h6 mb-xs">
<span className="fw-semi-bold">$14,595</span>
</p>
</div>
<div className="clearfix">
<h6 className="pull-left no-margin text-muted">
Recent
</h6>
<p className="pull-right">
<span className="fw-semi-bold">$7,647</span>
</p>
</div>
</div>
<div className="col-md-3 text-right m-t-1">
<h6 className="text-muted mb-xs">Inqueries</h6>
<p className="fw-semi-bold">73 at 14am</p>
</div>
<div className="col-md-4 text-right m-t-1">
<h6 className="text-muted mb-xs">Last Updated</h6>
<p className="fw-semi-bold">23.06.2013</p>
</div>
</div>
</div>
<div className={`${s.chart} bg-body-light`}>
<ReactFlot
id="product-chart-2"
data={
generateData([{
label: 'Controllers', color: '#777',
}, {
label: 'Scopes', color: '#f0b518',
}])}
options={flotOptions}
height={'100%'}
/>
</div>
</Widget>
</Col>
</Row>
);
}
}
export default FlotCharts;
@import '../../../../../styles/app';
.chart {
height: 200px;
margin: $spacer/2 (-$widget-padding-horizontal) (-$widget-padding-vertical);
}
import React from 'react';
import $ from 'jquery'
import PropTypes from 'prop-types';
/* eslint-disable */
import 'metrojs/release/MetroJs.Full/MetroJs';
/* eslint-enable */
import './LiveTile.scss';
class LiveTile extends React.Component {
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
};
static defaultProps = {
children: null,
};
constructor(props) {
super(props);
this.state = {
id: `live-tile-${Math.floor(Math.random() * 255)}`,
};
}
componentDidMount() {
const el = $(`#${this.state.id}`);
el.css('height', el.data('height'))
.liveTile();
}
render() {
const {
children,
...attr
} = this.props;
return (
<div {...attr} id={this.state.id} className="live-tile">
{children}
</div>
);
}
}
export default LiveTile;
@import '../../../../../styles/app';
/* Live Tiles */
.live-tile,
.list-tile,
.copy-tile,
.tile-strip .flip-list > li {
height: auto;
min-width: 100%;
margin: 0 !important;
color: inherit !important;
&.fade {
opacity: 1;
}
}
.live-tile p,
.list-tile p,
.copy-tile p {
padding: 0 !important;
}
.live-tile p,
.list-tile p,
.copy-tile p,
.live-tile .face,
.list-tile .face,
.copy-tile .face {
&.h1 {
font-size: $h1-font-size;
}
&.h2 {
font-size: $h2-font-size;
}
&.h3 {
font-size: $h3-font-size;
}
&.h4 {
font-size: $h4-font-size;
}
&.h5 {
font-size: $h5-font-size;
}
&.h6 {
font-size: $h6-font-size;
}
$font-sizes: $h1-font-size, $h2-font-size, $h3-font-size, $h4-font-size, $h5-font-size, $h6-font-size;
$i: 1;
@each $font-size in $font-sizes {
&.value#{$i} {
font-size: $font-size;
}
$i: $i + 1;
}
}
import React from 'react';
import $ from 'jquery';
import Sparklines from '../../../../../components/Sparklines';
class NasdaqSparkline extends React.Component {
render() {
const data = [[4, 6, 5, 7, 5]];
const options = {
type: 'line',
width: '99%',
height: '60',
lineColor: '#666',
fillColor: 'transparent',
spotRadius: 5,
spotColor: '#666',
valueSpots: { '0:': '#666' },
highlightSpotColor: '#fff',
highlightLineColor: '#666',
minSpotColor: '#666',
maxSpotColor: '#dd5826',
tooltipFormat: new $
.SPFormatClass('<span style="color: white">&#9679;</span> {{prefix}}{{y}}{{suffix}}'),
chartRangeMin: Math.min.apply(null, data) - 1,
};
return (
<Sparklines data={data} options={options} />
);
}
}
export default NasdaqSparkline;
import React from 'react';
import {
Progress,
} from 'reactstrap';
import Rickshaw from 'rickshaw';
class RealtimeTraffic extends React.Component {
state = { graph: null }
constructor(prop) {
super(prop);
this.onResizeRickshaw = this.onResizeRickshaw.bind(this);
}
componentDidMount() {
this.initChart();
window.addEventListener('resize', this.onResizeRickshaw);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResizeRickshaw);
}
onResizeRickshaw() {
this.graph.configure({ height: 130 });
this.graph.render();
}
initChart() {
const seriesData = [[], []];
const random = new Rickshaw.Fixtures.RandomData(30);
for (let i = 0; i < 30; i += 1) {
random.addData(seriesData);
}
this.graph = new Rickshaw.Graph({
element: this.rickshawChart,
height: 130,
realtime: true,
series: [
{
color: '#343434', // 'gray-dark'
data: seriesData[0],
name: 'Uploads',
}, {
color: '#666', // gray,
data: seriesData[1],
name: 'Downloads',
},
],
});
const hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: this.graph,
xFormatter: x => new Date(x * 1000).toString(),
});
hoverDetail.show();
setInterval(() => {
random.removeData(seriesData);
random.addData(seriesData);
this.graph.update();
}, 1000);
this.graph.render();
}
render() {
return (
<div>
<h4 className="mb-lg">Recent <span className="fw-semi-bold">Update</span></h4>
<h6>Node.js <span className="fw-semi-bold">4.0.1 distribution</span></h6>
<Progress className="bg-gray-lighter progress-xs" color="danger" value="77" />
<p className="mt-sm mb fs-mini ">
<small><span className="circle bg-warning text-gray-dark"><i
className="glyphicon glyphicon-chevron-up"
/></span></small>
<strong className="px-1">17% higher</strong>
than last month
</p>
<p className="fs-sm text-gray-lighter mb-0">Remaining hours</p>
<button className="btn btn-xs btn-gray pull-right ml-xs">
<i className="fa fa-compress" /> track
</button>
<button className="btn btn-xs btn-gray pull-right">
<i className="fa fa-pause" /> pause
</button>
<p className="value4">2h 56m</p>
<br />
<div
ref={(r) => {
this.rickshawChart = r;
}} className="text-gray-dark chart-overflow-bottom" style={{ height: '130px' }}
/>
</div>
);
}
}
export default RealtimeTraffic;
This diff could not be displayed because it is too large.
import React from 'react';
import { Nav, NavItem, NavLink } from 'reactstrap';
/* eslint-disable */
import $ from 'jquery';
import 'imports-loader?$=jquery,this=>window!jquery-mapael/js/maps/world_countries';
import 'imports-loader?$=jquery,this=>window!jquery-mapael/js/jquery.mapael';
/* eslint-enable */
import './YearsMap.scss';
import fakeWorldData from './MapData';
class YearsMap extends React.Component {
constructor(prop) {
super(prop);
this.state = {
activeYear: 2019,
};
this.triggerYear = this.triggerYear.bind(this);
}
componentDidMount() {
this.init();
}
init() {
const $map = $('#mapael');
const data = {
map: {
name: 'world_countries',
defaultArea: {
attrs: {
fill: '#eee', // gray-lighter
stroke: '#666', // 'gray'
'stroke-width': 0.1,
},
attrsHover: {
fill: '#999', // gray-light,
animDuration: 100,
},
},
defaultPlot: {
size: 17,
attrs: {
fill: '#f0b518', // brand-warning,
stroke: '#fff',
'stroke-width': 0,
'stroke-linejoin': 'round',
},
attrsHover: {
'stroke-width': 1,
animDuration: 100,
},
},
zoom: {
enabled: true,
step: 1,
maxLevel: 10,
mousewheel: false,
},
},
legend: {
area: {
display: false,
slices: [
{
max: 5000000,
attrs: {
fill: 'rgb(245, 249, 251)', // lightenColor('#ebeff1', .04)
},
label: 'Less than 5M',
},
{
min: 5000000,
max: 10000000,
attrs: {
fill: '#ebeff1',
},
label: 'Between 5M and 10M',
},
{
min: 10000000,
max: 50000000,
attrs: {
fill: '#eee', // gray-lighter
},
label: 'Between 10M and 50M',
},
{
min: 50000000,
attrs: {
fill: 'rgb(209, 213, 215)', // darkenColor('#ebeff1', .1)
},
label: 'More than 50M',
},
],
},
},
areas: fakeWorldData[this.state.activeYear].areas,
};
const height = 394;
$map.css('height', height);
if ($map.parents('.widget')[0]) {
$map.find('.map').css('height', parseInt($map.parents('.widget').css('height'), 10) - 35);
}
$map.mapael(data);
$map.trigger('zoom', { level: 6, latitude: 59.599254, longitude: 8.863224 });
}
triggerYear(year) {
this.setState({
activeYear: year,
});
const $map = $('#mapael');
$map.trigger('update', [{
mapOptions: fakeWorldData[year],
animDuration: 300,
}]);
}
render() {
return (<div>
<div className="mapael" id="mapael">
<div className="stats">
<h6 className="text-gray-dark">YEARLY <span className="fw-semi-bold">DISTRIBUTIONS</span></h6>
<span className="pull-left mr-xs">
<small><span className="circle bg-warning text-gray-dark">
<i className="fa fa-plus" /></span></small>
</span>
<p className="h4 m-0">
<strong>17% last year</strong>
</p>
</div>
<div className="map">
<span>Alternative content for the map</span>
</div>
<div className="areaLegend">
<span>Alternative content for the legend</span>
</div>
</div>
<Nav className="map-controls" pills fill>
<NavItem>
<NavLink active={this.state.activeYear === 2014} onClick={() => this.triggerYear(2014)}>2014</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2015} onClick={() => this.triggerYear(2015)}>2015</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2016} onClick={() => this.triggerYear(2016)}>2016</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2017} onClick={() => this.triggerYear(2017)}>2017</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2018} onClick={() => this.triggerYear(2018)}>2018</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2019} onClick={() => this.triggerYear(2019)}>2019</NavLink>
</NavItem>
</Nav>
</div>);
}
}
export default YearsMap;
@import '../../../../../styles/app';
/* Mapael */
.mapTooltip {
position: fixed;
padding: 2px;
z-index: 1000;
max-width: 200px;
display: none;
background-color: #fff;
border: 1px solid #ccc;
border-radius: $border-radius;
font-size: $font-size-sm;
color: $text-color;
}
.zoomIn,
.zoomOut {
position: absolute;
bottom: 10px;
left: 10px;
width: 20px;
height: 20px;
box-sizing: content-box;
border: 1px solid #ccc;
background-color: #fff;
color: $text-color;
line-height: 20px;
text-align: center;
border-radius: $border-radius;
cursor: pointer;
font-weight: $font-weight-bold;
user-select: none;
}
.zoomOut {
left: 36px;
}
.mapael {
position: relative;
margin: (-$widget-padding-vertical) (-$widget-padding-horizontal) 0;
.map {
position: relative;
height: calc(100% - 20px);
}
.stats {
position: absolute;
z-index: 1;
top: 0;
left: 0;
margin: 5% 10%;
}
}
/* Part:Map Controls */
.map-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #bbb;
background-color: $addition-bg;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
> .nav-item > .nav-link {
border-radius: 0;
padding: 0.7143rem 0;
color: $text-color;
&:hover {
background-color: $gray-200;
color: $text-color;
}
}
> .nav-item > .nav-link.active {
&,
&:hover {
background-color: $white;
color: $text-color;
font-weight: $font-weight-bold;
}
}
> .nav-item:first-child > a {
border-bottom-left-radius: $border-radius;
}
> .nav-item:last-child > a {
border-bottom-right-radius: $border-radius;
}
}
.map svg {
height: 100%;
width: 100%;
}
{
"name": "widgets",
"version": "0.0.0",
"main": "./Widgets.js",
"private": true
}
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import Widget from '../../components/Widget';
import Widget from '../../components/Widget/Widget';
class Subject extends PureComponent {
async componentDidUpdate() {
......
......@@ -6,7 +6,7 @@ import {
Col,
} from 'reactstrap';
import Widget from '../../components/Widget';
import Widget from '../../components/Widget/Widget';
import s from './VideoAnalysis.module.scss';
......
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: { 'Service-Worker': 'script' },
})
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
.then(registration => {
registration.unregister();
})
.catch(error => {
console.error(error.message);
});
}
}
.auth-page {
padding-top: 10vh;
height: 100vh;
}
.widget-auth {
max-width: 360px;
padding: 30px !important;
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: $font-weight-normal;
text-align: center;
}
.widget-auth-info {
font-size: 13px;
color: #888;
margin-bottom: 0;
text-align: center;
}
.auth-btn {
width: 100%;
}
.social-buttons {
display: flex;
align-items: stretch;
justify-content: center;
flex-direction: column;
margin: ($spacer) 0;
.social-button {
display: flex;
align-items: center;
padding: 0;
position: relative;
height: 30px;
}
.social-icon {
position: absolute;
left: 1px;
width: 26px;
height: 26px;
padding: 0;
transition: all .2s ease-in-out;
border-radius: 3px;
background-color: $white;
}
.social-text {
margin: 0 auto;
font-size: $font-size-sm;
}
.social-google {
background-size: 100%;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIzOHB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5BcnRib2FyZDwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iQXJ0Ym9hcmQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9ImJ0bl9nb29nbGVfZGFya19ub3JtYWxfaW9zIj4gICAgICAgICAgICA8ZyBpZD0iYnV0dG9uLWJnLWNvcHkiPiAgICAgICAgICAgICAgICA8cmVjdCBpZD0icGF0aC0zIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHJ4PSIxIj48L3JlY3Q+ICAgICAgICAgICAgPC9nPiAgICAgICAgICAgIDxnIGlkPSJsb2dvX2dvb2dsZWdfNDhkcCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC4wMDAwMDApIj4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjY0LDkuMjA0NTQ1NDUgQzE3LjY0LDguNTY2MzYzNjQgMTcuNTgyNzI3Myw3Ljk1MjcyNzI3IDE3LjQ3NjM2MzYsNy4zNjM2MzYzNiBMOSw3LjM2MzYzNjM2IEw5LDEwLjg0NSBMMTMuODQzNjM2NCwxMC44NDUgQzEzLjYzNSwxMS45NyAxMy4wMDA5MDkxLDEyLjkyMzE4MTggMTIuMDQ3NzI3MywxMy41NjEzNjM2IEwxMi4wNDc3MjczLDE1LjgxOTU0NTUgTDE0Ljk1NjM2MzYsMTUuODE5NTQ1NSBDMTYuNjU4MTgxOCwxNC4yNTI3MjczIDE3LjY0LDExLjk0NTQ1NDUgMTcuNjQsOS4yMDQ1NDU0NSBaIiBpZD0iU2hhcGUiIGZpbGw9IiM0Mjg1RjQiPjwvcGF0aD4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTksMTggQzExLjQzLDE4IDEzLjQ2NzI3MjcsMTcuMTk0MDkwOSAxNC45NTYzNjM2LDE1LjgxOTU0NTUgTDEyLjA0NzcyNzMsMTMuNTYxMzYzNiBDMTEuMjQxODE4MiwxNC4xMDEzNjM2IDEwLjIxMDkwOTEsMTQuNDIwNDU0NSA5LDE0LjQyMDQ1NDUgQzYuNjU1OTA5MDksMTQuNDIwNDU0NSA0LjY3MTgxODE4LDEyLjgzNzI3MjcgMy45NjQwOTA5MSwxMC43MSBMMC45NTcyNzI3MjcsMTAuNzEgTDAuOTU3MjcyNzI3LDEzLjA0MTgxODIgQzIuNDM4MTgxODIsMTUuOTgzMTgxOCA1LjQ4MTgxODE4LDE4IDksMTggWiIgaWQ9IlNoYXBlIiBmaWxsPSIjMzRBODUzIj48L3BhdGg+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjk2NDA5MDkxLDEwLjcxIEMzLjc4NDA5MDkxLDEwLjE3IDMuNjgxODE4MTgsOS41OTMxODE4MiAzLjY4MTgxODE4LDkgQzMuNjgxODE4MTgsOC40MDY4MTgxOCAzLjc4NDA5MDkxLDcuODMgMy45NjQwOTA5MSw3LjI5IEwzLjk2NDA5MDkxLDQuOTU4MTgxODIgTDAuOTU3MjcyNzI3LDQuOTU4MTgxODIgQzAuMzQ3NzI3MjczLDYuMTczMTgxODIgMCw3LjU0NzcyNzI3IDAsOSBDMCwxMC40NTIyNzI3IDAuMzQ3NzI3MjczLDExLjgyNjgxODIgMC45NTcyNzI3MjcsMTMuMDQxODE4MiBMMy45NjQwOTA5MSwxMC43MSBaIiBpZD0iU2hhcGUiIGZpbGw9IiNGQkJDMDUiPjwvcGF0aD4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTksMy41Nzk1NDU0NSBDMTAuMzIxMzYzNiwzLjU3OTU0NTQ1IDExLjUwNzcyNzMsNC4wMzM2MzYzNiAxMi40NDA0NTQ1LDQuOTI1NDU0NTUgTDE1LjAyMTgxODIsMi4zNDQwOTA5MSBDMTMuNDYzMTgxOCwwLjg5MTgxODE4MiAxMS40MjU5MDkxLDAgOSwwIEM1LjQ4MTgxODE4LDAgMi40MzgxODE4MiwyLjAxNjgxODE4IDAuOTU3MjcyNzI3LDQuOTU4MTgxODIgTDMuOTY0MDkwOTEsNy4yOSBDNC42NzE4MTgxOCw1LjE2MjcyNzI3IDYuNjU1OTA5MDksMy41Nzk1NDU0NSA5LDMuNTc5NTQ1NDUgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRUE0MzM1Ij48L3BhdGg+ICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDAgMTggMCAxOCAxOCAwIDE4Ij48L3BvbHlnb24+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+");
}
.social-microsoft {
background-repeat: no-repeat;
background-size: 50%;
background-position-x: 50%;
background-position-y: 50%;
}
}
}
.auth-footer {
margin-bottom: 25px;
font-size: 13px;
color: #636c72;
text-align: center;
@media (min-height: 600px) {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
}
.auth-logo {
margin-top: 15px;
margin-bottom: 40px;
text-align: center;
font-weight: $font-weight-normal;
i {
font-size: 13px;
margin: 0 20px;
}
}
......@@ -7,27 +7,10 @@
@import 'variables';
@import 'theme-variables';
@import '../../node_modules/bootstrap/scss/bootstrap';
@import '../../node_modules/glyphicons-halflings/scss/glyphicons-halflings';
@import '../../node_modules/font-awesome/scss/font-awesome';
@import '../../node_modules/line-awesome/dist/css/line-awesome.css';
@import '../fonts/flaticon/flaticon';
@import '../../node_modules/animate.css/animate';
@import '../../node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox';
@import '../../node_modules/messenger/build/css/messenger.css';
@import '../../node_modules/messenger/build/css/messenger-theme-air.css';
@import '../../node_modules/nvd3/build/nv.d3.css';
@import '../../node_modules/rickshaw/rickshaw.css';
@import '../../node_modules/react-table/react-table.css';
@import '../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
@import '../../node_modules/jvectormap/jquery-jvectormap.css';
@import '../../node_modules/metrojs/release/MetroJs.Full/MetroJs.css';
@import '../../node_modules/react-sortable-tree/style.css';
@import '../../node_modules/react-toastify/dist/ReactToastify.css';
@import '../../node_modules/react-tagsinput/react-tagsinput.css';
@import 'mixins';
@import 'base';
@import 'auth';
@import 'overrides';
@import 'general';
@import 'utils';
......
{
"root": "build/",
"routes": {
"/**": "index.html"
}
}
\ No newline at end of file
This diff could not be displayed because it is too large.