@hipay/hipay-material-ui 2.1.0-RC1 → 2.2.0-RC1

package/es/HiSelect/HiSuggestSelect.js

@@ -41,7 +41,8 @@ class HiSuggestSelect extends React.PureComponent {
   static getDerivedStateFromProps(props, state) {
     if (JSON.stringify(props.options) !== JSON.stringify(state.options)) {
       return {
-        options: props.options
+        options: props.options,
+        suggestionFocusIndex: -1
       };
     }
 
@@ -51,6 +52,14 @@ class HiSuggestSelect extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    this.getInputElement = el => {
+      this.textInput = el;
+
+      if (this.props.inputRef) {
+        this.props.inputRef(this.textInput);
+      }
+    };
+
     this.handleSelect = (event, value) => {
       document.body.style.overflow = 'auto';
       this.props.onSelect(event, value);
@@ -88,67 +97,65 @@ class HiSuggestSelect extends React.PureComponent {
     };
 
     this.handleKeyDownSearch = event => {
-      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-        document.body.style.overflow = 'hidden'; // On récupère la div parent "overlay"
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
 
-        const overlay = findDOMNode(this.overlay);
-        setTimeout(() => {
-          // On recupère tous les items
-          const items = overlay.getElementsByTagName('li');
+        if (this.state.suggestionFocusIndex < this.props.options.length - 1) {
+          this.setState(prevState => ({
+            suggestionFocusIndex: prevState.suggestionFocusIndex + 1
+          }));
+        }
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
 
-          if (items.length) {
-            // On focus sur le premier
-            items[0].focus();
-          }
-        }, 1);
+        if (this.state.suggestionFocusIndex >= 0) {
+          this.setState(prevState => ({
+            suggestionFocusIndex: prevState.suggestionFocusIndex - 1
+          }));
+        }
+      } else if (event.key === 'Enter' && this.state.suggestionFocusIndex >= 0) {
+        event.preventDefault(); // Suggestion focused
+
+        this.handleSelect(event, this.state.options[this.state.suggestionFocusIndex]);
       } else if (event.key === 'Escape') {
         this.setState({
-          options: []
+          options: [],
+          suggestionFocusIndex: -1
         });
       }
     };
 
-    this.state = {
-      focused: false,
-      options: props.options
-    };
-    this.handleSelect = this.handleSelect.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.getInputElement = this.getInputElement.bind(this);
-  }
-
-  getInputElement(el) {
-    this.textInput = el;
-
-    if (this.props.inputRef) {
-      this.props.inputRef(this.textInput);
-    }
-  }
-
-  handleFocus(event) {
-    this.setState({
-      focused: true
-    });
-
-    if (this.props.onFocusInput) {
-      this.props.onFocusInput(event);
-    }
-  }
-
-  handleBlur(event) {
-    // Si on click sur un élément de HiInput, on garde le focus
-    // Par exemple sur l'icone reset
-    if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
+    this.handleFocus = event => {
       this.setState({
-        options: [],
-        focused: false
+        focused: true
       });
 
-      if (this.props.onBlurInput) {
-        this.props.onBlurInput(event);
+      if (this.props.onFocusInput) {
+        this.props.onFocusInput(event);
       }
-    }
+    };
+
+    this.handleBlur = event => {
+      // Si on click sur un élément de HiInput, on garde le focus
+      // Par exemple sur l'icone reset
+      if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
+        this.setState({
+          options: [],
+          focused: false,
+          suggestionFocusIndex: -1
+        });
+
+        if (this.props.onBlurInput) {
+          this.props.onBlurInput(event);
+        }
+      }
+    };
+
+    this.state = {
+      focused: false,
+      options: props.options,
+      suggestionFocusIndex: -1
+    };
   }
 
   render() {
@@ -168,7 +175,8 @@ class HiSuggestSelect extends React.PureComponent {
 
     const {
       focused,
-      options
+      options,
+      suggestionFocusIndex
     } = this.state;
     let optionsShown = options; // If loading
 
@@ -230,7 +238,8 @@ class HiSuggestSelect extends React.PureComponent {
       hideCheckbox: true,
       onSelect: this.handleSelect,
       translations: translations,
-      onKeyDown: this.handleKeyDown
+      onKeyDown: this.handleKeyDown,
+      suggestionFocusIndex: suggestionFocusIndex
     })))));
   }
 

package/es/HiSelectableList/HiSelectableList.js

@@ -8,9 +8,14 @@ import HiSelectableListItem from './HiSelectableListItem';
 import { getNextItemSelectable, foldAccents } from '../utils/helpers';
 import keycode from 'keycode';
 import LazyLoad, { forceCheck } from 'react-lazyload';
-export const styles = () => ({
+import classNames from 'classnames';
+export const styles = theme => ({
   root: {
     padding: 0
+  },
+  suggestionFocus: {
+    backgroundColor: theme.palette.action.hover,
+    fontWeight: theme.typography.fontWeightMedium
   }
 });
 /**
@@ -44,7 +49,7 @@ class HiSelectableList extends React.PureComponent {
       }
     };
 
-    this.buildRecursiveListItem = (item, level = 0) => {
+    this.buildRecursiveListItem = (item, index, level = 0) => {
       const _this$props = this.props,
             {
         checkedIcon,
@@ -57,9 +62,11 @@ class HiSelectableList extends React.PureComponent {
         selectedItemIdList,
         sort,
         onKeyDown,
-        onKeyUp
+        onKeyUp,
+        suggestionFocusIndex,
+        classes
       } = _this$props,
-            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
+            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp", "suggestionFocusIndex", "classes"]);
 
       if (sort && item.children) {
         item.children.sort(this.compareItem);
@@ -95,8 +102,13 @@ class HiSelectableList extends React.PureComponent {
         onKeyUp: onKeyUp,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
         ,
-        item: item
-      }, item)), item.children && item.children.length > 0 && item.children.filter(subItem => !(subItem.displayed === false)).map(subItem => this.buildRecursiveListItem(subItem, level + 1)));
+        item: item,
+        classes: {
+          listItem: classNames({
+            [classes.suggestionFocus]: index === suggestionFocusIndex
+          })
+        }
+      }, item)), item.children && item.children.length > 0 && item.children.filter(subItem => !(subItem.displayed === false)).map(subItem => this.buildRecursiveListItem(subItem, index, level + 1)));
 
       if (lazy) {
         return React.createElement(LazyLoad, {
@@ -188,7 +200,7 @@ class HiSelectableList extends React.PureComponent {
         this.el = el;
       }
     }, itemList.filter(item => !(item.displayed === false)) // don't remove if undefined
-    .map(item => this.buildRecursiveListItem(item)));
+    .map((item, index) => this.buildRecursiveListItem(item, index)));
   }
 
 }
@@ -277,6 +289,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   selectedItemIdList: PropTypes.array,
 
+  /**
+   * Index de l'item "focus"
+   */
+  suggestionFocusIndex: PropTypes.number,
+
   /**
    * Tri des éléments selon leur label
    */
@@ -294,5 +311,6 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 export default withStyles(styles, {
   hiComponent: true,
-  name: 'HmuiHiSelectableList'
+  name: 'HmuiHiSelectableList',
+  index: 51
 })(HiSelectableList);

package/es/HiSelectableList/HiSelectableListItem.js

@@ -179,6 +179,7 @@ class HiSelectableListItem extends React.PureComponent {
 
       if (key === 'space' || key === 'enter') {
         event.preventDefault();
+        event.stopPropagation();
 
         if (item) {
           this.props.onSelect(null, item);
@@ -330,7 +331,7 @@ class HiSelectableListItem extends React.PureComponent {
       indeterminateIcon: indeterminateIcon
     }), type === 'image' && img && React.createElement("img", {
       src: img,
-      alt: img,
+      alt: '',
       onError: e => {
         if (fallbackImage) {
           e.target.src = `${fallbackImage}`;

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.1.0RC1
+/** @license HiPay-Material-UI v2.2.0-RC1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.1.0RC1
+/** @license HiPay-Material-UI v2.2.0-RC1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@hipay/hipay-material-ui",
-  "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.1.0RC1",
+  "version": "2.2.0-RC1",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

package/HiDatePicker/Caption.spec.js

@@ -1,88 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _chai = require("chai");
-
-var _sinon = require("sinon");
-
-var _moment = _interopRequireDefault(require("react-day-picker/moment"));
-
-var _testUtils = require("../test-utils");
-
-var _Caption = _interopRequireDefault(require("./Caption"));
-
-describe('<Caption />', function () {
-  var shallow;
-  var mount;
-  var classes;
-  var wrapper;
-  var date = new Date();
-
-  var _ref = _react.default.createElement(_Caption.default, {
-    date: date,
-    localeUtils: _moment.default
-  });
-
-  before(function () {
-    shallow = (0, _testUtils.createShallow)({
-      untilSelector: 'Badge'
-    });
-    mount = (0, _testUtils.createMount)();
-    classes = (0, _testUtils.getClasses)(_ref);
-  });
-  after(function () {
-    mount.cleanUp();
-  });
-
-  var _ref2 = _react.default.createElement(_Caption.default, {
-    date: date,
-    localeUtils: _moment.default
-  });
-
-  describe('text with leftIcon', function () {
-    before(function () {
-      wrapper = shallow(_ref2);
-    });
-    it('should render a div containing two spans', function () {
-      _chai.assert.strictEqual(wrapper.name(), 'div');
-
-      _chai.assert.strictEqual(wrapper.childAt(0).is('span'), true, 'should be a span');
-
-      _chai.assert.strictEqual(wrapper.childAt(2).is('span'), true, 'should be a span');
-    });
-    it('should merge user classes & spread custom props to the root node', function () {
-      _chai.assert.strictEqual(wrapper.hasClass(classes.caption), true);
-    });
-  });
-  describe('mount', function () {
-    it('should call onDelete when clicking', function () {
-      var handleClickMonth = (0, _sinon.spy)();
-      var handleClickYear = (0, _sinon.spy)();
-      wrapper = mount(_react.default.createElement(_Caption.default, {
-        date: date,
-        localeUtils: _moment.default,
-        onMonthClick: handleClickMonth,
-        onYearClick: handleClickYear
-      }));
-
-      _chai.assert.strictEqual(wrapper.find('span').length, 2, 'should have 2 spans');
-
-      wrapper.find('span').at(0).simulate('click');
-
-      _chai.assert.strictEqual(handleClickMonth.callCount, 1, 'should have been called once handleClickMonth');
-
-      _chai.assert.strictEqual(handleClickYear.callCount, 0, 'should not have been called handleClickYear');
-
-      wrapper.find('span').at(1).simulate('click');
-
-      _chai.assert.strictEqual(handleClickMonth.callCount, 1, 'should not have been called twice handleClickMonth');
-
-      _chai.assert.strictEqual(handleClickYear.callCount, 1, 'should have been called once handleClickYear');
-
-      wrapper.unmount();
-    });
-  });
-});

package/HiDatePicker/ListPicker.spec.js

@@ -1,67 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _chai = require("chai");
-
-var _sinon = require("sinon");
-
-var _Menu = require("@material-ui/core/Menu");
-
-var _index = require("../test-utils/index");
-
-var _ListPicker = _interopRequireDefault(require("./ListPicker"));
-
-describe('<ListPicker />', function () {
-  var shallow;
-  var mount;
-  var itemList;
-  before(function () {
-    shallow = (0, _index.createShallow)({
-      dive: true
-    });
-    mount = (0, _index.createMount)();
-    itemList = [1, 2, 3, 4];
-  });
-  after(function () {
-    mount.cleanUp();
-  });
-  describe('shallow', function () {
-    it('renders a Scrollable MenuList', function () {
-      var handlerClick = (0, _sinon.spy)();
-      var wrapper = shallow(_react.default.createElement(_ListPicker.default, {
-        itemList: itemList,
-        onItemClick: handlerClick,
-        selectedItem: 2,
-        initAtMiddleScroll: true
-      }));
-
-      _chai.assert.strictEqual(wrapper.name(), 'Scrollbars', 'should render a Scrollbars container');
-
-      _chai.assert.strictEqual(wrapper.dive().find(_Menu.MenuList).length, 1, 'should include a MenuList');
-
-      _chai.assert.strictEqual(wrapper.dive().find(_Menu.MenuItem).length, 4, 'should include 4 MenuItem'); // Click on [4] item
-
-
-      wrapper.dive().find(_Menu.MenuItem).at(3).props().onClick();
-
-      _chai.assert.strictEqual(handlerClick.calledOnce, true, 'should call onChange callback once');
-
-      _chai.assert.strictEqual(handlerClick.calledWith(4), true, 'should call onChange callback with selected item');
-    });
-  });
-  describe('mount', function () {
-    it('should mount', function () {
-      var wrapper = mount(_react.default.createElement(_ListPicker.default, {
-        itemList: itemList,
-        onItemClick: function onItemClick() {},
-        selectedItem: 2,
-        initAtMiddleScroll: true
-      }));
-
-      _chai.assert.strictEqual(wrapper.name(), 'WithStyles(ListPicker)');
-    });
-  });
-});

package/HiDatePicker/NavBar.spec.js

@@ -1,55 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _chai = require("chai");
-
-var _sinon = require("sinon");
-
-var _moment = _interopRequireDefault(require("react-day-picker/moment"));
-
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-
-var _index = require("../test-utils/index");
-
-var _NavBar = _interopRequireDefault(require("./NavBar"));
-
-describe('<NavBar />', function () {
-  var shallow;
-  before(function () {
-    shallow = (0, _index.createShallow)({
-      dive: true
-    });
-  });
-  it('renders a Scrollable MenuList', function () {
-    var handlerNextClick = (0, _sinon.spy)();
-    var handlerPreviousClick = (0, _sinon.spy)();
-    var handlerClockClick = (0, _sinon.spy)();
-    var nextMonth = new Date(2018, 3, 1);
-    var prevMonth = new Date(2018, 1, 1);
-    var wrapper = shallow(_react.default.createElement(_NavBar.default, {
-      nextMonth: nextMonth,
-      previousMonth: prevMonth,
-      onNextClick: handlerNextClick,
-      onPreviousClick: handlerPreviousClick,
-      onClockClick: handlerClockClick,
-      showClockButton: true,
-      localeUtils: _moment.default
-    }));
-
-    _chai.assert.strictEqual(wrapper.find(_IconButton.default).length, 3, 'should include 3 IconButtons'); // Click on [4] item
-
-
-    wrapper.find(_IconButton.default).at(0).props().onClick();
-    wrapper.find(_IconButton.default).at(1).props().onClick();
-    wrapper.find(_IconButton.default).at(2).props().onClick();
-
-    _chai.assert.strictEqual(handlerPreviousClick.calledOnce, true, 'should call onPreviousClick callback once');
-
-    _chai.assert.strictEqual(handlerNextClick.calledOnce, true, 'should call onNextClick callback once');
-
-    _chai.assert.strictEqual(handlerClockClick.calledOnce, true, 'should call onClockClick callback once');
-  });
-});

package/HiDatePicker/Overlays/MonthPickerOverlay.spec.js

@@ -1,74 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _chai = require("chai");
-
-var _sinon = require("sinon");
-
-var _moment = _interopRequireDefault(require("react-day-picker/moment"));
-
-var _index = require("../../test-utils/index");
-
-var _MonthPickerOverlay = _interopRequireDefault(require("./MonthPickerOverlay"));
-
-var _ListPicker = _interopRequireDefault(require("../ListPicker"));
-
-/* eslint-disable */
-var _ref = _react.default.createElement("span", null, "children");
-
-var _ref2 = _react.default.createElement("span", null, "children");
-
-describe('<MonthPickerOverlay />', function () {
-  var shallow;
-  before(function () {
-    shallow = (0, _index.createShallow)({
-      dive: true
-    });
-  });
-  it('renders a functional month ListPicker', function () {
-    var handlerChange = (0, _sinon.spy)();
-    var aprilLabel = 'April';
-    var januaryDate = new Date(1992, 0, 9);
-    var aprilDate = new Date(1992, 3, 9);
-    var wrapper = shallow(_react.default.createElement(_MonthPickerOverlay.default, {
-      value: januaryDate,
-      onChange: handlerChange,
-      localeUtils: _moment.default
-    }, _ref));
-
-    _chai.assert.strictEqual(wrapper.name(), 'CustomOverlayLayout', 'should render a CustomOverlayLayout');
-
-    _chai.assert.strictEqual(wrapper.dive().find(_ListPicker.default).length, 1, 'should include a ListPicker');
-
-    wrapper.dive().find(_ListPicker.default).props().onItemClick(aprilLabel);
-
-    _chai.assert.strictEqual(handlerChange.calledOnce, true, 'should call onChange callback once');
-
-    _chai.assert.strictEqual(handlerChange.calledWith(aprilDate), true, 'should call onChange callback with updated month');
-  });
-  it('check months', function () {
-    var handlerChange = (0, _sinon.spy)();
-    var januaryDate = new Date(1992, 0, 9);
-    var localeUtils = {
-      getMonths: function getMonths() {
-        return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'Other'];
-      }
-    };
-    var wrapper = shallow(_react.default.createElement(_MonthPickerOverlay.default, {
-      value: januaryDate,
-      onChange: handlerChange,
-      localeUtils: localeUtils
-    }, _ref2));
-
-    _chai.assert.strictEqual(wrapper.name(), 'CustomOverlayLayout', 'should render a CustomOverlayLayout');
-
-    _chai.assert.strictEqual(wrapper.dive().find(_ListPicker.default).length, 1, 'should include a ListPicker');
-
-    wrapper.dive().find(_ListPicker.default).props().onItemClick('Other');
-
-    _chai.assert.strictEqual(handlerChange.callCount, 0, 'should not call onChange with month index >= 12');
-  });
-});

package/HiDatePicker/Overlays/Overlay.spec.js

@@ -1,34 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _chai = require("chai");
-
-var _index = require("../../test-utils/index");
-
-var _Overlay = _interopRequireDefault(require("./Overlay"));
-
-/* eslint-disable */
-var _ref = _react.default.createElement(_Overlay.default, null);
-
-var _ref2 = _react.default.createElement(_Overlay.default, null, _react.default.createElement("span", null, "children"));
-
-describe('<Overlay />', function () {
-  var shallow;
-  var classes;
-  before(function () {
-    shallow = (0, _index.createShallow)({
-      dive: true
-    });
-    classes = (0, _index.getClasses)(_ref);
-  });
-  it('renders a div containing a DayPickerInput', function () {
-    var wrapper = shallow(_ref2);
-
-    _chai.assert.strictEqual(wrapper.dive().name(), 'Paper', 'should render a Paper');
-
-    _chai.assert.strictEqual(wrapper.dive().hasClass(classes.paper), true, 'should render a Paper with paper class');
-  });
-});

package/HiDatePicker/Overlays/TimePickerOverlay.spec.js

@@ -1,71 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _chai = require("chai");
-
-var _sinon = require("sinon");
-
-var _index = require("../../test-utils/index");
-
-var _TimePickerOverlay = _interopRequireDefault(require("./TimePickerOverlay"));
-
-var _ListPicker = _interopRequireDefault(require("../ListPicker"));
-
-/* eslint-disable */
-var _ref = _react.default.createElement("span", null, "children");
-
-var _ref2 = _react.default.createElement("span", null, "children");
-
-describe('<TimePickerOverlay />', function () {
-  var shallow;
-  before(function () {
-    shallow = (0, _index.createShallow)({
-      dive: true
-    });
-  });
-  it('renders a functional hour & minute ListPicker', function () {
-    var handlerChange = (0, _sinon.spy)();
-    var handlerCalendarClick = (0, _sinon.spy)();
-    var hour = 16;
-    var minute = 17;
-    var date = new Date(1992, 3, 9, 0, 0);
-    var dateHour = new Date(1992, 3, 9, hour, 0);
-    var dateMinute = new Date(1992, 3, 9, 0, minute);
-    var wrapper = shallow(_react.default.createElement(_TimePickerOverlay.default, {
-      value: date,
-      onChange: handlerChange,
-      onCalendarClick: handlerCalendarClick
-    }, _ref));
-
-    _chai.assert.strictEqual(wrapper.dive().name(), 'CustomOverlayLayout', 'should render a CustomOverlayLayout');
-
-    _chai.assert.strictEqual(wrapper.dive().find(_ListPicker.default).length, 2, 'should include 2 ListPicker');
-
-    wrapper.dive().find(_ListPicker.default).first().props().onItemClick(hour);
-    wrapper.dive().find(_ListPicker.default).at(1).props().onItemClick(minute);
-
-    _chai.assert.strictEqual(handlerChange.calledTwice, true, 'should call onChange callback twice');
-
-    _chai.assert.strictEqual(handlerChange.calledWith(dateHour), true, 'should call onChange callback with updated hours');
-
-    _chai.assert.strictEqual(handlerChange.calledWith(dateMinute), true, 'should call onChange callback with updated minutes');
-  });
-  it('renders a functional hour & minute ListPicker without callbacks', function () {
-    var hour = 16;
-    var minute = 17;
-    var date = new Date(1992, 3, 9, 0, 0);
-    var wrapper = shallow(_react.default.createElement(_TimePickerOverlay.default, {
-      value: date
-    }, _ref2));
-
-    _chai.assert.strictEqual(wrapper.dive().name(), 'CustomOverlayLayout', 'should render a CustomOverlayLayout');
-
-    _chai.assert.strictEqual(wrapper.dive().find(_ListPicker.default).length, 2, 'should include 2 ListPicker');
-
-    wrapper.dive().find(_ListPicker.default).first().props().onItemClick(hour);
-    wrapper.dive().find(_ListPicker.default).at(1).props().onItemClick(minute);
-  });
-});