From ecc3e33ad7a4c81ba9a9d6cf79ca17ab1b3b42d7 Mon Sep 17 00:00:00 2001
From: vjrj <vjrj@ourproject.org>
Date: Mon, 4 Dec 2017 19:21:08 +0100
Subject: [PATCH] Added sandbox

---
 imports/ui/layouts/App/App.js       |  2 +
 imports/ui/pages/Sandbox/Sandbox.js | 58 +++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 imports/ui/pages/Sandbox/Sandbox.js

diff --git a/imports/ui/layouts/App/App.js b/imports/ui/layouts/App/App.js
index b37787d..00d7bd1 100644
--- a/imports/ui/layouts/App/App.js
+++ b/imports/ui/layouts/App/App.js
@@ -40,6 +40,7 @@ import Blaze from 'meteor/gadicc:blaze-react-component';
 import createHistory from 'history/createBrowserHistory';
 import { check } from 'meteor/check';
 import FiresMap from  '../../pages/FiresMap/FiresMap';
+import Sandbox from  '../../pages/Sandbox/Sandbox';
 
 import './App.scss';
 
@@ -68,6 +69,7 @@ const App = props => (
           <Public path="/signup" component={Signup} {...props} />
           <Public path="/login" component={Login} {...props} />
           <Route path="/logout" component={Logout} {...props} />
+          <Route path="/sandbox" component={Sandbox} {...props} />
           <Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
           <Route name="recover-password" path="/recover-password" component={RecoverPassword} />
           <Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
diff --git a/imports/ui/pages/Sandbox/Sandbox.js b/imports/ui/pages/Sandbox/Sandbox.js
new file mode 100644
index 0000000..3196cff
--- /dev/null
+++ b/imports/ui/pages/Sandbox/Sandbox.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+import { Trans, translate } from 'react-i18next';
+import Slider, { Range } from 'rc-slider';
+import Tooltip from 'rc-tooltip';
+// We can just import Slider or Range to reduce bundle size
+// import Slider from 'rc-slider/lib/Slider';
+// import Range from 'rc-slider/lib/Range';
+import 'rc-slider/assets/index.css';
+
+// https://www.npmjs.com/package/rc-slider
+const createSliderWithTooltip = Slider.createSliderWithTooltip;
+const Handle = Slider.Handle;
+
+const handle = (props) => {
+  const { value, dragging, index, ...restProps } = props;
+  return (
+    <Tooltip
+      prefixCls="rc-slider-tooltip"
+      overlay={value}
+      visible={dragging}
+      placement="top"
+      key={index}
+    >
+      <Handle value={value} {...restProps} />
+    </Tooltip>
+  );
+};
+const wrapperStyle = { width: 400, margin: 50 };
+
+const Sandbox = props => (
+  <div style={wrapperStyle}>
+    <Slider min={5}
+            max={100}
+            trackStyle={{ backgroundColor: 'green', height: 8 }}
+            railStyle={{ backgroundColor: 'orange', height: 8 }}
+            handleStyle={{
+              borderColor: 'green',
+              height: 20,
+              width: 20,
+              marginLeft: -14,
+              marginTop: -6,
+              /* backgroundColor: 'gray', */
+            }}
+            defaultValue={10}
+            step={5}
+            handle={handle} />
+  </div>
+);
+
+Sandbox.defaultProps = {
+};
+
+Sandbox.propTypes = {
+};
+
+export default translate([], { wait: true })(Sandbox);