intelicoreact 0.2.25 → 0.2.28

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -69,6 +69,12 @@ var Dropdown = function Dropdown(_ref) {
 
   var dropdownRef = (0, _react.useRef)(null);
   var dropdownListRef = (0, _react.useRef)(null);
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isFocusedByClick = _useState6[0],
+      setIsFocusedByClick = _useState6[1];
+
   if (!options) return null;
   var filteredGroups = options.filter(function (item) {
     var _item$items;
@@ -210,6 +216,8 @@ var Dropdown = function Dropdown(_ref) {
     };
   }, [value]);
   (0, _react.useEffect)(function () {
+    if (!isOpen) setIsFocusedByClick(false);
+
     if (scrollReactionObj && (0, _typeof2.default)(scrollReactionObj) === 'object' && isOpen && dropdownListRef && dropdownListRef.current) {
       dropdownListRef.current.addEventListener('scroll', doScrollCallback);
     }
@@ -218,6 +226,17 @@ var Dropdown = function Dropdown(_ref) {
       if (scrollReactionObj && (0, _typeof2.default)(scrollReactionObj) === 'object') removeEventListener('scroll', doScrollCallback);
     };
   }, [isOpen, dropdownListRef]);
+
+  var onKeyDown = function onKeyDown(e) {
+    if (![9, 13].includes(e.keyCode)) return false;
+    setIsOpen(false);
+  };
+
+  var onKeyUp = function onKeyUp(e) {
+    if (![9, 13].includes(e.keyCode)) return false;
+    setIsOpen(true);
+  };
+
   var postfixText = selectedLabel && ((_filteredOptions$find = filteredOptions.find(function (option) {
     return option.value === value;
   })) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.postfix) || null;
@@ -226,18 +245,20 @@ var Dropdown = function Dropdown(_ref) {
       disabled: disabled
     }),
     ref: dropdownRef,
-    onKeyDown: function onKeyDown(e) {
-      if (!['Tab', 'Enter'].includes(e.code)) return false;
-      setIsOpen(false);
-    },
-    onKeyUp: function onKeyUp(e) {
-      if (!['Tab', 'Enter'].includes(e.code)) return false;
-      setIsOpen(true);
-    }
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "".concat(RC, "__trigger input__wrap ").concat(isOpen ? 'input__wrap--focus' : '', " ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
     onClick: function onClick() {
       return !isSearchable ? setIsOpen(!isOpen) : null;
+    },
+    onMouseDown: function onMouseDown() {
+      return setIsFocusedByClick(true);
+    },
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onFocus: function onFocus() {
+      return !isFocusedByClick ? setIsOpen(true) : null;
     }
   }, isSearchable ? /*#__PURE__*/_react.default.createElement("input", {
     className: "".concat(RC, "__input"),

package/dist/Atomic/FormElements/RangeSlider/RangeSlider.js

@@ -0,0 +1,376 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RangeSlider;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactFeather = require("react-feather");
+
+var _Input = _interopRequireDefault(require("../Input/Input"));
+
+require("./RangeSlider.scss");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// require('./lib/customEventListener.js');
+function RangeSlider(_ref) {
+  var _value$from, _value$to;
+
+  var _ref$min = _ref.min,
+      min = _ref$min === void 0 ? 0 : _ref$min,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 100 : _ref$max,
+      _ref$minRange = _ref.minRange,
+      minRange = _ref$minRange === void 0 ? 0 : _ref$minRange,
+      _ref$precision = _ref.precision,
+      precision = _ref$precision === void 0 ? 0 : _ref$precision,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? {
+    from: min,
+    to: max
+  } : _ref$value,
+      _ref$unit = _ref.unit,
+      unit = _ref$unit === void 0 ? '' : _ref$unit,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? '' : _ref$label,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+  var trackRef = (0, _react.useRef)(0);
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      trackWidth = _useState2[0],
+      setTrackWidth = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      trackPosition = _useState4[0],
+      setTrackPosition = _useState4[1];
+
+  var fromTriggerRef = (0, _react.useRef)(0);
+  var toTriggerRef = (0, _react.useRef)(0);
+
+  var _useState5 = (0, _react.useState)((_value$from = value === null || value === void 0 ? void 0 : value.from) !== null && _value$from !== void 0 ? _value$from : min),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      from = _useState6[0],
+      setFromValue = _useState6[1];
+
+  var setFrom = function setFrom(v) {
+    return setFromValue(prepareValue(v));
+  };
+
+  var _useState7 = (0, _react.useState)((_value$to = value === null || value === void 0 ? void 0 : value.to) !== null && _value$to !== void 0 ? _value$to : max),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      to = _useState8[0],
+      setToValue = _useState8[1];
+
+  var setTo = function setTo(v) {
+    return setToValue(prepareValue(v));
+  };
+
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      tempValue = _useState10[0],
+      setTempValue = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(null),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      focusedType = _useState12[0],
+      setFocusedType = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(null),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      movingController = _useState14[0],
+      setMovingController = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(null),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      movingTrigger = _useState16[0],
+      setMovingTrigger = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(null),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      movingTriggerType = _useState18[0],
+      setMovingTriggerType = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(false),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      isTriggerMoved = _useState20[0],
+      setIsTriggerMoved = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(0),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      pointsPerPx = _useState22[0],
+      setPointsPerPx = _useState22[1];
+
+  var countPointsPerPx = function countPointsPerPx(width) {
+    return (max - min) / width;
+  };
+
+  var _useState23 = (0, _react.useState)(0),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      extremumRange = _useState24[0],
+      setExtremumRange = _useState24[1];
+
+  var _useState25 = (0, _react.useState)(0),
+      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+      extremumWidth = _useState26[0],
+      setExtremumWidth = _useState26[1];
+
+  var resetRange = function resetRange() {
+    setFrom(min);
+    setTo(max);
+  };
+
+  var getRangeWidth = function getRangeWidth() {
+    return (to - from) * 100 / (max - min);
+  };
+
+  var getRangeOffset = function getRangeOffset() {
+    return (from - min) * 100 / (max - min);
+  };
+
+  var getXByPoints = function getXByPoints(pts) {
+    return pts / pointsPerPx + trackPosition;
+  };
+
+  var getPointsByX = function getPointsByX(x) {
+    return (x - trackPosition) * pointsPerPx + min;
+  };
+
+  var prepareValue = function prepareValue(value) {
+    return parseInt(parseFloat(value) * Math.pow(10, precision)) / Math.pow(10, precision);
+  };
+
+  var onRangeChange = function onRangeChange(type, value) {
+    var validate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    if (validate) value = prepareValue(value);
+    if (isNaN(value)) value = 0;
+
+    switch (type) {
+      case 'from':
+        if (value < min && validate) setFrom(min); // else if (value > max - extremumRange && extremumRange > minRange && validate) setFrom(max - extremumRange);
+        // else if (value > to - extremumRange && extremumRange > minRange && validate) setFrom(to - extremumRange);
+        else if (value > to - minRange && minRange > extremumRange && validate) setFrom(to - minRange);else setFrom(value);
+        break;
+
+      case 'to':
+        if (value > max && validate) setTo(max); // else if (value < min + extremumRange && extremumRange > minRange && validate) setTo(min+ + extremumRange);
+        // else if (value < from + extremumRange && extremumRange > minRange && validate) setTo(from + extremumRange);
+        else if (value < from + minRange && minRange > extremumRange && validate) setTo(from + minRange);else setTo(value);
+        break;
+    }
+  };
+
+  var onTriggerMouseDown = function onTriggerMouseDown(e, type) {
+    setMovingTrigger(e.target);
+    setMovingTriggerType(type);
+  };
+
+  var onTriggerMove = function onTriggerMove(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isTriggerMoved) setIsTriggerMoved(true);
+    if (!movingTrigger) return false;
+    var x = e.clientX;
+    if (x < trackPosition || x > trackPosition + trackWidth) return false;
+
+    var _movingTrigger$getBou = movingTrigger === null || movingTrigger === void 0 ? void 0 : movingTrigger.getBoundingClientRect(),
+        _movingTrigger$getBou2 = _movingTrigger$getBou.width,
+        triggerWidth = _movingTrigger$getBou2 === void 0 ? 16 : _movingTrigger$getBou2;
+
+    x = movingTriggerType === 'from' ? x - triggerWidth / 2 : x + triggerWidth / 2;
+    onRangeChange(movingTriggerType, getPointsByX(x));
+  };
+
+  var onRangeInputFocus = function onRangeInputFocus(e, type) {
+    setFocusedType(type);
+    setTempValue(type === 'from' ? from : to);
+  };
+
+  var onRangeInputBlur = function onRangeInputBlur(e, type) {
+    onRangeChange(type, parseFloat(tempValue));
+    setTempValue(null);
+    setFocusedType(null);
+  };
+
+  (0, _react.useLayoutEffect)(function () {
+    var _trackRef$current;
+
+    var _trackRef$current$get = trackRef === null || trackRef === void 0 ? void 0 : (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.getBoundingClientRect(),
+        width = _trackRef$current$get.width,
+        x = _trackRef$current$get.x;
+
+    setPointsPerPx(countPointsPerPx(width));
+    setTrackWidth(width);
+    setTrackPosition(x);
+  }, [trackRef]);
+  (0, _react.useLayoutEffect)(function () {
+    var _fromTriggerRef$curre, _toTriggerRef$current;
+
+    var _ref2 = (fromTriggerRef === null || fromTriggerRef === void 0 ? void 0 : (_fromTriggerRef$curre = fromTriggerRef.current) === null || _fromTriggerRef$curre === void 0 ? void 0 : _fromTriggerRef$curre.getBoundingClientRect()) || {},
+        fromTriggerWidth = _ref2.width;
+
+    var _ref3 = (toTriggerRef === null || toTriggerRef === void 0 ? void 0 : (_toTriggerRef$current = toTriggerRef.current) === null || _toTriggerRef$current === void 0 ? void 0 : _toTriggerRef$current.getBoundingClientRect()) || {},
+        toTriggerWidth = _ref3.width;
+
+    setExtremumRange((fromTriggerWidth + toTriggerWidth) * pointsPerPx);
+    setExtremumWidth(fromTriggerWidth + toTriggerWidth);
+  }, [fromTriggerRef, toTriggerRef, pointsPerPx]);
+  (0, _react.useEffect)(function () {
+    var _value$from2, _value$to2;
+
+    if (extremumRange === 0) return null;
+    onRangeChange('from', (_value$from2 = value === null || value === void 0 ? void 0 : value.from) !== null && _value$from2 !== void 0 ? _value$from2 : max);
+    onRangeChange('to', (_value$to2 = value === null || value === void 0 ? void 0 : value.to) !== null && _value$to2 !== void 0 ? _value$to2 : min);
+  }, [extremumRange]); // MouseUp Event Controller
+
+  (0, _react.useEffect)(function () {
+    var resetMovingTrigger = function resetMovingTrigger() {
+      setMovingTrigger(null);
+      setMovingTriggerType(null);
+    };
+
+    document.addEventListener('mouseup', resetMovingTrigger);
+    return function () {
+      document.removeEventListener('mouseup', resetMovingTrigger);
+    };
+  }, []); // MouseMove Event Controller
+
+  (0, _react.useEffect)(function () {
+    var _body$classList;
+
+    if (!movingTrigger && isTriggerMoved) {
+      movingController === null || movingController === void 0 ? void 0 : movingController.abort();
+      setIsTriggerMoved(false);
+      setMovingController(null);
+    } else if (movingTrigger && !isTriggerMoved) {
+      setMovingController(new AbortController());
+    }
+
+    var body = document.getElementsByTagName('body')[0];
+    (_body$classList = body.classList) === null || _body$classList === void 0 ? void 0 : _body$classList[movingTrigger ? 'add' : 'remove']('moving-cursor');
+  }, [movingTrigger]);
+  (0, _react.useEffect)(function () {
+    if (movingController) {
+      document.addEventListener('mousemove', onTriggerMove, {
+        signal: movingController === null || movingController === void 0 ? void 0 : movingController.signal
+      });
+    }
+  }, [movingController]);
+  (0, _react.useEffect)(function () {
+    return onChange({
+      from: from,
+      to: to
+    });
+  }, [from, to]);
+
+  var renderLabel = function renderLabel() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__header__label"
+    }, label);
+  };
+
+  var renderSelectedRange = function renderSelectedRange() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__header__selected-range"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__header__selected-range--text"
+    }, "from ", from, " to ", to, unit), /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__header__selected-range--reset",
+      onClick: resetRange
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, null)));
+  };
+
+  var renderHeader = function renderHeader() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__header"
+    }, renderLabel(), min !== from || max !== to ? renderSelectedRange() : null);
+  };
+
+  var renderInputs = function renderInputs() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__inputs"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__inputs--from"
+    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+      value: focusedType === 'from' ? tempValue : from.toString(),
+      onFocus: function onFocus(e) {
+        return onRangeInputFocus(e, 'from');
+      },
+      onBlur: function onBlur(e) {
+        return onRangeInputBlur(e, 'from');
+      },
+      onChange: setTempValue
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__inputs__input"
+    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+      value: focusedType === 'to' ? tempValue : to.toString(),
+      onFocus: function onFocus(e) {
+        return onRangeInputFocus(e, 'to');
+      },
+      onBlur: function onBlur(e) {
+        return onRangeInputBlur(e, 'to');
+      },
+      onChange: setTempValue
+    })));
+  };
+
+  var renderTrackRange = function renderTrackRange() {
+    var style = {
+      width: getRangeWidth().toString().concat('%'),
+      left: getRangeOffset().toString().concat('%'),
+      minWidth: extremumWidth.toString().concat('px')
+    };
+    var extremumWidthPercent = extremumWidth * 100 / trackWidth;
+
+    if (getRangeOffset() + extremumWidthPercent >= 100) {
+      style.left = (100 - extremumWidthPercent).toString().concat('%');
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__track__range",
+      style: style
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: fromTriggerRef,
+      className: "range-slider__track__range--trigger",
+      onMouseDown: function onMouseDown(e) {
+        return onTriggerMouseDown(e, 'from');
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      ref: toTriggerRef,
+      className: "range-slider__track__range--trigger",
+      onMouseDown: function onMouseDown(e) {
+        return onTriggerMouseDown(e, 'to');
+      }
+    }));
+  };
+
+  var renderTrack = function renderTrack() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__track",
+      ref: trackRef
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__track__line"
+    }), renderTrackRange());
+  };
+
+  var render = function render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider"
+    }, renderHeader(), renderInputs(), renderTrack());
+  };
+
+  return render();
+}

package/dist/Atomic/FormElements/RangeSlider/RangeSlider.scss

@@ -0,0 +1,146 @@
+@import url("https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
+
+.range-slider {
+  width: 100%;
+  max-width: 270px;
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 2px;
+
+    &__label {
+      font-family: "Sarabun";
+      font-style: normal;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 18px;
+      letter-spacing: 0.2px;
+      color: #757f8c;
+    }
+
+    &__selected-range {
+      display: flex;
+      align-items: center;
+      padding: 0px 4px 0px 8px;
+      background: #eaf2ff;
+      border-radius: 16px;
+
+      &--text {
+        font-family: "Sarabun";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 18px;
+        letter-spacing: 0.2px;
+        color: #3b414b;
+        margin-right: 2px;
+      }
+
+      &--reset {
+        display: flex;
+        align-items: center;
+        color: #9aa0b9;
+        border-left: 1px solid #cde1ff;
+        cursor: pointer;
+
+        svg {
+          height: 16px;
+          width: 16px;
+        }
+      }
+    }
+  }
+
+  &__inputs {
+    display: flex;
+
+    &--from {
+      margin-right: 4px;
+    }
+
+    &--to {
+      margin-left: 4px;
+    }
+
+    .input__wrap {
+      height: auto;
+      max-height: 40px;
+      box-sizing: border-box;
+
+      padding: 9px 16px;
+      background: #ffffff;
+      border: 1px solid #e1e8f1;
+      border-radius: 6px;
+
+      &_focus {
+        border-color: #166c92;
+        filter: none;
+      }
+
+      input {
+        box-sizing: border-box;
+        font-family: "Sarabun";
+        font-style: normal;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 22px;
+        letter-spacing: 0.2px;
+        color: #171d33;
+        padding: 0;
+      }
+    }
+  }
+
+  &__track {
+    display: flex;
+    align-items: center;
+    height: 16px;
+    margin-top: 2px;
+    position: relative;
+
+    &__line {
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      background: #d6d9e4;
+      border-radius: 4px;
+    }
+    &__range {
+      position: relative;
+      height: 4px;
+      display: flex;
+
+      background: #1f7499;
+      border-radius: 4px;
+      justify-content: space-between;
+
+      &--trigger {
+        position: relative;
+        width: 16px;
+        height: 16px;
+        background: #ffffff;
+        border: 1px solid #1f7499;
+        box-shadow: 0px 4px 26px rgba(0, 67, 96, 0.1);
+        border-radius: 50%;
+        transform: translateY(-50%);
+        top: 50%;
+        box-sizing: border-box;
+        cursor: move;
+
+        &-left {
+          transform: translate(-50%, 0);
+        }
+
+        &-right {
+        }
+      }
+    }
+  }
+}
+
+.moving-cursor {
+  cursor: move!important;
+}

package/dist/Atomic/FormElements/RangeSlider/RangeSlider.stories.scss

@@ -0,0 +1,26 @@
+.desc {
+  margin-top: 16px;
+  padding: 4px 12px;
+  background: #f7f7f7;
+  border-radius: 8px;
+  max-width: 270px;
+  box-sizing: border-box;
+  box-shadow: 0px 0px 8px 2px #e9e7e7;
+
+  h4 {
+    margin: 0;
+    padding: 0;
+    padding-bottom: 8px;
+    margin-top: 4px;
+    color: #1f7499;
+    font-size: 14px;
+    line-height: 1;
+    border-bottom: 1px solid #e9e7e7;
+  }
+
+  code {
+    font-size: 12px;
+    line-height: 16px;
+    color: #171d33;
+  }
+}