@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.js CHANGED
@@ -147,7 +147,6 @@ function LicensePlate({
147
147
  }) {
148
148
  const theme3 = (0, import_material.useTheme)();
149
149
  const [open, setOpen] = (0, import_react.useState)(false);
150
- const [selectedValue, setSelectedValue] = (0, import_react.useState)("");
151
150
  const [inputValues, setInputValues] = (0, import_react.useState)({
152
151
  input1: "",
153
152
  input2: "",
@@ -164,12 +163,12 @@ function LicensePlate({
164
163
  if (data) {
165
164
  let newdata = data.split(" ").filter((word) => word !== "\u0627\u06CC\u0631\u0627\u0646");
166
165
  setInputValues({
167
- input1: newdata[0],
168
- input2: newdata[1],
169
- input3: newdata[2],
170
- input4: newdata[3]
166
+ input1: newdata[0] || "",
167
+ input2: newdata[1] || "",
168
+ input3: newdata[2] || "",
169
+ input4: newdata[3] || ""
171
170
  });
172
- } else if (data == "") {
171
+ } else {
173
172
  setInputValues({
174
173
  input1: "",
175
174
  input2: "",
@@ -181,9 +180,7 @@ function LicensePlate({
181
180
  const handleInputChange = (enteredInput, inputName, maxlength, minLength) => {
182
181
  if (inputName !== "input2") {
183
182
  const englishInput = (0, import_utils.convertToEnglishDigits)(enteredInput);
184
- if (!/^\d*$/.test(englishInput)) {
185
- return;
186
- }
183
+ if (!/^\d*$/.test(englishInput)) return;
187
184
  }
188
185
  const newInputValues = {
189
186
  ...inputValues,
@@ -193,16 +190,23 @@ function LicensePlate({
193
190
  const formattedPlate = (0, import_utils.convertToEnglishDigits)(newInputValues.input1) + " " + newInputValues.input2 + " " + (0, import_utils.convertToEnglishDigits)(newInputValues.input3) + " \u0627\u06CC\u0631\u0627\u0646 " + (0, import_utils.convertToEnglishDigits)(newInputValues.input4);
194
191
  setValue(name, formattedPlate);
195
192
  if (enteredInput.length === maxlength || minLength === 1) {
196
- if (inputName === "input1") {
197
- setOpen(true);
198
- } else if (inputName === "input2") {
199
- setSelectedValue(enteredInput);
193
+ if (inputName === "input1") setOpen(true);
194
+ else if (inputName === "input2") {
200
195
  setOpen(false);
201
- } else {
202
- inputRefs["input4"]?.current?.focus();
203
- }
196
+ } else inputRefs["input4"]?.current?.focus();
204
197
  }
205
198
  };
199
+ const inputStyle = {
200
+ color: theme3.palette.text.primary,
201
+ width: "30px",
202
+ textAlign: "center",
203
+ backgroundColor: "transparent",
204
+ outline: "none",
205
+ border: "none",
206
+ cursor: readOnly || !!data && readOnly ? "default" : "text",
207
+ fontSize: "1.25rem",
208
+ fontWeight: 600
209
+ };
206
210
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
207
211
  import_material.Box,
208
212
  {
@@ -211,44 +215,36 @@ function LicensePlate({
211
215
  border: "1px solid #e5e7eb",
212
216
  borderRadius: "7px",
213
217
  display: "flex",
214
- alignItems: "center"
218
+ alignItems: "center",
219
+ height: "3.5rem"
215
220
  },
216
221
  dir: "ltr"
217
222
  },
218
- /* @__PURE__ */ React.createElement(
223
+ /* @__PURE__ */ React.createElement(import_material.Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(
219
224
  import_material.Box,
220
225
  {
221
226
  sx: {
227
+ backgroundColor: "#172554",
228
+ width: size === "small" ? "30px" : "36px",
229
+ minHeight: size === "small" ? "40px" : "52px",
230
+ maxHeight: size === "small" ? "40px" : "52px",
222
231
  display: "flex",
223
- alignItems: "center"
232
+ justifyContent: "center",
233
+ alignItems: "center",
234
+ borderRadius: "7px",
235
+ mr: 0.4
224
236
  }
225
237
  },
226
238
  /* @__PURE__ */ React.createElement(
227
- import_material.Box,
239
+ import_image.default,
228
240
  {
229
- sx: {
230
- backgroundColor: "#172554",
231
- width: size === "small" ? "30px" : "36px",
232
- minHeight: size === "small" ? "40px" : "52px",
233
- maxHeight: size === "small" ? "40px" : "52px",
234
- display: "flex",
235
- justifyContent: "center",
236
- alignItems: "center",
237
- borderRadius: "7px",
238
- mr: 0.4
239
- }
240
- },
241
- /* @__PURE__ */ React.createElement(
242
- import_image.default,
243
- {
244
- src: "/assets/images/iran-flag-dark.svg",
245
- alt: "Iran Flag",
246
- width: size === "small" ? 16 : 20,
247
- height: size === "small" ? 14 : 12
248
- }
249
- )
241
+ src: "/assets/images/iran-flag-dark.svg",
242
+ alt: "Iran Flag",
243
+ width: size === "small" ? 32 : 40,
244
+ height: size === "small" ? 28 : 34
245
+ }
250
246
  )
251
- ),
247
+ )),
252
248
  /* @__PURE__ */ React.createElement(
253
249
  import_material.Box,
254
250
  {
@@ -271,150 +267,103 @@ function LicensePlate({
271
267
  type: "text",
272
268
  maxLength: 2,
273
269
  placeholder: "- -",
274
- style: {
275
- color: theme3.palette.text.primary,
276
- width: "24px",
277
- textAlign: "center",
278
- backgroundColor: "transparent",
279
- outline: "none",
280
- cursor: readOnly || !!data && readOnly ? "" : "text"
281
- },
270
+ style: inputStyle,
282
271
  value: (0, import_utils.convertToPersianDigits)(inputValues.input1),
283
- onChange: (e) => {
284
- const value = e.target.value;
285
- const englishValue = (0, import_utils.convertToEnglishDigits)(value);
286
- if (/^\d*$/.test(englishValue)) {
287
- handleInputChange(value, "input1", 2);
288
- }
289
- }
272
+ onChange: (e) => handleInputChange(e.target.value, "input1", 2)
290
273
  }
291
274
  ),
292
- /* @__PURE__ */ React.createElement(
275
+ /* @__PURE__ */ React.createElement(import_material.Box, { sx: { display: "flex", alignItems: "center" } }, !data && /* @__PURE__ */ React.createElement(
276
+ import_image.default,
277
+ {
278
+ src: "/assets/images/solid-arrow-down.svg",
279
+ width: 20,
280
+ height: 20,
281
+ alt: "arrow",
282
+ style: { cursor: "pointer", marginRight: 4 }
283
+ }
284
+ ), /* @__PURE__ */ React.createElement(
285
+ "input",
286
+ {
287
+ disabled: readOnly || !!data && readOnly,
288
+ ref: inputRefs.input2,
289
+ onClick: () => {
290
+ if (!(readOnly || !!data && readOnly)) setOpen(true);
291
+ },
292
+ type: "text",
293
+ minLength: 1,
294
+ maxLength: 3,
295
+ placeholder: "-",
296
+ style: { ...inputStyle, width: "30px", cursor: "pointer" },
297
+ value: inputValues.input2,
298
+ readOnly: true
299
+ }
300
+ )),
301
+ /* @__PURE__ */ React.createElement(import_Dialog.default, { dir: "rtl", open, onClose: () => setOpen(false) }, /* @__PURE__ */ React.createElement(
293
302
  import_material.Box,
294
303
  {
295
304
  sx: {
296
305
  display: "flex",
297
- alignItems: "center"
298
- }
299
- },
300
- !data && /* @__PURE__ */ React.createElement(
301
- import_image.default,
302
- {
303
- src: "/assets/images/solid-arrow-down.svg",
304
- width: 20,
305
- height: 20,
306
- alt: "arrow",
307
- style: { cursor: "pointer", marginRight: 4 }
308
- }
309
- ),
310
- /* @__PURE__ */ React.createElement(
311
- "input",
312
- {
313
- disabled: readOnly || !!data && readOnly,
314
- ref: inputRefs.input2,
315
- onClick: () => {
316
- if (!(readOnly || !!data && readOnly)) {
317
- setOpen(true);
318
- }
319
- },
320
- type: "text",
321
- minLength: 1,
322
- maxLength: 3,
323
- placeholder: "-",
324
- style: {
325
- color: theme3.palette.text.primary,
326
- width: "28px",
327
- textAlign: "center",
328
- backgroundColor: "transparent",
329
- outline: "none",
330
- cursor: readOnly || !!data && readOnly ? "" : "pointer"
331
- },
332
- value: inputValues.input2,
333
- readOnly: true
306
+ justifyContent: "space-between",
307
+ alignItems: "center",
308
+ backgroundColor: "#f5f5f5"
334
309
  }
335
- )
336
- ),
337
- /* @__PURE__ */ React.createElement(
338
- import_Dialog.default,
339
- {
340
- dir: "rtl",
341
- open,
342
- onClose: () => setOpen(false),
343
- "aria-labelledby": "alert-dialog-title",
344
- "aria-describedby": "alert-dialog-description"
345
310
  },
311
+ /* @__PURE__ */ React.createElement(import_DialogTitle.default, null, "\u0627\u0646\u062A\u062E\u0627\u0628 \u062D\u0631\u0641 \u067E\u0644\u0627\u06A9"),
346
312
  /* @__PURE__ */ React.createElement(
347
313
  import_material.Box,
348
314
  {
349
315
  sx: {
350
- display: "flex",
351
- justifyContent: "space-between",
352
- alignItems: "center",
353
- backgroundColor: "#f5f5f5"
354
- // bg-neutral-100
355
- }
356
- },
357
- /* @__PURE__ */ React.createElement(import_DialogTitle.default, { id: "alert-dialog-title" }, "\u0627\u0646\u062A\u062E\u0627\u0628 \u062D\u0631\u0641 \u067E\u0644\u0627\u06A9"),
358
- /* @__PURE__ */ React.createElement(
359
- import_material.Box,
360
- {
361
- sx: {
362
- cursor: "pointer",
363
- paddingRight: "1rem",
364
- color: "#737373"
365
- // text-neutral-500
366
- },
367
- onClick: () => setOpen(false)
316
+ cursor: "pointer",
317
+ paddingRight: "1rem",
318
+ color: "#737373"
368
319
  },
369
- /* @__PURE__ */ React.createElement(import_material.IconButton, null, /* @__PURE__ */ React.createElement(import_io5.IoClose, null))
370
- )
371
- ),
372
- /* @__PURE__ */ React.createElement(import_DialogContent.default, null, /* @__PURE__ */ React.createElement(
373
- import_material.Box,
374
- {
375
- sx: {
376
- display: "flex",
377
- alignItems: "center",
378
- justifyContent: "center",
379
- flexWrap: "wrap",
380
- gap: 2,
381
- my: 2
382
- }
320
+ onClick: () => setOpen(false)
383
321
  },
384
- letters_default.map((letter, index) => /* @__PURE__ */ React.createElement(
385
- import_Button.default,
386
- {
387
- key: index,
388
- variant: "outlined",
389
- color: "primary",
390
- sx: {
391
- border: "none",
392
- backgroundColor: "#f0f0f0",
393
- width: "70px",
394
- height: "50px",
395
- fontWeight: "bold",
396
- ":hover": {
397
- backgroundColor: "#e3e3e3"
398
- }
399
- },
400
- onClick: () => handleInputChange(letter, "input2", 3, 1)
401
- },
402
- /* @__PURE__ */ React.createElement(import_material.Typography, { color: "#117A4F", fontWeight: "bold" }, letter)
403
- ))
404
- ), /* @__PURE__ */ React.createElement(import_material.Box, { sx: { display: "flex", justifyContent: "center", mt: 2.5 } }, /* @__PURE__ */ React.createElement(
322
+ /* @__PURE__ */ React.createElement(import_material.IconButton, null, /* @__PURE__ */ React.createElement(import_io5.IoClose, null))
323
+ )
324
+ ), /* @__PURE__ */ React.createElement(import_DialogContent.default, null, /* @__PURE__ */ React.createElement(
325
+ import_material.Box,
326
+ {
327
+ sx: {
328
+ display: "flex",
329
+ alignItems: "center",
330
+ justifyContent: "center",
331
+ flexWrap: "wrap",
332
+ gap: 2,
333
+ my: 2
334
+ }
335
+ },
336
+ letters_default.map((letter, index) => /* @__PURE__ */ React.createElement(
405
337
  import_Button.default,
406
338
  {
407
- sx: { width: "6rem" },
339
+ key: index,
408
340
  variant: "outlined",
409
- color: "error",
410
- onClick: () => {
411
- handleInputChange("", "input2", 3, 1);
412
- setOpen(false);
413
- }
341
+ color: "primary",
342
+ sx: {
343
+ border: "none",
344
+ backgroundColor: "#f0f0f0",
345
+ width: "70px",
346
+ height: "50px",
347
+ fontWeight: "bold",
348
+ ":hover": { backgroundColor: "#e3e3e3" }
349
+ },
350
+ onClick: () => handleInputChange(letter, "input2", 3, 1)
414
351
  },
415
- "\u062D\u0630\u0641 \u062D\u0631\u0641"
416
- )))
417
- ),
352
+ /* @__PURE__ */ React.createElement(import_material.Typography, { color: "#117A4F", fontWeight: "bold" }, letter)
353
+ ))
354
+ ), /* @__PURE__ */ React.createElement(import_material.Box, { sx: { display: "flex", justifyContent: "center", mt: 2.5 } }, /* @__PURE__ */ React.createElement(
355
+ import_Button.default,
356
+ {
357
+ sx: { width: "6rem" },
358
+ variant: "outlined",
359
+ color: "error",
360
+ onClick: () => {
361
+ handleInputChange("", "input2", 3, 1);
362
+ setOpen(false);
363
+ }
364
+ },
365
+ "\u062D\u0630\u0641 \u062D\u0631\u0641"
366
+ )))),
418
367
  /* @__PURE__ */ React.createElement(
419
368
  "input",
420
369
  {
@@ -423,33 +372,15 @@ function LicensePlate({
423
372
  type: "text",
424
373
  maxLength: 3,
425
374
  placeholder: "- - -",
426
- style: {
427
- color: theme3.palette.text.primary,
428
- width: "40px",
429
- // w-10
430
- textAlign: "center",
431
- backgroundColor: "transparent",
432
- outline: "none",
433
- cursor: readOnly || !!data && readOnly ? "" : "text"
434
- },
375
+ style: { ...inputStyle, width: "45px" },
435
376
  value: (0, import_utils.convertToPersianDigits)(inputValues.input3),
436
- onChange: (e) => {
437
- const value = e.target.value;
438
- const englishValue = (0, import_utils.convertToEnglishDigits)(value);
439
- if (/^\d*$/.test(englishValue)) {
440
- handleInputChange(value, "input3", 3);
441
- }
442
- }
377
+ onChange: (e) => handleInputChange(e.target.value, "input3", 3)
443
378
  }
444
379
  ),
445
380
  /* @__PURE__ */ React.createElement(
446
381
  import_material.Box,
447
382
  {
448
- sx: {
449
- height: "40px",
450
- width: "1px",
451
- backgroundColor: "#e5e7eb"
452
- }
383
+ sx: { height: "40px", width: "1px", backgroundColor: "#e5e7eb" }
453
384
  }
454
385
  ),
455
386
  /* @__PURE__ */ React.createElement(
@@ -458,7 +389,7 @@ function LicensePlate({
458
389
  sx: {
459
390
  display: "flex",
460
391
  flexDirection: "column-reverse",
461
- gap: size === "small" ? 0.25 : 1,
392
+ gap: size === "small" ? 0.25 : 0.5,
462
393
  alignItems: "center"
463
394
  }
464
395
  },
@@ -471,21 +402,11 @@ function LicensePlate({
471
402
  maxLength: 2,
472
403
  placeholder: "- -",
473
404
  style: {
474
- color: theme3.palette.text.primary,
475
- width: "24px",
476
- textAlign: "center",
477
- backgroundColor: "transparent",
478
- outline: "none",
479
- cursor: readOnly || !!data && readOnly ? "" : "text"
405
+ ...inputStyle,
406
+ width: size === "small" ? "32px" : "40px"
480
407
  },
481
408
  value: (0, import_utils.convertToPersianDigits)(inputValues.input4),
482
- onChange: (e) => {
483
- const value = e.target.value;
484
- const englishValue = (0, import_utils.convertToEnglishDigits)(value);
485
- if (/^\d*$/.test(englishValue)) {
486
- handleInputChange(value, "input4", 2);
487
- }
488
- }
409
+ onChange: (e) => handleInputChange(e.target.value, "input4", 2)
489
410
  }
490
411
  ),
491
412
  /* @__PURE__ */ React.createElement(
@@ -493,8 +414,9 @@ function LicensePlate({
493
414
  {
494
415
  src: "/assets/images/iran.svg",
495
416
  alt: "Iran",
496
- width: size === "small" ? 25 : 30,
497
- height: size === "small" ? 21 : 26
417
+ width: size === "small" ? 35 : 35,
418
+ height: size === "small" ? 5.55 : 7.666,
419
+ style: { margin: 0, display: "block" }
498
420
  }
499
421
  )
500
422
  )