beem-component 1.8.7 → 1.8.9

package/dist/components/MultipleDateSelector/multipleDateSelector.js

@@ -27,38 +27,46 @@ var Wrapper = _styledComponents.default.div.withConfig({
 var Box = _styledComponents.default.div.withConfig({
   displayName: "multipleDateSelector__Box"
 })(["display:inline-flex;border:0.071rem solid ", ";padding:0.5rem;cursor:pointer;"], _colors.BmGrey100);
-var MultiDateSelector = function MultiDateSelector() {
-  var _useState = (0, _react.useState)([]),
+var BmMultiDateSelector = function BmMultiDateSelector(_ref) {
+  var onSelect = _ref.onSelect,
+    selectedNumbers = _ref.selectedNumbers;
+  var numbers = Array.from({
+    length: 31
+  }, function (_, i) {
+    return i;
+  });
+  var _useState = (0, _react.useState)(selectedNumbers || []),
     _useState2 = _slicedToArray(_useState, 2),
-    selectedDays = _useState2[0],
-    setSelectedDays = _useState2[1];
-  var handleDayClick = function handleDayClick(day) {
-    if (selectedDays.includes(day)) {
-      setSelectedDays(selectedDays.filter(function (d) {
-        return d !== day;
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setSelected(selectedNumbers || []);
+  }, [selectedNumbers]);
+  var handleNumberClick = function handleNumberClick(number) {
+    if (selected.includes(number)) {
+      setSelected(selected.filter(function (n) {
+        return n !== number;
       }));
     } else {
-      setSelectedDays([].concat(_toConsumableArray(selectedDays), [day]));
+      setSelected([].concat(_toConsumableArray(selected), [number]));
     }
   };
-  var days = Array.from({
-    length: 31
-  }, function (_, i) {
-    return i + 1;
-  });
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Wrapper, null, days.map(function (day) {
+  (0, _react.useEffect)(function () {
+    onSelect(selected);
+  }, [selected, onSelect]);
+  return /*#__PURE__*/_react.default.createElement(Wrapper, null, numbers.map(function (number) {
     return /*#__PURE__*/_react.default.createElement(Box, {
-      key: day,
+      key: number,
       style: {
-        backgroundColor: selectedDays.includes(day) ? _colors.BmPrimaryBlue : _colors.BmPrimaryWhite,
-        color: selectedDays.includes(day) ? _colors.BmPrimaryWhite : _colors.BmPrimaryBlack,
-        fontWeight: selectedDays.includes(day) ? 'bold' : 'normal'
+        backgroundColor: selected.includes(number) ? _colors.BmPrimaryBlue : _colors.BmPrimaryWhite,
+        color: selected.includes(number) ? _colors.BmPrimaryWhite : _colors.BmPrimaryBlack,
+        fontWeight: selected.includes(number) ? 'bold' : 'normal'
       },
       onClick: function onClick() {
-        return handleDayClick(day);
+        return handleNumberClick(number);
       }
-    }, day);
-  })));
+    }, number);
+  }));
 };
-var _default = MultiDateSelector;
+var _default = BmMultiDateSelector;
 exports.default = _default;

package/dist/components/index.js

@@ -221,6 +221,12 @@ Object.defineProperty(exports, "BmModal", {
     return _modal.default;
   }
 });
+Object.defineProperty(exports, "BmMultiDateSelector", {
+  enumerable: true,
+  get: function get() {
+    return _multipleDateSelector.default;
+  }
+});
 Object.defineProperty(exports, "BmNoteBar", {
   enumerable: true,
   get: function get() {
@@ -404,6 +410,7 @@ var _index2 = require("./SuperFluid/SegmentCard/index");
 var _buttonGroup = _interopRequireDefault(require("./ButtonGroup/buttonGroup"));
 var _inputCounter = require("./InputCounter/inputCounter");
 var _stepper = _interopRequireDefault(require("./Stepper/stepper"));
+var _multipleDateSelector = _interopRequireDefault(require("./MultipleDateSelector/multipleDateSelector"));
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "1.8.7",
+  "version": "1.8.9",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {

package/src/App.js

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
-import { GlobalStyle } from './lib/components';
+import { BmMultiDateSelector, GlobalStyle } from './lib/components';
 import BmButtonGroup from './lib/components/ButtonGroup/buttonGroup';
 import { BmInputCounter } from './lib/components/InputCounter/inputCounter';
-import MultiDateSelector from './lib/components/MultipleDateSelector/multipleDateSelector';
 import BmStepper from './lib/components/Stepper/stepper';
 
 const App = () => {
@@ -74,10 +73,12 @@ const App = () => {
         count={count}
         onChange={handleCountChange}
       />
-      <MultiDateSelector onSelect={handleSelectDates} />
-      {selectedDates.length > 0 && (
-        <p>Selected dates: {selectedDates.join(', ')}</p>
-      )}
+      <BmMultiDateSelector
+        onSelect={handleSelectDates}
+        selectedNumbers={selectedDates}
+      />
+      <p>Selected numbers outside the component: {selectedDates.join(', ')}</p>
+
       {Weekdays.map(({ dayNo, dayInitial }) => {
         return (
           <BmStepper

package/src/lib/components/MultipleDateSelector/multipleDateSelector.js

@@ -1,5 +1,5 @@
-// import { BmColors } from 'beem-component';
-import React, { useState } from 'react';
+/* eslint-disable react/button-has-type */
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import {
   BmGrey100,
@@ -23,42 +23,47 @@ const Box = styled.div`
   padding: 0.5rem;
   cursor: pointer;
 `;
-const MultiDateSelector = () => {
-  const [selectedDays, setSelectedDays] = useState([]);
 
-  const handleDayClick = (day) => {
-    if (selectedDays.includes(day)) {
-      setSelectedDays(selectedDays.filter((d) => d !== day));
+const BmMultiDateSelector = ({ onSelect, selectedNumbers }) => {
+  const numbers = Array.from({ length: 31 }, (_, i) => i);
+
+  const [selected, setSelected] = useState(selectedNumbers || []);
+
+  useEffect(() => {
+    setSelected(selectedNumbers || []);
+  }, [selectedNumbers]);
+
+  const handleNumberClick = (number) => {
+    if (selected.includes(number)) {
+      setSelected(selected.filter((n) => n !== number));
     } else {
-      setSelectedDays([...selectedDays, day]);
+      setSelected([...selected, number]);
     }
   };
 
-  const days = Array.from({ length: 31 }, (_, i) => i + 1);
+  useEffect(() => {
+    onSelect(selected);
+  }, [selected, onSelect]);
 
   return (
-    <div>
-      <Wrapper>
-        {days.map((day) => (
-          <Box
-            key={day}
-            style={{
-              backgroundColor: selectedDays.includes(day)
-                ? BmPrimaryBlue
-                : BmPrimaryWhite,
-              color: selectedDays.includes(day)
-                ? BmPrimaryWhite
-                : BmPrimaryBlack,
-              fontWeight: selectedDays.includes(day) ? 'bold' : 'normal',
-            }}
-            onClick={() => handleDayClick(day)}
-          >
-            {day}
-          </Box>
-        ))}
-      </Wrapper>
-    </div>
+    <Wrapper>
+      {numbers.map((number) => (
+        <Box
+          key={number}
+          style={{
+            backgroundColor: selected.includes(number)
+              ? BmPrimaryBlue
+              : BmPrimaryWhite,
+            color: selected.includes(number) ? BmPrimaryWhite : BmPrimaryBlack,
+            fontWeight: selected.includes(number) ? 'bold' : 'normal',
+          }}
+          onClick={() => handleNumberClick(number)}
+        >
+          {number}
+        </Box>
+      ))}
+    </Wrapper>
   );
 };
 
-export default MultiDateSelector;
+export default BmMultiDateSelector;

package/src/lib/components/index.js

@@ -69,6 +69,7 @@ import {
 import BmButtonGroup from './ButtonGroup/buttonGroup';
 import { BmInputCounter } from './InputCounter/inputCounter';
 import BmStepper from './Stepper/stepper';
+import BmMultiDateSelector from './MultipleDateSelector/multipleDateSelector';
 
 export {
   BmAccordion,
@@ -90,6 +91,7 @@ export {
   BmButtonGroup,
   BmInputCounter,
   BmStepper,
+  BmMultiDateSelector,
   // Fix height and if there is dropdown option inside the modal body
   BmModal,
   BmNoteBar,