beem-component 1.8.8 → 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 BmMultiDateSelector = function BmMultiDateSelector() {
-  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 = BmMultiDateSelector;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "1.8.8",
+  "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 BmMultiDateSelector from './lib/components/MultipleDateSelector/multipleDateSelector';
 import BmStepper from './lib/components/Stepper/stepper';
 
 const App = () => {
@@ -74,10 +73,12 @@ const App = () => {
         count={count}
         onChange={handleCountChange}
       />
-      <BmMultiDateSelector 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,41 +23,46 @@ const Box = styled.div`
   padding: 0.5rem;
   cursor: pointer;
 `;
-const BmMultiDateSelector = () => {
-  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>
   );
 };