Subs form (wip)

2017-12-06 11:04:34 +01:00 · 2017-12-06 11:04:34 +01:00 · df96b6e51e
commit df96b6e51e
parent 3d86418d22
14 changed files with 530 additions and 75 deletions
--- a/imports/ui/components/DistanceSlider/DistanceSlider.js
+++ b/imports/ui/components/DistanceSlider/DistanceSlider.js
@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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 };
+
+// https://github.com/react-component/slider/tree/master/examples
+
+class DistanceSlider extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 10,
+    };
+  }
+
+  onSliderChange = (value) => {
+    // console.log(value);
+    this.setState({
+      value,
+    });
+    this.props.onChange(value);
+  }
+
+  onAfterChange = (value) => {
+    // console.log(`After change: ${value}`); //eslint-disable-line
+    this.props.onChange(value);
+  }
+
+  render() {
+    return (
+
+      <div style={wrapperStyle}>
+        <p><Trans parent="span">¿A que distancia a la redonda quieres recibir notificaciones?</Trans></p>
+        <Slider min={5}
+                max={105}
+                value={this.state.value}
+                trackStyle={{ backgroundColor: 'green', height: 8 }}
+                railStyle={{ backgroundColor: 'orange', height: 8 }}
+                dotStyle={{ top: 0, marginLeft: -1, width: 2, height: 8 }}
+                marks={{
+                  10:  {style: {}, label: "10"},
+                  20:  {style: {}, label: "20"},
+                  30:  {style: {}, label: "30"},
+                  40:  {style: {}, label: "40"},
+                  50:  {style: {}, label: "50"},
+                  60:  {style: {}, label: "60"},
+                  70:  {style: {}, label: "70"},
+                  80:  {style: {}, label: "80"},
+                  90:  {style: {}, label: "90"},
+                  100: {style: {}, label: "100"}
+                }}
+                handleStyle={{
+                  borderColor: 'green',
+                  height: 20,
+                  width: 20,
+                  marginLeft: -10,
+                  marginTop: -6,
+                  /* backgroundColor: 'gray', */
+                }}
+                onAfterChange={this.onAfterChange}
+                onChange={this.onSliderChange}
+                defaultValue={10}
+                step={5}
+                handle={handle} />
+      </div>
+    )
+  }
+}
+
+export default translate([], { wait: true })(DistanceSlider);