bright-components 9.33.0 → 10.0.0

package/dist/components/DayPickerPanel/index.js

@@ -39,151 +39,107 @@ var _getYearRangeChunks = _interopRequireDefault(require("./utils/getYearRangeCh
 
 var _getYearRangeIndex = _interopRequireDefault(require("./utils/getYearRangeIndex"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+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; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", ";\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", ";\n\t&:not(.active) {\n\t\tcolor: ", ";\n\t\t&:hover {\n\t\t\tcolor: ", ";\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tpadding: ", " ", " 0 ", ";\n\n\t&.active {\n\t\tfont-family: ", ";\n\t\tfont-weight: bold;\n\t}\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tbackground: ", ";\n\tborder-color: ", ";\n\tposition: absolute;\n\ttop: 12px;\n\tright: ", ";\n\tpadding: ", ";\n\n\t&:hover {\n\t\tcolor: ", ";\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\t}\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tjustify-content: space-evenly;\n\ttext-align: center;\n\tmargin: 0 40px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: relative;\n\tmin-height: 385px;\n\tdisplay: flex;\n\tflex-direction: column;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var friendlyShort = 'EEE dd MMM';
-var friendlyShortWithYear = 'EEE dd MMM yyyy';
-
-var DayPickerWrapper = _styledComponents.default.div(_templateObject());
-
+const friendlyShort = 'EEE dd MMM';
+const friendlyShortWithYear = 'EEE dd MMM yyyy';
+const DayPickerWrapper = _styledComponents.default.div`
+	display: relative;
+	min-height: 385px;
+	display: flex;
+	flex-direction: column;
+`;
 DayPickerWrapper.displayName = 'DayPickerWrapper';
-
-var SelectedDatesContainer = _styledComponents.default.div(_templateObject2());
-
+const SelectedDatesContainer = _styledComponents.default.div`
+	display: flex;
+	justify-content: space-evenly;
+	text-align: center;
+	margin: 0 40px;
+`;
 SelectedDatesContainer.displayName = 'SelectedDatesContainer';
-var CloseButton = (0, _styledComponents.default)(_WhiteOutlineButton.default)(_templateObject3(), _colors.default.secondary, _colors.default.white, _colors.default.white, _spacing.default.s1, _spacing.default.s1, _colors.default.secondaryDark, _colors.default.white, _colors.default.white);
+const CloseButton = (0, _styledComponents.default)(_WhiteOutlineButton.default)`
+	color: ${_colors.default.secondary};
+	background: ${_colors.default.white};
+	border-color: ${_colors.default.white};
+	position: absolute;
+	top: 12px;
+	right: ${_spacing.default.s1};
+	padding: ${_spacing.default.s1};
+
+	&:hover {
+		color: ${_colors.default.secondaryDark};
+		background: ${_colors.default.white};
+		border-color: ${_colors.default.white};
+	}
+`;
 CloseButton.displayName = 'CloseButton';
-var SelectedDate = (0, _styledComponents.css)(_templateObject4(), _colors.default.textColor, _spacing.default.s2, _spacing.default.s1, _spacing.default.s1, _vars.default.fontStackBold);
-
-var StartDateContainer = _styledComponents.default.div(_templateObject5(), SelectedDate, _colors.default.link, _colors.default.linkHover);
-
+const SelectedDate = (0, _styledComponents.css)`
+	color: ${_colors.default.textColor};
+	padding: ${_spacing.default.s2} ${_spacing.default.s1} 0 ${_spacing.default.s1};
+
+	&.active {
+		font-family: ${_vars.default.fontStackBold};
+		font-weight: bold;
+	}
+`;
+const StartDateContainer = _styledComponents.default.div`
+	${SelectedDate};
+	&:not(.active) {
+		color: ${_colors.default.link};
+		&:hover {
+			color: ${_colors.default.linkHover};
+			cursor: pointer;
+		}
+	}
+`;
 StartDateContainer.displayName = 'StartDateContainer';
-
-var EndDateContainer = _styledComponents.default.div(_templateObject6(), SelectedDate);
-
+const EndDateContainer = _styledComponents.default.div`
+	${SelectedDate};
+`;
 EndDateContainer.displayName = 'EndDateContainer';
-var YEAR = 'year';
-var MONTH = 'month';
-var CALENDAR = 'calendar';
-
-var friendlyDate = function friendlyDate(selectedDate) {
-  return (0, _dateFns.format)(selectedDate, friendlyShortWithYear);
-};
-
-var DayPickerPanel =
-/*#__PURE__*/
-function (_React$Component) {
-  _inheritsLoose(DayPickerPanel, _React$Component);
-
-  function DayPickerPanel(props) {
-    var _this;
-
-    _this = _React$Component.call(this, props) || this;
-    var yearRangeChunks = (0, _getYearRangeChunks.default)(props.yearRange.min, props.yearRange.max, props.yearsToDisplay);
-    var yearRangeIndex = (0, _getYearRangeIndex.default)(yearRangeChunks, props.year);
-    _this.state = {
+const YEAR = 'year';
+const MONTH = 'month';
+const CALENDAR = 'calendar';
+
+const friendlyDate = selectedDate => (0, _dateFns.format)(selectedDate, friendlyShortWithYear);
+
+class DayPickerPanel extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    const yearRangeChunks = (0, _getYearRangeChunks.default)(props.yearRange.min, props.yearRange.max, props.yearsToDisplay);
+    const yearRangeIndex = (0, _getYearRangeIndex.default)(yearRangeChunks, props.year);
+    this.state = {
       year: props.year,
       month: props.month,
       view: props.view,
       startDateClicked: false,
       range: props.range,
-      yearRangeIndex: yearRangeIndex
+      yearRangeIndex
     };
-    (0, _reactAutobind.default)(_assertThisInitialized(_this));
-    return _this;
+    (0, _reactAutobind.default)(this);
   }
 
-  var _proto = DayPickerPanel.prototype;
-
-  _proto.onSelectedDay = function onSelectedDay(newRange) {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        dateRange = _this$props.dateRange,
-        onApply = _this$props.onApply;
+  onSelectedDay(newRange) {
+    const {
+      dateRange,
+      onApply
+    } = this.props;
 
     if (!dateRange) {
       return this.setState({
         range: newRange
-      }, function () {
-        _this2.applyDatesGaEvent('selected');
-
+      }, () => {
+        this.applyDatesGaEvent('selected');
         onApply(newRange);
       });
     }
@@ -192,13 +148,16 @@ function (_React$Component) {
       range: newRange,
       startDateClicked: false
     });
-  };
+  }
 
-  _proto.setMonth = function setMonth(month) {
-    var year = this.state.year;
-    var _this$props2 = this.props,
-        onMonthSelected = _this$props2.onMonthSelected,
-        close = _this$props2.close;
+  setMonth(month) {
+    const {
+      year
+    } = this.state;
+    const {
+      onMonthSelected,
+      close
+    } = this.props;
 
     if (this.isMonthOnly()) {
       onMonthSelected(month, year);
@@ -207,94 +166,99 @@ function (_React$Component) {
     }
 
     this.setState({
-      month: month
+      month
     });
-  };
+  }
 
-  _proto.setYear = function setYear(year) {
+  setYear(year) {
     this.setState({
-      year: year
+      year
     });
-  };
+  }
 
-  _proto.setYearRangeIndex = function setYearRangeIndex(newIndex) {
+  setYearRangeIndex(newIndex) {
     this.setState({
       yearRangeIndex: newIndex
     });
-  };
+  }
 
-  _proto.isMonthOnly = function isMonthOnly() {
+  isMonthOnly() {
     return typeof this.props.onMonthSelected === 'function';
-  };
+  }
 
-  _proto.switchBackToCalendarView = function switchBackToCalendarView() {
+  switchBackToCalendarView() {
     this.setState({
       view: CALENDAR
     });
-  };
-
-  _proto.applyDatesGaEvent = function applyDatesGaEvent(selectedDay) {
-    var _this$props3 = this.props,
-        _this$props3$GA = _this$props3.GA,
-        category = _this$props3$GA.category,
-        actionId = _this$props3$GA.actionId,
-        dateRange = _this$props3.dateRange,
-        recordValue = _this$props3.recordValue;
-    var _this$state$range = this.state.range,
-        from = _this$state$range.from,
-        to = _this$state$range.to;
-    var actionEvent = selectedDay ? 'Set' : 'Apply';
+  }
+
+  applyDatesGaEvent(selectedDay) {
+    const {
+      GA: {
+        category,
+        actionId
+      },
+      dateRange,
+      recordValue
+    } = this.props;
+    const {
+      range: {
+        from,
+        to
+      }
+    } = this.state;
+    const actionEvent = selectedDay ? 'Set' : 'Apply';
 
     if (category) {
-      var label = dateRange ? (0, _dateFns.format)(from, friendlyShort) + " - " + (0, _dateFns.format)(to || from, friendlyShort) + " " + (0, _dateFns.format)(to || from, 'yyyy') : (0, _dateFns.format)(from, friendlyShort) + " " + (0, _dateFns.format)(from, 'yyyy');
+      const label = dateRange ? `${(0, _dateFns.format)(from, friendlyShort)} - ${(0, _dateFns.format)(to || from, friendlyShort)} ${(0, _dateFns.format)(to || from, 'yyyy')}` : `${(0, _dateFns.format)(from, friendlyShort)} ${(0, _dateFns.format)(from, 'yyyy')}`;
       (0, _reactGa.event)(_objectSpread({
-        category: category,
-        action: actionId + " - " + actionEvent
+        category,
+        action: `${actionId} - ${actionEvent}`
       }, recordValue ? {
-        label: label
+        label
       } : {}));
     }
-  };
-
-  _proto.render = function render() {
-    var _this3 = this;
-
-    var _this$props4 = this.props,
-        onCancel = _this$props4.onCancel,
-        onClear = _this$props4.onClear,
-        yearRange = _this$props4.yearRange,
-        yearsToDisplay = _this$props4.yearsToDisplay,
-        dateRange = _this$props4.dateRange,
-        _onApply = _this$props4.onApply,
-        disabledDays = _this$props4.disabledDays,
-        shortcuts = _this$props4.shortcuts,
-        close = _this$props4.close,
-        GA = _this$props4.GA,
-        isDateSelect = _this$props4.isDateSelect;
-    var _this$state = this.state,
-        range = _this$state.range,
-        view = _this$state.view,
-        startDateClicked = _this$state.startDateClicked,
-        month = _this$state.month,
-        year = _this$state.year,
-        yearRangeIndex = _this$state.yearRangeIndex;
-    var startDate = (0, _lodash.default)(range, 'from');
-    var endDate = (0, _lodash.default)(range, 'to');
-    var activeStart = !startDate && !endDate || startDateClicked;
-    var activeEnd = startDate && !endDate;
+  }
+
+  render() {
+    const {
+      onCancel,
+      onClear,
+      yearRange,
+      yearsToDisplay,
+      dateRange,
+      onApply,
+      disabledDays,
+      shortcuts,
+      close,
+      GA,
+      isDateSelect
+    } = this.props;
+    const {
+      range,
+      view,
+      startDateClicked,
+      month,
+      year,
+      yearRangeIndex
+    } = this.state;
+    const startDate = (0, _lodash.default)(range, 'from');
+    const endDate = (0, _lodash.default)(range, 'to');
+    const activeStart = !startDate && !endDate || startDateClicked;
+    let activeEnd = startDate && !endDate;
 
     if (!activeStart && !activeEnd) {
       activeEnd = true;
     }
 
-    var selectedDayTextFrom = startDate ? friendlyDate(startDate) : 'Choose start date';
-    var selectedDayTextTo = endDate ? friendlyDate(endDate) : 'Choose end date';
+    const selectedDayTextFrom = startDate ? friendlyDate(startDate) : 'Choose start date';
+    const selectedDayTextTo = endDate ? friendlyDate(endDate) : 'Choose end date';
     return _react.default.createElement(DayPickerWrapper, {
       "data-testid": "daypicker-panel"
     }, _react.default.createElement(SelectedDatesContainer, null, dateRange && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(StartDateContainer, {
       className: activeStart ? 'active' : '',
-      onClick: function onClick() {
-        _this3.setState({
+      onClick: () => {
+        this.setState({
           startDateClicked: true
         });
       }
@@ -304,14 +268,13 @@ function (_React$Component) {
       year: year,
       month: month,
       yearRange: yearRange,
-      onCancelClick: function onCancelClick() {
-        _this3.setState({
+      onCancelClick: () => {
+        this.setState({
           view: CALENDAR
         });
-
         (0, _reactGa.event)({
           category: GA.category,
-          action: GA.actionId + " - Cancel Month"
+          action: `${GA.actionId} - Cancel Month`
         });
       },
       setMonth: this.setMonth,
@@ -327,14 +290,13 @@ function (_React$Component) {
       setYearRangeIndex: this.setYearRangeIndex,
       setYear: this.setYear,
       switchBackToCalendarView: this.switchBackToCalendarView,
-      onCancelClick: function onCancelClick() {
-        _this3.setState({
+      onCancelClick: () => {
+        this.setState({
           view: CALENDAR
         });
-
         (0, _reactGa.event)({
           category: GA.category,
-          action: GA.actionId + " - Cancel Year"
+          action: `${GA.actionId} - Cancel Year`
         });
       },
       GA: GA
@@ -342,49 +304,44 @@ function (_React$Component) {
       month: month,
       year: year,
       yearRange: yearRange,
-      onMonthClick: function onMonthClick() {
-        _this3.setState({
+      onMonthClick: () => {
+        this.setState({
           view: MONTH
         });
-
         (0, _reactGa.event)({
           category: GA.category,
-          action: GA.actionId + " - Month Picker"
+          action: `${GA.actionId} - Month Picker`
         });
       },
-      onYearClick: function onYearClick() {
-        _this3.setState({
+      onYearClick: () => {
+        this.setState({
           view: YEAR
         });
-
         (0, _reactGa.event)({
           category: GA.category,
-          action: GA.actionId + " - Year Picker"
+          action: `${GA.actionId} - Year Picker`
         });
       },
-      onMonthChange: function onMonthChange(e) {
-        _this3.setMonth(+e.target.value);
-
+      onMonthChange: e => {
+        this.setMonth(+e.target.value);
         (0, _reactGa.event)({
           category: GA.category,
-          action: GA.actionId + " - Month Changed"
+          action: `${GA.actionId} - Month Changed`
         });
       },
-      onYearChange: function onYearChange(e) {
-        _this3.setYear(+e.target.value);
-
+      onYearChange: e => {
+        this.setYear(+e.target.value);
         (0, _reactGa.event)({
           category: GA.category,
-          action: GA.actionId + " - Year Changed"
+          action: `${GA.actionId} - Year Changed`
         });
       },
       setMonth: this.setMonth,
       setYear: this.setYear,
       dateRange: dateRange,
-      onApply: function onApply() {
-        _this3.applyDatesGaEvent();
-
-        _onApply(range);
+      onApply: () => {
+        this.applyDatesGaEvent();
+        onApply(range);
       },
       onCancel: onCancel,
       onClear: onClear,
@@ -396,15 +353,14 @@ function (_React$Component) {
       GA: GA,
       isDateSelect: isDateSelect
     }), close && _react.default.createElement(CloseButton, {
-      gaAction: GA.actionId + " Day picker close",
+      gaAction: `${GA.actionId} Day picker close`,
       onClick: close
     }, _react.default.createElement(_Cross.default, {
       size: 16
     })));
-  };
+  }
 
-  return DayPickerPanel;
-}(_react.default.Component);
+}
 
 DayPickerPanel.displayName = 'DayPickerPanel';
 var _default = DayPickerPanel;

package/dist/components/DayPickerPanel/utils/getYearRangeChunks/index.js

@@ -9,9 +9,9 @@ var _range = _interopRequireDefault(require("../../../../utils/range"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var getYearRangeChunks = function getYearRangeChunks(startYear, endYear, chunkSize) {
-  var years = (0, _range.default)(startYear, endYear);
-  var yearItemsToShow = chunkSize ? (0, _lodash.default)(years, chunkSize) : [years];
+const getYearRangeChunks = (startYear, endYear, chunkSize) => {
+  const years = (0, _range.default)(startYear, endYear);
+  const yearItemsToShow = chunkSize ? (0, _lodash.default)(years, chunkSize) : [years];
   return yearItemsToShow;
 };
 

package/dist/components/DayPickerPanel/utils/getYearRangeIndex/index.js

@@ -3,11 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var getYearIndex = function getYearIndex(years, selectedYear) {
-  return years.findIndex(function (year) {
-    return year.indexOf(selectedYear) !== -1;
-  });
-};
+const getYearIndex = (years, selectedYear) => years.findIndex(year => year.indexOf(selectedYear) !== -1);
 
 var _default = getYearIndex;
 exports.default = _default;