@scaleflex/widget-common 0.0.1

package/lib/ColorPickerModal/index.js

@@ -0,0 +1,103 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState, useRef } from 'react';
+import { ColorPicker, Modal, ModalContent, ModalTitle } from '@scaleflex/ui/core';
+import ColorPickerIcon from '@scaleflex/icons/color-picker';
+import Styled from './ColorPickerModal.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ColorPickerModal(_ref) {
+  var _ref$defaultColor = _ref.defaultColor,
+    defaultColor = _ref$defaultColor === void 0 ? '' : _ref$defaultColor,
+    _ref$colors = _ref.colors,
+    colors = _ref$colors === void 0 ? [] : _ref$colors,
+    onChange = _ref.onChange,
+    onTmpChooseColor = _ref.onTmpChooseColor,
+    open = _ref.open,
+    onClose = _ref.onClose,
+    _ref$i18n = _ref.i18n,
+    i18n = _ref$i18n === void 0 ? function () {} : _ref$i18n,
+    _ref$modalTitleLabel = _ref.modalTitleLabel,
+    modalTitleLabel = _ref$modalTitleLabel === void 0 ? i18n('colorPickerModalTitle') : _ref$modalTitleLabel,
+    _ref$cancelButtonLabe = _ref.cancelButtonLabel,
+    cancelButtonLabel = _ref$cancelButtonLabe === void 0 ? i18n('mutualizedCancelButtonLabel') : _ref$cancelButtonLabe,
+    _ref$saveButtonLabel = _ref.saveButtonLabel,
+    saveButtonLabel = _ref$saveButtonLabel === void 0 ? i18n('mutualizedApplyButtonLabel') : _ref$saveButtonLabel,
+    showTransparentColor = _ref.showTransparentColor,
+    hidePinIcon = _ref.hidePinIcon;
+  var initialColor = useRef(defaultColor);
+  var _useState = useState(defaultColor),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState(colors),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pinnedColors = _useState4[0],
+    setPinnedColors = _useState4[1];
+  if (!open) {
+    return null;
+  }
+  var handleSave = function handleSave() {
+    onChange(value);
+    if (typeof onClose === 'function') {
+      onClose();
+    }
+  };
+  var handleClose = function handleClose(event) {
+    var shouldResetColor = initialColor.current !== value && typeof onTmpChooseColor === 'function';
+    if (shouldResetColor) {
+      onChange(initialColor.current);
+    }
+    if (typeof onClose === 'function') {
+      onClose(event);
+    }
+  };
+  var onColorChange = function onColorChange(hexColor, rgbColor, colorPickerPinnedColors) {
+    if (typeof onTmpChooseColor === 'function') {
+      onTmpChooseColor(hexColor);
+    }
+    setValue(hexColor);
+    setPinnedColors(colorPickerPinnedColors);
+  };
+  return /*#__PURE__*/_jsxs(Modal, {
+    onClose: handleClose,
+    open: open,
+    fullWidth: true,
+    style: {
+      maxWidth: 350
+    },
+    children: [/*#__PURE__*/_jsx(ModalTitle, {
+      onClose: handleClose,
+      primary: modalTitleLabel,
+      icon: /*#__PURE__*/_jsx(ColorPickerIcon, {
+        size: 29
+      }),
+      iconShadow: true,
+      variant: "with-icon"
+    }), /*#__PURE__*/_jsx(ModalContent, {
+      children: /*#__PURE__*/_jsx(Styled.ColorPickerWrap, {
+        children: /*#__PURE__*/_jsx(ColorPicker, {
+          defaultColor: defaultColor,
+          pinnedColors: pinnedColors,
+          onChange: onColorChange,
+          showTransparentColor: showTransparentColor,
+          hidePinIcon: hidePinIcon
+        })
+      })
+    }), /*#__PURE__*/_jsxs(Styled.ModalActions, {
+      children: [/*#__PURE__*/_jsx(Styled.ModalButton, {
+        color: "basic",
+        onClick: handleClose,
+        children: cancelButtonLabel
+      }), /*#__PURE__*/_jsx(Styled.ModalButton, {
+        color: "primary",
+        onClick: handleSave,
+        children: saveButtonLabel
+      })]
+    })]
+  });
+}
+export default ColorPickerModal;

package/lib/DatePicker/MyDatePicker.js

@@ -0,0 +1,350 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState, useEffect, useRef } from 'react';
+import { InputAndLabel } from '@scaleflex/widget-common';
+import getDateString from '@scaleflex/widget-utils/lib/getDateString';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var oneDay = 60 * 60 * 24 * 1000;
+var todayTimestamp = Date.now() - Date.now() % oneDay + new Date().getTimezoneOffset() * 1000 * 60;
+var MyDatePicker = function MyDatePicker(props) {
+  var _useState = useState(function () {
+      return new Date().getFullYear();
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    year = _useState2[0],
+    setYear = _useState2[1];
+  var _useState3 = useState(function () {
+      return new Date().getMonth();
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    month = _useState4[0],
+    setMonth = _useState4[1];
+  var _useState5 = useState(function () {
+      return todayTimestamp;
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedDay = _useState6[0],
+    setSelectedDay = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showDatePicker = _useState8[0],
+    setShowDatePicker = _useState8[1];
+  var _useState9 = useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    menuHeight = _useState10[0],
+    setMenuHeight = _useState10[1];
+  var wrapper = useRef();
+  var inputRef = useRef();
+  var iconRef = useRef();
+  var datePickerRef = useRef();
+  var getDayDetails = function getDayDetails(args) {
+    var daysMap = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    var date = args.index - args.firstDay;
+    var day = args.index % 7;
+    var prevMonth = args.month - 1;
+    var prevYear = args.year;
+    if (prevMonth < 0) {
+      prevMonth = 11;
+      prevYear--;
+    }
+    var prevMonthNumberOfDays = getNumberOfDays(prevYear, prevMonth);
+    var _date = (date < 0 ? prevMonthNumberOfDays + date : date % args.numberOfDays) + 1;
+    var month = date < 0 ? -1 : date >= args.numberOfDays ? 1 : 0;
+    var timestamp = new Date(args.year, args.month, _date).getTime();
+    return {
+      date: _date,
+      day: day,
+      month: month,
+      timestamp: timestamp,
+      dayString: daysMap[day]
+    };
+  };
+  var getNumberOfDays = function getNumberOfDays(year, month) {
+    return 40 - new Date(year, month, 40).getDate();
+  };
+  var getMonthDetails = function getMonthDetails(year, month) {
+    var firstDay = new Date(year, month).getDay();
+    var numberOfDays = getNumberOfDays(year, month);
+    var monthArray = [];
+    var rows = 6;
+    var currentDay = null;
+    var index = 0;
+    var cols = 7;
+    for (var row = 0; row < rows; row++) {
+      for (var col = 0; col < cols; col++) {
+        currentDay = getDayDetails({
+          index: index,
+          numberOfDays: numberOfDays,
+          firstDay: firstDay,
+          year: year,
+          month: month
+        });
+        monthArray.push(currentDay);
+        index++;
+      }
+    }
+    return monthArray;
+  };
+  var _useState11 = useState(function () {
+      return getMonthDetails(year, month);
+    }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    monthDetails = _useState12[0],
+    setMonthDetails = _useState12[1];
+  useEffect(function () {
+    setDateToInput(selectedDay);
+  }, []);
+  useEffect(function () {
+    getMenuHeight();
+  }, [showDatePicker]);
+  useEffect(function () {
+    setDateToInput(selectedDay.timestamp);
+  }, [selectedDay]);
+  useEffect(function () {
+    var closeDatePicker = function closeDatePicker(e) {
+      var _iconRef$current, _datePickerRef$curren;
+      if (!((_iconRef$current = iconRef.current) !== null && _iconRef$current !== void 0 && _iconRef$current.contains(e.target)) && !((_datePickerRef$curren = datePickerRef.current) !== null && _datePickerRef$curren !== void 0 && _datePickerRef$curren.contains(e.target))) {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowDatePicker(false);
+      }
+    };
+    document.addEventListener('click', closeDatePicker);
+    return function () {
+      document.removeEventListener('click', closeDatePicker);
+    };
+  }, []);
+  var getMenuHeight = function getMenuHeight() {
+    var _document$querySelect, _document$querySelect2;
+    var height = (_document$querySelect = document.querySelector('.filerobot-common-datePicker-container')) === null || _document$querySelect === void 0 ? void 0 : (_document$querySelect2 = _document$querySelect.getBoundingClientRect()) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.height;
+    setMenuHeight(height);
+  };
+  var getMenuPosition = function getMenuPosition() {
+    return menuHeight + props.top >= props.containerHeight ? {
+      bottom: 45
+    } : {
+      top: 45
+    };
+  };
+  var showADatePicker = function showADatePicker(e) {
+    props.getParentPosition(e);
+    e.preventDefault();
+    e.stopPropagation();
+    setShowDatePicker(!showDatePicker);
+  };
+  var isCurrentDay = function isCurrentDay(day) {
+    return day.timestamp === todayTimestamp;
+  };
+  var isSelectedDay = function isSelectedDay(day) {
+    return day.timestamp === selectedDay;
+  };
+  var getDateFromDateString = function getDateFromDateString(dateValue) {
+    var _ref;
+    console.log('hey', dateValue);
+    var dateData = (_ref = typeof dateValue === 'string' ? dateValue === null || dateValue === void 0 ? void 0 : dateValue.split('-') : dateValue) === null || _ref === void 0 ? void 0 : _ref.map(function (d) {
+      return parseInt(d, 10);
+    });
+    if (!dateData || dateData.length < 3) {
+      return null;
+    }
+    var year = dateData[0];
+    var month = dateData[1];
+    var date = dateData[2];
+    return {
+      year: year,
+      month: month,
+      date: date
+    };
+  };
+  var getMonthStr = function getMonthStr(month) {
+    var monthMap = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    return monthMap[Math.max(Math.min(11, month), 0)] || 'Month';
+  };
+  var getDateStringFromTimestamp = function getDateStringFromTimestamp(timestamp) {
+    var dateObject = new Date(timestamp);
+    var month = dateObject.getMonth() + 1;
+    var date = dateObject.getDate();
+    return dateObject.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date);
+  };
+  var setDate = function setDate(dateData) {
+    var selectedDay = new Date(dateData.year, dateData.month - 1, dateData.date).getTime();
+    setSelectedDay(selectedDay);
+    if (props.onChange) {
+      props.onChange({}, getDateString('ymd', '-', selectedDay));
+    }
+  };
+  var updateDateFromInput = function updateDateFromInput(e) {
+    if (!inputRef.current.value) {
+      return;
+    }
+    var dateData = getDateFromDateString(inputRef.current.value);
+    if (dateData !== null) {
+      setDate(dateData);
+      setYear(dateData.year);
+      setMonth(dateData.month - 1);
+      setMonthDetails(getMonthDetails(dateData.year, dateData.month - 1));
+    }
+  };
+  var setDateToInput = function setDateToInput(timestamp) {
+    var dateString = getDateStringFromTimestamp(timestamp);
+
+    // if no update from external value update internally
+    if (inputRef && !props.onChange) {
+      inputRef.current.value = dateString;
+    }
+  };
+  var onDateClick = function onDateClick(day) {
+    setSelectedDay(day.timestamp);
+    if (props.onChange) {
+      props.onChange({}, getDateStringFromTimestamp(day.timestamp));
+    }
+  };
+  var setNewYear = function setNewYear(offset) {
+    var newYear = year + offset;
+    setYear(newYear);
+    setMonthDetails(getMonthDetails(newYear, month));
+  };
+  var setNewMonth = function setNewMonth(offset) {
+    var newYear = year;
+    var newMonth = month + offset;
+    if (month === -1) {
+      newMonth = 11;
+      newYear--;
+    } else if (month === 12) {
+      newMonth = 0;
+      newYear++;
+    }
+    setYear(newYear);
+    setMonth(newMonth);
+    setMonthDetails(getMonthDetails(newYear, newMonth));
+  };
+  var renderCalendar = function renderCalendar() {
+    var days = monthDetails.map(function (day, index) {
+      return /*#__PURE__*/_jsx("div", {
+        className: "filerobot-common-datePicker-calendar-day".concat(day.month !== 0 ? ' disabled' : '') + (isCurrentDay(day) ? ' highlight' : '') + (isSelectedDay(day) ? ' highlight-green' : ''),
+        children: /*#__PURE__*/_jsx("div", {
+          className: "filerobot-common-datePicker-calendar-day-container",
+          children: /*#__PURE__*/_jsx("span", {
+            onClick: function onClick() {
+              return onDateClick(day);
+            },
+            children: day.date
+          })
+        })
+      }, index);
+    });
+    return /*#__PURE__*/_jsxs("div", {
+      className: "filerobot-common-datePicker-calendar",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "filerobot-common-datePicker-calendar-head",
+        children: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(function (d, i) {
+          return /*#__PURE__*/_jsx("div", {
+            className: "filerobot-common-datePicker-calendar-head-name",
+            children: d
+          }, i);
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "filerobot-common-datePicker-calendar-body",
+        children: days
+      })]
+    });
+  };
+  var showLabel = typeof props.showLabel === 'boolean' ? props.showLabel : true;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "filerobot-common-datePicker ".concat(props.classes ? "".concat(props.classes) : ''),
+      style: props.isFilterOptions ? {
+        position: 'unset'
+      } : {},
+      ref: wrapper,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "filerobot-common-datePicker-input",
+        children: /*#__PURE__*/_jsx(InputAndLabel, {
+          item: "date",
+          type: "date",
+          value: props.value,
+          onChange: updateDateFromInput,
+          onClick: showADatePicker,
+          ref: inputRef,
+          innerRef: iconRef,
+          icon: props.icon,
+          i18n: props.i18n,
+          isFilterOptions: props.isFilterOptions,
+          showLabel: showLabel
+        })
+      }), showDatePicker ? /*#__PURE__*/_jsxs("div", {
+        className: "filerobot-common-datePicker-container",
+        style: props.isFilterOptions ? {
+          bottom: 99,
+          left: 10
+        } : getMenuPosition(),
+        ref: datePickerRef,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "filerobot-common-datePicker-container-head",
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "filerobot-common-datePicker-container-head-button",
+            children: /*#__PURE__*/_jsx("div", {
+              className: "filerobot-common-datePicker-container-head-button-inner",
+              onClick: function onClick() {
+                return setNewYear(-1);
+              },
+              children: /*#__PURE__*/_jsx("span", {
+                className: "mdpchbi-left-arrows"
+              })
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "filerobot-common-datePicker-container-head-button",
+            children: /*#__PURE__*/_jsx("div", {
+              className: "filerobot-common-datePicker-container-head-button-inner",
+              onClick: function onClick() {
+                return setNewMonth(-1);
+              },
+              children: /*#__PURE__*/_jsx("span", {
+                className: "mdpchbi-left-arrow"
+              })
+            })
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "filerobot-common-datePicker-container-head-body",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "filerobot-common-datePicker-container-head-body-year",
+              children: year
+            }), /*#__PURE__*/_jsx("div", {
+              className: "filerobot-common-datePicker-container-head-body-month",
+              children: getMonthStr(month)
+            })]
+          }), /*#__PURE__*/_jsx("div", {
+            className: "filerobot-common-datePicker-container-head-button",
+            children: /*#__PURE__*/_jsx("div", {
+              className: "filerobot-common-datePicker-container-head-button-inner",
+              onClick: function onClick() {
+                return setNewMonth(1);
+              },
+              children: /*#__PURE__*/_jsx("span", {
+                className: "mdpchbi-right-arrow"
+              })
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "filerobot-common-datePicker-container-head-button",
+            onClick: function onClick() {
+              return setNewYear(1);
+            },
+            children: /*#__PURE__*/_jsx("div", {
+              className: "filerobot-common-datePicker-container-head-button-inner",
+              children: /*#__PURE__*/_jsx("span", {
+                className: "mdpchbi-right-arrows"
+              })
+            })
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: "filerobot-common-datePicker-container-body",
+          children: renderCalendar()
+        })]
+      }) : '']
+    })
+  });
+};
+export default MyDatePicker;

package/lib/DatePicker/index.js

@@ -0,0 +1 @@
+export { default as DatePicker } from './MyDatePicker';