@panneau/element-range 1.0.0-alpha.2 → 1.0.0-alpha.205

package/assets/css/styles.css

@@ -1 +1 @@
-.panneau-element-range-container{cursor:pointer}
+.panneau-element-range-container{width:350px}

package/es/index.js

@@ -1,26 +1,50 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React, { useCallback } from 'react';
 import classNames from 'classnames';
-import React from 'react';
 import PropTypes from 'prop-types';
 
 var styles = {"container":"panneau-element-range-container"};
 
 var propTypes = {
+  title: PropTypes.string,
+  max: PropTypes.number,
+  value: PropTypes.value,
+  onChange: PropTypes.func.isRequired,
   className: PropTypes.string
 };
 var defaultProps = {
+  title: null,
+  value: 50,
+  max: 100,
   className: null
 };
 
 var Range = function Range(_ref) {
-  var className = _ref.className;
-  return /*#__PURE__*/React.createElement("input", {
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
-    type: "range"
-  });
+  var title = _ref.title,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      max = _ref.max,
+      className = _ref.className;
+  var onValueChange = useCallback(function (e) {
+    onChange(e.target.value);
+  }, [max]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement("label", {
+    className: styles.label,
+    htmlFor: "range"
+  }, title)), /*#__PURE__*/React.createElement("input", {
+    className: "form-range",
+    type: "range",
+    id: "range",
+    min: "0",
+    max: max,
+    onChange: onValueChange,
+    value: value
+  }));
 };
 
 Range.propTypes = propTypes;
 Range.defaultProps = defaultProps;
 
-export default Range;
+export { Range as default };

package/lib/index.js

@@ -1,35 +1,61 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var classNames = require('classnames');
 var React = require('react');
+var classNames = require('classnames');
 var PropTypes = require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var styles = {"container":"panneau-element-range-container"};
 
 var propTypes = {
-  className: PropTypes__default['default'].string
+  title: PropTypes__default["default"].string,
+  max: PropTypes__default["default"].number,
+  value: PropTypes__default["default"].value,
+  onChange: PropTypes__default["default"].func.isRequired,
+  className: PropTypes__default["default"].string
 };
 var defaultProps = {
+  title: null,
+  value: 50,
+  max: 100,
   className: null
 };
 
 var Range = function Range(_ref) {
-  var className = _ref.className;
-  return /*#__PURE__*/React__default['default'].createElement("input", {
-    className: classNames__default['default']([styles.container, _defineProperty__default['default']({}, className, className !== null)]),
-    type: "range"
-  });
+  var title = _ref.title,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      max = _ref.max,
+      className = _ref.className;
+  var onValueChange = React.useCallback(function (e) {
+    onChange(e.target.value);
+  }, [max]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
+  }, /*#__PURE__*/React__default["default"].createElement("h4", null, /*#__PURE__*/React__default["default"].createElement("label", {
+    className: styles.label,
+    htmlFor: "range"
+  }, title)), /*#__PURE__*/React__default["default"].createElement("input", {
+    className: "form-range",
+    type: "range",
+    id: "range",
+    min: "0",
+    max: max,
+    onChange: onValueChange,
+    value: value
+  }));
 };
 
 Range.propTypes = propTypes;
 Range.defaultProps = defaultProps;
 
-module.exports = Range;
+exports["default"] = Range;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/element-range",
-    "version": "1.0.0-alpha.2",
+    "version": "1.0.0-alpha.205",
     "description": "Range element",
     "keywords": [
         "javascript"
@@ -53,7 +53,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@panneau/core": "^1.0.0-alpha.0",
+        "@panneau/core": "^1.0.0-alpha.205",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "react-intl": "^5.15.8"
@@ -61,5 +61,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "93990b3269d135d000b8d6277e3314b6ef19f5d7"
+    "gitHead": "341761a7c70095fa598d4c43c90270d2c71b891b"
 }