beem-component 2.1.2 → 2.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/BmSelector/BmSelector.js +15 -2
  2. package/dist/components/BmSelector/BmSelector.stories.js +14 -1
  3. package/package.json +1 -1
  4. package/src/lib/components/BmSelector/BmSelector.js +14 -1
  5. package/src/lib/components/BmSelector/BmSelector.stories.jsx +10 -0
package/dist/components/BmSelector/BmSelector.js CHANGED
@@ -89,10 +89,23 @@ const BmSelector = _ref8 => {
89
89
  themeColor,
90
90
  textColor,
91
91
  fontWeight,
92
- name = 'selection'
92
+ name = 'selection',
93
+ useFormik = false
93
94
  } = _ref8;
94
95
  return /*#__PURE__*/_react.default.createElement(RadioGroupWrapper, null, data.map(item => {
95
96
  const isSelected = selectedDataId === item.id;
97
+ const handleChange = () => {
98
+ if (useFormik) {
99
+ onChange({
100
+ target: {
101
+ name,
102
+ value: item.id
103
+ }
104
+ });
105
+ } else {
106
+ onChange(item.id);
107
+ }
108
+ };
96
109
  return /*#__PURE__*/_react.default.createElement("label", {
97
110
  key: item.id,
98
111
  htmlFor: item.id
@@ -101,7 +114,7 @@ const BmSelector = _ref8 => {
101
114
  name: name,
102
115
  value: item.id,
103
116
  checked: isSelected,
104
- onChange: () => onChange(item.id)
117
+ onChange: handleChange
105
118
  }), /*#__PURE__*/_react.default.createElement(TimeSlotCard, {
106
119
  selected: isSelected,
107
120
  themeColor: themeColor
package/dist/components/BmSelector/BmSelector.stories.js CHANGED
@@ -56,6 +56,12 @@ var _default = exports.default = {
56
56
  endDate: '09:30 AM'
57
57
  }
58
58
  }]
59
+ },
60
+ useFormik: {
61
+ control: {
62
+ type: 'boolean'
63
+ },
64
+ defaultValue: false
59
65
  }
60
66
  }
61
67
  };
@@ -102,6 +108,7 @@ Default.args = {
102
108
  endDate: '09:30 AM'
103
109
  }
104
110
  }],
111
+ useFormik: false,
105
112
  themeColor: '#33B1BA',
106
113
  textColor: '#33B1BA',
107
114
  fontWeight: '',
@@ -124,15 +131,21 @@ const Example = () => {
124
131
  endDate: '11:10 AM'
125
132
  }
126
133
  }];
134
+
135
+ // When you use useFormik as true then you need to pass handleChange func and the name [name="time"].
136
+ // so that is works accordingly
137
+
127
138
  const [selectedDataId, setSelectedDataId] = (0, _react.useState)(null);
128
139
  return /*#__PURE__*/_react.default.createElement(_BmSelector.default, {
140
+ name: "time",
129
141
  data: slots,
130
142
  selectedDataId: selectedDataId,
131
143
  onChange: setSelectedDataId,
132
144
  icon: _AccessTime.default,
133
145
  themeColor: "#33B1BA",
134
146
  textColor: "#33B1BA",
135
- fontWeight: "600"
147
+ fontWeight: "600",
148
+ useFormik: "false"
136
149
  });
137
150
  };
138
151
  exports.Example = Example;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beem-component",
3
- "version": "2.1.2",
3
+ "version": "2.1.3",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "scripts": {
package/src/lib/components/BmSelector/BmSelector.js CHANGED
@@ -120,11 +120,24 @@ const BmSelector = ({
120
120
  textColor,
121
121
  fontWeight,
122
122
  name = 'selection',
123
+ useFormik = false,
123
124
  }) => {
124
125
  return (
125
126
  <RadioGroupWrapper>
126
127
  {data.map((item) => {
127
128
  const isSelected = selectedDataId === item.id;
129
+ const handleChange = () => {
130
+ if (useFormik) {
131
+ onChange({
132
+ target: {
133
+ name,
134
+ value: item.id,
135
+ },
136
+ });
137
+ } else {
138
+ onChange(item.id);
139
+ }
140
+ };
128
141
 
129
142
  return (
130
143
  <label key={item.id} htmlFor={item.id}>
@@ -133,7 +146,7 @@ const BmSelector = ({
133
146
  name={name}
134
147
  value={item.id}
135
148
  checked={isSelected}
136
- onChange={() => onChange(item.id)}
149
+ onChange={handleChange}
137
150
  />
138
151
  <TimeSlotCard selected={isSelected} themeColor={themeColor}>
139
152
  <CustomRadio selected={isSelected} themeColor={themeColor} />
package/src/lib/components/BmSelector/BmSelector.stories.jsx CHANGED
@@ -44,6 +44,10 @@ export default {
44
44
  },
45
45
  ],
46
46
  },
47
+ useFormik: {
48
+ control: { type: 'boolean' },
49
+ defaultValue: false,
50
+ },
47
51
  },
48
52
  };
49
53
 
@@ -89,6 +93,7 @@ Default.args = {
89
93
  value: { startDate: '09:00 AM', endDate: '09:30 AM' },
90
94
  },
91
95
  ],
96
+ useFormik: false,
92
97
 
93
98
  themeColor: '#33B1BA',
94
99
  textColor: '#33B1BA',
@@ -110,9 +115,13 @@ export const Example = () => {
110
115
  },
111
116
  ];
112
117
 
118
+ // When you use useFormik as true then you need to pass handleChange func and the name [name="time"].
119
+ // so that is works accordingly
120
+
113
121
  const [selectedDataId, setSelectedDataId] = useState(null);
114
122
  return (
115
123
  <BmSelector
124
+ name="time"
116
125
  data={slots}
117
126
  selectedDataId={selectedDataId}
118
127
  onChange={setSelectedDataId}
@@ -120,6 +129,7 @@ export const Example = () => {
120
129
  themeColor="#33B1BA"
121
130
  textColor="#33B1BA"
122
131
  fontWeight="600"
132
+ useFormik="false"
123
133
  />
124
134
  );
125
135
  };