@mamrp/components 1.7.13 → 1.7.14

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/index.js +126 -204
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +126 -204
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -78,7 +78,6 @@ function LicensePlate({
78
78
  }) {
79
79
  const theme3 = useTheme();
80
80
  const [open, setOpen] = useState(false);
81
- const [selectedValue, setSelectedValue] = useState("");
82
81
  const [inputValues, setInputValues] = useState({
83
82
  input1: "",
84
83
  input2: "",
@@ -95,12 +94,12 @@ function LicensePlate({
95
94
  if (data) {
96
95
  let newdata = data.split(" ").filter((word) => word !== "\u0627\u06CC\u0631\u0627\u0646");
97
96
  setInputValues({
98
- input1: newdata[0],
99
- input2: newdata[1],
100
- input3: newdata[2],
101
- input4: newdata[3]
97
+ input1: newdata[0] || "",
98
+ input2: newdata[1] || "",
99
+ input3: newdata[2] || "",
100
+ input4: newdata[3] || ""
102
101
  });
103
- } else if (data == "") {
102
+ } else {
104
103
  setInputValues({
105
104
  input1: "",
106
105
  input2: "",
@@ -112,9 +111,7 @@ function LicensePlate({
112
111
  const handleInputChange = (enteredInput, inputName, maxlength, minLength) => {
113
112
  if (inputName !== "input2") {
114
113
  const englishInput = convertToEnglishDigits(enteredInput);
115
- if (!/^\d*$/.test(englishInput)) {
116
- return;
117
- }
114
+ if (!/^\d*$/.test(englishInput)) return;
118
115
  }
119
116
  const newInputValues = {
120
117
  ...inputValues,
@@ -124,16 +121,23 @@ function LicensePlate({
124
121
  const formattedPlate = convertToEnglishDigits(newInputValues.input1) + " " + newInputValues.input2 + " " + convertToEnglishDigits(newInputValues.input3) + " \u0627\u06CC\u0631\u0627\u0646 " + convertToEnglishDigits(newInputValues.input4);
125
122
  setValue(name, formattedPlate);
126
123
  if (enteredInput.length === maxlength || minLength === 1) {
127
- if (inputName === "input1") {
128
- setOpen(true);
129
- } else if (inputName === "input2") {
130
- setSelectedValue(enteredInput);
124
+ if (inputName === "input1") setOpen(true);
125
+ else if (inputName === "input2") {
131
126
  setOpen(false);
132
- } else {
133
- inputRefs["input4"]?.current?.focus();
134
- }
127
+ } else inputRefs["input4"]?.current?.focus();
135
128
  }
136
129
  };
130
+ const inputStyle = {
131
+ color: theme3.palette.text.primary,
132
+ width: "30px",
133
+ textAlign: "center",
134
+ backgroundColor: "transparent",
135
+ outline: "none",
136
+ border: "none",
137
+ cursor: readOnly || !!data && readOnly ? "default" : "text",
138
+ fontSize: "1.25rem",
139
+ fontWeight: 600
140
+ };
137
141
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
138
142
  Box,
139
143
  {
@@ -142,44 +146,36 @@ function LicensePlate({
142
146
  border: "1px solid #e5e7eb",
143
147
  borderRadius: "7px",
144
148
  display: "flex",
145
- alignItems: "center"
149
+ alignItems: "center",
150
+ height: "3.5rem"
146
151
  },
147
152
  dir: "ltr"
148
153
  },
149
- /* @__PURE__ */ React.createElement(
154
+ /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(
150
155
  Box,
151
156
  {
152
157
  sx: {
158
+ backgroundColor: "#172554",
159
+ width: size === "small" ? "30px" : "36px",
160
+ minHeight: size === "small" ? "40px" : "52px",
161
+ maxHeight: size === "small" ? "40px" : "52px",
153
162
  display: "flex",
154
- alignItems: "center"
163
+ justifyContent: "center",
164
+ alignItems: "center",
165
+ borderRadius: "7px",
166
+ mr: 0.4
155
167
  }
156
168
  },
157
169
  /* @__PURE__ */ React.createElement(
158
- Box,
170
+ Image,
159
171
  {
160
- sx: {
161
- backgroundColor: "#172554",
162
- width: size === "small" ? "30px" : "36px",
163
- minHeight: size === "small" ? "40px" : "52px",
164
- maxHeight: size === "small" ? "40px" : "52px",
165
- display: "flex",
166
- justifyContent: "center",
167
- alignItems: "center",
168
- borderRadius: "7px",
169
- mr: 0.4
170
- }
171
- },
172
- /* @__PURE__ */ React.createElement(
173
- Image,
174
- {
175
- src: "/assets/images/iran-flag-dark.svg",
176
- alt: "Iran Flag",
177
- width: size === "small" ? 16 : 20,
178
- height: size === "small" ? 14 : 12
179
- }
180
- )
172
+ src: "/assets/images/iran-flag-dark.svg",
173
+ alt: "Iran Flag",
174
+ width: size === "small" ? 32 : 40,
175
+ height: size === "small" ? 28 : 34
176
+ }
181
177
  )
182
- ),
178
+ )),
183
179
  /* @__PURE__ */ React.createElement(
184
180
  Box,
185
181
  {
@@ -202,150 +198,103 @@ function LicensePlate({
202
198
  type: "text",
203
199
  maxLength: 2,
204
200
  placeholder: "- -",
205
- style: {
206
- color: theme3.palette.text.primary,
207
- width: "24px",
208
- textAlign: "center",
209
- backgroundColor: "transparent",
210
- outline: "none",
211
- cursor: readOnly || !!data && readOnly ? "" : "text"
212
- },
201
+ style: inputStyle,
213
202
  value: convertToPersianDigits(inputValues.input1),
214
- onChange: (e) => {
215
- const value = e.target.value;
216
- const englishValue = convertToEnglishDigits(value);
217
- if (/^\d*$/.test(englishValue)) {
218
- handleInputChange(value, "input1", 2);
219
- }
220
- }
203
+ onChange: (e) => handleInputChange(e.target.value, "input1", 2)
221
204
  }
222
205
  ),
223
- /* @__PURE__ */ React.createElement(
206
+ /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, !data && /* @__PURE__ */ React.createElement(
207
+ Image,
208
+ {
209
+ src: "/assets/images/solid-arrow-down.svg",
210
+ width: 20,
211
+ height: 20,
212
+ alt: "arrow",
213
+ style: { cursor: "pointer", marginRight: 4 }
214
+ }
215
+ ), /* @__PURE__ */ React.createElement(
216
+ "input",
217
+ {
218
+ disabled: readOnly || !!data && readOnly,
219
+ ref: inputRefs.input2,
220
+ onClick: () => {
221
+ if (!(readOnly || !!data && readOnly)) setOpen(true);
222
+ },
223
+ type: "text",
224
+ minLength: 1,
225
+ maxLength: 3,
226
+ placeholder: "-",
227
+ style: { ...inputStyle, width: "30px", cursor: "pointer" },
228
+ value: inputValues.input2,
229
+ readOnly: true
230
+ }
231
+ )),
232
+ /* @__PURE__ */ React.createElement(Dialog, { dir: "rtl", open, onClose: () => setOpen(false) }, /* @__PURE__ */ React.createElement(
224
233
  Box,
225
234
  {
226
235
  sx: {
227
236
  display: "flex",
228
- alignItems: "center"
229
- }
230
- },
231
- !data && /* @__PURE__ */ React.createElement(
232
- Image,
233
- {
234
- src: "/assets/images/solid-arrow-down.svg",
235
- width: 20,
236
- height: 20,
237
- alt: "arrow",
238
- style: { cursor: "pointer", marginRight: 4 }
239
- }
240
- ),
241
- /* @__PURE__ */ React.createElement(
242
- "input",
243
- {
244
- disabled: readOnly || !!data && readOnly,
245
- ref: inputRefs.input2,
246
- onClick: () => {
247
- if (!(readOnly || !!data && readOnly)) {
248
- setOpen(true);
249
- }
250
- },
251
- type: "text",
252
- minLength: 1,
253
- maxLength: 3,
254
- placeholder: "-",
255
- style: {
256
- color: theme3.palette.text.primary,
257
- width: "28px",
258
- textAlign: "center",
259
- backgroundColor: "transparent",
260
- outline: "none",
261
- cursor: readOnly || !!data && readOnly ? "" : "pointer"
262
- },
263
- value: inputValues.input2,
264
- readOnly: true
237
+ justifyContent: "space-between",
238
+ alignItems: "center",
239
+ backgroundColor: "#f5f5f5"
265
240
  }
266
- )
267
- ),
268
- /* @__PURE__ */ React.createElement(
269
- Dialog,
270
- {
271
- dir: "rtl",
272
- open,
273
- onClose: () => setOpen(false),
274
- "aria-labelledby": "alert-dialog-title",
275
- "aria-describedby": "alert-dialog-description"
276
241
  },
242
+ /* @__PURE__ */ React.createElement(DialogTitle, null, "\u0627\u0646\u062A\u062E\u0627\u0628 \u062D\u0631\u0641 \u067E\u0644\u0627\u06A9"),
277
243
  /* @__PURE__ */ React.createElement(
278
244
  Box,
279
245
  {
280
246
  sx: {
281
- display: "flex",
282
- justifyContent: "space-between",
283
- alignItems: "center",
284
- backgroundColor: "#f5f5f5"
285
- // bg-neutral-100
286
- }
287
- },
288
- /* @__PURE__ */ React.createElement(DialogTitle, { id: "alert-dialog-title" }, "\u0627\u0646\u062A\u062E\u0627\u0628 \u062D\u0631\u0641 \u067E\u0644\u0627\u06A9"),
289
- /* @__PURE__ */ React.createElement(
290
- Box,
291
- {
292
- sx: {
293
- cursor: "pointer",
294
- paddingRight: "1rem",
295
- color: "#737373"
296
- // text-neutral-500
297
- },
298
- onClick: () => setOpen(false)
247
+ cursor: "pointer",
248
+ paddingRight: "1rem",
249
+ color: "#737373"
299
250
  },
300
- /* @__PURE__ */ React.createElement(IconButton, null, /* @__PURE__ */ React.createElement(IoClose, null))
301
- )
302
- ),
303
- /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(
304
- Box,
305
- {
306
- sx: {
307
- display: "flex",
308
- alignItems: "center",
309
- justifyContent: "center",
310
- flexWrap: "wrap",
311
- gap: 2,
312
- my: 2
313
- }
251
+ onClick: () => setOpen(false)
314
252
  },
315
- letters_default.map((letter, index) => /* @__PURE__ */ React.createElement(
316
- Button,
317
- {
318
- key: index,
319
- variant: "outlined",
320
- color: "primary",
321
- sx: {
322
- border: "none",
323
- backgroundColor: "#f0f0f0",
324
- width: "70px",
325
- height: "50px",
326
- fontWeight: "bold",
327
- ":hover": {
328
- backgroundColor: "#e3e3e3"
329
- }
330
- },
331
- onClick: () => handleInputChange(letter, "input2", 3, 1)
332
- },
333
- /* @__PURE__ */ React.createElement(Typography, { color: "#117A4F", fontWeight: "bold" }, letter)
334
- ))
335
- ), /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", justifyContent: "center", mt: 2.5 } }, /* @__PURE__ */ React.createElement(
253
+ /* @__PURE__ */ React.createElement(IconButton, null, /* @__PURE__ */ React.createElement(IoClose, null))
254
+ )
255
+ ), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(
256
+ Box,
257
+ {
258
+ sx: {
259
+ display: "flex",
260
+ alignItems: "center",
261
+ justifyContent: "center",
262
+ flexWrap: "wrap",
263
+ gap: 2,
264
+ my: 2
265
+ }
266
+ },
267
+ letters_default.map((letter, index) => /* @__PURE__ */ React.createElement(
336
268
  Button,
337
269
  {
338
- sx: { width: "6rem" },
270
+ key: index,
339
271
  variant: "outlined",
340
- color: "error",
341
- onClick: () => {
342
- handleInputChange("", "input2", 3, 1);
343
- setOpen(false);
344
- }
272
+ color: "primary",
273
+ sx: {
274
+ border: "none",
275
+ backgroundColor: "#f0f0f0",
276
+ width: "70px",
277
+ height: "50px",
278
+ fontWeight: "bold",
279
+ ":hover": { backgroundColor: "#e3e3e3" }
280
+ },
281
+ onClick: () => handleInputChange(letter, "input2", 3, 1)
345
282
  },
346
- "\u062D\u0630\u0641 \u062D\u0631\u0641"
347
- )))
348
- ),
283
+ /* @__PURE__ */ React.createElement(Typography, { color: "#117A4F", fontWeight: "bold" }, letter)
284
+ ))
285
+ ), /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", justifyContent: "center", mt: 2.5 } }, /* @__PURE__ */ React.createElement(
286
+ Button,
287
+ {
288
+ sx: { width: "6rem" },
289
+ variant: "outlined",
290
+ color: "error",
291
+ onClick: () => {
292
+ handleInputChange("", "input2", 3, 1);
293
+ setOpen(false);
294
+ }
295
+ },
296
+ "\u062D\u0630\u0641 \u062D\u0631\u0641"
297
+ )))),
349
298
  /* @__PURE__ */ React.createElement(
350
299
  "input",
351
300
  {
@@ -354,33 +303,15 @@ function LicensePlate({
354
303
  type: "text",
355
304
  maxLength: 3,
356
305
  placeholder: "- - -",
357
- style: {
358
- color: theme3.palette.text.primary,
359
- width: "40px",
360
- // w-10
361
- textAlign: "center",
362
- backgroundColor: "transparent",
363
- outline: "none",
364
- cursor: readOnly || !!data && readOnly ? "" : "text"
365
- },
306
+ style: { ...inputStyle, width: "45px" },
366
307
  value: convertToPersianDigits(inputValues.input3),
367
- onChange: (e) => {
368
- const value = e.target.value;
369
- const englishValue = convertToEnglishDigits(value);
370
- if (/^\d*$/.test(englishValue)) {
371
- handleInputChange(value, "input3", 3);
372
- }
373
- }
308
+ onChange: (e) => handleInputChange(e.target.value, "input3", 3)
374
309
  }
375
310
  ),
376
311
  /* @__PURE__ */ React.createElement(
377
312
  Box,
378
313
  {
379
- sx: {
380
- height: "40px",
381
- width: "1px",
382
- backgroundColor: "#e5e7eb"
383
- }
314
+ sx: { height: "40px", width: "1px", backgroundColor: "#e5e7eb" }
384
315
  }
385
316
  ),
386
317
  /* @__PURE__ */ React.createElement(
@@ -389,7 +320,7 @@ function LicensePlate({
389
320
  sx: {
390
321
  display: "flex",
391
322
  flexDirection: "column-reverse",
392
- gap: size === "small" ? 0.25 : 1,
323
+ gap: size === "small" ? 0.25 : 0.5,
393
324
  alignItems: "center"
394
325
  }
395
326
  },
@@ -402,21 +333,11 @@ function LicensePlate({
402
333
  maxLength: 2,
403
334
  placeholder: "- -",
404
335
  style: {
405
- color: theme3.palette.text.primary,
406
- width: "24px",
407
- textAlign: "center",
408
- backgroundColor: "transparent",
409
- outline: "none",
410
- cursor: readOnly || !!data && readOnly ? "" : "text"
336
+ ...inputStyle,
337
+ width: size === "small" ? "32px" : "40px"
411
338
  },
412
339
  value: convertToPersianDigits(inputValues.input4),
413
- onChange: (e) => {
414
- const value = e.target.value;
415
- const englishValue = convertToEnglishDigits(value);
416
- if (/^\d*$/.test(englishValue)) {
417
- handleInputChange(value, "input4", 2);
418
- }
419
- }
340
+ onChange: (e) => handleInputChange(e.target.value, "input4", 2)
420
341
  }
421
342
  ),
422
343
  /* @__PURE__ */ React.createElement(
@@ -424,8 +345,9 @@ function LicensePlate({
424
345
  {
425
346
  src: "/assets/images/iran.svg",
426
347
  alt: "Iran",
427
- width: size === "small" ? 25 : 30,
428
- height: size === "small" ? 21 : 26
348
+ width: size === "small" ? 35 : 35,
349
+ height: size === "small" ? 5.55 : 7.666,
350
+ style: { margin: 0, display: "block" }
429
351
  }
430
352
  )
431
353
  )